refactor: 🏗️ rework to use pinia

src/components/Atoms/AppContent.vue

@@ -6,6 +6,8 @@
 
 <script>
 import { NcAppContent } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'AppContent',
@@ -13,9 +15,7 @@ export default {
 		NcAppContent,
 	},
 	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
+		...mapState(usePlayer, ['episode']),
 	},
 }
 </script>

src/components/Atoms/AppNavigation.vue

@@ -12,6 +12,8 @@
 
 <script>
 import { NcAppNavigation } from '@nextcloud/vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'AppNavigation',
@@ -19,9 +21,7 @@ export default {
 		NcAppNavigation,
 	},
 	computed: {
-		episode() {
-			return this.$store.state.player.episode
-		},
+		...mapState(usePlayer, ['episode']),
 	},
 }
 </script>

src/components/Discover/Search.vue

@@ -19,7 +19,7 @@
 				</template>
 				<template #actions>
 					<NcActionButton
-						v-if="!isSubscribed(feed.link)"
+						v-if="!subscriptions.includes(feed.link)"
 						:aria-label="t('repod', 'Subscribe')"
 						:name="t('repod', 'Subscribe')"
 						:title="t('repod', 'Subscribe')"
@@ -36,6 +36,7 @@
 
 <script>
 import { NcActionButton, NcAvatar, NcListItem } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import axios from '@nextcloud/axios'
@@ -44,6 +45,7 @@ import { formatLocaleDate } from '../../utils/time.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'
+import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
 	name: 'Search',
@@ -66,12 +68,16 @@ export default {
 			loading: false,
 		}
 	},
