src/App.vue

@@ -14,6 +14,8 @@ import GPodder from './views/GPodder.vue'
 import { NcContent } from '@nextcloud/vue'
 import Subscriptions from './components/Sidebar/Subscriptions.vue'
 import { loadState } from '@nextcloud/initial-state'
+import { mapActions } from 'pinia'
+import { usePlayer } from './store/player.js'
 
 export default {
 	name: 'App',
@@ -28,5 +30,11 @@ export default {
 			return loadState('repod', 'gpodder', false)
 		},
 	},
+	mounted() {
+		this.init()
+	},
+	methods: {
+		...mapActions(usePlayer, ['init']),
+	},
 }
 </script>

src/components/Feed/Episodes.vue

@@ -17,7 +17,7 @@
 						v-if="!isCurrentEpisode(episode)"
 						:aria-label="t('repod', 'Play')"
 						:title="t('repod', 'Play')"
-						@click="load(episode)">
+						@click="load(episode, url)">
 						<template #icon>
 							<PlayIcon :size="20" />
 						</template>

src/router.js

@@ -1,10 +1,10 @@
+import { createRouter, createWebHistory } from 'vue-router'
 import Discover from './views/Discover.vue'
 import Feed from './views/Feed.vue'
-import { createRouter } from 'vue-router'
 import { generateUrl } from '@nextcloud/router'
 
 const router = createRouter({
-	base: generateUrl('apps/repod'),
+	history: createWebHistory(generateUrl('apps/repod')),
 	routes: [
 		{
 			path: '/',

src/store/player.js

@@ -1,9 +1,7 @@
 import axios from '@nextcloud/axios'
-import { decodeUrl } from '../utils/url.js'
 import { defineStore } from 'pinia'
 import { formatEpisodeTimestamp } from '../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
-import router from '../router.js'
 
 const audio = new Audio()
 
@@ -20,11 +18,28 @@ export const usePlayer = defineStore('player', {
 		started: 0,
 	}),
 	actions: {
-		load: async (episode) => {
+		init: () => {
+			audio.ondurationchange = () => (this.duration = audio.duration)
+			audio.onended = () => this.stop()
+			audio.onloadeddata = () => (this.loaded = true)
+			audio.onpause = () => this.pause()
+			audio.onplay = () => this.play()
+			audio.onratechange = () => (this.rate = audio.playbackRate)
+			audio.onseeked = () => (this.currentTime = audio.currentTime)
+			audio.ontimeupdate = () => (this.currentTime = audio.currentTime)
+			audio.onvolumechange = () => (this.volume = audio.volume)
+
+			setInterval(() => {
+				if (this.paused === false) {
+					this.time()
+				}
+			}, 40000)
+		},
+		load: async (episode, podcastUrl) => {
 			this.episode = episode
+			this.podcastUrl = podcastUrl
 
 			if (this.episode) {
-				this.podcastUrl = decodeUrl(router.currentRoute.params.url)
 				audio.src = this.episode.url
 				audio.load()
 
@@ -94,21 +109,3 @@ export const usePlayer = defineStore('player', {
 		},
 	},
 })
-
-const player = usePlayer()
-
-audio.ondurationchange = () => (player.duration = audio.duration)
-audio.onended = () => player.stop()
-audio.onloadeddata = () => (player.loaded = true)
-audio.onpause = () => player.pause()
-audio.onplay = () => player.play()
-audio.onratechange = () => (player.rate = audio.playbackRate)
-audio.onseeked = () => (player.currentTime = audio.currentTime)
-audio.ontimeupdate = () => (player.currentTime = audio.currentTime)
-audio.onvolumechange = () => (player.volume = audio.volume)
-
-setInterval(() => {
-	if (player.paused === false) {
-		player.time()
-	}
-}, 40000)

vite.config.mjs

@@ -1,12 +1,18 @@
 import { createAppConfig } from '@nextcloud/vite-config'
 import { defineConfig } from 'vite'
 
-const config = defineConfig({
+const config = defineConfig(({ mode }) => ({
 	build: {
-		outDir: 'build',
-		sourcemap: false,
+		rollupOptions: {
+			output: {
+				entryFileNames: 'js/[name].js',
+				format: 'iife',
+				manualChunks: false,
+			},
+		},
+		sourcemap: mode === 'development',
 	},
-})
+}))
 
 export default createAppConfig(
 	{