Subscription ok

src/components/Discover/TopItem.vue

@@ -1,16 +1,12 @@
 <template>
-	<a @click="addSubscription">
+	<router-link :to="toUrl(link)">
 		<img :alt="`${title} - ${author}`"
 			:src="imageUrl"
 			:title="author">
-	</a>
+	</router-link>
 </template>
 
 <script>
-import axios from '@nextcloud/axios'
-import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
-
 export default {
 	name: 'TopItem',
 	components: {},
@@ -33,15 +29,8 @@ export default {
 		},
 	},
 	methods: {
-		async addSubscription() {
-			try {
-				await axios.post(generateUrl('/apps/gpoddersync/subscription_change/create'), { add: [this.link], remove: [] })
-			} catch (e) {
-				console.error(e)
-				showError(t('Error while adding the feed'))
-			}
-
-			this.$store.dispatch('subscriptions/fetch')
+		toUrl(url) {
+			return `/${btoa(url)}`
 		},
 	},
 }

src/components/Feed/Banner.vue

@@ -16,7 +16,7 @@
 					<small>{{ description }}</small>
 				</p>
 			</div>
-			<NcAppNavigationNew :text="t('Subscribe')" @click="addSubscription">
+			<NcAppNavigationNew v-if="!isSubscribed" :text="t('Subscribe')" @click="addSubscription">
 				<template #icon>
 					<Plus :size="20" />
 				</template>
@@ -65,6 +65,9 @@ export default {
 		url() {
 			return atob(this.$route.params.url)
 		},
+		isSubscribed() {
+			return this.$store.state.subscriptions.subscriptions.includes(this.url)
+		},
 	},
 	methods: {
 		async addSubscription() {

src/components/Feed/List.vue

@@ -14,13 +14,14 @@
 						:url="episode.episodeImage" />
 				</template>
 				<template #subname>
-					{{ format(new Date(episode.episodeDuration*1000), 'HH:mm:ss') }}
+					{{ format(new Date(episode.episodeDuration*1000), 'H:mm:ss') }}
 				</template>
 				<template #actions>
 					<NcActionButton>
 						<template #icon>
 							<Play :size="20" />
 						</template>
+						{{ t('Play') }}
 					</NcActionButton>
 				</template>
 			</NcListItem>

src/components/Player/Bar.vue

@@ -0,0 +1,28 @@
+<template>
+	<div v-if="currentPlayingUrl" class="oui">
+		{{ 'oui' }}
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'Bar',
+	components: {},
+	computed: {
+		currentPlayingUrl() {
+			return this.$store.state.currentPlayingUrl
+		},
+	},
+}
+</script>
+
+<style scoped>
+	.oui {
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+		height: 4rem;
+		background-color: red;
+		z-index: 1001;
+	}
+</style>

src/modules/index.js

@@ -1,5 +1,7 @@
+import { player } from './player.js'
 import { subscriptions } from './subscriptions.js'
 
 export default {
+	player,
 	subscriptions,
 }

src/modules/player.js

@@ -0,0 +1,11 @@
+export const player = {
+	namespaced: true,
+	state: {
+		currentPlayingUrl: null,
+	},
+	mutations: {
+		set: (state, currentPlayingUrl) => {
+			state.currentPlayingUrl = currentPlayingUrl
+		},
+	},
+}

src/views/Index.vue

@@ -18,6 +18,7 @@
 			</NcAppContentList>
 		</NcAppNavigation>
 		<router-view />
+		<Bar />
 	</fragment>
 </template>
 
@@ -28,6 +29,7 @@ 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'
@@ -35,6 +37,7 @@ import { showError } from '@nextcloud/dialogs'
 export default {
 	name: 'Index',
 	components: {
+		Bar,
 		Item,
 		NcAppContentList,
 		NcAppNavigation,