Migrate to vue3 (fix #126) #127

Merged
Xefir merged 32 commits from vue3 into main 2024-08-17 12:24:28 +00:00
4 changed files with 63 additions and 121 deletions
Showing only changes of commit 082161e177 - Show all commits

View File

@ -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')

View File

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

View File

@ -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

View File

@ -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)