122 lines
3.2 KiB
Vue
122 lines
3.2 KiB
Vue
<template>
|
|
<div>
|
|
<Loading v-if="loading" />
|
|
<AdaptativeList 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"
|
|
@click="modalEpisode = episode">
|
|
<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('repod', 'Play') }}
|
|
</NcActionButton>
|
|
<NcActionButton v-if="isCurrentEpisode(episode)" @click="load(null)">
|
|
<template #icon>
|
|
<StopButton :size="20" />
|
|
</template>
|
|
{{ t('repod', 'Stop') }}
|
|
</NcActionButton>
|
|
</template>
|
|
</NcListItem>
|
|
</AdaptativeList>
|
|
<NcModal v-if="modalEpisode"
|
|
size="small"
|
|
@close="modalEpisode = null">
|
|
<Modal :episode-description="modalEpisode.episodeDescription"
|
|
:episode-image="modalEpisode.episodeImage"
|
|
:episode-link="modalEpisode.episodeLink"
|
|
:episode-name="modalEpisode.episodeName"
|
|
:episode-url="modalEpisode.episodeUrl"
|
|
:podcast-name="modalEpisode.podcastName" />
|
|
</NcModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { NcActionButton, NcAvatar, NcListItem, NcModal } from '@nextcloud/vue'
|
|
import AdaptativeList from '../Atoms/AdaptativeList.vue'
|
|
import Loading from '../Atoms/Loading.vue'
|
|
import Modal from './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 { 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: {
|
|
AdaptativeList,
|
|
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 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].sort((a, b) => a.episodePubDate.date < b.episodePubDate.date)
|
|
} catch (e) {
|
|
console.error(e)
|
|
showError(t('repod', '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;
|
|
}
|
|
</style>
|