Bottom bar ok

src/App.vue

@@ -2,11 +2,13 @@
 	<NcContent app-name="repod">
 		<GPodder v-if="!AppConfig.repod.gpodder" />
 		<Index v-if="AppConfig.repod.gpodder" />
+		<Bar />
 	</NcContent>
 </template>
 
 <script>
 import '@nextcloud/dialogs/dist/index.css'
+import Bar from './components/Player/Bar.vue'
 import GPodder from './views/GPodder.vue'
 import Index from './views/Index.vue'
 import { NcContent } from '@nextcloud/vue'
@@ -14,6 +16,7 @@ import { NcContent } from '@nextcloud/vue'
 export default {
 	name: 'App',
 	components: {
+		Bar,
 		GPodder,
 		Index,
 		NcContent,

src/components/Discover/Search.vue

@@ -48,6 +48,7 @@ export default {
 		},
 	},
 	methods: {
+		formatTimeAgo,
 		search: debounce(async function value() {
 			try {
 				const currentSearch = this.value
@@ -63,7 +64,6 @@ export default {
 		toUrl(url) {
 			return `/${btoa(url)}`
 		},
-		formatTimeAgo,
 	},
 }
 </script>

src/components/Feed/Banner.vue

@@ -16,7 +16,9 @@
 					<small>{{ description }}</small>
 				</p>
 			</div>
-			<NcAppNavigationNew v-if="!isSubscribed" :text="t('Subscribe')" @click="addSubscription">
+			<NcAppNavigationNew v-if="!isSubscribed"
+				:text="t('Subscribe')"
+				@click="addSubscription">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -91,10 +93,10 @@ export default {
 	}
 
 	.background {
-		filter: blur(.5rem) brightness(50%);
+		filter: blur(1rem) brightness(50%);
 		height: auto;
 		left: 0;
-		opacity: 0.4;
+		opacity: .4;
 		position: absolute;
 		top: 0;
 		width: 100%;

src/components/Feed/List.vue

@@ -1,7 +1,7 @@
 <template>
 	<fragment>
 		<NcLoadingIcon v-if="loading" />
-		<ul v-if="!loading">
+		<ul v-if="!loading" :style="{marginBottom: currentPlayingEpisode ? '5rem' : 'auto'}">
 			<NcListItem v-for="episode in episodes"
 				:key="episode.episodeUrl"
 				:details="formatTimeAgo(new Date(episode.episodePubDate.date))"
@@ -54,6 +54,9 @@ export default {
 		}
 	},
 	computed: {
+		currentPlayingEpisode() {
+			return this.$store.state.player.episode
+		},
 		url() {
 			return atob(this.$route.params.url)
 		},

src/components/Player/Bar.vue

@@ -1,10 +1,7 @@
 <template>
 	<fragment>
 		<div v-if="episode" class="footer">
-			<img class="background" :src="episode.episodeImage">
+			{{ 'oui' }}
-			<div class="content">
-				{{ 'oui' }}
-			</div>
 		</div>
 	</fragment>
 </template>
@@ -23,20 +20,12 @@ export default {
 
 <style scoped>
 	.footer {
-		position: relative;
+		background-color: red;
-	}
+		bottom: 0;
-
+		height: 5rem;
-	.background {
+		right: 0;
-		filter: blur(5rem) brightness(50%);
-		height: auto;
-		left: 0;
-		opacity: .4;
 		position: absolute;
-		top: 0;
 		width: 100%;
-	}
+		z-index: 2000;
-
-	.content {
-		position: relative;
 	}
 </style>

src/views/Discover.vue

@@ -1,6 +1,8 @@
 <template>
 	<NcAppContent class="main">
-		<NcTextField class="search" :label="t('Find a podcast')" :value.sync="search">
+		<NcTextField class="search"
+			:label="t('Find a podcast')"
+			:value.sync="search">
 			<Magnify :size="20" />
 		</NcTextField>
 		<Search v-if="search" :value="search" />

src/views/Index.vue

@@ -18,7 +18,6 @@
 			</NcAppContentList>
 		</NcAppNavigation>
 		<router-view :key="$route.path" />
-		<Bar />
 	</fragment>
 </template>
 
@@ -29,7 +28,6 @@ import {
 	NcAppNavigationNew,
 	NcLoadingIcon,
 } from '@nextcloud/vue'
-import Bar from '../components/Player/Bar.vue'
 import Item from '../components/Sidebar/Item.vue'
 import Plus from 'vue-material-design-icons/Plus.vue'
 import { showError } from '@nextcloud/dialogs'
@@ -37,7 +35,6 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Index',
 	components: {
-		Bar,
 		Item,
 		NcAppContentList,
 		NcAppNavigation,