diff --git a/src/App.vue b/src/App.vue index 2837df99564..ec424e0a6d4 100644 --- a/src/App.vue +++ b/src/App.vue @@ -275,12 +275,12 @@ export default { if (this.isInCall) { this.$store.dispatch('setForceCallView', true) - const enableAudio = !localStorage.getItem('audioDisabled_' + this.token) - const enableVideo = !localStorage.getItem('videoDisabled_' + this.token) - const enableVirtualBackground = !!localStorage.getItem('virtualBackgroundEnabled_' + this.token) - const virtualBackgroundType = localStorage.getItem('virtualBackgroundType_' + this.token) - const virtualBackgroundBlurStrength = localStorage.getItem('virtualBackgroundBlurStrength_' + this.token) - const virtualBackgroundUrl = localStorage.getItem('virtualBackgroundUrl_' + this.token) + const enableAudio = !BrowserStorage.getItem('audioDisabled_' + this.token) + const enableVideo = !BrowserStorage.getItem('videoDisabled_' + this.token) + const enableVirtualBackground = !!BrowserStorage.getItem('virtualBackgroundEnabled_' + this.token) + const virtualBackgroundType = BrowserStorage.getItem('virtualBackgroundType_' + this.token) + const virtualBackgroundBlurStrength = BrowserStorage.getItem('virtualBackgroundBlurStrength_' + this.token) + const virtualBackgroundUrl = BrowserStorage.getItem('virtualBackgroundUrl_' + this.token) EventBus.$once('joined-conversation', async ({ token }) => { if (params.token !== token) { @@ -288,34 +288,34 @@ export default { } if (enableAudio) { - localStorage.removeItem('audioDisabled_' + token) + BrowserStorage.removeItem('audioDisabled_' + token) } else { - localStorage.setItem('audioDisabled_' + token, 'true') + BrowserStorage.setItem('audioDisabled_' + token, 'true') } if (enableVideo) { - localStorage.removeItem('videoDisabled_' + token) + BrowserStorage.removeItem('videoDisabled_' + token) } else { - localStorage.setItem('videoDisabled_' + token, 'true') + BrowserStorage.setItem('videoDisabled_' + token, 'true') } if (enableVirtualBackground) { - localStorage.setItem('virtualBackgroundEnabled_' + token, 'true') + BrowserStorage.setItem('virtualBackgroundEnabled_' + token, 'true') } else { - localStorage.removeItem('virtualBackgroundEnabled_' + token) + BrowserStorage.removeItem('virtualBackgroundEnabled_' + token) } if (virtualBackgroundType) { - localStorage.setItem('virtualBackgroundType_' + token, virtualBackgroundType) + BrowserStorage.setItem('virtualBackgroundType_' + token, virtualBackgroundType) } else { - localStorage.removeItem('virtualBackgroundType_' + token) + BrowserStorage.removeItem('virtualBackgroundType_' + token) } if (virtualBackgroundBlurStrength) { - localStorage.setItem('virtualBackgroundBlurStrength' + token, virtualBackgroundBlurStrength) + BrowserStorage.setItem('virtualBackgroundBlurStrength' + token, virtualBackgroundBlurStrength) } else { - localStorage.removeItem('virtualBackgroundBlurStrength' + token) + BrowserStorage.removeItem('virtualBackgroundBlurStrength' + token) } if (virtualBackgroundUrl) { - localStorage.setItem('virtualBackgroundUrl_' + token, virtualBackgroundUrl) + BrowserStorage.setItem('virtualBackgroundUrl_' + token, virtualBackgroundUrl) } else { - localStorage.removeItem('virtualBackgroundUrl_' + token) + BrowserStorage.removeItem('virtualBackgroundUrl_' + token) } const conversation = this.$store.getters.conversation(token) diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue index ccea0c968fc..fcc8c2d834f 100644 --- a/src/components/MediaSettings/MediaSettings.vue +++ b/src/components/MediaSettings/MediaSettings.vue @@ -475,7 +475,7 @@ export default { /** * Sets an image as background in virtualBackground: the background used in the MediaSettings preview * - * @param background + * @param {string} background the image's url */ setVirtualBackgroundImage(background) { this.virtualBackground.setEnabled(true) @@ -488,7 +488,7 @@ export default { /** * Sets an image as background of the participants in current or future call * - * @param background the image's url + * @param {string} background the image's url */ setBackgroundImage(background) { if (this.isInCall) { diff --git a/src/components/MediaSettings/VideoBackgroundEditor.vue b/src/components/MediaSettings/VideoBackgroundEditor.vue index b165ebbec1a..221036033c1 100644 --- a/src/components/MediaSettings/VideoBackgroundEditor.vue +++ b/src/components/MediaSettings/VideoBackgroundEditor.vue @@ -260,8 +260,8 @@ export default { } else if (BrowserStorage.getItem('virtualBackgroundType_' + this.token) === VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) { this.selectedBackground = BrowserStorage.getItem('virtualBackgroundUrl_' + this.token) } else { - this.selectedBackground = 'none' - } + this.selectedBackground = 'none' + } } else { this.selectedBackground = 'none' } diff --git a/src/init.js b/src/init.js index 8bbb3cfa773..b59a390ae5e 100644 --- a/src/init.js +++ b/src/init.js @@ -25,7 +25,8 @@ import { showError } from '@nextcloud/dialogs' -import { CALL, PARTICIPANT } from './constants.js' +import { CALL, PARTICIPANT, VIRTUAL_BACKGROUND } from './constants.js' +import BrowserStorage from './services/BrowserStorage.js' import { EventBus } from './services/EventBus.js' import store from './store/index.js' @@ -84,3 +85,50 @@ EventBus.$on('signaling-recording-status-changed', (token, status) => { showError(t('spreed', 'The recording failed. Please contact your administrator.')) } }) + +/** + * Migrate localStorage to @nextcloud/browser-storage + * + * In order to preserve the user settings while migrating to the abstraction, + * we loop over the localStorage entries and add the matching ones to the + * BrowserStorage + */ +const migrateDirectLocalStorageToNextcloudBrowserStorage = () => { + if (BrowserStorage.getItem('localStorageMigrated') !== null) { + return + } + + const storageKeys = Array.from(Array(localStorage.length), (_, i) => localStorage.key(i)).filter(key => key.startsWith('audioDisabled_') + || key.startsWith('videoDisabled_') + || key.startsWith('virtualBackgroundEnabled_') + || key.startsWith('virtualBackgroundType_') + || key.startsWith('virtualBackgroundBlurStrength_') + || key.startsWith('virtualBackgroundUrl_') + ) + + if (storageKeys.length) { + console.debug('Migrating localStorage keys to BrowserStorage', storageKeys) + + storageKeys.forEach(key => { + BrowserStorage.setItem(key, localStorage.getItem(key)) + localStorage.removeItem(key) + + if (key.startsWith('virtualBackgroundEnabled_')) { + // Before Talk 17 there was only a boolean + // `virtualBackgroundEnabled_{token}` (stored as string). + // Now we also need to have a type and the default type + // is "none". So when migrating the data for + // conversations the user had previously enabled the + // background blur we also add the type with value blur. + const typeKey = key.replace('virtualBackgroundEnabled_', 'virtualBackgroundType_') + if (localStorage.getItem(typeKey) === null) { + BrowserStorage.setItem(typeKey, VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) + } + } + }) + } + + BrowserStorage.setItem('localStorageMigrated', 'done') +} + +migrateDirectLocalStorageToNextcloudBrowserStorage() diff --git a/src/utils/webrtc/index.js b/src/utils/webrtc/index.js index 24cb387a974..31b48be1c9f 100644 --- a/src/utils/webrtc/index.js +++ b/src/utils/webrtc/index.js @@ -23,6 +23,7 @@ import Axios from '@nextcloud/axios' import { getCapabilities } from '@nextcloud/capabilities' import { PARTICIPANT, PRIVACY, VIRTUAL_BACKGROUND } from '../../constants.js' +import BrowserStorage from '../../services/BrowserStorage.js' import { fetchSignalingSettings } from '../../services/signalingService.js' import store from '../../store/index.js' import CancelableRequest from '../cancelableRequest.js' @@ -227,12 +228,12 @@ async function signalingJoinCall(token, flags, silent) { // The previous state might be wiped after the media is started, so // it should be saved now. - const enableAudio = !localStorage.getItem('audioDisabled_' + token) - const enableVideo = !localStorage.getItem('videoDisabled_' + token) - const enableVirtualBackground = !!localStorage.getItem('virtualBackgroundEnabled_' + token) - const virtualBackgroundType = localStorage.getItem('virtualBackgroundType_' + token) - const virtualBackgroundBlurStrength = localStorage.getItem('virtualBackgroundBlurStrength_' + token) - const virtualBackgroundUrl = localStorage.getItem('virtualBackgroundUrl_' + token) + const enableAudio = !BrowserStorage.getItem('audioDisabled_' + token) + const enableVideo = !BrowserStorage.getItem('videoDisabled_' + token) + const enableVirtualBackground = !!BrowserStorage.getItem('virtualBackgroundEnabled_' + token) + const virtualBackgroundType = BrowserStorage.getItem('virtualBackgroundType_' + token) + const virtualBackgroundBlurStrength = BrowserStorage.getItem('virtualBackgroundBlurStrength_' + token) + const virtualBackgroundUrl = BrowserStorage.getItem('virtualBackgroundUrl_' + token) if (enableAudio) { localMediaModel.enableAudio() diff --git a/src/utils/webrtc/models/LocalMediaModel.js b/src/utils/webrtc/models/LocalMediaModel.js index 25de14608e4..f7b6b149cf8 100644 --- a/src/utils/webrtc/models/LocalMediaModel.js +++ b/src/utils/webrtc/models/LocalMediaModel.js @@ -20,6 +20,7 @@ */ import { VIRTUAL_BACKGROUND } from '../../../constants.js' +import BrowserStorage from '../../../services/BrowserStorage.js' import store from '../../../store/index.js' import EmitterMixin from '../../EmitterMixin.js' @@ -353,7 +354,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.removeItem('audioDisabled_' + this.get('token')) + BrowserStorage.removeItem('audioDisabled_' + this.get('token')) this._webRtc.unmute() }, @@ -363,7 +364,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.setItem('audioDisabled_' + this.get('token'), 'true') + BrowserStorage.setItem('audioDisabled_' + this.get('token'), 'true') this._webRtc.mute() }, @@ -373,7 +374,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.removeItem('videoDisabled_' + this.get('token')) + BrowserStorage.removeItem('videoDisabled_' + this.get('token')) this._webRtc.resumeVideo() }, @@ -383,7 +384,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.setItem('videoDisabled_' + this.get('token'), 'true') + BrowserStorage.setItem('videoDisabled_' + this.get('token'), 'true') this._webRtc.pauseVideo() }, @@ -393,7 +394,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.setItem('virtualBackgroundEnabled_' + this.get('token'), 'true') + BrowserStorage.setItem('virtualBackgroundEnabled_' + this.get('token'), 'true') this._webRtc.enableVirtualBackground() }, @@ -407,9 +408,9 @@ LocalMediaModel.prototype = { blurStrength = VIRTUAL_BACKGROUND.BLUR_STRENGTH.DEFAULT } - localStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) - localStorage.setItem('virtualBackgroundBlurStrength_' + this.get('token'), blurStrength) - localStorage.removeItem('virtualBackgroundUrl_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR) + BrowserStorage.setItem('virtualBackgroundBlurStrength_' + this.get('token'), blurStrength) + BrowserStorage.removeItem('virtualBackgroundUrl_' + this.get('token')) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.BLUR, @@ -422,9 +423,9 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) - localStorage.setItem('virtualBackgroundUrl_' + this.get('token'), imageUrl) - localStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE) + BrowserStorage.setItem('virtualBackgroundUrl_' + this.get('token'), imageUrl) + BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.IMAGE, @@ -437,9 +438,9 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO) - localStorage.setItem('virtualBackgroundUrl_' + this.get('token'), videoUrl) - localStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) + BrowserStorage.setItem('virtualBackgroundType_' + this.get('token'), VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO) + BrowserStorage.setItem('virtualBackgroundUrl_' + this.get('token'), videoUrl) + BrowserStorage.removeItem('virtualBackgroundBlurStrength_' + this.get('token')) this._webRtc.setVirtualBackground({ backgroundType: VIRTUAL_BACKGROUND.BACKGROUND_TYPE.VIDEO, @@ -452,7 +453,7 @@ LocalMediaModel.prototype = { throw new Error('WebRtc not initialized yet') } - localStorage.removeItem('virtualBackgroundEnabled_' + this.get('token')) + BrowserStorage.removeItem('virtualBackgroundEnabled_' + this.get('token')) this._webRtc.disableVirtualBackground() },