Fix: reset and respect flag used for skipping the global config

Signed-off-by: DorraJaouad <[email protected]>

src/components/MediaSettings/MediaSettings.vue

@@ -93,6 +93,7 @@
 				<template #tab-panel:backgrounds>
 					<VideoBackgroundEditor class="media-settings__tab"
 						:token="token"
+						:skip-blur-virtual-background="skipBlurVirtualBackground"
 						@update-background="handleUpdateVirtualBackground" />
 				</template>
 			</MediaSettingsTabs>
@@ -321,7 +322,7 @@ export default {
 			isRecordingFromStart: false,
 			isPublicShareAuthSidebar: false,
 			isMirrored: false,
-			skipBlurVirtualBackgroundEnabled: false,
+			skipBlurVirtualBackground: false,
 		}
 	},
 
@@ -428,6 +429,10 @@ export default {
 			return this.updatedBackground || this.audioDeviceStateChanged
 				|| this.videoDeviceStateChanged
 		},
+
+		connectionFailed() {
+			return this.$store.getters.connectionFailed(this.token)
+		},
 	},
 
 	watch: {
@@ -444,7 +449,7 @@ export default {
 					} else if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) {
 						this.setVirtualBackgroundImage(BrowserStorage.getItem('virtualBackgroundUrl_' + this.token))
 					}
-				} else if (this.blurVirtualBackgroundEnabled) {
+				} else if (this.blurVirtualBackgroundEnabled && !this.skipBlurVirtualBackground) {
 					// Fall back to global blur background setting
 					this.blurVirtualBackground()
 				} else {
@@ -477,9 +482,18 @@ export default {
 			if (value) {
 				const virtualBackgroundEnabled = BrowserStorage.getItem('virtualBackgroundEnabled_' + this.token) === 'true'
 				// Apply global blur background setting
-				if (this.blurVirtualBackgroundEnabled && !this.skipBlurVirtualBackgroundEnabled && !virtualBackgroundEnabled) {
+				if (this.blurVirtualBackgroundEnabled && !this.skipBlurVirtualBackground && !virtualBackgroundEnabled) {
 					this.blurBackground(true)
 				}
+			} else {
+				// Reset the flag for the next call
+				this.skipBlurVirtualBackground = false
+			}
+		},
+
+		connectionFailed(value) {
+			if (value) {
+				this.skipBlurVirtualBackground = false
 			}
 		},
 	},
@@ -574,7 +588,7 @@ export default {
 		handleUpdateBackground(background) {
 			// Default global blur background setting was changed by user
 			if (this.blurVirtualBackgroundEnabled && background !== 'blur') {
-				this.skipBlurVirtualBackgroundEnabled = true
+				this.skipBlurVirtualBackground = true
 			}
 			// Apply the new background
 			if (background === 'none') {
@@ -636,7 +650,7 @@ export default {
 				localMediaModel.enableVirtualBackground()
 				localMediaModel.setVirtualBackgroundBlur(VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT, globalBlurVirtualBackground)
 			} else if (!globalBlurVirtualBackground) {
-				this.skipBlurVirtualBackgroundEnabled = true
+				this.skipBlurVirtualBackground = true
 				BrowserStorage.setItem('virtualBackgroundEnabled_' + this.token, 'true')
 				BrowserStorage.setItem('virtualBackgroundType_' + this.token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR)
 				BrowserStorage.setItem('virtualBackgroundBlurStrength_' + this.token, VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT)

src/components/MediaSettings/VideoBackgroundEditor.vue

@@ -118,6 +118,11 @@ export default {
 			type: String,
 			required: true,
 		},
+
+		skipBlurVirtualBackground: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	emits: ['update-background'],
@@ -265,7 +270,7 @@ export default {
 				} else {
 					this.selectedBackground = 'none'
 				}
-			} else if (this.settingsStore.blurVirtualBackgroundEnabled) {
+			} else if (this.settingsStore.blurVirtualBackgroundEnabled && !this.skipBlurVirtualBackground) {
 				this.selectedBackground = 'blur'
 			} else {
 				this.selectedBackground = 'none'