From fd3a036d73c5d54155ef7db219e0fe68ab067ed3 Mon Sep 17 00:00:00 2001
From: DorraJaouad <dorra.jaoued7@gmail.com>
Date: Wed, 30 Oct 2024 14:09:39 +0100
Subject: [PATCH] fix: migrate from browser storage to stored value config

Signed-off-by: DorraJaouad <dorra.jaoued7@gmail.com>
---
 .../SettingsDialog/MediaDevicesPreview.vue    | 34 +++++++++++++------
 src/composables/useDevices.js                 |  6 ++--
 src/services/settingsService.js               |  1 +
 src/stores/settings.js                        | 23 ++++---------
 4 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue
index 794d7edecdf..48f3070b104 100644
--- 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
index 1dd7c1d8ac8..06163316d5e 100644
--- 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
index 4127575e669..f0f476126d0 100644
--- 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
index e0a5e613ee8..9e8a9f27e1d 100644
--- 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
 		},