fix(settings): drop local setting for background blur filter, use provided by server

lib/TInitialState.php

@@ -118,6 +118,9 @@ protected function publishInitialStateForUser(IUser $user, IRootFolder $rootFold
 			$this->serverConfig->getUserValue($user->getUID(), 'spreed', 'play_sounds', 'yes') === 'yes'
 		);
 
+		$this->initialState->provideInitialState(
+			'force_enable_blur_filter',
+			$this->serverConfig->getUserValue($user->getUID(), 'theming', 'force_enable_blur_filter', ''));
 
 		$this->initialState->provideInitialState(
 			'user_group_ids',

src/components/CallView/CallView.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div id="call-container" :class="{ 'blurred': isBackgroundBlurred }">
+	<div id="call-container">
 		<ViewerOverlayCallView v-if="isViewerOverlay"
 			:token="token"
 			:model="promotedParticipantModel"
@@ -134,7 +134,6 @@ 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 { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.js'
@@ -191,7 +190,6 @@ export default {
 			localSharedData: {
 				screenVisible: true,
 			},
-			isBackgroundBlurred: true,
 			showPresenterOverlay: true,
 			debounceFetchPeers: () => {},
 		}
@@ -417,7 +415,6 @@ export default {
 		// Ensure that data is properly initialized before mounting the
 		// subviews.
 		this.updateDataFromCallParticipantModels(this.callParticipantModels)
-		this.isBackgroundBlurred = BrowserStorage.getItem('background-blurred') !== 'false'
 	},
 
 	mounted() {
@@ -427,7 +424,6 @@ export default {
 		callParticipantCollection.on('remove', this._lowerHandWhenParticipantLeaves)
 
 		subscribe('switch-screen-to-id', this._switchScreenToId)
-		subscribe('set-background-blurred', this.setBackgroundBlurred)
 	},
 
 	beforeDestroy() {
@@ -438,7 +434,6 @@ export default {
 		callParticipantCollection.off('remove', this._lowerHandWhenParticipantLeaves)
 
 		unsubscribe('switch-screen-to-id', this._switchScreenToId)
-		unsubscribe('set-background-blurred', this.setBackgroundBlurred)
 	},
 
 	methods: {
@@ -702,10 +697,6 @@ export default {
 			}
 		},
 
-		setBackgroundBlurred(value) {
-			this.isBackgroundBlurred = value
-		},
-
 		isModelWithVideo(callParticipantModel) {
 			return callParticipantModel.attributes.videoAvailable
 				&& this.sharedDatas[callParticipantModel.attributes.peerId].remoteVideoBlocker.isVideoEnabled()
@@ -738,10 +729,7 @@ export default {
 	width: 100%;
 	height: 100%;
 	background-color: $color-call-background;
-
-	&.blurred {
-		backdrop-filter: blur(25px);
-	}
+	backdrop-filter: var(--filter-background-blur);
 }
 
 #videos {

src/components/SettingsDialog/SettingsDialog.vue

@@ -86,12 +86,19 @@
 			:name="t('spreed', 'Performance')"
 			class="app-settings-section">
 			<NcCheckboxRadioSwitch id="blur-call-background"
-				:checked="isBackgroundBlurred"
-				type="switch"
+				:checked="isBackgroundBlurred === 'yes'"
+				:indeterminate="isBackgroundBlurred === ''"
+				type="checkbox"
 				class="checkbox"
-				@update:checked="toggleBackgroundBlurred">
+				disabled>
 				{{ t('spreed', 'Blur background image in the call (may increase GPU load)') }}
 			</NcCheckboxRadioSwitch>
+			<a :href="themingUrl"
+				target="_blank"
+				rel="noreferrer nofollow"
+				class="external">
+				{{ t('spreed', 'Background blur for Nextcloud instance can be adjusted in the theming settings.') }} ↗
+			</a>
 		</NcAppSettingsSection>
 		<NcAppSettingsSection v-if="!disableKeyboardShortcuts"
 			id="shortcuts"
@@ -163,11 +170,13 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
-import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
-import { generateUrl } from '@nextcloud/router'
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
@@ -181,6 +190,7 @@ import BrowserStorage from '../../services/BrowserStorage.js'
 import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { useSettingsStore } from '../../stores/settings.js'
 
+const isBackgroundBlurred = loadState('spreed', 'force_enable_blur_filter', '')
 const supportTypingStatus = getTalkConfig('local', 'chat', 'typing-privacy') !== undefined
 
 export default {
@@ -201,6 +211,7 @@ export default {
 		return {
 			settingsStore,
 			supportTypingStatus,
+			isBackgroundBlurred,
 		}
 	},
 
@@ -211,7 +222,6 @@ export default {
 			attachmentFolderLoading: true,
 			privacyLoading: false,
 			playSoundsLoading: false,
-			isBackgroundBlurred: true,
 		}
 	},
 
@@ -248,6 +258,10 @@ export default {
 			return generateUrl('/settings/user/notifications')
 		},
 
+		themingUrl() {
+			return generateUrl('/settings/user/theming')
+		},
+
 		disableKeyboardShortcuts() {
 			return OCP.Accessibility.disableKeyboardShortcuts()
 		},
@@ -263,11 +277,12 @@ export default {
 
 	created() {
 		const blurred = BrowserStorage.getItem('background-blurred')
-		if (blurred === null) {
-			BrowserStorage.setItem('background-blurred', 'true')
+		if (blurred === 'false' && isBackgroundBlurred === '') {
+			console.debug('Blur was disabled intentionally, propagating last choice to server')
+			axios.post(generateOcsUrl('apps/provisioning_api/api/v1/config/users/theming/force_enable_blur_filter'),
+				{ configValue: 'no' })
 		}
-
-		this.isBackgroundBlurred = blurred !== 'false'
+		BrowserStorage.removeItem('background-blurred')
 	},
 
 	mounted() {
@@ -323,12 +338,6 @@ 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 {