109 lines
2.6 KiB
Vue
109 lines
2.6 KiB
Vue
<template>
|
|
<div :class="currentEpisode ? 'margin' : ''">
|
|
<Loading v-if="loading" />
|
|
<ul v-if="!loading">
|
|
<NcListItem v-for="episode in episodes"
|
|
:key="episode.episodeGuid"
|
|
:active="isCurrentEpisode(episode)"
|
|
:class="episode.episodeAction && episode.episodeAction.position >= episode.episodeAction.total ? 'ended': ''"
|
|
:details="moment(episode.episodePubDate.date).fromNow()"
|
|
:force-display-actions="true"
|
|
:name="episode.episodeName"
|
|
:title="episode.episodeDescription">
|
|
<template #icon>
|
|
<NcAvatar :display-name="episode.episodeName"
|
|
:is-no-user="true"
|
|
:url="episode.episodeImage" />
|
|
</template>
|
|
<template #subname>
|
|
{{ formatTimer(new Date(episode.episodeDuration*1000)) }}
|
|
</template>
|
|
<template #actions>
|
|
<NcActionButton v-if="!isCurrentEpisode(episode)" @click="load(episode)">
|
|
<template #icon>
|
|
<PlayButton :size="20" />
|
|
</template>
|
|
{{ t('Play') }}
|
|
</NcActionButton>
|
|
<NcActionButton v-if="isCurrentEpisode(episode)" @click="load(null)">
|
|
<template #icon>
|
|
<StopButton :size="20" />
|
|
</template>
|
|
{{ t('Stop') }}
|
|
</NcActionButton>
|
|
</template>
|
|
</NcListItem>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
|
|
import Loading from '../Atoms/Loading.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 { formatTimer } from '../../utils/time.js'
|
|
import { generateUrl } from '@nextcloud/router'
|
|
import moment from '@nextcloud/moment'
|
|
import { showError } from '@nextcloud/dialogs'
|
|
|
|
export default {
|
|
name: 'Episodes',
|
|
components: {
|
|
Loading,
|
|
NcActionButton,
|
|
NcAvatar,
|
|
NcListItem,
|
|
PlayButton,
|
|
StopButton,
|
|
},
|
|
data() {
|
|
return {
|
|
episodes: [],
|
|
loading: true,
|
|
}
|
|
},
|
|
computed: {
|
|
currentEpisode() {
|
|
return this.$store.state.player.episode
|
|
},
|
|
url() {
|
|
return atob(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
|
|
} catch (e) {
|
|
console.error(e)
|
|
showError(t('Could not fetch episodes'))
|
|
} finally {
|
|
this.loading = false
|
|
}
|
|
},
|
|
methods: {
|
|
formatTimer,
|
|
moment,
|
|
isCurrentEpisode(episode) {
|
|
return this.currentEpisode && this.currentEpisode.episodeUrl === episode.episodeUrl
|
|
},
|
|
load(episode) {
|
|
this.$store.dispatch('player/load', episode)
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.ended {
|
|
opacity: .5;
|
|
}
|
|
|
|
.margin {
|
|
margin-bottom: 6rem;
|
|
}
|
|
</style>
|