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.setShouldPlaySounds(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,
@@ -61,17 +69,22 @@ export default {
 
 	methods: {
 		t,
+
 		playTestSound() {
 			if (this.isPlayingTestSound) {
-				this.$store.dispatch('pauseWaitAudio')
+				this.soundsStore.pauseAudio('wait')
 				return
 			}
 			this.isPlayingTestSound = true
-			this.$store.dispatch('playWaitAudio').then((response) => {
-				response.addEventListener('ended', () => {
+			try {
+				this.soundsStore.playAudio('wait')
+				this.soundsStore.audioObjects.wait.addEventListener('ended', () => {
 					this.isPlayingTestSound = false
-				})
-			})
+				}, { once: true })
+			} catch (error) {
+				console.error(error)
+				this.isPlayingTestSound = false
+			}
 		},
 	},
 }

src/components/SettingsDialog/SettingsDialog.vue

@@ -73,7 +73,7 @@
 			:name="t('spreed', 'Sounds')"
 			class="app-settings-section">
 			<NcCheckboxRadioSwitch id="play_sounds"
-				:checked="playSounds"
+				:checked="shouldPlaySounds"
 				:disabled="playSoundsLoading"
 				type="switch"
 				class="checkbox"
@@ -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,
@@ -236,8 +239,8 @@ export default {
 	},
 
 	computed: {
-		playSounds() {
-			return this.$store.getters.playSounds
+		shouldPlaySounds() {
+			return this.soundsStore.shouldPlaySounds
 		},
 
 		attachmentFolder() {
@@ -348,7 +351,7 @@ export default {
 			this.playSoundsLoading = true
 			try {
 				try {
-					await this.$store.dispatch('setPlaySounds', !this.playSounds)
+					await this.soundsStore.setShouldPlaySounds(!this.shouldPlaySounds)
 				} 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.initAudioObjects()
 
 			if (this.isMediaSettings || this.isPhoneRoom) {
 				emit('talk:media-settings:hide')

src/services/settingsService.js

@@ -63,15 +63,14 @@ const setSIPSettings = async function(sipGroups, sharedSecret, dialInInfo) {
 	})
 }
 
-const setPlaySounds = async function(isGuest, enabled) {
-	const savableValue = enabled ? 'yes' : 'no'
-	if (!isGuest) {
-		return axios.post(generateOcsUrl('apps/spreed/api/v1/settings/user'), {
+const setPlaySounds = async function(hasUserAccount, value) {
+	if (hasUserAccount) {
+		await axios.post(generateOcsUrl('apps/spreed/api/v1/settings/user'), {
 			key: 'play_sounds',
-			value: savableValue,
+			value,
 		})
 	} else {
-		BrowserStorage.setItem('play_sounds', savableValue)
+		BrowserStorage.setItem('play_sounds', value)
 	}
 }