From 082161e1778e203a637452336d5f4ca68c5b9f1e Mon Sep 17 00:00:00 2001 From: Michel Roux Date: Fri, 9 Aug 2024 00:58:25 +0200 Subject: [PATCH] refactor: :recycle: rewrite player store to pinia --- src/main.js | 5 +- src/store/bus.js | 3 - src/store/main.js | 17 ----- src/store/player.js | 159 +++++++++++++++++--------------------------- 4 files changed, 63 insertions(+), 121 deletions(-) delete mode 100644 src/store/bus.js delete mode 100644 src/store/main.js diff --git a/src/main.js b/src/main.js index 0867a01..3615d6c 100644 --- a/src/main.js +++ b/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') diff --git a/src/store/bus.js b/src/store/bus.js deleted file mode 100644 index 8fb4236..0000000 --- a/src/store/bus.js +++ /dev/null @@ -1,3 +0,0 @@ -import Vue from 'vue' - -export const EventBus = new Vue() diff --git a/src/store/main.js b/src/store/main.js deleted file mode 100644 index b8e7f1a..0000000 --- a/src/store/main.js +++ /dev/null @@ -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 diff --git a/src/store/player.js b/src/store/player.js index 66bbe99..f4bef6f 100644 --- a/src/store/player.js +++ b/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)