fix: migrate sounds store to pinia

src/Recording.vue

@@ -11,9 +11,8 @@
 <script>
 import CallView from './components/CallView/CallView.vue'
 
-import {
-	signalingKill,
-} from './utils/webrtc/index.js'
+import { useSoundsStore } from './stores/sounds.js'
+import { signalingKill } from './utils/webrtc/index.js'
 
 export default {
 	name: 'Recording',
@@ -22,6 +21,12 @@ export default {
 		CallView,
 	},
 
+	setup() {
+		return {
+			soundsStore: useSoundsStore()
+		}
+	},
+
 	computed: {
 		/**
 		 * The current conversation token
@@ -37,7 +42,7 @@ export default {
 		if (this.$route.name === 'recording') {
 			await this.$store.dispatch('updateToken', this.$route.params.token)
 
-			await this.$store.dispatch('setPlaySounds', false)
+			await this.soundsStore.setPlaySounds(false)
 		}
 
 		// This should not be strictly needed, as the recording server is

src/components/MediaSettings/MediaDevicesSpeakerTest.vue

@@ -25,6 +25,8 @@ import { t } from '@nextcloud/l10n'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
+import { useSoundsStore } from '../../stores/sounds.js'
+
 export default {
 
 	name: 'MediaDevicesSpeakerTest',
@@ -34,6 +36,12 @@ export default {
 		VolumeHighIcon,
 	},
 
+	setup() {
+		return {
+			soundsStore: useSoundsStore()
+		}
+	},
+
 	data() {
 		return {
 			isPlayingTestSound: false,
@@ -63,11 +71,11 @@ export default {
 		t,
 		playTestSound() {
 			if (this.isPlayingTestSound) {
-				this.$store.dispatch('pauseWaitAudio')
+				this.soundsStore.pauseWaitAudio()
 				return
 			}
 			this.isPlayingTestSound = true
-			this.$store.dispatch('playWaitAudio').then((response) => {
+			this.soundsStore.playWaitAudio().then((response) => {
 				response.addEventListener('ended', () => {
 					this.isPlayingTestSound = false
 				})

src/components/SettingsDialog/SettingsDialog.vue

@@ -197,6 +197,7 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useCustomSettings } from '../../services/SettingsAPI.ts'
 import { useSettingsStore } from '../../stores/settings.js'
+import { useSoundsStore } from '../../stores/sounds.js'
 
 const isBackgroundBlurred = loadState('spreed', 'force_enable_blur_filter', '')
 const supportTypingStatus = getTalkConfig('local', 'chat', 'typing-privacy') !== undefined
@@ -215,10 +216,12 @@ export default {
 
 	setup() {
 		const settingsStore = useSettingsStore()
+		const soundsStore = useSoundsStore()
 		const { customSettingsSections } = useCustomSettings()
 
 		return {
 			settingsStore,
+			soundsStore,
 			supportTypingStatus,
 			isBackgroundBlurred,
 			customSettingsSections,
@@ -237,7 +240,7 @@ export default {
 
 	computed: {
 		playSounds() {
-			return this.$store.getters.playSounds
+			return this.soundsStore.playSounds
 		},
 
 		attachmentFolder() {
@@ -348,7 +351,7 @@ export default {
 			this.playSoundsLoading = true
 			try {
 				try {
-					await this.$store.dispatch('setPlaySounds', !this.playSounds)
+					await this.soundsStore.setPlaySounds(!this.playSounds)
 				} catch (e) {
 					showError(t('spreed', 'Failed to save sounds setting'))
 				}

src/components/TopBar/CallButton.vue

@@ -112,6 +112,7 @@ import { hasTalkFeature } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.js'
 import { useBreakoutRoomsStore } from '../../stores/breakoutRooms.ts'
 import { useSettingsStore } from '../../stores/settings.js'
+import { useSoundsStore } from '../../stores/sounds.js'
 import { useTalkHashStore } from '../../stores/talkHash.js'
 import { blockCalls, unsupportedWarning } from '../../utils/browserCheck.js'
 
@@ -197,6 +198,7 @@ export default {
 			breakoutRoomsStore: useBreakoutRoomsStore(),
 			talkHashStore: useTalkHashStore(),
 			settingsStore: useSettingsStore(),
+			soundsStore: useSoundsStore(),
 			isMobile: useIsMobile(),
 		}
 	},
@@ -436,7 +438,7 @@ export default {
 
 		handleClick() {
 			// Create audio objects as a result of a user interaction to allow playing sounds in Safari
-			this.$store.dispatch('createAudioObjects')
+			this.soundsStore.createAudioObjects()
 
 			if (this.isMediaSettings || this.isPhoneRoom) {
 				emit('talk:media-settings:hide')

src/store/storeConfig.js

@@ -10,7 +10,6 @@ import conversationsStore from './conversationsStore.js'
 import fileUploadStore from './fileUploadStore.js'
 import messagesStore from './messagesStore.js'
 import participantsStore from './participantsStore.js'
-import soundsStore from './soundsStore.js'
 import tokenStore from './tokenStore.js'
 
 export default {
@@ -22,7 +21,6 @@ export default {
 		fileUploadStore,
 		messagesStore,
 		participantsStore,
-		soundsStore,
 		tokenStore,
 	},