From bde1c23f13997dd47186c4b7ffbbe151c94b980c Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 19 Sep 2024 16:17:46 +0200
Subject: [PATCH 1/2] fix: migrate sounds store to pinia

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/Recording.vue                             |  13 +-
 .../MediaSettings/MediaDevicesSpeakerTest.vue |  12 +-
 .../SettingsDialog/SettingsDialog.vue         |   7 +-
 src/components/TopBar/CallButton.vue          |   4 +-
 src/store/soundsStore.js                      | 227 ------------------
 src/store/storeConfig.js                      |   2 -
 src/stores/sounds.js                          | 187 +++++++++++++++
 src/utils/sounds.js                           |  24 +-
 8 files changed, 228 insertions(+), 248 deletions(-)
 delete mode 100644 src/store/soundsStore.js
 create mode 100644 src/stores/sounds.js

diff --git a/src/Recording.vue b/src/Recording.vue
index dfcf9bee1cb..4082a075f85 100644
--- a/src/Recording.vue
+++ b/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
diff --git a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
index ce3af05a3a8..96b22f9e1c8 100644
--- a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
+++ b/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
 				})
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index b7c631d73e4..ab2dd4466c6 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/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'))
 				}
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 74a0033521a..8e619039b18 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/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')
diff --git a/src/store/soundsStore.js b/src/store/soundsStore.js
deleted file mode 100644
index cb1b151467f..00000000000
--- a/src/store/soundsStore.js
+++ /dev/null
@@ -1,227 +0,0 @@
-/**
- * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
- * SPDX-License-Identifier: AGPL-3.0-or-later
- */
-
-import { loadState } from '@nextcloud/initial-state'
-import { generateFilePath } from '@nextcloud/router'
-
-import BrowserStorage from '../services/BrowserStorage.js'
-import { setPlaySounds } from '../services/settingsService.js'
-
-const state = {
-	userId: undefined,
-	playSoundsUser: loadState('spreed', 'play_sounds', false),
-	playSoundsGuest: BrowserStorage.getItem('play_sounds') !== 'no',
-	audioObjectsCreated: false,
-	joinAudioObject: null,
-	leaveAudioObject: null,
-	waitAudioObject: null,
-}
-
-const getters = {
-	playSounds: (state) => {
-		if (state.userId) {
-			return state.playSoundsUser
-		}
-		return state.playSoundsGuest
-	},
-}
-
-const mutations = {
-	/**
-	 * Set play sounds
-	 *
-	 * @param {object} state current store state
-	 * @param {boolean} enabled Whether sounds should be played
-	 */
-	setPlaySounds(state, enabled) {
-		state.playSoundsUser = enabled
-		state.playSoundsGuest = enabled
-	},
-
-	setUserId(state, userId) {
-		state.userId = userId
-	},
-
-	/**
-	 * Sets the join audio object
-	 *
-	 * @param {object} state current store state
-	 * @param {HTMLAudioElement} audioObject new audio object
-	 */
-	setJoinAudioObject(state, audioObject) {
-		state.joinAudioObject = audioObject
-	},
-
-	/**
-	 * Sets the leave audio object
-	 *
-	 * @param {object} state current store state
-	 * @param {HTMLAudioElement} audioObject new audio object
-	 */
-	setLeaveAudioObject(state, audioObject) {
-		state.leaveAudioObject = audioObject
-	},
-
-	/**
-	 * Sets the wait audio object
-	 *
-	 * @param {object} state current store state
-	 * @param {HTMLAudioElement} audioObject new audio object
-	 */
-	setWaitAudioObject(state, audioObject) {
-		state.waitAudioObject = audioObject
-	},
-
-	/**
-	 * Sets a flag that all audio objects were created
-	 *
-	 * @param {object} state current store state
-	 */
-	setAudioObjectsCreated(state) {
-		state.audioObjectsCreated = true
-	},
-}
-
-/**
- * Helper method to get the full file path of an audio file in spreed/img.
- * Example: getFullAudioFilepath('myAudio') => spreed/img/myAudio.ogg
- *
- * @param {string} fileName The name of the file without extension
- * @return {string} The full path to the file in the spreed/img directory and adds .ogg/.flac depending on supported codecs
- */
-const getFullAudioFilepath = function(fileName) {
-	const tempAudio = new Audio()
-
-	// Prefer the .ogg version of sounds, but fall back to .flac in case .ogg is not supported (Safari)
-	if (tempAudio.canPlayType('audio/ogg')) {
-		return generateFilePath('spreed', 'img', fileName + '.ogg')
-	} else {
-		return generateFilePath('spreed', 'img', fileName + '.flac')
-	}
-}
-
-/**
- * Creates a HTMLAudioElement with the specified filePath and loads it
- *
- * @param {string} filePath Path to the file
- * @return {HTMLAudioElement} The created and loaded HTMLAudioElement
- */
-const createAudioObject = function(filePath) {
-	const audio = new Audio(filePath)
-	audio.load()
-
-	return audio
-}
-
-const actions = {
-
-	/**
-	 * @param {object} context default store context;
-	 * @param {object} user A NextcloudUser object as returned by @nextcloud/auth
-	 * @param {string} user.uid The user id of the user
-	 */
-	setCurrentUser(context, user) {
-		context.commit('setUserId', user.uid)
-	},
-
-	/**
-	 * Set the actor from the current user
-	 *
-	 * @param {object} context default store context;
-	 * @param {boolean} enabled Whether sounds should be played
-	 */
-	async setPlaySounds(context, enabled) {
-		await setPlaySounds(!context.state.userId, enabled)
-		context.commit('setPlaySounds', enabled)
-	},
-
-	/**
-	 * Plays the join audio file with a volume of 0.75
-	 *
-	 * @param {object} context default store context
-	 */
-	playJoinAudio(context) {
-		// Make sure the audio objects are really created before playing it
-		context.dispatch('createAudioObjects')
-
-		const audio = context.state.joinAudioObject
-		audio.load()
-		audio.volume = 0.75
-		audio.play()
-	},
-
-	/**
-	 * Plays the leave audio file with a volume of 0.75
-	 *
-	 * @param {object} context default store context
-	 */
-	playLeaveAudio(context) {
-		// Make sure the audio objects are really created before playing it
-		context.dispatch('createAudioObjects')
-
-		const audio = context.state.leaveAudioObject
-		audio.load()
-		audio.volume = 0.75
-		audio.play()
-	},
-
-	/**
-	 * Plays the wait audio file with a volume of 0.5
-	 *
-	 * @param {object} context default store context
-	 */
-	playWaitAudio(context) {
-		// Make sure the audio objects are really created before playing it
-		context.dispatch('createAudioObjects')
-
-		const audio = context.state.waitAudioObject
-		audio.load()
-		audio.volume = 0.5
-		audio.play()
-
-		return audio
-	},
-
-	/**
-	 * Pauses the wait audio playback
-	 *
-	 * @param {object} context default store context
-	 */
-	pauseWaitAudio(context) {
-		// Make sure the audio objects are really created before pausing it
-		context.dispatch('createAudioObjects')
-
-		const audio = context.state.waitAudioObject
-		audio.pause()
-	},
-
-	/**
-	 * If not already created, this creates audio objects for join, leave and wait sounds
-	 *
-	 * @param {object} context default store context
-	 */
-	createAudioObjects(context) {
-		// No need to create the audio objects, if they were created already
-		if (context.state.audioObjectsCreated) {
-			return
-		}
-
-		const joinFilepath = getFullAudioFilepath('join_call')
-		const joinAudio = createAudioObject(joinFilepath)
-		context.commit('setJoinAudioObject', joinAudio)
-
-		const leaveFilepath = getFullAudioFilepath('leave_call')
-		const leaveAudio = createAudioObject(leaveFilepath)
-		context.commit('setLeaveAudioObject', leaveAudio)
-
-		const waitFilepath = getFullAudioFilepath('LibremPhoneCall')
-		const waitAudio = createAudioObject(waitFilepath)
-		context.commit('setWaitAudioObject', waitAudio)
-
-		context.commit('setAudioObjectsCreated')
-	},
-}
-
-export default { state, mutations, getters, actions }
diff --git a/src/store/storeConfig.js b/src/store/storeConfig.js
index b0c818175a2..6b8a643c52a 100644
--- a/src/store/storeConfig.js
+++ b/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,
 	},
 
