src/App.vue

@@ -9,12 +9,12 @@
 
 <script>
 import 'toastify-js/src/toastify.css'
+import { mapActions, mapState } from 'pinia'
 import Bar from './components/Player/Bar.vue'
 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 {
@@ -26,15 +26,22 @@ export default {
 		Subscriptions,
 	},
 	computed: {
+		...mapState(usePlayer, ['paused']),
 		gpodder() {
 			return loadState('repod', 'gpodder', false)
 		},
 	},
 	mounted() {
 		this.init()
+
+		setInterval(() => {
+			if (this.paused === false) {
+				this.time()
+			}
+		}, 40000)
 	},
 	methods: {
-		...mapActions(usePlayer, ['init']),
+		...mapActions(usePlayer, ['init', 'time']),
 	},
 }
 </script>

src/store/player.js

@@ -28,12 +28,6 @@ export const usePlayer = defineStore('player', {
 			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

src/utils/toast.js

@@ -4,9 +4,9 @@ export const showMessage = (text, backgroundColor) =>
 	toastify({
 		text,
 		backgroundColor,
-	})
+	}).showToast()
 
-export const showError = (text) => showMessage(text, '--color-error')
+export const showError = (text) => showMessage(text, 'var(--color-error)')
-export const showWarning = (text) => showMessage(text, '--color-warning')
+export const showWarning = (text) => showMessage(text, 'var(--color-warning)')
-export const showInfo = (text) => showMessage(text, '--color-primary')
+export const showInfo = (text) => showMessage(text, 'var(--color-primary)')
-export const showSuccess = (text) => showMessage(text, '--color-success')
+export const showSuccess = (text) => showMessage(text, 'var(--color-success)')

src/views/Discover.vue

@@ -1,7 +1,9 @@
 <template>
 	<AppContent class="main">
-		<NcTextField :label="t('repod', 'Find a podcast')" :value.sync="search">
+		<NcTextField :label="t('repod', 'Find a podcast')" v-model="search">
-			<Magnify :size="20" />
+			<template #icon>
+				<Magnify :size="20" />
+			</template>
 		</NcTextField>
 		<Search v-if="search" :value="search" />
 		<Toplist v-if="!search" type="hot" />