feat(JitsiLocalStorage): Implement localStorage wrapper

connection.js

@@ -1,5 +1,6 @@
 /* global APP, JitsiMeetJS, config */
 import AuthHandler from './modules/UI/authentication/AuthHandler';
+import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
 
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -107,9 +108,9 @@ function connect(id, password, roomName) {
 export function openConnection({id, password, retry, roomName}) {
 
     let usernameOverride
-        = window.localStorage.getItem("xmpp_username_override");
+        = jitsiLocalStorage.getItem("xmpp_username_override");
     let passwordOverride
-        = window.localStorage.getItem("xmpp_password_override");
+        = jitsiLocalStorage.getItem("xmpp_password_override");
 
     if (usernameOverride && usernameOverride.length > 0) {
         id = usernameOverride;

modules/UI/UI.js

@@ -31,6 +31,7 @@ var messageHandler = UI.messageHandler;
 var JitsiPopover = require("./util/JitsiPopover");
 var Feedback = require("./feedback/Feedback");
 import FollowMe from "../FollowMe";
+import jitsiLocalStorage from '../util/JitsiLocalStorage';
 
 var eventEmitter = new EventEmitter();
 UI.eventEmitter = eventEmitter;
@@ -1239,7 +1240,7 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
     }
 
     if (showDoNotShowWarning) {
-        if (window.localStorage[localStoragePropName] === "true") {
+        if (jitsiLocalStorage.getItem(localStoragePropName) === "true") {
             return;
         }
     }
@@ -1308,8 +1309,8 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
                 let input = form.find("#doNotShowWarningAgain");
 
                 if (input.length) {
-                    window.localStorage[localStoragePropName] =
-                        input.prop("checked");
+                    jitsiLocalStorage.setItem(localStoragePropName,
+                        input.prop("checked"));
                 }
             }
         },

modules/UI/videolayout/RemoteVideo.js

@@ -6,6 +6,7 @@ import SmallVideo from "./SmallVideo";
 import UIUtils from "../util/UIUtil";
 import UIEvents from '../../../service/UI/UIEvents';
 import JitsiPopover from "../util/JitsiPopover";
+import jitsiLocalStorage from '../../util/JitsiLocalStorage';
 
 const MUTED_DIALOG_BUTTON_VALUES = {
     cancel: 0,
@@ -654,8 +655,7 @@ RemoteVideo.createContainer = function (spanId) {
 RemoteVideo.showMuteParticipantDialog = function () {
     //FIXME: don't show again checkbox is implemented very dirty. we should add
     // this functionality to MessageHandler class.
-    if (window.localStorage
-        && window.localStorage.getItem(
+    if (jitsiLocalStorage.getItem(
             "dontShowMuteParticipantDialog") === "true") {
         return Promise.resolve(MUTED_DIALOG_BUTTON_VALUES.muted);
     }
@@ -672,15 +672,13 @@ RemoteVideo.showMuteParticipantDialog = function () {
             msgString,
             leftButtonKey: 'dialog.muteParticipantButton',
             submitFunction: () => {
-                if(window.localStorage) {
-                    let form  = $.prompt.getPrompt();
-                    if (form) {
-                        let input = form.find("#doNotShowMessageAgain");
-                        if (input.length) {
-                            window.localStorage.setItem(
-                                "dontShowMuteParticipantDialog",
-                                input.prop("checked"));
-                        }
+                let form  = $.prompt.getPrompt();
+                if (form) {
+                    let input = form.find("#doNotShowMessageAgain");
+                    if (input.length) {
+                        jitsiLocalStorage.setItem(
+                            "dontShowMuteParticipantDialog",
+                            input.prop("checked"));
                     }
                 }
                 resolve(MUTED_DIALOG_BUTTON_VALUES.muted);

modules/settings/Settings.js

@@ -1,26 +1,6 @@
 /* global JitsiMeetJS */
-
 import UIUtil from '../UI/util/UIUtil';
-
-let email = '';
-let avatarId = '';
-let displayName = '';
-let language = null;
-let cameraDeviceId = '';
-let micDeviceId = '';
-let welcomePageDisabled = false;
-let localFlipX = null;
-let avatarUrl = '';
-
-function supportsLocalStorage() {
-    try {
-        return 'localStorage' in window && window.localStorage !== null;
-    } catch (e) {
-        console.log("localstorage is not supported");
-        return false;
-    }
-}
-
+import jitsiLocalStorage from '../util/JitsiLocalStorage';
 
 function generateUniqueId() {
     function _p8() {
@@ -29,45 +9,43 @@ function generateUniqueId() {
     return _p8() + _p8() + _p8() + _p8();
 }
 
-if (supportsLocalStorage()) {
-    if (!window.localStorage.jitsiMeetId) {
-        window.localStorage.jitsiMeetId = generateUniqueId();
-        console.log("generated id", window.localStorage.jitsiMeetId);
-    }
+if (!jitsiLocalStorage.getItem("jitsiMeetId")) {
+    jitsiLocalStorage.setItem("jitsiMeetId",generateUniqueId());
+    console.log("generated id", jitsiLocalStorage.getItem("jitsiMeetId"));
+}
 
-    email = UIUtil.unescapeHtml(window.localStorage.email || '');
-    avatarId = UIUtil.unescapeHtml(window.localStorage.avatarId || '');
-    if (!avatarId) {
-        // if there is no avatar id, we generate a unique one and use it forever
-        avatarId = generateUniqueId();
-        window.localStorage.avatarId = avatarId;
-    }
+let avatarUrl = '';
 
-    localFlipX = JSON.parse(window.localStorage.localFlipX || true);
-    displayName = UIUtil.unescapeHtml(window.localStorage.displayname || '');
-    language = window.localStorage.language;
-    cameraDeviceId = window.localStorage.cameraDeviceId || '';
-    micDeviceId = window.localStorage.micDeviceId || '';
-    welcomePageDisabled = JSON.parse(
-        window.localStorage.welcomePageDisabled || false
-    );
-
-    // Currently audio output device change is supported only in Chrome and
-    // default output always has 'default' device ID
-    var audioOutputDeviceId = window.localStorage.audioOutputDeviceId
-        || 'default';
-
-    if (audioOutputDeviceId !==
-        JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
-        JitsiMeetJS.mediaDevices.setAudioOutputDevice(audioOutputDeviceId)
-            .catch((ex) => {
-                console.warn('Failed to set audio output device from local ' +
-                    'storage. Default audio output device will be used' +
-                    'instead.', ex);
-            });
-    }
-} else {
-    console.log("local storage is not supported");
+let email = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("email") || '');
+let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("avatarId") || '');
+if (!avatarId) {
+    // if there is no avatar id, we generate a unique one and use it forever
+    avatarId = generateUniqueId();
+    jitsiLocalStorage.setItem("avatarId", avatarId);
+}
+
+let localFlipX = JSON.parse(jitsiLocalStorage.getItem("localFlipX") || true);
+let displayName = UIUtil.unescapeHtml(
+    jitsiLocalStorage.getItem("displayname") || '');
+let language = jitsiLocalStorage.getItem("language");
+let cameraDeviceId = jitsiLocalStorage.getItem("cameraDeviceId") || '';
+let micDeviceId = jitsiLocalStorage.getItem("micDeviceId") || '';
+let welcomePageDisabled = JSON.parse(
+    jitsiLocalStorage.getItem("welcomePageDisabled") || false);
+
+// Currently audio output device change is supported only in Chrome and
+// default output always has 'default' device ID
+let audioOutputDeviceId = jitsiLocalStorage.getItem("audioOutputDeviceId")
+    || 'default';
+
+if (audioOutputDeviceId !==
+    JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
+    JitsiMeetJS.mediaDevices.setAudioOutputDevice(audioOutputDeviceId)
+        .catch((ex) => {
+            console.warn('Failed to set audio output device from local ' +
+                'storage. Default audio output device will be used' +
+                'instead.', ex);
+        });
 }
 
 export default {
@@ -82,7 +60,8 @@ export default {
         displayName = newDisplayName;
 
         if (!disableLocalStore)
-            window.localStorage.displayname = UIUtil.escapeHtml(displayName);
+            jitsiLocalStorage.setItem("displayname",
+                UIUtil.escapeHtml(displayName));
     },
 
     /**
@@ -102,7 +81,7 @@ export default {
         email = newEmail;
 
         if (!disableLocalStore)
-            window.localStorage.email = UIUtil.escapeHtml(newEmail);
+            jitsiLocalStorage.setItem("email", UIUtil.escapeHtml(newEmail));
     },
 
     /**
@@ -142,7 +121,7 @@ export default {
     },
     setLanguage: function (lang) {
         language = lang;
-        window.localStorage.language = lang;
+        jitsiLocalStorage.setItem("language", lang);
     },
 
     /**
@@ -151,7 +130,7 @@ export default {
      */
     setLocalFlipX: function (val) {
         localFlipX = val;
-        window.localStorage.localFlipX = val;
+        jitsiLocalStorage.setItem("localFlipX", val);
     },
 
     /**
@@ -179,7 +158,7 @@ export default {
     setCameraDeviceId: function (newId, store) {
         cameraDeviceId = newId;
         if (store)
-            window.localStorage.cameraDeviceId = newId;
+            jitsiLocalStorage.setItem("cameraDeviceId", newId);
     },
 
     /**
@@ -199,7 +178,7 @@ export default {
     setMicDeviceId: function (newId, store) {
         micDeviceId = newId;
         if (store)
-            window.localStorage.micDeviceId = newId;
+            jitsiLocalStorage.setItem("micDeviceId", newId);
     },
 
     /**
@@ -218,7 +197,8 @@ export default {
      */
     setAudioOutputDeviceId: function (newId = 'default') {
         return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
-            .then(() => window.localStorage.audioOutputDeviceId = newId);
+            .then(() =>
+                jitsiLocalStorage.setItem("audioOutputDeviceId", newId));
     },
 
     /**
@@ -235,6 +215,6 @@ export default {
      */
     setWelcomePageEnabled (enabled) {
         welcomePageDisabled = !enabled;
-        window.localStorage.welcomePageDisabled = welcomePageDisabled;
+        jitsiLocalStorage.setItem("welcomePageDisabled", welcomePageDisabled);
     }
 };

modules/util/JitsiLocalStorage.js

@@ -0,0 +1,64 @@
+/**
+ * Dummy implementation of Storage interface with empty methods.
+ */
+class DummyLocalStorage {
+    /**
+     * Empty function
+     */
+    getItem() { }
+
+    /**
+     * Empty function
+     */
+    setItem() { }
+
+    /**
+     * Empty function
+     */
+    removeItem() { }
+}
+
+/**
+ * Wrapper class for browser's local storage object.
+ */
+class JitsiLocalStorage extends DummyLocalStorage {
+    /**
+     * @constructor
+     * @param {Storage} storage browser's local storage object.
+     */
+    constructor(storage) {
+        super();
+        this.storage = storage || new DummyLocalStorage();
+    }
+
+    /**
+     * Returns that passed key's value.
+     * @param {string} keyName the name of the key you want to retrieve
+     * the value of.
+     * @returns {String|null} the value of the key. If the key does not exist,
+     * null is returned.
+     */
+    getItem(keyName) {
+        return this.storage.getItem(keyName);
+    }
+
+    /**
+     * Adds a key to the storage, or update key's value if it already exists.
+     * @param {string} keyName the name of the key you want to create/update.
+     * @param {string} keyValue the value you want to give the key you are
+     * creating/updating.
+     */
+    setItem(keyName, keyValue) {
+        return this.storage.setItem(keyName, keyValue);
+    }
+
+    /**
+     * Remove a key from the storage.
+     * @param {string} keyName the name of the key you want to remove.
+     */
+    removeItem(keyName) {
+        return this.storage.removeItem(keyName);
+    }
+}
+
+export default new JitsiLocalStorage(window.localStorage);