Merge pull request #9608 from nextcloud/bugfix/9597/hide-background-o…

…ptions-on-safari fix(mediasettings): Hide virtual background options when not supported
nextcloud · May 24, 2023 · 63a588e · 63a588e
2 parents a67e6ba + 546f1ce
commit 63a588e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
@@ -97,7 +97,8 @@
 					</template>
 					{{ t('spreed', 'Devices') }}
 				</NcButton>
-				<NcButton :type="showBackgroundEditor ? 'secondary' : 'tertiary'"
+				<NcButton v-if="isVirtualBackgroundAvailable"
+					:type="showBackgroundEditor ? 'secondary' : 'tertiary'"
 					@click="toggleTab('backgrounds')">
 					<template #icon>
 						<Creation :size="20" />
@@ -120,7 +121,6 @@
 
 			<!-- Background selection -->
 			<VideoBackgroundEditor v-if="showBackgroundEditor"
-				:virtual-background="virtualBackground"
 				:token="token"
 				@update-background="handleUpdateBackground" />
 
@@ -333,6 +333,11 @@ export default {
 		showBackgroundEditor() {
 			return this.tabContent === 'backgrounds'
 		},
+
+		isVirtualBackgroundAvailable() {
+			return this.virtualBackground.isAvailable()
+		},
+
 	},
 
 	watch: {

diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue
@@ -32,7 +32,6 @@
 			}}
 		</button>
 		<button key="blur"
-			:disabled="!blurPreviewAvailable"
 			class="background-editor__element"
 			:class="{'background-editor__element--selected': selectedBackground === 'blur'}"
 			@click="handleSelectBackground('blur')">
@@ -116,11 +115,6 @@ export default {
 			type: String,
 			required: true,
 		},
-
-		virtualBackground: {
-			type: Object,
-			required: true,
-		},
 	},
 
 	emits: ['update-background'],
@@ -140,10 +134,6 @@ export default {
 	},
 
 	computed: {
-		blurPreviewAvailable() {
-			return this.virtualBackground.isAvailable()
-		},
-
 		isCustomBackground() {
 			return this.selectedBackground !== 'none'
 			    && this.selectedBackground !== 'blur'