Merge pull request #13100 from nextcloud/backport/12633/stable29

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

lib/TInitialState.php

@@ -133,6 +133,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

@@ -21,7 +21,7 @@
 -->
 
 <template>
-	<div id="call-container" :class="{ 'blurred': isBackgroundBlurred }">
+	<div id="call-container" :style="callContainerStyle">
 		<ViewerOverlayCallView v-if="isViewerOverlay"
 			:token="token"
 			:model="promotedParticipantModel"
@@ -136,10 +136,12 @@
 
 <script>
 import debounce from 'debounce'
+import { ref } from 'vue'
 
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 
 import Grid from './Grid/Grid.vue'
 import EmptyCallView from './shared/EmptyCallView.vue'
@@ -157,6 +159,9 @@ import { EventBus } from '../../services/EventBus.js'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index.js'
 import RemoteVideoBlocker from '../../utils/webrtc/RemoteVideoBlocker.js'
 
+const serverVersion = loadState('core', 'config', {}).versionstring ?? '29.0.0'
+const serverSupportsBackgroundBlurred = '29.0.4'.localeCompare(serverVersion) < 1
+
 const supportedReactions = getCapabilities()?.spreed?.config?.call?.['supported-reactions']
 
 export default {
@@ -191,11 +196,16 @@ export default {
 	},
 
 	setup() {
+		const isBackgroundBlurred = ref(serverSupportsBackgroundBlurred
+			? null
+			: BrowserStorage.getItem('background-blurred') !== 'false')
+
 		return {
 			supportedReactions,
 			localMediaModel,
 			localCallParticipantModel,
 			callParticipantCollection,
+			isBackgroundBlurred,
 		}
 	},
 
@@ -210,7 +220,6 @@ export default {
 			localSharedData: {
 				screenVisible: true,
 			},
-			isBackgroundBlurred: true,
 			showPresenterOverlay: true,
 			debounceFetchPeers: () => {},
 		}
@@ -346,6 +355,19 @@ export default {
 		presenterVideoBlockerEnabled() {
 			return this.sharedDatas[this.shownRemoteScreenPeerId]?.remoteVideoBlocker?.isVideoEnabled()
 		},
+
+		/**
+		 * Fallback style for versions before v29.0.4
+		 */
+		callContainerStyle() {
+			if (serverSupportsBackgroundBlurred) {
+				return
+			}
+
+			return {
+				'backdrop-filter': this.isBackgroundBlurred ? 'blur(25px)' : 'none',
+			}
+		}
 	},
 
 	watch: {
@@ -435,7 +457,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() {
@@ -719,6 +740,10 @@ export default {
 			}
 		},
 
+		/**
+		 * Fallback method for versions before v29.0.4
+		 * @param {boolean} value whether background should be blurred
+		 */
 		setBackgroundBlurred(value) {
 			this.isBackgroundBlurred = value
 		},
@@ -755,10 +780,8 @@ export default {
 	width: 100%;
 	height: 100%;
 	background-color: $color-call-background;
-
-	&.blurred {
-		backdrop-filter: blur(25px);
-	}
+	// Default value has changed since v29.0.4: 'blur(25px)' => 'none'
+	backdrop-filter: var(--filter-background-blur);
 }
 
 #videos {

src/components/SettingsDialog/SettingsDialog.vue

@@ -101,8 +101,25 @@
 		<NcAppSettingsSection id="performance"
 			:name="t('spreed', 'Performance')"
 			class="app-settings-section">
-			<NcCheckboxRadioSwitch id="blur-call-background"
-				:checked="isBackgroundBlurred"
+			<template v-if="serverSupportsBackgroundBlurred">
+				<NcCheckboxRadioSwitch id="blur-call-background"
+					:checked="isBackgroundBlurred === 'yes'"
+					:indeterminate="isBackgroundBlurred === ''"
+					type="checkbox"
+					class="checkbox"
+					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>
+			</template>
+			<NcCheckboxRadioSwitch v-else
+				id="blur-call-background"
+				:checked="isBackgroundBlurred !== 'false'"
 				type="switch"
 				class="checkbox"
 				@update:checked="toggleBackgroundBlurred">
@@ -179,11 +196,16 @@
 </template>
 
 <script>
+import { ref } from 'vue'
+
+import axios from '@nextcloud/axios'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { FilePickerVue } from '@nextcloud/dialogs/filepicker.js'
 import { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { generateUrl } from '@nextcloud/router'
+import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { generateOcsUrl, generateUrl } from '@nextcloud/router'
 
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
@@ -196,6 +218,12 @@ import { PRIVACY } from '../../constants.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { useSettingsStore } from '../../stores/settings.js'
 
+const serverVersion = loadState('core', 'config', {}).versionstring ?? '29.0.0'
+const serverSupportsBackgroundBlurred = '29.0.4'.localeCompare(serverVersion) < 1
+
+const isBackgroundBlurredState = serverSupportsBackgroundBlurred
+	? loadState('spreed', 'force_enable_blur_filter', '') // 'yes', 'no', ''
+	: BrowserStorage.getItem('background-blurred') // 'true', 'false', null
 const supportTypingStatus = getCapabilities()?.spreed?.config?.chat?.['typing-privacy'] !== undefined
 
 export default {
@@ -212,10 +240,13 @@ export default {
 
 	setup() {
 		const settingsStore = useSettingsStore()
+		const isBackgroundBlurred = ref(isBackgroundBlurredState)
 
 		return {
 			settingsStore,
 			supportTypingStatus,
+			isBackgroundBlurred,
+			serverSupportsBackgroundBlurred,
 		}
 	},
 
@@ -226,7 +257,6 @@ export default {
 			attachmentFolderLoading: true,
 			privacyLoading: false,
 			playSoundsLoading: false,
-			isBackgroundBlurred: true,
 		}
 	},
 
@@ -263,6 +293,10 @@ export default {
 			return generateUrl('/settings/user/notifications')
 		},
 
+		themingUrl() {
+			return generateUrl('/settings/user/theming')
+		},
+
 		disableKeyboardShortcuts() {
 			return OCP.Accessibility.disableKeyboardShortcuts()
 		},
@@ -278,11 +312,20 @@ export default {
 
 	created() {
 		const blurred = BrowserStorage.getItem('background-blurred')
-		if (blurred === null) {
-			BrowserStorage.setItem('background-blurred', 'true')
+		if (serverSupportsBackgroundBlurred) {
+			// Blur is handled by theming app, migrating
+			if (blurred === 'false' && isBackgroundBlurredState === '') {
+				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' })
+			}
+			BrowserStorage.removeItem('background-blurred')
+		} else {
+			// Fallback to BrowserStorage
+			if (blurred === null) {
+				BrowserStorage.setItem('background-blurred', 'true')
+			}
 		}
-
-		this.isBackgroundBlurred = blurred !== 'false'
 	},
 
 	mounted() {
@@ -338,7 +381,10 @@ export default {
 		},
 
 		toggleBackgroundBlurred(value) {
-			this.isBackgroundBlurred = value
+			if (serverSupportsBackgroundBlurred) {
+				return
+			}
+			this.isBackgroundBlurred = value ? 'true' : 'false'
 			BrowserStorage.setItem('background-blurred', value)
 			emit('set-background-blurred', value)
 		},