refactor: ♻️ rewrite player store to pinia

src/main.js

@@ -1,12 +1,13 @@
 import { n, t } from '@nextcloud/l10n'
 import App from './App.vue'
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import router from './router.js'
-import store from './store/main.js'
 
 const Vue = createApp(App)
+const pinia = createPinia()
 
 Vue.mixin({ methods: { t, n } })
+Vue.use(pinia)
 Vue.use(router)
-Vue.use(store)
 Vue.mount('#content')

src/store/bus.js

@@ -1,3 +0,0 @@
-import Vue from 'vue'
-
-export const EventBus = new Vue()

src/store/main.js

@@ -1,17 +0,0 @@
-import Vuex, { Store } from 'vuex'
-import Vue from 'vue'
-import { player } from './player.js'
-import { settings } from './settings.js'
-import { subscriptions } from './subscriptions.js'
-
-Vue.use(Vuex)
-
-const store = new Store({
-	modules: {
-		player,
-		settings,
-		subscriptions,
-	},
-})
-
-export default store

src/store/player.js

@@ -1,25 +1,14 @@
-import { EventBus } from './bus.js'
 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'
-import store from './main.js'
 
 const audio = new Audio()
-audio.ondurationchange = () => store.commit('player/duration', audio.duration)
-audio.onended = () => store.dispatch('player/stop')
-audio.onloadeddata = () => store.commit('player/loaded', true)
-audio.onplay = () => store.dispatch('player/play')
-audio.onpause = () => store.dispatch('player/pause')
-audio.onratechange = () => store.commit('player/rate', audio.playbackRate)
-audio.onseeked = () => store.commit('player/currentTime', audio.currentTime)
-audio.ontimeupdate = () => store.commit('player/currentTime', audio.currentTime)
-audio.onvolumechange = () => store.commit('player/volume', audio.volume)
 
-export const player = {
-	namespaced: true,
-	state: {
+export const usePlayer = defineStore('player', {
+	state: () => ({
 		currentTime: null,
 		duration: null,
 		episode: null,
@@ -29,119 +18,91 @@ export const player = {
 		volume: 1,
 		rate: 1,
 		started: 0,
-	},
-	mutations: {
-		action: (state, action) => {
-			state.episode.action = action
+	}),
+	actions: {
+		load: async (episode) => {
+			this.episode = episode
 
-			if (action && action.position && action.position < action.total) {
-				audio.currentTime = action.position
-				state.started = audio.currentTime
-			}
-		},
-		currentTime: (state, currentTime) => {
-			state.currentTime = currentTime
-		},
-		duration: (state, duration) => {
-			state.duration = duration
-		},
-		episode: (state, episode) => {
-			state.episode = episode
-
-			if (episode) {
-				state.podcastUrl = decodeUrl(router.currentRoute.params.url)
-				audio.src = episode.url
+			if (this.episode) {
+				this.podcastUrl = decodeUrl(router.currentRoute.params.url)
+				audio.src = this.episode.url
 				audio.load()
-				audio.play()
+
+				try {
+					const action = await axios.get(
+						generateUrl('/apps/repod/episodes/action?url={url}', {
+							url: this.episode.url,
+						}),
+					)
+
+					this.episode.action = action
+				} catch {}
 
 				if (
-					episode.action &&
-					episode.action.position &&
-					episode.action.position < episode.action.total
+					this.episode.action &&
+					this.episode.action.position &&
+					this.episode.action.position < this.episode.action.total
 				) {
-					audio.currentTime = episode.action.position
-					state.started = audio.currentTime
+					audio.currentTime = this.episode.action.position
+					this.started = audio.currentTime
 				}
+
+				audio.play()
 			} else {
-				state.loaded = false
-				state.podcastUrl = null
+				this.loaded = false
+				this.podcastUrl = null
 				audio.src = ''
 			}
 		},
-		loaded: (state, loaded) => {
-			state.loaded = loaded
-		},
-		paused: (state, paused) => {
-			state.paused = paused
-		},
-		volume: (state, volume) => {
-			state.volume = volume
-		},
-		rate: (state, rate) => {
-			state.rate = rate
-		},
-		started: (state, started) => {
-			state.started = started
-		},
-	},
-	actions: {
-		load: async (context, episode) => {
-			context.commit('episode', episode)
-			try {
-				const action = await axios.get(
-					generateUrl('/apps/repod/episodes/action?url={url}', {
-						url: episode.url,
-					}),
-				)
-				context.commit('action', action.data)
-			} catch {}
-		},
-		pause: (context) => {
+		pause: () => {
 			audio.pause()
-			context.commit('paused', true)
-			context.dispatch('time')
+			this.paused = true
 		},
-		play: (context) => {
+		play: () => {
 			audio.play()
-			context.commit('paused', false)
-			context.commit('started', audio.currentTime)
+			this.paused = false
+			this.started = audio.currentTime
 		},
-		seek: (context, currentTime) => {
+		seek: (currentTime) => {
 			audio.currentTime = currentTime
-			context.dispatch('time')
+			this.time()
 		},
-		stop: (context) => {
-			context.dispatch('pause')
-			context.commit('episode', null)
+		stop: () => {
+			this.pause()
+			this.episode = null
 		},
-		time: async (context) => {
-			const episode = context.state.episode
-			episode.action = {
-				podcast: context.state.podcastUrl,
-				episode: context.state.episode.url,
-				guid: context.state.episode.guid,
+		time: () => {
+			this.episode.action = {
+				podcast: this.podcastUrl,
+				episode: this.episode.url,
+				guid: this.episode.guid,
 				action: 'play',
 				timestamp: formatEpisodeTimestamp(new Date()),
-				started: Math.round(context.state.started),
+				started: Math.round(this.started),
 				position: Math.round(audio.currentTime),
 				total: Math.round(audio.duration),
 			}
 			axios.post(generateUrl('/apps/gpoddersync/episode_action/create'), [
-				episode.action,
+				this.episode.action,
 			])
-			EventBus.$emit('updateEpisodesList', episode)
 		},
-		volume: (_, volume) => {
+		volume: (volume) => {
 			audio.volume = volume
 		},
-		rate: (_, rate) => {
+		rate: (rate) => {
 			audio.playbackRate = rate
 		},
 	},
-}
+})
 
-setInterval(() => {
-	if (player.state.paused === false) {
-		store.dispatch('player/time')
-	}
-}, 40000)
+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)