v-container#local-page.pa-0(fluid)
div(v-if='nbEps')
v-layout(row, wrap, style='margin: 0 1%;')
v-flex.menubar(xs12)
v-layout(row, wrap)
v-flex(hidden-sm-and-up, xs1)
v-flex.menu-eps(xs3, sm2, md2)
p.menu-eps-text {{ nbEps }} {{ episodeLabel }}
v-flex(xs4, offset-xs1, sm2, offset-sm0, md2)
history-modal
v-flex(xs3, sm2, md2)
v-switch(
:label="inside ? 'Inside' : 'Outside'",
color='primary',
v-model='inside',
dark,
persistent-hint,
hint='Play in KawAnime?'
)
v-flex.menu-buttons(xs12, sm6, offset-md1, md5, offset-lg2, lg4, offset-xl3, xl3)
v-btn.refresh-button(icon, v-if='!this.$store.state.localFiles.refreshing', @click='refresh()')
v-icon(large) refresh
v-btn.refresh-button(v-else, icon, loading)
v-btn.change-dir-button(flat, dark, @click='changePath()')
| Change dir
v-btn.reset-cache-button(color='secondary', dark, @click='resetLocal()', v-if='!this.$store.state.localFiles.resetting')
| Refresh local info
v-btn.reset-cache-button(color='secondary', dark, loading, v-else)
transition-group(name='list')
template(v-for='item in files')
v-flex.elem(:key='item.path', xs12, sm6, md4, xl3)
v-card.pt-1.elem-content.elevation-3(ripple)
v-layout.elem-container.ma-0(row, wrap)
v-flex(xs7)
v-tooltip(top)
h6.elem-title.ellipsis(slot='activator') {{ item.name }}
span {{ item.name }}
v-flex.elem-ep.text-xs-right(xs2)
v-tooltip(top)
p.ellipsis.ep(slot='activator') {{ item.ep }} / {{ item.numberOfEpisode }}
span {{ 'Episode ' + item.ep }}
v-flex.buttons-container(xs3)
v-btn.ma-0(large, icon, @click='playThis(item)')
v-icon(large) play_circle_outline
v-menu(open-on-hover, transition='slide-x-transition')
v-btn.ml-0(icon, medium, slot='activator')
v-icon more_vert
v-list.dark
v-list-tile(@click='showChoices(item.name)')
v-list-tile-action
v-icon add_box
v-list-tile-title
| Add to
v-list-tile(@click='delThis(item)')
v-list-tile-action
v-icon.primary--text(medium) delete_forever
v-list-tile-title.primary--text Delete
v-flex(xs8)
v-tooltip(top)
p.ellipsis.genres(slot='activator')
| {{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
span {{ item.genres.length ? item.genres.join(', ') : 'No specified genre' }}
v-flex(xs4)
v-tooltip(top)
p.ellipsis.classification(slot='activator')
| {{ item.classification.replace('None', 'No restriction') }}
span {{ item.classification.replace('None', 'No restriction') }}
v-flex.picture-container(xl5, lg4, md5, xs4)
lazy-component
img.picture(:src='item.picture', onerror="this.src='static/images/error.jpg'")
v-flex.bottom-right-container(xl7, lg8, md7, xs8)
v-layout.pl-2.pr-2.pb-2(row, wrap, justify-space-between)
v-flex(xs12)
.synopsis {{ item.synopsis }}
v-flex(xs12, style='display: flex')
v-layout(align-center, justify-space-between, style='min-width: 100%')
v-flex(xs2)
p.year {{ item.year }}
v-flex(xs7)
p.status {{ item.status }}
v-flex(xs3)
p.mark {{ item.mark }}
v-container#empty(fluid, v-else)
transition(name='fade')
img.empty-bg(v-if='emptyBg', height='400', src='~static/images/empty-bg.png')
v-layout(row, wrap)
v-flex.menubar(xs12)
v-layout(row, wrap)
v-flex(offset-xs2, xs2)
history-modal
v-flex(xs5)
v-flex.menu-buttons(xs3)
v-btn.refresh-button(icon, v-if='!this.$store.state.localFiles.refreshing', @click='refresh()')
v-icon(large) refresh
v-btn.refresh-button(v-else, icon, loading)
v-btn.change-dir-button(flat, dark, @click='changePath()')
| Change dir
v-flex.empty-message(xs12)
h3 Wow such empty!
h4
| Start downloading anime
router-link.green--text(to='/downloader') here
| or
router-link.cyan--text(to='/') here!