Wrong approch

src/App.vue

@@ -3,7 +3,7 @@
 		<GPodder v-if="!AppConfig.repod.gpodder" />
 		<Subscriptions v-if="AppConfig.repod.gpodder" />
 		<router-view v-if="AppConfig.repod.gpodder" :key="$route.path" />
-		<Bar />
+		<Bar v-if="$route.params.url" />
 	</NcContent>
 </template>
 

src/components/Player/Bar.vue

@@ -5,8 +5,9 @@
 			preload
 			:src="episode.episodeUrl"
 			@durationchange="duration = audio.duration"
+			@ended="stop"
 			@loadeddata="loadeddata"
-			@pause="paused = true"
+			@pause="pause"
 			@play="paused = false"
 			@seeked="currentTime = audio.currentTime"
 			@timeupdate="currentTime = audio.currentTime"
@@ -18,7 +19,7 @@
 		<div v-if="!loading" class="player">
 			<img :src="episode.episodeImage">
 			<Infos />
-			<Controls :paused="paused" />
+			<Controls :paused="paused" @stop="stop" />
 			<Timer class="timer"
 				:current-time="currentTime"
 				:duration="duration" />
@@ -34,6 +35,10 @@ import { NcLoadingIcon } from '@nextcloud/vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
+import axios from '@nextcloud/axios'
+import { formatEpisodeTimestamp } from '../../utils/time.js'
+import { generateUrl } from '@nextcloud/router'
+import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Bar',
@@ -51,6 +56,7 @@ export default {
 			duration: 0,
 			loading: true,
 			paused: false,
+			url: atob(this.$route.params.url),
 			volume: 1,
 		}
 	},
@@ -70,6 +76,31 @@ export default {
 				this.audio.currentTime = this.episode.episodeAction.position
 			}
 		},
+		pause() {
+			this.paused = true
+			this.track()
+		},
+		stop() {
+			this.pause()
+			this.$store.commit('player/play', null)
+		},
+		async track() {
+			try {
+				await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [{
+					podcast: this.url,
+					episode: this.episode.episodeUrl,
+					guid: this.episode.episodeGuid,
+					action: 'play',
+					timestamp: formatEpisodeTimestamp(new Date()),
+					started: Math.round(this.episode.episodeAction ? this.episode.episodeAction.started : 0),
+					position: Math.round(this.audio.currentTime),
+					total: Math.round(this.audio.duration),
+				}])
+			} catch (e) {
+				console.error(e)
+				showError(t('Error while saving position on API'))
+			}
+		},
 	},
 }
 </script>

src/components/Player/Controls.vue

@@ -3,14 +3,14 @@
 		<PauseButton v-if="!paused"
 			class="pointer"
 			:size="50"
-			@click="pause" />
+			@click="() => audio.pause()" />
 		<PlayButton v-if="paused"
 			class="pointer"
 			:size="50"
 			@click="() => audio.play()" />
 		<StopButton class="pointer"
 			:size="30"
-			@click="stop" />
+			@click="$emit('stop')" />
 	</div>
 </template>
 
@@ -18,10 +18,6 @@
 import PauseButton from 'vue-material-design-icons/Pause.vue'
 import PlayButton from 'vue-material-design-icons/Play.vue'
 import StopButton from 'vue-material-design-icons/Stop.vue'
-import axios from '@nextcloud/axios'
-import { formatEpisodeTimestamp } from '../../utils/time.js'
-import { generateUrl } from '@nextcloud/router'
-import { showError } from '@nextcloud/dialogs'
 
 export default {
 	name: 'Controls',
@@ -36,45 +32,10 @@ export default {
 			required: true,
 		},
 	},
-	data() {
-		return {
-			podcastUrl: atob(this.$route.params.url),
-		}
-	},
 	computed: {
 		audio() {
 			return document.getElementById('audio-player')
 		},
-		episode() {
-			return this.$store.state.player.episode
-		},
-	},
-	methods: {
-		pause() {
-			this.audio.pause()
-			this.track()
-		},
-		stop() {
-			this.pause()
-			this.$store.commit('player/play', null)
-		},
-		async track() {
-			try {
-				await axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [{
-					podcast: this.podcastUrl,
-					episode: this.episode.episodeUrl,
-					guid: this.episode.episodeGuid,
-					action: 'play',
-					timestamp: formatEpisodeTimestamp(new Date()),
-					started: Math.round(this.episode.episodeAction ? this.episode.episodeAction.started : 0),
-					position: Math.round(this.audio.currentTime),
-					total: Math.round(this.audio.duration),
-				}])
-			} catch (e) {
-				console.error(e)
-				showError(t('Error while saving position on API'))
-			}
-		},
 	},
 }
 </script>