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 },