From cc426e5e50eea2fe76f8674a9d194e33e294fd29 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 4 Mar 2024 13:59:18 +0100 Subject: [PATCH] fix(BrowserStorage): cleanup empty entries in BrowserStorage Signed-off-by: Maksim Sukharev --- .../shared/LocalAudioControlButton.vue | 8 ++-- .../shared/LocalVideoControlButton.vue | 8 ++-- .../MediaSettings/MediaSettings.vue | 10 ++-- src/components/TopBar/TopBarMediaControls.vue | 12 ++--- src/components/TopBar/TopBarMenu.vue | 4 +- src/init.js | 22 +++++++++ src/stores/settings.js | 2 +- src/utils/webrtc/index.js | 26 +++++----- src/utils/webrtc/models/LocalMediaModel.js | 48 +++++++++---------- 9 files changed, 81 insertions(+), 59 deletions(-) diff --git a/src/components/CallView/shared/LocalAudioControlButton.vue b/src/components/CallView/shared/LocalAudioControlButton.vue index 194c12ab106d..1012a5c83707 100644 --- a/src/components/CallView/shared/LocalAudioControlButton.vue +++ b/src/components/CallView/shared/LocalAudioControlButton.vue @@ -154,17 +154,17 @@ export default { } if (this.model.attributes.audioEnabled) { - this.model.disableAudio() + this.model.disableAudio(this.token) } else { - this.model.enableAudio() + this.model.enableAudio(this.token) } }, updateDeviceState() { if (BrowserStorage.getItem('audioDisabled_' + this.token) === 'true') { - this.model.disableAudio() + this.model.disableAudio(this.token) } else { - this.model.enableAudio() + this.model.enableAudio(this.token) } }, }, diff --git a/src/components/CallView/shared/LocalVideoControlButton.vue b/src/components/CallView/shared/LocalVideoControlButton.vue index d46c465f9fbe..0021386a058b 100644 --- a/src/components/CallView/shared/LocalVideoControlButton.vue +++ b/src/components/CallView/shared/LocalVideoControlButton.vue @@ -155,17 +155,17 @@ export default { } if (this.model.attributes.videoEnabled) { - this.model.disableVideo() + this.model.disableVideo(this.token) } else { - this.model.enableVideo() + this.model.enableVideo(this.token) } }, updateDeviceState() { if (BrowserStorage.getItem('videoDisabled_' + this.token)) { - this.model.disableVideo() + this.model.disableVideo(this.token) } else { - this.model.enableVideo() + this.model.enableVideo(this.token) } }, }, diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index 4464869e0068..b92ad31cfcb0 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/src/components/MediaSettings/MediaSettings.vue @@ -575,7 +575,7 @@ export default { */ clearBackground() { if (this.isInCall) { - localMediaModel.disableVirtualBackground() + localMediaModel.disableVirtualBackground(this.token) } else { BrowserStorage.removeItem('virtualBackgroundEnabled_' + this.token) } @@ -597,8 +597,8 @@ export default { */ blurBackground() { if (this.isInCall) { - localMediaModel.enableVirtualBackground() - localMediaModel.setVirtualBackgroundBlur(VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT) + localMediaModel.enableVirtualBackground(this.token) + localMediaModel.setVirtualBackgroundBlur(this.token, VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT) } else { BrowserStorage.setItem('virtualBackgroundEnabled_' + this.token, 'true') BrowserStorage.setItem('virtualBackgroundType_' + this.token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) @@ -626,8 +626,8 @@ export default { */ setBackgroundImage(background) { if (this.isInCall) { - localMediaModel.enableVirtualBackground() - localMediaModel.setVirtualBackgroundImage(background) + localMediaModel.enableVirtualBackground(this.token) + localMediaModel.setVirtualBackgroundImage(this.token, background) } else { BrowserStorage.setItem('virtualBackgroundEnabled_' + this.token, 'true') BrowserStorage.setItem('virtualBackgroundType_' + this.token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) diff --git a/src/components/TopBar/TopBarMediaControls.vue b/src/components/TopBar/TopBarMediaControls.vue index aa5b7fe73923..20004c8f9b74 100644 --- a/src/components/TopBar/TopBarMediaControls.vue +++ b/src/components/TopBar/TopBarMediaControls.vue @@ -449,9 +449,9 @@ export default { } else { this.spacebarKeyDown = false if (this.audioEnabledBeforeSpacebarKeydown) { - this.model.enableAudio() + this.model.enableAudio(this.token) } else { - this.model.disableAudio() + this.model.disableAudio(this.token) } this.audioEnabledBeforeSpacebarKeydown = undefined } @@ -464,9 +464,9 @@ export default { toggleVirtualBackground() { if (this.model.attributes.virtualBackgroundEnabled) { - this.model.disableVirtualBackground() + this.model.disableVirtualBackground(this.token) } else { - this.model.enableVirtualBackground() + this.model.enableVirtualBackground(this.token) } }, @@ -552,10 +552,10 @@ export default { this.model.stopSharingScreen() this.dismissQualityWarningTooltip() } else if (this.qualityWarningTooltip.action === 'disableVirtualBackground') { - this.model.disableVirtualBackground() + this.model.disableVirtualBackground(this.token) this.dismissQualityWarningTooltip() } else if (this.qualityWarningTooltip.action === 'disableVideo') { - this.model.disableVideo() + this.model.disableVideo(this.token) this.dismissQualityWarningTooltip() } }, diff --git a/src/components/TopBar/TopBarMenu.vue b/src/components/TopBar/TopBarMenu.vue index 3103bb58debe..18c166980600 100644 --- a/src/components/TopBar/TopBarMenu.vue +++ b/src/components/TopBar/TopBarMenu.vue @@ -439,9 +439,9 @@ export default { toggleVirtualBackground() { if (this.model.attributes.virtualBackgroundEnabled) { - this.model.disableVirtualBackground() + this.model.disableVirtualBackground(this.token) } else { - this.model.enableVirtualBackground() + this.model.enableVirtualBackground(this.token) } }, diff --git a/src/init.js b/src/init.js index 9c0a6d63a96a..dd5e16e30b63 100644 --- a/src/init.js +++ b/src/init.js @@ -136,4 +136,26 @@ const migrateDirectLocalStorageToNextcloudBrowserStorage = () => { BrowserStorage.setItem('localStorageMigrated', 'done') } +/** + * Clean unrelated to any conversation keys (if token was not defined, when creating entry). + */ +const cleanUnrelatedBrowserStorageKeys = () => { + const storageKeys = [ + 'audioDisabled_', + 'videoDisabled_', + 'showMediaSettings_', + 'virtualBackgroundEnabled_', + 'virtualBackgroundType_', + 'virtualBackgroundBlurStrength_', + 'virtualBackgroundUrl_', + ] + + storageKeys.forEach(key => { + if (BrowserStorage.getItem(key) !== null) { + BrowserStorage.removeItem(key) + } + }) +} + migrateDirectLocalStorageToNextcloudBrowserStorage() +cleanUnrelatedBrowserStorageKeys() diff --git a/src/stores/settings.js b/src/stores/settings.js index 9d9b74cc59c9..c24151f3f371 100644 --- a/src/stores/settings.js +++ b/src/stores/settings.js @@ -55,7 +55,7 @@ export const useSettingsStore = defineStore('settings', { getters: { getShowMediaSettings: (state) => (token) => { - if (state.showMediaSettings[token] !== undefined) { + if (!token || state.showMediaSettings[token] !== undefined) { return state.showMediaSettings[token] } diff --git a/src/utils/webrtc/index.js b/src/utils/webrtc/index.js index e68a0cf6a5e8..2a577c486361 100644 --- a/src/utils/webrtc/index.js +++ b/src/utils/webrtc/index.js @@ -245,26 +245,26 @@ async function signalingJoinCall(token, flags, silent, recordingConsent) { const virtualBackgroundUrl = BrowserStorage.getItem('virtualBackgroundUrl_' + token) if (enableAudio) { - localMediaModel.enableAudio() + localMediaModel.enableAudio(token) } else { - localMediaModel.disableAudio() + localMediaModel.disableAudio(token) } if (enableVideo) { - localMediaModel.enableVideo() + localMediaModel.enableVideo(token) } else { - localMediaModel.disableVideo() + localMediaModel.disableVideo(token) } if (enableVirtualBackground) { - localMediaModel.enableVirtualBackground() + localMediaModel.enableVirtualBackground(token) } else { - localMediaModel.disableVirtualBackground() + localMediaModel.disableVirtualBackground(token) } if (virtualBackgroundType === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) { - localMediaModel.setVirtualBackgroundImage(virtualBackgroundUrl) + localMediaModel.setVirtualBackgroundImage(token, virtualBackgroundUrl) } else if (virtualBackgroundType === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO) { - localMediaModel.setVirtualBackgroundVideo(virtualBackgroundUrl) - } else { - localMediaModel.setVirtualBackgroundBlur(virtualBackgroundBlurStrength) + localMediaModel.setVirtualBackgroundVideo(token, virtualBackgroundUrl) + } else if (virtualBackgroundType === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) { + localMediaModel.setVirtualBackgroundBlur(token, virtualBackgroundBlurStrength) } const startCallOnceLocalMediaStarted = (configuration) => { @@ -388,9 +388,9 @@ async function signalingJoinCallForRecording(token, settings, internalClientAuth const silent = true - localMediaModel.disableAudio() - localMediaModel.disableVideo() - localMediaModel.disableVirtualBackground() + localMediaModel.disableAudio(token) + localMediaModel.disableVideo(token) + localMediaModel.disableVirtualBackground(token) const startCallOnceLocalMediaStarted = (configuration) => { webRtc.off('localMediaStarted', startCallOnceLocalMediaStarted) diff --git a/src/utils/webrtc/models/LocalMediaModel.js b/src/utils/webrtc/models/LocalMediaModel.js index d8bb2eb224a0..5b737a3d003d 100644 --- a/src/utils/webrtc/models/LocalMediaModel.js +++ b/src/utils/webrtc/models/LocalMediaModel.js @@ -351,57 +351,57 @@ LocalMediaModel.prototype = { this.set('localScreen', null) }, - enableAudio() { + enableAudio(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.removeItem('audioDisabled_' + this.get('token')) + BrowserStorage.removeItem('audioDisabled_' + token ?? this.get('token')) this._webRtc.unmute() }, - disableAudio() { + disableAudio(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.setItem('audioDisabled_' + this.get('token'), 'true') + BrowserStorage.setItem('audioDisabled_' + token ?? this.get('token'), 'true') this._webRtc.mute() }, - enableVideo() { + enableVideo(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.removeItem('videoDisabled_' + this.get('token')) + BrowserStorage.removeItem('videoDisabled_' + token ?? this.get('token')) this._webRtc.resumeVideo() }, - disableVideo() { + disableVideo(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.setItem('videoDisabled_' + this.get('token'), 'true') + BrowserStorage.setItem('videoDisabled_' + token ?? this.get('token'), 'true') this._webRtc.pauseVideo() }, - enableVirtualBackground() { + enableVirtualBackground(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.setItem('virtualBackgroundEnabled_' + this.get('token'), 'true') + BrowserStorage.setItem('virtualBackgroundEnabled_' + token ?? this.get('token'), 'true') this._webRtc.enableVirtualBackground() }, - setVirtualBackgroundBlur(blurStrength) { + setVirtualBackgroundBlur(token, blurStrength) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } @@ -410,9 +410,9 @@ LocalMediaModel.prototype = { blurStrength = VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT } - BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) - BrowserStorage.setItem('virtualBackgroundBlurStrength_' + this.get('token'), blurStrength) - BrowserStorage.removeItem('virtualBackgroundUrl_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) + BrowserStorage.setItem('virtualBackgroundBlurStrength_' + token, blurStrength) + BrowserStorage.removeItem('virtualBackgroundUrl_' + token) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR, @@ -420,14 +420,14 @@ LocalMediaModel.prototype = { }) }, - setVirtualBackgroundImage(imageUrl) { + setVirtualBackgroundImage(token, imageUrl) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) - BrowserStorage.setItem('virtualBackgroundUrl_' + this.get('token'), imageUrl) - BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) + BrowserStorage.setItem('virtualBackgroundUrl_' + token, imageUrl) + BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + token) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE, @@ -435,14 +435,14 @@ LocalMediaModel.prototype = { }) }, - setVirtualBackgroundVideo(videoUrl) { + setVirtualBackgroundVideo(token, videoUrl) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO) - BrowserStorage.setItem('virtualBackgroundUrl_' + this.get('token'), videoUrl) - BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + token, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO) + BrowserStorage.setItem('virtualBackgroundUrl_' + token, videoUrl) + BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + token) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO, @@ -450,12 +450,12 @@ LocalMediaModel.prototype = { }) }, - disableVirtualBackground() { + disableVirtualBackground(token) { if (!this._webRtc) { throw new Error('WebRtc not initialized yet') } - BrowserStorage.removeItem('virtualBackgroundEnabled_' + this.get('token')) + BrowserStorage.removeItem('virtualBackgroundEnabled_' + token ?? this.get('token')) this._webRtc.disableVirtualBackground() },