feat(MessageHandler): Implement dont show again utility

modules/UI/UI.js

@@ -31,7 +31,6 @@ 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;
@@ -1215,7 +1214,11 @@ UI.showExtensionExternalInstallationDialog = function (url) {
  * @param {JitsiTrackError} cameraError
  */
 UI.showDeviceErrorDialog = function (micError, cameraError) {
-    let localStoragePropName = "doNotShowErrorAgain";
+    let dontShowAgain = {
+        id: "doNotShowWarningAgain",
+        localStorageKey: "doNotShowErrorAgain",
+        textKey: "dialog.doNotShowWarningAgain"
+    };
     let isMicJitsiTrackErrorAndHasName = micError && micError.name &&
         micError instanceof JitsiMeetJS.errorTypes.JitsiTrackError;
     let isCameraJitsiTrackErrorAndHasName = cameraError && cameraError.name &&
@@ -1232,17 +1235,11 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
     }
 
     if (micError) {
-        localStoragePropName += "-mic-" + micError.name;
+        dontShowAgain.localStorageKey += "-mic-" + micError.name;
     }
 
     if (cameraError) {
-        localStoragePropName += "-camera-" + cameraError.name;
-    }
-
-    if (showDoNotShowWarning) {
-        if (jitsiLocalStorage.getItem(localStoragePropName) === "true") {
-            return;
-        }
+        dontShowAgain.localStorageKey += "-camera-" + cameraError.name;
     }
 
     let cameraJitsiTrackErrorMsg = cameraError
@@ -1267,12 +1264,6 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
         micError.message
             ? `<div>${micError.message}</div>`
             : ``;
-    let doNotShowWarningAgainSection = showDoNotShowWarning
-        ? `<label>
-            <input type='checkbox' id='doNotShowWarningAgain'>
-            <span data-i18n='dialog.doNotShowWarningAgain'></span>
-           </label>`
-        : ``;
     let message = '';
 
     if (micError) {
@@ -1291,8 +1282,6 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
             ${additionalCameraErrorMsg}`;
     }
 
-    message = `${message}${doNotShowWarningAgainSection}`;
-
     // To make sure we don't have multiple error dialogs open at the same time,
     // we will just close the previous one if we are going to show a new one.
     deviceErrorDialog && deviceErrorDialog.close();
@@ -1302,24 +1291,14 @@ UI.showDeviceErrorDialog = function (micError, cameraError) {
         message,
         false,
         {Ok: true},
-        function () {
-            let form  = $.prompt.getPrompt();
-
-            if (form) {
-                let input = form.find("#doNotShowWarningAgain");
-
-                if (input.length) {
-                    jitsiLocalStorage.setItem(localStoragePropName,
-                        input.prop("checked"));
-                }
-            }
-        },
+        function () {},
         null,
         function () {
             // Reset dialog reference to null to avoid memory leaks when
             // user closed the dialog manually.
             deviceErrorDialog = null;
-        }
+        },
+        showDoNotShowWarning ? dontShowAgain : undefined
     );
 
     function getTitleKey() {

modules/UI/util/MessageHandler.js

@@ -1,6 +1,7 @@
 /* global $, APP, toastr, Impromptu */
 
 import UIUtil from './UIUtil';
+import jitsiLocalStorage from '../../util/JitsiLocalStorage';
 
 /**
  * Flag for enable/disable of the notifications.
@@ -20,6 +21,91 @@ let popupEnabled = true;
  */
 let twoButtonDialog = null;
 
+/**
+ * Generates html for dont show again checkbox.
+ * @param {object} options options
+ * @param {string} options.id the id of the checkbox.
+ * @param {string} options.textKey the key for the text displayed next to
+ * checkbox
+ * @param {boolean} options.checked if true the checkbox is foing to be checked
+ * by default.
+ * @returns {string}
+ */
+function generateDontShowCheckbox(options) {
+    if(!isDontShowAgainEnabled(options)) {
+        return "";
+    }
+
+    let checked
+        = (options.checked === true) ? "checked" : "";
+    return `<br />
+        <label>
+            <input type='checkbox' ${checked} id='${options.id}' />
+            <span data-i18n='${options.textKey}'></span>
+        </label>`;
+}
+
+/**
+ * Checks whether the dont show again checkbox was checked before.
+ * @param {object} options - options for dont show again checkbox.
+ * @param {string} options.id the id of the checkbox.
+ * @param {string} options.localStorageKey the key for the local storage. if
+ * not provided options.id will be used.
+ * @returns {boolean} true if the dialog mustn't be displayed and
+ * false otherwise.
+ */
+function dontShowTheDialog(options) {
+    if(isDontShowAgainEnabled(options)) {
+        if(jitsiLocalStorage.getItem(options.localStorageKey || options.id)
+            === "true") {
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Wraps the submit function to process the dont show again status and store
+ * it.
+ * @param {object} options - options for dont show again checkbox.
+ * @param {string} options.id the id of the checkbox.
+ * @param {Array} options.buttonValues The button values that will trigger
+ * storing he checkbox value
+ * @param {string} options.localStorageKey the key for the local storage. if
+ * not provided options.id will be used.
+ * @param {Function} submitFunction the submit function to be wrapped
+ * @returns {Function} wrapped function
+ */
+function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
+    if(isDontShowAgainEnabled(options)) {
+        return (...args) => {
+            console.debug(args, options.buttonValues);
+            //args[1] is the value associated with the pressed button
+            if(!options.buttonValues || options.buttonValues.length === 0
+                || options.buttonValues.indexOf(args[1]) !== -1 ) {
+                let checkbox = $(`#${options.id}`);
+                if (checkbox.length) {
+                    jitsiLocalStorage.setItem(
+                        options.localStorageKey || options.id,
+                        checkbox.prop("checked"));
+                }
+            }
+            submitFunction(...args);
+        };
+    } else {
+        return submitFunction;
+    }
+}
+
+/**
+ * Check whether dont show again checkbox is enabled or not.
+ * @param {object} options - options for dont show again checkbox.
+ * @returns {boolean} true if enabled and false if not.
+ */
+function isDontShowAgainEnabled(options) {
+    return typeof options === "object";
+}
+
 var messageHandler = {
     OK: "dialog.OK",
     CANCEL: "dialog.Cancel",
@@ -72,6 +158,16 @@ var messageHandler = {
      *        the dialog is opened
      * @param defaultButton index of default button which will be activated when
      *        the user press 'enter'. Indexed from 0.
+     * @param {object} dontShowAgain - options for dont show again checkbox.
+     * @param {string} dontShowAgain.id the id of the checkbox.
+     * @param {string} dontShowAgain.textKey the key for the text displayed
+     * next to checkbox
+     * @param {boolean} dontShowAgain.checked if true the checkbox is foing to
+     * be checked
+     * @param {Array} dontShowAgain.buttonValues The button values that will
+     * trigger storing the checkbox value
+     * @param {string} dontShowAgain.localStorageKey the key for the local
+     * storage. if not provided dontShowAgain.id will be used.
      * @return the prompt that was created, or null
      */
     openTwoButtonDialog: function(options) {
@@ -87,12 +183,20 @@ var messageHandler = {
             size,
             defaultButton,
             wrapperClass,
-            classes
+            classes,
+            dontShowAgain
         } = options;
 
         if (!popupEnabled || twoButtonDialog)
             return null;
 
+        if(dontShowTheDialog(dontShowAgain)) {
+            // Maybe we should pass some parameters here? I'm not sure
+            // and currently we don't need any parameters.
+            submitFunction();
+            return null;
+        }
+
         var buttons = [];
 
         var leftButton = leftButtonKey ?
@@ -108,6 +212,7 @@ var messageHandler = {
         if (msgKey) {
             message = APP.translation.generateTranslationHTML(msgKey);
         }
+        message += generateDontShowCheckbox(dontShowAgain);
         classes = classes || this._getDialogClasses(size);
         if (wrapperClass) {
             classes.prompt += ` ${wrapperClass}`;
@@ -122,13 +227,13 @@ var messageHandler = {
             loaded: loadedFunction,
             promptspeed: 0,
             classes,
-            submit: function (e, v, m, f) {
-                twoButtonDialog = null;
-                if (v){
-                    if (submitFunction)
+            submit: dontShowAgainSubmitFunctionWrapper(dontShowAgain,
+                function (e, v, m, f) {
+                    twoButtonDialog = null;
+                    if (v && submitFunction) {
                         submitFunction(e, v, m, f);
-                }
-            },
+                    }
+                }),
             close: function (e, v, m, f) {
                 twoButtonDialog = null;
                 if (closeFunction) {
@@ -155,12 +260,29 @@ var messageHandler = {
      * @param loadedFunction function to be called after the prompt is fully
      *        loaded
      * @param closeFunction function to be called on dialog close
+     * @param {object} dontShowAgain - options for dont show again checkbox.
+     * @param {string} dontShowAgain.id the id of the checkbox.
+     * @param {string} dontShowAgain.textKey the key for the text displayed
+     * next to checkbox
+     * @param {boolean} dontShowAgain.checked if true the checkbox is foing to
+     * be checked
+     * @param {Array} dontShowAgain.buttonValues The button values that will
+     * trigger storing the checkbox value
+     * @param {string} dontShowAgain.localStorageKey the key for the local
+     * storage. if not provided dontShowAgain.id will be used.
      */
     openDialog: function (titleKey, msgString, persistent, buttons,
-                              submitFunction, loadedFunction, closeFunction) {
+        submitFunction, loadedFunction, closeFunction, dontShowAgain) {
         if (!popupEnabled)
             return;
 
+        if(dontShowTheDialog(dontShowAgain)) {
+            // Maybe we should pass some parameters here? I'm not sure
+            // and currently we don't need any parameters.
+            submitFunction();
+            return;
+        }
+
         let args = {
             title: this._getFormattedTitleString(titleKey),
             persistent: persistent,
@@ -168,7 +290,8 @@ var messageHandler = {
             defaultButton: 1,
             promptspeed: 0,
             loaded: loadedFunction,
-            submit: submitFunction,
+            submit: dontShowAgainSubmitFunctionWrapper(
+                dontShowAgain, submitFunction),
             close: closeFunction,
             classes: this._getDialogClasses()
         };
@@ -177,7 +300,8 @@ var messageHandler = {
             args.closeText = '';
         }
 
-        let dialog = new Impromptu(msgString, args);
+        let dialog = new Impromptu(
+            msgString + generateDontShowCheckbox(dontShowAgain), args);
         APP.translation.translateElement(dialog.getPrompt());
         return dialog;
     },

modules/UI/videolayout/RemoteVideo.js

@@ -6,7 +6,6 @@ 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,
@@ -653,36 +652,18 @@ RemoteVideo.createContainer = function (spanId) {
  * participant.
  */
 RemoteVideo.showMuteParticipantDialog = function () {
-    //FIXME: don't show again checkbox is implemented very dirty. we should add
-    // this functionality to MessageHandler class.
-    if (jitsiLocalStorage.getItem(
-            "dontShowMuteParticipantDialog") === "true") {
-        return Promise.resolve(MUTED_DIALOG_BUTTON_VALUES.muted);
-    }
-    let msgString =
-        `<div data-i18n="dialog.muteParticipantBody"></div>
-        <br />
-        <label>
-            <input type='checkbox' checked id='doNotShowMessageAgain' />
-            <span data-i18n='dialog.doNotShowMessageAgain'></span>
-        </label>`;
     return new Promise(resolve => {
         APP.UI.messageHandler.openTwoButtonDialog({
             titleKey : "dialog.muteParticipantTitle",
-            msgString,
-            leftButtonKey: 'dialog.muteParticipantButton',
-            submitFunction: () => {
-                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);
+            msgString: "<div data-i18n='dialog.muteParticipantBody'></div>",
+            leftButtonKey: "dialog.muteParticipantButton",
+            dontShowAgain: {
+                id: "dontShowMuteParticipantDialog",
+                textKey: "dialog.doNotShowMessageAgain",
+                checked: true,
+                buttonValues: [true]
             },
+            submitFunction: () => resolve(MUTED_DIALOG_BUTTON_VALUES.muted),
             closeFunction: () => resolve(MUTED_DIALOG_BUTTON_VALUES.cancel)
         });
     });