repod/src/components/Feed/Episodes.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('Play') }}
					</NcActionButton>
					<NcActionButton v-if="isCurrentEpisode(episode)" @click="load(null)">
						<template #icon>
							<StopButton :size="20" />
						</template>
						{{ t('Stop') }}
					</NcActionButton>
				</template>
			</NcListItem>
		</AdaptativeList>
		<NcModal v-if="modalEpisode"
			size="small"
			@close="modalEpisode = null">
			<div class="modal-content">
				<NcAvatar :display-name="modalEpisode.episodeName"
					:is-no-user="true"
					size="256"
					:url="modalEpisode.episodeImage" />
				<h2>{{ modalEpisode.episodeName }}</h2>
				{{ modalEpisode.episodeDescription }}
				<div class="modal-buttons">
					<NcButton v-if="modalEpisode.episodeLink" :href="modalEpisode.episodeLink" target="_blank">
						<template #icon>
							<OpenInNew :size="20" />
						</template>
						{{ modalEpisode.podcastName }}
					</NcButton>
					<NcButton v-if="modalEpisode.episodeUrl" :href="modalEpisode.episodeUrl" target="_blank">
						<template #icon>
							<Download :size="20" />
						</template>
						{{ t('Download') }}
					</NcButton>
				</div>
			</div>
		</NcModal>
	</div>
</template>

<script>
import { NcActionButton, NcAvatar, NcButton, NcListItem, NcModal } from '@nextcloud/vue'
import AdaptativeList from '../Atoms/AdaptativeList.vue'
import Download from 'vue-material-design-icons/Download.vue'
import Loading from '../Atoms/Loading.vue'
import OpenInNew from 'vue-material-design-icons/OpenInNew.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,
		Download,
		Loading,
		NcActionButton,
		NcAvatar,
		NcButton,
		NcListItem,
		NcModal,
		OpenInNew,
		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
		} 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;
	}

	.modal-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
		margin: 2rem;
	}

	.modal-buttons {
		display: flex;
		gap: 1rem;
	}
</style>