Readd AdapatativeList

src/components/Atoms/AdaptativeList.vue

@@ -0,0 +1,22 @@
+<template>
+	<ul :class="episode ? 'margin' : ''">
+		<slot />
+	</ul>
+</template>
+
+<script>
+export default {
+	name: 'AdaptativeList',
+	computed: {
+		episode() {
+			return this.$store.state.player.episode
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.margin {
+		margin-bottom: 6rem;
+	}
+</style>

src/components/Discover/Search.vue

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<Loading v-if="loading" />
-		<ul v-if="!loading">
+		<AdaptativeList v-if="!loading">
 			<NcListItem v-for="feed in feeds"
 				:key="feed.link"
 				:details="moment(feed.fetchedAtUnix*1000).fromNow()"
@@ -16,12 +16,13 @@
 					{{ feed.author }}
 				</template>
 			</NcListItem>
-		</ul>
+		</AdaptativeList>
 	</div>
 </template>
 
 <script>
 import { NcAvatar, NcListItem } from '@nextcloud/vue'
+import AdaptativeList from '../Atoms/AdaptativeList.vue'
 import Loading from '../Atoms/Loading.vue'
 import axios from '@nextcloud/axios'
 import { debounce } from '../../utils/debounce.js'
@@ -32,6 +33,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Search',
 	components: {
+		AdaptativeList,
 		Loading,
 		NcAvatar,
 		NcListItem,

src/components/Feed/Episodes.vue

@@ -1,7 +1,7 @@
 <template>
-	<div :class="currentEpisode ? 'margin' : ''">
+	<div>
 		<Loading v-if="loading" />
-		<ul v-if="!loading">
+		<AdaptativeList v-if="!loading">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeGuid"
 				:active="isCurrentEpisode(episode)"
@@ -33,12 +33,13 @@
 					</NcActionButton>
 				</template>
 			</NcListItem>
-		</ul>
+		</AdaptativeList>
 	</div>
 </template>
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
+import AdaptativeList from '../Atoms/AdaptativeList.vue'
 import Loading from '../Atoms/Loading.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
@@ -51,6 +52,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Episodes',
 	components: {
+		AdaptativeList,
 		Loading,
 		NcActionButton,
 		NcAvatar,
@@ -101,8 +103,4 @@ export default {
 	.ended {
 		opacity: .5;
 	}
-
-	.margin {
-		margin-bottom: 6rem;
-	}
 </style>

src/components/Sidebar/Subscriptions.vue

@@ -1,5 +1,5 @@
 <template>
-	<NcAppNavigation :class="currentEpisode ? 'margin' : ''">
+	<NcAppNavigation>
 		<NcAppContentList>
 			<router-link to="/">
 				<NcAppNavigationNew :text="t('Add a podcast')">
@@ -9,17 +9,18 @@
 				</NcAppNavigationNew>
 			</router-link>
 			<Loading v-if="loading" />
-			<ul v-if="!loading">
+			<AdaptativeList v-if="!loading">
 				<Item v-for="subscriptionUrl of subscriptions"
 					:key="subscriptionUrl"
 					:url="subscriptionUrl" />
-			</ul>
+			</AdaptativeList>
 		</NcAppContentList>
 	</NcAppNavigation>
 </template>
 
 <script>
 import { NcAppContentList, NcAppNavigation, NcAppNavigationNew } from '@nextcloud/vue'
+import AdaptativeList from '../Atoms/AdaptativeList.vue'
 import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
@@ -28,6 +29,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Subscriptions',
 	components: {
+		AdaptativeList,
 		Item,
 		Loading,
 		NcAppContentList,
@@ -60,9 +62,3 @@ export default {
 	},
 }
 </script>
-
-<style scoped>
-	.margin {
-		margin-bottom: 6rem;
-	}
-</style>