Merge pull request #10464 from nextcloud/fix/7896/disable-background-blur

perf(CallView) - add an option to disable background blur in call

src/components/CallView/CallView.vue

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<div id="call-container">
+	<div id="call-container" :class="{ 'blurred': isBackgroundBlurred }">
 		<ViewerOverlayCallView v-if="isViewerOverlay"
 			:token="token"
 			:model="promotedParticipantModel"
@@ -162,6 +162,7 @@ import VideoVue from './shared/VideoVue.vue'
 import ViewerOverlayCallView from './shared/ViewerOverlayCallView.vue'
 
 import { SIMULCAST } from '../../constants.js'
+import BrowserStorage from '../../services/BrowserStorage.js'
 import { fetchPeers } from '../../services/callsService.js'
 import { EventBus } from '../../services/EventBus.js'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index.js'
@@ -212,6 +213,7 @@ export default {
 				screenVisible: true,
 			},
 			callParticipantCollection,
+			isBackgroundBlurred: true,
 		}
 	},
 	computed: {
@@ -439,6 +441,7 @@ export default {
 		// Ensure that data is properly initialized before mounting the
 		// subviews.
 		this.updateDataFromCallParticipantModels(this.callParticipantModels)
+		this.isBackgroundBlurred = BrowserStorage.getItem('background-blurred') !== 'false'
 	},
 	mounted() {
 		EventBus.$on('refresh-peer-list', this.debounceFetchPeers)
@@ -446,6 +449,7 @@ export default {
 		callParticipantCollection.on('remove', this._lowerHandWhenParticipantLeaves)
 
 		subscribe('switch-screen-to-id', this._switchScreenToId)
+		subscribe('set-background-blurred', this.setBackgroundBlurred)
 	},
 	beforeDestroy() {
 		EventBus.$off('refresh-peer-list', this.debounceFetchPeers)
@@ -453,6 +457,7 @@ export default {
 		callParticipantCollection.off('remove', this._lowerHandWhenParticipantLeaves)
 
 		unsubscribe('switch-screen-to-id', this._switchScreenToId)
+		unsubscribe('set-background-blurred', this.setBackgroundBlurred)
 	},
 	methods: {
 		/**
@@ -704,6 +709,10 @@ export default {
 				callParticipantModel.setSimulcastVideoQuality(SIMULCAST.LOW)
 			}
 		},
+
+		setBackgroundBlurred(value) {
+			this.isBackgroundBlurred = value
+		},
 	},
 }
 </script>
@@ -722,7 +731,10 @@ export default {
 	width: 100%;
 	height: 100%;
 	background-color: $color-call-background;
-	backdrop-filter: blur(25px);
+
+	&.blurred {
+		backdrop-filter: blur(25px);
+	}
 }
 
 #videos {

src/components/SettingsDialog/SettingsDialog.vue

@@ -90,6 +90,17 @@
 				{{ t('spreed', 'Sounds for chat and call notifications can be adjusted in the personal settings.') }} ↗
 			</a>
 		</NcAppSettingsSection>
+		<NcAppSettingsSection id="performance"
+			:title="t('spreed', 'Performance')"
+			class="app-settings-section">
+			<NcCheckboxRadioSwitch id="blur-call-background"
+				:checked="isBackgroundBlurred"
+				type="switch"
+				class="checkbox"
+				@update:checked="toggleBackgroundBlurred">
+				{{ t('spreed', 'Blur background image in the call (may increase GPU load)') }}
+			</NcCheckboxRadioSwitch>
+		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!disableKeyboardShortcuts"
 			id="shortcuts"
 			:title="t('spreed', 'Keyboard shortcuts')">
@@ -156,7 +167,7 @@
 <script>
 import { getCapabilities } from '@nextcloud/capabilities'
 import { getFilePickerBuilder, showError, showSuccess } from '@nextcloud/dialogs'
-import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { generateUrl } from '@nextcloud/router'
 
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
@@ -168,6 +179,7 @@ import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 import MediaDevicesPreview from '../MediaDevicesPreview.vue'
 
 import { PRIVACY } from '../../constants.js'
+import BrowserStorage from '../../services/BrowserStorage.js'
 import { useSettingsStore } from '../../stores/settings.js'
 
 const supportTypingStatus = getCapabilities()?.spreed?.config?.chat?.['typing-privacy'] !== undefined
@@ -199,6 +211,7 @@ export default {
 			attachmentFolderLoading: true,
 			privacyLoading: false,
 			playSoundsLoading: false,
+			isBackgroundBlurred: true,
 		}
 	},
 
@@ -240,6 +253,15 @@ export default {
 		},
 	},
 
+	created() {
+		const blurred = BrowserStorage.getItem('background-blurred')
+		if (blurred === null) {
+			BrowserStorage.setItem('background-blurred', 'true')
+		}
+
+		this.isBackgroundBlurred = blurred !== 'false'
+	},
+
 	mounted() {
 		subscribe('show-settings', this.handleShowSettings)
 		this.attachmentFolderLoading = false
@@ -299,6 +321,12 @@ export default {
 			this.privacyLoading = false
 		},
 
+		toggleBackgroundBlurred(value) {
+			this.isBackgroundBlurred = value
+			BrowserStorage.setItem('background-blurred', value)
+			emit('set-background-blurred', value)
+		},
+
 		async togglePlaySounds() {
 			this.playSoundsLoading = true
 			try {