feat(call): add option to enable blur background by default for all c…

…onversations Signed-off-by: DorraJaouad <[email protected]>
nextcloud · Oct 7, 2024 · e5285e5 · e5285e5
1 parent b681d0e
commit e5285e5
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 10 deletions.
diff --git 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
@@ -39,6 +39,11 @@
 			:device-id="videoInputId"
 			@refresh="updateDevices"
 			@update:deviceId="handleVideoInputIdChange" />
+		<NcCheckboxRadioSwitch type="switch"
+			:checked="blurBackgroundEnabled"
+			@update:checked="setBlurBackgroundEnabled">
+			{{ t('spreed', 'Enable blur background by default for all conversations.') }}
+		</NcCheckboxRadioSwitch>
 		<div class="preview preview-video">
 			<div v-if="!videoPreviewAvailable"
 				class="preview-not-available">
@@ -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)
+			}
+		},
 	},
 }
 </script>

diff --git 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
@@ -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
+		}
 	},
 })