126 lines
3.1 KiB
Vue
126 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<Loading v-if="loading" />
|
|
<ul v-if="!loading">
|
|
<NcListItem v-for="episode in episodes"
|
|
:key="episode.guid"
|
|
:active="isCurrentEpisode(episode)"
|
|
:class="hasEnded(episode) ? 'ended': ''"
|
|
:details="moment(episode.pubDate.date).fromNow()"
|
|
:force-display-actions="true"
|
|
:name="episode.name"
|
|
:title="episode.description"
|
|
@click="modalEpisode = episode">
|
|
<template #icon>
|
|
<NcAvatar :display-name="episode.name"
|
|
:is-no-user="true"
|
|
:url="episode.image" />
|
|
</template>
|
|
<template #subname>
|
|
{{ episode.duration }}
|
|
</template>
|
|
<template #actions>
|
|
<NcActionButton v-if="!isCurrentEpisode(episode)" @click="load(episode)">
|
|
<template #icon>
|
|
<PlayButton :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Play') }}
|
|
</NcActionButton>
|
|
<NcActionButton v-if="isCurrentEpisode(episode)" @click="load(null)">
|
|
<template #icon>
|
|
<StopButton :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Stop') }}
|
|
</NcActionButton>
|
|
</template>
|
|
<template #extra>
|
|
<NcModal :show="modalEpisode && modalEpisode.guid === episode.guid" @close="modalEpisode = null">
|
|
<Modal :description="episode.description"
|
|
:image="episode.image"
|
|
:link="episode.link"
|
|
:name="episode.name"
|
|
:size="episode.size"
|
|
:title="episode.title"
|
|
:url="episode.url" />
|
|
</NcModal>
|
|
</template>
|
|
</NcListItem>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcActionButton, NcAvatar, NcListItem, NcModal } from '@nextcloud/vue'
|
|
import Loading from '../Atoms/Loading.vue'
|
|
import Modal from '../Atoms/Modal.vue'
|
|
import PlayButton from 'vue-material-design-icons/Play.vue'
|
|
import StopButton from 'vue-material-design-icons/Stop.vue'
|
|
import axios from '@nextcloud/axios'
|
|
import { decodeUrl } from '../../utils/url.js'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import moment from '@nextcloud/moment'
|
|
import { showError } from '@nextcloud/dialogs'
|
|
|
|
export default {
|
|
name: 'Episodes',
|
|
components: {
|
|
Loading,
|
|
Modal,
|
|
NcActionButton,
|
|
NcAvatar,
|
|
NcListItem,
|
|
NcModal,
|
|
PlayButton,
|
|
StopButton,
|
|
},
|
|
data() {
|
|
return {
|
|
episodes: [],
|
|
loading: true,
|
|
modalEpisode: null,
|
|
}
|
|
},
|
|
computed: {
|
|
currentEpisode() {
|
|
return this.$store.state.player.episode
|
|
},
|
|
url() {
|
|
return decodeUrl(this.$route.params.url)
|
|
},
|
|
},
|
|
async mounted() {
|
|
try {
|
|
this.loading = true
|
|
const episodes = await axios.get(generateUrl('/apps/repod/episodes/list?url={url}', { url: this.url }))
|
|
this.episodes = [...episodes.data].sort((a, b) => new Date(b.pubDate.date) - new Date(a.pubDate.date))
|
|
} catch (e) {
|
|
console.error(e)
|
|
showError(t('repod', 'Could not fetch episodes'))
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
methods: {
|
|
moment,
|
|
hasEnded(episode) {
|
|
return episode.action
|
|
&& episode.action.position > 0
|
|
&& episode.action.total > 0
|
|
&& episode.action.position >= episode.action.total
|
|
},
|
|
isCurrentEpisode(episode) {
|
|
return this.currentEpisode && this.currentEpisode.url === episode.url
|
|
},
|
|
load(episode) {
|
|
this.$store.dispatch('player/load', episode)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ended {
|
|
opacity: .5;
|
|
}
|
|
</style>
|