mirror of https://github.com/Kylart/KawAnime.git
350 lines
8.1 KiB
Vue
Executable File
350 lines
8.1 KiB
Vue
Executable File
<template xmlns:v-tooltip="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
|
|
<v-container fluid class="container">
|
|
<div v-if="$store.state.releases.length">
|
|
<v-row style="margin: 0 1% 0 1%;">
|
|
<v-col md2 sm2 xs12 class="time-container">
|
|
<span class="update-time">Updated at: {{ lastUpdateTime }}</span>
|
|
</v-col>
|
|
<v-col md6 sm3 xs0></v-col>
|
|
<v-col md2 sm3 xs12>
|
|
<v-select
|
|
class="select"
|
|
v-bind:items="fansubList"
|
|
v-model="$store.state.releaseFansub"
|
|
label="Fansub"
|
|
dark
|
|
single-line
|
|
hint="Pick a fansub"
|
|
persistent-hint
|
|
/>
|
|
</v-col>
|
|
<v-col md1 sm2 xs12>
|
|
<v-select
|
|
class="select"
|
|
v-bind:items="qualityList"
|
|
v-model="$store.state.releaseQuality"
|
|
label="Quality"
|
|
dark
|
|
single-line
|
|
hint="Which quality ?"
|
|
persistent-hint
|
|
/>
|
|
</v-col>
|
|
<v-col md1 sm1 xs12 class="refresh-button-container">
|
|
<v-btn icon
|
|
class="refresh-button"
|
|
@click.native="refresh()">
|
|
<v-icon large>refresh</v-icon>
|
|
</v-btn>
|
|
</v-col>
|
|
<template v-for="item in $store.state.releases">
|
|
<v-col xs12 md6 xl4
|
|
class="elem">
|
|
<v-card class="elem-content elevation-3" v-ripple="true">
|
|
<v-card-text class="elem-card">
|
|
<v-container fluid style="padding: 0;">
|
|
<v-row>
|
|
<v-col class="elem-title" xs9 v-tooltip:top="{ html: item.name }">
|
|
<h6>{{ item.name }}</h6>
|
|
</v-col>
|
|
<v-col v-tooltip:top="{ html: 'Episode ' + item.ep }" class="elem-ep text-xs-right" xs3>
|
|
<h6>Ep {{ item.ep }}</h6>
|
|
</v-col>
|
|
<v-col class="elem-image"
|
|
xl5 lg4 md5 sm4>
|
|
<img v-bind:src="item.picture" height="200" class="picture"/>
|
|
</v-col>
|
|
<v-col xl7 lg8 md7 sm8>
|
|
<div class="elem-text-links">
|
|
<div class="synopsis">
|
|
<p>{{ item.synopsis }}</p>
|
|
</div>
|
|
<div class="links">
|
|
<a :href="item.magnetLink" class="download-button">
|
|
<v-btn dark flat
|
|
@click.native="print(item)"
|
|
class="btn--light-flat-pressed">
|
|
Download
|
|
</v-btn>
|
|
</a>
|
|
<v-menu transition="v-slide-x-transition">
|
|
<v-btn flat dark slot="activator">
|
|
More
|
|
</v-btn>
|
|
<v-list>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-title v-on:click.stop="openModal(item.name, item.fullSynopsis)">
|
|
Check synopsis
|
|
</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-title v-on:click.stop="downloadAll(item.name)">
|
|
Download all episodes
|
|
</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-title>Information</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-title>Add to my Watch list</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
<v-list-item>
|
|
<v-list-tile>
|
|
<v-list-tile-title>Add to «Watching»</v-list-tile-title>
|
|
</v-list-tile>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
</div>
|
|
</div>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
</v-card>
|
|
</v-col>
|
|
</template>
|
|
</v-row>
|
|
</div>
|
|
<loader v-else></loader>
|
|
<div class="text-xs-center modal-container">
|
|
<v-dialog v-model="modal" width="70%">
|
|
<v-card class="secondary white--text">
|
|
<v-card-text class="white--text">
|
|
<h2 class="title">{{ modalTitle }}</h2>
|
|
</v-card-text>
|
|
<v-card-text class="subheading white--text">
|
|
{{ modalText }}
|
|
</v-card-text>
|
|
<v-card-row actions>
|
|
<v-spacer></v-spacer>
|
|
<v-btn primary dark
|
|
style="width: 100px;"
|
|
v-on:click.native="modal = false">Thanks!
|
|
</v-btn>
|
|
</v-card-row>
|
|
</v-card>
|
|
</v-dialog>
|
|
</div>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import Loader from '~components/loader.vue'
|
|
|
|
export default {
|
|
data () {
|
|
return {
|
|
modal: false,
|
|
modalTitle: '',
|
|
modalText: '',
|
|
fansubList: [
|
|
'HorribleSubs',
|
|
'PuyaSubs',
|
|
'BakedFish',
|
|
'DeadFish',
|
|
'DefinitelyNotMe'
|
|
],
|
|
qualityList: ['480p', '720p', '1080p']
|
|
}
|
|
},
|
|
computed: {
|
|
releases: function () {
|
|
return this.$store.state.releases
|
|
},
|
|
lastUpdateTime: function () {
|
|
return this.$store.state.releasesUpdateTime
|
|
}
|
|
},
|
|
watch: {
|
|
releases: function () {
|
|
const newTime = (new Date()).toLocaleTimeString()
|
|
this.$store.commit('setReleasesUpdateTime', newTime)
|
|
}
|
|
},
|
|
components: {
|
|
Loader
|
|
},
|
|
methods: {
|
|
openModal(title, text) {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: Opening modal`)
|
|
|
|
this.modalTitle = title
|
|
this.modalText = text
|
|
|
|
this.modal = true
|
|
},
|
|
downloadAll(name) {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: Sending a request to download all episodes of ${name}`)
|
|
|
|
name = name.split(' ').slice(0, -2).join(' ')
|
|
const quality = this.$store.state.releaseQuality
|
|
|
|
axios.post('download', {
|
|
name: name,
|
|
quality: quality,
|
|
fromEp: 0,
|
|
untilEp: 20000
|
|
}).then(({data}) => {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: Server responded!`)
|
|
|
|
data.forEach((link) => {
|
|
window.open(link)
|
|
})
|
|
}).catch((err) => {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: An error occurred... ${err}`)
|
|
this.$store.commit('setErrorSnackbar', `An error occurred while getting ${name}.`)
|
|
})
|
|
},
|
|
refresh() {
|
|
this.$store.dispatch('refreshReleases')
|
|
},
|
|
print(item) {
|
|
console.log(`[${(new Date()).toLocaleTimeString()}]: Downloading ${item.name}.`)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
p
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.select
|
|
{
|
|
margin: 10px 0 5px 0;
|
|
}
|
|
|
|
/* ----- Refresh button ----- */
|
|
.refresh-button-container
|
|
{
|
|
display: inline-block;
|
|
margin-top: 5px;
|
|
margin-bottom: 2px;
|
|
text-align: center;
|
|
padding: 0;
|
|
align-self: center;
|
|
}
|
|
|
|
.refresh-button
|
|
{
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Needed */
|
|
/*noinspection CssUnusedSymbol*/
|
|
.icon--large
|
|
{
|
|
height: 2.5rem;
|
|
}
|
|
|
|
.time-container
|
|
{
|
|
align-self: center;
|
|
}
|
|
|
|
.update-time
|
|
{
|
|
padding-left: 20px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
font-style: italic;
|
|
}
|
|
|
|
.elem
|
|
{
|
|
color: rgba(255, 255, 255, 0.8);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.elem-content
|
|
{
|
|
background-color: rgb(60, 60, 60);
|
|
cursor: default;
|
|
}
|
|
|
|
.elem-content:hover
|
|
{
|
|
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12) !important;
|
|
}
|
|
|
|
.elem-card
|
|
{
|
|
padding: 0 10px 0 0;
|
|
}
|
|
|
|
.elem-title h6
|
|
{
|
|
padding-left: 10px;
|
|
margin-top: 10px;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.elem-ep h6
|
|
{
|
|
margin-top: 10px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.elem-image
|
|
{
|
|
height: 200px;
|
|
}
|
|
|
|
.picture
|
|
{
|
|
max-width: 140px;
|
|
}
|
|
|
|
.elem-text-links
|
|
{
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.synopsis
|
|
{
|
|
height: 75%;
|
|
text-align: justify;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.links
|
|
{
|
|
height: 25%;
|
|
position: absolute;
|
|
bottom: 5px;
|
|
right: -2px;
|
|
display: flex;
|
|
}
|
|
|
|
.download-button
|
|
{
|
|
text-decoration: none;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.modal-container .title
|
|
{
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
</style>
|