fix: migrate from browser storage to stored value config

Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Oct 30, 2024 · fd3a036 · fd3a036
1 parent a010d70
commit fd3a036
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 29 deletions.
diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue
@@ -199,6 +199,16 @@ export default {
 		}
 	},
 
+	mounted() {
+		if (this.blurBackgroundEnabled) {
+			this.virtualBackground.setEnabled(true)
+			this.virtualBackground.setVirtualBackground({
+				backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR,
+				blurValue: VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT,
+			})
+		}
+	},
+
 	methods: {
 		t,
 
@@ -212,16 +222,20 @@ export default {
 			this.updatePreferences('videoinput')
 		},
 
-		setBlurBackgroundEnabled(value) {
-			this.settingsStore.setBlurBackgroundEnabled(value)
-			if (value) {
-				this.virtualBackground.setEnabled(true)
-				this.virtualBackground.setVirtualBackground({
-					backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR,
-					blurValue: VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT,
-				})
-			} else {
-				this.virtualBackground.setEnabled(false)
+		async setBlurBackgroundEnabled(value) {
+			try {
+				await this.settingsStore.setBlurBackgroundEnabled(value)
+				if (value) {
+					this.virtualBackground.setEnabled(true)
+					this.virtualBackground.setVirtualBackground({
+						backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR,
+						blurValue: VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT,
+					})
+				} else {
+					this.virtualBackground.setEnabled(false)
+				}
+			} catch (error) {
+				console.error('Failed to set blur background enabled:', error)
 			}
 		},
 	},

diff --git a/src/composables/useDevices.js b/src/composables/useDevices.js
@@ -7,7 +7,7 @@ import createHark from 'hark'
 import { computed, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 
 import { VIRTUAL_BACKGROUND } from '../constants.js'
-import BrowserStorage from '../services/BrowserStorage.js'
+import { getTalkConfig } from '../services/CapabilitiesManager.ts'
 import attachMediaStream from '../utils/attachmediastream.js'
 import TrackToStream from '../utils/media/pipeline/TrackToStream.js'
 import VirtualBackground from '../utils/media/pipeline/VirtualBackground.js'
@@ -108,8 +108,8 @@ export function useDevices(video, initializeOnMounted) {
 
 		virtualBackground.value.connectTrackSink('default', videoTrackToStream.value, 'video')
 
-		const blurBackgroundEnabled = BrowserStorage.getItem('blurBackgroundEnabled')
-		if (blurBackgroundEnabled === 'true') {
+		const blurBackgroundEnabled = getTalkConfig('local', 'call', 'blur-background')
+		if (blurBackgroundEnabled) {
 			virtualBackground.value.setEnabled(true)
 			virtualBackground.value.setVirtualBackground({
 				backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR,

diff --git a/src/services/settingsService.js b/src/services/settingsService.js
@@ -97,6 +97,7 @@ const setUserConfig = async function(appId, configKey, configValue) {
 
 export {
 	setAttachmentFolder,
+	setBlurBackground,
 	setReadStatusPrivacy,
 	setTypingStatusPrivacy,
 	setSIPSettings,

diff --git a/src/stores/settings.js b/src/stores/settings.js
@@ -14,7 +14,8 @@ import { getTalkConfig } from '../services/CapabilitiesManager.ts'
 import {
 	setReadStatusPrivacy,
 	setTypingStatusPrivacy,
-	setStartWithoutMedia
+	setStartWithoutMedia,
+	setBlurBackground,
 } from '../services/settingsService.js'
 
 /**
@@ -39,8 +40,8 @@ export const useSettingsStore = defineStore('settings', {
 		readStatusPrivacy: loadState('spreed', 'read_status_privacy', PRIVACY.PRIVATE),
 		typingStatusPrivacy: loadState('spreed', 'typing_privacy', PRIVACY.PRIVATE),
 		showMediaSettings: {},
-		startWithoutMedia: getTalkConfig('local', 'call', 'start-without-media'),,
-		blurBackgroundEnabled: undefined,
+		startWithoutMedia: getTalkConfig('local', 'call', 'start-without-media'),
+		blurBackgroundEnabled: getTalkConfig('local', 'call', 'blur-background'),
 	}),
 
 	getters: {
@@ -74,14 +75,8 @@ export const useSettingsStore = defineStore('settings', {
 		},
 
 		getBlurBackgroundEnabled: (state) => {
-			if (state.blurBackgroundEnabled !== undefined) {
-				return state.blurBackgroundEnabled
-			}
-
-			const storedValue = BrowserStorage.getItem('blurBackgroundEnabled')
-			state.blurBackgroundEnabled = storedValue === 'true'
 			return state.blurBackgroundEnabled
-		}
+		},
 	},
 
 	actions: {
@@ -114,12 +109,8 @@ export const useSettingsStore = defineStore('settings', {
 			Vue.set(this.showMediaSettings, token, value)
 		},
 
-		setBlurBackgroundEnabled(value) {
-			if (value) {
-				BrowserStorage.setItem('blurBackgroundEnabled', 'true')
-			} else {
-				BrowserStorage.removeItem('blurBackgroundEnabled')
-			}
+		async setBlurBackgroundEnabled(value) {
+			await setBlurBackground(value)
 			this.blurBackgroundEnabled = value
 		},