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