feat(MessageHandler): Implement dont show again utility

This commit is contained in:
hristoterezov 2016-10-27 18:31:00 -05:00
parent 7e2fe30472
commit a8b69d5cd8
3 changed files with 152 additions and 68 deletions

View File

@ -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() {

View File

@ -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;
},

View File

@ -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)
});
});