refactor: 💥 big rewrite to extract episode to his own component

src/components/Atoms/Modal.vue

@@ -1,25 +1,29 @@
 <template>
 	<div class="flex">
-		<NcAvatar :display-name="name" :is-no-user="true" :size="256" :url="image" />
+		<NcAvatar
-		<h2>{{ name }}</h2>
+			:display-name="episode.name"
-		<SafeHtml :source="description" />
+			:is-no-user="true"
+			:size="256"
+			:url="episode.image" />
+		<h2>{{ episode.name }}</h2>
+		<SafeHtml :source="episode.description" />
 		<div class="flex">
-			<NcButton v-if="link" :href="link" target="_blank">
+			<NcButton v-if="episode.link" :href="episode.link" target="_blank">
 				<template #icon>
 					<OpenInNewIcon :size="20" />
 				</template>
-				{{ title }}
+				{{ episode.title }}
 			</NcButton>
 			<NcButton
-				v-if="url"
+				v-if="episode.url"
-				:download="filenameFromUrl(url)"
+				:download="filenameFromUrl(episode.url)"
-				:href="url"
+				:href="episode.url"
 				target="_blank">
 				<template #icon>
 					<DownloadIcon :size="20" />
 				</template>
 				{{ t('repod', 'Download') }}
-				{{ size ? `(${humanFileSize(size)})` : '' }}
+				{{ episode.size ? `(${humanFileSize(episode.size)})` : '' }}
 			</NcButton>
 		</div>
 	</div>
