From e5285e5489c9dab0275cb1e649b21c0330f1c985 Mon Sep 17 00:00:00 2001 From: DorraJaouad Date: Mon, 7 Oct 2024 19:39:02 +0200 Subject: [PATCH] feat(call): add option to enable blur background by default for all conversations Signed-off-by: DorraJaouad --- .../MediaSettings/MediaSettings.vue | 27 +++++++++++------ .../SettingsDialog/MediaDevicesPreview.vue | 30 +++++++++++++++++++ src/composables/useDevices.js | 11 +++++++ src/stores/settings.js | 22 +++++++++++++- 4 files changed, 80 insertions(+), 10 deletions(-) diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index 5a0e72068df..a7426a4df64 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/src/components/MediaSettings/MediaSettings.vue @@ -352,6 +352,10 @@ export default { return this.settingsStore.getShowMediaSettings(this.token) }, + blurBackgroundEnabled() { + return this.settingsStore.getBlurBackgroundEnabled + }, + showVideo() { return this.videoPreviewAvailable && this.videoOn }, @@ -431,16 +435,21 @@ export default { this.audioOn = !BrowserStorage.getItem('audioDisabled_' + this.token) this.videoOn = !BrowserStorage.getItem('videoDisabled_' + this.token) this.silentCall = !!BrowserStorage.getItem('silentCall_' + this.token) - - // Set virtual background depending on BrowserStorage's settings - if (BrowserStorage.getItem('virtualBackgroundEnabled_' + this.token) === 'true') { - if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) { - this.blurVirtualBackground() - } else if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) { - this.setVirtualBackgroundImage(BrowserStorage.getItem('virtualBackgroundUrl_' + this.token)) - } + // Check main blur background setting + if (this.blurBackgroundEnabled) { + this.blurVirtualBackground() + this.blurBackground() } else { - this.clearVirtualBackground() + // Set virtual background depending on BrowserStorage's settings + if (BrowserStorage.getItem('virtualBackgroundEnabled_' + this.token) === 'true') { + if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) { + this.blurVirtualBackground() + } else if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) { + this.setVirtualBackgroundImage(BrowserStorage.getItem('virtualBackgroundUrl_' + this.token)) + } + } else { + this.clearVirtualBackground() + } } this.initializeDevices() diff --git a/src/components/SettingsDialog/MediaDevicesPreview.vue b/src/components/SettingsDialog/MediaDevicesPreview.vue index d672aa1b14b..794d7edecdf 100644 --- a/src/components/SettingsDialog/MediaDevicesPreview.vue +++ b/src/components/SettingsDialog/MediaDevicesPreview.vue @@ -39,6 +39,11 @@ :device-id="videoInputId" @refresh="updateDevices" @update:deviceId="handleVideoInputIdChange" /> + + {{ t('spreed', 'Enable blur background by default for all conversations.') }} +
@@ -75,10 +80,14 @@ import VideoOff from 'vue-material-design-icons/VideoOff.vue' import { t } from '@nextcloud/l10n' +import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js' + import MediaDevicesSelector from '../MediaSettings/MediaDevicesSelector.vue' import VolumeIndicator from '../UIShared/VolumeIndicator.vue' import { useDevices } from '../../composables/useDevices.js' +import { VIRTUAL_BACKGROUND } from '../../constants.js' +import { useSettingsStore } from '../../stores/settings.js' export default { @@ -88,6 +97,7 @@ export default { AlertCircle, MediaDevicesSelector, MicrophoneOff, + NcCheckboxRadioSwitch, VideoOff, VolumeIndicator, }, @@ -108,6 +118,7 @@ export default { audioStreamError, videoStream, videoStreamError, + virtualBackground, } = useDevices(video, true) return { @@ -125,6 +136,8 @@ export default { audioStreamError, videoStream, videoStreamError, + virtualBackground, + settingsStore: useSettingsStore(), } }, @@ -180,6 +193,10 @@ export default { return t('spreed', 'Error while accessing camera') }, + + blurBackgroundEnabled() { + return this.settingsStore.getBlurBackgroundEnabled + } }, methods: { @@ -194,6 +211,19 @@ export default { this.videoInputId = videoInputId 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) + } + }, }, } diff --git a/src/composables/useDevices.js b/src/composables/useDevices.js index aa0b2714a6b..1dd7c1d8ac8 100644 --- a/src/composables/useDevices.js +++ b/src/composables/useDevices.js @@ -6,6 +6,8 @@ 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 attachMediaStream from '../utils/attachmediastream.js' import TrackToStream from '../utils/media/pipeline/TrackToStream.js' import VirtualBackground from '../utils/media/pipeline/VirtualBackground.js' @@ -106,6 +108,15 @@ export function useDevices(video, initializeOnMounted) { virtualBackground.value.connectTrackSink('default', videoTrackToStream.value, 'video') + const blurBackgroundEnabled = BrowserStorage.getItem('blurBackgroundEnabled') + if (blurBackgroundEnabled === 'true') { + virtualBackground.value.setEnabled(true) + virtualBackground.value.setVirtualBackground({ + backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR, + blurValue: VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT, + }) + } + if (initializeOnMounted) { initializeDevices() } diff --git a/src/stores/settings.js b/src/stores/settings.js index bfbfa416f20..072f926fe14 100644 --- a/src/stores/settings.js +++ b/src/stores/settings.js @@ -33,7 +33,8 @@ export const useSettingsStore = defineStore('settings', { state: () => ({ readStatusPrivacy: loadState('spreed', 'read_status_privacy', PRIVACY.PRIVATE), typingStatusPrivacy: loadState('spreed', 'typing_privacy', PRIVACY.PRIVATE), - showMediaSettings: {} + showMediaSettings: {}, + blurBackgroundEnabled: undefined, }), getters: { @@ -65,6 +66,16 @@ 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: { @@ -96,5 +107,14 @@ export const useSettingsStore = defineStore('settings', { } Vue.set(this.showMediaSettings, token, value) }, + + setBlurBackgroundEnabled(value) { + if (value) { + BrowserStorage.setItem('blurBackgroundEnabled', 'true') + } else { + BrowserStorage.removeItem('blurBackgroundEnabled') + } + this.blurBackgroundEnabled = value + } }, })