Reorganize List

src/components/Atoms/List.vue

@@ -0,0 +1,16 @@
+<template>
+	<ul :style="{marginBottom: episode ? '6rem' : 'auto'}">
+		<slot />
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'List',
+	computed: {
+		episode() {
+			return this.$store.state.player.episode
+		},
+	},
+}
+</script>

src/components/Discover/Search.vue

@@ -1,5 +1,5 @@
 <template>
-	<ul :style="{marginBottom: episode ? '6rem' : 'auto'}">
+	<List>
 		<NcListItem v-for="feed in feeds"
 			:key="feed.link"
 			:details="formatTimeAgo(new Date(feed.fetchedAtUnix*1000))"
@@ -14,11 +14,12 @@
 				{{ feed.author }}
 			</template>
 		</NcListItem>
-	</ul>
+	</List>
 </template>
 
 <script>
 import { NcAvatar, NcListItem } from '@nextcloud/vue'
+import List from '../Atoms/List.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
 import { formatTimeAgo } from '../../utils/time.js'
@@ -28,6 +29,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Search',
 	components: {
+		List,
 		NcAvatar,
 		NcListItem,
 	},
@@ -42,11 +44,6 @@ export default {
 			feeds: [],
 		}
 	},
-	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
-	},
 	watch: {
 		value() {
 			this.search()

src/components/Feed/Episodes.vue

@@ -1,12 +1,14 @@
 <template>
 	<div>
 		<NcLoadingIcon v-if="loading" />
-		<ul v-if="!loading" :style="{marginBottom: currentEpisode ? '6rem' : 'auto'}">
+		<List v-if="!loading">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeGuid"
+				:active="isCurrentEpisode(episode)"
 				:details="formatTimeAgo(new Date(episode.episodePubDate.date))"
 				:force-display-actions="true"
 				:name="episode.episodeName"
+				:style="{opacity: episode.episodeAction && episode.episodeAction.position >= episode.episodeAction.total ? '.5' : 1}"
 				:title="episode.episodeDescription">
 				<template #icon>
 					<NcAvatar :display-name="episode.episodeName"
@@ -31,13 +33,14 @@
 					</NcActionButton>
 				</template>
 			</NcListItem>
-		</ul>
+		</List>
 	</div>
 </template>
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem, NcLoadingIcon } from '@nextcloud/vue'
 import { formatTimeAgo, formatTimer } from '../../utils/time.js'
+import List from '../Atoms/List.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
 import axios from '@nextcloud/axios'
@@ -45,8 +48,9 @@ import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
 
 export default {
-	name: 'List',
+	name: 'Episodes',
 	components: {
+		List,
 		NcActionButton,
 		NcAvatar,
 		NcListItem,

src/components/Sidebar/Subscriptions.vue

@@ -9,11 +9,11 @@
 				</NcAppNavigationNew>
 			</router-link>
 			<NcLoadingIcon v-if="loading" />
-			<ul v-if="!loading" :style="{marginBottom: episode ? '6rem' : 'auto'}">
+			<List v-if="!loading">
 				<Item v-for="subscriptionUrl of subscriptions"
 					:key="subscriptionUrl"
 					:url="subscriptionUrl" />
-			</ul>
+			</List>
 		</NcAppContentList>
 	</NcAppNavigation>
 </template>
@@ -26,6 +26,7 @@ import {
 	NcLoadingIcon,
 } from '@nextcloud/vue'
 import Item from './Item.vue'
+import List from '../Atoms/List.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showError } from '@nextcloud/dialogs'
 
@@ -33,6 +34,7 @@ export default {
 	name: 'Subscriptions',
 	components: {
 		Item,
+		List,
 		NcAppContentList,
 		NcAppNavigation,
 		NcAppNavigationNew,
@@ -45,9 +47,6 @@ export default {
 		}
 	},
 	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
 		subscriptions() {
 			return this.$store.state.subscriptions.subscriptions
 		},

src/views/Feed.vue

@@ -12,7 +12,7 @@
 			:image-url="feed.imageUrl"
 			:link="feed.link"
 			:title="feed.title" />
-		<List v-if="feed" />
+		<Episodes v-if="feed" />
 	</NcAppContent>
 </template>
 
@@ -20,7 +20,7 @@
 import { NcAppContent, NcEmptyContent, NcLoadingIcon } from '@nextcloud/vue'
 import Alert from 'vue-material-design-icons/Alert.vue'
 import Banner from '../components/Feed/Banner.vue'
-import List from '../components/Feed/List.vue'
+import Episodes from '../components/Feed/Episodes.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 
@@ -29,10 +29,10 @@ export default {
 	components: {
 		Alert,
 		Banner,
+		Episodes,
 		NcAppContent,
 		NcEmptyContent,
 		NcLoadingIcon,
-		List,
 	},
 	data() {
 		return {