mirror of https://github.com/Kylart/KawAnime.git
Button 'More' implemented, working on more's UI
This commit is contained in:
Kylart
parent
3be6b8ef41
commit
aaf6235b34
|
|
@ -83,7 +83,7 @@ function startTorrent () {
|
|||
openCmd = 'xdg-open '
|
||||
break
|
||||
case 'win32':
|
||||
openCmd = ''
|
||||
openCmd = 'start '
|
||||
}
|
||||
|
||||
exec(openCmd + torrents, (error, stdout, stderr) => {
|
||||
|
|
|
|||
|
|
@ -174,7 +174,7 @@ let container = new Vue({
|
|||
|
||||
function makeResearch(name) {
|
||||
mal.fromName(name).then(anime => {
|
||||
let t0 = performance.now();
|
||||
let t0 = performance.now()
|
||||
animeData.title = anime.title
|
||||
animeData.japaneseTitle = anime.japaneseTitle
|
||||
animeData.image = anime.image
|
||||
|
|
@ -188,7 +188,7 @@ function makeResearch(name) {
|
|||
animeData.type = anime.type.split(' ').slice(0, 3).join(' ')
|
||||
animeData.characters = anime.characters
|
||||
animeData.staff = anime.staff
|
||||
let t1 = performance.now();
|
||||
let t1 = performance.now()
|
||||
console.log("Information gathered in " + (t1 - t0) + " seconds.")
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,58 @@ body
|
|||
{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
/*content: url('../resources/totoro-hoola-hoop.gif');*/
|
||||
margin-left: 20%;
|
||||
margin-right: 20%;
|
||||
content: url('https://media.giphy.com/media/pt0EKLDJmVvlS/giphy.gif');
|
||||
}
|
||||
|
||||
/* ----------------- INFOS ----------------- */
|
||||
#info-container
|
||||
{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
|
||||
#info-container .mdl-grid
|
||||
{
|
||||
padding-top: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#info-picture
|
||||
{
|
||||
margin-left: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
#info-title
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#info-title h5
|
||||
{
|
||||
margin: 2% 0 0 0;
|
||||
}
|
||||
|
||||
#synopsis-container
|
||||
{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#synopsis-container pre
|
||||
{
|
||||
box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
||||
margin-top: 0;
|
||||
line-height: 130%;
|
||||
text-align: justify;
|
||||
text-indent: 20px;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
font-family: inherit;
|
||||
padding: 3% 3% 3% 3%;
|
||||
background-color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
48
index.html
48
index.html
|
|
@ -66,10 +66,11 @@
|
|||
<!-- Flat button with ripple -->
|
||||
<button @click="download(release.link, release.realTitle)"
|
||||
class="link-download mdl-button mdl-js-button mdl-js-ripple-effect">
|
||||
<a> <!-- :href="release.link" -->download!</a>
|
||||
<a>download!</a>
|
||||
</button>
|
||||
<!-- Flat button with ripple -->
|
||||
<button class="link-more mdl-button mdl-js-button mdl-js-ripple-effect">
|
||||
<button @click="searchThis(release.realTitle)"
|
||||
class="link-more mdl-button mdl-js-button mdl-js-ripple-effect">
|
||||
<a href="#">more</a>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -81,7 +82,48 @@
|
|||
<div class="loading-text">
|
||||
<h3>少々お待ち下さい。</h3>
|
||||
</div>
|
||||
<div class="loader-gif" v-bind:style="{ content: 'url(' + gif + ')' }"></div>
|
||||
<div class="loader-gif" ></div>
|
||||
</div>
|
||||
<div id="info-container" v-if="show" v-bind:style="{ display: display }">
|
||||
<div class="mdl-grid">
|
||||
<div id="info-picture"
|
||||
class="mdl-cell mdl-cell--3-col mdl-cell--4-col-tablet">
|
||||
<div v-bind:style="{ content: 'url(' + infos.image + ')'}"></div>
|
||||
</div>
|
||||
<div id="title-synopsis-container" class="mdl-cell mdl-cell--9-col mdl-cell--8-col-tablet">
|
||||
<div id="info-title">
|
||||
<h5>{{ infos.title }}</h5>
|
||||
</div>
|
||||
<div @click="test()" id="synopsis-container">
|
||||
<pre>{{ infos.synopsis }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--4-col mdl-cell--4-col-phone">
|
||||
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--6-col mdl-cell--6-col-phone">
|
||||
<div class="studios">
|
||||
<h6>Studios</h6>
|
||||
<ul>
|
||||
<li v-for="studio in infos.studios">{{ studio }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="characters">
|
||||
<h6>Characters</h6>
|
||||
<ul>
|
||||
<li v-for="character in infos.characters">
|
||||
<p>{{ character.name }}</p>
|
||||
<p>{{ character.actor }}</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--2-col mdl-cell--2-col-phone">
|
||||
<!-- For some reason, those generate warnings on initial render-->
|
||||
<p>{{ infos.stats.score.value}}</p>
|
||||
<p>{{ infos.stats.ranking}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
2
main.js
2
main.js
|
|
@ -18,7 +18,7 @@ function createWindow () {
|
|||
height: 800,
|
||||
titleBarStyle: 'hidden',
|
||||
show: false,
|
||||
title: 'KawAnime',
|
||||
title: 'KawAnime'
|
||||
})
|
||||
|
||||
// and load the index.html of the app.
|
||||
|
|
|
|||
243
renderer.js
243
renderer.js
|
|
@ -2,6 +2,8 @@
|
|||
// be executed in the renderer process for that window.
|
||||
// All of the Node.js APIs are available in this process.
|
||||
|
||||
/* ------------------ IMPORTS ------------------ */
|
||||
|
||||
const remote = require('electron').remote
|
||||
const main = remote.require('./main.js')
|
||||
const fs = require('fs')
|
||||
|
|
@ -18,6 +20,9 @@ const mal = require('malapi').Anime
|
|||
// Nyaa API
|
||||
const Nyaa = require('node-nyaa-api')
|
||||
|
||||
/* ----------------- END IMPORTS ----------------- */
|
||||
|
||||
/* ----------------- FUNCTIONS ----------------- */
|
||||
|
||||
function reduceString(string) {
|
||||
if (string.length > 100)
|
||||
|
|
@ -42,89 +47,49 @@ function getNameOnly(name) {
|
|||
return tmp.join(' ')
|
||||
}
|
||||
|
||||
function getNameForResearch(name) {
|
||||
let tmp = getNameOnly(name).split(' ')
|
||||
tmp.pop() // Episode number
|
||||
|
||||
return tmp.join(' ')
|
||||
}
|
||||
|
||||
// Make the research for the latest animes
|
||||
Nyaa.get_latest( function (err, animes) {
|
||||
if (err) throw err
|
||||
function getLatest () {
|
||||
Nyaa.get_latest( function (err, animes) {
|
||||
// Initialize
|
||||
releases.releases = []
|
||||
releases.show = false
|
||||
loader.show = true
|
||||
if (err) throw err
|
||||
|
||||
for(let anime in animes)
|
||||
{
|
||||
if (horribleSubsFilter(animes[anime].title))
|
||||
for(let anime in animes)
|
||||
{
|
||||
let tmp = animes[anime].title.split(' ')
|
||||
tmp.pop() // Remove the episode number
|
||||
tmp.pop() // Remove the annoying '-'
|
||||
if (horribleSubsFilter(animes[anime].title))
|
||||
{
|
||||
let tmp = animes[anime].title.split(' ')
|
||||
tmp.pop() // Remove the extension
|
||||
tmp.pop() // Remove the episode number
|
||||
tmp.shift()
|
||||
|
||||
// Make the actual research
|
||||
mal.fromName(tmp.join(' ')).then(result => {
|
||||
releases.releases.push({
|
||||
realTitle: animes[anime].title,
|
||||
title: getNameOnly(animes[anime].title),
|
||||
link: animes[anime].link,
|
||||
synopsis: reduceString(result.synopsis),
|
||||
picture: result.image
|
||||
// Make the actual research
|
||||
mal.fromName(tmp.join(' ')).then(result => {
|
||||
releases.releases.push({
|
||||
realTitle: animes[anime].title,
|
||||
title: getNameOnly(animes[anime].title),
|
||||
link: animes[anime].link,
|
||||
synopsis: reduceString(result.synopsis),
|
||||
picture: result.image
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
setTimeout( () => {
|
||||
loader.show = false
|
||||
releases.show = true
|
||||
}, 3000)
|
||||
|
||||
})
|
||||
|
||||
let releases = new Vue({
|
||||
el: '#releases',
|
||||
data: {
|
||||
releases: [],
|
||||
show: false
|
||||
},
|
||||
watch: {
|
||||
releases: function () { // Whenever releases changes, this function will run
|
||||
// Code
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
download: function (url, name) {
|
||||
startTorrent(url, name)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let loader = new Vue({
|
||||
el: '#loader-container',
|
||||
data: {
|
||||
show: true,
|
||||
gif: path.join(__dirname, 'resources', 'totoro-hoola-hoop.gif')
|
||||
},
|
||||
methods: {
|
||||
test: function () {
|
||||
this.show = false
|
||||
setTimeout( () => {
|
||||
loader.show = false
|
||||
releases.show = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Vue object to open the other pages
|
||||
new Vue({
|
||||
el: '.mdl-navigation',
|
||||
methods: {
|
||||
getDownloader: function () {
|
||||
main.openDownloader()
|
||||
},
|
||||
getInfoPage: function () {
|
||||
main.getInfoPage()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// For the greeting's message
|
||||
new Vue({
|
||||
el: '.greetings',
|
||||
data: {
|
||||
username: os.userInfo().username
|
||||
}
|
||||
})
|
||||
}, 3000)
|
||||
})
|
||||
}
|
||||
|
||||
function downloadFile (file_url, name){
|
||||
let req = request({
|
||||
|
|
@ -166,3 +131,129 @@ function startTorrent (file_url, name) {
|
|||
console.log(`stderr: ${stderr}`)
|
||||
})
|
||||
}
|
||||
|
||||
function makeResearchOnMal (name) {
|
||||
|
||||
mal.fromName(name).then(anime => {
|
||||
info.infos.title = anime.title
|
||||
info.infos.japTitle = anime.japaneseTitle
|
||||
info.infos.image = anime.image
|
||||
info.infos.synopsis = anime.synopsis
|
||||
info.infos.episodes = anime.episoes
|
||||
info.infos.studios = anime.studios
|
||||
info.infos.stats = anime.statistics
|
||||
info.infos.genres = anime.genres
|
||||
info.infos.type = anime.type.split(' ').slice(0, 3).join(' ')
|
||||
info.infos.characters = anime.characters
|
||||
info.infos.staff = anime.staff
|
||||
|
||||
releases.show = false
|
||||
loader.show = false
|
||||
info.display = 'block'
|
||||
info.show = true
|
||||
})
|
||||
}
|
||||
|
||||
/* -------------------- END FUNCTIONS ----------------- */
|
||||
|
||||
// First research at kawAnime's start
|
||||
getLatest()
|
||||
|
||||
/* ------------------- VUE.JS OBJECTS ----------------- */
|
||||
|
||||
|
||||
let releases = new Vue({
|
||||
el: '#releases',
|
||||
data: {
|
||||
releases: [],
|
||||
show: false
|
||||
},
|
||||
watch: {
|
||||
releases: function () { // Whenever releases changes, this function will run
|
||||
// Code
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
download: function (url, name) {
|
||||
startTorrent(url, name)
|
||||
},
|
||||
refresh: function () {
|
||||
getLatest()
|
||||
},
|
||||
searchThis: function (arg) {
|
||||
info.infos = {}
|
||||
this.show = false
|
||||
loader.show = true
|
||||
makeResearchOnMal(getNameForResearch(arg))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let loader = new Vue({
|
||||
el: '#loader-container',
|
||||
data: {
|
||||
show: true
|
||||
},
|
||||
methods: {
|
||||
test: function () {
|
||||
this.show = false
|
||||
releases.show = true
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
let info = new Vue({
|
||||
el: '#info-container',
|
||||
data: {
|
||||
infos: {
|
||||
stats: {
|
||||
score: {value: ''},
|
||||
ranking: ''
|
||||
}
|
||||
},
|
||||
display: 'none',
|
||||
show: false
|
||||
},
|
||||
methods: {
|
||||
downlaodThis: function () {
|
||||
|
||||
},
|
||||
show: function () {
|
||||
this.display = 'block'
|
||||
this.show = true
|
||||
},
|
||||
hide: function () {
|
||||
this.show = false
|
||||
},
|
||||
test: function () {
|
||||
this.hide()
|
||||
releases.show = true
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
infos: function () {
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Vue object to open the other pages
|
||||
new Vue({
|
||||
el: '.mdl-navigation',
|
||||
methods: {
|
||||
getDownloader: function () {
|
||||
main.openDownloader()
|
||||
},
|
||||
getInfoPage: function () {
|
||||
main.getInfoPage()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// For the greeting's message
|
||||
new Vue({
|
||||
el: '.greetings',
|
||||
data: {
|
||||
username: os.userInfo().username
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue