fix: move version comparison to utils

- post-review refactoring

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/CallView/CallView.vue

@@ -4,7 +4,7 @@
 -->
 
 <template>
-	<div id="call-container" :style="callContainerStyle">
+	<div id="call-container" :class="callContainerClass">
 		<ViewerOverlayCallView v-if="isViewerOverlay"
 			:token="token"
 			:model="promotedParticipantModel"
@@ -158,11 +158,12 @@ import { getTalkConfig } from '../../services/CapabilitiesManager.ts'
 import { EventBus } from '../../services/EventBus.js'
 import { useCallViewStore } from '../../stores/callView.js'
 import { useSettingsStore } from '../../stores/settings.js'
+import { satisfyVersion } from '../../utils/satisfyVersion.ts'
 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 serverVersion = loadState('core', 'config', {}).version ?? '29.0.0.0'
+const serverSupportsBackgroundBlurred = satisfyVersion(serverVersion, '29.0.4.0')
 
 export default {
 	name: 'CallView',
@@ -209,9 +210,8 @@ export default {
 			localMediaModel.disableVideo()
 		}
 
-		const isBackgroundBlurred = ref(serverSupportsBackgroundBlurred
-			? null
-			: BrowserStorage.getItem('background-blurred') !== 'false')
+		// Fallback ref for versions before v29.0.4
+		const isBackgroundBlurred = ref(BrowserStorage.getItem('background-blurred') !== 'false')
 
 		return {
 			localMediaModel,
@@ -393,14 +393,12 @@ export default {
 		/**
 		 * Fallback style for versions before v29.0.4
 		 */
-		callContainerStyle() {
+		callContainerClass() {
 			if (serverSupportsBackgroundBlurred) {
 				return
 			}
 
-			return {
-				'backdrop-filter': this.isBackgroundBlurred ? 'blur(25px)' : 'none',
-			}
+			return this.isBackgroundBlurred ? 'call-container__blurred' : 'call-container__non-blurred'
 		}
 	},
 
@@ -812,6 +810,13 @@ export default {
 	// Default value has changed since v29.0.4: 'blur(25px)' => 'none'
 	backdrop-filter: var(--filter-background-blur);
 	--grid-gap: calc(var(--default-grid-baseline) * 2);
+
+	&.call-container__blurred {
+		backdrop-filter: blur(25px);
+	}
+	&.call-container__non-blurred {
+		backdrop-filter: none;
+	}
 }
 
 #videos {

src/components/SettingsDialog/SettingsDialog.vue

@@ -219,9 +219,10 @@ import { useCustomSettings } from '../../services/SettingsAPI.ts'
 import { setUserConfig } from '../../services/settingsService.js'
 import { useSettingsStore } from '../../stores/settings.js'
 import { useSoundsStore } from '../../stores/sounds.js'
+import { satisfyVersion } from '../../utils/satisfyVersion.ts'
 
-const serverVersion = loadState('core', 'config', {}).versionstring ?? '29.0.0'
-const serverSupportsBackgroundBlurred = '29.0.4'.localeCompare(serverVersion) < 1
+const serverVersion = loadState('core', 'config', {}).version ?? '29.0.0.0'
+const serverSupportsBackgroundBlurred = satisfyVersion(serverVersion, '29.0.4.0')
 
 const isBackgroundBlurredState = serverSupportsBackgroundBlurred
 	? loadState('spreed', 'force_enable_blur_filter', '') // 'yes', 'no', ''
@@ -326,11 +327,9 @@ export default {
 				await setUserConfig('theming', 'force_enable_blur_filter', 'no')
 			}
 			BrowserStorage.removeItem('background-blurred')
-		} else {
+		} else if (blurred === null) {
 			// Fallback to BrowserStorage
-			if (blurred === null) {
-				BrowserStorage.setItem('background-blurred', 'true')
-			}
+			BrowserStorage.setItem('background-blurred', 'true')
 		}
 	},
 
@@ -387,12 +386,13 @@ export default {
 			this.privacyLoading = false
 		},
 
+		/**
+		 * Fallback method for versions before v29.0.4
+		 * @param {boolean} value whether background should be blurred
+		 */
 		toggleBackgroundBlurred(value) {
-			if (serverSupportsBackgroundBlurred) {
-				return
-			}
-			this.isBackgroundBlurred = value ? 'true' : 'false'
-			BrowserStorage.setItem('background-blurred', value)
+			this.isBackgroundBlurred = value.toString()
+			BrowserStorage.setItem('background-blurred', this.isBackgroundBlurred)
 			emit('set-background-blurred', value)
 		},
 

src/utils/__tests__/satisfyVersion.spec.js

@@ -0,0 +1,39 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { satisfyVersion } from '../satisfyVersion.ts'
+
+describe('satisfyVersion', () => {
+	const testCases = [
+		// Before required
+		['29.1.4.3', '28.2.5.4', true],
+		['29.1.4.3', '29.0.15.3', true],
+		['29.1.4.3', '29.1.1.3', true],
+		['29.1.4.3', '29.1.4.0', true],
+		['29.1.4.3', '29.1.4', true],
+		['29.1.4.3', '29.1', true],
+		['29.1.4.3', '29', true],
+		['29.1.4', '29.1.3.9', true],
+		['29.1', '29.0.9.1', true],
+		['29', '28.1.5.6', true],
+		// Exact match
+		['29.1.4.3', '29.1.4.3', true],
+		['29', '29.0.0.0', true],
+		// After required
+		['29.1.4.3', '29.1.4.4', false],
+		['29.1.4.3', '29.1.5.0', false],
+		['29.1.4.3', '29.2.0.0', false],
+		['29.1.4.3', '30.0.0.0', false],
+		['29.1.4.3', '29.1.5', false],
+		['29.1.4.3', '29.2', false],
+		['29.1.4.3', '30', false],
+		['29.1.4', '29.1.4.3', false],
+		['29.1', '29.1.4.3', false],
+		['29', '29.1.4.3', false],
+	]
+
+	it.each(testCases)('check if %s should satisfy requirement %s returns %s', (a, b, c) => {
+		expect(satisfyVersion(a, b)).toBe(c)
+	})
+})

src/utils/satisfyVersion.ts

@@ -0,0 +1,26 @@
+/**
+ * SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+/**
+ * Checks if given version satisfy requirements (newer than)
+ * Versions are expected to have format like '29.1.4.3'
+ * @param version given version
+ * @param requirement version to compare against
+ */
+function satisfyVersion(version: string, requirement: string): boolean {
+	const versionMap = version.split('.').map(Number)
+	const requirementMap = requirement.split('.').map(Number)
+
+	for (let i = 0; i < Math.max(versionMap.length, requirementMap.length); i++) {
+		if ((versionMap[i] ?? 0) !== (requirementMap[i] ?? 0)) {
+			return (versionMap[i] ?? 0) > (requirementMap[i] ?? 0)
+		}
+	}
+	return true
+}
+
+export {
+	satisfyVersion,
+}