@@ -43,32 +47,8 @@ export default {
 		SafeHtml,
 	},
 	props: {
-		description: {
+		episode: {
-			type: String,
+			type: Object,
-			default: '',
-		},
-		image: {
-			type: String,
-			required: true,
-		},
-		link: {
-			type: String,
-			default: null,
-		},
-		name: {
-			type: String,
-			required: true,
-		},
-		size: {
-			type: Number,
-			default: null,
-		},
-		title: {
-			type: String,
-			required: true,
-		},
-		url: {
-			type: String,
 			required: true,
 		},
 	},

src/components/Feed/Episode.vue

@@ -0,0 +1,203 @@
+<template>
+	<NcListItem
+		:active="isCurrentEpisode(episode)"
+		:details="!oneLine ? formatLocaleDate(new Date(episode.pubDate?.date)) : ''"
+		:force-display-actions="true"
+		:name="episode.name"
+		:one-line="oneLine"
+		:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
+		:title="episode.description"
+		@click="modalEpisode = episode">
+		<template #actions>
+			<NcActionButton
+				v-if="!isCurrentEpisode(episode)"
+				:aria-label="t('repod', 'Play')"
+				:title="t('repod', 'Play')"
+				@click="load(episode, url)">
+				<template #icon>
+					<PlayIcon :size="20" />
+				</template>
+			</NcActionButton>
+			<NcActionButton
+				v-if="isCurrentEpisode(episode)"
+				:aria-label="t('repod', 'Stop')"
+				:title="t('repod', 'Stop')"
+				@click="load(null)">
+				<template #icon>
+					<StopIcon :size="20" />
+				</template>
+			</NcActionButton>
+		</template>
+		<template #extra>
+			<NcActions>
+				<NcActionButton
+					v-if="episode.duration"
+					:aria-label="t('repod', 'Read')"
+					:disabled="loading"
+					:model-value="hasEnded(episode)"
+					:name="t('repod', 'Read')"
+					:title="t('repod', 'Read')"
+					@click="markAs(episode, !hasEnded(episode))">
+					<template #icon>
+						<PlaylistPlayIcon v-if="!hasEnded(episode)" :size="20" />
+						<PlaylistRemoveIcon v-if="hasEnded(episode)" :size="20" />
+					</template>
+				</NcActionButton>
+				<NcActionLink
+					v-if="episode.link"
+					:href="episode.link"
+					:name="t('repod', 'Open website')"
+					target="_blank"
+					:title="t('repod', 'Open website')">
+					<template #icon>
+						<OpenInNewIcon :size="20" />
+					</template>
+				</NcActionLink>
+				<NcActionLink
+					v-if="episode.url"
+					:download="filenameFromUrl(episode.url)"
+					:href="episode.url"
+					:name="t('repod', 'Download')"
+					target="_blank"
+					:title="t('repod', 'Download')">
+					<template #icon>
+						<DownloadIcon :size="20" />
+					</template>
+				</NcActionLink>
+			</NcActions>
+			<NcModal v-if="modalEpisode" @close="modalEpisode = null">
+				<Modal :episode="episode" />
+			</NcModal>
+		</template>
+		<template #icon>
+			<NcAvatar
+				:display-name="episode.name"
+				:is-no-user="true"
+				:url="episode.image" />
+		</template>
+		<template #indicator>
+			<NcProgressBar
+				v-if="isListening(episode) && !oneLine"
+				class="progress"
+				:value="(episode.action.position * 100) / episode.action.total" />
+		</template>
+		<template v-if="!oneLine" #subname>
+			{{ episode.duration }}
+		</template>
+	</NcListItem>
+</template>
+
+<script>
+import {
+	NcActionButton,
+	NcActionLink,
+	NcActions,
+	NcAvatar,
+	NcListItem,
+	NcModal,
+	NcProgressBar,
+} from '@nextcloud/vue'
+import {
+	durationToSeconds,
+	formatEpisodeTimestamp,
+	formatLocaleDate,
+} from '../../utils/time.js'
+import { hasEnded, isListening } from '../../utils/status.js'
+import { mapActions, mapState } from 'pinia'
+import DownloadIcon from 'vue-material-design-icons/Download.vue'
+import Modal from '../Atoms/Modal.vue'
+import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
+import PlayIcon from 'vue-material-design-icons/Play.vue'
+import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
+import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
+import StopIcon from 'vue-material-design-icons/Stop.vue'
+import axios from '@nextcloud/axios'
+import { filenameFromUrl } from '../../utils/url.js'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '../../utils/toast.js'
+import { usePlayer } from '../../store/player.js'
+
+export default {
+	name: 'Episode',
+	components: {
+		DownloadIcon,
+		Modal,
+		NcActionButton,
+		NcActionLink,
+		NcActions,
+		NcAvatar,
+		NcListItem,
+		NcModal,
+		NcProgressBar,
+		OpenInNewIcon,
+		PlayIcon,
+		PlaylistPlayIcon,
+		PlaylistRemoveIcon,
+		StopIcon,
+	},
+	props: {
+		episode: {
+			type: Object,
+			required: true,
+		},
+		oneLine: {
+			type: Boolean,
+			default: false,
+		},
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+	data: () => ({
+		loading: false,
+		modalEpisode: null,
+	}),
+	computed: {
+		...mapState(usePlayer, { playerEpisode: 'episode' }),
+	},
+	methods: {
+		...mapActions(usePlayer, ['load']),
+		formatLocaleDate,
+		hasEnded,
+		isListening,
+		filenameFromUrl,
+		isCurrentEpisode(episode) {
+			return this.playerEpisode?.url === episode.url
+		},
+		async markAs(episode, read) {
+			try {
+				this.loading = true
+				episode.action = {
+					podcast: this.url,
+					episode: episode.url,
+					guid: episode.guid,
+					action: 'play',
+					timestamp: formatEpisodeTimestamp(new Date()),
+					started: episode.action?.started || 0,
+					position: read ? durationToSeconds(episode.duration) : 0,
+					total: durationToSeconds(episode.duration),
+				}
+				await axios.post(
+					generateUrl('/apps/gpoddersync/episode_action/create'),
+					[episode.action],
+				)
+				if (read && this.isCurrentEpisode(episode)) {
+					this.load(null)
+				}
+			} catch (e) {
+				console.error(e)
+				showError(t('repod', 'Could not change the status of the episode'))
+			} finally {
+				this.loading = false
+			}
+		},
+	},
+}
+</script>
+
+<style scoped>
+.progress {
+	margin-top: 0.4rem;
+}
+</style>

src/components/Feed/Episodes.vue

@@ -2,138 +2,23 @@
 	<div>
 		<Loading v-if="loading" />
 		<ul v-if="!loading">
-			<NcListItem
+			<Episode
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
-				:active="isCurrentEpisode(episode)"
+				:episode="episode"
-				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
+				:url="url" />
-				:force-display-actions="true"
-				:name="episode.name"
-				:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
-				target="_self"
-				:title="episode.description"
-				@click="modalEpisode = episode">
-				<template #actions>
-					<NcActionButton
-						v-if="!isCurrentEpisode(episode)"
-						:aria-label="t('repod', 'Play')"
-						:title="t('repod', 'Play')"
-						@click="load(episode, url)">
-						<template #icon>
-							<PlayIcon :size="20" />
-						</template>
-					</NcActionButton>
-					<NcActionButton
-						v-if="isCurrentEpisode(episode)"
-						:aria-label="t('repod', 'Stop')"
-						:title="t('repod', 'Stop')"
-						@click="load(null)">
-						<template #icon>
-							<StopIcon :size="20" />
-						</template>
-					</NcActionButton>
-				</template>
-				<template #extra>
-					<NcActions>
-						<NcActionButton
-							v-if="episode.duration"
-							:aria-label="t('repod', 'Read')"
-							:disabled="loadingAction"
-							:model-value="hasEnded(episode)"
-							:name="t('repod', 'Read')"
-							:title="t('repod', 'Read')"
-							@update:modelValue="markAs(episode, !hasEnded(episode))">
-							<template #icon>
-								<PlaylistPlayIcon
-									v-if="!hasEnded(episode)"
-									:size="20" />
-								<PlaylistRemoveIcon
-									v-if="hasEnded(episode)"
-									:size="20" />
-							</template>
-						</NcActionButton>
-						<NcActionLink
-							v-if="episode.link"
-							:href="episode.link"
-							:name="t('repod', 'Open website')"
-							target="_blank"
-							:title="t('repod', 'Open website')">
-							<template #icon>
-								<OpenInNewIcon :size="20" />
-							</template>
-						</NcActionLink>
-						<NcActionLink
-							v-if="episode.url"
-							:download="filenameFromUrl(episode.url)"
-							:href="episode.url"
-							:name="t('repod', 'Download')"
-							target="_blank"
-							:title="t('repod', 'Download')">
-							<template #icon>
-								<DownloadIcon :size="20" />
-							</template>
-						</NcActionLink>
-					</NcActions>
-				</template>
-				<template #icon>
-					<NcAvatar
-						:display-name="episode.name"
-						:is-no-user="true"
-						:url="episode.image" />
-				</template>
-				<template #indicator>
-					<NcProgressBar
-						v-if="isListening(episode)"
-						class="progress"
-						:value="
-							(episode.action.position * 100) / episode.action.total
-						" />
-				</template>
-				<template #subname>
-					{{ episode.duration }}
-				</template>
-			</NcListItem>
 		</ul>
-		<NcModal v-if="modalEpisode" @close="modalEpisode = null">
-			<Modal
-				:description="modalEpisode.description"
-				:image="modalEpisode.image"
-				:link="modalEpisode.link"
-				:name="modalEpisode.name"
-				:size="modalEpisode.size"
-				:title="modalEpisode.title"
-				:url="modalEpisode.url" />
-		</NcModal>
 	</div>
 </template>
 
 <script>
-import {
+import { hasEnded, isListening } from '../../utils/status.js'
-	NcActionButton,
+import Episode from './Episode.vue'
-	NcActionLink,
-	NcActions,
-	NcAvatar,
-	NcListItem,
-	NcModal,
-	NcProgressBar,
-} from '@nextcloud/vue'
-import { decodeUrl, filenameFromUrl } from '../../utils/url.js'
-import {
-	durationToSeconds,
-	formatEpisodeTimestamp,
-	formatLocaleDate,
-} from '../../utils/time.js'
-import { mapActions, mapState } from 'pinia'
-import DownloadIcon from 'vue-material-design-icons/Download.vue'
 import Loading from '../Atoms/Loading.vue'
-import Modal from '../Atoms/Modal.vue'
-import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
-import PlayIcon from 'vue-material-design-icons/Play.vue'
-import PlaylistPlayIcon from 'vue-material-design-icons/PlaylistPlay.vue'
-import PlaylistRemoveIcon from 'vue-material-design-icons/PlaylistRemove.vue'
-import StopIcon from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
+import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
+import { mapState } from 'pinia'
 import { showError } from '../../utils/toast.js'
 import { usePlayer } from '../../store/player.js'
 import { useSettings } from '../../store/settings.js'
@@ -141,27 +26,12 @@ import { useSettings } from '../../store/settings.js'
 export default {
 	name: 'Episodes',
 	components: {
-		DownloadIcon,
+		Episode,
 		Loading,
-		Modal,
-		NcActionButton,
-		NcActionLink,
-		NcActions,
-		NcAvatar,
-		NcListItem,
-		NcModal,
-		NcProgressBar,
-		OpenInNewIcon,
-		PlayIcon,
-		PlaylistPlayIcon,
-		PlaylistRemoveIcon,
-		StopIcon,
 	},
 	data: () => ({
 		episodes: [],
 		loading: true,
-		loadingAction: false,
-		modalEpisode: null,
 	}),
 	computed: {
 		...mapState(usePlayer, ['episode']),
@@ -215,63 +85,8 @@ export default {
 		}
 	},
 	methods: {
-		...mapActions(usePlayer, ['load']),
+		hasEnded,
-		filenameFromUrl,
+		isListening,
-		formatLocaleDate,
-		hasEnded(episode) {
-			return (
-				episode.action &&
-				(episode.action.action === 'DELETE' ||
-					(episode.action.position > 0 &&
-						episode.action.total > 0 &&
-						episode.action.position >= episode.action.total))
-			)
-		},
-		isCurrentEpisode(episode) {
-			return this.episode && this.episode.url === episode.url
-		},
-		isListening(episode) {
-			return (
-				episode.action &&
-				episode.action.action &&
-				episode.action.action.toLowerCase() === 'play' &&
-				episode.action.position > 0 &&
-				!this.hasEnded(episode)
-			)
-		},
-		async markAs(episode, read) {
-			try {
-				this.loadingAction = true
-				episode.action = {
-					podcast: this.url,
-					episode: episode.url,
-					guid: episode.guid,
-					action: 'play',
-					timestamp: formatEpisodeTimestamp(new Date()),
-					started: episode.action ? episode.action.started : 0,
-					position: read ? durationToSeconds(episode.duration) : 0,
-					total: durationToSeconds(episode.duration),
-				}
-				await axios.post(
-					generateUrl('/apps/gpoddersync/episode_action/create'),
-					[episode.action],
-				)
-				if (read && this.episode && episode.url === this.episode.url) {
-					this.load(null)
-				}
-			} catch (e) {
-				console.error(e)
-				showError(t('repod', 'Could not change the status of the episode'))
-			} finally {
-				this.loadingAction = false
-			}
-		},
 	},
 }
 </script>
-
-<style scoped>
-.progress {
-	margin-top: 0.4rem;
-}
-</style>

src/components/Feed/Favorites.vue

@@ -0,0 +1,97 @@
+<template>
+	<NcGuestContent class="guest">
+		<Loading v-if="!currentFavoriteData" />
+		<NcAvatar
+			v-if="currentFavoriteData"
+			:display-name="currentFavoriteData.author || currentFavoriteData.title"
+			:is-no-user="true"
+			:size="222"
+			:url="currentFavoriteData.imageUrl" />
+		<div class="list">
+			<h2>{{ currentFavoriteData.title }}</h2>
+			<Loading v-if="loading" />
+			<ul v-if="!loading">
+				<Episode
+					v-for="episode in episodes"
+					:key="episode.guid"
+					:episode="episode"
+					:one-line="true"
+					:url="url" />
+			</ul>
+		</div>
+	</NcGuestContent>
+</template>
+
+<script>
+import { NcAvatar, NcGuestContent } from '@nextcloud/vue'
+import Episode from './Episode.vue'
+import Loading from '../Atoms/Loading.vue'
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+import { hasEnded } from '../../utils/status.js'
+import { mapState } from 'pinia'
+import { showError } from '../../utils/toast.js'
+import { useSubscriptions } from '../../store/subscriptions.js'
+
+export default {
+	name: 'Favorites',
+	components: {
+		Episode,
+		Loading,
+		NcAvatar,
+		NcGuestContent,
+	},
+	props: {
+		url: {
+			type: String,
+			required: true,
+		},
+	},
+	data: () => ({
+		episodes: [],
+		loading: true,
+	}),
+	computed: {
+		...mapState(useSubscriptions, ['favs']),
+		currentFavoriteData() {
+			return this.favs.find((fav) => fav.url === this.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),
+				)
+				.filter((episode) => !this.hasEnded(episode))
+				.slice(0, 4)
+		} catch (e) {
+			console.error(e)
+			showError(t('repod', 'Could not fetch episodes'))
+		} finally {
+			this.loading = false
+		}
+	},
+	methods: {
+		hasEnded,
+	},
+}
+</script>
+
+<style scoped>
+.guest {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+}
+
+.list {
+	flex: 1;
+}
+</style>

src/components/Home/Favorites.vue

@@ -1,39 +0,0 @@
-<template>
-	<NcGuestContent>
-		<Loading v-if="!currentFavoriteData" class="loading" />
-		<NcAvatar
-			v-if="currentFavoriteData"
-			:display-name="currentFavoriteData.author || currentFavoriteData.title"
-			:is-no-user="true"
-			:size="222"
-			:url="currentFavoriteData.imageUrl" />
-	</NcGuestContent>
-</template>
-
-<script>
-import { NcAvatar, NcGuestContent } from '@nextcloud/vue'
-import Loading from '../Atoms/Loading.vue'
-import { mapState } from 'pinia'
-import { useSubscriptions } from '../../store/subscriptions.js'
-
-export default {
-	name: 'Favorites',
-	components: {
-		Loading,
-		NcAvatar,
-		NcGuestContent,
-	},
-	props: {
-		url: {
-			type: String,
-			required: true,
-		},
-	},
-	computed: {
-		...mapState(useSubscriptions, ['favs']),
-		currentFavoriteData() {
-			return this.favs.find((fav) => fav.url === this.url)
-		},
-	},
-}
-</script>

src/components/Player/Infos.vue

@@ -7,14 +7,7 @@
 			<i>{{ episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
-			<Modal
+			<Modal :episode="episode" />
-				:description="episode.description"
-				:image="episode.image"
-				:link="episode.link"
-				:name="episode.name"
-				:size="episode.size"
-				:title="episode.title"
-				:url="episode.url" />
 		</NcModal>
 	</div>
 </template>

src/components/Sidebar/Subscription.vue

@@ -52,7 +52,7 @@ import { toFeedUrl } from '../../utils/url.js'
 import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
-	name: 'Item',
+	name: 'Subscription',
 	components: {
 		AlertIcon,
 		DeleteIcon,

src/components/Sidebar/Subscriptions.vue

@@ -11,13 +11,14 @@
 				</router-link>
 				<Loading v-if="loading" />
 				<NcAppNavigationList v-if="!loading">
-					<Item
+					<Subscription
 						v-for="url of favs
 							.sort((fav) => fav.lastPub)
-							.map((fav) => fav.url)"
+							.map((fav) => fav.url)
+							.filter((url) => subs.includes(url))"
 						:key="url"
 						:url="url" />
-					<Item
+					<Subscription
 						v-for="url of subs.filter(
 							(sub) => !favs.map((fav) => fav.url).includes(sub),
 						)"
@@ -40,10 +41,10 @@ import {
 } from '@nextcloud/vue'
 import { mapActions, mapState } from 'pinia'
 import AppNavigation from '../Atoms/AppNavigation.vue'
-import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import Settings from '../Settings/Settings.vue'
+import Subscription from './Subscription.vue'
 import { showError } from '../../utils/toast.js'
 import { useSubscriptions } from '../../store/subscriptions.js'
 
@@ -51,13 +52,13 @@ export default {
 	name: 'Subscriptions',
 	components: {
 		AppNavigation,
-		Item,
 		Loading,
 		NcAppContentList,
 		NcAppNavigationList,
 		NcAppNavigationNew,
 		PlusIcon,
 		Settings,
+		Subscription,
 	},
 	data: () => ({
 		loading: true,

src/store/player.js

@@ -48,8 +48,7 @@ export const usePlayer = defineStore('player', {
 				} catch {}
 
 				if (
-					this.episode.action &&
+					this.episode.action?.position &&
-					this.episode.action.position &&
 					this.episode.action.position < this.episode.action.total
 				) {
 					audio.currentTime = this.episode.action.position

src/utils/status.js

@@ -0,0 +1,14 @@
+export const hasEnded = (episode) =>
+	episode.action &&
+	episode.action.action &&
+	(episode.action.action.toLowerCase() === 'delete' ||
+		(episode.action.position > 0 &&
+			episode.action.total > 0 &&
+			episode.action.position >= episode.action.total))
+
+export const isListening = (episode) =>
+	episode.action &&
+	episode.action.action &&
+	episode.action.action.toLowerCase() === 'play' &&
+	episode.action.position > 0 &&
+	!hasEnded(episode)

src/views/Home.vue

@@ -24,7 +24,7 @@
 <script>
 import AppContent from '../components/Atoms/AppContent.vue'
 import EmptyContent from '../components/Atoms/EmptyContent.vue'
-import Favorites from '../components/Home/Favorites.vue'
+import Favorites from '../components/Feed/Favorites.vue'
 import StarOffIcon from 'vue-material-design-icons/StarOff.vue'
 import { mapState } from 'pinia'
 import { useSubscriptions } from '../store/subscriptions.js'