src/components/Atoms/AppContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppContent :class="episode ? 'padding' : ''">
+	<NcAppContent :class="{ padding: episode }">
 		<slot />
 	</NcAppContent>
 </template>

src/components/Atoms/AppNavigation.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation :class="episode ? 'padding' : ''">
+	<NcAppNavigation :class="{ padding: episode }">
 		<slot />
 		<template #list>
 			<slot name="list" />

src/components/Feed/Episodes.vue

@@ -6,11 +6,11 @@
 				v-for="episode in filteredEpisodes"
 				:key="episode.guid"
 				:active="isCurrentEpisode(episode)"
-				:class="hasEnded(episode) ? 'ended' : ''"
 				:details="formatLocaleDate(new Date(episode.pubDate?.date))"
 				:force-display-actions="true"
 				:href="$route.href"
 				:name="episode.name"
+				:style="{ opacity: hasEnded(episode) ? 0.4 : 1 }"
 				target="_self"
 				:title="episode.description"
 				@click="modalEpisode = episode">
@@ -230,6 +230,7 @@ export default {
 		isListening(episode) {
 			return (
 				episode.action &&
+				episode.action.action &&
 				episode.action.action.toLowerCase() === 'play' &&
 				!this.hasEnded(episode)
 			)
@@ -252,6 +253,9 @@ export default {
 					[episode.action],
 				)
 				this.updateList(episode)
+				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'))
@@ -269,10 +273,6 @@ export default {
 </script>
 
 <style scoped>
-.ended {
-	opacity: 0.4;
-}
-
 .progress {
 	margin-top: 0.4rem;
 }