diff --git a/src/stores/sounds.js b/src/stores/sounds.js
new file mode 100644
index 00000000000..ef4870f8c5e
--- /dev/null
+++ b/src/stores/sounds.js
@@ -0,0 +1,187 @@
+/**
+ * SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineStore } from 'pinia'
+
+import { getCurrentUser } from '@nextcloud/auth'
+import { loadState } from '@nextcloud/initial-state'
+import { generateFilePath } from '@nextcloud/router'
+
+import BrowserStorage from '../services/BrowserStorage.js'
+import { setPlaySounds } from '../services/settingsService.js'
+
+/**
+ * Helper method to get the full file path of an audio file in spreed/img.
+ * Example: getFullAudioFilepath('myAudio') => spreed/img/myAudio.ogg
+ *
+ * @param {string} fileName The name of the file without extension
+ * @return {string} The full path to the file in the spreed/img directory and adds .ogg/.flac depending on supported codecs
+ */
+const getFullAudioFilepath = function(fileName) {
+	const tempAudio = new Audio()
+
+	// Prefer the .ogg version of sounds, but fall back to .flac in case .ogg is not supported (Safari)
+	if (tempAudio.canPlayType('audio/ogg')) {
+		return generateFilePath('spreed', 'img', fileName + '.ogg')
+	} else {
+		return generateFilePath('spreed', 'img', fileName + '.flac')
+	}
+}
+
+/**
+ * Creates a HTMLAudioElement with the specified filePath and loads it
+ *
+ * @param {string} filePath Path to the file
+ * @return {HTMLAudioElement} The created and loaded HTMLAudioElement
+ */
+const createAudioObject = function(filePath) {
+	const audio = new Audio(filePath)
+	audio.load()
+
+	return audio
+}
+
+export const useSoundsStore = defineStore('sounds', {
+	state: () => ({
+		playSoundsUser: loadState('spreed', 'play_sounds', false),
+		playSoundsGuest: BrowserStorage.getItem('play_sounds') !== 'no',
+		audioObjectsCreated: false,
+		joinAudioObject: null,
+		leaveAudioObject: null,
+		waitAudioObject: null,
+	}),
+
+	getters: {
+		playSounds: (state) => {
+			if (getCurrentUser()?.uid) {
+				return state.playSoundsUser
+			}
+			return state.playSoundsGuest
+		},
+	},
+
+	actions: {
+		/**
+		 * Sets the join audio object
+		 *
+		 * @param {HTMLAudioElement} audioObject new audio object
+		 */
+		setJoinAudioObject(audioObject) {
+			this.joinAudioObject = audioObject
+		},
+
+		/**
+		 * Sets the leave audio object
+		 *
+		 * @param {HTMLAudioElement} audioObject new audio object
+		 */
+		setLeaveAudioObject(audioObject) {
+			this.leaveAudioObject = audioObject
+		},
+
+		/**
+		 * Sets the wait audio object
+		 *
+		 * @param {HTMLAudioElement} audioObject new audio object
+		 */
+		setWaitAudioObject(audioObject) {
+			this.waitAudioObject = audioObject
+		},
+
+		/**
+		 * Sets a flag that all audio objects were created
+		 */
+		setAudioObjectsCreated() {
+			this.audioObjectsCreated = true
+		},
+
+		/**
+		 * Set play sounds
+		 *
+		 * @param {boolean} enabled Whether sounds should be played
+		 */
+		async setPlaySounds(enabled) {
+			await setPlaySounds(!this.userId, enabled)
+			this.playSoundsUser = enabled
+			this.playSoundsGuest = enabled
+		},
+
+		/**
+		 * Plays the join audio file with a volume of 0.75
+		 */
+		playJoinAudio() {
+			// Make sure the audio objects are really created before playing it
+			this.createAudioObjects()
+
+			const audio = this.joinAudioObject
+			audio.load()
+			audio.volume = 0.75
+			audio.play()
+		},
+
+		/**
+		 * Plays the leave audio file with a volume of 0.75
+		 */
+		playLeaveAudio() {
+			// Make sure the audio objects are really created before playing it
+			this.createAudioObjects()
+
+			const audio = this.leaveAudioObject
+			audio.load()
+			audio.volume = 0.75
+			audio.play()
+		},
+
+		/**
+		 * Plays the wait audio file with a volume of 0.5
+		 */
+		async playWaitAudio() {
+			// Make sure the audio objects are really created before playing it
+			this.createAudioObjects()
+
+			const audio = this.waitAudioObject
+			audio.load()
+			audio.volume = 0.5
+			audio.play()
+
+			return audio
+		},
+
+		/**
+		 * Pauses the wait audio playback
+		 */
+		pauseWaitAudio() {
+			// Make sure the audio objects are really created before pausing it
+			this.createAudioObjects()
+
+			const audio = this.waitAudioObject
+			audio.pause()
+		},
+
+		/**
+		 * If not already created, this creates audio objects for join, leave and wait sounds
+		 */
+		createAudioObjects() {
+			// No need to create the audio objects, if they were created already
+			if (this.audioObjectsCreated) {
+				return
+			}
+
+			const joinFilepath = getFullAudioFilepath('join_call')
+			const joinAudio = createAudioObject(joinFilepath)
+			this.setJoinAudioObject(joinAudio)
+
+			const leaveFilepath = getFullAudioFilepath('leave_call')
+			const leaveAudio = createAudioObject(leaveFilepath)
+			this.setLeaveAudioObject(leaveAudio)
+
+			const waitFilepath = getFullAudioFilepath('LibremPhoneCall')
+			const waitAudio = createAudioObject(waitFilepath)
+			this.setWaitAudioObject(waitAudio)
+
+			this.setAudioObjectsCreated()
+		},
+	}
+})
diff --git a/src/utils/sounds.js b/src/utils/sounds.js
index 5fafab833a4..a088f94ff21 100644
--- a/src/utils/sounds.js
+++ b/src/utils/sounds.js
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import store from '../store/index.js'
+import { useSoundsStore } from '../stores/sounds.js'
 
 export const Sounds = {
 	BLOCK_SOUND_TIMEOUT: 3000,
@@ -16,21 +16,23 @@ export const Sounds = {
 
 	_stopWaiting() {
 		console.debug('Stop waiting sound')
-		store.dispatch('pauseWaitAudio')
+		const soundsStore = useSoundsStore()
+		soundsStore.pauseWaitAudio()
 		clearInterval(this.backgroundInterval)
 	},
 
 	async playWaiting() {
-		if (!store.getters.playSounds) {
+		const soundsStore = useSoundsStore()
+		if (!soundsStore.playSounds) {
 			return
 		}
 
 		console.debug('Playing waiting sound')
-		store.dispatch('playWaitAudio')
+		soundsStore.playWaitAudio()
 
 		this.playedWaiting = 0
 		this.backgroundInterval = setInterval(() => {
-			if (!store.getters.playSounds) {
+			if (!soundsStore.playSounds) {
 				this._stopWaiting()
 				return
 			}
@@ -42,7 +44,7 @@ export const Sounds = {
 			}
 
 			console.debug('Playing waiting sound')
-			store.dispatch('playWaitAudio')
+			soundsStore.playWaitAudio()
 			this.playedWaiting++
 
 		}, 15000)
@@ -51,7 +53,8 @@ export const Sounds = {
 	async playJoin(force, playWaitingSound) {
 		this._stopWaiting()
 
-		if (!store.getters.playSounds) {
+		const soundsStore = useSoundsStore()
+		if (!soundsStore.playSounds) {
 			return
 		}
 
@@ -79,14 +82,15 @@ export const Sounds = {
 		if (playWaitingSound) {
 			await this.playWaiting()
 		} else {
-			store.dispatch('playJoinAudio')
+			soundsStore.playJoinAudio()
 		}
 	},
 
 	async playLeave(force, playWaitingSound) {
 		this._stopWaiting()
 
-		if (!store.getters.playSounds) {
+		const soundsStore = useSoundsStore()
+		if (!soundsStore.playSounds) {
 			return
 		}
 
@@ -110,7 +114,7 @@ export const Sounds = {
 		}
 		this.lastPlayedLeave = currentTime
 
-		store.dispatch('playLeaveAudio')
+		soundsStore.playLeaveAudio()
 
 		if (playWaitingSound) {
 			this.playWaiting()

From e94fb5418515a7f23e4b7a73ba021a34cbeb6eca Mon Sep 17 00:00:00 2001
From: Maksim Sukharev <antreesy.web@gmail.com>
Date: Thu, 19 Sep 2024 22:56:25 +0200
Subject: [PATCH 2/2] fix: refactor store

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
---
 src/Recording.vue                             |   2 +-
 .../MediaSettings/MediaDevicesSpeakerTest.vue |  15 +-
 .../SettingsDialog/SettingsDialog.vue         |   8 +-
 src/components/TopBar/CallButton.vue          |   2 +-
 src/services/settingsService.js               |  11 +-
 src/stores/sounds.js                          | 177 ++++--------------
 src/utils/sounds.js                           |  18 +-
 7 files changed, 70 insertions(+), 163 deletions(-)

diff --git a/src/Recording.vue b/src/Recording.vue
index 4082a075f85..a271033e996 100644
--- a/src/Recording.vue
+++ b/src/Recording.vue
@@ -42,7 +42,7 @@ export default {
 		if (this.$route.name === 'recording') {
 			await this.$store.dispatch('updateToken', this.$route.params.token)
 
-			await this.soundsStore.setPlaySounds(false)
+			await this.soundsStore.setShouldPlaySounds(false)
 		}
 
 		// This should not be strictly needed, as the recording server is
diff --git a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
index 96b22f9e1c8..ab22794dd2b 100644
--- a/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
+++ b/src/components/MediaSettings/MediaDevicesSpeakerTest.vue
@@ -69,17 +69,22 @@ export default {
 
 	methods: {
 		t,
+
 		playTestSound() {
 			if (this.isPlayingTestSound) {
-				this.soundsStore.pauseWaitAudio()
+				this.soundsStore.pauseAudio('wait')
 				return
 			}
 			this.isPlayingTestSound = true
-			this.soundsStore.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
+			}
 		},
 	},
 }
diff --git a/src/components/SettingsDialog/SettingsDialog.vue b/src/components/SettingsDialog/SettingsDialog.vue
index ab2dd4466c6..cc5a6ba5795 100644
--- a/src/components/SettingsDialog/SettingsDialog.vue
+++ b/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"
@@ -239,8 +239,8 @@ export default {
 	},
 
 	computed: {
-		playSounds() {
-			return this.soundsStore.playSounds
+		shouldPlaySounds() {
+			return this.soundsStore.shouldPlaySounds
 		},
 
 		attachmentFolder() {
@@ -351,7 +351,7 @@ export default {
 			this.playSoundsLoading = true
 			try {
 				try {
-					await this.soundsStore.setPlaySounds(!this.playSounds)
+					await this.soundsStore.setShouldPlaySounds(!this.shouldPlaySounds)
 				} catch (e) {
 					showError(t('spreed', 'Failed to save sounds setting'))
 				}
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index 8e619039b18..42c1d7dc8ab 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -438,7 +438,7 @@ export default {
 
 		handleClick() {
 			// Create audio objects as a result of a user interaction to allow playing sounds in Safari
-			this.soundsStore.createAudioObjects()
+			this.soundsStore.initAudioObjects()
 
 			if (this.isMediaSettings || this.isPhoneRoom) {
 				emit('talk:media-settings:hide')
diff --git a/src/services/settingsService.js b/src/services/settingsService.js
index 07d0b554339..9d6f768d042 100644
--- a/src/services/settingsService.js
+++ b/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)
 	}
 }
 
diff --git a/src/stores/sounds.js b/src/stores/sounds.js
index ef4870f8c5e..0f25089672f 100644
--- a/src/stores/sounds.js
+++ b/src/stores/sounds.js
@@ -4,6 +4,7 @@
  */
 
 import { defineStore } from 'pinia'
+import Vue from 'vue'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
@@ -12,176 +13,78 @@ import { generateFilePath } from '@nextcloud/router'
 import BrowserStorage from '../services/BrowserStorage.js'
 import { setPlaySounds } from '../services/settingsService.js'
 
+const hasUserAccount = Boolean(getCurrentUser()?.uid)
 /**
- * Helper method to get the full file path of an audio file in spreed/img.
- * Example: getFullAudioFilepath('myAudio') => spreed/img/myAudio.ogg
- *
- * @param {string} fileName The name of the file without extension
- * @return {string} The full path to the file in the spreed/img directory and adds .ogg/.flac depending on supported codecs
+ * Get play sounds option (from server for user or from browser storage for guest)
  */
-const getFullAudioFilepath = function(fileName) {
-	const tempAudio = new Audio()
-
-	// Prefer the .ogg version of sounds, but fall back to .flac in case .ogg is not supported (Safari)
-	if (tempAudio.canPlayType('audio/ogg')) {
-		return generateFilePath('spreed', 'img', fileName + '.ogg')
-	} else {
-		return generateFilePath('spreed', 'img', fileName + '.flac')
-	}
-}
+const shouldPlaySounds = hasUserAccount
+	? loadState('spreed', 'play_sounds', false)
+	: BrowserStorage.getItem('play_sounds') !== 'no'
 
 /**
- * Creates a HTMLAudioElement with the specified filePath and loads it
- *
- * @param {string} filePath Path to the file
- * @return {HTMLAudioElement} The created and loaded HTMLAudioElement
+ * Preferred version is the .ogg, with .flac fallback if .ogg is not supported (Safari)
  */
-const createAudioObject = function(filePath) {
-	const audio = new Audio(filePath)
-	audio.load()
-
-	return audio
-}
+const fileExtension = new Audio().canPlayType('audio/ogg') ? '.ogg' : '.flac'
 
 export const useSoundsStore = defineStore('sounds', {
 	state: () => ({
-		playSoundsUser: loadState('spreed', 'play_sounds', false),
-		playSoundsGuest: BrowserStorage.getItem('play_sounds') !== 'no',
+		shouldPlaySounds,
 		audioObjectsCreated: false,
-		joinAudioObject: null,
-		leaveAudioObject: null,
-		waitAudioObject: null,
-	}),
-
-	getters: {
-		playSounds: (state) => {
-			if (getCurrentUser()?.uid) {
-				return state.playSoundsUser
-			}
-			return state.playSoundsGuest
+		audioObjects: {
+			join: null,
+			leave: null,
+			wait: null,
 		},
-	},
+	}),
 
 	actions: {
 		/**
-		 * Sets the join audio object
-		 *
-		 * @param {HTMLAudioElement} audioObject new audio object
-		 */
-		setJoinAudioObject(audioObject) {
-			this.joinAudioObject = audioObject
-		},
-
-		/**
-		 * Sets the leave audio object
-		 *
-		 * @param {HTMLAudioElement} audioObject new audio object
+		 * Set play sounds option (on server for user or in browser storage for guest)
+		 * @param {boolean} value whether sounds should be played
 		 */
-		setLeaveAudioObject(audioObject) {
-			this.leaveAudioObject = audioObject
+		async setShouldPlaySounds(value) {
+			await setPlaySounds(hasUserAccount, value ? 'yes' : 'no')
+			this.shouldPlaySounds = value
 		},
 
-		/**
-		 * Sets the wait audio object
-		 *
-		 * @param {HTMLAudioElement} audioObject new audio object
-		 */
-		setWaitAudioObject(audioObject) {
-			this.waitAudioObject = audioObject
+		playAudio(key) {
+			if (!this.audioObjectsCreated) {
+				this.initAudioObjects()
+			}
+			this.audioObjects[key].play()
 		},
 
-		/**
-		 * Sets a flag that all audio objects were created
-		 */
-		setAudioObjectsCreated() {
-			this.audioObjectsCreated = true
+		pauseAudio(key) {
+			this.audioObjects[key]?.pause()
 		},
 
 		/**
-		 * Set play sounds
+		 * Creates a HTMLAudioElement with the specified fileName and loads it
 		 *
-		 * @param {boolean} enabled Whether sounds should be played
-		 */
-		async setPlaySounds(enabled) {
-			await setPlaySounds(!this.userId, enabled)
-			this.playSoundsUser = enabled
-			this.playSoundsGuest = enabled
-		},
-
-		/**
-		 * Plays the join audio file with a volume of 0.75
+		 * @param {string} key key of the file at store.audioObjects
+		 * @param {string} fileName name of the file at 'spreed/img/' directory
+		 * @param {number} volume volume of the audio
 		 */
-		playJoinAudio() {
-			// Make sure the audio objects are really created before playing it
-			this.createAudioObjects()
-
-			const audio = this.joinAudioObject
-			audio.load()
-			audio.volume = 0.75
-			audio.play()
-		},
-
-		/**
-		 * Plays the leave audio file with a volume of 0.75
-		 */
-		playLeaveAudio() {
-			// Make sure the audio objects are really created before playing it
-			this.createAudioObjects()
-
-			const audio = this.leaveAudioObject
+		createAudioObject(key, fileName, volume) {
+			const filePath = generateFilePath('spreed', 'img', fileName + fileExtension)
+			const audio = new Audio(filePath)
 			audio.load()
-			audio.volume = 0.75
-			audio.play()
-		},
-
-		/**
-		 * Plays the wait audio file with a volume of 0.5
-		 */
-		async playWaitAudio() {
-			// Make sure the audio objects are really created before playing it
-			this.createAudioObjects()
-
-			const audio = this.waitAudioObject
-			audio.load()
-			audio.volume = 0.5
-			audio.play()
-
-			return audio
-		},
-
-		/**
-		 * Pauses the wait audio playback
-		 */
-		pauseWaitAudio() {
-			// Make sure the audio objects are really created before pausing it
-			this.createAudioObjects()
-
-			const audio = this.waitAudioObject
-			audio.pause()
+			audio.volume = volume
+			Vue.set(this.audioObjects, key, audio)
 		},
 
 		/**
 		 * If not already created, this creates audio objects for join, leave and wait sounds
 		 */
-		createAudioObjects() {
-			// No need to create the audio objects, if they were created already
+		initAudioObjects() {
 			if (this.audioObjectsCreated) {
 				return
 			}
 
-			const joinFilepath = getFullAudioFilepath('join_call')
-			const joinAudio = createAudioObject(joinFilepath)
-			this.setJoinAudioObject(joinAudio)
-
-			const leaveFilepath = getFullAudioFilepath('leave_call')
-			const leaveAudio = createAudioObject(leaveFilepath)
-			this.setLeaveAudioObject(leaveAudio)
-
-			const waitFilepath = getFullAudioFilepath('LibremPhoneCall')
-			const waitAudio = createAudioObject(waitFilepath)
-			this.setWaitAudioObject(waitAudio)
-
-			this.setAudioObjectsCreated()
+			this.createAudioObject('join', 'join_call', 0.75)
+			this.createAudioObject('leave', 'leave_call', 0.75)
+			this.createAudioObject('wait', 'LibremPhoneCall', 0.5)
+			this.audioObjectsCreated = true
 		},
 	}
 })
diff --git a/src/utils/sounds.js b/src/utils/sounds.js
index a088f94ff21..65d1e3433b0 100644
--- a/src/utils/sounds.js
+++ b/src/utils/sounds.js
@@ -17,22 +17,22 @@ export const Sounds = {
 	_stopWaiting() {
 		console.debug('Stop waiting sound')
 		const soundsStore = useSoundsStore()
-		soundsStore.pauseWaitAudio()
+		soundsStore.pauseAudio('wait')
 		clearInterval(this.backgroundInterval)
 	},
 
 	async playWaiting() {
 		const soundsStore = useSoundsStore()
-		if (!soundsStore.playSounds) {
+		if (!soundsStore.shouldPlaySounds) {
 			return
 		}
 
 		console.debug('Playing waiting sound')
-		soundsStore.playWaitAudio()
+		soundsStore.playAudio('wait')
 
 		this.playedWaiting = 0
 		this.backgroundInterval = setInterval(() => {
-			if (!soundsStore.playSounds) {
+			if (!soundsStore.shouldPlaySounds) {
 				this._stopWaiting()
 				return
 			}
@@ -44,7 +44,7 @@ export const Sounds = {
 			}
 
 			console.debug('Playing waiting sound')
-			soundsStore.playWaitAudio()
+			soundsStore.playAudio('wait')
 			this.playedWaiting++
 
 		}, 15000)
@@ -54,7 +54,7 @@ export const Sounds = {
 		this._stopWaiting()
 
 		const soundsStore = useSoundsStore()
-		if (!soundsStore.playSounds) {
+		if (!soundsStore.shouldPlaySounds) {
 			return
 		}
 
@@ -82,7 +82,7 @@ export const Sounds = {
 		if (playWaitingSound) {
 			await this.playWaiting()
 		} else {
-			soundsStore.playJoinAudio()
+			soundsStore.playAudio('join')
 		}
 	},
 
@@ -90,7 +90,7 @@ export const Sounds = {
 		this._stopWaiting()
 
 		const soundsStore = useSoundsStore()
-		if (!soundsStore.playSounds) {
+		if (!soundsStore.shouldPlaySounds) {
 			return
 		}
 
@@ -114,7 +114,7 @@ export const Sounds = {
 		}
 		this.lastPlayedLeave = currentTime
 
-		soundsStore.playLeaveAudio()
+		soundsStore.playAudio('leave')
 
 		if (playWaitingSound) {
 			this.playWaiting()