+	computed: {
+		...mapState(useSubscriptions, ['subscriptions']),
+	},
 	watch: {
 		value() {
 			this.search()
 		},
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		formatLocaleDate,
 		toUrl,
 		async addSubscription(url) {
@@ -88,10 +94,7 @@ export default {
 				showError(t('repod', 'Error while adding the feed'))
 			}
 
-			this.$store.dispatch('subscriptions/fetch')
-		},
-		isSubscribed(url) {
-			return this.$store.state.subscriptions.subscriptions.includes(url)
+			this.fetch()
 		},
 		search: debounce(async function value() {
 			try {

src/components/Feed/Banner.vue

@@ -23,7 +23,7 @@
 					<SafeHtml :source="description" />
 				</div>
 				<NcAppNavigationNew
-					v-if="!isSubscribed"
+					v-if="!subscriptions.includes(url)"
 					:text="t('repod', 'Subscribe')"
 					@click="addSubscription">
 					<template #icon>
@@ -37,6 +37,7 @@
 
 <script>
 import { NcAppNavigationNew, NcAvatar } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import { showError, showSuccess } from '../../utils/toast.js'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import RssIcon from 'vue-material-design-icons/Rss.vue'
@@ -44,6 +45,7 @@ import SafeHtml from '../Atoms/SafeHtml.vue'
 import axios from '@nextcloud/axios'
 import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
+import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
 	name: 'Banner',
@@ -77,14 +79,13 @@ export default {
 		},
 	},
 	computed: {
+		...mapState(useSubscriptions, ['subscriptions']),
 		url() {
 			return decodeUrl(this.$route.params.url)
 		},
-		isSubscribed() {
-			return this.$store.state.subscriptions.subscriptions.includes(this.url)
-		},
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		async addSubscription() {
 			try {
 				await axios.post(
@@ -99,7 +100,7 @@ export default {
 				showError(t('repod', 'Error while adding the feed'))
 			}
 
-			this.$store.dispatch('subscriptions/fetch')
+			this.fetch()
 		},
 		copyFeed() {
 			window.navigator.clipboard.writeText(this.url)

src/components/Feed/Episodes.vue

@@ -122,8 +122,8 @@ import {
 	formatEpisodeTimestamp,
 	formatLocaleDate,
 } from '../../utils/time.js'
+import { mapActions, mapState } from 'pinia'
 import DownloadIcon from 'vue-material-design-icons/Download.vue'
-import { EventBus } from '../../store/bus.js'
 import Loading from '../Atoms/Loading.vue'
 import Modal from '../Atoms/Modal.vue'
 import OpenInNewIcon from 'vue-material-design-icons/OpenInNew.vue'
@@ -135,6 +135,8 @@ import axios from '@nextcloud/axios'
 import { decodeUrl } from '../../utils/url.js'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '../../utils/toast.js'
+import { usePlayer } from '../../store/player.js'
+import { useSettings } from '../../store/settings.js'
 
 export default {
 	name: 'Episodes',
@@ -163,12 +165,8 @@ export default {
 		}
 	},
 	computed: {
-		currentEpisode() {
-			return this.$store.state.player.episode
-		},
-		filters() {
-			return this.$store.state.settings.filters
-		},
+		...mapState(usePlayer, ['episode']),
+		...mapState(useSettings, ['filters']),
 		filteredEpisodes() {
 			return this.episodes.filter((episode) => {
 				if (!this.filters.listened && this.hasEnded(episode)) {
@@ -201,7 +199,6 @@ export default {
 			this.episodes = [...episodes.data].sort(
 				(a, b) => new Date(b.pubDate?.date) - new Date(a.pubDate?.date),
 			)
-			EventBus.$on('updateEpisodesList', this.updateList)
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch episodes'))
@@ -209,10 +206,8 @@ export default {
 			this.loading = false
 		}
 	},
-	destroyed() {
-		EventBus.$off('updateEpisodesList')
-	},
 	methods: {
+		...mapActions(usePlayer, ['load']),
 		formatLocaleDate,
 		hasEnded(episode) {
 			return (
@@ -233,9 +228,6 @@ export default {
 				!this.hasEnded(episode)
 			)
 		},
-		load(episode) {
-			this.$store.dispatch('player/load', episode)
-		},
 		async markAs(episode, read) {
 			try {
 				this.loadingAction = true

src/components/Player/Bar.vue

@@ -1,10 +1,10 @@
 <template>
-	<div v-if="player.episode" class="footer">
-		<img class="background" :src="player.episode.image" />
-		<Loading v-if="!player.loaded" />
-		<ProgressBar v-if="player.loaded" />
-		<div v-if="player.loaded" class="player">
-			<img :src="player.episode.image" />
+	<div v-if="episode" class="footer">
+		<img class="background" :src="episode.image" />
+		<Loading v-if="!loaded" />
+		<ProgressBar v-if="loaded" />
+		<div v-if="loaded" class="player">
+			<img :src="episode.image" />
 			<Infos class="infos" />
 			<Controls class="controls" />
 			<Timer class="timer" />
@@ -20,6 +20,8 @@ import Loading from '../Atoms/Loading.vue'
 import ProgressBar from './ProgressBar.vue'
 import Timer from './Timer.vue'
 import Volume from './Volume.vue'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Bar',
@@ -32,9 +34,7 @@ export default {
 		Volume,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['episode', 'loaded']),
 	},
 }
 </script>

src/components/Player/Controls.vue

@@ -1,21 +1,15 @@
 <template>
 	<div class="controls">
-		<PauseIcon
-			v-if="!player.paused"
-			class="pointer"
-			:size="50"
-			@click="$store.dispatch('player/pause')" />
-		<PlayIcon
-			v-if="player.paused"
-			class="pointer"
-			:size="50"
-			@click="$store.dispatch('player/play')" />
+		<PauseIcon v-if="!paused" class="pointer" :size="50" @click="pause" />
+		<PlayIcon v-if="paused" class="pointer" :size="50" @click="play" />
 	</div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import PauseIcon from 'vue-material-design-icons/Pause.vue'
 import PlayIcon from 'vue-material-design-icons/Play.vue'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Controls',
@@ -24,9 +18,10 @@ export default {
 		PlayIcon,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
+		...mapState(usePlayer, ['paused']),
 	},
+	methods: {
+		...mapActions(usePlayer, ['play', 'pause']),
 	},
 }
 </script>

src/components/Player/Infos.vue

@@ -1,20 +1,20 @@
 <template>
 	<div class="root">
 		<strong class="pointer" @click="modal = true">
-			{{ player.episode.name }}
+			{{ episode.name }}
 		</strong>
 		<router-link :to="hash">
-			<i>{{ player.episode.title }}</i>
+			<i>{{ episode.title }}</i>
 		</router-link>
 		<NcModal v-if="modal" @close="modal = false">
 			<Modal
-				:description="player.episode.description"
-				:image="player.episode.image"
-				:link="player.episode.link"
-				:name="player.episode.name"
-				:size="player.episode.size"
-				:title="player.episode.title"
-				:url="player.episode.url" />
+				:description="episode.description"
+				:image="episode.image"
+				:link="episode.link"
+				:name="episode.name"
+				:size="episode.size"
+				:title="episode.title"
+				:url="episode.url" />
 		</NcModal>
 	</div>
 </template>
@@ -22,7 +22,9 @@
 <script>
 import Modal from '../Atoms/Modal.vue'
 import { NcModal } from '@nextcloud/vue'
+import { mapState } from 'pinia'
 import { toUrl } from '../../utils/url.js'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Infos',
@@ -36,9 +38,7 @@ export default {
 		}
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['episode']),
 		hash() {
 			return toUrl(this.player.podcastUrl)
 		},

src/components/Player/ProgressBar.vue

@@ -1,20 +1,24 @@
 <template>
 	<input
 		class="progress"
-		:max="player.duration"
+		:max="duration"
 		min="0"
 		type="range"
-		:value="player.currentTime"
-		@change="(event) => $store.dispatch('player/seek', event.target.value)" />
+		:value="currentTime"
+		@change="(event) => seek(event.target.value)" />
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
+
 export default {
 	name: 'ProgressBar',
 	computed: {
-		player() {
-			return this.$store.state.player
+		...mapState(usePlayer, ['duration', 'currentTime']),
 	},
+	methods: {
+		...mapActions(usePlayer, ['seek']),
 	},
 }
 </script>

src/components/Player/Timer.vue

@@ -1,20 +1,20 @@
 <template>
 	<div>
-		<span>{{ formatTimer(new Date(player.currentTime * 1000)) }}</span>
+		<span>{{ formatTimer(new Date(currentTime * 1000)) }}</span>
 		<span>/</span>
-		<span>{{ formatTimer(new Date(player.duration * 1000)) }}</span>
+		<span>{{ formatTimer(new Date(duration * 1000)) }}</span>
 	</div>
 </template>
 
 <script>
 import { formatTimer } from '../../utils/time.js'
+import { mapState } from 'pinia'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Timer',
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['duration', 'currentTime']),
 	},
 	methods: {
 		formatTimer,

src/components/Player/Volume.vue

@@ -1,42 +1,42 @@
 <template>
 	<div>
 		<VolumeHighIcon
-			v-if="player.volume > 0.7"
+			v-if="volume > 0.7"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeLowIcon
-			v-if="player.volume > 0 && player.volume <= 0.3"
+			v-if="volume > 0 && volume <= 0.3"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeMediumIcon
-			v-if="player.volume > 0.3 && player.volume <= 0.7"
+			v-if="volume > 0.3 && volume <= 0.7"
 			class="pointer"
 			:size="30"
 			@click="mute" />
 		<VolumeMuteIcon
-			v-if="player.volume === 0"
+			v-if="volume === 0"
 			class="pointer"
 			:size="30"
-			@click="$store.dispatch('player/volume', volumeMuted)" />
+			@click="setVolume(volumeMuted)" />
 		<input
 			max="1"
 			min="0"
 			step="0.1"
 			type="range"
-			:value="player.volume"
-			@change="
-				(event) => $store.dispatch('player/volume', event.target.value)
-			" />
+			:value="volume"
+			@change="(event) => setVolume(event.target.value)" />
 	</div>
 </template>
 
 <script>
+import { mapActions, mapState } from 'pinia'
 import VolumeHighIcon from 'vue-material-design-icons/VolumeHigh.vue'
 import VolumeLowIcon from 'vue-material-design-icons/VolumeLow.vue'
 import VolumeMediumIcon from 'vue-material-design-icons/VolumeMedium.vue'
 import VolumeMuteIcon from 'vue-material-design-icons/VolumeMute.vue'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Volume',
@@ -52,14 +52,13 @@ export default {
 		}
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['volume']),
 	},
 	methods: {
+		...mapActions(usePlayer, ['setVolume']),
 		mute() {
-			this.volumeMuted = this.player.volume
-			this.$store.dispatch('player/volume', 0)
+			this.volumeMuted = this.volume
+			this.setVolume(0)
 		},
 	},
 }

src/components/Settings/Filters.vue

@@ -9,7 +9,7 @@
 				:disabled="all"
 				@update:checked="
 					(checked) =>
-						$store.commit('settings/filters', {
+						setFilters({
 							listened: checked,
 							listening: checked,
 							unlistened: checked,
@@ -19,26 +19,17 @@
 			</NcActionCheckbox>
 			<NcActionCheckbox
 				:checked="filters.listened"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { listened: checked })
-				">
+				@update:checked="(checked) => setFilters({ listened: checked })">
 				{{ t('repod', 'Listened') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
 				:checked="filters.listening"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { listening: checked })
-				">
+				@update:checked="(checked) => setFilters({ listening: checked })">
 				{{ t('repod', 'Listening') }}
 			</NcActionCheckbox>
 			<NcActionCheckbox
 				:checked="filters.unlistened"
-				@update:checked="
-					(checked) =>
-						$store.commit('settings/filters', { unlistened: checked })
-				">
+				@update:checked="(checked) => setFilters({ unlistened: checked })">
 				{{ t('repod', 'Unlistened') }}
 			</NcActionCheckbox>
 		</template>
@@ -51,8 +42,10 @@
 
 <script>
 import { NcActionCheckbox, NcAppNavigationItem } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import FilterIcon from 'vue-material-design-icons/Filter.vue'
 import FilterSettingsIcon from 'vue-material-design-icons/FilterSettings.vue'
+import { useSettings } from '../../store/settings.js'
 
 export default {
 	name: 'Filters',
@@ -63,19 +56,10 @@ export default {
 		NcActionCheckbox,
 	},
 	computed: {
-		all() {
-			return (
-				this.filters.listened &&
-				this.filters.listening &&
-				this.filters.unlistened
-			)
+		...mapState(useSettings, ['filters']),
 	},
-		filters() {
-			return this.$store.state.settings.filters
-		},
-	},
-	mounted() {
-		this.$store.dispatch('settings/fetch')
+	methods: {
+		...mapActions(useSettings, ['setFilters']),
 	},
 }
 </script>

src/components/Settings/Speed.vue

@@ -3,27 +3,27 @@
 		<template #extra>
 			<div class="extra">
 				<MinusIcon class="pointer" :size="20" @click="changeRate(-0.1)" />
-				<NcCounterBubble class="counter">
-					x{{ player.rate }}
-				</NcCounterBubble>
+				<NcCounterBubble class="counter">x{{ rate }}</NcCounterBubble>
 				<PlusIcon class="pointer" :size="20" @click="changeRate(0.1)" />
 			</div>
 		</template>
 		<template #icon>
-			<SpeedometerSlowIcon v-if="player.rate < 1" :size="20" />
-			<SpeedometerMediumIcon v-if="player.rate === 1" :size="20" />
-			<SpeedometerIcon v-if="player.rate > 1" :size="20" />
+			<SpeedometerSlowIcon v-if="rate < 1" :size="20" />
+			<SpeedometerMediumIcon v-if="rate === 1" :size="20" />
+			<SpeedometerIcon v-if="rate > 1" :size="20" />
 		</template>
 	</NcAppNavigationItem>
 </template>
 
 <script>
 import { NcAppNavigationItem, NcCounterBubble } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import MinusIcon from 'vue-material-design-icons/Minus.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import SpeedometerIcon from 'vue-material-design-icons/Speedometer.vue'
 import SpeedometerMediumIcon from 'vue-material-design-icons/SpeedometerMedium.vue'
 import SpeedometerSlowIcon from 'vue-material-design-icons/SpeedometerSlow.vue'
+import { usePlayer } from '../../store/player.js'
 
 export default {
 	name: 'Speed',
@@ -37,17 +37,13 @@ export default {
 		SpeedometerSlowIcon,
 	},
 	computed: {
-		player() {
-			return this.$store.state.player
-		},
+		...mapState(usePlayer, ['rate']),
 	},
 	methods: {
+		...mapActions(usePlayer, ['seRate']),
 		changeRate(diff) {
-			const newRate = (this.player.rate + diff).toPrecision(2)
-			this.$store.dispatch(
-				'player/rate',
-				newRate > 0 ? newRate : this.player.rate,
-			)
+			const newRate = (this.rate + diff).toPrecision(2)
+			this.setRate(newRate > 0 ? newRate : this.rate)
 		},
 	},
 }

src/components/Sidebar/Item.vue

@@ -31,8 +31,10 @@ import AlertIcon from 'vue-material-design-icons/Alert.vue'
 import DeleteIcon from 'vue-material-design-icons/Delete.vue'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
+import { mapActions } from 'pinia'
 import { showError } from '../../utils/toast.js'
 import { toUrl } from '../../utils/url.js'
+import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
 	name: 'Item',
@@ -80,6 +82,7 @@ export default {
 		}
 	},
 	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
 		async deleteSubscription() {
 			if (
 				confirm(
@@ -97,7 +100,7 @@ export default {
 					showError(t('repod', 'Error while removing the feed'))
 				} finally {
 					this.loading = false
-					this.$store.dispatch('subscriptions/fetch')
+					this.fetch()
 				}
 			}
 		},

src/components/Sidebar/Subscriptions.vue

@@ -30,12 +30,14 @@ import {
 	NcAppNavigationList,
 	NcAppNavigationNew,
 } from '@nextcloud/vue'
+import { mapActions, mapState } from 'pinia'
 import AppNavigation from '../Atoms/AppNavigation.vue'
 import Item from './Item.vue'
 import Loading from '../Atoms/Loading.vue'
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import Settings from '../Settings/Settings.vue'
 import { showError } from '../../utils/toast.js'
+import { useSubscriptions } from '../../store/subscriptions.js'
 
 export default {
 	name: 'Subscriptions',
@@ -55,13 +57,11 @@ export default {
 		}
 	},
 	computed: {
-		subscriptions() {
-			return this.$store.state.subscriptions.subscriptions
-		},
+		...mapState(useSubscriptions, ['subscriptions']),
 	},
 	async mounted() {
 		try {
-			await this.$store.dispatch('subscriptions/fetch')
+			await this.fetch()
 		} catch (e) {
 			console.error(e)
 			showError(t('repod', 'Could not fetch subscriptions'))
@@ -69,5 +69,8 @@ export default {
 			this.loading = false
 		}
 	},
+	methods: {
+		...mapActions(useSubscriptions, ['fetch']),
+	},
 }
 </script>

src/store/player.js

@@ -86,10 +86,10 @@ export const usePlayer = defineStore('player', {
 				this.episode.action,
 			])
 		},
-		volume: (volume) => {
+		setVolume: (volume) => {
 			audio.volume = volume
 		},
-		rate: (rate) => {
+		setRate: (rate) => {
 			audio.playbackRate = rate
 		},
 	},

src/store/settings.js

@@ -1,28 +1,24 @@
 import { getCookie, setCookie } from '../utils/cookies.js'
+import { defineStore } from 'pinia'
 
-export const settings = {
-	namespaced: true,
-	state: {
+export const useSettings = defineStore('settings', {
+	state: () => ({
 		filters: {
 			listened: true,
 			listening: true,
 			unlistened: true,
 		},
-	},
-	mutations: {
-		filters: (state, filters) => {
-			state.filters = { ...state.filters, ...filters }
-			setCookie('repod.filters', JSON.stringify(state.filters), 365)
-		},
-	},
+	}),
 	actions: {
-		fetch: (context) => {
+		setFilters: (filters) => {
+			this.filters = { ...this.filters, ...filters }
+			setCookie('repod.filters', JSON.stringify(this.filters), 365)
+		},
+	},
+})
+
 try {
+	const settings = useSettings()
 	const filters = getCookie('repod.filters')
-				context.commit('filters', JSON.parse(filters))
-			} catch (e) {
-				// nothing
-			}
-		},
-	},
-}
+	settings.filters = JSON.parse(filters)
+} catch {}

src/store/subscriptions.js

@@ -1,28 +1,20 @@
 import axios from '@nextcloud/axios'
+import { defineStore } from 'pinia'
 import { generateUrl } from '@nextcloud/router'
 
-export const subscriptions = {
-	namespaced: true,
-	state: {
+export const useSubscriptions = defineStore('subscriptions', {
+	state: () => ({
 		subscriptions: [],
-	},
-	mutations: {
-		set: (state, subscriptions) => {
-			state.subscriptions = subscriptions
-		},
-	},
+	}),
 	actions: {
-		fetch: async (context) => {
+		fetch: async () => {
 			const metrics = await axios.get(
 				generateUrl('/apps/gpoddersync/personal_settings/metrics'),
 			)
 			const subs = [...metrics.data.subscriptions].sort(
 				(a, b) => b.listenedSeconds - a.listenedSeconds,
 			)
-			context.commit(
-				'set',
-				subs.map((sub) => sub.url),
-			)
+			this.subscriptions = subs.map((sub) => sub.url)
 		},
 	},
-}
+})