feat(eslint): Enable for non react files

.eslintrc.js

@@ -23,9 +23,157 @@ module.exports = {
         'sourceType': 'module'
     },
     'plugins': [
-        'flowtype'
+        'flowtype',
+
+        // ESLint's rule no-duplicate-imports does not understand Flow's import
+        // type. Fortunately, eslint-plugin-import understands Flow's import
+        // type.
+        'import'
     ],
     'rules': {
+        // Possible Errors group
+        'no-cond-assign': 2,
+        'no-console': 0,
+        'no-constant-condition': 2,
+        'no-control-regex': 2,
+        'no-debugger': 2,
+        'no-dupe-args': 2,
+        'no-dupe-keys': 2,
+        'no-duplicate-case': 2,
+        'no-empty': 2,
+        'no-empty-character-class': 2,
+        'no-ex-assign': 2,
+        'no-extra-boolean-cast': 2,
+        'no-extra-parens': [
+            'error',
+            'all',
+            { 'nestedBinaryExpressions': false }
+        ],
+        'no-extra-semi': 2,
+        'no-func-assign': 2,
+        'no-inner-declarations': 2,
+        'no-invalid-regexp': 2,
+        'no-irregular-whitespace': 2,
+        'no-negated-in-lhs': 2,
+        'no-obj-calls': 2,
+        'no-prototype-builtins': 0,
+        'no-regex-spaces': 2,
+        'no-sparse-arrays': 2,
+        'no-unexpected-multiline': 2,
+        'no-unreachable': 2,
+        'no-unsafe-finally': 2,
+        'use-isnan': 2,
+        'valid-typeof': 2,
+
+        // Best Practices group
+        'accessor-pairs': 0,
+        'array-callback-return': 2,
+        'block-scoped-var': 0,
+        'complexity': 0,
+        'consistent-return': 0,
+        'curly': 2,
+        'default-case': 0,
+        'dot-location': [ 'error', 'property' ],
+        'dot-notation': 2,
+        'eqeqeq': 2,
+        'guard-for-in': 2,
+        'no-alert': 2,
+        'no-caller': 2,
+        'no-case-declarations': 2,
+        'no-div-regex': 0,
+        'no-else-return': 2,
+        'no-empty-function': 2,
+        'no-empty-pattern': 2,
+        'no-eq-null': 2,
+        'no-eval': 2,
+        'no-extend-native': 2,
+        'no-extra-bind': 2,
+        'no-extra-label': 2,
+        'no-fallthrough': 2,
+        'no-floating-decimal': 2,
+        'no-implicit-coercion': 2,
+        'no-implicit-globals': 2,
+        'no-implied-eval': 2,
+        'no-invalid-this': 2,
+        'no-iterator': 2,
+        'no-labels': 2,
+        'no-lone-blocks': 2,
+        'no-loop-func': 2,
+        'no-magic-numbers': 0,
+        'no-multi-spaces': 2,
+        'no-multi-str': 2,
+        'no-native-reassign': 2,
+        'no-new': 2,
+        'no-new-func': 2,
+        'no-new-wrappers': 2,
+        'no-octal': 2,
+        'no-octal-escape': 2,
+        'no-param-reassign': 2,
+        'no-proto': 2,
+        'no-redeclare': 2,
+        'no-return-assign': 2,
+        'no-script-url': 2,
+        'no-self-assign': 2,
+        'no-self-compare': 2,
+        'no-sequences': 2,
+        'no-throw-literal': 2,
+        'no-unmodified-loop-condition': 2,
+        'no-unused-expressions': [
+            'error',
+            {
+                'allowShortCircuit': true,
+                'allowTernary': true
+            }
+        ],
+        'no-unused-labels': 2,
+        'no-useless-call': 2,
+        'no-useless-concat': 2,
+        'no-useless-escape': 2,
+        'no-void': 2,
+        'no-warning-comments': 0,
+        'no-with': 2,
+        'radix': 2,
+        'vars-on-top': 2,
+        'wrap-iife': [ 'error', 'inside' ],
+        'yoda': 2,
+
+        // Strict Mode group
+        'strict': 2,
+
+        // Variables group
+        'init-declarations': 0,
+        'no-catch-shadow': 2,
+        'no-delete-var': 2,
+        'no-label-var': 2,
+        'no-restricted-globals': 0,
+        'no-shadow': 2,
+        'no-shadow-restricted-names': 2,
+        'no-undef': 2,
+        'no-undef-init': 2,
+        'no-undefined': 0,
+        'no-unused-vars': 2,
+        'no-use-before-define': [ 'error', { 'functions': false } ],
+
+        // Stylistic issues group
+        'array-bracket-spacing': [
+            'error',
+            'always',
+            { 'objectsInArrays': true }
+        ],
+        'block-spacing': [ 'error', 'always' ],
+        'brace-style': 2,
+        'camelcase': 2,
+        'comma-dangle': 2,
+        'comma-spacing': 2,
+        'comma-style': 2,
+        'computed-property-spacing': 2,
+        'consistent-this': [ 'error', 'self' ],
+        'eol-last': 2,
+        'func-names': 0,
+        'func-style': 0,
+        'id-blacklist': 0,
+        'id-length': 0,
+        'id-match': 0,
         'indent': [
             'error',
             4,
@@ -43,19 +191,121 @@ module.exports = {
                 'SwitchCase': 0
             }
         ],
-        'new-cap': [
+        'key-spacing': 2,
+        'keyword-spacing': 2,
+        'linebreak-style': [ 'error', 'unix' ],
+        'lines-around-comment': [
             'error',
             {
-                'capIsNew': false // Behave like JSHint's newcap.
+                'allowBlockStart': true,
+                'allowObjectStart': true,
+                'beforeBlockComment': true,
+                'beforeLineComment': true
             }
         ],
-        // While it is considered a best practice to avoid using methods on
-        // console in JavaScript that is designed to be executed in the browser
-        // and ESLint includes the rule among its set of recommended rules, (1)
-        // the general practice is to strip such calls before pushing to
-        // production and (2) we prefer to utilize console in lib-jitsi-meet
-        // (and jitsi-meet).
-        'no-console': 'off',
-        'semi': 'error'
+        'max-depth': 2,
+        'max-len': [ 'error', 80 ],
+        'max-lines': 0,
+        'max-nested-callbacks': 2,
+        'max-params': 2,
+        'max-statements': 0,
+        'max-statements-per-line': 2,
+        'multiline-ternary': 0,
+        'new-cap': 2,
+        'new-parens': 2,
+        'newline-after-var': 2,
+        'newline-before-return': 2,
+        'newline-per-chained-call': 2,
+        'no-array-constructor': 2,
+        'no-bitwise': 2,
+        'no-continue': 2,
+        'no-inline-comments': 0,
+        'no-lonely-if': 2,
+        'no-mixed-operators': 2,
+        'no-mixed-spaces-and-tabs': 2,
+        'no-multiple-empty-lines': 2,
+        'no-negated-condition': 2,
+        'no-nested-ternary': 0,
+        'no-new-object': 2,
+        'no-plusplus': 0,
+        'no-restricted-syntax': 0,
+        'no-spaced-func': 2,
+        'no-tabs': 2,
+        'no-ternary': 0,
+        'no-trailing-spaces': 2,
+        'no-underscore-dangle': 0,
+        'no-unneeded-ternary': 2,
+        'no-whitespace-before-property': 2,
+        'object-curly-newline': 0,
+        'object-curly-spacing': [ 'error', 'always' ],
+        'object-property-newline': 2,
+        'one-var': 0,
+        'one-var-declaration-per-line': 0,
+        'operator-assignment': 0,
+        'operator-linebreak': [ 'error', 'before' ],
+        'padded-blocks': 0,
+        'quote-props': 0,
+        'quotes': [ 'error', 'single' ],
+        'require-jsdoc': [
+            'error',
+            {
+                'require': {
+                    'ClassDeclaration': true,
+                    'FunctionDeclaration': true,
+                    'MethodDefinition': true
+                }
+            }
+        ],
+        'semi': [ 'error', 'always' ],
+        'semi-spacing': 2,
+        'sort-vars': 2,
+        'space-before-blocks': 2,
+        'space-before-function-paren': [ 'error', 'never' ],
+        'space-in-parens': [ 'error', 'never' ],
+        'space-infix-ops': 2,
+        'space-unary-ops': 2,
+        'spaced-comment': 2,
+        'unicode-bom': 0,
+        'wrap-regex': 0,
+
+        // ES6 group rules
+        'arrow-body-style': [
+            'error',
+            'as-needed',
+            { requireReturnForObjectLiteral: true }
+        ],
+        'arrow-parens': [ 'error', 'as-needed' ],
+        'arrow-spacing': 2,
+        'constructor-super': 2,
+        'generator-star-spacing': 2,
+        'no-class-assign': 2,
+        'no-confusing-arrow': 2,
+        'no-const-assign': 2,
+        'no-dupe-class-members': 2,
+        'no-new-symbol': 2,
+        'no-restricted-imports': 0,
+        'no-this-before-super': 2,
+        'no-useless-computed-key': 2,
+        'no-useless-constructor': 2,
+        'no-useless-rename': 2,
+        'no-var': 2,
+        'object-shorthand': [
+            'error',
+            'always',
+            { 'avoidQuotes': true }
+        ],
+        'prefer-arrow-callback': [ 'error', { 'allowNamedFunctions': true } ],
+        'prefer-const': 2,
+        'prefer-reflect': 0,
+        'prefer-rest-params': 2,
+        'prefer-spread': 2,
+        'prefer-template': 2,
+        'require-yield': 2,
+        'rest-spread-spacing': 2,
+        'sort-imports': 0,
+        'template-curly-spacing': 2,
+        'yield-star-spacing': 2,
+
+        'import/no-duplicates': 2
     }
 };

ConferenceEvents.js

@@ -1,11 +1,11 @@
 /**
  * Notifies interested parties that hangup procedure will start.
  */
-export const BEFORE_HANGUP = "conference.before_hangup";
+export const BEFORE_HANGUP = 'conference.before_hangup';
 
 /**
  * Notifies interested parties that desktop sharing enable/disable state is
  * changed.
  */
 export const DESKTOP_SHARING_ENABLED_CHANGED
-    = "conference.desktop_sharing_enabled_changed";
+    = 'conference.desktop_sharing_enabled_changed';

analytics.js

@@ -1,38 +1,45 @@
 /* global ga */
 /* eslint-disable indent */
 
-(function (ctx) {
-  function Analytics() {
-    /* eslint-disable semi */
-
+(function(ctx) {
     /**
-     * Google Analytics
+     *
      */
-    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-    ga('create', 'UA-319188-14', 'jit.si');
-    ga('send', 'pageview');
+    function Analytics() {
+        /* eslint-disable */
+
+        /**
+         * Google Analytics
+         */
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        ga('create', 'UA-319188-14', 'jit.si');
+        ga('send', 'pageview');
+
+        /* eslint-enable */
+    }
 
-    /* eslint-enable semi */
-  }
+    Analytics.prototype.sendEvent = function(action, data) {
+        // empty label if missing value for it and add the value,
+        // the value should be integer or null
+        let value = data.value;
 
-  Analytics.prototype.sendEvent = function (action, data) {
-    // empty label if missing value for it and add the value,
-    // the value should be integer or null
-    var value = data.value;
-    value = value? Math.round(parseFloat(value)) : null;
-    var label = data.label || "";
+        value = value ? Math.round(parseFloat(value)) : null;
+        const label = data.label || '';
 
-    ga('send', 'event', 'jit.si',
-        action + '.' + data.browserName, label, value);
-  };
+        ga('send', 'event', 'jit.si',
+            `${action}.${data.browserName}`, label, value);
+    };
 
-  if (typeof ctx.JitsiMeetJS === "undefined")
-    ctx.JitsiMeetJS = {};
-  if (typeof ctx.JitsiMeetJS.app === "undefined")
-    ctx.JitsiMeetJS.app = {};
-  if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === "undefined")
-    ctx.JitsiMeetJS.app.analyticsHandlers = [];
-  ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
-}(window));
+    if (typeof ctx.JitsiMeetJS === 'undefined') {
+        ctx.JitsiMeetJS = {};
+    }
+    if (typeof ctx.JitsiMeetJS.app === 'undefined') {
+        ctx.JitsiMeetJS.app = {};
+    }
+    if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === 'undefined') {
+        ctx.JitsiMeetJS.app.analyticsHandlers = [];
+    }
+    ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
+})(window);

config.js

@@ -1,12 +1,13 @@
+/* eslint-disable no-unused-vars, no-var */
 var config = { // eslint-disable-line no-unused-vars
     // Configuration
     //
 
     // Alternative location for the configuration.
-    //configLocation: './config.json',
+    // configLocation: './config.json',
 
     // Custom function which given the URL path should return a room name.
-    //getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
+    // getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
 
 
     // Connection
@@ -17,22 +18,22 @@ var config = { // eslint-disable-line no-unused-vars
         domain: 'jitsi-meet.example.com',
 
         // XMPP MUC domain. FIXME: use XEP-0030 to discover it.
-        muc: 'conference.jitsi-meet.example.com',
+        muc: 'conference.jitsi-meet.example.com'
 
         // When using authentication, domain for guest users.
-        //anonymousdomain: 'guest.example.com',
+        // anonymousdomain: 'guest.example.com',
 
         // Domain for authenticated users. Defaults to <domain>.
-        //authdomain: 'jitsi-meet.example.com',
+        // authdomain: 'jitsi-meet.example.com',
 
         // Jirecon recording component domain.
-        //jirecon: 'jirecon.jitsi-meet.example.com',
+        // jirecon: 'jirecon.jitsi-meet.example.com',
 
         // Call control component (Jigasi).
-        //call_control: 'callcontrol.jitsi-meet.example.com',
+        // call_control: 'callcontrol.jitsi-meet.example.com',
 
         // Focus component domain. Defaults to focus.<domain>.
-        //focus: 'focus.jitsi-meet.example.com',
+        // focus: 'focus.jitsi-meet.example.com',
     },
 
     // BOSH URL. FIXME: use XEP-0156 to discover it.
@@ -42,7 +43,7 @@ var config = { // eslint-disable-line no-unused-vars
     clientNode: 'http://jitsi.org/jitsimeet',
 
     // The real JID of focus participant - can be overridden here
-    //focusUserJid: 'focus@auth.jitsi-meet.example.com',
+    // focusUserJid: 'focus@auth.jitsi-meet.example.com',
 
 
     // Testing / experimental features.
@@ -51,18 +52,19 @@ var config = { // eslint-disable-line no-unused-vars
     testing: {
         // Enables experimental simulcast support on Firefox.
         enableFirefoxSimulcast: false,
+
         // P2P test mode disables automatic switching to P2P when there are 2
         // participants in the conference.
-        p2pTestMode: false,
+        p2pTestMode: false
     },
 
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
     // signalling.
-    //webrtcIceUdpDisable: false,
+    // webrtcIceUdpDisable: false,
 
     // Disables ICE/TCP by filtering out local and remote TCP candidates in
     // signalling.
-    //webrtcIceTcpDisable: false,
+    // webrtcIceTcpDisable: false,
 
 
     // Media
@@ -71,52 +73,52 @@ var config = { // eslint-disable-line no-unused-vars
     // Audio
 
     // Disable measuring of audio levels.
-    //disableAudioLevels: false,
+    // disableAudioLevels: false,
 
     // Start the conference in audio only mode (no video is being received nor
     // sent).
-    //startAudioOnly: false,
+    // startAudioOnly: false,
 
     // Every participant after the Nth will start audio muted.
-    //startAudioMuted: 10,
+    // startAudioMuted: 10,
 
     // Start calls with audio muted. Unlike the option above, this one is only
     // applied locally. FIXME: having these 2 options is confusing.
-    //startWithAudioMuted: false,
+    // startWithAudioMuted: false,
 
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
-    //resolution: 720,
+    // resolution: 720,
 
     // Enable / disable simulcast support.
-    //disableSimulcast: false,
+    // disableSimulcast: false,
 
     // Suspend sending video if bandwidth estimation is too low. This may cause
     // problems with audio playback. Disabled until these are fixed.
     disableSuspendVideo: true,
 
     // Every participant after the Nth will start video muted.
-    //startVideoMuted: 10,
+    // startVideoMuted: 10,
 
     // Start calls with video muted. Unlike the option above, this one is only
     // applied locally. FIXME: having these 2 options is confusing.
-    //startWithVideoMuted: false,
+    // startWithVideoMuted: false,
 
     // If set to true, prefer to use the H.264 video codec (if supported).
     // Note that it's not recommended to do this because simulcast is not
     // supported when  using H.264. For 1-to-1 calls this setting is enabled by
     // default and can be toggled in the p2p section.
-    //preferH264: true,
+    // preferH264: true,
 
     // If set to true, disable H.264 video codec by stripping it out of the
     // SDP.
-    //disableH264: false,
+    // disableH264: false,
 
     // Desktop sharing
 
     // Enable / disable desktop sharing
-    //disableDesktopSharing: false,
+    // disableDesktopSharing: false,
 
     // The ID of the jidesha extension for Chrome.
     desktopSharingChromeExtId: null,
@@ -126,7 +128,7 @@ var config = { // eslint-disable-line no-unused-vars
 
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: ['screen', 'window', 'tab'],
+    desktopSharingChromeSources: [ 'screen', 'window', 'tab' ],
 
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
@@ -149,15 +151,15 @@ var config = { // eslint-disable-line no-unused-vars
     desktopSharingFirefoxExtensionURL: null,
 
     // Try to start calls with screen-sharing instead of camera video.
-    //startScreenSharing: false,
+    // startScreenSharing: false,
 
     // Recording
 
     // Whether to enable recording or not.
-    //enableRecording: false,
+    // enableRecording: false,
 
     // Type for recording: one of jibri or jirecon.
-    //recordingType: 'jibri',
+    // recordingType: 'jibri',
 
     // Misc
 
@@ -165,29 +167,29 @@ var config = { // eslint-disable-line no-unused-vars
     channelLastN: -1,
 
     // Disables or enables RTX (RFC 4588) (defaults to false).
-    //disableRtx: false,
+    // disableRtx: false,
 
     // Use XEP-0215 to fetch STUN and TURN servers.
-    //useStunTurn: true,
+    // useStunTurn: true,
 
     // Enable IPv6 support.
-    //useIPv6: true,
+    // useIPv6: true,
 
     // Enables / disables a data communication channel with the Videobridge.
     // Values can be 'datachannel', 'websocket', true (treat it as
     // 'datachannel'), undefined (treat it as 'datachannel') and false (don't
     // open any channel).
-    //openBridgeChannel: true,
+    // openBridgeChannel: true,
 
 
     // UI
     //
 
     // Use display name as XMPP nickname.
-    //useNicks: false,
+    // useNicks: false,
 
     // Require users to always specify a display name.
-    //requireDisplayName: true,
+    // requireDisplayName: true,
 
     // Whether to use a welcome page or not. In case it's false a random room
     // will be joined when no room is specified.
@@ -195,17 +197,19 @@ var config = { // eslint-disable-line no-unused-vars
 
     // Enabling the close page will ignore the welcome page redirection when
     // a call is hangup.
-    //enableClosePage: false,
+    // enableClosePage: false,
 
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    //disable1On1Mode: false,
+    // disable1On1Mode: false,
+
 
+    // The minumum value a video's height (or width, whichever is smaller) needs
     // The minimum value a video's height (or width, whichever is smaller) needs
     // to be in order to be considered high-definition.
     minHDHeight: 540,
 
     // Default language for the user interface.
-    //defaultLanguage: 'en',
+    // defaultLanguage: 'en',
 
     // If true all users without a token will be considered guests and all users
     // with token will be considered non-guests. Only guests will be allowed to
@@ -214,19 +218,19 @@ var config = { // eslint-disable-line no-unused-vars
 
     // Message to show the users. Example: 'The service will be down for
     // maintenance at 01:00 AM GMT,
-    //noticeMessage: '',
+    // noticeMessage: '',
 
 
     // Stats
     //
 
     // Whether to enable stats collection or not.
-    //disableStats: false,
+    // disableStats: false,
 
     // To enable sending statistics to callstats.io you must provide the
     // Application ID and Secret.
-    //callStatsID: '',
-    //callStatsSecret: '',
+    // callStatsID: '',
+    // callStatsSecret: '',
 
 
     // Privacy
@@ -235,7 +239,7 @@ var config = { // eslint-disable-line no-unused-vars
     // If third party requests are disabled, no other server will be contacted.
     // This means avatars will be locally generated and callstats integration
     // will not function.
-    //disableThirdPartyRequests: false,
+    // disableThirdPartyRequests: false,
 
 
     // Peer-To-Peer mode: used (if enabled) when there are just 2 participants.
@@ -251,13 +255,13 @@ var config = { // eslint-disable-line no-unused-vars
         enabled: true,
 
         // Use XEP-0215 to fetch STUN and TURN servers.
-        //useStunTurn: true,
+        // useStunTurn: true,
 
         // The STUN servers that will be used in the peer to peer connections
         stunServers: [
-            { urls: "stun:stun.l.google.com:19302" },
-            { urls: "stun:stun1.l.google.com:19302" },
-            { urls: "stun:stun2.l.google.com:19302" }
+            { urls: 'stun:stun.l.google.com:19302' },
+            { urls: 'stun:stun1.l.google.com:19302' },
+            { urls: 'stun:stun2.l.google.com:19302' }
         ],
 
         // If set to true, it will prefer to use H.264 for P2P calls (if H.264
@@ -266,11 +270,11 @@ var config = { // eslint-disable-line no-unused-vars
 
         // If set to true, disable H.264 video codec by stripping it out of the
         // SDP.
-        //disableH264: false,
+        // disableH264: false,
 
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
-        //backToP2PDelay: 5
+        // backToP2PDelay: 5
     },
 
 
@@ -279,8 +283,9 @@ var config = { // eslint-disable-line no-unused-vars
     //
 
     deploymentInfo: {
-        //shard: "shard1",
-        //region: "europe",
-        //userRegion: "asia"
+        // shard: "shard1",
+        // region: "europe",
+        // userRegion: "asia"
     }
 };
+/* eslint-enable no-unused-vars, no-var */

connection.js

@@ -13,7 +13,7 @@ import {
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
  * Checks if we have data to use attach instead of connect. If we have the data
@@ -27,26 +27,31 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
  * @param {string} [roomName] the name of the conference.
  */
 function checkForAttachParametersAndConnect(id, password, connection) {
-    if(window.XMPPAttachInfo){
-        APP.connect.status = "connecting";
+    if (window.XMPPAttachInfo) {
+        APP.connect.status = 'connecting';
+
         // When connection optimization is not deployed or enabled the default
         // value will be window.XMPPAttachInfo.status = "error"
         // If the connection optimization is deployed and enabled and there is
         // a failure the value will be window.XMPPAttachInfo.status = "error"
-        if(window.XMPPAttachInfo.status === "error") {
-            connection.connect({id, password});
+        if (window.XMPPAttachInfo.status === 'error') {
+            connection.connect({ id,
+                password });
+
             return;
         }
 
-        var attachOptions = window.XMPPAttachInfo.data;
-        if(attachOptions) {
+        const attachOptions = window.XMPPAttachInfo.data;
+
+        if (attachOptions) {
             connection.attach(attachOptions);
             delete window.XMPPAttachInfo.data;
         } else {
-            connection.connect({id, password});
+            connection.connect({ id,
+                password });
         }
     } else {
-        APP.connect.status = "ready";
+        APP.connect.status = 'ready';
         APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
             id, password, connection);
     }
@@ -64,15 +69,15 @@ function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
     const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
 
-    connectionConfig.bosh += '?room=' + roomName;
+    connectionConfig.bosh += `?room=${roomName}`;
 
-    let connection
+    const connection
         = new JitsiMeetJS.JitsiConnection(
             null,
             jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
             connectionConfig);
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
         connection.addEventListener(
             JitsiConnectionEvents.CONNECTION_ESTABLISHED,
             handleConnectionEstablished);
@@ -83,6 +88,9 @@ function connect(id, password, roomName) {
             JitsiConnectionEvents.CONNECTION_FAILED,
             connectionFailedHandler);
 
+        /**
+         *
+         */
         function connectionFailedHandler(error, message, credentials) {
             APP.store.dispatch(
                 connectionFailed(connection, error, message, credentials));
@@ -94,6 +102,9 @@ function connect(id, password, roomName) {
             }
         }
 
+        /**
+         *
+         */
         function unsubscribe() {
             connection.removeEventListener(
                 JitsiConnectionEvents.CONNECTION_ESTABLISHED,
@@ -103,15 +114,21 @@ function connect(id, password, roomName) {
                 handleConnectionFailed);
         }
 
+        /**
+         *
+         */
         function handleConnectionEstablished() {
             APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }
 
+        /**
+         *
+         */
         function handleConnectionFailed(err) {
             unsubscribe();
-            logger.error("CONNECTION FAILED:", err);
+            logger.error('CONNECTION FAILED:', err);
             reject(err);
         }
 
@@ -132,17 +149,17 @@ function connect(id, password, roomName) {
  *
  * @returns {Promise<JitsiConnection>}
  */
-export function openConnection({id, password, retry, roomName}) {
-    let usernameOverride
-        = jitsiLocalStorage.getItem("xmpp_username_override");
-    let passwordOverride
-        = jitsiLocalStorage.getItem("xmpp_password_override");
+export function openConnection({ id, password, retry, roomName }) {
+    const usernameOverride
+        = jitsiLocalStorage.getItem('xmpp_username_override');
+    const passwordOverride
+        = jitsiLocalStorage.getItem('xmpp_password_override');
 
     if (usernameOverride && usernameOverride.length > 0) {
-        id = usernameOverride;
+        id = usernameOverride; // eslint-disable-line no-param-reassign
     }
     if (passwordOverride && passwordOverride.length > 0) {
-        password = passwordOverride;
+        password = passwordOverride; // eslint-disable-line no-param-reassign
     }
 
     return connect(id, password, roomName).catch(err => {

index.html

@@ -72,9 +72,9 @@
                         + "font-size: medium;"
                         + "font-weight: 400;"
                         + "transform: translate(-50%, -50%)'>"
-                        + "Uh oh! We couldn't fully download everything we needed :(" // jshint ignore:line
+                        + "Uh oh! We couldn't fully download everything we needed :("
                         + "<br/> "
-                        + "We will try again shortly. In the mean time, check for problems with your Internet connection!" // jshint ignore:line
+                        + "We will try again shortly. In the mean time, check for problems with your Internet connection!"
                         + "<br/><br/> "
                         + "<div id='moreInfo' style='"
                         + "display: none;'>" + "Missing " + fileRef

interface_config.js

@@ -1,7 +1,9 @@
-var interfaceConfig = { // eslint-disable-line no-unused-vars
+/* eslint-disable no-unused-vars, no-var, max-len */
+var interfaceConfig = {
     // TO FIX: this needs to be handled from SASS variables. There are some
     // methods allowing to use variables both in css and js.
     DEFAULT_BACKGROUND: '#474747',
+
     /**
      * In case the desktop sharing is disabled through the config the button
      * will not be hidden, but displayed as disabled with this text us as
@@ -10,45 +12,53 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     DESKTOP_SHARING_BUTTON_DISABLED_TOOLTIP: null,
     INITIAL_TOOLBAR_TIMEOUT: 20000,
     TOOLBAR_TIMEOUT: 4000,
-    DEFAULT_REMOTE_DISPLAY_NAME: "Fellow Jitster",
-    DEFAULT_LOCAL_DISPLAY_NAME: "me",
+    DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',
+    DEFAULT_LOCAL_DISPLAY_NAME: 'me',
     SHOW_JITSI_WATERMARK: true,
-    JITSI_WATERMARK_LINK: "https://jitsi.org",
+    JITSI_WATERMARK_LINK: 'https://jitsi.org',
+
     // if watermark is disabled by default, it can be shown only for guests
     SHOW_WATERMARK_FOR_GUESTS: true,
     SHOW_BRAND_WATERMARK: false,
-    BRAND_WATERMARK_LINK: "",
+    BRAND_WATERMARK_LINK: '',
     SHOW_POWERED_BY: false,
     GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
-    APP_NAME: "Jitsi Meet",
-    LANG_DETECTION: false,    // Allow i18n to detect the system language
+    APP_NAME: 'Jitsi Meet',
+    LANG_DETECTION: false, // Allow i18n to detect the system language
     INVITATION_POWERED_BY: true,
+
     /**
      * If we should show authentication block in profile
      */
     AUTHENTICATION_ENABLE: true,
+
     /**
      * the toolbar buttons line is intentionally left in one line, to be able
      * to easily override values or remove them using regex
      */
     TOOLBAR_BUTTONS: [
-        //main toolbar
-        'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup', // jshint ignore:line
-        //extended toolbar
-        'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip'], // jshint ignore:line
+
+        // main toolbar
+        'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup',
+
+        // extended toolbar
+        'profile', 'contacts', 'info', 'chat', 'recording', 'etherpad', 'sharedvideo', 'settings', 'raisehand', 'videoquality', 'filmstrip' ],
+
     /**
      * Main Toolbar Buttons
      * All of them should be in TOOLBAR_BUTTONS
      */
-    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup'], // jshint ignore:line
-    SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
-    INVITE_OPTIONS: ['invite', 'dialout', 'addtocall'],
+    MAIN_TOOLBAR_BUTTONS: [ 'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'fodeviceselection', 'hangup' ],
+    SETTINGS_SECTIONS: [ 'language', 'devices', 'moderator' ],
+    INVITE_OPTIONS: [ 'invite', 'dialout', 'addtocall' ],
+
     // Determines how the video would fit the screen. 'both' would fit the whole
     // screen, 'height' would fit the original video height to the height of the
     // screen, 'width' would fit the original video width to the width of the
     // screen respecting ratio.
     VIDEO_LAYOUT_FIT: 'both',
     SHOW_CONTACTLIST_AVATARS: true,
+
     /**
      * Whether to only show the filmstrip (and hide the toolbar).
      */
@@ -59,11 +69,12 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      */
     VERTICAL_FILMSTRIP: true,
 
-    //A html text to be shown to guests on the close page, false disables it
+    // A html text to be shown to guests on the close page, false disables it
     CLOSE_PAGE_GUEST_HINT: false,
     RANDOM_AVATAR_URL_PREFIX: false,
     RANDOM_AVATAR_URL_SUFFIX: false,
     FILM_STRIP_MAX_HEIGHT: 120,
+
     // Enables feedback star animation.
     ENABLE_FEEDBACK_ANIMATION: false,
     DISABLE_FOCUS_INDICATOR: false,
@@ -76,13 +87,13 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      * @type {boolean}
      */
     DISABLE_RINGING: false,
-    AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
-    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+    AUDIO_LEVEL_PRIMARY_COLOR: 'rgba(255,255,255,0.4)',
+    AUDIO_LEVEL_SECONDARY_COLOR: 'rgba(255,255,255,0.2)',
     POLICY_LOGO: null,
-    LOCAL_THUMBNAIL_RATIO: 16/9, //16:9
-    REMOTE_THUMBNAIL_RATIO: 1, //1:1
+    LOCAL_THUMBNAIL_RATIO: 16 / 9, // 16:9
+    REMOTE_THUMBNAIL_RATIO: 1, // 1:1
     // Documentation reference for the live streaming feature.
-    LIVE_STREAMING_HELP_LINK: "https://jitsi.org/live",
+    LIVE_STREAMING_HELP_LINK: 'https://jitsi.org/live',
 
     /**
      * Whether the mobile app Jitsi Meet is to be promoted to participants
@@ -131,3 +142,4 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
      */
     // ADD_PEOPLE_APP_NAME: ""
 };
+/* eslint-enable no-unused-vars, no-var, max-len */

logging_config.js

@@ -1,10 +1,15 @@
+/* eslint-disable no-unused-vars, no-var */
 // Logging configuration
-var loggingConfig = { // eslint-disable-line no-unused-vars
-    //default log level for the app and lib-jitsi-meet
+var loggingConfig = {
+    // default log level for the app and lib-jitsi-meet
     defaultLogLevel: 'trace',
+
     // Option to disable LogCollector (which stores the logs on CallStats)
-    //disableLogCollector: true,
+    // disableLogCollector: true,
+
     // Logging level adjustments for verbose modules:
     'modules/xmpp/strophe.util.js': 'log',
     'modules/statistics/CallStats.js': 'info'
-};
+};
+
+/* eslint-enable no-unused-vars, no-var */

modules/FollowMe.js

@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import UIEvents from '../service/UI/UIEvents';
 import VideoLayout from './UI/videolayout/VideoLayout';
@@ -23,7 +23,7 @@ import VideoLayout from './UI/videolayout/VideoLayout';
  * {State} for the local state at the time of this writing) of a {FollowMe}
  * (instance) between participants.
  */
-const _COMMAND = "follow-me";
+const _COMMAND = 'follow-me';
 
 /**
  * The timeout after which a follow-me command that has been received will be
@@ -50,34 +50,61 @@ class State {
      * the property, the old value of the property before the change, and the
      * new value of the property after the change.
      */
-    constructor (propertyChangeCallback) {
+    constructor(propertyChangeCallback) {
         this._propertyChangeCallback = propertyChangeCallback;
     }
 
-    get filmstripVisible () { return this._filmstripVisible; }
+    /**
+     *
+     */
+    get filmstripVisible() {
+        return this._filmstripVisible;
+    }
+
+    /**
+     *
+     */
+    set filmstripVisible(b) {
+        const oldValue = this._filmstripVisible;
 
-    set filmstripVisible (b) {
-        var oldValue = this._filmstripVisible;
         if (oldValue !== b) {
             this._filmstripVisible = b;
             this._firePropertyChange('filmstripVisible', oldValue, b);
         }
     }
 
-    get nextOnStage() { return this._nextOnStage; }
+    /**
+     *
+     */
+    get nextOnStage() {
+        return this._nextOnStage;
+    }
 
+    /**
+     *
+     */
     set nextOnStage(id) {
-        var oldValue = this._nextOnStage;
+        const oldValue = this._nextOnStage;
+
         if (oldValue !== id) {
             this._nextOnStage = id;
             this._firePropertyChange('nextOnStage', oldValue, id);
         }
     }
 
-    get sharedDocumentVisible () { return this._sharedDocumentVisible; }
+    /**
+     *
+     */
+    get sharedDocumentVisible() {
+        return this._sharedDocumentVisible;
+    }
+
+    /**
+     *
+     */
+    set sharedDocumentVisible(b) {
+        const oldValue = this._sharedDocumentVisible;
 
-    set sharedDocumentVisible (b) {
-        var oldValue = this._sharedDocumentVisible;
         if (oldValue !== b) {
             this._sharedDocumentVisible = b;
             this._firePropertyChange('sharedDocumentVisible', oldValue, b);
@@ -93,10 +120,12 @@ class State {
      * @param oldValue the value of {property} before the change
      * @param newValue the value of {property} after the change
      */
-    _firePropertyChange (property, oldValue, newValue) {
-        var propertyChangeCallback = this._propertyChangeCallback;
-        if (propertyChangeCallback)
+    _firePropertyChange(property, oldValue, newValue) {
+        const propertyChangeCallback = this._propertyChangeCallback;
+
+        if (propertyChangeCallback) {
             propertyChangeCallback(property, oldValue, newValue);
+        }
     }
 }
 
@@ -118,7 +147,7 @@ class FollowMe {
      * destination (model/state) to receive from the remote moderator if the
      * local participant is not the moderator
      */
-    constructor (conference, UI) {
+    constructor(conference, UI) {
         this._conference = conference;
         this._UI = UI;
         this.nextOnStageTimer = 0;
@@ -150,9 +179,10 @@ class FollowMe {
         this._nextOnStage(pinnedId, Boolean(pinnedId));
 
         // check whether shared document is enabled/initialized
-        if(this._UI.getSharedDocumentManager())
+        if (this._UI.getSharedDocumentManager()) {
             this._sharedDocumentToggled
                 .bind(this, this._UI.getSharedDocumentManager().isVisible());
+        }
     }
 
     /**
@@ -162,20 +192,21 @@ class FollowMe {
      * the states of interest.
      * @private
      */
-    _addFollowMeListeners () {
+    _addFollowMeListeners() {
         this.filmstripEventHandler = this._filmstripToggled.bind(this);
         this._UI.addListener(UIEvents.TOGGLED_FILMSTRIP,
                             this.filmstripEventHandler);
 
-        var self = this;
-        this.pinnedEndpointEventHandler = function (videoId, isPinned) {
+        const self = this;
+
+        this.pinnedEndpointEventHandler = function(videoId, isPinned) {
             self._nextOnStage(videoId, isPinned);
         };
         this._UI.addListener(UIEvents.PINNED_ENDPOINT,
                             this.pinnedEndpointEventHandler);
 
         this.sharedDocEventHandler = this._sharedDocumentToggled.bind(this);
-        this._UI.addListener( UIEvents.TOGGLED_SHARED_DOCUMENT,
+        this._UI.addListener(UIEvents.TOGGLED_SHARED_DOCUMENT,
                             this.sharedDocEventHandler);
     }
 
@@ -183,7 +214,7 @@ class FollowMe {
      * Removes all follow me listeners.
      * @private
      */
-    _removeFollowMeListeners () {
+    _removeFollowMeListeners() {
         this._UI.removeListener(UIEvents.TOGGLED_FILMSTRIP,
                                 this.filmstripEventHandler);
         this._UI.removeListener(UIEvents.TOGGLED_SHARED_DOCUMENT,
@@ -198,13 +229,13 @@ class FollowMe {
      * @param enable {true} to enable the follow me functionality, {false} -
      * to disable it
      */
-    enableFollowMe (enable) {
+    enableFollowMe(enable) {
         if (enable) {
             this._setFollowMeInitialState();
             this._addFollowMeListeners();
-        }
-        else
+        } else {
             this._removeFollowMeListeners();
+        }
     }
 
     /**
@@ -214,7 +245,7 @@ class FollowMe {
      * @param filmstripVisible {Boolean} {true} if the filmstrip was shown (as a
      * result of the toggle) or {false} if the filmstrip was hidden
      */
-    _filmstripToggled (filmstripVisible) {
+    _filmstripToggled(filmstripVisible) {
         this._local.filmstripVisible = filmstripVisible;
     }
 
@@ -225,7 +256,7 @@ class FollowMe {
      * @param sharedDocumentVisible {Boolean} {true} if the shared document was
      * shown (as a result of the toggle) or {false} if it was hidden
      */
-    _sharedDocumentToggled (sharedDocumentVisible) {
+    _sharedDocumentToggled(sharedDocumentVisible) {
         this._local.sharedDocumentVisible = sharedDocumentVisible;
     }
 
@@ -237,13 +268,16 @@ class FollowMe {
      * unpinned
      * @private
      */
-    _nextOnStage (videoId, isPinned) {
-        if (!this._conference.isModerator)
+    _nextOnStage(videoId, isPinned) {
+        if (!this._conference.isModerator) {
             return;
+        }
+
+        let nextOnStage = null;
 
-        var nextOnStage = null;
-        if(isPinned)
+        if (isPinned) {
             nextOnStage = videoId;
+        }
 
         this._local.nextOnStage = nextOnStage;
     }
@@ -251,24 +285,25 @@ class FollowMe {
     /**
      * Sends the follow-me command, when a local property change occurs.
      *
-     * @param property the property name
-     * @param oldValue the old value
-     * @param newValue the new value
      * @private
      */
-    // eslint-disable-next-line no-unused-vars
-    _localPropertyChange (property, oldValue, newValue) {
+    _localPropertyChange() { // eslint-disable-next-line no-unused-vars
         // Only a moderator is allowed to send commands.
         const conference = this._conference;
-        if (!conference.isModerator)
+
+        if (!conference.isModerator) {
             return;
+        }
 
         const commands = conference.commands;
+
         // XXX The "Follow Me" command represents a snapshot of all states
         // which are to be followed so don't forget to removeCommand before
         // sendCommand!
+
         commands.removeCommand(_COMMAND);
         const local = this._local;
+
         commands.sendCommandOnce(
                 _COMMAND,
                 {
@@ -289,22 +324,24 @@ class FollowMe {
      * notable idiosyncrasy of the Command(s) API to be mindful of here is that
      * the command may be issued by the local participant.
      */
-    _onFollowMeCommand ({ attributes }, id) {
+    _onFollowMeCommand({ attributes }, id) {
         // We require to know who issued the command because (1) only a
         // moderator is allowed to send commands and (2) a command MUST be
         // issued by a defined commander.
-        if (typeof id === 'undefined')
+        if (typeof id === 'undefined') {
             return;
+        }
 
         // The Command(s) API will send us our own commands and we don't want
         // to act upon them.
-        if (this._conference.isLocalId(id))
+        if (this._conference.isLocalId(id)) {
             return;
+        }
+
+        if (!this._conference.isParticipantModerator(id)) {
+            logger.warn('Received follow-me command '
+                + 'not from moderator');
 
-        if (!this._conference.isParticipantModerator(id))
-        {
-            logger.warn('Received follow-me command ' +
-                'not from moderator');
             return;
         }
 
@@ -328,14 +365,16 @@ class FollowMe {
             // attributes, at least) at the time of this writing so take into
             // account that what originated as a Boolean may be a String on
             // receipt.
-            filmstripVisible = (filmstripVisible == 'true');
+            // eslint-disable-next-line eqeqeq, no-param-reassign
+            filmstripVisible = filmstripVisible == 'true';
 
             // FIXME The UI (module) very likely doesn't (want to) expose its
             // eventEmitter as a public field. I'm not sure at the time of this
             // writing whether calling UI.toggleFilmstrip() is acceptable (from
             // a design standpoint) either.
-            if (filmstripVisible !== this._UI.isFilmstripVisible())
+            if (filmstripVisible !== this._UI.isFilmstripVisible()) {
                 this._UI.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
+            }
         }
     }
 
@@ -347,22 +386,24 @@ class FollowMe {
      * @private
      */
     _onNextOnStage(id) {
-        var clickId = null;
-        var pin;
+        let clickId = null;
+        let pin;
+
         // if there is an id which is not pinned we schedule it for pin only the
         // first time
-        if(typeof id !== 'undefined' && !VideoLayout.isPinned(id)) {
+
+        if (typeof id !== 'undefined' && !VideoLayout.isPinned(id)) {
             clickId = id;
             pin = true;
-        }
-        // if there is no id, but we have a pinned one, let's unpin
-        else if (typeof id == 'undefined' && VideoLayout.getPinnedId()) {
+        } else if (typeof id === 'undefined' && VideoLayout.getPinnedId()) {
+            // if there is no id, but we have a pinned one, let's unpin
             clickId = VideoLayout.getPinnedId();
             pin = false;
         }
 
-        if (clickId)
+        if (clickId) {
             this._pinVideoThumbnailById(clickId, pin);
+        }
     }
 
     /**
@@ -378,11 +419,13 @@ class FollowMe {
             // attributes, at least) at the time of this writing so take into
             // account that what originated as a Boolean may be a String on
             // receipt.
-            sharedDocumentVisible = (sharedDocumentVisible == 'true');
+            // eslint-disable-next-line eqeqeq, no-param-reassign
+            sharedDocumentVisible = sharedDocumentVisible == 'true';
 
             if (sharedDocumentVisible
-                !== this._UI.getSharedDocumentManager().isVisible())
+                !== this._UI.getSharedDocumentManager().isVisible()) {
                 this._UI.getSharedDocumentManager().toggleEtherpad();
+            }
         }
     }
 
@@ -394,27 +437,31 @@ class FollowMe {
      * @private
      */
     _pinVideoThumbnailById(clickId, pin) {
-        var self = this;
-        var smallVideo = VideoLayout.getSmallVideo(clickId);
+        const self = this;
+        const smallVideo = VideoLayout.getSmallVideo(clickId);
 
         // If the SmallVideo for the given clickId exists we proceed with the
         // pin/unpin.
         if (smallVideo) {
             this.nextOnStageTimer = 0;
             clearTimeout(this.nextOnStageTimout);
+            /* eslint-disable no-mixed-operators */
             if (pin && !VideoLayout.isPinned(clickId)
-                || !pin && VideoLayout.isPinned(clickId))
+                || !pin && VideoLayout.isPinned(clickId)) {
+                /* eslint-disable no-mixed-operators */
                 VideoLayout.handleVideoThumbClicked(clickId);
-        }
-        // If there's no SmallVideo object for the given id, lets wait and see
-        // if it's going to be created in the next 30sec.
-        else {
-            this.nextOnStageTimout = setTimeout(function () {
+            }
+        } else {
+            // If there's no SmallVideo object for the given id, lets wait and
+            // see if it's going to be created in the next 30sec.
+            this.nextOnStageTimout = setTimeout(function() {
                 if (self.nextOnStageTimer > _FOLLOW_ME_RECEIVED_TIMEOUT) {
                     self.nextOnStageTimer = 0;
+
                     return;
                 }
 
+                // eslint-disable-next-line no-invalid-this
                 this.nextOnStageTimer++;
                 self._pinVideoThumbnailById(clickId, pin);
             }, 1000);

modules/UI/UIErrors.js

@@ -7,4 +7,4 @@
  *
  * @type {{FEEDBACK_REQUEST_IN_PROGRESS: string}}
  */
-export const FEEDBACK_REQUEST_IN_PROGRESS = "FeedbackRequestInProgress";
+export const FEEDBACK_REQUEST_IN_PROGRESS = 'FeedbackRequestInProgress';

modules/UI/audio_levels/AudioLevels.js

@@ -1,6 +1,6 @@
 /* global interfaceConfig */
 
-import UIUtil from "../util/UIUtil";
+import UIUtil from '../util/UIUtil';
 
 /**
  * Responsible for drawing audio levels.
@@ -19,29 +19,31 @@ const AudioLevels = {
     _setDotLevel(elementID, index, opacity) {
         let audioSpan
             = document.getElementById(elementID)
-                .getElementsByClassName("audioindicator");
+                .getElementsByClassName('audioindicator');
 
         // Make sure the audio span is still around.
-        if (audioSpan && audioSpan.length > 0)
+        if (audioSpan && audioSpan.length > 0) {
             audioSpan = audioSpan[0];
-        else
+        } else {
             return;
+        }
 
-        let audioTopDots
-            = audioSpan.getElementsByClassName("audiodot-top");
-        let audioDotMiddle
-            = audioSpan.getElementsByClassName("audiodot-middle");
-        let audioBottomDots
-            = audioSpan.getElementsByClassName("audiodot-bottom");
+        const audioTopDots
+            = audioSpan.getElementsByClassName('audiodot-top');
+        const audioDotMiddle
+            = audioSpan.getElementsByClassName('audiodot-middle');
+        const audioBottomDots
+            = audioSpan.getElementsByClassName('audiodot-bottom');
 
         // First take care of the middle dot case.
-        if (index === 0){
+        if (index === 0) {
             audioDotMiddle[0].style.opacity = opacity;
+
             return;
         }
 
         // Index > 0 : we are setting non-middle dots.
-        index--;
+        index--;// eslint-disable-line no-param-reassign
         audioBottomDots[index].style.opacity = opacity;
         audioTopDots[this.sideDotsCount - index - 1].style.opacity = opacity;
     },
@@ -52,19 +54,21 @@ const AudioLevels = {
      * @param audioLevel the new audio level to set.
      */
     updateLargeVideoAudioLevel(elementId, audioLevel) {
-        let element = document.getElementById(elementId);
+        const element = document.getElementById(elementId);
 
-        if(!UIUtil.isVisible(element))
+        if (!UIUtil.isVisible(element)) {
             return;
+        }
 
         let level = parseFloat(audioLevel);
 
         level = isNaN(level) ? 0 : level;
 
-        let shadowElement = element.getElementsByClassName("dynamic-shadow");
+        let shadowElement = element.getElementsByClassName('dynamic-shadow');
 
-        if (shadowElement && shadowElement.length > 0)
+        if (shadowElement && shadowElement.length > 0) {
             shadowElement = shadowElement[0];
+        }
 
         shadowElement.style.boxShadow = this._updateLargeVideoShadow(level);
     },
@@ -83,7 +87,7 @@ const AudioLevels = {
 
         // External circle audio level.
         const ext = {
-            level: (int.level * scale * level + int.level).toFixed(0),
+            level: ((int.level * scale * level) + int.level).toFixed(0),
             color: interfaceConfig.AUDIO_LEVEL_SECONDARY_COLOR
         };
 
@@ -94,8 +98,8 @@ const AudioLevels = {
         ext.blur = ext.level ? 6 : 0;
 
         return [
-            `0 0 ${ int.blur }px ${ int.level }px ${ int.color }`,
-            `0 0 ${ ext.blur }px ${ ext.level }px ${ ext.color }`
+            `0 0 ${int.blur}px ${int.level}px ${int.color}`,
+            `0 0 ${ext.blur}px ${ext.level}px ${ext.color}`
         ].join(', ');
     }
 };

modules/UI/authentication/AuthHandler.js

@@ -9,14 +9,14 @@ import UIUtil from '../util/UIUtil';
 
 import LoginDialog from './LoginDialog';
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 let externalAuthWindow;
 let authRequiredDialog;
 
-let isTokenAuthEnabled
-    = typeof config.tokenAuthUrl === "string" && config.tokenAuthUrl.length;
-let getTokenAuthUrl
+const isTokenAuthEnabled
+    = typeof config.tokenAuthUrl === 'string' && config.tokenAuthUrl.length;
+const getTokenAuthUrl
     = JitsiMeetJS.util.AuthUtil.getTokenAuthUrl.bind(null, config.tokenAuthUrl);
 
 /**
@@ -26,23 +26,25 @@ let getTokenAuthUrl
  * @param {JitsiConference} room
  * @param {string} [lockPassword] password to use if the conference is locked
  */
-function doExternalAuth (room, lockPassword) {
+function doExternalAuth(room, lockPassword) {
     if (externalAuthWindow) {
         externalAuthWindow.focus();
+
         return;
     }
     if (room.isJoined()) {
         let getUrl;
+
         if (isTokenAuthEnabled) {
             getUrl = Promise.resolve(getTokenAuthUrl(room.getName(), true));
             initJWTTokenListener(room);
         } else {
             getUrl = room.getExternalAuthUrl(true);
         }
-        getUrl.then(function (url) {
+        getUrl.then(url => {
             externalAuthWindow = LoginDialog.showExternalAuthDialog(
                 url,
-                function () {
+                () => {
                     externalAuthWindow = null;
                     if (!isTokenAuthEnabled) {
                         room.join(lockPassword);
@@ -50,14 +52,10 @@ function doExternalAuth (room, lockPassword) {
                 }
             );
         });
+    } else if (isTokenAuthEnabled) {
+        redirectToTokenAuthService(room.getName());
     } else {
-        // If conference has not been started yet
-        // then  redirect to login page
-        if (isTokenAuthEnabled) {
-            redirectToTokenAuthService(room.getName());
-        } else {
-            room.getExternalAuthUrl().then(UIUtil.redirect);
-        }
+        room.getExternalAuthUrl().then(UIUtil.redirect);
     }
 }
 
@@ -77,61 +75,80 @@ function redirectToTokenAuthService(roomName) {
  * @param room the name fo the conference room.
  */
 function initJWTTokenListener(room) {
-    var listener = function ({ data, source }) {
+    /**
+     *
+     */
+    function listener({ data, source }) {
         if (externalAuthWindow !== source) {
-            logger.warn("Ignored message not coming " +
-                "from external authnetication window");
+            logger.warn('Ignored message not coming '
+                + 'from external authnetication window');
+
             return;
         }
 
         let jwt;
 
         if (data && (jwt = data.jwtToken)) {
-            logger.info("Received JSON Web Token (JWT):", jwt);
+            logger.info('Received JSON Web Token (JWT):', jwt);
 
             APP.store.dispatch(setJWT(jwt));
 
-            var roomName = room.getName();
-            openConnection({retry: false, roomName: roomName })
-                .then(function (connection) {
-                    // Start new connection
-                    let newRoom = connection.initJitsiConference(
-                        roomName, APP.conference._getConferenceOptions());
-                    // Authenticate from the new connection to get
-                    // the session-ID from the focus, which wil then be used
-                    // to upgrade current connection's user role
-                    newRoom.room.moderator.authenticate().then(function () {
-                        connection.disconnect();
-                        // At this point we'll have session-ID stored in
-                        // the settings. It wil be used in the call below
-                        // to upgrade user's role
-                        room.room.moderator.authenticate()
-                            .then(function () {
-                                logger.info("User role upgrade done !");
-                                unregister();
-                            }).catch(function (err, errCode) {
-                                logger.error(
-                                    "Authentication failed: ", err, errCode);
-                                unregister();
-                            });
-                    }).catch(function (error, code) {
-                        unregister();
-                        connection.disconnect();
-                        logger.error(
-                            'Authentication failed on the new connection',
-                            error, code);
-                    });
-                }, function (err) {
+            const roomName = room.getName();
+
+            openConnection({
+                retry: false,
+                roomName
+            }).then(connection => {
+                // Start new connection
+                const newRoom = connection.initJitsiConference(
+                    roomName, APP.conference._getConferenceOptions());
+
+                // Authenticate from the new connection to get
+                // the session-ID from the focus, which wil then be used
+                // to upgrade current connection's user role
+
+                newRoom.room.moderator.authenticate()
+                .then(() => {
+                    connection.disconnect();
+
+                    // At this point we'll have session-ID stored in
+                    // the settings. It wil be used in the call below
+                    // to upgrade user's role
+                    room.room.moderator.authenticate()
+                        .then(() => {
+                            logger.info('User role upgrade done !');
+                            // eslint-disable-line no-use-before-define
+                            unregister();
+                        })
+                        .catch((err, errCode) => {
+                            logger.error('Authentication failed: ',
+                                err, errCode);
+                            unregister();
+                        });
+                })
+                .catch((error, code) => {
                     unregister();
-                    logger.error("Failed to open new connection", err);
+                    connection.disconnect();
+                    logger.error(
+                        'Authentication failed on the new connection',
+                        error, code);
                 });
+            }, err => {
+                unregister();
+                logger.error('Failed to open new connection', err);
+            });
         }
-    };
-    var unregister = function () {
-        window.removeEventListener("message", listener);
-    };
+    }
+
+    /**
+     *
+     */
+    function unregister() {
+        window.removeEventListener('message', listener);
+    }
+
     if (window.addEventListener) {
-        window.addEventListener("message", listener, false);
+        window.addEventListener('message', listener, false);
     }
 }
 
@@ -183,7 +200,7 @@ function doXmppAuth(room, lockPassword) {
  * @param {JitsiConference} room
  * @param {string} [lockPassword] password to use if the conference is locked
  */
-function authenticate (room, lockPassword) {
+function authenticate(room, lockPassword) {
     if (isTokenAuthEnabled || room.isExternalAuthEnabled()) {
         doExternalAuth(room, lockPassword);
     } else {
@@ -198,10 +215,10 @@ function authenticate (room, lockPassword) {
  * @param {string} [lockPassword] password to use if the conference is locked
  * @returns {Promise}
  */
-function logout (room) {
-    return new Promise(function (resolve) {
+function logout(room) {
+    return new Promise(resolve => {
         room.room.moderator.logout(resolve);
-    }).then(function (url) {
+    }).then(url => {
         // de-authenticate conference on the fly
         if (room.isJoined()) {
             room.join();
@@ -241,14 +258,17 @@ function closeAuth() {
     }
 }
 
+/**
+ *
+ */
 function showXmppPasswordPrompt(roomName, connect) {
-    return new Promise(function (resolve, reject) {
-        let authDialog = LoginDialog.showAuthDialog(
-            function (id, password) {
-                connect(id, password, roomName).then(function (connection) {
+    return new Promise((resolve, reject) => {
+        const authDialog = LoginDialog.showAuthDialog(
+            (id, password) => {
+                connect(id, password, roomName).then(connection => {
                     authDialog.close();
                     resolve(connection);
-                }, function (err) {
+                }, err => {
                     if (err === JitsiConnectionErrors.PASSWORD_REQUIRED) {
                         authDialog.displayError(err);
                     } else {
@@ -275,9 +295,10 @@ function requestAuth(roomName, connect) {
     if (isTokenAuthEnabled) {
         // This Promise never resolves as user gets redirected to another URL
         return new Promise(() => redirectToTokenAuthService(roomName));
-    } else {
-        return showXmppPasswordPrompt(roomName, connect);
     }
+
+    return showXmppPasswordPrompt(roomName, connect);
+
 }
 
 export default {

modules/UI/authentication/LoginDialog.js

@@ -10,9 +10,9 @@ import {
  * @returns {string} html string
  */
 function getPasswordInputHtml() {
-    let placeholder = config.hosts.authdomain
-        ? "user identity"
-        : "user@domain.net";
+    const placeholder = config.hosts.authdomain
+        ? 'user identity'
+        : 'user@domain.net';
 
     return `
         <input name="username" type="text"
@@ -29,7 +29,7 @@ function getPasswordInputHtml() {
  */
 function cancelButton() {
     return {
-        title: APP.translation.generateTranslationHTML("dialog.Cancel"),
+        title: APP.translation.generateTranslationHTML('dialog.Cancel'),
         value: false
     };
 }
@@ -46,14 +46,14 @@ function cancelButton() {
  * @param {function} [cancelCallback] callback to invoke if user canceled.
  */
 function LoginDialog(successCallback, cancelCallback) {
-    let loginButtons = [{
-        title: APP.translation.generateTranslationHTML("dialog.Ok"),
+    const loginButtons = [ {
+        title: APP.translation.generateTranslationHTML('dialog.Ok'),
         value: true
-    }];
-    let finishedButtons = [{
+    } ];
+    const finishedButtons = [ {
         title: APP.translation.generateTranslationHTML('dialog.retry'),
         value: 'retry'
-    }];
+    } ];
 
     // show "cancel" button only if cancelCallback provided
     if (cancelCallback) {
@@ -61,17 +61,28 @@ function LoginDialog(successCallback, cancelCallback) {
         finishedButtons.push(cancelButton());
     }
 
+    const connDialog = APP.UI.messageHandler.openDialogWithStates(
+        states, // eslint-disable-line no-use-before-define
+        {
+            persistent: true,
+            closeText: ''
+        },
+        null
+    );
+
     const states = {
         login: {
             titleKey: 'dialog.passwordRequired',
             html: getPasswordInputHtml(),
             buttons: loginButtons,
             focus: ':input:first',
-            submit: function (e, v, m, f) {
+            // eslint-disable-next-line max-params
+            submit(e, v, m, f) {
                 e.preventDefault();
                 if (v) {
-                    let jid = f.username;
-                    let password = f.password;
+                    const jid = f.username;
+                    const password = f.password;
+
                     if (jid && password) {
                         connDialog.goToState('connecting');
                         successCallback(toJid(jid, config.hosts), password);
@@ -84,16 +95,16 @@ function LoginDialog(successCallback, cancelCallback) {
         },
         connecting: {
             titleKey: 'dialog.connecting',
-            html:   '<div id="connectionStatus"></div>',
+            html: '<div id="connectionStatus"></div>',
             buttons: [],
             defaultButton: 0
         },
         finished: {
             titleKey: 'dialog.error',
-            html:   '<div id="errorMessage"></div>',
+            html: '<div id="errorMessage"></div>',
             buttons: finishedButtons,
             defaultButton: 0,
-            submit: function (e, v) {
+            submit(e, v) {
                 e.preventDefault();
                 if (v === 'retry') {
                     connDialog.goToState('login');
@@ -105,38 +116,35 @@ function LoginDialog(successCallback, cancelCallback) {
         }
     };
 
-    var connDialog = APP.UI.messageHandler.openDialogWithStates(
-        states, { persistent: true, closeText: '' }, null
-    );
-
     /**
      * Displays error message in 'finished' state which allows either to cancel
      * or retry.
      * @param error the key to the error to be displayed.
      * @param options the options to the error message (optional)
      */
-    this.displayError = function (error, options) {
+    this.displayError = function(error, options) {
 
-        let finishedState = connDialog.getState('finished');
+        const finishedState = connDialog.getState('finished');
 
-        let errorMessageElem = finishedState.find('#errorMessage');
+        const errorMessageElem = finishedState.find('#errorMessage');
 
         let messageKey;
+
         if (error === JitsiConnectionErrors.PASSWORD_REQUIRED) {
             // this is a password required error, as login window was already
             // open once, this means username or password is wrong
             messageKey = 'dialog.incorrectPassword';
-        }
-        else {
+        } else {
             messageKey = 'dialog.connectErrorWithMsg';
 
-            if (!options)
-                options = {};
+            if (!options) {
+                options = {};// eslint-disable-line no-param-reassign
+            }
 
             options.msg = error;
         }
 
-        errorMessageElem.attr("data-i18n", messageKey);
+        errorMessageElem.attr('data-i18n', messageKey);
 
         APP.translation.translateElement($(errorMessageElem), options);
 
@@ -147,18 +155,19 @@ function LoginDialog(successCallback, cancelCallback) {
      *  Show message as connection status.
      * @param {string} messageKey the key to the message
      */
-    this.displayConnectionStatus = function (messageKey) {
-        let connectingState = connDialog.getState('connecting');
+    this.displayConnectionStatus = function(messageKey) {
+        const connectingState = connDialog.getState('connecting');
 
-        let connectionStatus = connectingState.find('#connectionStatus');
-        connectionStatus.attr("data-i18n", messageKey);
+        const connectionStatus = connectingState.find('#connectionStatus');
+
+        connectionStatus.attr('data-i18n', messageKey);
         APP.translation.translateElement($(connectionStatus));
     };
 
     /**
      * Closes LoginDialog.
      */
-    this.close = function () {
+    this.close = function() {
         connDialog.close();
     };
 }
@@ -173,7 +182,7 @@ export default {
      *
      * @returns {LoginDialog}
      */
-    showAuthDialog: function (successCallback, cancelCallback) {
+    showAuthDialog(successCallback, cancelCallback) {
         return new LoginDialog(successCallback, cancelCallback);
     },
 
@@ -183,15 +192,16 @@ export default {
      * @param {function} callback callback to invoke when auth popup is closed.
      * @returns auth dialog
      */
-    showExternalAuthDialog: function (url, callback) {
-        var dialog = APP.UI.messageHandler.openCenteredPopup(
+    showExternalAuthDialog(url, callback) {
+        const dialog = APP.UI.messageHandler.openCenteredPopup(
             url, 910, 660,
+
             // On closed
             callback
         );
 
         if (!dialog) {
-            APP.UI.messageHandler.openMessageDialog(null, "dialog.popupError");
+            APP.UI.messageHandler.openMessageDialog(null, 'dialog.popupError');
         }
 
         return dialog;
@@ -215,10 +225,10 @@ export default {
         const buttonTxt = APP.translation.generateTranslationHTML(
             'dialog.IamHost'
         );
-        const buttons = [{
+        const buttons = [ {
             title: buttonTxt,
             value: 'authNow'
-        }];
+        } ];
 
         return APP.UI.messageHandler.openDialog(
             'dialog.WaitingForHost',

modules/UI/avatar/Avatar.js

@@ -25,7 +25,7 @@
 
 import { getAvatarURL } from '../../../react/features/base/participants';
 
-let users = {};
+const users = {};
 
 export default {
     /**
@@ -34,17 +34,19 @@ export default {
      * @param prop {string} name of the prop
      * @param val {string} value to be set
      */
-    _setUserProp: function (id, prop, val) {
+    _setUserProp(id, prop, val) {
         // FIXME: Fixes the issue with not be able to return avatar for the
         // local user when the conference has been left. Maybe there is beter
         // way to solve it.
-        if(!id || APP.conference.isLocalId(id)) {
-            id = "local";
+        if (!id || APP.conference.isLocalId(id)) {
+            id = 'local';// eslint-disable-line no-param-reassign
         }
-        if(!val || (users[id] && users[id][prop] === val))
+        if (!val || (users[id] && users[id][prop] === val)) {
             return;
-        if(!users[id])
+        }
+        if (!users[id]) {
             users[id] = {};
+        }
         users[id][prop] = val;
     },
 
@@ -54,8 +56,8 @@ export default {
      * @param id id of the user
      * @param email email or nickname to be used as a hash
      */
-    setUserEmail: function (id, email) {
-        this._setUserProp(id, "email", email);
+    setUserEmail(id, email) {
+        this._setUserProp(id, 'email', email);
     },
 
     /**
@@ -64,8 +66,8 @@ export default {
      * @param id id of the user
      * @param url the url for the avatar
      */
-    setUserAvatarUrl: function (id, url) {
-        this._setUserProp(id, "avatarUrl", url);
+    setUserAvatarUrl(id, url) {
+        this._setUserProp(id, 'avatarUrl', url);
     },
 
     /**
@@ -73,8 +75,8 @@ export default {
      * @param id id of the user
      * @param avatarId an id to be used for the avatar
      */
-    setUserAvatarID: function (id, avatarId) {
-        this._setUserProp(id, "avatarId", avatarId);
+    setUserAvatarID(id, avatarId) {
+        this._setUserProp(id, 'avatarId', avatarId);
     },
 
     /**
@@ -82,10 +84,12 @@ export default {
      * identified by its id.
      * @param {string} userId user id
      */
-    getAvatarUrl: function (userId) {
+    getAvatarUrl(userId) {
         let user;
+
         if (!userId || APP.conference.isLocalId(userId)) {
             user = users.local;
+            // eslint-disable-next-line no-param-reassign
             userId = APP.conference.getMyUserId();
         } else {
             user = users[userId];

modules/UI/etherpad/Etherpad.js

@@ -1,8 +1,8 @@
 /* global $ */
 
-import VideoLayout from "../videolayout/VideoLayout";
+import VideoLayout from '../videolayout/VideoLayout';
 import LargeContainer from '../videolayout/LargeContainer';
-import UIEvents from "../../../service/UI/UIEvents";
+import UIEvents from '../../../service/UI/UIEvents';
 import Filmstrip from '../videolayout/Filmstrip';
 
 /**
@@ -15,14 +15,21 @@ const options = $.param({
     useMonospaceFont: false
 });
 
-function bubbleIframeMouseMove(iframe){
-    var existingOnMouseMove = iframe.contentWindow.onmousemove;
-    iframe.contentWindow.onmousemove = function(e){
-        if(existingOnMouseMove) existingOnMouseMove(e);
-        var evt = document.createEvent("MouseEvents");
-        var boundingClientRect = iframe.getBoundingClientRect();
+/**
+ *
+ */
+function bubbleIframeMouseMove(iframe) {
+    const existingOnMouseMove = iframe.contentWindow.onmousemove;
+
+    iframe.contentWindow.onmousemove = function(e) {
+        if (existingOnMouseMove) {
+            existingOnMouseMove(e);
+        }
+        const evt = document.createEvent('MouseEvents');
+        const boundingClientRect = iframe.getBoundingClientRect();
+
         evt.initMouseEvent(
-            "mousemove",
+            'mousemove',
             true, // bubbles
             false, // not cancelable
             window,
@@ -46,27 +53,30 @@ function bubbleIframeMouseMove(iframe){
  * Default Etherpad frame width.
  */
 const DEFAULT_WIDTH = 640;
+
 /**
  * Default Etherpad frame height.
  */
 const DEFAULT_HEIGHT = 480;
 
-const ETHERPAD_CONTAINER_TYPE = "etherpad";
+const ETHERPAD_CONTAINER_TYPE = 'etherpad';
 
 /**
  * Container for Etherpad iframe.
  */
 class Etherpad extends LargeContainer {
-
-    constructor (domain, name) {
+    /**
+     * Creates new Etherpad object
+     */
+    constructor(domain, name) {
         super();
 
         const iframe = document.createElement('iframe');
 
-        iframe.id = "etherpadIFrame";
-        iframe.src = domain + name + '?' + options;
+        iframe.id = 'etherpadIFrame';
+        iframe.src = `${domain + name}?${options}`;
         iframe.frameBorder = 0;
-        iframe.scrolling = "no";
+        iframe.scrolling = 'no';
         iframe.width = DEFAULT_WIDTH;
         iframe.height = DEFAULT_HEIGHT;
         iframe.setAttribute('style', 'visibility: hidden;');
@@ -77,15 +87,17 @@ class Etherpad extends LargeContainer {
             document.domain = document.domain;
             bubbleIframeMouseMove(iframe);
 
-            setTimeout(function() {
+            setTimeout(() => {
                 const doc = iframe.contentDocument;
 
                 // the iframes inside of the etherpad are
                 // not yet loaded when the etherpad iframe is loaded
-                const outer = doc.getElementsByName("ace_outer")[0];
+                const outer = doc.getElementsByName('ace_outer')[0];
+
                 bubbleIframeMouseMove(outer);
 
-                const inner = doc.getElementsByName("ace_inner")[0];
+                const inner = doc.getElementsByName('ace_inner')[0];
+
                 bubbleIframeMouseMove(inner);
             }, 2000);
         };
@@ -93,47 +105,64 @@ class Etherpad extends LargeContainer {
         this.iframe = iframe;
     }
 
-    get isOpen () {
-        return !!this.iframe;
+    /**
+     *
+     */
+    get isOpen() {
+        return Boolean(this.iframe);
     }
 
-    get container () {
+    /**
+     *
+     */
+    get container() {
         return document.getElementById('etherpad');
     }
 
-    // eslint-disable-next-line no-unused-vars
-    resize (containerWidth, containerHeight, animate) {
-        let height = containerHeight - Filmstrip.getFilmstripHeight();
-        let width = containerWidth;
+    /**
+     *
+     */
+    resize(containerWidth, containerHeight) {
+        const height = containerHeight - Filmstrip.getFilmstripHeight();
+        const width = containerWidth;
 
-        $(this.iframe).width(width).height(height);
+        $(this.iframe)
+            .width(width)
+            .height(height);
     }
 
-    show () {
+    /**
+     *
+     */
+    show() {
         const $iframe = $(this.iframe);
         const $container = $(this.container);
-        let self = this;
+        const self = this;
 
         return new Promise(resolve => {
-            $iframe.fadeIn(300, function () {
+            $iframe.fadeIn(300, () => {
                 self.bodyBackground = document.body.style.background;
                 document.body.style.background = '#eeeeee';
-                $iframe.css({visibility: 'visible'});
-                $container.css({zIndex: 2});
+                $iframe.css({ visibility: 'visible' });
+                $container.css({ zIndex: 2 });
                 resolve();
             });
         });
     }
 
-    hide () {
+    /**
+     *
+     */
+    hide() {
         const $iframe = $(this.iframe);
         const $container = $(this.container);
+
         document.body.style.background = this.bodyBackground;
 
         return new Promise(resolve => {
-            $iframe.fadeOut(300, function () {
-                $iframe.css({visibility: 'hidden'});
-                $container.css({zIndex: 0});
+            $iframe.fadeOut(300, () => {
+                $iframe.css({ visibility: 'hidden' });
+                $container.css({ zIndex: 0 });
                 resolve();
             });
         });
@@ -142,7 +171,7 @@ class Etherpad extends LargeContainer {
     /**
      * @return {boolean} do not switch on dominant speaker event if on stage.
      */
-    stayOnStage () {
+    stayOnStage() {
         return true;
     }
 }
@@ -151,9 +180,12 @@ class Etherpad extends LargeContainer {
  * Manager of the Etherpad frame.
  */
 export default class EtherpadManager {
-    constructor (domain, name, eventEmitter) {
+    /**
+     *
+     */
+    constructor(domain, name, eventEmitter) {
         if (!domain || !name) {
-            throw new Error("missing domain or name");
+            throw new Error('missing domain or name');
         }
 
         this.domain = domain;
@@ -162,10 +194,16 @@ export default class EtherpadManager {
         this.etherpad = null;
     }
 
-    get isOpen () {
-        return !!this.etherpad;
+    /**
+     *
+     */
+    get isOpen() {
+        return Boolean(this.etherpad);
     }
 
+    /**
+     * 
+     */
     isVisible() {
         return VideoLayout.isLargeContainerTypeVisible(ETHERPAD_CONTAINER_TYPE);
     }
@@ -173,7 +211,7 @@ export default class EtherpadManager {
     /**
      * Create new Etherpad frame.
      */
-    openEtherpad () {
+    openEtherpad() {
         this.etherpad = new Etherpad(this.domain, this.name);
         VideoLayout.addLargeVideoContainer(
             ETHERPAD_CONTAINER_TYPE,
@@ -185,12 +223,12 @@ export default class EtherpadManager {
      * Toggle Etherpad frame visibility.
      * Open new Etherpad frame if there is no Etherpad frame yet.
      */
-    toggleEtherpad () {
+    toggleEtherpad() {
         if (!this.isOpen) {
             this.openEtherpad();
         }
 
-        let isVisible = this.isVisible();
+        const isVisible = this.isVisible();
 
         VideoLayout.showLargeVideoContainer(
             ETHERPAD_CONTAINER_TYPE, !isVisible);

modules/UI/recording/Recording.js

@@ -14,9 +14,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
-import UIEvents from "../../../service/UI/UIEvents";
+import UIEvents from '../../../service/UI/UIEvents';
 import UIUtil from '../util/UIUtil';
 import VideoLayout from '../videolayout/VideoLayout';
 
@@ -84,7 +84,7 @@ let dialog = null;
  */
 function _isRecordingButtonEnabled() {
     return (
-        interfaceConfig.TOOLBAR_BUTTONS.indexOf("recording") !== -1
+        interfaceConfig.TOOLBAR_BUTTONS.indexOf('recording') !== -1
             && config.enableRecording
             && APP.conference.isRecordingSupported());
 }
@@ -95,69 +95,75 @@ function _isRecordingButtonEnabled() {
  */
 function _requestLiveStreamId() {
     const cancelButton
-        = APP.translation.generateTranslationHTML("dialog.Cancel");
-    const backButton = APP.translation.generateTranslationHTML("dialog.Back");
+        = APP.translation.generateTranslationHTML('dialog.Cancel');
+    const backButton = APP.translation.generateTranslationHTML('dialog.Back');
     const startStreamingButton
-        = APP.translation.generateTranslationHTML("dialog.startLiveStreaming");
+        = APP.translation.generateTranslationHTML('dialog.startLiveStreaming');
     const streamIdRequired
         = APP.translation.generateTranslationHTML(
-            "liveStreaming.streamIdRequired");
+            'liveStreaming.streamIdRequired');
     const streamIdHelp
         = APP.translation.generateTranslationHTML(
-            "liveStreaming.streamIdHelp");
+            'liveStreaming.streamIdHelp');
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
         dialog = APP.UI.messageHandler.openDialogWithStates({
             state0: {
-                titleKey: "dialog.liveStreaming",
+                titleKey: 'dialog.liveStreaming',
                 html:
                     `<input  class="input-control"
                     name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
                     autofocus><div style="text-align: right">
                     <a class="helper-link" target="_new"
-                    href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
-                        + streamIdHelp
-                        + `</a></div>`,
+                    href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">${
+    streamIdHelp
+}</a></div>`,
                 persistent: false,
                 buttons: [
-                    {title: cancelButton, value: false},
-                    {title: startStreamingButton, value: true}
+                    { title: cancelButton,
+                        value: false },
+                    { title: startStreamingButton,
+                        value: true }
                 ],
                 focus: ':input:first',
                 defaultButton: 1,
-                submit: function (e, v, m, f) {
+                submit(e, v, m, f) { // eslint-disable-line max-params
                     e.preventDefault();
 
                     if (v) {
                         if (f.streamId && f.streamId.length > 0) {
                             resolve(UIUtil.escapeHtml(f.streamId));
                             dialog.close();
+
                             return;
                         }
-                        else {
-                            dialog.goToState('state1');
-                            return false;
-                        }
-                    } else {
-                        reject(APP.UI.messageHandler.CANCEL);
-                        dialog.close();
+                        dialog.goToState('state1');
+
                         return false;
+
                     }
+                    reject(APP.UI.messageHandler.CANCEL);
+                    dialog.close();
+
+                    return false;
+
                 }
             },
 
             state1: {
-                titleKey: "dialog.liveStreaming",
+                titleKey: 'dialog.liveStreaming',
                 html: streamIdRequired,
                 persistent: false,
                 buttons: [
-                    {title: cancelButton, value: false},
-                    {title: backButton, value: true}
+                    { title: cancelButton,
+                        value: false },
+                    { title: backButton,
+                        value: true }
                 ],
                 focus: ':input:first',
                 defaultButton: 1,
-                submit: function (e, v) {
+                submit(e, v) {
                     e.preventDefault();
                     if (v === 0) {
                         reject(APP.UI.messageHandler.CANCEL);
@@ -168,7 +174,7 @@ function _requestLiveStreamId() {
                 }
             }
         }, {
-            close: function () {
+            close() {
                 dialog = null;
             }
         });
@@ -180,26 +186,29 @@ function _requestLiveStreamId() {
  * @returns {Promise}
  */
 function _requestRecordingToken() {
-    let titleKey = "dialog.recordingToken";
-    let msgString = (
-        `<input name="recordingToken" type="text"
+    const titleKey = 'dialog.recordingToken';
+    const msgString
+        = `<input name="recordingToken" type="text"
                 data-i18n="[placeholder]dialog.token"
                 class="input-control"
                 autofocus>`
-    );
-    return new Promise(function (resolve, reject) {
+
+    ;
+
+
+    return new Promise((resolve, reject) => {
         dialog = APP.UI.messageHandler.openTwoButtonDialog({
             titleKey,
             msgString,
             leftButtonKey: 'dialog.Save',
-            submitFunction: function (e, v, m, f) {
+            submitFunction(e, v, m, f) { // eslint-disable-line max-params
                 if (v && f.recordingToken) {
                     resolve(UIUtil.escapeHtml(f.recordingToken));
                 } else {
                     reject(APP.UI.messageHandler.CANCEL);
                 }
             },
-            closeFunction: function () {
+            closeFunction() {
                 dialog = null;
             },
             focus: ':input:first'
@@ -215,18 +224,18 @@ function _requestRecordingToken() {
  * @private
  */
 function _showStopRecordingPrompt(recordingType) {
-    var title;
-    var message;
-    var buttonKey;
-    if (recordingType === "jibri") {
-        title = "dialog.liveStreaming";
-        message = "dialog.stopStreamingWarning";
-        buttonKey = "dialog.stopLiveStreaming";
-    }
-    else {
-        title = "dialog.recording";
-        message = "dialog.stopRecordingWarning";
-        buttonKey = "dialog.stopRecording";
+    let title;
+    let message;
+    let buttonKey;
+
+    if (recordingType === 'jibri') {
+        title = 'dialog.liveStreaming';
+        message = 'dialog.stopStreamingWarning';
+        buttonKey = 'dialog.stopLiveStreaming';
+    } else {
+        title = 'dialog.recording';
+        message = 'dialog.stopRecordingWarning';
+        buttonKey = 'dialog.stopRecording';
     }
 
     return new Promise((resolve, reject) => {
@@ -248,7 +257,10 @@ function _showStopRecordingPrompt(recordingType) {
  * @returns {boolean} true if the condition is met or false otherwise.
  */
 function isStartingStatus(status) {
-    return status === JitsiRecordingStatus.PENDING || status === JitsiRecordingStatus.RETRYING;
+    return (
+        status === JitsiRecordingStatus.PENDING
+            || status === JitsiRecordingStatus.RETRYING
+    );
 }
 
 /**
@@ -256,7 +268,7 @@ function isStartingStatus(status) {
  * @type {{init, initRecordingButton, showRecordingButton, updateRecordingState,
  * updateRecordingUI, checkAutoRecord}}
  */
-var Recording = {
+const Recording = {
     /**
      * Initializes the recording UI.
      */
@@ -267,11 +279,10 @@ var Recording = {
         this.updateRecordingState(APP.conference.getRecordingState());
 
         if (recordingType === 'jibri') {
-            this.baseClass = "fa fa-play-circle";
+            this.baseClass = 'fa fa-play-circle';
             Object.assign(this, STREAMING_TRANSLATION_KEYS);
-        }
-        else {
-            this.baseClass = "icon-recEnable";
+        } else {
+            this.baseClass = 'icon-recEnable';
             Object.assign(this, RECORDING_TRANSLATION_KEYS);
         }
 
@@ -301,7 +312,7 @@ var Recording = {
         const selector = $('#toolbar_button_record');
 
         selector.addClass(this.baseClass);
-        selector.attr("data-i18n", "[content]" + this.recordingButtonTooltip);
+        selector.attr('data-i18n', `[content]${this.recordingButtonTooltip}`);
         APP.translation.translateElement(selector);
     },
 
@@ -310,8 +321,8 @@ var Recording = {
      * @param show {true} to show the recording button, {false} to hide it
      */
     showRecordingButton(show) {
-        let shouldShow = show && _isRecordingButtonEnabled();
-        let id = 'toolbar_button_record';
+        const shouldShow = show && _isRecordingButtonEnabled();
+        const id = 'toolbar_button_record';
 
         UIUtil.setVisible(id, shouldShow);
     },
@@ -322,12 +333,14 @@ var Recording = {
      */
     updateRecordingState(recordingState) {
         // I'm the recorder, so I don't want to see any UI related to states.
-        if (config.iAmRecorder)
+        if (config.iAmRecorder) {
             return;
+        }
 
         // If there's no state change, we ignore the update.
-        if (!recordingState || this.currentState === recordingState)
+        if (!recordingState || this.currentState === recordingState) {
             return;
+        }
 
         this.updateRecordingUI(recordingState);
     },
@@ -338,7 +351,8 @@ var Recording = {
      */
     updateRecordingUI(recordingState) {
 
-        let oldState = this.currentState;
+        const oldState = this.currentState;
+
         this.currentState = recordingState;
 
         let labelDisplayConfiguration;
@@ -366,6 +380,7 @@ var Recording = {
             // We don't want UI changes if this is an availability change.
             if (oldState !== JitsiRecordingStatus.ON && !wasInStartingStatus) {
                 APP.store.dispatch(updateRecordingState({ recordingState }));
+
                 return;
             }
 
@@ -378,7 +393,7 @@ var Recording = {
 
             this._setToolbarButtonToggled(false);
 
-            setTimeout(function(){
+            setTimeout(() => {
                 APP.store.dispatch(hideRecordingLabel());
             }, 5000);
 
@@ -408,7 +423,8 @@ var Recording = {
         }
 
         // Return an empty label display configuration to indicate no label
-        // should be displayed. The JitsiRecordingStatus.AVAIABLE case is handled here.
+        // should be displayed. The JitsiRecordingStatus.AVAIABLE case is
+        // handled here.
         default: {
             labelDisplayConfiguration = null;
         }
@@ -450,42 +466,48 @@ var Recording = {
                     this.eventEmitter.emit(UIEvents.RECORDING_TOGGLED);
                     sendEvent('recording.stopped');
                 },
-                () => {});
+                () => {}); // eslint-disable-line no-empty-function
             break;
         }
         case JitsiRecordingStatus.AVAILABLE:
         case JitsiRecordingStatus.OFF: {
-            if (this.recordingType === 'jibri')
-                _requestLiveStreamId().then(streamId => {
+            if (this.recordingType === 'jibri') {
+                _requestLiveStreamId()
+                .then(streamId => {
                     this.eventEmitter.emit(
                         UIEvents.RECORDING_TOGGLED,
                         { streamId });
                     sendEvent('recording.started');
-                }).catch(reason => {
-                    if (reason !== APP.UI.messageHandler.CANCEL)
-                        logger.error(reason);
-                    else
+                })
+                .catch(reason => {
+                    if (reason === APP.UI.messageHandler.CANCEL) {
                         sendEvent('recording.canceled');
+                    } else {
+                        logger.error(reason);
+                    }
                 });
-            else {
+            } else {
                 if (this.predefinedToken) {
                     this.eventEmitter.emit(
                         UIEvents.RECORDING_TOGGLED,
                         { token: this.predefinedToken });
                     sendEvent('recording.started');
+
                     return;
                 }
 
-                _requestRecordingToken().then((token) => {
+                _requestRecordingToken().then(token => {
                     this.eventEmitter.emit(
                         UIEvents.RECORDING_TOGGLED,
                         { token });
                     sendEvent('recording.started');
-                }).catch(reason => {
-                    if (reason !== APP.UI.messageHandler.CANCEL)
-                        logger.error(reason);
-                    else
+                })
+                .catch(reason => {
+                    if (reason === APP.UI.messageHandler.CANCEL) {
                         sendEvent('recording.canceled');
+                    } else {
+                        logger.error(reason);
+                    }
                 });
             }
             break;
@@ -521,7 +543,7 @@ var Recording = {
      * or not
      */
     _setToolbarButtonToggled(isToggled) {
-        $("#toolbar_button_record").toggleClass("toggled", isToggled);
+        $('#toolbar_button_record').toggleClass('toggled', isToggled);
     }
 };
 

modules/UI/shared_video/SharedVideo.js

@@ -1,10 +1,10 @@
 /* global $, APP, YT, onPlayerReady, onPlayerStateChange, onPlayerError */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
 
-import VideoLayout from "../videolayout/VideoLayout";
+import VideoLayout from '../videolayout/VideoLayout';
 import LargeContainer from '../videolayout/LargeContainer';
 import Filmstrip from '../videolayout/Filmstrip';
 
@@ -17,13 +17,13 @@ import { dockToolbox, showToolbox } from '../../../react/features/toolbox';
 
 import SharedVideoThumb from './SharedVideoThumb';
 
-export const SHARED_VIDEO_CONTAINER_TYPE = "sharedvideo";
+export const SHARED_VIDEO_CONTAINER_TYPE = 'sharedvideo';
 
 /**
  * Example shared video link.
  * @type {string}
  */
-const defaultSharedVideoLink = "https://www.youtube.com/watch?v=xNXN7CZk8X0";
+const defaultSharedVideoLink = 'https://www.youtube.com/watch?v=xNXN7CZk8X0';
 const updateInterval = 5000; // milliseconds
 
 /**
@@ -36,7 +36,10 @@ let dialog = null;
  * Manager of shared video.
  */
 export default class SharedVideoManager {
-    constructor (emitter) {
+    /**
+     *
+     */
+    constructor(emitter) {
         this.emitter = emitter;
         this.isSharedVideoShown = false;
         this.isPlayerAPILoaded = false;
@@ -52,10 +55,10 @@ export default class SharedVideoManager {
      * currently on.
      */
     isSharedVideoVolumeOn() {
-        return (this.player
+        return this.player
                 && this.player.getPlayerState() === YT.PlayerState.PLAYING
                 && !this.player.isMuted()
-                && this.player.getVolume() > 0);
+                && this.player.getVolume() > 0;
     }
 
     /**
@@ -70,11 +73,12 @@ export default class SharedVideoManager {
      * Starts shared video by asking user for url, or if its already working
      * asks whether the user wants to stop sharing the video.
      */
-    toggleSharedVideo () {
-        if (dialog)
+    toggleSharedVideo() {
+        if (dialog) {
             return;
+        }
 
-        if(!this.isSharedVideoShown) {
+        if (!this.isSharedVideoShown) {
             requestVideoLink().then(
                     url => {
                         this.emitter.emit(
@@ -86,10 +90,11 @@ export default class SharedVideoManager {
                         sendEvent('sharedvideo.canceled');
                     }
             );
+
             return;
         }
 
-        if(APP.conference.isLocalId(this.from)) {
+        if (APP.conference.isLocalId(this.from)) {
             showStopVideoPropmpt().then(
                 () => {
                     // make sure we stop updates for playing before we send stop
@@ -104,13 +109,13 @@ export default class SharedVideoManager {
                         UIEvents.UPDATE_SHARED_VIDEO, this.url, 'stop');
                     sendEvent('sharedvideo.stoped');
                 },
-                () => {});
+                () => {}); // eslint-disable-line no-empty-function
         } else {
             dialog = APP.UI.messageHandler.openMessageDialog(
-                "dialog.shareVideoTitle",
-                "dialog.alreadySharedVideoMsg",
+                'dialog.shareVideoTitle',
+                'dialog.alreadySharedVideoMsg',
                 null,
-                function () {
+                () => {
                     dialog = null;
                 }
             );
@@ -126,9 +131,10 @@ export default class SharedVideoManager {
      * @param url the video url
      * @param attributes
      */
-    onSharedVideoStart (id, url, attributes) {
-        if (this.isSharedVideoShown)
+    onSharedVideoStart(id, url, attributes) {
+        if (this.isSharedVideoShown) {
             return;
+        }
 
         this.isSharedVideoShown = true;
 
@@ -140,15 +146,16 @@ export default class SharedVideoManager {
 
         this.mutedWithUserInteraction = APP.conference.isLocalAudioMuted();
 
-        //listen for local audio mute events
+        // listen for local audio mute events
         this.localAudioMutedListener = this.onLocalAudioMuted.bind(this);
         this.emitter.on(UIEvents.AUDIO_MUTED, this.localAudioMutedListener);
 
         // This code loads the IFrame Player API code asynchronously.
-        var tag = document.createElement('script');
+        const tag = document.createElement('script');
+
+        tag.src = 'https://www.youtube.com/iframe_api';
+        const firstScriptTag = document.getElementsByTagName('script')[0];
 
-        tag.src = "https://www.youtube.com/iframe_api";
-        var firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
         // sometimes we receive errors like player not defined
@@ -158,14 +165,16 @@ export default class SharedVideoManager {
         // and will process any initial attributes if any
         this.initialAttributes = attributes;
 
-        var self = this;
-        if(self.isPlayerAPILoaded)
+        const self = this;
+
+        if (self.isPlayerAPILoaded) {
             window.onYouTubeIframeAPIReady();
-        else
+        } else {
             window.onYouTubeIframeAPIReady = function() {
                 self.isPlayerAPILoaded = true;
-                let showControls = APP.conference.isLocalId(self.from) ? 1 : 0;
-                let p = new YT.Player('sharedVideoIFrame', {
+                const showControls
+                    = APP.conference.isLocalId(self.from) ? 1 : 0;
+                const p = new YT.Player('sharedVideoIFrame', {
                     height: '100%',
                     width: '100%',
                     videoId: self.url,
@@ -174,7 +183,7 @@ export default class SharedVideoManager {
                         'fs': '0',
                         'autoplay': 0,
                         'controls': showControls,
-                        'rel' : 0
+                        'rel': 0
                     },
                     events: {
                         'onReady': onPlayerReady,
@@ -185,28 +194,28 @@ export default class SharedVideoManager {
 
                 // add listener for volume changes
                 p.addEventListener(
-                    "onVolumeChange", "onVolumeChange");
+                    'onVolumeChange', 'onVolumeChange');
 
-                if (APP.conference.isLocalId(self.from)){
-                    // adds progress listener that will be firing events
-                    // while we are paused and we change the progress of the
-                    // video (seeking forward or backward on the video)
+                if (APP.conference.isLocalId(self.from)) {
+                // adds progress listener that will be firing events
+                // while we are paused and we change the progress of the
+                // video (seeking forward or backward on the video)
                     p.addEventListener(
-                        "onVideoProgress", "onVideoProgress");
+                        'onVideoProgress', 'onVideoProgress');
                 }
             };
+        }
 
         /**
          * Indicates that a change in state has occurred for the shared video.
          * @param event the event notifying us of the change
          */
         window.onPlayerStateChange = function(event) {
+            // eslint-disable-next-line eqeqeq
             if (event.data == YT.PlayerState.PLAYING) {
-
                 self.player = event.target;
 
-                if(self.initialAttributes)
-                {
+                if (self.initialAttributes) {
                     // If a network update has occurred already now is the
                     // time to process it.
                     self.processVideoUpdate(
@@ -216,10 +225,12 @@ export default class SharedVideoManager {
                     self.initialAttributes = null;
                 }
                 self.smartAudioMute();
+                // eslint-disable-next-line eqeqeq
             } else if (event.data == YT.PlayerState.PAUSED) {
                 self.smartAudioUnmute();
                 sendEvent('sharedvideo.paused');
             }
+            // eslint-disable-next-line eqeqeq
             self.fireSharedVideoEvent(event.data == YT.PlayerState.PAUSED);
         };
 
@@ -227,8 +238,10 @@ export default class SharedVideoManager {
          * Track player progress while paused.
          * @param event
          */
-        window.onVideoProgress = function (event) {
-            let state = event.target.getPlayerState();
+        window.onVideoProgress = function(event) {
+            const state = event.target.getPlayerState();
+
+            // eslint-disable-next-line eqeqeq
             if (state == YT.PlayerState.PAUSED) {
                 self.fireSharedVideoEvent(true);
             }
@@ -238,38 +251,44 @@ export default class SharedVideoManager {
          * Gets notified for volume state changed.
          * @param event
          */
-        window.onVolumeChange = function (event) {
+        window.onVolumeChange = function(event) {
             self.fireSharedVideoEvent();
 
             // let's check, if player is not muted lets mute locally
-            if(event.data.volume > 0 && !event.data.muted) {
+            if (event.data.volume > 0 && !event.data.muted) {
                 self.smartAudioMute();
-            }
-            else if (event.data.volume <=0 || event.data.muted) {
+            } else if (event.data.volume <= 0 || event.data.muted) {
                 self.smartAudioUnmute();
             }
             sendEvent('sharedvideo.volumechanged');
         };
 
         window.onPlayerReady = function(event) {
-            let player = event.target;
+            const player = event.target;
+
             // do not relay on autoplay as it is not sending all of the events
             // in onPlayerStateChange
+
             player.playVideo();
 
-            let thumb = new SharedVideoThumb(
+            const thumb = new SharedVideoThumb(
                 self.url, SHARED_VIDEO_CONTAINER_TYPE, VideoLayout);
+
             thumb.setDisplayName(player.getVideoData().title);
             VideoLayout.addRemoteVideoContainer(self.url, thumb);
 
-            let iframe = player.getIframe();
+            const iframe = player.getIframe();
+
+            // eslint-disable-next-line no-use-before-define
             self.sharedVideo = new SharedVideoContainer(
-                {url, iframe, player});
+                { url,
+                    iframe,
+                    player });
 
-            //prevents pausing participants not sharing the video
+            // prevents pausing participants not sharing the video
             // to pause the video
             if (!APP.conference.isLocalId(self.from)) {
-                $("#sharedVideo").css("pointer-events","none");
+                $('#sharedVideo').css('pointer-events', 'none');
             }
 
             VideoLayout.addLargeVideoContainer(
@@ -285,7 +304,7 @@ export default class SharedVideoManager {
 
             // If we are sending the command and we are starting the player
             // we need to continuously send the player current time position
-            if(APP.conference.isLocalId(self.from)) {
+            if (APP.conference.isLocalId(self.from)) {
                 self.intervalId = setInterval(
                     self.fireSharedVideoEvent.bind(self),
                     updateInterval);
@@ -293,7 +312,8 @@ export default class SharedVideoManager {
         };
 
         window.onPlayerError = function(event) {
-            logger.error("Error in the player:", event.data);
+            logger.error('Error in the player:', event.data);
+
             // store the error player, so we can remove it
             self.errorInPlayer = event.target;
         };
@@ -304,21 +324,23 @@ export default class SharedVideoManager {
      * @param player the player to operate over
      * @param attributes the attributes with the player state we want
      */
-    processVideoUpdate (player, attributes)
-    {
-        if(!attributes)
+    processVideoUpdate(player, attributes) {
+        if (!attributes) {
             return;
+        }
 
+        // eslint-disable-next-line eqeqeq
         if (attributes.state == 'playing') {
 
-            let isPlayerPaused
-                = (this.player.getPlayerState() === YT.PlayerState.PAUSED);
+            const isPlayerPaused
+                = this.player.getPlayerState() === YT.PlayerState.PAUSED;
 
             // If our player is currently paused force the seek.
             this.processTime(player, attributes, isPlayerPaused);
 
             // Process mute.
-            let isAttrMuted = (attributes.muted === "true");
+            const isAttrMuted = attributes.muted === 'true';
+
             if (player.isMuted() !== isAttrMuted) {
                 this.smartPlayerMute(isAttrMuted, true);
             }
@@ -326,16 +348,18 @@ export default class SharedVideoManager {
             // Process volume
             if (!isAttrMuted
                 && attributes.volume !== undefined
+                // eslint-disable-next-line eqeqeq
                 && player.getVolume() != attributes.volume) {
 
                 player.setVolume(attributes.volume);
-                logger.info("Player change of volume:" + attributes.volume);
+                logger.info(`Player change of volume:${attributes.volume}`);
                 this.showSharedVideoMutedPopup(false);
             }
 
-            if (isPlayerPaused)
+            if (isPlayerPaused) {
                 player.playVideo();
-
+            }
+            // eslint-disable-next-line eqeqeq
         } else if (attributes.state == 'pause') {
             // if its not paused, pause it
             player.pauseVideo();
@@ -350,23 +374,23 @@ export default class SharedVideoManager {
      * @param attributes the attributes with the player state we want
      * @param forceSeek whether seek should be forced
      */
-    processTime (player, attributes, forceSeek)
-    {
-        if(forceSeek) {
-            logger.info("Player seekTo:", attributes.time);
+    processTime(player, attributes, forceSeek) {
+        if (forceSeek) {
+            logger.info('Player seekTo:', attributes.time);
             player.seekTo(attributes.time);
+
             return;
         }
 
         // check received time and current time
-        let currentPosition = player.getCurrentTime();
-        let diff = Math.abs(attributes.time - currentPosition);
+        const currentPosition = player.getCurrentTime();
+        const diff = Math.abs(attributes.time - currentPosition);
 
         // if we drift more than the interval for checking
         // sync, the interval is in milliseconds
-        if(diff > updateInterval/1000) {
-            logger.info("Player seekTo:", attributes.time,
-                " current time is:", currentPosition, " diff:", diff);
+        if (diff > updateInterval / 1000) {
+            logger.info('Player seekTo:', attributes.time,
+                ' current time is:', currentPosition, ' diff:', diff);
             player.seekTo(attributes.time);
         }
     }
@@ -374,24 +398,25 @@ export default class SharedVideoManager {
     /**
      * Checks current state of the player and fire an event with the values.
      */
-    fireSharedVideoEvent(sendPauseEvent)
-    {
+    fireSharedVideoEvent(sendPauseEvent) {
         // ignore update checks if we are not the owner of the video
         // or there is still no player defined or we are stopped
         // (in a process of stopping)
-        if(!APP.conference.isLocalId(this.from) || !this.player
-            || !this.isSharedVideoShown)
+        if (!APP.conference.isLocalId(this.from) || !this.player
+            || !this.isSharedVideoShown) {
             return;
+        }
+
+        const state = this.player.getPlayerState();
 
-        let state = this.player.getPlayerState();
         // if its paused and haven't been pause - send paused
+
         if (state === YT.PlayerState.PAUSED && sendPauseEvent) {
             this.emitter.emit(UIEvents.UPDATE_SHARED_VIDEO,
                 this.url, 'pause', this.player.getCurrentTime());
-        }
-        // if its playing and it was paused - send update with time
-        // if its playing and was playing just send update with time
-        else if (state === YT.PlayerState.PLAYING) {
+        } else if (state === YT.PlayerState.PLAYING) {
+            // if its playing and it was paused - send update with time
+            // if its playing and was playing just send update with time
             this.emitter.emit(UIEvents.UPDATE_SHARED_VIDEO,
                 this.url, 'playing',
                 this.player.getCurrentTime(),
@@ -407,20 +432,22 @@ export default class SharedVideoManager {
      * @param url the video url
      * @param attributes
      */
-    onSharedVideoUpdate (id, url, attributes) {
+    onSharedVideoUpdate(id, url, attributes) {
         // if we are sending the event ignore
-        if(APP.conference.isLocalId(this.from)) {
+        if (APP.conference.isLocalId(this.from)) {
             return;
         }
 
-        if(!this.isSharedVideoShown) {
+        if (!this.isSharedVideoShown) {
             this.onSharedVideoStart(id, url, attributes);
+
             return;
         }
 
-        if(!this.player)
+        // eslint-disable-next-line no-negated-condition
+        if (!this.player) {
             this.initialAttributes = attributes;
-        else {
+        } else {
             this.processVideoUpdate(this.player, attributes);
         }
     }
@@ -431,18 +458,21 @@ export default class SharedVideoManager {
      * left and we want to remove video if the user sharing it left).
      * @param id the id of the sender of the command
      */
-    onSharedVideoStop (id, attributes) {
-        if (!this.isSharedVideoShown)
+    onSharedVideoStop(id, attributes) {
+        if (!this.isSharedVideoShown) {
             return;
+        }
 
-        if(this.from !== id)
+        if (this.from !== id) {
             return;
+        }
 
-        if(!this.player) {
+        if (!this.player) {
             // if there is no error in the player till now,
             // store the initial attributes
             if (!this.errorInPlayer) {
                 this.initialAttributes = attributes;
+
                 return;
             }
         }
@@ -458,18 +488,19 @@ export default class SharedVideoManager {
                 VideoLayout.removeLargeVideoContainer(
                     SHARED_VIDEO_CONTAINER_TYPE);
 
-                if(this.player) {
+                if (this.player) {
                     this.player.destroy();
                     this.player = null;
-                } // if there is an error in player, remove that instance
-                else if (this.errorInPlayer) {
+                } else if (this.errorInPlayer) {
+                    // if there is an error in player, remove that instance
                     this.errorInPlayer.destroy();
                     this.errorInPlayer = null;
                 }
                 this.smartAudioUnmute();
+
                 // revert to original behavior (prevents pausing
                 // for participants not sharing the video to pause it)
-                $("#sharedVideo").css("pointer-events","auto");
+                $('#sharedVideo').css('pointer-events', 'auto');
 
                 this.emitter.emit(
                     UIEvents.UPDATE_SHARED_VIDEO, null, 'removed');
@@ -488,15 +519,16 @@ export default class SharedVideoManager {
      * @param {boolean} indicates if this mute was a result of user interaction,
      * i.e. pressing the mute button or it was programatically triggerred
      */
-    onLocalAudioMuted (muted, userInteraction) {
-        if(!this.player)
+    onLocalAudioMuted(muted, userInteraction) {
+        if (!this.player) {
             return;
+        }
 
         if (muted) {
             this.mutedWithUserInteraction = userInteraction;
-        }
-        else if (this.player.getPlayerState() !== YT.PlayerState.PAUSED) {
+        } else if (this.player.getPlayerState() !== YT.PlayerState.PAUSED) {
             this.smartPlayerMute(true, false);
+
             // Check if we need to update other participants
             this.fireSharedVideoEvent();
         }
@@ -512,13 +544,14 @@ export default class SharedVideoManager {
         if (!this.player.isMuted() && mute) {
             this.player.mute();
 
-            if (isVideoUpdate)
+            if (isVideoUpdate) {
                 this.smartAudioUnmute();
-        }
-        else if (this.player.isMuted() && !mute) {
+            }
+        } else if (this.player.isMuted() && !mute) {
             this.player.unMute();
-            if (isVideoUpdate)
+            if (isVideoUpdate) {
                 this.smartAudioMute();
+            }
         }
 
         this.showSharedVideoMutedPopup(mute);
@@ -533,7 +566,7 @@ export default class SharedVideoManager {
         if (APP.conference.isLocalAudioMuted()
             && !this.mutedWithUserInteraction
             && !this.isSharedVideoVolumeOn()) {
-            sendEvent("sharedvideo.audio.unmuted");
+            sendEvent('sharedvideo.audio.unmuted');
             logger.log('Shared video: audio unmuted');
             this.emitter.emit(UIEvents.AUDIO_MUTED, false, false);
             this.showMicMutedPopup(false);
@@ -547,7 +580,7 @@ export default class SharedVideoManager {
     smartAudioMute() {
         if (!APP.conference.isLocalAudioMuted()
             && this.isSharedVideoVolumeOn()) {
-            sendEvent("sharedvideo.audio.muted");
+            sendEvent('sharedvideo.audio.muted');
             logger.log('Shared video: audio muted');
             this.emitter.emit(UIEvents.AUDIO_MUTED, true, false);
             this.showMicMutedPopup(true);
@@ -559,9 +592,10 @@ export default class SharedVideoManager {
      * of automatic mute after a shared video has started.
      * @param show boolean, show or hide the notification
      */
-    showMicMutedPopup (show) {
-        if(show)
+    showMicMutedPopup(show) {
+        if (show) {
             this.showSharedVideoMutedPopup(false);
+        }
 
         APP.UI.showCustomToolbarPopup(
             'microphone', 'micMutedPopup', show, 5000);
@@ -573,9 +607,10 @@ export default class SharedVideoManager {
      * mic.
      * @param show boolean, show or hide the notification
      */
-    showSharedVideoMutedPopup (show) {
-        if(show)
+    showSharedVideoMutedPopup(show) {
+        if (show) {
             this.showMicMutedPopup(false);
+        }
 
         APP.UI.showCustomToolbarPopup(
             'sharedvideo', 'sharedVideoMutedPopup', show, 5000);
@@ -586,8 +621,10 @@ export default class SharedVideoManager {
  * Container for shared video iframe.
  */
 class SharedVideoContainer extends LargeContainer {
-
-    constructor ({url, iframe, player}) {
+    /**
+     *
+     */
+    constructor({ url, iframe, player }) {
         super();
 
         this.$iframe = $(iframe);
@@ -595,43 +632,62 @@ class SharedVideoContainer extends LargeContainer {
         this.player = player;
     }
 
-    show () {
-        let self = this;
+    /**
+     *
+     */
+    show() {
+        const self = this;
+
+
         return new Promise(resolve => {
             this.$iframe.fadeIn(300, () => {
                 self.bodyBackground = document.body.style.background;
                 document.body.style.background = 'black';
-                this.$iframe.css({opacity: 1});
+                this.$iframe.css({ opacity: 1 });
                 APP.store.dispatch(dockToolbox(true));
                 resolve();
             });
         });
     }
 
-    hide () {
-        let self = this;
+    /**
+     *
+     */
+    hide() {
+        const self = this;
+
         APP.store.dispatch(dockToolbox(false));
+
         return new Promise(resolve => {
             this.$iframe.fadeOut(300, () => {
                 document.body.style.background = self.bodyBackground;
-                this.$iframe.css({opacity: 0});
+                this.$iframe.css({ opacity: 0 });
                 resolve();
             });
         });
     }
 
-    onHoverIn () {
+    /**
+     *
+     */
+    onHoverIn() {
         APP.store.dispatch(showToolbox());
     }
 
-    get id () {
+    /**
+     *
+     */
+    get id() {
         return this.url;
     }
 
-    resize (containerWidth, containerHeight) {
-        let height = containerHeight - Filmstrip.getFilmstripHeight();
+    /**
+     *
+     */
+    resize(containerWidth, containerHeight) {
+        const height = containerHeight - Filmstrip.getFilmstripHeight();
 
-        let width = containerWidth;
+        const width = containerWidth;
 
         this.$iframe.width(width).height(height);
     }
@@ -639,7 +695,7 @@ class SharedVideoContainer extends LargeContainer {
     /**
      * @return {boolean} do not switch on dominant speaker event if on stage.
      */
-    stayOnStage () {
+    stayOnStage() {
         return false;
     }
 }
@@ -650,16 +706,18 @@ class SharedVideoContainer extends LargeContainer {
  * @returns {boolean}
  */
 function getYoutubeLink(url) {
-    let p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;//jshint ignore:line
-    return (url.match(p)) ? RegExp.$1 : false;
+    const p = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;// eslint-disable-line max-len
+
+
+    return url.match(p) ? RegExp.$1 : false;
 }
 
 /**
  * Ask user if he want to close shared video.
  */
 function showStopVideoPropmpt() {
-    return new Promise(function (resolve, reject) {
-        let submitFunction = function(e,v) {
+    return new Promise((resolve, reject) => {
+        const submitFunction = function(e, v) {
             if (v) {
                 resolve();
             } else {
@@ -667,14 +725,14 @@ function showStopVideoPropmpt() {
             }
         };
 
-        let closeFunction = function () {
+        const closeFunction = function() {
             dialog = null;
         };
 
         dialog = APP.UI.messageHandler.openTwoButtonDialog({
-            titleKey: "dialog.removeSharedVideoTitle",
-            msgKey: "dialog.removeSharedVideoMsg",
-            leftButtonKey: "dialog.Remove",
+            titleKey: 'dialog.removeSharedVideoTitle',
+            msgKey: 'dialog.removeSharedVideoMsg',
+            leftButtonKey: 'dialog.Remove',
             submitFunction,
             closeFunction
         });
@@ -686,46 +744,53 @@ function showStopVideoPropmpt() {
  * Dialog validates client input to allow only youtube urls.
  */
 function requestVideoLink() {
-    let i18n = APP.translation;
-    const cancelButton = i18n.generateTranslationHTML("dialog.Cancel");
-    const shareButton = i18n.generateTranslationHTML("dialog.Share");
-    const backButton = i18n.generateTranslationHTML("dialog.Back");
+    const i18n = APP.translation;
+    const cancelButton = i18n.generateTranslationHTML('dialog.Cancel');
+    const shareButton = i18n.generateTranslationHTML('dialog.Share');
+    const backButton = i18n.generateTranslationHTML('dialog.Back');
     const linkError
-        = i18n.generateTranslationHTML("dialog.shareVideoLinkError");
+        = i18n.generateTranslationHTML('dialog.shareVideoLinkError');
 
-    return new Promise(function (resolve, reject) {
+    return new Promise((resolve, reject) => {
         dialog = APP.UI.messageHandler.openDialogWithStates({
             state0: {
-                titleKey: "dialog.shareVideoTitle",
-                html:  `
-                    <input name="sharedVideoUrl" type="text"
-                           class="input-control"
-                           data-i18n="[placeholder]defaultLink"
+                titleKey: 'dialog.shareVideoTitle',
+                html: `
+                    <input name='sharedVideoUrl' type='text'
+                           class='input-control'
+                           data-i18n='[placeholder]defaultLink'
                            autofocus>`,
                 persistent: false,
                 buttons: [
-                    {title: cancelButton, value: false},
-                    {title: shareButton, value: true}
+                    { title: cancelButton,
+                        value: false },
+                    { title: shareButton,
+                        value: true }
                 ],
                 focus: ':input:first',
                 defaultButton: 1,
-                submit: function (e, v, m, f) {
+                submit(e, v, m, f) { // eslint-disable-line max-params
                     e.preventDefault();
                     if (!v) {
                         reject('cancelled');
                         dialog.close();
+
                         return;
                     }
 
-                    let sharedVideoUrl = f.sharedVideoUrl;
+                    const sharedVideoUrl = f.sharedVideoUrl;
+
                     if (!sharedVideoUrl) {
                         return;
                     }
 
-                    let urlValue = encodeURI(UIUtil.escapeHtml(sharedVideoUrl));
-                    let yVideoId = getYoutubeLink(urlValue);
+                    const urlValue
+                        = encodeURI(UIUtil.escapeHtml(sharedVideoUrl));
+                    const yVideoId = getYoutubeLink(urlValue);
+
                     if (!yVideoId) {
                         dialog.goToState('state1');
+
                         return false;
                     }
 
@@ -735,16 +800,18 @@ function requestVideoLink() {
             },
 
             state1: {
-                titleKey: "dialog.shareVideoTitle",
+                titleKey: 'dialog.shareVideoTitle',
                 html: linkError,
                 persistent: false,
                 buttons: [
-                    {title: cancelButton, value: false},
-                    {title: backButton, value: true}
+                    { title: cancelButton,
+                        value: false },
+                    { title: backButton,
+                        value: true }
                 ],
                 focus: ':input:first',
                 defaultButton: 1,
-                submit: function (e, v) {
+                submit(e, v) {
                     e.preventDefault();
                     if (v === 0) {
                         reject();
@@ -755,7 +822,7 @@ function requestVideoLink() {
                 }
             }
         }, {
-            close: function () {
+            close() {
                 dialog = null;
             }
         }, {

modules/UI/shared_video/SharedVideoThumb.js

@@ -1,15 +1,17 @@
 /* global $ */
 import SmallVideo from '../videolayout/SmallVideo';
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
-export default function SharedVideoThumb (url, videoType, VideoLayout)
-{
+/**
+ *
+ */
+export default function SharedVideoThumb(url, videoType, VideoLayout) {
     this.id = url;
 
     this.url = url;
     this.setVideoType(videoType);
-    this.videoSpanId = "sharedVideoContainer";
+    this.videoSpanId = 'sharedVideoContainer';
     this.container = this.createContainer(this.videoSpanId);
     this.$container = $(this.container);
     this.container.onclick = this.videoClick.bind(this);
@@ -23,42 +25,48 @@ SharedVideoThumb.prototype.constructor = SharedVideoThumb;
 /**
  * hide display name
  */
+// eslint-disable-next-line no-empty-function
+SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function() {};
 
-SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function () {};
+// eslint-disable-next-line no-empty-function
+SharedVideoThumb.prototype.avatarChanged = function() {};
 
-SharedVideoThumb.prototype.avatarChanged = function () {};
+SharedVideoThumb.prototype.createContainer = function(spanId) {
+    const container = document.createElement('span');
 
-SharedVideoThumb.prototype.createContainer = function (spanId) {
-    var container = document.createElement('span');
     container.id = spanId;
     container.className = 'videocontainer';
 
     // add the avatar
-    var avatar = document.createElement('img');
+    const avatar = document.createElement('img');
+
     avatar.className = 'sharedVideoAvatar';
-    avatar.src = "https://img.youtube.com/vi/" + this.url + "/0.jpg";
+    avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
     container.appendChild(avatar);
 
     const displayNameContainer = document.createElement('div');
+
     displayNameContainer.className = 'displayNameContainer';
     container.appendChild(displayNameContainer);
 
-    var remotes = document.getElementById('filmstripRemoteVideosContainer');
+    const remotes = document.getElementById('filmstripRemoteVideosContainer');
+
+
     return remotes.appendChild(container);
 };
 
 /**
  * The thumb click handler.
  */
-SharedVideoThumb.prototype.videoClick = function () {
+SharedVideoThumb.prototype.videoClick = function() {
     this.VideoLayout.handleVideoThumbClicked(this.url);
 };
 
 /**
  * Removes RemoteVideo from the page.
  */
-SharedVideoThumb.prototype.remove = function () {
-    logger.log("Remove shared video thumb", this.id);
+SharedVideoThumb.prototype.remove = function() {
+    logger.log('Remove shared video thumb', this.id);
 
     // Make sure that the large video is updated if are removing its
     // corresponding small video.
@@ -75,8 +83,9 @@ SharedVideoThumb.prototype.remove = function () {
  */
 SharedVideoThumb.prototype.setDisplayName = function(displayName) {
     if (!this.container) {
-        logger.warn( "Unable to set displayName - " + this.videoSpanId +
-            " does not exist");
+        logger.warn(`Unable to set displayName - ${this.videoSpanId
+        } does not exist`);
+
         return;
     }
 

modules/UI/side_pannels/SideContainerToggler.js

@@ -1,5 +1,5 @@
 /* global $ */
-import UIEvents from "../../../service/UI/UIEvents";
+import UIEvents from '../../../service/UI/UIEvents';
 
 /**
  * Handles open and close of the extended toolbar side panel
@@ -19,22 +19,28 @@ const SideContainerToggler = {
         // We may not have a side toolbar container, for example, in
         // filmstrip-only mode.
         const sideToolbarContainer
-            = document.getElementById("sideToolbarContainer");
+            = document.getElementById('sideToolbarContainer');
 
-        if (!sideToolbarContainer)
+        if (!sideToolbarContainer) {
             return;
+        }
 
         // Adds a listener for the animationend event that would take care of
         // hiding all internal containers when the extendedToolbarPanel is
         // closed.
         sideToolbarContainer.addEventListener(
-            "animationend",
-            function(e) {
-                if (e.animationName === "slideOutExt")
-                    $("#sideToolbarContainer").children().each(function() {
-                        if ($(this).hasClass("show"))
+            'animationend',
+            e => {
+                if (e.animationName === 'slideOutExt') {
+                    $('#sideToolbarContainer').children()
+                    .each(function() {
+                        /* eslint-disable no-invalid-this */
+                        if ($(this).hasClass('show')) {
                             SideContainerToggler.hideInnerContainer($(this));
+                        }
+                        /* eslint-enable no-invalid-this */
                     });
+                }
             },
             false);
     },
@@ -46,21 +52,26 @@ const SideContainerToggler = {
      * toggle
      */
     toggle(elementId) {
-        let elementSelector = $(`#${elementId}`);
-        let isSelectorVisible = elementSelector.hasClass("show");
+        const elementSelector = $(`#${elementId}`);
+        const isSelectorVisible = elementSelector.hasClass('show');
 
         if (isSelectorVisible) {
             this.hide();
-        }
-        else {
-            if (this.isVisible())
-                $("#sideToolbarContainer").children().each(function() {
-                    if ($(this).id !== elementId && $(this).hasClass("show"))
+        } else {
+            if (this.isVisible()) {
+                $('#sideToolbarContainer').children()
+                .each(function() {
+                    /* eslint-disable no-invalid-this */
+                    if ($(this).id !== elementId && $(this).hasClass('show')) {
                         SideContainerToggler.hideInnerContainer($(this));
+                    }
+                    /* eslint-enable no-invalid-this */
                 });
+            }
 
-            if (!this.isVisible())
+            if (!this.isVisible()) {
                 this.show();
+            }
 
             this.showInnerContainer(elementSelector);
         }
@@ -71,7 +82,7 @@ const SideContainerToggler = {
      * otherwise returns {false}.
      */
     isVisible() {
-        return $("#sideToolbarContainer").hasClass("slideInExt");
+        return $('#sideToolbarContainer').hasClass('slideInExt');
     },
 
     /**
@@ -79,24 +90,27 @@ const SideContainerToggler = {
      * {false} otherwise.
      */
     isHovered() {
-        return $("#sideToolbarContainer:hover").length > 0;
+        return $('#sideToolbarContainer:hover').length > 0;
     },
 
     /**
      * Hides the side toolbar panel with a slide out animation.
      */
     hide() {
-        $("#sideToolbarContainer")
-            .removeClass("slideInExt").addClass("slideOutExt");
+        $('#sideToolbarContainer')
+            .removeClass('slideInExt')
+.addClass('slideOutExt');
     },
 
     /**
      * Shows the side toolbar panel with a slide in animation.
      */
     show() {
-        if (!this.isVisible())
-            $("#sideToolbarContainer")
-                .removeClass("slideOutExt").addClass("slideInExt");
+        if (!this.isVisible()) {
+            $('#sideToolbarContainer')
+                .removeClass('slideOutExt')
+.addClass('slideInExt');
+        }
     },
 
     /**
@@ -106,7 +120,7 @@ const SideContainerToggler = {
      * element to hide
      */
     hideInnerContainer(containerSelector) {
-        containerSelector.removeClass("show").addClass("hide");
+        containerSelector.removeClass('show').addClass('hide');
 
         this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
             containerSelector.attr('id'), false);
@@ -124,12 +138,16 @@ const SideContainerToggler = {
         // If we quickly show a container, while another one is animating
         // and animation never ends, so we do not really hide the first one and
         // we end up with to shown panels
-        $("#sideToolbarContainer").children().each(function() {
-            if ($(this).hasClass("show"))
+        $('#sideToolbarContainer').children()
+        .each(function() {
+            /* eslint-disable no-invalid-this */
+            if ($(this).hasClass('show')) {
                 SideContainerToggler.hideInnerContainer($(this));
+            }
+            /* eslint-enable no-invalid-this */
         });
 
-        containerSelector.removeClass("hide").addClass("show");
+        containerSelector.removeClass('hide').addClass('show');
 
         this.eventEmitter.emit(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
             containerSelector.attr('id'), true);
@@ -138,9 +156,9 @@ const SideContainerToggler = {
     /**
      * TO FIX: do we need to resize the chat?
      */
-    resize () {
-        //let [width, height] = UIUtil.getSidePanelSize();
-        //Chat.resizeChat(width, height);
+    resize() {
+        // let [width, height] = UIUtil.getSidePanelSize();
+        // Chat.resizeChat(width, height);
     }
 };
 

modules/UI/side_pannels/SidePanels.js

@@ -5,7 +5,7 @@ import ContactListView from './contactlist/ContactListView';
 import { isButtonEnabled } from '../../../react/features/toolbox';
 
 const SidePanels = {
-    init (eventEmitter) {
+    init(eventEmitter) {
         // Initialize chat
         if (isButtonEnabled('chat')) {
             Chat.init(eventEmitter);

modules/UI/side_pannels/chat/Chat.js

@@ -1,8 +1,8 @@
 /* global APP, $ */
 
-import {processReplacements, linkify} from './Replacement';
+import { processReplacements, linkify } from './Replacement';
 import CommandsProcessor from './Commands';
-import VideoLayout from "../../videolayout/VideoLayout";
+import VideoLayout from '../../videolayout/VideoLayout';
 
 import UIUtil from '../../util/UIUtil';
 import UIEvents from '../../../../service/UI/UIEvents';
@@ -36,6 +36,9 @@ const htmlStr = `
         </div>
     </div>`;
 
+/**
+ *
+ */
 function initHTML() {
     $(`#${sidePanelsContainerId}`)
         .append(htmlStr);
@@ -44,7 +47,7 @@ function initHTML() {
 /**
  * The container id, which is and the element id.
  */
-var CHAT_CONTAINER_ID = "chat_container";
+const CHAT_CONTAINER_ID = 'chat_container';
 
 /**
  *  Updates visual notification, indicating that a message has arrived.
@@ -66,19 +69,15 @@ function updateVisualNotification() {
             = document.getElementById('toolbar_button_chat');
         const leftIndent
             = (UIUtil.getTextWidth(chatButtonElement)
-                    - UIUtil.getTextWidth(unreadMsgElement))
-                / 2;
+                - UIUtil.getTextWidth(unreadMsgElement)) / 2;
         const topIndent
-            = (UIUtil.getTextHeight(chatButtonElement)
-                        - UIUtil.getTextHeight(unreadMsgElement))
-                    / 2
-                - 5;
+            = ((UIUtil.getTextHeight(chatButtonElement)
+                - UIUtil.getTextHeight(unreadMsgElement)) / 2) - 5;
 
         unreadMsgElement.setAttribute(
                 'style',
-                'top:' + topIndent + '; left:' + leftIndent + ';');
-    }
-    else {
+                `top:${topIndent}; left:${leftIndent};`);
+    } else {
         unreadMsgSelector.html('');
     }
 
@@ -93,37 +92,49 @@ function updateVisualNotification() {
  * @returns {string}
  */
 function getCurrentTime(stamp) {
-    var now     = (stamp? new Date(stamp): new Date());
-    var hour    = now.getHours();
-    var minute  = now.getMinutes();
-    var second  = now.getSeconds();
-    if(hour.toString().length === 1) {
-        hour = '0'+hour;
+    const now = stamp ? new Date(stamp) : new Date();
+    let hour = now.getHours();
+    let minute = now.getMinutes();
+    let second = now.getSeconds();
+
+    if (hour.toString().length === 1) {
+        hour = `0${hour}`;
     }
-    if(minute.toString().length === 1) {
-        minute = '0'+minute;
+    if (minute.toString().length === 1) {
+        minute = `0${minute}`;
     }
-    if(second.toString().length === 1) {
-        second = '0'+second;
+    if (second.toString().length === 1) {
+        second = `0${second}`;
     }
-    return hour+':'+minute+':'+second;
+
+    return `${hour}:${minute}:${second}`;
 }
 
+/**
+ *
+ */
 function toggleSmileys() {
-    var smileys = $('#smileysContainer');
-    if(!smileys.is(':visible')) {
-        smileys.show("slide", { direction: "down", duration: 300});
+    const smileys = $('#smileysContainer'); // eslint-disable-line no-shadow
+
+    if (smileys.is(':visible')) {
+        smileys.hide('slide', { direction: 'down',
+            duration: 300 });
     } else {
-        smileys.hide("slide", { direction: "down", duration: 300});
+        smileys.show('slide', { direction: 'down',
+            duration: 300 });
     }
     $('#usermsg').focus();
 }
 
+/**
+ *
+ */
 function addClickFunction(smiley, number) {
     smiley.onclick = function addSmileyToMessage() {
-        var usermsg = $('#usermsg');
-        var message = usermsg.val();
-        message += smileys['smiley' + number];
+        const usermsg = $('#usermsg');
+        let message = usermsg.val();
+
+        message += smileys[`smiley${number}`];
         usermsg.val(message);
         usermsg.get(0).setSelectionRange(message.length, message.length);
         toggleSmileys();
@@ -135,35 +146,38 @@ function addClickFunction(smiley, number) {
  * Adds the smileys container to the chat
  */
 function addSmileys() {
-    var smileysContainer = document.createElement('div');
+    const smileysContainer = document.createElement('div');
+
     smileysContainer.id = 'smileysContainer';
-    for(var i = 1; i <= 21; i++) {
-        var smileyContainer = document.createElement('div');
-        smileyContainer.id = 'smiley' + i;
+    for (let i = 1; i <= 21; i++) {
+        const smileyContainer = document.createElement('div');
+
+        smileyContainer.id = `smiley${i}`;
         smileyContainer.className = 'smileyContainer';
-        var smiley = document.createElement('img');
-        smiley.src = 'images/smileys/smiley' + i + '.svg';
-        smiley.className =  'smiley';
+        const smiley = document.createElement('img');
+
+        smiley.src = `images/smileys/smiley${i}.svg`;
+        smiley.className = 'smiley';
         addClickFunction(smiley, i);
         smileyContainer.appendChild(smiley);
         smileysContainer.appendChild(smileyContainer);
     }
 
-    $("#chat_container").append(smileysContainer);
+    $('#chat_container').append(smileysContainer);
 }
 
 /**
  * Resizes the chat conversation.
  */
 function resizeChatConversation() {
-    var msgareaHeight = $('#usermsg').outerHeight();
-    var chatspace = $('#' + CHAT_CONTAINER_ID);
-    var width = chatspace.width();
-    var chat = $('#chatconversation');
-    var smileys = $('#smileysarea');
+    const msgareaHeight = $('#usermsg').outerHeight();
+    const chatspace = $(`#${CHAT_CONTAINER_ID}`);
+    const width = chatspace.width();
+    const chat = $('#chatconversation');
+    const smileys = $('#smileysarea'); // eslint-disable-line no-shadow
 
     smileys.height(msgareaHeight);
-    $("#smileys").css('bottom', (msgareaHeight - 26) / 2);
+    $('#smileys').css('bottom', (msgareaHeight - 26) / 2);
     $('#smileysContainer').css('bottom', msgareaHeight);
     chat.width(width - 10);
     chat.height(window.innerHeight - 15 - msgareaHeight);
@@ -175,63 +189,71 @@ function resizeChatConversation() {
  *
  * @param id {string} input id
  */
-function deferredFocus(id){
+function deferredFocus(id) {
     setTimeout(() => $(`#${id}`).focus(), 400);
 }
+
 /**
  * Chat related user interface.
  */
-var Chat = {
+const Chat = {
     /**
      * Initializes chat related interface.
      */
-    init (eventEmitter) {
+    init(eventEmitter) {
         initHTML();
         if (APP.conference.getLocalDisplayName()) {
             Chat.setChatConversationMode(true);
         }
 
-        $("#smileys").click(function() {
+        $('#smileys').click(() => {
             Chat.toggleSmileys();
         });
 
-        $('#nickinput').keydown(function (event) {
+        $('#nickinput').keydown(function(event) {
             if (event.keyCode === 13) {
                 event.preventDefault();
-                let val = this.value;
-                this.value = '';
+                const val = this.value; // eslint-disable-line no-invalid-this
+
+                this.value = '';// eslint-disable-line no-invalid-this
                 eventEmitter.emit(UIEvents.NICKNAME_CHANGED, val);
                 deferredFocus('usermsg');
             }
         });
 
-        var usermsg = $('#usermsg');
-        usermsg.keydown(function (event) {
+        const usermsg = $('#usermsg');
+
+        usermsg.keydown(function(event) {
             if (event.keyCode === 13) {
                 event.preventDefault();
-                var value = this.value;
+                const value = this.value; // eslint-disable-line no-invalid-this
+
                 usermsg.val('').trigger('autosize.resize');
-                this.focus();
-                var command = new CommandsProcessor(value, eventEmitter);
+                this.focus();// eslint-disable-line no-invalid-this
+                const command = new CommandsProcessor(value, eventEmitter);
+
                 if (command.isCommand()) {
                     command.processCommand();
                 } else {
-                    var message = UIUtil.escapeHtml(value);
+                    const message = UIUtil.escapeHtml(value);
+
                     eventEmitter.emit(UIEvents.MESSAGE_CREATED, message);
                 }
             }
         });
 
-        var onTextAreaResize = function () {
+        const onTextAreaResize = function() {
             resizeChatConversation();
             Chat.scrollChatToBottom();
         };
-        usermsg.autosize({callback: onTextAreaResize});
+
+        usermsg.autosize({ callback: onTextAreaResize });
 
         eventEmitter.on(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
-            function(containerId, isVisible) {
-                if (containerId !== CHAT_CONTAINER_ID || !isVisible)
+            (containerId, isVisible) => {
+                if (containerId !== CHAT_CONTAINER_ID || !isVisible) {
                     return;
+                }
 
                 unreadMessages = 0;
                 updateVisualNotification();
@@ -257,13 +279,14 @@ var Chat = {
     /**
      * Appends the given message to the chat conversation.
      */
-    updateChatConversation (id, displayName, message, stamp) {
-        var divClassName = '';
+    // eslint-disable-next-line max-params
+    updateChatConversation(id, displayName, message, stamp) {
+        let divClassName = '';
 
         if (APP.conference.isLocalId(id)) {
-            divClassName = "localuser";
+            divClassName = 'localuser';
         } else {
-            divClassName = "remoteuser";
+            divClassName = 'remoteuser';
 
             if (!Chat.isVisible()) {
                 unreadMessages++;
@@ -275,22 +298,25 @@ var Chat = {
         // replace links and smileys
         // Strophe already escapes special symbols on sending,
         // so we escape here only tags to avoid double &amp;
-        var escMessage = message.replace(/</g, '&lt;').
-            replace(/>/g, '&gt;').replace(/\n/g, '<br/>');
-        var escDisplayName = UIUtil.escapeHtml(displayName);
+        const escMessage = message.replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+.replace(/\n/g, '<br/>');
+        const escDisplayName = UIUtil.escapeHtml(displayName);
+
+        // eslint-disable-next-line no-param-reassign
         message = processReplacements(escMessage);
 
-        var messageContainer =
-            '<div class="chatmessage">'+
-                '<img src="images/chatArrow.svg" class="chatArrow">' +
-                '<div class="username ' + divClassName +'">' + escDisplayName +
-                '</div>' + '<div class="timestamp">' + getCurrentTime(stamp) +
-                '</div>' + '<div class="usermessage">' + message + '</div>' +
-            '</div>';
+        const messageContainer
+            = `${'<div class="chatmessage">'
+                + '<img src="images/chatArrow.svg" class="chatArrow">'
+                + '<div class="username '}${divClassName}">${escDisplayName
+            }</div><div class="timestamp">${getCurrentTime(stamp)
+            }</div><div class="usermessage">${message}</div>`
+            + '</div>';
 
         $('#chatconversation').append(messageContainer);
         $('#chatconversation').animate(
-                { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
+                { scrollTop: $('#chatconversation')[0].scrollHeight }, 1000);
     },
 
     /**
@@ -298,25 +324,28 @@ var Chat = {
      * @param errorMessage the received error message.
      * @param originalText the original message.
      */
-    chatAddError (errorMessage, originalText) {
+    chatAddError(errorMessage, originalText) {
+        // eslint-disable-next-line no-param-reassign
         errorMessage = UIUtil.escapeHtml(errorMessage);
+        // eslint-disable-next-line no-param-reassign
         originalText = UIUtil.escapeHtml(originalText);
 
         $('#chatconversation').append(
-            '<div class="errorMessage"><b>Error: </b>' + 'Your message' +
-            (originalText? (` "${originalText}"`) : "") +
-            ' was not sent.' +
-            (errorMessage? (' Reason: ' + errorMessage) : '') +  '</div>');
+            `${'<div class="errorMessage"><b>Error: </b>Your message'}${
+                originalText ? ` "${originalText}"` : ''
+            } was not sent.${
+                errorMessage ? ` Reason: ${errorMessage}` : ''}</div>`);
         $('#chatconversation').animate(
-            { scrollTop: $('#chatconversation')[0].scrollHeight}, 1000);
+            { scrollTop: $('#chatconversation')[0].scrollHeight }, 1000);
     },
 
     /**
      * Sets the subject to the UI
      * @param subject the subject
      */
-    setSubject (subject) {
+    setSubject(subject) {
         if (subject) {
+            // eslint-disable-next-line no-param-reassign
             subject = subject.trim();
         }
 
@@ -332,16 +361,17 @@ var Chat = {
      * @param {boolean} isConversationMode if chat should be in
      * conversation mode or not.
      */
-    setChatConversationMode (isConversationMode) {
-        $('#' + CHAT_CONTAINER_ID)
+    setChatConversationMode(isConversationMode) {
+        $(`#${CHAT_CONTAINER_ID}`)
             .toggleClass('is-conversation-mode', isConversationMode);
     },
 
     /**
      * Resizes the chat area.
      */
-    resizeChat (width, height) {
-        $('#' + CHAT_CONTAINER_ID).width(width).height(height);
+    resizeChat(width, height) {
+        $(`#${CHAT_CONTAINER_ID}`).width(width)
+.height(height);
 
         resizeChatConversation();
     },
@@ -349,10 +379,11 @@ var Chat = {
     /**
      * Indicates if the chat is currently visible.
      */
-    isVisible () {
+    isVisible() {
         return UIUtil.isVisible(
             document.getElementById(CHAT_CONTAINER_ID));
     },
+
     /**
      * Shows and hides the window with the smileys
      */
@@ -361,7 +392,7 @@ var Chat = {
     /**
      * Scrolls chat to the bottom.
      */
-    scrollChatToBottom () {
+    scrollChatToBottom() {
         setTimeout(
             () => {
                 const chatconversation = $('#chatconversation');

modules/UI/side_pannels/chat/Commands.js

@@ -7,7 +7,7 @@ import UIEvents from '../../../../service/UI/UIEvents';
  * @type {{String: function}}
  */
 const commands = {
-    "topic" : processTopic
+    'topic': processTopic
 };
 
 /**
@@ -16,13 +16,15 @@ const commands = {
  * @returns {string} the command
  */
 function getCommand(message) {
-    if(message) {
-        for(var command in commands) {
-            if(message.indexOf("/" + command) === 0)
+    if (message) {
+        for (const command in commands) {
+            if (message.indexOf(`/${command}`) === 0) {
                 return command;
+            }
         }
     }
-    return "";
+
+    return '';
 }
 
 /**
@@ -30,7 +32,8 @@ function getCommand(message) {
  * @param commandArguments the arguments of the topic command.
  */
 function processTopic(commandArguments, emitter) {
-    var topic = UIUtil.escapeHtml(commandArguments);
+    const topic = UIUtil.escapeHtml(commandArguments);
+
     emitter.emit(UIEvents.SUBJECT_CHANGED, topic);
 }
 
@@ -41,7 +44,7 @@ function processTopic(commandArguments, emitter) {
  * @constructor
  */
 function CommandsProcessor(message, emitter) {
-    var command = getCommand(message);
+    const command = getCommand(message);
 
     this.emitter = emitter;
 
@@ -54,7 +57,7 @@ function CommandsProcessor(message, emitter) {
     };
 
 
-    var messageArgument = message.substr(command.length + 2);
+    const messageArgument = message.substr(command.length + 2);
 
     /**
      * Returns the arguments of the command.
@@ -70,8 +73,10 @@ function CommandsProcessor(message, emitter) {
  * @returns {boolean}
  */
 CommandsProcessor.prototype.isCommand = function() {
-    if (this.getCommand())
+    if (this.getCommand()) {
         return true;
+    }
+
     return false;
 };
 
@@ -79,8 +84,9 @@ CommandsProcessor.prototype.isCommand = function() {
  * Processes the command.
  */
 CommandsProcessor.prototype.processCommand = function() {
-    if(!this.isCommand())
+    if (!this.isCommand()) {
         return;
+    }
 
     commands[this.getCommand()](this.getArgument(), this.emitter);
 };

modules/UI/side_pannels/chat/Replacement.js

@@ -1,17 +1,11 @@
-/* jshint -W101 */
 import { regexes } from './smileys';
 
 /**
  * Processes links and smileys in "body"
  */
 export function processReplacements(body) {
-    //make links clickable
-    body = linkify(body);
-
-    //add smileys
-    body = smilify(body);
-
-    return body;
+    // make links clickable + add smileys
+    return smilify(linkify(body));
 }
 
 /**
@@ -19,20 +13,23 @@ export function processReplacements(body) {
  * with their <a href=""></a>
  */
 export function linkify(inputText) {
-    var replacedText, replacePattern1, replacePattern2, replacePattern3;
+    let replacedText;
+
+    /* eslint-disable no-useless-escape, max-len */
 
-    /* eslint-disable no-useless-escape */
+    // URLs starting with http://, https://, or ftp://
+    const replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
 
-    //URLs starting with http://, https://, or ftp://
-    replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
     replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
 
-    //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
-    replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+    // URLs starting with "www." (without // before it, or it'd re-link the ones done above).
+    const replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
+
     replacedText = replacedText.replace(replacePattern2, '$1<a href="https://$2" target="_blank" rel="noopener noreferrer">$2</a>');
 
-    //Change email addresses to mailto: links.
-    replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+    // Change email addresses to mailto: links.
+    const replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
+
     replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');
 
     /* eslint-enable no-useless-escape */
@@ -44,14 +41,16 @@ export function linkify(inputText) {
  * Replaces common smiley strings with images
  */
 function smilify(body) {
-    if(!body) {
+    if (!body) {
         return body;
     }
 
-    for(var smiley in regexes) {
-        if(regexes.hasOwnProperty(smiley)) {
-            body = body.replace(regexes[smiley],
-                    '<img class="smiley" src="images/smileys/' + smiley + '.svg">');
+    let formattedBody = body;
+
+    for (const smiley in regexes) {
+        if (regexes.hasOwnProperty(smiley)) {
+            formattedBody = formattedBody.replace(regexes[smiley],
+                `<img class="smiley" src="images/smileys/${smiley}.svg">`);
         }
     }
 

modules/UI/side_pannels/chat/smileys.js

@@ -1,25 +1,25 @@
 export const smileys = {
-    smiley1: ":)",
-    smiley2: ":(",
-    smiley3: ":D",
-    smiley4: "(y)",
-    smiley5: " :P",
-    smiley6: "(wave)",
-    smiley7: "(blush)",
-    smiley8: "(chuckle)",
-    smiley9: "(shocked)",
-    smiley10: ":*",
-    smiley11: "(n)",
-    smiley12: "(search)",
-    smiley13: " <3",
-    smiley14: "(oops)",
-    smiley15: "(angry)",
-    smiley16: "(angel)",
-    smiley17: "(sick)",
-    smiley18: ";(",
-    smiley19: "(bomb)",
-    smiley20: "(clap)",
-    smiley21: " ;)"
+    smiley1: ':)',
+    smiley2: ':(',
+    smiley3: ':D',
+    smiley4: '(y)',
+    smiley5: ' :P',
+    smiley6: '(wave)',
+    smiley7: '(blush)',
+    smiley8: '(chuckle)',
+    smiley9: '(shocked)',
+    smiley10: ':*',
+    smiley11: '(n)',
+    smiley12: '(search)',
+    smiley13: ' <3',
+    smiley14: '(oops)',
+    smiley15: '(angry)',
+    smiley16: '(angel)',
+    smiley17: '(sick)',
+    smiley18: ';(',
+    smiley19: '(bomb)',
+    smiley20: '(clap)',
+    smiley21: ' ;)'
 };
 
 export const regexes = {

modules/UI/side_pannels/contactlist/ContactListView.js

@@ -19,7 +19,7 @@ import UIUtil from '../../util/UIUtil';
  * the term "contact" is not used elsewhere. Normally people in the conference
  * are internally refered to as "participants" or externally as "members".
  */
-var ContactListView = {
+const ContactListView = {
     /**
      * Creates and appends the contact list to the side panel.
      *
@@ -33,7 +33,6 @@ var ContactListView = {
 
         $('#sideToolbarContainer').append(contactListPanelContainer);
 
-        /* jshint ignore:start */
         ReactDOM.render(
             <Provider store = { APP.store }>
                 <I18nextProvider i18n = { i18next }>
@@ -42,7 +41,6 @@ var ContactListView = {
             </Provider>,
             contactListPanelContainer
         );
-        /* jshint ignore:end */
     },
 
     /**
@@ -50,8 +48,8 @@ var ContactListView = {
      *
      * @return {boolean) true if the contact list is currently visible.
      */
-    isVisible () {
-        return UIUtil.isVisible(document.getElementById("contactlist"));
+    isVisible() {
+        return UIUtil.isVisible(document.getElementById('contactlist'));
     }
 };
 

modules/UI/side_pannels/profile/Profile.js

@@ -1,98 +1,117 @@
 /* global $, APP */
-import UIUtil from "../../util/UIUtil";
-import UIEvents from "../../../../service/UI/UIEvents";
+import UIUtil from '../../util/UIUtil';
+import UIEvents from '../../../../service/UI/UIEvents';
 import Settings from '../../../settings/Settings';
 
 import { sendEvent } from '../../../../react/features/analytics';
 
 const sidePanelsContainerId = 'sideToolbarContainer';
 const htmlStr = `
-    <div id="profile_container" class="sideToolbarContainer__inner">
-        <div class="title" data-i18n="profile.title"></div>
-        <div class="sideToolbarBlock first">
-            <label class="first" data-i18n="profile.setDisplayNameLabel">
+    <div id='profile_container' class='sideToolbarContainer__inner'>
+        <div class='title' data-i18n='profile.title'></div>
+        <div class='sideToolbarBlock first'>
+            <label class='first' data-i18n='profile.setDisplayNameLabel'>
             </label>
-            <input class="input-control" type="text" id="setDisplayName"
-                data-i18n="[placeholder]settings.name">
+            <input class='input-control' type='text' id='setDisplayName'
+                data-i18n='[placeholder]settings.name'>
         </div>
-        <div class="sideToolbarBlock">
-            <label data-i18n="profile.setEmailLabel"></label>
-            <input id="setEmail" type="text" class="input-control"
-                data-i18n="[placeholder]profile.setEmailInput">
+        <div class='sideToolbarBlock'>
+            <label data-i18n='profile.setEmailLabel'></label>
+            <input id='setEmail' type='text' class='input-control'
+                data-i18n='[placeholder]profile.setEmailInput'>
         </div>
-        <div id="profile_auth_container"
-             class="sideToolbarBlock auth_container">
-            <p data-i18n="toolbar.authenticate"></p>
+        <div id='profile_auth_container'
+             class='sideToolbarBlock auth_container'>
+            <p data-i18n='toolbar.authenticate'></p>
             <ul>
-                <li id="profile_auth_identity"></li>
-                <li id="profile_button_login">
-                    <a class="authButton" data-i18n="toolbar.login"></a>
+                <li id='profile_auth_identity'></li>
+                <li id='profile_button_login'>
+                    <a class='authButton' data-i18n='toolbar.login'></a>
                 </li>
-                <li id="profile_button_logout">
-                    <a class="authButton" data-i18n="toolbar.logout"></a>
+                <li id='profile_button_logout'>
+                    <a class='authButton' data-i18n='toolbar.logout'></a>
                 </li>
             </ul>
         </div>
     </div>`;
 
+/**
+ *
+ */
 function initHTML() {
     $(`#${sidePanelsContainerId}`)
         .append(htmlStr);
+
     // make sure we translate the panel, as adding it can be after i18n
     // library had initialized and translated already present html
     APP.translation.translateElement($(`#${sidePanelsContainerId}`));
 }
 
 export default {
-    init (emitter) {
+    init(emitter) {
         initHTML();
-        // DISPLAY NAME
-        function updateDisplayName () {
+
+        /**
+         * Updates display name.
+         *
+         * @returns {void}
+         */
+        function updateDisplayName() {
             emitter.emit(UIEvents.NICKNAME_CHANGED, $('#setDisplayName').val());
         }
 
         $('#setDisplayName')
             .val(Settings.getDisplayName())
-            .keyup(function (event) {
+            .keyup(event => {
                 if (event.keyCode === 13) { // enter
                     updateDisplayName();
                 }
             })
             .focusout(updateDisplayName);
 
-
-        // EMAIL
-        function updateEmail () {
+        /**
+         * Updates the email.
+         *
+         * @returns {void}
+         */
+        function updateEmail() {
             emitter.emit(UIEvents.EMAIL_CHANGED, $('#setEmail').val());
         }
 
         $('#setEmail')
             .val(Settings.getEmail())
-            .keyup(function (event) {
+            .keyup(event => {
                 if (event.keyCode === 13) { // enter
                     updateEmail();
                 }
-            }).focusout(updateEmail);
+            })
+            .focusout(updateEmail);
 
-        // LOGIN
-        function loginClicked () {
+        /**
+         *
+         */
+        function loginClicked() {
             sendEvent('authenticate.login.clicked');
             emitter.emit(UIEvents.AUTH_CLICKED);
         }
 
         $('#profile_button_login').click(loginClicked);
 
-        // LOGOUT
-        function logoutClicked () {
-            let titleKey = "dialog.logoutTitle";
-            let msgKey = "dialog.logoutQuestion";
+        /**
+         *
+         */
+        function logoutClicked() {
+            const titleKey = 'dialog.logoutTitle';
+            const msgKey = 'dialog.logoutQuestion';
+
             sendEvent('authenticate.logout.clicked');
+
             // Ask for confirmation
             APP.UI.messageHandler.openTwoButtonDialog({
-                titleKey: titleKey,
-                msgKey: msgKey,
-                leftButtonKey: "dialog.Yes",
-                submitFunction: function (evt, yes) {
+                titleKey,
+                msgKey,
+                leftButtonKey: 'dialog.Yes',
+                submitFunction(evt, yes) {
                     if (yes) {
                         emitter.emit(UIEvents.LOGOUT);
                     }
@@ -107,15 +126,15 @@ export default {
      * Check if settings menu is visible or not.
      * @returns {boolean}
      */
-    isVisible () {
-        return UIUtil.isVisible(document.getElementById("profile_container"));
+    isVisible() {
+        return UIUtil.isVisible(document.getElementById('profile_container'));
     },
 
     /**
      * Change user display name in the settings menu.
      * @param {string} newDisplayName
      */
-    changeDisplayName (newDisplayName) {
+    changeDisplayName(newDisplayName) {
         $('#setDisplayName').val(newDisplayName);
     },
 
@@ -123,7 +142,7 @@ export default {
      * Change user avatar in the settings menu.
      * @param {string} avatarUrl url of the new avatar
      */
-    changeAvatar (avatarUrl) {
+    changeAvatar(avatarUrl) {
         $('#avatar').attr('src', avatarUrl);
     },
 
@@ -131,7 +150,7 @@ export default {
      * Change the value of the field for the user email.
      * @param {string} email the new value that will be displayed in the field.
      */
-    changeEmail (email) {
+    changeEmail(email) {
         $('#setEmail').val(email);
     },
 
@@ -139,8 +158,9 @@ export default {
      * Shows or hides authentication related buttons
      * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
      */
-    showAuthenticationButtons (show) {
-        let id = 'profile_auth_container';
+    showAuthenticationButtons(show) {
+        const id = 'profile_auth_container';
+
         UIUtil.setVisible(id, show);
     },
 
@@ -148,8 +168,8 @@ export default {
      * Shows/hides login button.
      * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
      */
-    showLoginButton (show) {
-        let id = 'profile_button_login';
+    showLoginButton(show) {
+        const id = 'profile_button_login';
 
         UIUtil.setVisible(id, show);
     },
@@ -158,8 +178,8 @@ export default {
      * Shows/hides logout button.
      * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
      */
-    showLogoutButton (show) {
-        let id = 'profile_button_logout';
+    showLogoutButton(show) {
+        const id = 'profile_button_logout';
 
         UIUtil.setVisible(id, show);
     },
@@ -168,10 +188,10 @@ export default {
      * Displays user's authenticated identity name (login).
      * @param {string} authIdentity identity name to be displayed.
      */
-    setAuthenticatedIdentity (authIdentity) {
-        let id = 'profile_auth_identity';
+    setAuthenticatedIdentity(authIdentity) {
+        const id = 'profile_auth_identity';
 
-        UIUtil.setVisible(id, !!authIdentity);
+        UIUtil.setVisible(id, Boolean(authIdentity));
 
         $(`#${id}`).text(authIdentity ? authIdentity : '');
     }

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,10 +1,10 @@
 /* global $, APP, AJS, interfaceConfig */
-import { LANGUAGES } from "../../../../react/features/base/i18n";
+import { LANGUAGES } from '../../../../react/features/base/i18n';
 import { openDeviceSelectionDialog }
     from '../../../../react/features/device-selection';
 
-import UIUtil from "../../util/UIUtil";
-import UIEvents from "../../../../service/UI/UIEvents";
+import UIUtil from '../../util/UIUtil';
+import UIEvents from '../../../../service/UI/UIEvents';
 
 const sidePanelsContainerId = 'sideToolbarContainer';
 const deviceSelectionButtonClasses
@@ -13,12 +13,12 @@ const htmlStr = `
     <div id="settings_container" class="sideToolbarContainer__inner">
         <div class="title" data-i18n="settings.title"></div>
         <form class="aui">
-            <div id="languagesSelectWrapper" 
+            <div id="languagesSelectWrapper"
                 class="sideToolbarBlock first hide">
                 <select id="languagesSelect"></select>
             </div>
             <div id="deviceOptionsWrapper" class="hide">
-                <div id="deviceOptionsTitle" class="subTitle hide" 
+                <div id="deviceOptionsTitle" class="subTitle hide"
                     data-i18n="settings.audioVideo"></div>
                 <div class="sideToolbarBlock first">
                     <button
@@ -29,24 +29,24 @@ const htmlStr = `
                 </div>
             </div>
             <div id="moderatorOptionsWrapper" class="hide">
-                <div id="moderatorOptionsTitle" class="subTitle hide" 
+                <div id="moderatorOptionsTitle" class="subTitle hide"
                     data-i18n="settings.moderator"></div>
                 <div id="startMutedOptions" class="hide">
                     <div class="sideToolbarBlock first">
                         <input type="checkbox" id="startAudioMuted">
-                        <label class="startMutedLabel" for="startAudioMuted" 
+                        <label class="startMutedLabel" for="startAudioMuted"
                             data-i18n="settings.startAudioMuted"></label>
                     </div>
                     <div class="sideToolbarBlock">
                         <input type="checkbox" id="startVideoMuted">
-                        <label class="startMutedLabel" for="startVideoMuted" 
+                        <label class="startMutedLabel" for="startVideoMuted"
                             data-i18n="settings.startVideoMuted"></label>
                     </div>
                 </div>
                 <div id="followMeOptions" class="hide">
                     <div class="sideToolbarBlock">
                         <input type="checkbox" id="followMeCheckBox">
-                        <label class="followMeLabel" for="followMeCheckBox" 
+                        <label class="followMeLabel" for="followMeCheckBox"
                             data-i18n="settings.followMe"></label>
                     </div>
                 </div>
@@ -54,9 +54,13 @@ const htmlStr = `
         </form>
     </div>`;
 
+/**
+ *
+ */
 function initHTML() {
     $(`#${sidePanelsContainerId}`)
         .append(htmlStr);
+
     // make sure we translate the panel, as adding it can be after i18n
     // library had initialized and translated already present html
     APP.translation.translateElement($(`#${sidePanelsContainerId}`));
@@ -70,8 +74,8 @@ function initHTML() {
  * @returns {string}
  */
 function generateLanguagesOptions(items, currentLang) {
-    return items.map(function (lang) {
-        let attrs = {
+    return items.map(lang => {
+        const attrs = {
             value: lang,
             'data-i18n': `languages:${lang}`
         };
@@ -80,7 +84,9 @@ function generateLanguagesOptions(items, currentLang) {
             attrs.selected = 'selected';
         }
 
-        let attrsStr = UIUtil.attrsToString(attrs);
+        const attrsStr = UIUtil.attrsToString(attrs);
+
+
         return `<option ${attrsStr}></option>`;
     }).join('');
 }
@@ -101,14 +107,15 @@ function initSelect2($el, onSelectedCb) {
 }
 
 export default {
-    init (emitter) {
+    init(emitter) {
         initHTML();
-        //LANGUAGES BOX
+
+        // LANGUAGES BOX
         if (UIUtil.isSettingEnabled('language')) {
             const wrapperId = 'languagesSelectWrapper';
             const selectId = 'languagesSelect';
             const selectEl = AJS.$(`#${selectId}`);
-            let selectInput;
+            let selectInput; // eslint-disable-line prefer-const
 
             selectEl.html(generateLanguagesOptions(
                 LANGUAGES,
@@ -121,11 +128,13 @@ export default {
                 APP.translation.translateElement(selectInput);
                 emitter.emit(UIEvents.LANG_CHANGED, val);
             });
-            //find new selectInput element
+
+            // find new selectInput element
             selectInput = $(`#s2id_${selectId} .select2-chosen`);
-            //first select fix for languages options
-            selectInput[0].dataset.i18n =
-                `languages:${APP.translation.getCurrentLanguage()}`;
+
+            // first select fix for languages options
+            selectInput[0].dataset.i18n
+                = `languages:${APP.translation.getCurrentLanguage()}`;
 
             // translate selectInput, which is the currently selected language
             // otherwise there will be no selected option
@@ -133,10 +142,13 @@ export default {
             APP.translation.translateElement(selectEl);
 
             APP.translation.addLanguageChangedListener(
-                lng => selectInput[0].dataset.i18n = `languages:${lng}`);
+                lng => {
+                    selectInput[0].dataset.i18n = `languages:${lng}`;
+                });
 
             UIUtil.setVisible(wrapperId, true);
         }
+
         // DEVICES LIST
         if (UIUtil.isSettingEnabled('devices')) {
             const wrapperId = 'deviceOptionsWrapper';
@@ -145,19 +157,21 @@ export default {
                 APP.store.dispatch(openDeviceSelectionDialog()));
 
             // Only show the subtitle if this isn't the only setting section.
-            if (interfaceConfig.SETTINGS_SECTIONS.length > 1)
-                UIUtil.setVisible("deviceOptionsTitle", true);
+            if (interfaceConfig.SETTINGS_SECTIONS.length > 1) {
+                UIUtil.setVisible('deviceOptionsTitle', true);
+            }
 
             UIUtil.setVisible(wrapperId, true);
         }
+
         // MODERATOR
         if (UIUtil.isSettingEnabled('moderator')) {
             const wrapperId = 'moderatorOptionsWrapper';
 
             // START MUTED
-            $("#startMutedOptions").change(function () {
-                let startAudioMuted = $("#startAudioMuted").is(":checked");
-                let startVideoMuted = $("#startVideoMuted").is(":checked");
+            $('#startMutedOptions').change(() => {
+                const startAudioMuted = $('#startAudioMuted').is(':checked');
+                const startVideoMuted = $('#startVideoMuted').is(':checked');
 
                 emitter.emit(
                     UIEvents.START_MUTED_CHANGED,
@@ -168,8 +182,10 @@ export default {
 
             // FOLLOW ME
             const followMeToggle = document.getElementById('followMeCheckBox');
+
             followMeToggle.addEventListener('change', () => {
                 const isFollowMeEnabled = followMeToggle.checked;
+
                 emitter.emit(UIEvents.FOLLOW_ME_ENABLED, isFollowMeEnabled);
             });
 
@@ -181,26 +197,28 @@ export default {
      * If start audio muted/start video muted options should be visible or not.
      * @param {boolean} show
      */
-    showStartMutedOptions (show) {
+    showStartMutedOptions(show) {
         if (show && UIUtil.isSettingEnabled('moderator')) {
             // Only show the subtitle if this isn't the only setting section.
-            if (!$("#moderatorOptionsTitle").is(":visible")
-                    && interfaceConfig.SETTINGS_SECTIONS.length > 1)
-                UIUtil.setVisible("moderatorOptionsTitle", true);
+            if (!$('#moderatorOptionsTitle').is(':visible')
+                    && interfaceConfig.SETTINGS_SECTIONS.length > 1) {
+                UIUtil.setVisible('moderatorOptionsTitle', true);
+            }
 
-            UIUtil.setVisible("startMutedOptions", true);
+            UIUtil.setVisible('startMutedOptions', true);
         } else {
             // Only show the subtitle if this isn't the only setting section.
-            if ($("#moderatorOptionsTitle").is(":visible"))
-                UIUtil.setVisible("moderatorOptionsTitle", false);
+            if ($('#moderatorOptionsTitle').is(':visible')) {
+                UIUtil.setVisible('moderatorOptionsTitle', false);
+            }
 
-            UIUtil.setVisible("startMutedOptions", false);
+            UIUtil.setVisible('startMutedOptions', false);
         }
     },
 
-    updateStartMutedBox (startAudioMuted, startVideoMuted) {
-        $("#startAudioMuted").attr("checked", startAudioMuted);
-        $("#startVideoMuted").attr("checked", startVideoMuted);
+    updateStartMutedBox(startAudioMuted, startVideoMuted) {
+        $('#startAudioMuted').attr('checked', startAudioMuted);
+        $('#startVideoMuted').attr('checked', startVideoMuted);
     },
 
     /**
@@ -208,9 +226,9 @@ export default {
      *
      * @param {boolean} show {true} to show those options, {false} to hide them
      */
-    showFollowMeOptions (show) {
+    showFollowMeOptions(show) {
         UIUtil.setVisible(
-            "followMeOptions",
+            'followMeOptions',
             show && UIUtil.isSettingEnabled('moderator'));
     },
 
@@ -218,7 +236,7 @@ export default {
      * Check if settings menu is visible or not.
      * @returns {boolean}
      */
-    isVisible () {
-        return UIUtil.isVisible(document.getElementById("settings_container"));
+    isVisible() {
+        return UIUtil.isVisible(document.getElementById('settings_container'));
     }
 };

modules/UI/util/MessageHandler.js

@@ -1,5 +1,5 @@
 /* global $, APP */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import jitsiLocalStorage from '../../util/JitsiLocalStorage';
 
@@ -31,12 +31,14 @@ let twoButtonDialog = null;
  * @returns {string}
  */
 function generateDontShowCheckbox(options) {
-    if(!isDontShowAgainEnabled(options)) {
-        return "";
+    if (!isDontShowAgainEnabled(options)) {
+        return '';
     }
 
-    let checked
-        = (options.checked === true) ? "checked" : "";
+    const checked
+        = options.checked === true ? 'checked' : '';
+
+
     return `<br />
         <label>
             <input type='checkbox' ${checked} id='${options.id}' />
@@ -54,12 +56,13 @@ function generateDontShowCheckbox(options) {
  * false otherwise.
  */
 function dontShowTheDialog(options) {
-    if(isDontShowAgainEnabled(options)) {
-        if(jitsiLocalStorage.getItem(options.localStorageKey || options.id)
-            === "true") {
+    if (isDontShowAgainEnabled(options)) {
+        if (jitsiLocalStorage.getItem(options.localStorageKey || options.id)
+            === 'true') {
             return true;
         }
     }
+
     return false;
 }
 
@@ -76,24 +79,27 @@ function dontShowTheDialog(options) {
  * @returns {Function} wrapped function
  */
 function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
-    if(isDontShowAgainEnabled(options)) {
+    if (isDontShowAgainEnabled(options)) {
         return (...args) => {
             logger.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}`);
+
+            // args[1] is the value associated with the pressed button
+            if (!options.buttonValues || options.buttonValues.length === 0
+                || options.buttonValues.indexOf(args[1]) !== -1) {
+                const checkbox = $(`#${options.id}`);
+
                 if (checkbox.length) {
                     jitsiLocalStorage.setItem(
                         options.localStorageKey || options.id,
-                        checkbox.prop("checked"));
+                        checkbox.prop('checked'));
                 }
             }
             submitFunction(...args);
         };
-    } else {
-        return submitFunction;
     }
+
+    return submitFunction;
+
 }
 
 /**
@@ -102,12 +108,12 @@ function dontShowAgainSubmitFunctionWrapper(options, submitFunction) {
  * @returns {boolean} true if enabled and false if not.
  */
 function isDontShowAgainEnabled(options) {
-    return typeof options === "object";
+    return typeof options === 'object';
 }
 
-var messageHandler = {
-    OK: "dialog.OK",
-    CANCEL: "dialog.Cancel",
+const messageHandler = {
+    OK: 'dialog.OK',
+    CANCEL: 'dialog.Cancel',
 
     /**
      * Shows a message to the user.
@@ -120,25 +126,32 @@ var messageHandler = {
      * the prompt is closed (optional)
      * @return the prompt that was created, or null
      */
+    // eslint-disable-next-line max-params
     openMessageDialog(titleKey, messageKey, i18nOptions, closeFunction) {
-        if (!popupEnabled)
+        if (!popupEnabled) {
             return null;
+        }
 
-        let dialog = $.prompt(
+        const dialog = $.prompt(
             APP.translation.generateTranslationHTML(messageKey, i18nOptions),
             {
                 title: this._getFormattedTitleString(titleKey),
                 persistent: false,
                 promptspeed: 0,
                 classes: this._getDialogClasses(),
+                // eslint-disable-next-line max-params
                 close(e, v, m, f) {
-                    if(closeFunction)
+                    if (closeFunction) {
                         closeFunction(e, v, m, f);
+                    }
                 }
             });
+
         APP.translation.translateElement(dialog, i18nOptions);
+
         return $.prompt.getApi();
     },
+
     /**
      * Shows a message to the user with two buttons: first is given as a
      * parameter and the second is Cancel.
@@ -169,8 +182,8 @@ var messageHandler = {
      * storage. if not provided dontShowAgain.id will be used.
      * @return the prompt that was created, or null
      */
-    openTwoButtonDialog: function(options) {
-        let {
+    openTwoButtonDialog(options) {
+        const {
             titleKey,
             msgKey,
             msgString,
@@ -182,32 +195,40 @@ var messageHandler = {
             size,
             defaultButton,
             wrapperClass,
-            classes,
             dontShowAgain
         } = options;
 
-        if (!popupEnabled || twoButtonDialog)
+        let { classes } = options;
+
+        if (!popupEnabled || twoButtonDialog) {
             return null;
+        }
 
-        if(dontShowTheDialog(dontShowAgain)) {
+        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 = [];
+        const buttons = [];
+
+        const leftButton = leftButtonKey
+            ? APP.translation.generateTranslationHTML(leftButtonKey)
+            : APP.translation.generateTranslationHTML('dialog.Submit');
 
-        var leftButton = leftButtonKey ?
-            APP.translation.generateTranslationHTML(leftButtonKey) :
-            APP.translation.generateTranslationHTML('dialog.Submit');
-        buttons.push({ title: leftButton, value: true});
+        buttons.push({ title: leftButton,
+            value: true });
 
-        var cancelButton
-            = APP.translation.generateTranslationHTML("dialog.Cancel");
-        buttons.push({title: cancelButton, value: false});
+        const cancelButton
+            = APP.translation.generateTranslationHTML('dialog.Cancel');
+
+        buttons.push({ title: cancelButton,
+            value: false });
+
+        let message = msgString;
 
-        var message = msgString;
         if (msgKey) {
             message = APP.translation.generateTranslationHTML(msgKey);
         }
@@ -220,20 +241,20 @@ var messageHandler = {
         twoButtonDialog = $.prompt(message, {
             title: this._getFormattedTitleString(titleKey),
             persistent: false,
-            buttons: buttons,
-            defaultButton: defaultButton,
-            focus: focus,
+            buttons,
+            defaultButton,
+            focus,
             loaded: loadedFunction,
             promptspeed: 0,
             classes,
             submit: dontShowAgainSubmitFunctionWrapper(dontShowAgain,
-                function (e, v, m, f) {
+                (e, v, m, f) => { // eslint-disable-line max-params
                     twoButtonDialog = null;
                     if (v && submitFunction) {
                         submitFunction(e, v, m, f);
                     }
                 }),
-            close: function (e, v, m, f) {
+            close(e, v, m, f) { // eslint-disable-line max-params
                 twoButtonDialog = null;
                 if (closeFunction) {
                     closeFunction(e, v, m, f);
@@ -241,6 +262,7 @@ var messageHandler = {
             }
         });
         APP.translation.translateElement(twoButtonDialog);
+
         return $.prompt.getApi();
     },
 
@@ -270,7 +292,7 @@ var messageHandler = {
      * @param {string} dontShowAgain.localStorageKey the key for the local
      * storage. if not provided dontShowAgain.id will be used.
      */
-    openDialog(
+    openDialog(// eslint-disable-line max-params
             titleKey,
             msgString,
             persistent,
@@ -279,29 +301,33 @@ var messageHandler = {
             loadedFunction,
             closeFunction,
             dontShowAgain) {
-        if (!popupEnabled)
+        if (!popupEnabled) {
             return;
+        }
 
-        if(dontShowTheDialog(dontShowAgain)) {
+        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 = {
+        const args = {
             title: this._getFormattedTitleString(titleKey),
-            persistent: persistent,
-            buttons: buttons,
+            persistent,
+            buttons,
             defaultButton: 1,
             promptspeed: 0,
-            loaded: function() {
+            loaded() {
                 if (loadedFunction) {
+                    // eslint-disable-next-line prefer-rest-params
                     loadedFunction.apply(this, arguments);
                 }
+
                 // Hide the close button
                 if (persistent) {
-                    $(".jqiclose", this).hide();
+                    $('.jqiclose', this).hide();
                 }
             },
             submit: dontShowAgainSubmitFunctionWrapper(
@@ -314,9 +340,11 @@ var messageHandler = {
             args.closeText = '';
         }
 
-        let dialog = $.prompt(
+        const dialog = $.prompt(
             msgString + generateDontShowCheckbox(dontShowAgain), args);
+
         APP.translation.translateElement(dialog);
+
         return $.prompt.getApi();
     },
 
@@ -326,10 +354,13 @@ var messageHandler = {
      * @return the title string formatted as a div.
      */
     _getFormattedTitleString(titleKey) {
-        let $titleString = $('<h2>');
+        const $titleString = $('<h2>');
+
         $titleString.addClass('aui-dialog2-header-main');
-        $titleString.attr('data-i18n',titleKey);
-        return $('<div>').append($titleString).html();
+        $titleString.attr('data-i18n', titleKey);
+
+        return $('<div>').append($titleString)
+.html();
     },
 
     /**
@@ -359,23 +390,28 @@ var messageHandler = {
      * @param options impromptu options
      * @param translateOptions options passed to translation
      */
-    openDialogWithStates: function (statesObject, options, translateOptions) {
-        if (!popupEnabled)
+    openDialogWithStates(statesObject, options, translateOptions) {
+        if (!popupEnabled) {
             return;
-        let { classes, size } = options;
-        let defaultClasses = this._getDialogClasses(size);
+        }
+        const { classes, size } = options;
+        const defaultClasses = this._getDialogClasses(size);
+
         options.classes = Object.assign({}, defaultClasses, classes);
         options.promptspeed = options.promptspeed || 0;
 
-        for (let state in statesObject) {
-            let currentState = statesObject[state];
-            if(currentState.titleKey) {
+        for (const state in statesObject) { // eslint-disable-line guard-for-in
+            const currentState = statesObject[state];
+
+            if (currentState.titleKey) {
                 currentState.title
                     = this._getFormattedTitleString(currentState.titleKey);
             }
         }
-        let dialog = $.prompt(statesObject, options);
+        const dialog = $.prompt(statesObject, options);
+
         APP.translation.translateElement(dialog, translateOptions);
+
         return $.prompt.getApi();
     },
 
@@ -392,17 +428,20 @@ var messageHandler = {
      * @returns {object} popup window object if opened successfully or undefined
      *          in case we failed to open it(popup blocked)
      */
-    openCenteredPopup: function (url, w, h, onPopupClosed) {
-        if (!popupEnabled)
+    // eslint-disable-next-line max-params
+    openCenteredPopup(url, w, h, onPopupClosed) {
+        if (!popupEnabled) {
             return;
+        }
 
-        var l = window.screenX + (window.innerWidth / 2) - (w / 2);
-        var t = window.screenY + (window.innerHeight / 2) - (h / 2);
-        var popup = window.open(
+        const l = window.screenX + (window.innerWidth / 2) - (w / 2);
+        const t = window.screenY + (window.innerHeight / 2) - (h / 2);
+        const popup = window.open(
             url, '_blank',
-            'top=' + t + ', left=' + l + ', width=' + w + ', height=' + h + '');
+            String(`top=${t}, left=${l}, width=${w}, height=${h}`));
+
         if (popup && onPopupClosed) {
-            var pollTimer = window.setInterval(function () {
+            const pollTimer = window.setInterval(() => {
                 if (popup.closed !== false) {
                     window.clearInterval(pollTimer);
                     onPopupClosed();
@@ -420,10 +459,11 @@ var messageHandler = {
      * @param msgKey the text of the message
      * @param error the error that is being reported
      */
-    openReportDialog: function(titleKey, msgKey, error) {
+    openReportDialog(titleKey, msgKey, error) {
         this.openMessageDialog(titleKey, msgKey);
         logger.log(error);
-        //FIXME send the error to the server
+
+        // FIXME send the error to the server
     },
 
     /**
@@ -431,14 +471,7 @@ var messageHandler = {
      * @param titleKey the title of the message.
      * @param msgKey the text of the message.
      */
-    showError: function(titleKey, msgKey) {
-
-        if (!titleKey) {
-            titleKey = "dialog.oops";
-        }
-        if (!msgKey) {
-            msgKey = "dialog.defaultError";
-        }
+    showError(titleKey = 'dialog.oops', msgKey = 'dialog.defaultError') {
         messageHandler.openMessageDialog(titleKey, msgKey);
     },
 
@@ -454,7 +487,7 @@ var messageHandler = {
      * @param messageArguments object with the arguments for the message.
      * @param optional configurations for the notification (e.g. timeout)
      */
-    participantNotification(
+    participantNotification( // eslint-disable-line max-params
             displayName,
             displayNameKey,
             cls,
@@ -484,12 +517,12 @@ var messageHandler = {
      * translation.
      * @returns {void}
      */
-    notify: function(titleKey, messageKey, messageArguments) {
+    notify(titleKey, messageKey, messageArguments) {
         this.participantNotification(
             null, titleKey, null, messageKey, messageArguments);
     },
 
-    enablePopups: function (enable) {
+    enablePopups(enable) {
         popupEnabled = enable;
     },
 
@@ -498,8 +531,8 @@ var messageHandler = {
      * false otherwise
      * @returns {boolean} isOpened
      */
-    isDialogOpened: function () {
-        return !!$.prompt.getCurrentStateName();
+    isDialogOpened() {
+        return Boolean($.prompt.getCurrentStateName());
     }
 };
 

modules/UI/util/UIUtil.js

@@ -31,7 +31,7 @@ const IndicatorFontSizes = {
 /**
  * Created by hristo on 12/22/14.
  */
-var UIUtil = {
+const UIUtil = {
 
     /**
      * Returns the available video width.
@@ -43,17 +43,18 @@ var UIUtil = {
     /**
      * Changes the style class of the element given by id.
      */
-    buttonClick: function(id, classname) {
+    buttonClick(id, classname) {
         // add the class to the clicked element
-        $("#" + id).toggleClass(classname);
+        $(`#${id}`).toggleClass(classname);
     },
+
     /**
      * Returns the text width for the given element.
      *
      * @param el the element
      */
     getTextWidth(el) {
-        return (el.clientWidth + 1);
+        return el.clientWidth + 1;
     },
 
     /**
@@ -62,7 +63,7 @@ var UIUtil = {
      * @param el the element
      */
     getTextHeight(el) {
-        return (el.clientHeight + 1);
+        return el.clientHeight + 1;
     },
 
     /**
@@ -78,7 +79,8 @@ var UIUtil = {
      * Escapes the given text.
      */
     escapeHtml(unsafeText) {
-        return $('<div/>').text(unsafeText).html();
+        return $('<div/>').text(unsafeText)
+            .html();
     },
 
     /**
@@ -88,22 +90,27 @@ var UIUtil = {
      * @returns {string} unescaped html string.
      */
     unescapeHtml(safe) {
-        return $('<div />').html(safe).text();
+        return $('<div />').html(safe)
+            .text();
     },
 
     imageToGrayScale(canvas) {
-        var context = canvas.getContext('2d');
-        var imgData = context.getImageData(0, 0, canvas.width, canvas.height);
-        var pixels  = imgData.data;
-
-        for (var i = 0, n = pixels.length; i < n; i += 4) {
-            var grayscale
-                = pixels[i] * 0.3 + pixels[i+1] * 0.59 + pixels[i+2] * 0.11;
-            pixels[i  ] = grayscale;        // red
-            pixels[i+1] = grayscale;        // green
-            pixels[i+2] = grayscale;        // blue
+        const context = canvas.getContext('2d');
+        const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
+        const pixels = imgData.data;
+
+        for (let i = 0, n = pixels.length; i < n; i += 4) {
+            const grayscale
+                = (pixels[i] * 0.3)
+                    + (pixels[i + 1] * 0.59)
+                    + (pixels[i + 2] * 0.11);
+
+            pixels[i] = grayscale; // red
+            pixels[i + 1] = grayscale; // green
+            pixels[i + 2] = grayscale; // blue
             // pixels[i+3]              is alpha
         }
+
         // redraw the image in black & white
         context.putImageData(imgData, 0, 0);
     },
@@ -114,7 +121,8 @@ var UIUtil = {
      * @param newChild the new element that will be inserted into the container
      */
     prependChild(container, newChild) {
-        var firstChild = container.childNodes[0];
+        const firstChild = container.childNodes[0];
+
         if (firstChild) {
             container.insertBefore(newChild, firstChild);
         } else {
@@ -152,6 +160,7 @@ var UIUtil = {
      */
     setVisible(id, visible) {
         let element;
+
         if (id instanceof HTMLElement) {
             element = id;
         } else {
@@ -162,20 +171,20 @@ var UIUtil = {
             return;
         }
 
-        if (!visible)
+        if (!visible) {
             element.classList.add('hide');
-        else if (element.classList.contains('hide')) {
+        } else if (element.classList.contains('hide')) {
             element.classList.remove('hide');
         }
 
-        let type = this._getElementDefaultDisplay(element.tagName);
-        let className = SHOW_CLASSES[type];
+        const type = this._getElementDefaultDisplay(element.tagName);
+        const className = SHOW_CLASSES[type];
 
         if (visible) {
             element.classList.add(className);
-        }
-        else if (element.classList.contains(className))
+        } else if (element.classList.contains(className)) {
             element.classList.remove(className);
+        }
     },
 
     /**
@@ -185,10 +194,11 @@ var UIUtil = {
      * @private
      */
     _getElementDefaultDisplay(tag) {
-        let tempElement = document.createElement(tag);
+        const tempElement = document.createElement(tag);
 
         document.body.appendChild(tempElement);
-        let style = window.getComputedStyle(tempElement).display;
+        const style = window.getComputedStyle(tempElement).display;
+
         document.body.removeChild(tempElement);
 
         return style;
@@ -203,7 +213,7 @@ var UIUtil = {
      */
     setVisibleBySelector(jquerySelector, isVisible) {
         if (jquerySelector && jquerySelector.length > 0) {
-            jquerySelector.css("visibility", isVisible ? "visible" : "hidden");
+            jquerySelector.css('visibility', isVisible ? 'visible' : 'hidden');
         }
     },
 
@@ -264,7 +274,8 @@ var UIUtil = {
       */
     attrsToString(attrs) {
         return (
-            Object.keys(attrs).map(key => ` ${key}="${attrs[key]}"`).join(' '));
+            Object.keys(attrs).map(key => ` ${key}="${attrs[key]}"`)
+.join(' '));
     },
 
     /**
@@ -275,7 +286,7 @@ var UIUtil = {
      * @param {el} The DOM element we'd like to check for visibility
      */
     isVisible(el) {
-        return (el.offsetParent !== null);
+        return el.offsetParent !== null;
     },
 
     /**
@@ -288,26 +299,33 @@ var UIUtil = {
      * element
      */
     animateShowElement(selector, show, hideDelay) {
-        if(show) {
-            if (!selector.is(":visible"))
-                selector.css("display", "inline-block");
+        if (show) {
+            if (!selector.is(':visible')) {
+                selector.css('display', 'inline-block');
+            }
 
             selector.fadeIn(300,
-                () => {selector.css({opacity: 1});}
+                () => {
+                    selector.css({ opacity: 1 });
+                }
             );
 
-            if (hideDelay && hideDelay > 0)
+            if (hideDelay && hideDelay > 0) {
                 setTimeout(
                     () => {
                         selector.fadeOut(
                             300,
-                            () => { selector.css({opacity: 0}); });
+                            () => {
+                                selector.css({ opacity: 0 });
+                            });
                     },
                     hideDelay);
-        }
-        else {
+            }
+        } else {
             selector.fadeOut(300,
-                () => {selector.css({opacity: 0});}
+                () => {
+                    selector.css({ opacity: 0 });
+                }
             );
         }
     },
@@ -318,7 +336,7 @@ var UIUtil = {
      * @param cssValue the string value we obtain when querying css properties
      */
     parseCssInt(cssValue) {
-        return parseInt(cssValue) || 0;
+        return parseInt(cssValue, 10) || 0;
     },
 
     /**
@@ -332,8 +350,8 @@ var UIUtil = {
             aLinkElement.attr('href', link);
         } else {
             aLinkElement.css({
-                "pointer-events": "none",
-                "cursor": "default"
+                'pointer-events': 'none',
+                'cursor': 'default'
             });
         }
     },

modules/UI/videolayout/Filmstrip.js

@@ -2,8 +2,8 @@
 
 import { setFilmstripVisibility } from '../../../react/features/filmstrip';
 
-import UIEvents from "../../../service/UI/UIEvents";
-import UIUtil from "../util/UIUtil";
+import UIEvents from '../../../service/UI/UIEvents';
+import UIUtil from '../util/UIUtil';
 
 import { sendEvent } from '../../../react/features/analytics';
 
@@ -13,7 +13,7 @@ const Filmstrip = {
      * @param eventEmitter the {EventEmitter} through which {Filmstrip} is to
      * emit/fire {UIEvents} (such as {UIEvents.TOGGLED_FILMSTRIP}).
      */
-    init (eventEmitter) {
+    init(eventEmitter) {
         this.iconMenuDownClassName = 'icon-menu-down';
         this.iconMenuUpClassName = 'icon-menu-up';
         this.filmstripContainerClassName = 'filmstrip';
@@ -33,13 +33,14 @@ const Filmstrip = {
      * Initializes the filmstrip toolbar.
      */
     _initFilmstripToolbar() {
-        let toolbarContainerHTML = this._generateToolbarHTML();
-        let className = this.filmstripContainerClassName;
-        let container = document.querySelector(`.${className}`);
+        const toolbarContainerHTML = this._generateToolbarHTML();
+        const className = this.filmstripContainerClassName;
+        const container = document.querySelector(`.${className}`);
 
         UIUtil.prependChild(container, toolbarContainerHTML);
 
-        let iconSelector = '#toggleFilmstripButton i';
+        const iconSelector = '#toggleFilmstripButton i';
+
         this.toggleFilmstripIcon = document.querySelector(iconSelector);
     },
 
@@ -49,8 +50,9 @@ const Filmstrip = {
      * @private
      */
     _generateToolbarHTML() {
-        let container = document.createElement('div');
-        let isVisible = this.isFilmstripVisible();
+        const container = document.createElement('div');
+        const isVisible = this.isFilmstripVisible();
+
         container.className = 'filmstrip__toolbar';
         container.innerHTML = `
             <button id="toggleFilmstripButton">
@@ -81,14 +83,15 @@ const Filmstrip = {
      * @private
      */
     _registerToggleFilmstripShortcut() {
-        let shortcut = 'F';
-        let shortcutAttr = 'filmstripPopover';
-        let description = 'keyboardShortcuts.toggleFilmstrip';
+        const shortcut = 'F';
+        const shortcutAttr = 'filmstripPopover';
+        const description = 'keyboardShortcuts.toggleFilmstrip';
+
         // Important:
         // Firing the event instead of executing toggleFilmstrip method because
         // it's important to hide the filmstrip by UI.toggleFilmstrip in order
         // to correctly resize the video area.
-        let handler = () => this.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
+        const handler = () => this.eventEmitter.emit(UIEvents.TOGGLE_FILMSTRIP);
 
         APP.keyboardshortcut.registerShortcut(
             shortcut,
@@ -102,8 +105,9 @@ const Filmstrip = {
      * Changes classes of icon for showing down state
      */
     showMenuDownIcon() {
-        let icon = this.toggleFilmstripIcon;
-        if(icon) {
+        const icon = this.toggleFilmstripIcon;
+
+        if (icon) {
             icon.classList.add(this.iconMenuDownClassName);
             icon.classList.remove(this.iconMenuUpClassName);
         }
@@ -113,8 +117,9 @@ const Filmstrip = {
      * Changes classes of icon for showing up state
      */
     showMenuUpIcon() {
-        let icon = this.toggleFilmstripIcon;
-        if(icon) {
+        const icon = this.toggleFilmstripIcon;
+
+        if (icon) {
             icon.classList.add(this.iconMenuUpClassName);
             icon.classList.remove(this.iconMenuDownClassName);
         }
@@ -137,7 +142,9 @@ const Filmstrip = {
      */
     toggleFilmstrip(visible, sendAnalytics = true) {
         const isVisibleDefined = typeof visible === 'boolean';
+
         if (!isVisibleDefined) {
+            // eslint-disable-next-line no-param-reassign
             visible = this.isFilmstripVisible();
         } else if (this.isFilmstripVisible() === visible) {
             return;
@@ -145,7 +152,7 @@ const Filmstrip = {
         if (sendAnalytics) {
             sendEvent('toolbar.filmstrip.toggled');
         }
-        this.filmstrip.toggleClass("hidden");
+        this.filmstrip.toggleClass('hidden');
 
         if (visible) {
             this.showMenuUpIcon();
@@ -190,9 +197,10 @@ const Filmstrip = {
         // display should be.
         if (this.isFilmstripVisible() && !interfaceConfig.VERTICAL_FILMSTRIP) {
             return $(`.${this.filmstripContainerClassName}`).outerHeight();
-        } else {
-            return 0;
         }
+
+        return 0;
+
     },
 
     /**
@@ -200,9 +208,9 @@ const Filmstrip = {
      * @returns {*|{localVideo, remoteVideo}}
      */
     calculateThumbnailSize() {
-        let availableSizes = this.calculateAvailableSize();
-        let width = availableSizes.availableWidth;
-        let height = availableSizes.availableHeight;
+        const availableSizes = this.calculateAvailableSize();
+        const width = availableSizes.availableWidth;
+        const height = availableSizes.availableHeight;
 
         return this.calculateThumbnailSizeFromAvailable(width, height);
     },
@@ -215,17 +223,17 @@ const Filmstrip = {
      */
     calculateAvailableSize() {
         let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
-        let thumbs = this.getThumbs(true);
-        let numvids = thumbs.remoteThumbs.length;
+        const thumbs = this.getThumbs(true);
+        const numvids = thumbs.remoteThumbs.length;
 
-        let localVideoContainer = $("#localVideoContainer");
+        const localVideoContainer = $('#localVideoContainer');
 
         /**
          * If the videoAreaAvailableWidth is set we use this one to calculate
          * the filmstrip width, because we're probably in a state where the
          * filmstrip size hasn't been updated yet, but it will be.
          */
-        let videoAreaAvailableWidth
+        const videoAreaAvailableWidth
             = UIUtil.getAvailableVideoWidth()
             - this._getFilmstripExtraPanelsWidth()
             - UIUtil.parseCssInt(this.filmstrip.css('right'), 10)
@@ -238,9 +246,9 @@ const Filmstrip = {
         let availableWidth = videoAreaAvailableWidth;
 
         // If local thumb is not hidden
-        if(thumbs.localThumb) {
+        if (thumbs.localThumb) {
             availableWidth = Math.floor(
-                (videoAreaAvailableWidth - (
+                videoAreaAvailableWidth - (
                     UIUtil.parseCssInt(
                         localVideoContainer.css('borderLeftWidth'), 10)
                     + UIUtil.parseCssInt(
@@ -252,7 +260,7 @@ const Filmstrip = {
                     + UIUtil.parseCssInt(
                         localVideoContainer.css('marginLeft'), 10)
                     + UIUtil.parseCssInt(
-                        localVideoContainer.css('marginRight'), 10)))
+                        localVideoContainer.css('marginRight'), 10))
             );
         }
 
@@ -260,9 +268,10 @@ const Filmstrip = {
         // filmstrip mode we don't need to calculate further any adjustments
         // to width based on the number of videos present.
         if (numvids && !interfaceConfig.VERTICAL_FILMSTRIP) {
-            let remoteVideoContainer = thumbs.remoteThumbs.eq(0);
+            const remoteVideoContainer = thumbs.remoteThumbs.eq(0);
+
             availableWidth = Math.floor(
-                (videoAreaAvailableWidth - numvids * (
+                videoAreaAvailableWidth - (numvids * (
                     UIUtil.parseCssInt(
                         remoteVideoContainer.css('borderLeftWidth'), 10)
                     + UIUtil.parseCssInt(
@@ -278,7 +287,8 @@ const Filmstrip = {
             );
         }
 
-        let maxHeight
+        const maxHeight
+
             // If the MAX_HEIGHT property hasn't been specified
             // we have the static value.
             = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
@@ -287,7 +297,8 @@ const Filmstrip = {
         availableHeight
             = Math.min(maxHeight, window.innerHeight - 18);
 
-        return { availableWidth, availableHeight };
+        return { availableWidth,
+            availableHeight };
     },
 
     /**
@@ -300,15 +311,19 @@ const Filmstrip = {
      * @private
      */
     _getFilmstripExtraPanelsWidth() {
-        let className = this.filmstripContainerClassName;
+        const className = this.filmstripContainerClassName;
         let width = 0;
+
         $(`.${className}`)
             .children()
-            .each(function () {
+            .each(function() {
+                /* eslint-disable no-invalid-this */
                 if (this.id !== 'remoteVideos') {
                     width += $(this).outerWidth();
                 }
+                /* eslint-enable no-invalid-this */
             });
+
         return width;
     },
 
@@ -362,16 +377,17 @@ const Filmstrip = {
 
         const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP
             ? 0 : this.getThumbs(true).remoteThumbs.length;
-        const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO /
-            interfaceConfig.LOCAL_THUMBNAIL_RATIO;
-        const lW = Math.min(availableWidth /
-            (remoteLocalWidthRatio * remoteThumbsInRow + 1), availableHeight *
-            interfaceConfig.LOCAL_THUMBNAIL_RATIO);
+        const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO
+            / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
+        const lW = Math.min(availableWidth
+            / ((remoteLocalWidthRatio * remoteThumbsInRow) + 1), availableHeight
+            * interfaceConfig.LOCAL_THUMBNAIL_RATIO);
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
 
         const remoteVideoWidth = lW * remoteLocalWidthRatio;
 
         let localVideo;
+
         if (interfaceConfig.VERTICAL_FILMSTRIP) {
             localVideo = {
                 thumbWidth: remoteVideoWidth,
@@ -401,28 +417,32 @@ const Filmstrip = {
      * @param forceUpdate
      * @returns {Promise}
      */
+    // eslint-disable-next-line max-params
     resizeThumbnails(local, remote, animate = false, forceUpdate = false) {
         return new Promise(resolve => {
-            let thumbs = this.getThumbs(!forceUpdate);
-            let promises = [];
+            const thumbs = this.getThumbs(!forceUpdate);
+            const promises = [];
 
-            if(thumbs.localThumb) {
-                promises.push(new Promise((resolve) => {
+            if (thumbs.localThumb) {
+                // eslint-disable-next-line no-shadow
+                promises.push(new Promise(resolve => {
                     thumbs.localThumb.animate({
                         height: local.thumbHeight,
                         width: local.thumbWidth
                     }, this._getAnimateOptions(animate, resolve));
                 }));
             }
-            if(thumbs.remoteThumbs) {
-                promises.push(new Promise((resolve) => {
+            if (thumbs.remoteThumbs) {
+                // eslint-disable-next-line no-shadow
+                promises.push(new Promise(resolve => {
                     thumbs.remoteThumbs.animate({
                         height: remote.thumbHeight,
                         width: remote.thumbWidth
                     }, this._getAnimateOptions(animate, resolve));
                 }));
             }
-            promises.push(new Promise((resolve) => {
+            // eslint-disable-next-line no-shadow
+            promises.push(new Promise(resolve => {
                 // Let CSS take care of height in vertical filmstrip mode.
                 if (interfaceConfig.VERTICAL_FILMSTRIP) {
                     $('#filmstripLocalVideo').animate({
@@ -438,9 +458,10 @@ const Filmstrip = {
             }));
 
             promises.push(new Promise(() => {
-                let { localThumb } = this.getThumbs();
-                let height = localThumb ? localThumb.height() : 0;
-                let fontSize = UIUtil.getIndicatorFontSize(height);
+                const { localThumb } = this.getThumbs();
+                const height = localThumb ? localThumb.height() : 0;
+                const fontSize = UIUtil.getIndicatorFontSize(height);
+
                 this.filmstrip.find('.indicator').animate({
                     fontSize
                 }, this._getAnimateOptions(animate, resolve));
@@ -471,24 +492,27 @@ const Filmstrip = {
 
     /**
      * Returns thumbnails of the filmstrip
-     * @param only_visible
+     * @param onlyVisible
      * @returns {object} thumbnails
      */
-    getThumbs(only_visible = false) {
+    getThumbs(onlyVisible = false) {
         let selector = 'span';
-        if (only_visible) {
+
+        if (onlyVisible) {
             selector += ':visible';
         }
 
-        let localThumb = $("#localVideoContainer");
-        let remoteThumbs = this.filmstripRemoteVideos.children(selector);
+        const localThumb = $('#localVideoContainer');
+        const remoteThumbs = this.filmstripRemoteVideos.children(selector);
 
         // Exclude the local video container if it has been hidden.
-        if (localThumb.hasClass("hidden")) {
+        if (localThumb.hasClass('hidden')) {
             return { remoteThumbs };
-        } else {
-            return { remoteThumbs, localThumb };
         }
+
+        return { remoteThumbs,
+            localThumb };
+
     }
 };
 

modules/UI/videolayout/LargeContainer.js

@@ -3,19 +3,19 @@
  * Base class for all Large containers which we can show.
  */
 export default class LargeContainer {
-
+    /* eslint-disable no-unused-vars, no-empty-function */
     /**
      * Show this container.
      * @returns Promise
      */
-    show () {
+    show() {
     }
 
     /**
      * Hide this container.
      * @returns Promise
      */
-    hide () {
+    hide() {
     }
 
     /**
@@ -24,20 +24,19 @@ export default class LargeContainer {
      * @param {number} containerHeight available height
      * @param {boolean} animate if container should animate it's resize process
      */
-    // eslint-disable-next-line no-unused-vars
-    resize (containerWidth, containerHeight, animate) {
+    resize(containerWidth, containerHeight, animate) {
     }
 
     /**
      * Handler for "hover in" events.
      */
-    onHoverIn (e) { // eslint-disable-line no-unused-vars
+    onHoverIn(e) {
     }
 
     /**
      * Handler for "hover out" events.
      */
-    onHoverOut (e) { // eslint-disable-line no-unused-vars
+    onHoverOut(e) {
     }
 
     /**
@@ -46,14 +45,14 @@ export default class LargeContainer {
      * @param {JitsiTrack?} stream new stream
      * @param {string} videoType video type
      */
-    setStream (userID, stream, videoType) {// eslint-disable-line no-unused-vars
+    setStream(userID, stream, videoType) {
     }
 
     /**
      * Show or hide user avatar.
      * @param {boolean} show
      */
-    showAvatar (show) { // eslint-disable-line no-unused-vars
+    showAvatar(show) {
     }
 
     /**
@@ -61,6 +60,8 @@ export default class LargeContainer {
      * when the container is on stage.
      * @return {boolean}
      */
-    stayOnStage () {
+    stayOnStage() {
     }
+
+    /* eslint-enable no-unused-vars, no-empty-function */
 }

modules/UI/videolayout/LargeVideoManager.js

@@ -7,7 +7,7 @@ import { Provider } from 'react-redux';
 import { PresenceLabel } from '../../../react/features/presence-status';
 /* eslint-enable no-unused-vars */
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import {
     JitsiParticipantConnectionStatus
@@ -16,15 +16,16 @@ import {
     updateKnownLargeVideoResolution
 } from '../../../react/features/large-video';
 
-import Avatar from "../avatar/Avatar";
-import {createDeferred} from '../../util/helpers';
-import UIEvents from "../../../service/UI/UIEvents";
-import UIUtil from "../util/UIUtil";
-import {VideoContainer, VIDEO_CONTAINER_TYPE} from "./VideoContainer";
+import Avatar from '../avatar/Avatar';
+import { createDeferred } from '../../util/helpers';
+import UIEvents from '../../../service/UI/UIEvents';
+import UIUtil from '../util/UIUtil';
+import { VideoContainer, VIDEO_CONTAINER_TYPE } from './VideoContainer';
 
-import AudioLevels from "../audio_levels/AudioLevels";
+import AudioLevels from '../audio_levels/AudioLevels';
 
 const DESKTOP_CONTAINER_TYPE = 'desktop';
+
 /**
  * The time interval in milliseconds to check the video resolution of the video
  * being displayed.
@@ -49,7 +50,10 @@ export default class LargeVideoManager {
             || containerType === DESKTOP_CONTAINER_TYPE;
     }
 
-    constructor (emitter) {
+    /**
+     *
+     */
+    constructor(emitter) {
         /**
          * The map of <tt>LargeContainer</tt>s where the key is the video
          * container type.
@@ -59,6 +63,7 @@ export default class LargeVideoManager {
         this.eventEmitter = emitter;
 
         this.state = VIDEO_CONTAINER_TYPE;
+
         // FIXME: We are passing resizeContainer as parameter which is calling
         // Container.resize. Probably there's better way to implement this.
         this.videoContainer = new VideoContainer(
@@ -125,7 +130,10 @@ export default class LargeVideoManager {
         this.removePresenceLabel();
     }
 
-    onHoverIn (e) {
+    /**
+     *
+     */
+    onHoverIn(e) {
         if (!this.state) {
             return;
         }
@@ -134,7 +142,10 @@ export default class LargeVideoManager {
         container.onHoverIn(e);
     }
 
-    onHoverOut (e) {
+    /**
+     *
+     */
+    onHoverOut(e) {
         if (!this.state) {
             return;
         }
@@ -146,9 +157,10 @@ export default class LargeVideoManager {
     /**
      * Called when the media connection has been interrupted.
      */
-    onVideoInterrupted () {
+    onVideoInterrupted() {
         this.enableLocalConnectionProblemFilter(true);
-        this._setLocalConnectionMessage("connection.RECONNECTING");
+        this._setLocalConnectionMessage('connection.RECONNECTING');
+
         // Show the message only if the video is currently being displayed
         this.showLocalConnectionMessage(
             LargeVideoManager.isVideoContainer(this.state));
@@ -157,17 +169,25 @@ export default class LargeVideoManager {
     /**
      * Called when the media connection has been restored.
      */
-    onVideoRestored () {
+    onVideoRestored() {
         this.enableLocalConnectionProblemFilter(false);
         this.showLocalConnectionMessage(false);
     }
 
-    get id () {
+    /**
+     *
+     */
+    get id() {
         const container = this.getCurrentContainer();
+
+
         return container.id;
     }
 
-    scheduleLargeVideoUpdate () {
+    /**
+     *
+     */
+    scheduleLargeVideoUpdate() {
         if (this.updateInProcess || !this.newStreamData) {
             return;
         }
@@ -175,6 +195,7 @@ export default class LargeVideoManager {
         this.updateInProcess = true;
 
         // Include hide()/fadeOut only if we're switching between users
+        // eslint-disable-next-line eqeqeq
         const isUserSwitch = this.newStreamData.id != this.id;
         const container = this.getCurrentContainer();
         const preUpdate = isUserSwitch ? container.hide() : Promise.resolve();
@@ -190,9 +211,11 @@ export default class LargeVideoManager {
 
             this.newStreamData = null;
 
-            logger.info("hover in %s", id);
+            logger.info('hover in %s', id);
             this.state = videoType;
+            // eslint-disable-next-line no-shadow
             const container = this.getCurrentContainer();
+
             container.setStream(id, stream, videoType);
 
             // change the avatar url on large
@@ -215,7 +238,7 @@ export default class LargeVideoManager {
                                 === JitsiParticipantConnectionStatus.ACTIVE
                         || wasUsersImageCached);
 
-            let showAvatar
+            const showAvatar
                 = isVideoContainer
                     && (APP.conference.isAudioOnly() || !isVideoRenderable);
 
@@ -225,6 +248,7 @@ export default class LargeVideoManager {
             // but we still should show watermark
             if (showAvatar) {
                 this.showWatermark(true);
+
                 // If the intention of this switch is to show the avatar
                 // we need to make sure that the video is hidden
                 promise = container.hide();
@@ -246,10 +270,10 @@ export default class LargeVideoManager {
             let messageKey = null;
 
             if (isConnectionInterrupted) {
-                messageKey = "connection.USER_CONNECTION_INTERRUPTED";
+                messageKey = 'connection.USER_CONNECTION_INTERRUPTED';
             } else if (connectionStatus
                     === JitsiParticipantConnectionStatus.INACTIVE) {
-                messageKey = "connection.LOW_BANDWIDTH";
+                messageKey = 'connection.LOW_BANDWIDTH';
             }
 
             // Make sure no notification about remote failure is shown as
@@ -302,21 +326,23 @@ export default class LargeVideoManager {
         this.videoContainer.showRemoteConnectionProblemIndicator(
             showProblemsIndication);
 
-        if (!messageKey) {
-            // Hide the message
-            this.showRemoteConnectionMessage(false);
-        } else {
+        if (messageKey) {
             // Get user's display name
-            let displayName
+            const displayName
                 = APP.conference.getParticipantDisplayName(id);
+
             this._setRemoteConnectionMessage(
                 messageKey,
-                { displayName: displayName });
+                { displayName });
 
             // Show it now only if the VideoContainer is on top
             this.showRemoteConnectionMessage(
                 LargeVideoManager.isVideoContainer(this.state));
+        } else {
+            // Hide the message
+            this.showRemoteConnectionMessage(false);
         }
+
     }
 
     /**
@@ -327,7 +353,7 @@ export default class LargeVideoManager {
      * @param {string?} videoType new video type
      * @returns {Promise}
      */
-    updateLargeVideo (userID, stream, videoType) {
+    updateLargeVideo(userID, stream, videoType) {
         if (this.newStreamData) {
             this.newStreamData.reject();
         }
@@ -345,7 +371,7 @@ export default class LargeVideoManager {
     /**
      * Update container size.
      */
-    updateContainerSize () {
+    updateContainerSize() {
         this.width = UIUtil.getAvailableVideoWidth();
         this.height = window.innerHeight;
     }
@@ -355,8 +381,9 @@ export default class LargeVideoManager {
      * @param {string} type type of container which should be resized.
      * @param {boolean} [animate=false] if resize process should be animated.
      */
-    resizeContainer (type, animate = false) {
-        let container = this.getContainer(type);
+    resizeContainer(type, animate = false) {
+        const container = this.getContainer(type);
+
         container.resize(this.width, this.height, animate);
     }
 
@@ -364,7 +391,7 @@ export default class LargeVideoManager {
      * Resize all Large containers.
      * @param {boolean} animate if resize process should be animated.
      */
-    resize (animate) {
+    resize(animate) {
         // resize all containers
         Object.keys(this.containers)
             .forEach(type => this.resizeContainer(type, animate));
@@ -384,15 +411,15 @@ export default class LargeVideoManager {
      *
      * @param enable <tt>true</tt> to enable, <tt>false</tt> to disable
      */
-    enableLocalConnectionProblemFilter (enable) {
+    enableLocalConnectionProblemFilter(enable) {
         this.videoContainer.enableLocalConnectionProblemFilter(enable);
     }
 
     /**
      * Updates the src of the dominant speaker avatar
      */
-    updateAvatar (avatarUrl) {
-        $("#dominantSpeakerAvatar").attr('src', avatarUrl);
+    updateAvatar(avatarUrl) {
+        $('#dominantSpeakerAvatar').attr('src', avatarUrl);
     }
 
     /**
@@ -400,8 +427,8 @@ export default class LargeVideoManager {
      *
      * @param lvl the new audio level to set
      */
-    updateLargeVideoAudioLevel (lvl) {
-        AudioLevels.updateLargeVideoAudioLevel("dominantSpeaker", lvl);
+    updateLargeVideoAudioLevel(lvl) {
+        AudioLevels.updateLargeVideoAudioLevel('dominantSpeaker', lvl);
     }
 
     /**
@@ -418,19 +445,18 @@ export default class LargeVideoManager {
 
         if (isConnectionMessageVisible) {
             this.removePresenceLabel();
+
             return;
         }
 
         const presenceLabelContainer = $('#remotePresenceMessage');
 
         if (presenceLabelContainer.length) {
-            /* jshint ignore:start */
             ReactDOM.render(
                 <Provider store = { APP.store }>
                     <PresenceLabel participantID = { id } />
                 </Provider>,
                 presenceLabelContainer.get(0));
-            /* jshint ignore:end */
         }
     }
 
@@ -443,9 +469,7 @@ export default class LargeVideoManager {
         const presenceLabelContainer = $('#remotePresenceMessage');
 
         if (presenceLabelContainer.length) {
-            /* jshint ignore:start */
             ReactDOM.unmountComponentAtNode(presenceLabelContainer.get(0));
-            /* jshint ignore:end */
         }
     }
 
@@ -453,7 +477,7 @@ export default class LargeVideoManager {
      * Show or hide watermark.
      * @param {boolean} show
      */
-    showWatermark (show) {
+    showWatermark(show) {
         $('.watermark').css('visibility', show ? 'visible' : 'hidden');
     }
 
@@ -463,12 +487,13 @@ export default class LargeVideoManager {
      * displayed or not. If missing the condition will be based on the value
      * obtained from {@link APP.conference.isConnectionInterrupted}.
      */
-    showLocalConnectionMessage (show) {
+    showLocalConnectionMessage(show) {
         if (typeof show !== 'boolean') {
+            // eslint-disable-next-line no-param-reassign
             show = APP.conference.isConnectionInterrupted();
         }
 
-        let id = 'localConnectionMessage';
+        const id = 'localConnectionMessage';
 
         UIUtil.setVisible(id, show);
 
@@ -489,11 +514,12 @@ export default class LargeVideoManager {
      * obtained form "APP.conference" and the message will be displayed if
      * the user's connection is either interrupted or inactive.
      */
-    showRemoteConnectionMessage (show) {
+    showRemoteConnectionMessage(show) {
         if (typeof show !== 'boolean') {
             const connStatus
                 = APP.conference.getParticipantConnectionStatus(this.id);
 
+            // eslint-disable-next-line no-param-reassign
             show = !APP.conference.isLocalId(this.id)
                 && (connStatus === JitsiParticipantConnectionStatus.INTERRUPTED
                     || connStatus
@@ -501,7 +527,8 @@ export default class LargeVideoManager {
         }
 
         if (show) {
-            $('#remoteConnectionMessage').css({display: "block"});
+            $('#remoteConnectionMessage').css({ display: 'block' });
+
             // 'videoConnectionMessage' message conflicts with 'avatarMessage',
             // so it must be hidden
             this.showLocalConnectionMessage(false);
@@ -520,11 +547,11 @@ export default class LargeVideoManager {
      *
      * @private
      */
-    _setRemoteConnectionMessage (msgKey, msgOptions) {
+    _setRemoteConnectionMessage(msgKey, msgOptions) {
         if (msgKey) {
             $('#remoteConnectionMessage')
-                .attr("data-i18n", msgKey)
-                .attr("data-i18n-options", JSON.stringify(msgOptions));
+                .attr('data-i18n', msgKey)
+                .attr('data-i18n-options', JSON.stringify(msgOptions));
             APP.translation.translateElement(
                 $('#remoteConnectionMessage'), msgOptions);
         }
@@ -539,9 +566,9 @@ export default class LargeVideoManager {
      *
      * @private
      */
-    _setLocalConnectionMessage (msgKey) {
+    _setLocalConnectionMessage(msgKey) {
         $('#localConnectionMessage')
-            .attr("data-i18n", msgKey);
+            .attr('data-i18n', msgKey);
         APP.translation.translateElement($('#localConnectionMessage'));
     }
 
@@ -550,7 +577,7 @@ export default class LargeVideoManager {
      * @param {string} type container type
      * @param {LargeContainer} container container to add.
      */
-    addContainer (type, container) {
+    addContainer(type, container) {
         if (this.containers[type]) {
             throw new Error(`container of type ${type} already exist`);
         }
@@ -564,8 +591,8 @@ export default class LargeVideoManager {
      * @param {string} type container type.
      * @returns {LargeContainer}
      */
-    getContainer (type) {
-        let container = this.containers[type];
+    getContainer(type) {
+        const container = this.containers[type];
 
         if (!container) {
             throw new Error(`container of type ${type} doesn't exist`);
@@ -598,7 +625,7 @@ export default class LargeVideoManager {
      * Remove Large container of specified type.
      * @param {string} type container type.
      */
-    removeContainer (type) {
+    removeContainer(type) {
         if (!this.containers[type]) {
             throw new Error(`container of type ${type} doesn't exist`);
         }
@@ -612,15 +639,17 @@ export default class LargeVideoManager {
      * @param {string} type container type.
      * @returns {Promise}
      */
-    showContainer (type) {
+    showContainer(type) {
         if (this.state === type) {
             return Promise.resolve();
         }
 
-        let oldContainer = this.containers[this.state];
+        const oldContainer = this.containers[this.state];
+
         // FIXME when video is being replaced with other content we need to hide
         // companion icons/messages. It would be best if the container would
         // be taking care of it by itself, but that is a bigger refactoring
+
         if (LargeVideoManager.isVideoContainer(this.state)) {
             this.showWatermark(false);
             this.showLocalConnectionMessage(false);
@@ -629,7 +658,7 @@ export default class LargeVideoManager {
         oldContainer.hide();
 
         this.state = type;
-        let container = this.getContainer(type);
+        const container = this.getContainer(type);
 
         return container.show().then(() => {
             if (LargeVideoManager.isVideoContainer(type)) {
@@ -638,6 +667,7 @@ export default class LargeVideoManager {
                 // the container would be taking care of it by itself, but that
                 // is a bigger refactoring
                 this.showWatermark(true);
+
                 // "avatar" and "video connection" can not be displayed both
                 // at the same time, but the latter is of higher priority and it
                 // will hide the avatar one if will be displayed.

modules/UI/videolayout/LocalVideo.js

@@ -9,29 +9,33 @@ import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet';
 import { VideoTrack } from '../../../react/features/base/media';
 /* eslint-enable no-unused-vars */
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
-import UIEvents from "../../../service/UI/UIEvents";
-import SmallVideo from "./SmallVideo";
+import UIEvents from '../../../service/UI/UIEvents';
+import SmallVideo from './SmallVideo';
 
+/**
+ *
+ */
 function LocalVideo(VideoLayout, emitter) {
-    this.videoSpanId = "localVideoContainer";
+    this.videoSpanId = 'localVideoContainer';
 
     this.container = this.createContainer();
     this.$container = $(this.container);
-    $("#filmstripLocalVideo").append(this.container);
+    $('#filmstripLocalVideo').append(this.container);
 
     this.localVideoId = null;
     this.bindHoverHandler();
-    if(config.enableLocalVideoFlip)
+    if (config.enableLocalVideoFlip) {
         this._buildContextMenu();
+    }
     this.isLocal = true;
     this.emitter = emitter;
     this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP
         ? 'left top' : 'top center';
 
     Object.defineProperty(this, 'id', {
-        get: function () {
+        get() {
             return APP.conference.getMyUserId();
         }
     });
@@ -49,8 +53,9 @@ function LocalVideo(VideoLayout, emitter) {
 LocalVideo.prototype = Object.create(SmallVideo.prototype);
 LocalVideo.prototype.constructor = LocalVideo;
 
-LocalVideo.prototype.createContainer = function () {
+LocalVideo.prototype.createContainer = function() {
     const containerSpan = document.createElement('span');
+
     containerSpan.classList.add('videocontainer');
     containerSpan.id = this.videoSpanId;
 
@@ -72,24 +77,25 @@ LocalVideo.prototype.createContainer = function () {
 LocalVideo.prototype.setDisplayName = function(displayName) {
     if (!this.container) {
         logger.warn(
-                "Unable to set displayName - " + this.videoSpanId +
-                " does not exist");
+                `Unable to set displayName - ${this.videoSpanId
+                } does not exist`);
+
         return;
     }
 
     this.updateDisplayName({
         allowEditing: true,
-        displayName: displayName,
+        displayName,
         displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
         elementID: 'localDisplayName',
         participantID: this.id
     });
 };
 
-LocalVideo.prototype.changeVideo = function (stream) {
+LocalVideo.prototype.changeVideo = function(stream) {
     this.videoStream = stream;
 
-    let localVideoClick = (event) => {
+    const localVideoClick = event => {
         // TODO Checking the classes is a workround to allow events to bubble
         // into the DisplayName component if it was clicked. React's synthetic
         // events will fire after jQuery handlers execute, so stop propogation
@@ -125,11 +131,10 @@ LocalVideo.prototype.changeVideo = function (stream) {
     this.$container.off('click');
     this.$container.on('click', localVideoClick);
 
-    this.localVideoId = 'localVideo_' + stream.getId();
+    this.localVideoId = `localVideo_${stream.getId()}`;
 
-    var localVideoContainer = document.getElementById('localVideoWrapper');
+    const localVideoContainer = document.getElementById('localVideoWrapper');
 
-    /* jshint ignore:start */
     ReactDOM.render(
         <Provider store = { APP.store }>
             <VideoTrack
@@ -138,13 +143,15 @@ LocalVideo.prototype.changeVideo = function (stream) {
         </Provider>,
         localVideoContainer
     );
-    /* jshint ignore:end */
 
-    let isVideo = stream.videoType != "desktop";
+    // eslint-disable-next-line eqeqeq
+    const isVideo = stream.videoType != 'desktop';
+
     this._enableDisableContextMenu(isVideo);
-    this.setFlipX(isVideo? APP.settings.getLocalFlipX() : false);
+    this.setFlipX(isVideo ? APP.settings.getLocalFlipX() : false);
+
+    const endedHandler = () => {
 
-    let endedHandler = () => {
         // Only remove if there is no video and not a transition state.
         // Previous non-react logic created a new video element with each track
         // removal whereas react reuses the video component so it could be the
@@ -160,6 +167,7 @@ LocalVideo.prototype.changeVideo = function (stream) {
         }
         stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
     };
+
     stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
 };
 
@@ -172,15 +180,14 @@ LocalVideo.prototype.setVisible = function(visible) {
 
     // We toggle the hidden class as an indication to other interested parties
     // that this container has been hidden on purpose.
-    this.$container.toggleClass("hidden");
+    this.$container.toggleClass('hidden');
 
     // We still show/hide it as we need to overwrite the style property if we
     // want our action to take effect. Toggling the display property through
     // the above css class didn't succeed in overwriting the style.
     if (visible) {
         this.$container.show();
-    }
-    else {
+    } else {
         this.$container.hide();
     }
 };
@@ -189,39 +196,41 @@ LocalVideo.prototype.setVisible = function(visible) {
  * Sets the flipX state of the video.
  * @param val {boolean} true for flipped otherwise false;
  */
-LocalVideo.prototype.setFlipX = function (val) {
+LocalVideo.prototype.setFlipX = function(val) {
     this.emitter.emit(UIEvents.LOCAL_FLIPX_CHANGED, val);
-    if(!this.localVideoId)
+    if (!this.localVideoId) {
         return;
-    if(val) {
-        this.selectVideoElement().addClass("flipVideoX");
+    }
+    if (val) {
+        this.selectVideoElement().addClass('flipVideoX');
     } else {
-        this.selectVideoElement().removeClass("flipVideoX");
+        this.selectVideoElement().removeClass('flipVideoX');
     }
 };
 
 /**
  * Builds the context menu for the local video.
  */
-LocalVideo.prototype._buildContextMenu = function () {
+LocalVideo.prototype._buildContextMenu = function() {
     $.contextMenu({
-        selector: '#' + this.videoSpanId,
+        selector: `#${this.videoSpanId}`,
         zIndex: 10000,
         items: {
             flip: {
-                name: "Flip",
+                name: 'Flip',
                 callback: () => {
-                    let val = !APP.settings.getLocalFlipX();
+                    const val = !APP.settings.getLocalFlipX();
+
                     this.setFlipX(val);
                     APP.settings.setLocalFlipX(val);
                 }
             }
         },
         events: {
-            show : function(options){
-                options.items.flip.name =
-                    APP.translation.generateTranslationHTML(
-                        "videothumbnail.flip");
+            show(options) {
+                options.items.flip.name
+                    = APP.translation.generateTranslationHTML(
+                        'videothumbnail.flip');
             }
         }
     });
@@ -231,9 +240,10 @@ LocalVideo.prototype._buildContextMenu = function () {
  * Enables or disables the context menu for the local video.
  * @param enable {boolean} true for enable, false for disable
  */
-LocalVideo.prototype._enableDisableContextMenu = function (enable) {
-    if(this.$container.contextMenu)
+LocalVideo.prototype._enableDisableContextMenu = function(enable) {
+    if (this.$container.contextMenu) {
         this.$container.contextMenu(enable);
+    }
 };
 
 export default LocalVideo;

modules/UI/videolayout/RemoteVideo.js

@@ -18,11 +18,11 @@ import {
 } from '../../../react/features/remote-video-menu';
 /* eslint-enable no-unused-vars */
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 
-import SmallVideo from "./SmallVideo";
-import UIUtils from "../util/UIUtil";
+import SmallVideo from './SmallVideo';
+import UIUtils from '../util/UIUtil';
 
 /**
  * Creates new instance of the <tt>RemoteVideo</tt>.
@@ -52,6 +52,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
     this.isLocal = false;
     this.popupMenuIsHovered = false;
     this._isRemoteControlSessionActive = false;
+
     /**
      * The flag is set to <tt>true</tt> after the 'onplay' event has been
      * triggered on the current video element. It goes back to <tt>false</tt>
@@ -60,6 +61,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
      * @type {boolean}
      */
     this.wasVideoPlayed = false;
+
     /**
      * The flag is set to <tt>true</tt> if remote participant's video gets muted
      * during his media connection disruption. This is to prevent black video
@@ -107,9 +109,11 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
  * @private
  * NOTE: extends SmallVideo's method
  */
-RemoteVideo.prototype._isHovered = function () {
-    let isHovered = SmallVideo.prototype._isHovered.call(this)
+RemoteVideo.prototype._isHovered = function() {
+    const isHovered = SmallVideo.prototype._isHovered.call(this)
         || this.popupMenuIsHovered;
+
+
     return isHovered;
 };
 
@@ -119,7 +123,7 @@ RemoteVideo.prototype._isHovered = function () {
  * @returns {Element|*} the constructed element, containing popup menu items
  * @private
  */
-RemoteVideo.prototype._generatePopupContent = function () {
+RemoteVideo.prototype._generatePopupContent = function() {
     if (interfaceConfig.filmStripOnly) {
         return;
     }
@@ -139,14 +143,13 @@ RemoteVideo.prototype._generatePopupContent = function () {
         && ((!APP.remoteControl.active && !this._isRemoteControlSessionActive)
             || APP.remoteControl.controller.activeParticipant === this.id)) {
         if (controller.getRequestedParticipant() === this.id) {
-            onRemoteControlToggle = () => {};
             remoteControlState = REMOTE_CONTROL_MENU_STATES.REQUESTING;
-        } else if (!controller.isStarted()) {
-            onRemoteControlToggle = this._requestRemoteControlPermissions;
-            remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
-        } else {
+        } else if (controller.isStarted()) {
             onRemoteControlToggle = this._stopRemoteControl;
             remoteControlState = REMOTE_CONTROL_MENU_STATES.STARTED;
+        } else {
+            onRemoteControlToggle = this._requestRemoteControlPermissions;
+            remoteControlState = REMOTE_CONTROL_MENU_STATES.NOT_STARTED;
         }
     }
 
@@ -161,7 +164,6 @@ RemoteVideo.prototype._generatePopupContent = function () {
     const { isModerator } = APP.conference;
     const participantID = this.id;
 
-    /* jshint ignore:start */
     ReactDOM.render(
         <Provider store = { APP.store }>
             <I18nextProvider i18n = { i18next }>
@@ -169,7 +171,7 @@ RemoteVideo.prototype._generatePopupContent = function () {
                     initialVolumeValue = { initialVolumeValue }
                     isAudioMuted = { this.isAudioMuted }
                     isModerator = { isModerator }
-                    onMenuDisplay = { this._onRemoteVideoMenuDisplay.bind(this) }
+                    onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)}
                     onRemoteControlToggle = { onRemoteControlToggle }
                     onVolumeChange = { onVolumeChange }
                     participantID = { participantID }
@@ -177,10 +179,9 @@ RemoteVideo.prototype._generatePopupContent = function () {
             </I18nextProvider>
         </Provider>,
         remoteVideoMenuContainer);
-    /* jshint ignore:end */
 };
 
-RemoteVideo.prototype._onRemoteVideoMenuDisplay = function () {
+RemoteVideo.prototype._onRemoteVideoMenuDisplay = function() {
     this.updateRemoteVideoMenu();
 };
 
@@ -201,7 +202,7 @@ RemoteVideo.prototype.setRemoteControlActiveStatus = function(isActive) {
  * @param {boolean} isSupported
  */
 RemoteVideo.prototype.setRemoteControlSupport = function(isSupported = false) {
-    if(this._supportsRemoteControl === isSupported) {
+    if (this._supportsRemoteControl === isSupported) {
         return;
     }
     this._supportsRemoteControl = isSupported;
@@ -211,24 +212,26 @@ RemoteVideo.prototype.setRemoteControlSupport = function(isSupported = false) {
 /**
  * Requests permissions for remote control session.
  */
-RemoteVideo.prototype._requestRemoteControlPermissions = function () {
+RemoteVideo.prototype._requestRemoteControlPermissions = function() {
     APP.remoteControl.controller.requestPermissions(
         this.id, this.VideoLayout.getLargeVideoWrapper()).then(result => {
-        if(result === null) {
+        if (result === null) {
             return;
         }
         this.updateRemoteVideoMenu();
         APP.UI.messageHandler.notify(
-            "dialog.remoteControlTitle",
-            (result === false) ? "dialog.remoteControlDeniedMessage"
-                : "dialog.remoteControlAllowedMessage",
-            {user: this.user.getDisplayName()
-                || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME}
+            'dialog.remoteControlTitle',
+            result === false ? 'dialog.remoteControlDeniedMessage'
+                : 'dialog.remoteControlAllowedMessage',
+            { user: this.user.getDisplayName()
+                || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
         );
-        if(result === true) {//the remote control permissions has been granted
+        if (result === true) {
+            // the remote control permissions has been granted
             // pin the controlled participant
-            let pinnedId = this.VideoLayout.getPinnedId();
-            if(pinnedId !== this.id) {
+            const pinnedId = this.VideoLayout.getPinnedId();
+
+            if (pinnedId !== this.id) {
                 this.VideoLayout.handleVideoThumbClicked(this.id);
             }
         }
@@ -236,10 +239,10 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () {
         logger.error(error);
         this.updateRemoteVideoMenu();
         APP.UI.messageHandler.notify(
-            "dialog.remoteControlTitle",
-            "dialog.remoteControlErrorMessage",
-            {user: this.user.getDisplayName()
-                || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME}
+            'dialog.remoteControlTitle',
+            'dialog.remoteControlErrorMessage',
+            { user: this.user.getDisplayName()
+                || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME }
         );
     });
     this.updateRemoteVideoMenu();
@@ -248,7 +251,7 @@ RemoteVideo.prototype._requestRemoteControlPermissions = function () {
 /**
  * Stops remote control session.
  */
-RemoteVideo.prototype._stopRemoteControl = function () {
+RemoteVideo.prototype._stopRemoteControl = function() {
     // send message about stopping
     APP.remoteControl.controller.stop();
     this.updateRemoteVideoMenu();
@@ -259,7 +262,7 @@ RemoteVideo.prototype._stopRemoteControl = function () {
  *
  * @returns {Element} audio element
  */
-RemoteVideo.prototype._getAudioElement = function () {
+RemoteVideo.prototype._getAudioElement = function() {
     return this._audioStreamElement;
 };
 
@@ -268,8 +271,10 @@ RemoteVideo.prototype._getAudioElement = function () {
  *
  * @returns {boolean} true if the volume can be adjusted.
  */
-RemoteVideo.prototype._canSetAudioVolume = function () {
+RemoteVideo.prototype._canSetAudioVolume = function() {
     const audioElement = this._getAudioElement();
+
+
     return audioElement && audioElement.volume !== undefined;
 };
 
@@ -278,7 +283,7 @@ RemoteVideo.prototype._canSetAudioVolume = function () {
  *
  * @param {int} newVal - The value to set the slider to.
  */
-RemoteVideo.prototype._setAudioVolume = function (newVal) {
+RemoteVideo.prototype._setAudioVolume = function(newVal) {
     if (this._canSetAudioVolume()) {
         this._getAudioElement().volume = newVal;
     }
@@ -289,7 +294,7 @@ RemoteVideo.prototype._setAudioVolume = function (newVal) {
  *
  * @param isMuted the new muted state to update to
  */
-RemoteVideo.prototype.updateRemoteVideoMenu = function (
+RemoteVideo.prototype.updateRemoteVideoMenu = function(
         isMuted = this.isAudioMuted) {
     this.isAudioMuted = isMuted;
 
@@ -302,6 +307,7 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (
  */
 RemoteVideo.prototype.setVideoMutedView = function(isMuted) {
     SmallVideo.prototype.setVideoMutedView.call(this, isMuted);
+
     // Update 'mutedWhileDisconnected' flag
     this._figureOutMutedWhileDisconnected();
 };
@@ -314,6 +320,7 @@ RemoteVideo.prototype.setVideoMutedView = function(isMuted) {
  */
 RemoteVideo.prototype._figureOutMutedWhileDisconnected = function() {
     const isActive = this.isConnectionActive();
+
     if (!isActive && this.isVideoMuted) {
         this.mutedWhileDisconnected = true;
     } else if (isActive && !this.isVideoMuted) {
@@ -326,7 +333,7 @@ RemoteVideo.prototype._figureOutMutedWhileDisconnected = function() {
  * given <tt>parentElement</tt>.
  *
  */
-RemoteVideo.prototype.addRemoteVideoMenu = function () {
+RemoteVideo.prototype.addRemoteVideoMenu = function() {
     if (interfaceConfig.filmStripOnly) {
         return;
     }
@@ -343,22 +350,24 @@ RemoteVideo.prototype.addRemoteVideoMenu = function () {
  * @param stream the MediaStream
  * @param isVideo <tt>true</tt> if given <tt>stream</tt> is a video one.
  */
-RemoteVideo.prototype.removeRemoteStreamElement = function (stream) {
-    if (!this.container)
+RemoteVideo.prototype.removeRemoteStreamElement = function(stream) {
+    if (!this.container) {
         return false;
+    }
 
-    var isVideo = stream.isVideoTrack();
+    const isVideo = stream.isVideoTrack();
+
+    const elementID = SmallVideo.getStreamElementID(stream);
+    const select = $(`#${elementID}`);
 
-    var elementID = SmallVideo.getStreamElementID(stream);
-    var select = $('#' + elementID);
     select.remove();
 
     if (isVideo) {
         this.wasVideoPlayed = false;
     }
 
-    logger.info((isVideo ? "Video" : "Audio") +
-                 " removed " + this.id, select);
+    logger.info(`${isVideo ? 'Video' : 'Audio'
+    } removed ${this.id}`, select);
 
     // when removing only the video element and we are on stage
     // update the stage
@@ -386,15 +395,16 @@ RemoteVideo.prototype.isConnectionActive = function() {
  * The remote video is considered "playable" once the stream has started
  * according to the {@link #hasVideoStarted} result.
  * It will be allowed to display video also in
- * {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video was ever played
- * and was not muted while not in ACTIVE state. This basically means that there
- * is stalled video image cached that could be displayed. It's used to show
- * "grey video image" in user's thumbnail when there are connectivity issues.
+ * {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video was ever
+ *  played and was not muted while not in ACTIVE state. This basically means
+ * that there is stalled video image cached that could be displayed. It's used
+ * to show "grey video image" in user's thumbnail when there are connectivity
+ * issues.
  *
  * @inheritdoc
  * @override
  */
-RemoteVideo.prototype.isVideoPlayable = function () {
+RemoteVideo.prototype.isVideoPlayable = function() {
     const connectionState
         = APP.conference.getParticipantConnectionStatus(this.id);
 
@@ -408,7 +418,7 @@ RemoteVideo.prototype.isVideoPlayable = function () {
 /**
  * @inheritDoc
  */
-RemoteVideo.prototype.updateView = function () {
+RemoteVideo.prototype.updateView = function() {
     this.$container.toggleClass('audio-only', APP.conference.isAudioOnly());
 
     this.updateConnectionStatusIndicator();
@@ -421,7 +431,7 @@ RemoteVideo.prototype.updateView = function () {
 /**
  * Updates the UI to reflect user's connectivity status.
  */
-RemoteVideo.prototype.updateConnectionStatusIndicator = function () {
+RemoteVideo.prototype.updateConnectionStatusIndicator = function() {
     const connectionStatus = this.user.getConnectionStatus();
 
     logger.debug(`${this.id} thumbnail connection status: ${connectionStatus}`);
@@ -433,18 +443,20 @@ RemoteVideo.prototype.updateConnectionStatusIndicator = function () {
 
     const isInterrupted
         = connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED;
+
     // Toggle thumbnail video problem filter
+
     this.selectVideoElement().toggleClass(
-        "videoThumbnailProblemFilter", isInterrupted);
+        'videoThumbnailProblemFilter', isInterrupted);
     this.$avatar().toggleClass(
-        "videoThumbnailProblemFilter", isInterrupted);
+        'videoThumbnailProblemFilter', isInterrupted);
 };
 
 /**
  * Removes RemoteVideo from the page.
  */
-RemoteVideo.prototype.remove = function () {
-    logger.log("Remove thumbnail", this.id);
+RemoteVideo.prototype.remove = function() {
+    logger.log('Remove thumbnail', this.id);
 
     this.removeAudioLevelIndicator();
 
@@ -470,30 +482,34 @@ RemoteVideo.prototype.remove = function () {
     // Make sure that the large video is updated if are removing its
     // corresponding small video.
     this.VideoLayout.updateAfterThumbRemoved(this.id);
+
     // Remove whole container
     if (this.container.parentNode) {
         this.container.parentNode.removeChild(this.container);
     }
 };
 
-RemoteVideo.prototype.waitForPlayback = function (streamElement, stream) {
+RemoteVideo.prototype.waitForPlayback = function(streamElement, stream) {
+
+    const webRtcStream = stream.getOriginalStream();
+    const isVideo = stream.isVideoTrack();
 
-    var webRtcStream = stream.getOriginalStream();
-    var isVideo = stream.isVideoTrack();
     if (!isVideo || webRtcStream.id === 'mixedmslabel') {
         return;
     }
 
-    var self = this;
+    const self = this;
 
     // Triggers when video playback starts
-    var onPlayingHandler = function () {
+    const onPlayingHandler = function() {
         self.wasVideoPlayed = true;
         self.VideoLayout.remoteVideoActive(streamElement, self.id);
         streamElement.onplaying = null;
+
         // Refresh to show the video
         self.updateView();
     };
+
     streamElement.onplaying = onPlayingHandler;
 };
 
@@ -503,23 +519,25 @@ RemoteVideo.prototype.waitForPlayback = function (streamElement, stream) {
  * @returns {boolean} true if this RemoteVideo has a video stream for which
  * the playback has been started.
  */
-RemoteVideo.prototype.hasVideoStarted = function () {
+RemoteVideo.prototype.hasVideoStarted = function() {
     return this.wasVideoPlayed;
 };
 
-RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
+RemoteVideo.prototype.addRemoteStreamElement = function(stream) {
     if (!this.container) {
         return;
     }
 
-    let isVideo = stream.isVideoTrack();
+    const isVideo = stream.isVideoTrack();
+
     isVideo ? this.videoStream = stream : this.audioStream = stream;
 
-    if (isVideo)
+    if (isVideo) {
         this.setVideoType(stream.videoType);
+    }
 
     // Add click handler.
-    let onClickHandler = (event) => {
+    const onClickHandler = event => {
         const $source = $(event.target || event.srcElement);
         const { classList } = event.target;
 
@@ -546,12 +564,15 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
             event.stopPropagation();
             event.preventDefault();
         }
+
         return false;
     };
+
     this.container.onclick = onClickHandler;
 
-    if(!stream.getOriginalStream())
+    if (!stream.getOriginalStream()) {
         return;
+    }
 
     let streamElement = SmallVideo.createStreamElement(stream);
 
@@ -591,8 +612,9 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
  */
 RemoteVideo.prototype.setDisplayName = function(displayName) {
     if (!this.container) {
-        logger.warn( "Unable to set displayName - " + this.videoSpanId +
-                " does not exist");
+        logger.warn(`Unable to set displayName - ${this.videoSpanId
+        } does not exist`);
+
         return;
     }
 
@@ -610,7 +632,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName) {
  * @param videoElementId the id of local or remote video element.
  */
 RemoteVideo.prototype.removeRemoteVideoMenu = function() {
-    var menuSpan = this.$container.find('.remotevideomenu');
+    const menuSpan = this.$container.find('.remotevideomenu');
 
     if (menuSpan.length) {
         ReactDOM.unmountComponentAtNode(menuSpan.get(0));
@@ -625,18 +647,16 @@ RemoteVideo.prototype.removeRemoteVideoMenu = function() {
  *
  * @return {void}
  */
-RemoteVideo.prototype.addPresenceLabel = function () {
+RemoteVideo.prototype.addPresenceLabel = function() {
     const presenceLabelContainer
         = this.container.querySelector('.presence-label-container');
 
     if (presenceLabelContainer) {
-        /* jshint ignore:start */
         ReactDOM.render(
             <Provider store = { APP.store }>
                 <PresenceLabel participantID = { this.id } />
             </Provider>,
             presenceLabelContainer);
-        /* jshint ignore:end */
     }
 };
 
@@ -645,7 +665,7 @@ RemoteVideo.prototype.addPresenceLabel = function () {
  *
  * @return {void}
  */
-RemoteVideo.prototype.removePresenceLabel = function () {
+RemoteVideo.prototype.removePresenceLabel = function() {
     const presenceLabelContainer
         = this.container.querySelector('.presence-label-container');
 
@@ -654,8 +674,9 @@ RemoteVideo.prototype.removePresenceLabel = function () {
     }
 };
 
-RemoteVideo.createContainer = function (spanId) {
+RemoteVideo.createContainer = function(spanId) {
     const container = document.createElement('span');
+
     container.id = spanId;
     container.className = 'videocontainer';
 
@@ -669,7 +690,9 @@ RemoteVideo.createContainer = function (spanId) {
         <div class ='presence-label-container'></div>
         <span class = 'remotevideomenu'></span>`;
 
-    var remotes = document.getElementById('filmstripRemoteVideosContainer');
+    const remotes = document.getElementById('filmstripRemoteVideosContainer');
+
+
     return remotes.appendChild(container);
 };
 

modules/UI/videolayout/SmallVideo.js

@@ -25,11 +25,11 @@ import {
 } from '../../../react/features/filmstrip';
 /* eslint-enable no-unused-vars */
 
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
-import Avatar from "../avatar/Avatar";
-import UIUtil from "../util/UIUtil";
-import UIEvents from "../../../service/UI/UIEvents";
+import Avatar from '../avatar/Avatar';
+import UIUtil from '../util/UIUtil';
+import UIEvents from '../../../service/UI/UIEvents';
 
 const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
 
@@ -39,6 +39,7 @@ const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
  * @constant
  */
 const DISPLAY_VIDEO = 0;
+
 /**
  * Display mode constant used when the user's avatar is being displayed on
  * the small video.
@@ -46,6 +47,7 @@ const DISPLAY_VIDEO = 0;
  * @constant
  */
 const DISPLAY_AVATAR = 1;
+
 /**
  * Display mode constant used when neither video nor avatar is being displayed
  * on the small video. And we just show the display name.
@@ -70,6 +72,9 @@ const DISPLAY_VIDEO_WITH_NAME = 3;
  */
 const DISPLAY_AVATAR_WITH_NAME = 4;
 
+/**
+ * Constructor.
+ */
 function SmallVideo(VideoLayout) {
     this._isModerator = false;
     this.isAudioMuted = false;
@@ -80,6 +85,7 @@ function SmallVideo(VideoLayout) {
     this.VideoLayout = VideoLayout;
     this.videoIsHovered = false;
     this.hideDisplayName = false;
+
     // we can stop updating the thumbnail
     this.disableUpdateView = false;
 
@@ -136,7 +142,7 @@ function SmallVideo(VideoLayout) {
  *
  * @returns the identifier of this small video
  */
-SmallVideo.prototype.getId = function () {
+SmallVideo.prototype.getId = function() {
     return this.id;
 };
 
@@ -145,7 +151,7 @@ SmallVideo.prototype.getId = function () {
  * @return <tt>true</tt> if this small video isn't currently visible and
  * <tt>false</tt> - otherwise.
  */
-SmallVideo.prototype.isVisible = function () {
+SmallVideo.prototype.isVisible = function() {
     return this.$container.is(':visible');
 };
 
@@ -153,9 +159,10 @@ SmallVideo.prototype.isVisible = function () {
  * Enables / disables the device availability icons for this small video.
  * @param {enable} set to {true} to enable and {false} to disable
  */
-SmallVideo.prototype.enableDeviceAvailabilityIcons = function (enable) {
-    if (typeof enable === "undefined")
+SmallVideo.prototype.enableDeviceAvailabilityIcons = function(enable) {
+    if (typeof enable === 'undefined') {
         return;
+    }
 
     this.deviceAvailabilityIconsEnabled = enable;
 };
@@ -164,32 +171,34 @@ SmallVideo.prototype.enableDeviceAvailabilityIcons = function (enable) {
  * Sets the device "non" availability icons.
  * @param devices the devices, which will be checked for availability
  */
-SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
-    if (!this.deviceAvailabilityIconsEnabled)
+SmallVideo.prototype.setDeviceAvailabilityIcons = function(devices) {
+    if (!this.deviceAvailabilityIconsEnabled) {
         return;
+    }
 
-    if(!this.container)
+    if (!this.container) {
         return;
+    }
 
-    var noMic = this.$container.find('.noMic');
-    var noVideo =  this.$container.find('.noVideo');
+    const noMic = this.$container.find('.noMic');
+    const noVideo = this.$container.find('.noVideo');
 
     noMic.remove();
     noVideo.remove();
     if (!devices.audio) {
         this.container.appendChild(
-            document.createElement("div")).setAttribute("class", "noMic");
+            document.createElement('div')).setAttribute('class', 'noMic');
     }
 
     if (!devices.video) {
         this.container.appendChild(
-            document.createElement("div")).setAttribute("class", "noVideo");
+            document.createElement('div')).setAttribute('class', 'noVideo');
     }
 
     if (!devices.audio && !devices.video) {
-        noMic.css("background-position", "75%");
-        noVideo.css("background-position", "25%");
-        noVideo.css("background-color", "transparent");
+        noMic.css('background-position', '75%');
+        noVideo.css('background-position', '25%');
+        noVideo.css('background-color', 'transparent');
     }
 };
 
@@ -200,7 +209,7 @@ SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
  * lib-jitsi-meet.
  * @param videoType 'camera' or 'desktop', or 'sharedvideo'.
  */
-SmallVideo.prototype.setVideoType = function (videoType) {
+SmallVideo.prototype.setVideoType = function(videoType) {
     this.videoType = videoType;
 };
 
@@ -211,21 +220,22 @@ SmallVideo.prototype.setVideoType = function (videoType) {
  * lib-jitsi-meet.
  * @returns {String} 'camera', 'screen', 'sharedvideo', or undefined.
  */
-SmallVideo.prototype.getVideoType = function () {
+SmallVideo.prototype.getVideoType = function() {
     return this.videoType;
 };
 
 /**
  * Creates an audio or video element for a particular MediaStream.
  */
-SmallVideo.createStreamElement = function (stream) {
-    let isVideo = stream.isVideoTrack();
+SmallVideo.createStreamElement = function(stream) {
+    const isVideo = stream.isVideoTrack();
 
-    let element = isVideo
+    const element = isVideo
         ? document.createElement('video')
         : document.createElement('audio');
+
     if (isVideo) {
-        element.setAttribute("muted", "true");
+        element.setAttribute('muted', 'true');
     }
 
     RTCUIHelper.setAutoPlay(element, true);
@@ -238,8 +248,8 @@ SmallVideo.createStreamElement = function (stream) {
 /**
  * Returns the element id for a particular MediaStream.
  */
-SmallVideo.getStreamElementID = function (stream) {
-    let isVideo = stream.isVideoTrack();
+SmallVideo.getStreamElementID = function(stream) {
+    const isVideo = stream.isVideoTrack();
 
     return (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
 };
@@ -247,7 +257,7 @@ SmallVideo.getStreamElementID = function (stream) {
 /**
  * Configures hoverIn/hoverOut handlers. Depends on connection indicator.
  */
-SmallVideo.prototype.bindHoverHandler = function () {
+SmallVideo.prototype.bindHoverHandler = function() {
     // Add hover handler
     this.$container.hover(
         () => {
@@ -268,7 +278,7 @@ SmallVideo.prototype.bindHoverHandler = function () {
 
  * @returns {void}
  */
-SmallVideo.prototype.removeConnectionIndicator = function () {
+SmallVideo.prototype.removeConnectionIndicator = function() {
     this._showConnectionIndicator = false;
 
     this.updateIndicators();
@@ -279,7 +289,7 @@ SmallVideo.prototype.removeConnectionIndicator = function () {
 
  * @returns {void}
  */
-SmallVideo.prototype.updateConnectionStatus = function (connectionStatus) {
+SmallVideo.prototype.updateConnectionStatus = function(connectionStatus) {
     this._connectionStatus = connectionStatus;
     this.updateIndicators();
 };
@@ -290,7 +300,7 @@ SmallVideo.prototype.updateConnectionStatus = function (connectionStatus) {
  * @param {boolean} isMuted indicates if the muted element should be shown
  * or hidden
  */
-SmallVideo.prototype.showAudioIndicator = function (isMuted) {
+SmallVideo.prototype.showAudioIndicator = function(isMuted) {
     this.isAudioMuted = isMuted;
     this.updateStatusBar();
 };
@@ -315,12 +325,11 @@ SmallVideo.prototype.setVideoMutedView = function(isMuted) {
  *
  * @returns {void}
  */
-SmallVideo.prototype.updateStatusBar = function () {
+SmallVideo.prototype.updateStatusBar = function() {
     const statusBarContainer
         = this.container.querySelector('.videocontainer__toolbar');
     const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
 
-    /* jshint ignore:start */
     ReactDOM.render(
         <I18nextProvider i18n = { i18next }>
             <div>
@@ -339,13 +348,12 @@ SmallVideo.prototype.updateStatusBar = function () {
             </div>
         </I18nextProvider>,
         statusBarContainer);
-    /* jshint ignore:end */
 };
 
 /**
  * Adds the element indicating the moderator(owner) of the conference.
  */
-SmallVideo.prototype.addModeratorIndicator = function () {
+SmallVideo.prototype.addModeratorIndicator = function() {
     this._isModerator = true;
     this.updateStatusBar();
 };
@@ -355,7 +363,7 @@ SmallVideo.prototype.addModeratorIndicator = function () {
  *
  * @returns {void}
  */
-SmallVideo.prototype.addAudioLevelIndicator = function () {
+SmallVideo.prototype.addAudioLevelIndicator = function() {
     let audioLevelContainer = this._getAudioLevelContainer();
 
     if (audioLevelContainer) {
@@ -374,7 +382,7 @@ SmallVideo.prototype.addAudioLevelIndicator = function () {
  *
  * @returns {void}
  */
-SmallVideo.prototype.removeAudioLevelIndicator = function () {
+SmallVideo.prototype.removeAudioLevelIndicator = function() {
     const audioLevelContainer = this._getAudioLevelContainer();
 
     if (audioLevelContainer) {
@@ -388,16 +396,14 @@ SmallVideo.prototype.removeAudioLevelIndicator = function () {
  * @param lvl the new audio level to set
  * @returns {void}
  */
-SmallVideo.prototype.updateAudioLevelIndicator = function (lvl = 0) {
+SmallVideo.prototype.updateAudioLevelIndicator = function(lvl = 0) {
     const audioLevelContainer = this._getAudioLevelContainer();
 
     if (audioLevelContainer) {
-        /* jshint ignore:start */
         ReactDOM.render(
             <AudioLevelIndicator
                 audioLevel = { lvl }/>,
             audioLevelContainer);
-        /* jshint ignore:end */
     }
 };
 
@@ -407,14 +413,14 @@ SmallVideo.prototype.updateAudioLevelIndicator = function (lvl = 0) {
  *
  * @returns {HTMLElement} The DOM element that holds the AudioLevelIndicator.
  */
-SmallVideo.prototype._getAudioLevelContainer = function () {
+SmallVideo.prototype._getAudioLevelContainer = function() {
     return this.container.querySelector('.audioindicator-container');
 };
 
 /**
  * Removes the element indicating the moderator(owner) of the conference.
  */
-SmallVideo.prototype.removeModeratorIndicator = function () {
+SmallVideo.prototype.removeModeratorIndicator = function() {
     this._isModerator = false;
     this.updateStatusBar();
 };
@@ -429,7 +435,7 @@ SmallVideo.prototype.removeModeratorIndicator = function () {
  * this function to access the video element via the 0th element of the returned
  * array (after checking its length of course!).
  */
-SmallVideo.prototype.selectVideoElement = function () {
+SmallVideo.prototype.selectVideoElement = function() {
     return $(RTCUIHelper.findVideoElement(this.container));
 };
 
@@ -439,7 +445,7 @@ SmallVideo.prototype.selectVideoElement = function () {
  * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
  * element which displays the user's avatar.
  */
-SmallVideo.prototype.$avatar = function () {
+SmallVideo.prototype.$avatar = function() {
     return this.$container.find('.avatar-container');
 };
 
@@ -449,7 +455,7 @@ SmallVideo.prototype.$avatar = function () {
  * @return {jQuery} a jQuery selector pointing to the display name element of
  * the video thumbnail
  */
-SmallVideo.prototype.$displayName = function () {
+SmallVideo.prototype.$displayName = function() {
     return this.$container.find('.displayNameContainer');
 };
 
@@ -459,12 +465,11 @@ SmallVideo.prototype.$displayName = function () {
  *
  * @returns {void}
  */
-SmallVideo.prototype.updateDisplayName = function (props) {
+SmallVideo.prototype.updateDisplayName = function(props) {
     const displayNameContainer
         = this.container.querySelector('.displayNameContainer');
 
     if (displayNameContainer) {
-        /* jshint ignore:start */
         ReactDOM.render(
             <Provider store = { APP.store }>
                 <I18nextProvider i18n = { i18next }>
@@ -472,7 +477,6 @@ SmallVideo.prototype.updateDisplayName = function (props) {
                 </I18nextProvider>
             </Provider>,
             displayNameContainer);
-        /* jshint ignore:end */
     }
 };
 
@@ -482,7 +486,7 @@ SmallVideo.prototype.updateDisplayName = function (props) {
  *
  * @returns {void}
  */
-SmallVideo.prototype.removeDisplayName = function () {
+SmallVideo.prototype.removeDisplayName = function() {
     const displayNameContainer
         = this.container.querySelector('.displayNameContainer');
 
@@ -498,18 +502,17 @@ SmallVideo.prototype.removeDisplayName = function () {
  * @param isFocused indicates if the thumbnail should be focused/pinned or not
  */
 SmallVideo.prototype.focus = function(isFocused) {
-    var focusedCssClass = "videoContainerFocused";
-    var isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
+    const focusedCssClass = 'videoContainerFocused';
+    const isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
 
     if (!isFocused && isFocusClassEnabled) {
         this.$container.removeClass(focusedCssClass);
-    }
-    else if (isFocused && !isFocusClassEnabled) {
+    } else if (isFocused && !isFocusClassEnabled) {
         this.$container.addClass(focusedCssClass);
     }
 };
 
-SmallVideo.prototype.hasVideo = function () {
+SmallVideo.prototype.hasVideo = function() {
     return this.selectVideoElement().length !== 0;
 };
 
@@ -520,7 +523,7 @@ SmallVideo.prototype.hasVideo = function () {
  * @return {boolean} <tt>true</tt> if the user is displayed on the large video
  * or <tt>false</tt> otherwise.
  */
-SmallVideo.prototype.isCurrentlyOnLargeVideo = function () {
+SmallVideo.prototype.isCurrentlyOnLargeVideo = function() {
     return this.VideoLayout.isCurrentlyOnLarge(this.id);
 };
 
@@ -550,13 +553,14 @@ SmallVideo.prototype.selectDisplayMode = function() {
         && this.selectVideoElement().length
         && !APP.conference.isAudioOnly()) {
         // check hovering and change state to video with name
-        return this._isHovered() ?
-            DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
-    } else {
-        // check hovering and change state to avatar with name
-        return this._isHovered() ?
-            DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+        return this._isHovered()
+            ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
     }
+
+    // check hovering and change state to avatar with name
+    return this._isHovered()
+        ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+
 };
 
 /**
@@ -565,7 +569,7 @@ SmallVideo.prototype.selectDisplayMode = function() {
  * indicator is shown(hovered).
  * @private
  */
-SmallVideo.prototype._isHovered = function () {
+SmallVideo.prototype._isHovered = function() {
     return this.videoIsHovered || this._popoverIsHovered;
 };
 
@@ -577,42 +581,49 @@ SmallVideo.prototype._isHovered = function () {
  * @param show whether we should show the avatar or not
  * video because there is no dominant speaker and no focused speaker
  */
-SmallVideo.prototype.updateView = function () {
-    if (this.disableUpdateView)
+SmallVideo.prototype.updateView = function() {
+    if (this.disableUpdateView) {
         return;
+    }
 
     if (!this.hasAvatar) {
         if (this.id) {
             // Init avatar
             this.avatarChanged(Avatar.getAvatarUrl(this.id));
         } else {
-            logger.error("Unable to init avatar - no id", this);
+            logger.error('Unable to init avatar - no id', this);
+
             return;
         }
     }
 
     // Determine whether video, avatar or blackness should be displayed
-    let displayMode = this.selectDisplayMode();
+    const displayMode = this.selectDisplayMode();
+
     // Show/hide video.
+
     UIUtil.setVisibleBySelector(this.selectVideoElement(),
-                                (displayMode === DISPLAY_VIDEO
-                                || displayMode === DISPLAY_VIDEO_WITH_NAME));
+                                displayMode === DISPLAY_VIDEO
+                                || displayMode === DISPLAY_VIDEO_WITH_NAME);
+
     // Show/hide the avatar.
     UIUtil.setVisibleBySelector(this.$avatar(),
-                                (displayMode === DISPLAY_AVATAR
-                                || displayMode === DISPLAY_AVATAR_WITH_NAME));
+                                displayMode === DISPLAY_AVATAR
+                                || displayMode === DISPLAY_AVATAR_WITH_NAME);
+
     // Show/hide the display name.
     UIUtil.setVisibleBySelector(this.$displayName(),
                                 !this.hideDisplayName
                                 && (displayMode === DISPLAY_BLACKNESS_WITH_NAME
                                 || displayMode === DISPLAY_VIDEO_WITH_NAME
                                 || displayMode === DISPLAY_AVATAR_WITH_NAME));
+
     // show hide overlay when there is a video or avatar under
     // the display name
     UIUtil.setVisibleBySelector(this.$container.find(
                                 '.videocontainer__hoverOverlay'),
-                                (displayMode === DISPLAY_AVATAR_WITH_NAME
-                                || displayMode === DISPLAY_VIDEO_WITH_NAME));
+                                displayMode === DISPLAY_AVATAR_WITH_NAME
+                                || displayMode === DISPLAY_VIDEO_WITH_NAME);
 };
 
 /**
@@ -622,19 +633,18 @@ SmallVideo.prototype.updateView = function () {
  * @param {string} avatarUrl - The uri to the avatar image.
  * @returns {void}
  */
-SmallVideo.prototype.avatarChanged = function (avatarUrl) {
+SmallVideo.prototype.avatarChanged = function(avatarUrl) {
     const thumbnail = this.$avatar().get(0);
+
     this.hasAvatar = true;
 
     if (thumbnail) {
-        /* jshint ignore:start */
         ReactDOM.render(
             <AvatarDisplay
                 className = 'userAvatar'
                 uri = { avatarUrl } />,
             thumbnail
         );
-        /* jshint ignore:end */
     }
 };
 
@@ -644,7 +654,7 @@ SmallVideo.prototype.avatarChanged = function (avatarUrl) {
  *
  * @returns {void}
  */
-SmallVideo.prototype.removeAvatar = function () {
+SmallVideo.prototype.removeAvatar = function() {
     const thumbnail = this.$avatar().get(0);
 
     if (thumbnail) {
@@ -656,15 +666,17 @@ SmallVideo.prototype.removeAvatar = function () {
  * Shows or hides the dominant speaker indicator.
  * @param show whether to show or hide.
  */
-SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
+SmallVideo.prototype.showDominantSpeakerIndicator = function(show) {
     // Don't create and show dominant speaker indicator if
     // DISABLE_DOMINANT_SPEAKER_INDICATOR is true
-    if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR)
+    if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR) {
         return;
+    }
 
     if (!this.container) {
-        logger.warn( "Unable to set dominant speaker indicator - "
-            + this.videoSpanId + " does not exist");
+        logger.warn(`Unable to set dominant speaker indicator - ${
+            this.videoSpanId} does not exist`);
+
         return;
     }
 
@@ -677,10 +689,11 @@ SmallVideo.prototype.showDominantSpeakerIndicator = function (show) {
  * Shows or hides the raised hand indicator.
  * @param show whether to show or hide.
  */
-SmallVideo.prototype.showRaisedHandIndicator = function (show) {
+SmallVideo.prototype.showRaisedHandIndicator = function(show) {
     if (!this.container) {
-        logger.warn( "Unable to raised hand indication - "
-            + this.videoSpanId + " does not exist");
+        logger.warn(`Unable to raised hand indication - ${
+            this.videoSpanId} does not exist`);
+
         return;
     }
 
@@ -695,26 +708,31 @@ SmallVideo.prototype.showRaisedHandIndicator = function (show) {
  * is added, and will fire a RESOLUTION_CHANGED event.
  */
 SmallVideo.prototype.waitForResolutionChange = function() {
-    let beforeChange = window.performance.now();
-    let videos = this.selectVideoElement();
-    if (!videos || !videos.length || videos.length <= 0)
+    const beforeChange = window.performance.now();
+    const videos = this.selectVideoElement();
+
+    if (!videos || !videos.length || videos.length <= 0) {
         return;
-    let video = videos[0];
-    let oldWidth = video.videoWidth;
-    let oldHeight = video.videoHeight;
+    }
+    const video = videos[0];
+    const oldWidth = video.videoWidth;
+    const oldHeight = video.videoHeight;
+
     video.onresize = () => {
+        // eslint-disable-next-line eqeqeq
         if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
             // Only run once.
             video.onresize = null;
 
-            let delay = window.performance.now() - beforeChange;
-            let emitter = this.VideoLayout.getEventEmitter();
+            const delay = window.performance.now() - beforeChange;
+            const emitter = this.VideoLayout.getEventEmitter();
+
             if (emitter) {
                 emitter.emit(
                         UIEvents.RESOLUTION_CHANGED,
                         this.getId(),
-                        oldWidth + "x" + oldHeight,
-                        video.videoWidth + "x" + video.videoHeight,
+                        `${oldWidth}x${oldHeight}`,
+                        `${video.videoWidth}x${video.videoHeight}`,
                         delay);
             }
         }
@@ -735,11 +753,12 @@ SmallVideo.prototype.waitForResolutionChange = function() {
  */
 SmallVideo.prototype.initBrowserSpecificProperties = function() {
 
-    var userAgent = window.navigator.userAgent;
-    if (userAgent.indexOf("QtWebEngine") > -1
-        && (userAgent.indexOf("Windows") > -1
-            || userAgent.indexOf("Linux") > -1)) {
-        this.$container.css("overflow", "hidden");
+    const userAgent = window.navigator.userAgent;
+
+    if (userAgent.indexOf('QtWebEngine') > -1
+        && (userAgent.indexOf('Windows') > -1
+            || userAgent.indexOf('Linux') > -1)) {
+        this.$container.css('overflow', 'hidden');
     }
 };
 
@@ -751,7 +770,7 @@ SmallVideo.prototype.initBrowserSpecificProperties = function() {
  * @private
  * @returns {void}
  */
-SmallVideo.prototype.updateIndicators = function () {
+SmallVideo.prototype.updateIndicators = function() {
     const indicatorToolbar
         = this.container.querySelector('.videocontainer__toptoolbar');
 
@@ -760,7 +779,6 @@ SmallVideo.prototype.updateIndicators = function () {
         || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
     const tooltipPosition = interfaceConfig.VERTICAL_FILMSTRIP ? 'left' : 'top';
 
-    /* jshint ignore:start */
     ReactDOM.render(
         <I18nextProvider i18n = { i18next }>
             <div>
@@ -788,7 +806,6 @@ SmallVideo.prototype.updateIndicators = function () {
         </I18nextProvider>,
         indicatorToolbar
     );
-    /* jshint ignore:end */
 };
 
 /**
@@ -798,7 +815,7 @@ SmallVideo.prototype.updateIndicators = function () {
  * @private
  * @returns {void}
  */
-SmallVideo.prototype._unmountIndicators = function () {
+SmallVideo.prototype._unmountIndicators = function() {
     const indicatorToolbar
         = this.container.querySelector('.videocontainer__toptoolbar');
 
@@ -815,7 +832,7 @@ SmallVideo.prototype._unmountIndicators = function () {
  * currently over the connection indicator popover.
  * @returns {void}
  */
-SmallVideo.prototype._onPopoverHover = function (popoverIsHovered) {
+SmallVideo.prototype._onPopoverHover = function(popoverIsHovered) {
     this._popoverIsHovered = popoverIsHovered;
     this.updateView();
 };

modules/UI/videolayout/VideoContainer.js

@@ -23,16 +23,17 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  * @param videoSpaceHeight the height of the available space
  * @return an array with 2 elements, the video width and the video height
  */
-function computeDesktopVideoSize(
+function computeDesktopVideoSize( // eslint-disable-line max-params
         videoWidth,
         videoHeight,
         videoSpaceWidth,
         videoSpaceHeight) {
-    let aspectRatio = videoWidth / videoHeight;
+    const aspectRatio = videoWidth / videoHeight;
 
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
 
+    // eslint-disable-next-line no-param-reassign
     videoSpaceHeight -= Filmstrip.getFilmstripHeight();
 
     if (availableWidth / aspectRatio >= videoSpaceHeight) {
@@ -60,13 +61,14 @@ function computeDesktopVideoSize(
  * @param videoSpaceHeight the height of the video space
  * @return an array with 2 elements, the video width and the video height
  */
-function computeCameraVideoSize(
+function computeCameraVideoSize( // eslint-disable-line max-params
         videoWidth,
         videoHeight,
         videoSpaceWidth,
         videoSpaceHeight,
         videoLayoutFit) {
     const aspectRatio = videoWidth / videoHeight;
+
     switch (videoLayoutFit) {
     case 'height':
         return [ videoSpaceHeight * aspectRatio, videoSpaceHeight ];
@@ -78,10 +80,10 @@ function computeCameraVideoSize(
             || Infinity;
 
         if (videoSpaceRatio === aspectRatio) {
-            return [videoSpaceWidth, videoSpaceHeight];
+            return [ videoSpaceWidth, videoSpaceHeight ];
         }
 
-        let [ width, height] = computeCameraVideoSize(
+        let [ width, height ] = computeCameraVideoSize(
             videoWidth,
             videoHeight,
             videoSpaceWidth,
@@ -97,7 +99,8 @@ function computeCameraVideoSize(
             height = maxHeight;
             width = height * aspectRatio;
         }
-        return [width, height];
+
+        return [ width, height ];
     }
     default:
         return [ videoWidth, videoHeight ];
@@ -111,7 +114,7 @@ function computeCameraVideoSize(
  * @return an array with 2 elements, the horizontal indent and the vertical
  * indent
  */
-function getCameraVideoPosition(
+function getCameraVideoPosition( // eslint-disable-line max-params
         videoWidth,
         videoHeight,
         videoSpaceWidth,
@@ -120,13 +123,15 @@ function getCameraVideoPosition(
     // full screen mode and this is why we use the screen height in this case.
     // Need to think it further at some point and implement it properly.
     if (UIUtil.isFullScreen()) {
+        // eslint-disable-next-line no-param-reassign
         videoSpaceHeight = window.innerHeight;
     }
 
-    let horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
-    let verticalIndent = (videoSpaceHeight - videoHeight) / 2;
+    const horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
+    const verticalIndent = (videoSpaceHeight - videoHeight) / 2;
 
-    return { horizontalIndent, verticalIndent };
+    return { horizontalIndent,
+        verticalIndent };
 }
 
 /**
@@ -137,11 +142,12 @@ function getCameraVideoPosition(
  * indent
  */
 function getDesktopVideoPosition(videoWidth, videoHeight, videoSpaceWidth) {
-    let horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
+    const horizontalIndent = (videoSpaceWidth - videoWidth) / 2;
 
-    let verticalIndent = 0;// Top aligned
+    const verticalIndent = 0;// Top aligned
 
-    return { horizontalIndent, verticalIndent };
+    return { horizontalIndent,
+        verticalIndent };
 }
 
 /**
@@ -149,15 +155,24 @@ function getDesktopVideoPosition(videoWidth, videoHeight, videoSpaceWidth) {
  */
 export class VideoContainer extends LargeContainer {
     // FIXME: With Temasys we have to re-select everytime
-    get $video () {
+    /**
+     *
+     */
+    get $video() {
         return $('#largeVideo');
     }
 
+    /**
+     *
+     */
     get $videoBackground() {
         return $('#largeVideoBackground');
     }
 
-    get id () {
+    /**
+     *
+     */
+    get id() {
         return this.userId;
     }
 
@@ -168,7 +183,7 @@ export class VideoContainer extends LargeContainer {
      * @param emitter {EventEmitter} the event emitter that will be used by
      * this instance.
      */
-    constructor (resizeContainer, emitter) {
+    constructor(resizeContainer, emitter) {
         super();
         this.stream = null;
         this.userId = null;
@@ -213,15 +228,17 @@ export class VideoContainer extends LargeContainer {
 
         this.avatarHeight = $('#dominantSpeakerAvatar').height();
 
-        var onPlayingCallback = function (event) {
+        const onPlayingCallback = function(event) {
             if (typeof resizeContainer === 'function') {
                 resizeContainer(event);
             }
             this.wasVideoRendered = true;
         }.bind(this);
+
         // This does not work with Temasys plugin - has to be a property to be
         // copied between new <object> elements
-        //this.$video.on('play', onPlay);
+        // this.$video.on('play', onPlay);
+
         this.$video[0].onplaying = onPlayingCallback;
 
         /**
@@ -254,7 +271,7 @@ export class VideoContainer extends LargeContainer {
      * @param {boolean} enable <tt>true</tt> if the filter is to be enabled or
      * <tt>false</tt> otherwise.
      */
-    enableLocalConnectionProblemFilter (enable) {
+    enableLocalConnectionProblemFilter(enable) {
         this.$video.toggleClass('videoProblemFilter', enable);
         this.$videoBackground.toggleClass('videoProblemFilter', enable);
     }
@@ -271,8 +288,10 @@ export class VideoContainer extends LargeContainer {
      * Get size of video element.
      * @returns {{width, height}}
      */
-    getStreamSize () {
-        let video = this.$video[0];
+    getStreamSize() {
+        const video = this.$video[0];
+
+
         return {
             width: video.videoWidth,
             height: video.videoHeight
@@ -286,7 +305,7 @@ export class VideoContainer extends LargeContainer {
      * @returns {{availableWidth, availableHeight}}
      */
     getVideoSize(containerWidth, containerHeight) {
-        let { width, height } = this.getStreamSize();
+        const { width, height } = this.getStreamSize();
 
         if (this.stream && this.isScreenSharing()) {
             return computeDesktopVideoSize(width,
@@ -302,6 +321,7 @@ export class VideoContainer extends LargeContainer {
             interfaceConfig.VIDEO_LAYOUT_FIT);
     }
 
+    /* eslint-disable max-params */
     /**
      * Calculate optimal video position (offset for top left corner)
      * for specified video size and container size.
@@ -311,18 +331,20 @@ export class VideoContainer extends LargeContainer {
      * @param {number} containerHeight container height
      * @returns {{horizontalIndent, verticalIndent}}
      */
-    getVideoPosition (width, height, containerWidth, containerHeight) {
+    getVideoPosition(width, height, containerWidth, containerHeight) {
+        /* eslint-enable max-params */
         if (this.stream && this.isScreenSharing()) {
-            return getDesktopVideoPosition( width,
+            return getDesktopVideoPosition(width,
                 height,
                 containerWidth,
                 containerHeight);
-        } else {
-            return getCameraVideoPosition(  width,
+        }
+
+        return getCameraVideoPosition(width,
                 height,
                 containerWidth,
                 containerHeight);
-        }
+
     }
 
     /**
@@ -346,18 +368,23 @@ export class VideoContainer extends LargeContainer {
      */
     _positionParticipantStatus($element) {
         if (this.avatarDisplayed) {
-            let $avatarImage = $('#dominantSpeakerAvatar');
+            const $avatarImage = $('#dominantSpeakerAvatar');
+
             $element.css(
                 'top',
                 $avatarImage.offset().top + $avatarImage.height() + 10);
         } else {
-            let height = $element.height();
-            let parentHeight = $element.parent().height();
-            $element.css('top', (parentHeight/2) - (height/2));
+            const height = $element.height();
+            const parentHeight = $element.parent().height();
+
+            $element.css('top', (parentHeight / 2) - (height / 2));
         }
     }
 
-    resize (containerWidth, containerHeight, animate = false) {
+    /**
+     *
+     */
+    resize(containerWidth, containerHeight, animate = false) {
         // XXX Prevent TypeError: undefined is not an object when the Web
         // browser does not support WebRTC (yet).
         if (this.$video.length === 0) {
@@ -366,32 +393,35 @@ export class VideoContainer extends LargeContainer {
 
         this._hideVideoBackground();
 
-        let [ width, height ]
+        const [ width, height ]
             = this.getVideoSize(containerWidth, containerHeight);
 
         if ((containerWidth > width) || (containerHeight > height)) {
             this._showVideoBackground();
             const css
                 = containerWidth > width
-                    ? { width: '100%', height: 'auto' }
-                    : { width: 'auto', height: '100%' };
+                    ? { width: '100%',
+                        height: 'auto' }
+                    : { width: 'auto',
+                        height: '100%' };
+
             this.$videoBackground.css(css);
         }
 
-        let { horizontalIndent, verticalIndent }
+        const { horizontalIndent, verticalIndent }
             = this.getVideoPosition(width, height,
             containerWidth, containerHeight);
 
         // update avatar position
-        let top = containerHeight / 2 - this.avatarHeight / 4 * 3;
+        const top = (containerHeight / 2) - (this.avatarHeight / 4 * 3);
 
         this.$avatar.css('top', top);
 
         this.positionRemoteStatusMessages();
 
         this.$wrapper.animate({
-            width: width,
-            height: height,
+            width,
+            height,
 
             top: verticalIndent,
             bottom: verticalIndent,
@@ -422,22 +452,24 @@ export class VideoContainer extends LargeContainer {
      * @param {JitsiTrack?} stream new stream
      * @param {string} videoType video type
      */
-    setStream (userID, stream, videoType) {
+    setStream(userID, stream, videoType) {
         this.userId = userID;
         if (this.stream === stream) {
             // Handles the use case for the remote participants when the
             // videoType is received with delay after turning on/off the
             // desktop sharing.
-            if(this.videoType !== videoType) {
+            if (this.videoType !== videoType) {
                 this.videoType = videoType;
                 this.resizeContainer();
             }
+
             return;
-        } else {
-            // The stream has changed, so the image will be lost on detach
-            this.wasVideoRendered = false;
         }
 
+        // The stream has changed, so the image will be lost on detach
+        this.wasVideoRendered = false;
+
+
         // detach old stream
         if (this.stream) {
             this.stream.detach(this.$video[0]);
@@ -475,8 +507,9 @@ export class VideoContainer extends LargeContainer {
      */
     setLocalFlipX(val) {
         this.localFlipX = val;
-        if(!this.$video || !this.stream || !this.stream.isLocal())
+        if (!this.$video || !this.stream || !this.stream.isLocal()) {
             return;
+        }
         this.$video.css({
             transform: this.localFlipX ? 'scaleX(-1)' : 'none'
         });
@@ -491,7 +524,7 @@ export class VideoContainer extends LargeContainer {
      * Check if current video stream is screen sharing.
      * @returns {boolean}
      */
-    isScreenSharing () {
+    isScreenSharing() {
         return this.videoType === 'desktop';
     }
 
@@ -499,7 +532,7 @@ export class VideoContainer extends LargeContainer {
      * Show or hide user avatar.
      * @param {boolean} show
      */
-    showAvatar (show) {
+    showAvatar(show) {
         // TO FIX: Video background need to be black, so that we don't have a
         // flickering effect when scrolling between videos and have the screen
         // move to grey before going back to video. Avatars though can have the
@@ -521,26 +554,28 @@ export class VideoContainer extends LargeContainer {
      * @param {boolean} show <tt>true</tt> to show or <tt>false</tt> to hide
      * the indication.
      */
-    showRemoteConnectionProblemIndicator (show) {
+    showRemoteConnectionProblemIndicator(show) {
         this.$video.toggleClass('remoteVideoProblemFilter', show);
         this.$videoBackground.toggleClass('remoteVideoProblemFilter', show);
 
         this.$avatar.toggleClass('remoteVideoProblemFilter', show);
     }
 
-    // We are doing fadeOut/fadeIn animations on parent div which wraps
-    // largeVideo, because when Temasys plugin is in use it replaces
-    // <video> elements with plugin <object> tag. In Safari jQuery is
-    // unable to store values on this plugin object which breaks all
-    // animation effects performed on it directly.
 
-    show () {
+    /**
+     * We are doing fadeOut/fadeIn animations on parent div which wraps
+     * largeVideo, because when Temasys plugin is in use it replaces
+     * <video> elements with plugin <object> tag. In Safari jQuery is
+     * unable to store values on this plugin object which breaks all
+     * animation effects performed on it directly.
+     */
+    show() {
         // its already visible
         if (this.isVisible) {
             return Promise.resolve();
         }
 
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.$wrapperParent.css('visibility', 'visible').fadeTo(
                 FADE_DURATION_MS,
                 1,
@@ -552,16 +587,20 @@ export class VideoContainer extends LargeContainer {
         });
     }
 
-    hide () {
+    /**
+     * 
+     */
+    hide() {
         // as the container is hidden/replaced by another container
         // hide its avatar
         this.showAvatar(false);
+
         // its already hidden
         if (!this.isVisible) {
             return Promise.resolve();
         }
 
-        return new Promise((resolve) => {
+        return new Promise(resolve => {
             this.$wrapperParent.fadeTo(FADE_DURATION_MS, 0, () => {
                 this.$wrapperParent.css('visibility', 'hidden');
                 this.isVisible = false;
@@ -573,7 +612,7 @@ export class VideoContainer extends LargeContainer {
     /**
      * @return {boolean} switch on dominant speaker event if on stage.
      */
-    stayOnStage () {
+    stayOnStage() {
         return false;
     }
 
@@ -586,9 +625,9 @@ export class VideoContainer extends LargeContainer {
      * on the large video.
      * @returns {void}
      */
-    setLargeVideoBackground (isAvatar) {
+    setLargeVideoBackground(isAvatar) {
         $('#largeVideoContainer').css('background',
-            (this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar)
+            this.videoType === VIDEO_CONTAINER_TYPE && !isAvatar
                 ? '#000' : interfaceConfig.DEFAULT_BACKGROUND);
     }
 
@@ -631,6 +670,7 @@ export class VideoContainer extends LargeContainer {
         // do not care. Some browsers (at this time, only Edge is known) don't
         // return a promise from .play(), so check before trying to catch.
         const res = this.$videoBackground[0].play();
+
         if (typeof res !== 'undefined') {
             res.catch(reason => logger.error(reason));
         }

modules/URL/ConferenceUrl.js

@@ -1,4 +1,4 @@
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
  * The modules stores information about the URL used to start the conference and
@@ -24,9 +24,9 @@ export default class ConferenceUrl {
      * from the sample URL.
      */
     constructor(location) {
-        logger.info("Stored original conference URL: " + location.href);
+        logger.info(`Stored original conference URL: ${location.href}`);
         logger.info(
-                "Conference URL for invites: " + location.protocol + "//"
-                    + location.host + location.pathname);
+                `Conference URL for invites: ${location.protocol}//${
+                    location.host}${location.pathname}`);
     }
 }

modules/devices/mediaDeviceHelper.js

@@ -1,8 +1,8 @@
 /* global APP, JitsiMeetJS */
 
 let currentAudioInputDevices,
-    currentVideoInputDevices,
-    currentAudioOutputDevices;
+    currentAudioOutputDevices,
+    currentVideoInputDevices;
 
 /**
  * Determines if currently selected audio output device should be changed after
@@ -16,14 +16,14 @@ function getNewAudioOutputDevice(newDevices) {
         return;
     }
 
-    let selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
-    let availableAudioOutputDevices = newDevices.filter(
+    const selectedAudioOutputDeviceId = APP.settings.getAudioOutputDeviceId();
+    const availableAudioOutputDevices = newDevices.filter(
         d => d.kind === 'audiooutput');
 
     // Switch to 'default' audio output device if we don't have the selected one
     // available anymore.
-    if (selectedAudioOutputDeviceId !== 'default' &&
-        !availableAudioOutputDevices.find(d =>
+    if (selectedAudioOutputDeviceId !== 'default'
+        && !availableAudioOutputDevices.find(d =>
             d.deviceId === selectedAudioOutputDeviceId)) {
         return 'default';
     }
@@ -38,10 +38,10 @@ function getNewAudioOutputDevice(newDevices) {
  *      if audio input device should not be changed.
  */
 function getNewAudioInputDevice(newDevices, localAudio) {
-    let availableAudioInputDevices = newDevices.filter(
+    const availableAudioInputDevices = newDevices.filter(
         d => d.kind === 'audioinput');
-    let selectedAudioInputDeviceId = APP.settings.getMicDeviceId();
-    let selectedAudioInputDevice = availableAudioInputDevices.find(
+    const selectedAudioInputDeviceId = APP.settings.getMicDeviceId();
+    const selectedAudioInputDevice = availableAudioInputDevices.find(
         d => d.deviceId === selectedAudioInputDeviceId);
 
     // Here we handle case when no device was initially plugged, but
@@ -51,18 +51,17 @@ function getNewAudioInputDevice(newDevices, localAudio) {
         // If we have new audio device and permission to use it was granted
         // (label is not an empty string), then we will try to use the first
         // available device.
-        if (availableAudioInputDevices.length &&
-            availableAudioInputDevices[0].label !== '') {
+        if (availableAudioInputDevices.length
+            && availableAudioInputDevices[0].label !== '') {
             return availableAudioInputDevices[0].deviceId;
         }
-    } else {
+    } else if (selectedAudioInputDevice
+        && selectedAudioInputDeviceId !== localAudio.getDeviceId()) {
+
         // And here we handle case when we already have some device working,
         // but we plug-in a "preferred" (previously selected in settings, stored
         // in local storage) device.
-        if (selectedAudioInputDevice &&
-            selectedAudioInputDeviceId !== localAudio.getDeviceId()) {
-            return selectedAudioInputDeviceId;
-        }
+        return selectedAudioInputDeviceId;
     }
 }
 
@@ -75,10 +74,10 @@ function getNewAudioInputDevice(newDevices, localAudio) {
  *      if video input device should not be changed.
  */
 function getNewVideoInputDevice(newDevices, localVideo) {
-    let availableVideoInputDevices = newDevices.filter(
+    const availableVideoInputDevices = newDevices.filter(
         d => d.kind === 'videoinput');
-    let selectedVideoInputDeviceId = APP.settings.getCameraDeviceId();
-    let selectedVideoInputDevice = availableVideoInputDevices.find(
+    const selectedVideoInputDeviceId = APP.settings.getCameraDeviceId();
+    const selectedVideoInputDevice = availableVideoInputDevices.find(
         d => d.deviceId === selectedVideoInputDeviceId);
 
     // Here we handle case when no video input device was initially plugged,
@@ -88,18 +87,16 @@ function getNewVideoInputDevice(newDevices, localVideo) {
         // If we have new video device and permission to use it was granted
         // (label is not an empty string), then we will try to use the first
         // available device.
-        if (availableVideoInputDevices.length &&
-            availableVideoInputDevices[0].label !== '') {
+        if (availableVideoInputDevices.length
+            && availableVideoInputDevices[0].label !== '') {
             return availableVideoInputDevices[0].deviceId;
         }
-    } else {
+    } else if (selectedVideoInputDevice
+            && selectedVideoInputDeviceId !== localVideo.getDeviceId()) {
         // And here we handle case when we already have some device working,
         // but we plug-in a "preferred" (previously selected in settings, stored
         // in local storage) device.
-        if (selectedVideoInputDevice &&
-            selectedVideoInputDeviceId !== localVideo.getDeviceId()) {
-            return selectedVideoInputDeviceId;
-        }
+        return selectedVideoInputDeviceId;
     }
 }
 
@@ -113,19 +110,21 @@ export default {
     getDevicesFromListByKind(devices, kind) {
         return devices.filter(d => d.kind === kind);
     },
+
     /**
      * Stores lists of current 'audioinput', 'videoinput' and 'audiooutput'
      * devices.
      * @param {MediaDeviceInfo[]} devices
      */
     setCurrentMediaDevices(devices) {
-        currentAudioInputDevices =
-            this.getDevicesFromListByKind(devices, 'audioinput');
-        currentVideoInputDevices =
-            this.getDevicesFromListByKind(devices, 'videoinput');
-        currentAudioOutputDevices =
-            this.getDevicesFromListByKind(devices, 'audiooutput');
+        currentAudioInputDevices
+            = this.getDevicesFromListByKind(devices, 'audioinput');
+        currentVideoInputDevices
+            = this.getDevicesFromListByKind(devices, 'videoinput');
+        currentAudioOutputDevices
+            = this.getDevicesFromListByKind(devices, 'audiooutput');
     },
+
     /**
      * Returns lists of current 'audioinput', 'videoinput' and 'audiooutput'
      * devices.
@@ -142,6 +141,7 @@ export default {
             audiooutput: currentAudioOutputDevices
         };
     },
+
     /**
      * Determines if currently selected media devices should be changed after
      * list of available devices has been changed.
@@ -155,18 +155,19 @@ export default {
      *  audiooutput: (string|undefined)
      *  }}
      */
-    getNewMediaDevicesAfterDeviceListChanged(
+    getNewMediaDevicesAfterDeviceListChanged( // eslint-disable-line max-params
             newDevices,
             isSharingScreen,
             localVideo,
             localAudio) {
         return {
             audioinput: getNewAudioInputDevice(newDevices, localAudio),
-            videoinput: !isSharingScreen &&
-                getNewVideoInputDevice(newDevices, localVideo),
+            videoinput: !isSharingScreen
+                && getNewVideoInputDevice(newDevices, localVideo),
             audiooutput: getNewAudioOutputDevice(newDevices)
         };
     },
+
     /**
      * Tries to create new local tracks for new devices obtained after device
      * list changed. Shows error dialog in case of failures.
@@ -181,21 +182,22 @@ export default {
             micDeviceId) {
         let audioTrackError;
         let videoTrackError;
-        let audioRequested = !!micDeviceId;
-        let videoRequested = !!cameraDeviceId;
+        const audioRequested = Boolean(micDeviceId);
+        const videoRequested = Boolean(cameraDeviceId);
 
         if (audioRequested && videoRequested) {
             // First we try to create both audio and video tracks together.
             return (
                 createLocalTracks({
-                    devices: ['audio', 'video'],
-                    cameraDeviceId: cameraDeviceId,
-                    micDeviceId: micDeviceId
+                    devices: [ 'audio', 'video' ],
+                    cameraDeviceId,
+                    micDeviceId
                 })
+
                 // If we fail to do this, try to create them separately.
                 .catch(() => Promise.all([
-                    createAudioTrack(false).then(([stream]) => stream),
-                    createVideoTrack(false).then(([stream]) => stream)
+                    createAudioTrack(false).then(([ stream ]) => stream),
+                    createVideoTrack(false).then(([ stream ]) => stream)
                 ]))
                 .then(tracks => {
                     if (audioTrackError) {
@@ -212,34 +214,42 @@ export default {
             return createVideoTrack();
         } else if (audioRequested && !videoRequested) {
             return createAudioTrack();
-        } else {
-            return Promise.resolve([]);
         }
 
+        return Promise.resolve([]);
+
+        /**
+         *
+         */
         function createAudioTrack(showError) {
             return (
                 createLocalTracks({
-                    devices: ['audio'],
+                    devices: [ 'audio' ],
                     cameraDeviceId: null,
-                    micDeviceId: micDeviceId
+                    micDeviceId
                 })
                 .catch(err => {
                     audioTrackError = err;
                     showError && APP.UI.showMicErrorNotification(err);
+
                     return [];
                 }));
         }
 
+        /**
+         * 
+         */
         function createVideoTrack(showError) {
             return (
                 createLocalTracks({
-                    devices: ['video'],
-                    cameraDeviceId: cameraDeviceId,
+                    devices: [ 'video' ],
+                    cameraDeviceId,
                     micDeviceId: null
                 })
                 .catch(err => {
                     videoTrackError = err;
                     showError && APP.UI.showCameraErrorNotification(err);
+
                     return [];
                 }));
         }

modules/keyboardshortcut/keyboardshortcut.js

@@ -11,47 +11,6 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  */
 let keyboardShortcutDialog = null;
 
-/**
- * Initialise global shortcuts.
- * Global shortcuts are shortcuts for features that don't have a button or
- * link associated with the action. In other words they represent actions
- * triggered _only_ with a shortcut.
- */
-function initGlobalShortcuts() {
-    KeyboardShortcut.registerShortcut("ESCAPE", null, function() {
-        showKeyboardShortcutsPanel(false);
-    });
-
-    KeyboardShortcut.registerShortcut("?", null, function() {
-        sendEvent("shortcut.shortcut.help");
-        showKeyboardShortcutsPanel(true);
-    }, "keyboardShortcuts.toggleShortcuts");
-
-    // register SPACE shortcut in two steps to insure visibility of help message
-    KeyboardShortcut.registerShortcut(" ", null, function() {
-        sendEvent("shortcut.talk.clicked");
-        logger.log('Talk shortcut pressed');
-        APP.conference.muteAudio(true);
-    });
-    KeyboardShortcut._addShortcutToHelp("SPACE","keyboardShortcuts.pushToTalk");
-
-    if(!interfaceConfig.filmStripOnly) {
-        KeyboardShortcut.registerShortcut("T", null, () => {
-            sendEvent("shortcut.speakerStats.clicked");
-            APP.store.dispatch(toggleDialog(SpeakerStats, {
-                conference: APP.conference
-            }));
-        }, "keyboardShortcuts.showSpeakerStats");
-    }
-
-    /**
-     * FIXME: Currently focus keys are directly implemented below in onkeyup.
-     * They should be moved to the SmallVideo instead.
-     */
-    KeyboardShortcut._addShortcutToHelp("0", "keyboardShortcuts.focusLocal");
-    KeyboardShortcut._addShortcutToHelp("1-9", "keyboardShortcuts.focusRemote");
-}
-
 /**
  * Shows or hides the keyboard shortcuts dialog.
  * @param {boolean} show whether to show or hide the dialog
@@ -60,8 +19,8 @@ function showKeyboardShortcutsPanel(show) {
     if (show
             && !APP.UI.messageHandler.isDialogOpened()
             && keyboardShortcutDialog === null) {
-        let msg = $('#keyboard-shortcuts').html();
-        let buttons = { Close: true };
+        const msg = $('#keyboard-shortcuts').html();
+        const buttons = { Close: true };
 
         keyboardShortcutDialog = APP.UI.messageHandler.openDialog(
             'keyboardShortcuts.keyboardShortcuts', msg, true, buttons);
@@ -75,7 +34,7 @@ function showKeyboardShortcutsPanel(show) {
  * Map of shortcuts. When a shortcut is registered it enters the mapping.
  * @type {{}}
  */
-let _shortcuts = {};
+const _shortcuts = {};
 
 /**
  * True if the keyboard shortcuts are enabled and false if not.
@@ -87,43 +46,42 @@ let enabled = true;
  * Maps keycode to character, id of popover for given function and function.
  */
 const KeyboardShortcut = {
-    init: function () {
-        initGlobalShortcuts();
+    init() {
+        this._initGlobalShortcuts();
 
-        var self = this;
-        window.onkeyup = function(e) {
-            if(!enabled) {
+        window.onkeyup = e => {
+            if (!enabled) {
                 return;
             }
-            var key = self._getKeyboardKey(e).toUpperCase();
-            var num = parseInt(key, 10);
-            if(!($(":focus").is("input[type=text]") ||
-                $(":focus").is("input[type=password]") ||
-                $(":focus").is("textarea"))) {
+            const key = this._getKeyboardKey(e).toUpperCase();
+            const num = parseInt(key, 10);
+
+            if (!($(':focus').is('input[type=text]')
+                || $(':focus').is('input[type=password]')
+                || $(':focus').is('textarea'))) {
                 if (_shortcuts.hasOwnProperty(key)) {
                     _shortcuts[key].function(e);
-                }
-                else if (!isNaN(num) && num >= 0 && num <= 9) {
+                } else if (!isNaN(num) && num >= 0 && num <= 9) {
                     APP.UI.clickOnVideo(num);
                 }
-            //esc while the smileys are visible hides them
-            } else if (key === "ESCAPE" &&
-                $('#smileysContainer').is(':visible')) {
+
+            // esc while the smileys are visible hides them
+            } else if (key === 'ESCAPE'
+                && $('#smileysContainer').is(':visible')) {
                 APP.UI.toggleSmileys();
             }
         };
 
-        window.onkeydown = function(e) {
-            if(!enabled) {
+        window.onkeydown = e => {
+            if (!enabled) {
                 return;
             }
-            if(!($(":focus").is("input[type=text]") ||
-                $(":focus").is("input[type=password]") ||
-                $(":focus").is("textarea"))) {
-                var key = self._getKeyboardKey(e).toUpperCase();
-                if(key === " ") {
-                    if(APP.conference.isLocalAudioMuted()) {
-                        sendEvent("shortcut.talk.released");
+            if (!($(':focus').is('input[type=text]')
+                || $(':focus').is('input[type=password]')
+                || $(':focus').is('textarea'))) {
+                if (this._getKeyboardKey(e).toUpperCase() === ' ') {
+                    if (APP.conference.isLocalAudioMuted()) {
+                        sendEvent('shortcut.talk.released');
                         logger.log('Talk shortcut released');
                         APP.conference.muteAudio(false);
                     }
@@ -136,7 +94,7 @@ const KeyboardShortcut = {
      * Enables/Disables the keyboard shortcuts.
      * @param {boolean} value - the new value.
      */
-    enable: function (value) {
+    enable(value) {
         enabled = value;
     },
 
@@ -151,19 +109,20 @@ const KeyboardShortcut = {
      * @param helpDescription the description of the shortcut that would appear
      * in the help menu
      */
-    registerShortcut(
+    registerShortcut(// eslint-disable-line max-params
             shortcutChar,
             shortcutAttr,
             exec,
             helpDescription) {
         _shortcuts[shortcutChar] = {
             character: shortcutChar,
-            shortcutAttr: shortcutAttr,
+            shortcutAttr,
             function: exec
         };
 
-        if (helpDescription)
+        if (helpDescription) {
             this._addShortcutToHelp(shortcutChar, helpDescription);
+        }
     },
 
     /**
@@ -172,7 +131,7 @@ const KeyboardShortcut = {
      * @param shortcutChar unregisters the given shortcut, which means it will
      * no longer be usable
      */
-    unregisterShortcut: function(shortcutChar) {
+    unregisterShortcut(shortcutChar) {
         _shortcuts.remove(shortcutChar);
 
         this._removeShortcutFromHelp(shortcutChar);
@@ -186,44 +145,47 @@ const KeyboardShortcut = {
      * or an empty string if the shortcutAttr is null, an empty string or not
      * found in the shortcut mapping
      */
-    getShortcutTooltip: function (shortcutAttr) {
-        if (typeof shortcutAttr === "string" && shortcutAttr.length > 0) {
-            for (var key in _shortcuts) {
+    getShortcutTooltip(shortcutAttr) {
+        if (typeof shortcutAttr === 'string' && shortcutAttr.length > 0) {
+            for (const key in _shortcuts) {
                 if (_shortcuts.hasOwnProperty(key)
                     && _shortcuts[key].shortcutAttr
                     && _shortcuts[key].shortcutAttr === shortcutAttr) {
-                    return " (" + _shortcuts[key].character + ")";
+                    return ` (${_shortcuts[key].character})`;
                 }
             }
         }
 
-        return "";
+        return '';
     },
+
     /**
      * @param e a KeyboardEvent
      * @returns {string} e.key or something close if not supported
      */
-    _getKeyboardKey: function (e) {
-        if (typeof e.key === "string") {
+    _getKeyboardKey(e) {
+        if (typeof e.key === 'string') {
             return e.key;
         }
-        if (e.type === "keypress"
+        if (e.type === 'keypress'
                 && ((e.which >= 32 && e.which <= 126)
-                    || (e.which >= 160 && e.which <= 255) )) {
+                    || (e.which >= 160 && e.which <= 255))) {
             return String.fromCharCode(e.which);
         }
+
         // try to fallback (0-9A-Za-z and QWERTY keyboard)
         switch (e.which) {
         case 27:
-            return "Escape";
+            return 'Escape';
         case 191:
-            return e.shiftKey ? "?" : "/";
+            return e.shiftKey ? '?' : '/';
         }
-        if (e.shiftKey || e.type === "keypress") {
+        if (e.shiftKey || e.type === 'keypress') {
             return String.fromCharCode(e.which);
-        } else {
-            return String.fromCharCode(e.which).toLowerCase();
         }
+
+        return String.fromCharCode(e.which).toLowerCase();
+
     },
 
     /**
@@ -233,36 +195,41 @@ const KeyboardShortcut = {
      * @param shortcutDescriptionKey the description of the shortcut
      * @private
      */
-    _addShortcutToHelp: function (shortcutChar, shortcutDescriptionKey) {
+    _addShortcutToHelp(shortcutChar, shortcutDescriptionKey) {
+
+        const listElement = document.createElement('li');
+        const itemClass = 'shortcuts-list__item';
 
-        let listElement = document.createElement("li");
-        let itemClass = 'shortcuts-list__item';
         listElement.className = itemClass;
         listElement.id = shortcutChar;
 
-        let spanElement = document.createElement("span");
-        spanElement.className = "item-action";
+        const spanElement = document.createElement('span');
+
+        spanElement.className = 'item-action';
+
+        const kbdElement = document.createElement('kbd');
+        const classes = 'aui-label regular-key';
 
-        let kbdElement = document.createElement("kbd");
-        let classes = 'aui-label regular-key';
         kbdElement.className = classes;
         kbdElement.innerHTML = shortcutChar;
         spanElement.appendChild(kbdElement);
 
-        let descriptionElement = document.createElement("span");
-        let descriptionClass = "shortcuts-list__description";
+        const descriptionElement = document.createElement('span');
+        const descriptionClass = 'shortcuts-list__description';
+
         descriptionElement.className = descriptionClass;
-        descriptionElement.setAttribute("data-i18n", shortcutDescriptionKey);
+        descriptionElement.setAttribute('data-i18n', shortcutDescriptionKey);
         APP.translation.translateElement($(descriptionElement));
 
         listElement.appendChild(spanElement);
         listElement.appendChild(descriptionElement);
 
-        let parentListElement
-            = document.getElementById("keyboard-shortcuts-list");
+        const parentListElement
+            = document.getElementById('keyboard-shortcuts-list');
 
-        if (parentListElement)
+        if (parentListElement) {
             parentListElement.appendChild(listElement);
+        }
     },
 
     /**
@@ -270,14 +237,57 @@ const KeyboardShortcut = {
      * help dialog
      * @private
      */
-    _removeShortcutFromHelp: function (shortcutChar) {
-        var parentListElement
-            = document.getElementById("keyboard-shortcuts-list");
+    _removeShortcutFromHelp(shortcutChar) {
+        const parentListElement
+            = document.getElementById('keyboard-shortcuts-list');
 
-        var shortcutElement = document.getElementById(shortcutChar);
+        const shortcutElement = document.getElementById(shortcutChar);
 
-        if (shortcutElement)
+        if (shortcutElement) {
             parentListElement.removeChild(shortcutElement);
+        }
+    },
+
+    /**
+     * Initialise global shortcuts.
+     * Global shortcuts are shortcuts for features that don't have a button or
+     * link associated with the action. In other words they represent actions
+     * triggered _only_ with a shortcut.
+     */
+    _initGlobalShortcuts() {
+        this.registerShortcut('ESCAPE', null, () => {
+            showKeyboardShortcutsPanel(false);
+        });
+
+        this.registerShortcut('?', null, () => {
+            sendEvent('shortcut.shortcut.help');
+            showKeyboardShortcutsPanel(true);
+        }, 'keyboardShortcuts.toggleShortcuts');
+
+        // register SPACE shortcut in two steps to insure visibility of help
+        // message
+        this.registerShortcut(' ', null, () => {
+            sendEvent('shortcut.talk.clicked');
+            logger.log('Talk shortcut pressed');
+            APP.conference.muteAudio(true);
+        });
+        this._addShortcutToHelp('SPACE', 'keyboardShortcuts.pushToTalk');
+
+        if (!interfaceConfig.filmStripOnly) {
+            this.registerShortcut('T', null, () => {
+                sendEvent('shortcut.speakerStats.clicked');
+                APP.store.dispatch(toggleDialog(SpeakerStats, {
+                    conference: APP.conference
+                }));
+            }, 'keyboardShortcuts.showSpeakerStats');
+        }
+
+        /**
+         * FIXME: Currently focus keys are directly implemented below in
+         * onkeyup. They should be moved to the SmallVideo instead.
+         */
+        this._addShortcutToHelp('0', 'keyboardShortcuts.focusLocal');
+        this._addShortcutToHelp('1-9', 'keyboardShortcuts.focusRemote');
     }
 };
 

modules/keycode/keycode.js

@@ -5,74 +5,76 @@
  * @enum {string}
  */
 export const KEYS = {
-    BACKSPACE: "backspace" ,
-    DELETE : "delete",
-    RETURN : "enter",
-    TAB : "tab",
-    ESCAPE : "escape",
-    UP : "up",
-    DOWN : "down",
-    RIGHT : "right",
-    LEFT : "left",
-    HOME : "home",
-    END : "end",
-    PAGEUP : "pageup",
-    PAGEDOWN : "pagedown",
+    BACKSPACE: 'backspace',
+    DELETE: 'delete',
+    RETURN: 'enter',
+    TAB: 'tab',
+    ESCAPE: 'escape',
+    UP: 'up',
+    DOWN: 'down',
+    RIGHT: 'right',
+    LEFT: 'left',
+    HOME: 'home',
+    END: 'end',
+    PAGEUP: 'pageup',
+    PAGEDOWN: 'pagedown',
 
-    F1 : "f1",
-    F2 : "f2",
-    F3 : "f3",
-    F4 : "f4",
-    F5 : "f5",
-    F6 : "f6",
-    F7 : "f7",
-    F8 : "f8",
-    F9 : "f9",
-    F10 : "f10",
-    F11 : "f11",
-    F12 : "f12",
-    META : "command",
-    CMD_L: "command",
-    CMD_R: "command",
-    ALT : "alt",
-    CONTROL : "control",
-    SHIFT : "shift",
-    CAPS_LOCK: "caps_lock", //not supported by robotjs
-    SPACE : "space",
-    PRINTSCREEN : "printscreen",
-    INSERT : "insert",
+    F1: 'f1',
+    F2: 'f2',
+    F3: 'f3',
+    F4: 'f4',
+    F5: 'f5',
+    F6: 'f6',
+    F7: 'f7',
+    F8: 'f8',
+    F9: 'f9',
+    F10: 'f10',
+    F11: 'f11',
+    F12: 'f12',
+    META: 'command',
+    CMD_L: 'command',
+    CMD_R: 'command',
+    ALT: 'alt',
+    CONTROL: 'control',
+    SHIFT: 'shift',
+    CAPS_LOCK: 'caps_lock', // not supported by robotjs
+    SPACE: 'space',
+    PRINTSCREEN: 'printscreen',
+    INSERT: 'insert',
 
-    NUMPAD_0 : "numpad_0",
-    NUMPAD_1 : "numpad_1",
-    NUMPAD_2 : "numpad_2",
-    NUMPAD_3 : "numpad_3",
-    NUMPAD_4 : "numpad_4",
-    NUMPAD_5 : "numpad_5",
-    NUMPAD_6 : "numpad_6",
-    NUMPAD_7 : "numpad_7",
-    NUMPAD_8 : "numpad_8",
-    NUMPAD_9 : "numpad_9",
+    NUMPAD_0: 'numpad_0',
+    NUMPAD_1: 'numpad_1',
+    NUMPAD_2: 'numpad_2',
+    NUMPAD_3: 'numpad_3',
+    NUMPAD_4: 'numpad_4',
+    NUMPAD_5: 'numpad_5',
+    NUMPAD_6: 'numpad_6',
+    NUMPAD_7: 'numpad_7',
+    NUMPAD_8: 'numpad_8',
+    NUMPAD_9: 'numpad_9',
 
-    COMMA: ",",
+    COMMA: ',',
 
-    PERIOD: ".",
-    SEMICOLON: ";",
-    QUOTE: "'",
-    BRACKET_LEFT: "[",
-    BRACKET_RIGHT: "]",
-    BACKQUOTE: "`",
-    BACKSLASH: "\\",
-    MINUS: "-",
-    EQUAL: "=",
-    SLASH: "/"
+    PERIOD: '.',
+    SEMICOLON: ';',
+    QUOTE: '\'',
+    BRACKET_LEFT: '[',
+    BRACKET_RIGHT: ']',
+    BACKQUOTE: '`',
+    BACKSLASH: '\\',
+    MINUS: '-',
+    EQUAL: '=',
+    SLASH: '/'
 };
 
+/* eslint-disable max-len */
 /**
  * Mapping between the key codes and keys deined in KEYS.
  * The mappings are based on
  * https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode#Specifications
  */
-let keyCodeToKey = {
+/* eslint-enable max-len */
+const keyCodeToKey = {
     8: KEYS.BACKSPACE,
     9: KEYS.TAB,
     13: KEYS.RETURN,
@@ -141,15 +143,16 @@ let keyCodeToKey = {
 /**
  * Generate codes for digit keys (0-9)
  */
-for(let i = 0; i < 10; i++) {
+for (let i = 0; i < 10; i++) {
     keyCodeToKey[i + 48] = `${i}`;
 }
 
 /**
  * Generate codes for letter keys (a-z)
  */
-for(let i = 0; i < 26; i++) {
-    let keyCode = i + 65;
+for (let i = 0; i < 26; i++) {
+    const keyCode = i + 65;
+
     keyCodeToKey[keyCode] = String.fromCharCode(keyCode).toLowerCase();
 }
 

modules/recorder/Recorder.js

@@ -3,16 +3,20 @@
 /**
  * The (name of the) command which transports the recorder info.
  */
-const _USER_INFO_COMMAND = "userinfo";
+const _USER_INFO_COMMAND = 'userinfo';
 
 /**
  * The Recorder class is meant to take care of recorder related presence
  * commands.
  */
 class Recorder {
+    /**
+     * Creates new recorder instance.
+     */
     constructor() {
-        if (config.iAmRecorder)
+        if (config.iAmRecorder) {
             this._sendRecorderInfo();
+        }
     }
 
     /**
@@ -20,7 +24,7 @@ class Recorder {
      * @private
      */
     _sendRecorderInfo() {
-        var commands = APP.conference.commands;
+        const commands = APP.conference.commands;
 
         // XXX The "Follow Me" command represents a snapshot of all states
         // which are to be followed so don't forget to removeCommand before

modules/settings/Settings.js

@@ -1,5 +1,5 @@
 /* global JitsiMeetJS */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 import UIUtil from '../UI/util/UIUtil';
 import jitsiLocalStorage from '../util/JitsiLocalStorage';
@@ -7,34 +7,35 @@ import { randomHexString } from '../../react/features/base/util';
 
 let avatarUrl = '';
 
-let email = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("email") || '');
-let avatarId = UIUtil.unescapeHtml(jitsiLocalStorage.getItem("avatarId") || '');
+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 = randomHexString(32);
-    jitsiLocalStorage.setItem("avatarId", avatarId);
+    jitsiLocalStorage.setItem('avatarId', avatarId);
 }
 
-let localFlipX = JSON.parse(jitsiLocalStorage.getItem("localFlipX") || true);
+let localFlipX = JSON.parse(jitsiLocalStorage.getItem('localFlipX') || true);
 let displayName = UIUtil.unescapeHtml(
-    jitsiLocalStorage.getItem("displayname") || '');
-let cameraDeviceId = jitsiLocalStorage.getItem("cameraDeviceId") || '';
-let micDeviceId = jitsiLocalStorage.getItem("micDeviceId") || '';
+    jitsiLocalStorage.getItem('displayname') || '');
+let cameraDeviceId = jitsiLocalStorage.getItem('cameraDeviceId') || '';
+let micDeviceId = jitsiLocalStorage.getItem('micDeviceId') || '';
 let welcomePageDisabled = JSON.parse(
-    jitsiLocalStorage.getItem("welcomePageDisabled") || false);
+    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")
+const audioOutputDeviceId = jitsiLocalStorage.getItem('audioOutputDeviceId')
     || 'default';
 
-if (audioOutputDeviceId !==
-    JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
+if (audioOutputDeviceId
+    !== JitsiMeetJS.mediaDevices.getAudioOutputDevice()) {
     JitsiMeetJS.mediaDevices.setAudioOutputDevice(audioOutputDeviceId)
-        .catch((ex) => {
-            logger.warn('Failed to set audio output device from local ' +
-                'storage. Default audio output device will be used' +
-                'instead.', ex);
+        .catch(ex => {
+            logger.warn('Failed to set audio output device from local '
+                + 'storage. Default audio output device will be used'
+                + 'instead.', ex);
         });
 }
 
@@ -46,19 +47,20 @@ export default {
      * @param {string} newDisplayName unescaped display name for the local user
      * @param {boolean} disableLocalStore disables local store the display name
      */
-    setDisplayName (newDisplayName, disableLocalStore) {
+    setDisplayName(newDisplayName, disableLocalStore) {
         displayName = newDisplayName;
 
-        if (!disableLocalStore)
-            jitsiLocalStorage.setItem("displayname",
+        if (!disableLocalStore) {
+            jitsiLocalStorage.setItem('displayname',
                 UIUtil.escapeHtml(displayName));
+        }
     },
 
     /**
      * Returns the escaped display name currently used by the user
      * @returns {string} currently valid user display name.
      */
-    getDisplayName: function () {
+    getDisplayName() {
         return displayName;
     },
 
@@ -67,18 +69,19 @@ export default {
      * @param {string} newEmail new email for the local user
      * @param {boolean} disableLocalStore disables local store the email
      */
-    setEmail: function (newEmail, disableLocalStore) {
+    setEmail(newEmail, disableLocalStore) {
         email = newEmail;
 
-        if (!disableLocalStore)
-            jitsiLocalStorage.setItem("email", UIUtil.escapeHtml(newEmail));
+        if (!disableLocalStore) {
+            jitsiLocalStorage.setItem('email', UIUtil.escapeHtml(newEmail));
+        }
     },
 
     /**
      * Returns email address of the local user.
      * @returns {string} email
      */
-    getEmail: function () {
+    getEmail() {
         return email;
     },
 
@@ -86,7 +89,7 @@ export default {
      * Returns avatar id of the local user.
      * @returns {string} avatar id
      */
-    getAvatarId: function () {
+    getAvatarId() {
         return avatarId;
     },
 
@@ -94,7 +97,7 @@ export default {
      * Sets new avatarUrl for local user and saves it to the local storage.
      * @param {string} newAvatarUrl new avatarUrl for the local user
      */
-    setAvatarUrl: function (newAvatarUrl) {
+    setAvatarUrl(newAvatarUrl) {
         avatarUrl = newAvatarUrl;
     },
 
@@ -102,7 +105,7 @@ export default {
      * Returns avatarUrl address of the local user.
      * @returns {string} avatarUrl
      */
-    getAvatarUrl: function () {
+    getAvatarUrl() {
         return avatarUrl;
     },
 
@@ -110,16 +113,16 @@ export default {
      * Sets new flipX state of local video and saves it to the local storage.
      * @param {string} val flipX state of local video
      */
-    setLocalFlipX: function (val) {
+    setLocalFlipX(val) {
         localFlipX = val;
-        jitsiLocalStorage.setItem("localFlipX", val);
+        jitsiLocalStorage.setItem('localFlipX', val);
     },
 
     /**
      * Returns flipX state of local video.
      * @returns {string} flipX
      */
-    getLocalFlipX: function () {
+    getLocalFlipX() {
         return localFlipX;
     },
 
@@ -128,19 +131,21 @@ export default {
      * Empty string stands for default device.
      * @returns {String}
      */
-    getCameraDeviceId: function () {
+    getCameraDeviceId() {
         return cameraDeviceId;
     },
+
     /**
      * Set device id of the camera which is currently in use.
      * Empty string stands for default device.
      * @param {string} newId new camera device id
      * @param {boolean} whether we need to store the value
      */
-    setCameraDeviceId: function (newId, store) {
+    setCameraDeviceId(newId, store) {
         cameraDeviceId = newId;
-        if (store)
-            jitsiLocalStorage.setItem("cameraDeviceId", newId);
+        if (store) {
+            jitsiLocalStorage.setItem('cameraDeviceId', newId);
+        }
     },
 
     /**
@@ -148,19 +153,21 @@ export default {
      * Empty string stands for default device.
      * @returns {String}
      */
-    getMicDeviceId: function () {
+    getMicDeviceId() {
         return micDeviceId;
     },
+
     /**
      * Set device id of the microphone which is currently in use.
      * Empty string stands for default device.
      * @param {string} newId new microphone device id
      * @param {boolean} whether we need to store the value
      */
-    setMicDeviceId: function (newId, store) {
+    setMicDeviceId(newId, store) {
         micDeviceId = newId;
-        if (store)
-            jitsiLocalStorage.setItem("micDeviceId", newId);
+        if (store) {
+            jitsiLocalStorage.setItem('micDeviceId', newId);
+        }
     },
 
     /**
@@ -168,26 +175,27 @@ export default {
      * Empty string stands for default device.
      * @returns {String}
      */
-    getAudioOutputDeviceId: function () {
+    getAudioOutputDeviceId() {
         return JitsiMeetJS.mediaDevices.getAudioOutputDevice();
     },
+
     /**
      * Set device id of the audio output device which is currently in use.
      * Empty string stands for default device.
      * @param {string} newId='default' - new audio output device id
      * @returns {Promise}
      */
-    setAudioOutputDeviceId: function (newId = 'default') {
+    setAudioOutputDeviceId(newId = 'default') {
         return JitsiMeetJS.mediaDevices.setAudioOutputDevice(newId)
             .then(() =>
-                jitsiLocalStorage.setItem("audioOutputDeviceId", newId));
+                jitsiLocalStorage.setItem('audioOutputDeviceId', newId));
     },
 
     /**
      * Check if welcome page is enabled or not.
      * @returns {boolean}
      */
-    isWelcomePageEnabled () {
+    isWelcomePageEnabled() {
         return !welcomePageDisabled;
     },
 
@@ -195,8 +203,8 @@ export default {
      * Enable or disable welcome page.
      * @param {boolean} enabled if welcome page should be enabled or not
      */
-    setWelcomePageEnabled (enabled) {
+    setWelcomePageEnabled(enabled) {
         welcomePageDisabled = !enabled;
-        jitsiLocalStorage.setItem("welcomePageDisabled", welcomePageDisabled);
+        jitsiLocalStorage.setItem('welcomePageDisabled', welcomePageDisabled);
     }
 };

modules/translation/translation.js

@@ -16,11 +16,20 @@ function _onI18nInitialized() {
     $('[data-i18n]').localize();
 }
 
+/**
+ *
+ */
 class Translation {
+    /**
+     *
+     */
     addLanguageChangedListener(listener: Function) {
         i18next.on('languageChanged', listener);
     }
 
+    /**
+     *
+     */
     generateTranslationHTML(key: string, options: Object) {
         const optAttr
             = options ? ` data-i18n-options='${JSON.stringify(options)}'` : '';
@@ -31,23 +40,36 @@ class Translation {
         return `<span data-i18n="${key}"${optAttr}>${text}</span>`;
     }
 
+    /**
+     *
+     */
     getCurrentLanguage() {
         return i18next.lng();
     }
 
+    /**
+     *
+     */
     init() {
         jqueryI18next.init(i18next, $, { useOptionsAttr: true });
 
-        if (i18next.isInitialized)
+        if (i18next.isInitialized) {
             _onI18nInitialized();
-        else
+        } else {
             i18next.on('initialized', _onI18nInitialized);
+        }
     }
 
+    /**
+     *
+     */
     setLanguage(language: string = DEFAULT_LANGUAGE) {
         i18next.setLng(language, {}, _onI18nInitialized);
     }
 
+    /**
+     * 
+     */
     translateElement(selector: Object, options: Object) {
         // XXX i18next expects undefined if options are missing.
         selector.localize(options ? options : undefined);

modules/transport/PostMessageTransportBackend.js

@@ -65,6 +65,7 @@ export default class PostMessageTransportBackend {
      * transport.
      */
     constructor({ enableLegacyFormat, postisOptions } = {}) {
+        // eslint-disable-next-line new-cap
         this.postis = Postis({
             ...DEFAULT_POSTIS_OPTIONS,
             ...postisOptions

modules/util/JitsiLocalStorage.js

@@ -6,6 +6,7 @@ const logger = Logger.getLogger(__filename);
  * Dummy implementation of Storage interface with empty methods.
  */
 class DummyLocalStorage {
+    /* eslint-disable no-empty-function */
     /**
      * Empty function
      */
@@ -20,6 +21,7 @@ class DummyLocalStorage {
      * Empty function
      */
     removeItem() { }
+    /* eslint-enable no-empty-function */
 }
 
 /**

modules/util/JitsiMeetLogStorage.js

@@ -37,15 +37,17 @@ export default class JitsiMeetLogStorage {
             return;
         }
 
-        let logJSON = '{"log' + this.counter + '":"\n';
+        let logJSON = `{"log${this.counter}":"\n`;
+
         for (let i = 0, len = logEntries.length; i < len; i++) {
-            let logEntry = logEntries[i];
+            const logEntry = logEntries[i];
+
             if (typeof logEntry === 'object') {
                 // Aggregated message
-                logJSON += '(' + logEntry.count + ') ' + logEntry.text + '\n';
+                logJSON += `(${logEntry.count}) ${logEntry.text}\n`;
             } else {
                 // Regular message
-                logJSON += logEntry + '\n';
+                logJSON += `${logEntry}\n`;
             }
         }
         logJSON += '"}';
@@ -60,7 +62,7 @@ export default class JitsiMeetLogStorage {
         } catch (error) {
             // NOTE console is intentional here
             console.error(
-                "Failed to store the logs: ", logJSON, error);
+                'Failed to store the logs: ', logJSON, error);
         }
     }
 }

modules/util/helpers.js

@@ -1,4 +1,4 @@
-const logger = require("jitsi-meet-logger").getLogger(__filename);
+const logger = require('jitsi-meet-logger').getLogger(__filename);
 
 /**
  * Create deferred object.
@@ -40,7 +40,7 @@ export function replace(url) {
  * @param e {Error} the error
  * @param msg {string} [optional] the message printed in addition to the error
  */
-export function reportError(e, msg = "") {
+export function reportError(e, msg = '') {
     logger.error(msg, e);
     window.onerror && window.onerror(msg, null, null, null, e);
 }

react/.eslintrc.js

@@ -6,48 +6,12 @@ module.exports = {
         }
     },
     'plugins': [
-
-        // ESLint's rule no-duplicate-imports does not understand Flow's import
-        // type. Fortunately, eslint-plugin-import understands Flow's import
-        // type.
-        'import',
         'jsdoc',
         'react',
         'react-native'
     ],
     'rules': {
         // Possible Errors group
-        'no-cond-assign': 2,
-        'no-console': 0,
-        'no-constant-condition': 2,
-        'no-control-regex': 2,
-        'no-debugger': 2,
-        'no-dupe-args': 2,
-        'no-dupe-keys': 2,
-        'no-duplicate-case': 2,
-        'no-empty': 2,
-        'no-empty-character-class': 2,
-        'no-ex-assign': 2,
-        'no-extra-boolean-cast': 2,
-        'no-extra-parens': [
-            'error',
-            'all',
-            { 'nestedBinaryExpressions': false }
-        ],
-        'no-extra-semi': 2,
-        'no-func-assign': 2,
-        'no-inner-declarations': 2,
-        'no-invalid-regexp': 2,
-        'no-irregular-whitespace': 2,
-        'no-negated-in-lhs': 2,
-        'no-obj-calls': 2,
-        'no-prototype-builtins': 0,
-        'no-regex-spaces': 2,
-        'no-sparse-arrays': 2,
-        'no-unexpected-multiline': 2,
-        'no-unreachable': 2,
-        'no-unsafe-finally': 2,
-        'use-isnan': 2,
 
         // Currently, we are using both valid-jsdoc and 'jsdoc' plugin. In the
         // future we might stick to one as soon as it has all the features.
@@ -74,234 +38,11 @@ module.exports = {
                 'requireReturnType': true
             }
         ],
-        'valid-typeof': 2,
 
         // Best Practices group
-        'accessor-pairs': 0,
-        'array-callback-return': 2,
-        'block-scoped-var': 0,
-        'complexity': 0,
-        'consistent-return': 0,
-        'curly': 2,
-        'default-case': 0,
-        'dot-location': [ 'error', 'property' ],
-        'dot-notation': 2,
-        'eqeqeq': 2,
-        'guard-for-in': 2,
-        'no-alert': 2,
-        'no-caller': 2,
-        'no-case-declarations': 2,
-        'no-div-regex': 0,
-        'no-else-return': 2,
-        'no-empty-function': 2,
-        'no-empty-pattern': 2,
-        'no-eq-null': 2,
-        'no-eval': 2,
-        'no-extend-native': 2,
-        'no-extra-bind': 2,
-        'no-extra-label': 2,
-        'no-fallthrough': 2,
-        'no-floating-decimal': 2,
-        'no-implicit-coercion': 2,
-        'no-implicit-globals': 2,
-        'no-implied-eval': 2,
-        'no-invalid-this': 2,
-        'no-iterator': 2,
-        'no-labels': 2,
-        'no-lone-blocks': 2,
-        'no-loop-func': 2,
-        'no-magic-numbers': 0,
-        'no-multi-spaces': 2,
-        'no-multi-str': 2,
-        'no-native-reassign': 2,
-        'no-new': 2,
-        'no-new-func': 2,
-        'no-new-wrappers': 2,
-        'no-octal': 2,
-        'no-octal-escape': 2,
-        'no-param-reassign': 2,
-        'no-proto': 2,
-        'no-redeclare': 2,
-        'no-return-assign': 2,
-        'no-script-url': 2,
-        'no-self-assign': 2,
-        'no-self-compare': 2,
-        'no-sequences': 2,
-        'no-throw-literal': 2,
-        'no-unmodified-loop-condition': 2,
-        'no-unused-expressions': [
-            'error',
-            {
-                'allowShortCircuit': true,
-                'allowTernary': true
-            }
-        ],
-        'no-unused-labels': 2,
-        'no-useless-call': 2,
-        'no-useless-concat': 2,
-        'no-useless-escape': 2,
-        'no-void': 2,
-        'no-warning-comments': 0,
-        'no-with': 2,
-        'radix': 2,
-        'vars-on-top': 2,
-        'wrap-iife': [ 'error', 'inside' ],
-        'yoda': 2,
-
-        // Strict Mode group
-        'strict': 2,
-
-        // Variables group
-        'init-declarations': 0,
-        'no-catch-shadow': 2,
-        'no-delete-var': 2,
-        'no-label-var': 2,
-        'no-restricted-globals': 0,
-        'no-shadow': 2,
-        'no-shadow-restricted-names': 2,
-        'no-undef': 2,
-        'no-undef-init': 2,
-        'no-undefined': 0,
-        'no-unused-vars': 2,
-        'no-use-before-define': [ 'error', { 'functions': false } ],
-
-        // Stylistic issues group
-        'array-bracket-spacing': [
-            'error',
-            'always',
-            { 'objectsInArrays': true }
-        ],
-        'block-spacing': [ 'error', 'always' ],
-        'brace-style': 2,
-        'camelcase': 2,
-        'comma-dangle': 2,
-        'comma-spacing': 2,
-        'comma-style': 2,
-        'computed-property-spacing': 2,
-        'consistent-this': [ 'error', 'self' ],
-        'eol-last': 2,
-        'func-names': 0,
-        'func-style': 0,
-        'id-blacklist': 0,
-        'id-length': 0,
-        'id-match': 0,
         'jsx-quotes': [ 'error', 'prefer-single' ],
-        'key-spacing': 2,
-        'keyword-spacing': 2,
-        'linebreak-style': [ 'error', 'unix' ],
-        'lines-around-comment': [
-            'error',
-            {
-                'allowBlockStart': true,
-                'allowObjectStart': true,
-                'beforeBlockComment': true,
-                'beforeLineComment': true
-            }
-        ],
-        'max-depth': 2,
-        'max-len': [ 'error', 80 ],
-        'max-lines': 0,
-        'max-nested-callbacks': 2,
-        'max-params': 2,
-        'max-statements': 0,
-        'max-statements-per-line': 2,
-        'multiline-ternary': 0,
-        'new-cap': 2,
-        'new-parens': 2,
-        'newline-after-var': 2,
-        'newline-before-return': 2,
-        'newline-per-chained-call': 2,
-        'no-array-constructor': 2,
-        'no-bitwise': 2,
-        'no-continue': 2,
-        'no-inline-comments': 0,
-        'no-lonely-if': 2,
-        'no-mixed-operators': 2,
-        'no-mixed-spaces-and-tabs': 2,
-        'no-multiple-empty-lines': 2,
-        'no-negated-condition': 2,
-        'no-nested-ternary': 0,
-        'no-new-object': 2,
-        'no-plusplus': 0,
-        'no-restricted-syntax': 0,
-        'no-spaced-func': 2,
-        'no-tabs': 2,
-        'no-ternary': 0,
-        'no-trailing-spaces': 2,
-        'no-underscore-dangle': 0,
-        'no-unneeded-ternary': 2,
-        'no-whitespace-before-property': 2,
-        'object-curly-newline': 0,
-        'object-curly-spacing': [ 'error', 'always' ],
-        'object-property-newline': 2,
-        'one-var': 0,
-        'one-var-declaration-per-line': 0,
-        'operator-assignment': 0,
-        'operator-linebreak': [ 'error', 'before' ],
-        'padded-blocks': 0,
-        'quote-props': 0,
-        'quotes': [ 'error', 'single' ],
-        'require-jsdoc': [
-            'error',
-            {
-                'require': {
-                    'ClassDeclaration': true,
-                    'FunctionDeclaration': true,
-                    'MethodDefinition': true
-                }
-            }
-        ],
-        'semi': [ 'error', 'always' ],
-        'semi-spacing': 2,
-        'sort-vars': 2,
-        'space-before-blocks': 2,
-        'space-before-function-paren': [ 'error', 'never' ],
-        'space-in-parens': [ 'error', 'never' ],
-        'space-infix-ops': 2,
-        'space-unary-ops': 2,
-        'spaced-comment': 2,
-        'unicode-bom': 0,
-        'wrap-regex': 0,
 
         // ES6 group rules
-        'arrow-body-style': [
-            'error',
-            'as-needed',
-            { requireReturnForObjectLiteral: true }
-        ],
-        'arrow-parens': [ 'error', 'as-needed' ],
-        'arrow-spacing': 2,
-        'constructor-super': 2,
-        'generator-star-spacing': 2,
-        'no-class-assign': 2,
-        'no-confusing-arrow': 2,
-        'no-const-assign': 2,
-        'no-dupe-class-members': 2,
-        'no-new-symbol': 2,
-        'no-restricted-imports': 0,
-        'no-this-before-super': 2,
-        'no-useless-computed-key': 2,
-        'no-useless-constructor': 2,
-        'no-useless-rename': 2,
-        'no-var': 2,
-        'object-shorthand': [
-            'error',
-            'always',
-            { 'avoidQuotes': true }
-        ],
-        'prefer-arrow-callback': [ 'error', { 'allowNamedFunctions': true } ],
-        'prefer-const': 2,
-        'prefer-reflect': 0,
-        'prefer-rest-params': 2,
-        'prefer-spread': 2,
-        'prefer-template': 2,
-        'require-yield': 2,
-        'rest-spread-spacing': 2,
-        'sort-imports': 0,
-        'template-curly-spacing': 2,
-        'yield-star-spacing': 2,
-
-        'import/no-duplicates': 2,
 
         // JsDoc plugin rules group. The following rules are in addition to
         // valid-jsdoc rule.

service/UI/UIEvents.js

@@ -1,50 +1,58 @@
 export default {
-    NICKNAME_CHANGED: "UI.nickname_changed",
-    SELECTED_ENDPOINT: "UI.selected_endpoint",
-    PINNED_ENDPOINT: "UI.pinned_endpoint",
+    NICKNAME_CHANGED: 'UI.nickname_changed',
+    SELECTED_ENDPOINT: 'UI.selected_endpoint',
+    PINNED_ENDPOINT: 'UI.pinned_endpoint',
+
     /**
      * Notifies that local user created text message.
      */
-    MESSAGE_CREATED: "UI.message_created",
+    MESSAGE_CREATED: 'UI.message_created',
+
     /**
      * Notifies that local user changed language.
      */
-    LANG_CHANGED: "UI.lang_changed",
+    LANG_CHANGED: 'UI.lang_changed',
+
     /**
      * Notifies that local user changed email.
      */
-    EMAIL_CHANGED: "UI.email_changed",
+    EMAIL_CHANGED: 'UI.email_changed',
+
     /**
      * Notifies that "start muted" settings changed.
      */
-    START_MUTED_CHANGED: "UI.start_muted_changed",
-    AUDIO_MUTED: "UI.audio_muted",
-    VIDEO_MUTED: "UI.video_muted",
-    VIDEO_UNMUTING_WHILE_AUDIO_ONLY: "UI.video_unmuting_while_audio_only",
-    ETHERPAD_CLICKED: "UI.etherpad_clicked",
-    SHARED_VIDEO_CLICKED: "UI.start_shared_video",
+    START_MUTED_CHANGED: 'UI.start_muted_changed',
+    AUDIO_MUTED: 'UI.audio_muted',
+    VIDEO_MUTED: 'UI.video_muted',
+    VIDEO_UNMUTING_WHILE_AUDIO_ONLY: 'UI.video_unmuting_while_audio_only',
+    ETHERPAD_CLICKED: 'UI.etherpad_clicked',
+    SHARED_VIDEO_CLICKED: 'UI.start_shared_video',
+
     /**
      * Updates shared video with params: url, state, time(optional)
      * Where url is the video link, state is stop/start/pause and time is the
      * current video playing time.
      */
-    UPDATE_SHARED_VIDEO: "UI.update_shared_video",
-    USER_KICKED: "UI.user_kicked",
-    REMOTE_AUDIO_MUTED: "UI.remote_audio_muted",
-    TOGGLE_FULLSCREEN: "UI.toogle_fullscreen",
-    FULLSCREEN_TOGGLED: "UI.fullscreen_toggled",
-    AUTH_CLICKED: "UI.auth_clicked",
+    UPDATE_SHARED_VIDEO: 'UI.update_shared_video',
+    USER_KICKED: 'UI.user_kicked',
+    REMOTE_AUDIO_MUTED: 'UI.remote_audio_muted',
+    TOGGLE_FULLSCREEN: 'UI.toogle_fullscreen',
+    FULLSCREEN_TOGGLED: 'UI.fullscreen_toggled',
+    AUTH_CLICKED: 'UI.auth_clicked',
+
     /**
      * Notifies that the audio only mode was toggled.
      */
-    TOGGLE_AUDIO_ONLY: "UI.toggle_audioonly",
-    TOGGLE_CHAT: "UI.toggle_chat",
-    TOGGLE_SETTINGS: "UI.toggle_settings",
-    TOGGLE_CONTACT_LIST: "UI.toggle_contact_list",
+    TOGGLE_AUDIO_ONLY: 'UI.toggle_audioonly',
+    TOGGLE_CHAT: 'UI.toggle_chat',
+    TOGGLE_SETTINGS: 'UI.toggle_settings',
+    TOGGLE_CONTACT_LIST: 'UI.toggle_contact_list',
+
     /**
      * Notifies that the profile toolbar button has been clicked.
      */
-    TOGGLE_PROFILE: "UI.toggle_profile",
+    TOGGLE_PROFILE: 'UI.toggle_profile',
+
     /**
      * Notifies that a command to toggle the filmstrip has been issued. The
      * event may optionally specify a {Boolean} (primitive) value to assign to
@@ -56,7 +64,8 @@ export default {
      *
      * @see {TOGGLED_FILMSTRIP}
      */
-    TOGGLE_FILMSTRIP: "UI.toggle_filmstrip",
+    TOGGLE_FILMSTRIP: 'UI.toggle_filmstrip',
+
     /**
      * Notifies that the filmstrip was (actually) toggled. The event supplies a
      * {Boolean} (primitive) value indicating the visibility of the filmstrip
@@ -64,59 +73,59 @@ export default {
      *
      * @see {TOGGLE_FILMSTRIP}
      */
-    TOGGLED_FILMSTRIP: "UI.toggled_filmstrip",
+    TOGGLED_FILMSTRIP: 'UI.toggled_filmstrip',
 
-    TOGGLE_SCREENSHARING: "UI.toggle_screensharing",
-    TOGGLED_SHARED_DOCUMENT: "UI.toggled_shared_document",
-    CONTACT_CLICKED: "UI.contact_clicked",
-    HANGUP: "UI.hangup",
-    LOGOUT: "UI.logout",
-    RECORDING_TOGGLED: "UI.recording_toggled",
-    SUBJECT_CHANGED: "UI.subject_changed",
-    VIDEO_DEVICE_CHANGED: "UI.video_device_changed",
-    AUDIO_DEVICE_CHANGED: "UI.audio_device_changed",
-    AUDIO_OUTPUT_DEVICE_CHANGED: "UI.audio_output_device_changed",
+    TOGGLE_SCREENSHARING: 'UI.toggle_screensharing',
+    TOGGLED_SHARED_DOCUMENT: 'UI.toggled_shared_document',
+    CONTACT_CLICKED: 'UI.contact_clicked',
+    HANGUP: 'UI.hangup',
+    LOGOUT: 'UI.logout',
+    RECORDING_TOGGLED: 'UI.recording_toggled',
+    SUBJECT_CHANGED: 'UI.subject_changed',
+    VIDEO_DEVICE_CHANGED: 'UI.video_device_changed',
+    AUDIO_DEVICE_CHANGED: 'UI.audio_device_changed',
+    AUDIO_OUTPUT_DEVICE_CHANGED: 'UI.audio_output_device_changed',
 
     /**
      * Notifies interested listeners that the follow-me feature is enabled or
      * disabled.
      */
-    FOLLOW_ME_ENABLED: "UI.follow_me_enabled",
+    FOLLOW_ME_ENABLED: 'UI.follow_me_enabled',
 
     /**
      * Notifies that flipX property of the local video is changed.
      */
-    LOCAL_FLIPX_CHANGED: "UI.local_flipx_changed",
+    LOCAL_FLIPX_CHANGED: 'UI.local_flipx_changed',
 
     // An event which indicates that the resolution of a remote video has
     // changed.
-    RESOLUTION_CHANGED: "UI.resolution_changed",
+    RESOLUTION_CHANGED: 'UI.resolution_changed',
 
     /**
      * Notifies that the button "Cancel" is pressed on the dialog for
      * external extension installation.
      */
-    EXTERNAL_INSTALLATION_CANCELED: "UI.external_installation_canceled",
+    EXTERNAL_INSTALLATION_CANCELED: 'UI.external_installation_canceled',
 
     /**
      * Notifies that the side toolbar container has been toggled. The actual
      * event must contain the identifier of the container that has been toggled
      * and information about toggle on or off.
      */
-    SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled",
+    SIDE_TOOLBAR_CONTAINER_TOGGLED: 'UI.side_container_toggled',
 
     /**
      * Notifies that the raise hand has been changed.
      */
-    LOCAL_RAISE_HAND_CHANGED: "UI.local_raise_hand_changed",
+    LOCAL_RAISE_HAND_CHANGED: 'UI.local_raise_hand_changed',
 
     /**
      * Notifies that the avatar is displayed or not on the largeVideo.
      */
-    LARGE_VIDEO_AVATAR_VISIBLE: "UI.large_video_avatar_visible",
+    LARGE_VIDEO_AVATAR_VISIBLE: 'UI.large_video_avatar_visible',
 
     /**
      * Notifies that the displayed particpant id on the largeVideo is changed.
      */
-    LARGE_VIDEO_ID_CHANGED: "UI.large_video_id_changed"
+    LARGE_VIDEO_ID_CHANGED: 'UI.large_video_id_changed'
 };

service/remotecontrol/Constants.js

@@ -2,7 +2,7 @@
  * The value for the "var" attribute of feature tag in disco-info packets.
  */
 export const DISCO_REMOTE_CONTROL_FEATURE
-    = "http://jitsi.org/meet/remotecontrol";
+    = 'http://jitsi.org/meet/remotecontrol';
 
 /**
  * Types of remote-control events.
@@ -10,17 +10,17 @@ export const DISCO_REMOTE_CONTROL_FEATURE
   * @enum {string}
  */
 export const EVENTS = {
-    mousemove: "mousemove",
-    mousedown: "mousedown",
-    mouseup: "mouseup",
-    mousedblclick: "mousedblclick",
-    mousescroll: "mousescroll",
-    keydown: "keydown",
-    keyup: "keyup",
-    permissions: "permissions",
-    start: "start",
-    stop: "stop",
-    supported: "supported"
+    mousemove: 'mousemove',
+    mousedown: 'mousedown',
+    mouseup: 'mouseup',
+    mousedblclick: 'mousedblclick',
+    mousescroll: 'mousescroll',
+    keydown: 'keydown',
+    keyup: 'keyup',
+    permissions: 'permissions',
+    start: 'start',
+    stop: 'stop',
+    supported: 'supported'
 };
 
 /**
@@ -29,7 +29,7 @@ export const EVENTS = {
   * @enum {string}
  */
 export const REQUESTS = {
-    start: "start"
+    start: 'start'
 };
 
 /**
@@ -38,16 +38,16 @@ export const REQUESTS = {
  * @enum {string}
  */
 export const PERMISSIONS_ACTIONS = {
-    request: "request",
-    grant: "grant",
-    deny: "deny",
-    error: "error"
+    request: 'request',
+    grant: 'grant',
+    deny: 'deny',
+    error: 'error'
 };
 
 /**
  * The type of remote control messages.
  */
-export const REMOTE_CONTROL_MESSAGE_NAME = "remote-control";
+export const REMOTE_CONTROL_MESSAGE_NAME = 'remote-control';
 
 /**
  * The remote control event.

static/close.js

@@ -1,11 +1,13 @@
 /* global interfaceConfig */
-//list of tips
-var hints = [
-    "You can pin participants by clicking on their thumbnails.",// jshint ignore:line
-    "You can tell others you have something to say by using the \"Raise Hand\" feature",// jshint ignore:line
-    "You can learn about key shortcuts by pressing Shift+?",// jshint ignore:line
-    "You can learn more about the state of everyone's connection by hovering on the bars in their thumbnail",// jshint ignore:line
-    "You can hide all thumbnails by using the button in the bottom right corner"// jshint ignore:line
+// list of tips
+const hints = [
+    'You can pin participants by clicking on their thumbnails.',
+    'You can tell others you have something to say by using the "Raise Hand" '
+        + 'feature',
+    'You can learn about key shortcuts by pressing Shift+?',
+    'You can learn more about the state of everyone\'s connection by hovering '
+        + 'on the bars in their thumbnail',
+    'You can hide all thumbnails by using the button in the bottom right corner'
 ];
 
 /**
@@ -13,9 +15,9 @@ var hints = [
  *
  * @return {string} the hint message.
  */
-function getHint(){
-    var l = hints.length - 1;
-    var n = Math.round(Math.random() * l);
+function getHint() {
+    const l = hints.length - 1;
+    const n = Math.round(Math.random() * l);
 
     return hints[n];
 }
@@ -27,28 +29,30 @@ function getHint(){
  * @param id {string} element identificator
  * @param msg {string} text message
  */
-// eslint-disable-next-line no-unused-vars
-function insertTextMsg(id, msg){
-    var el = document.getElementById(id);
+function insertTextMsg(id, msg) {
+    const el = document.getElementById(id);
 
-    if (el)
+    if (el) {
         el.innerHTML = msg;
+    }
 }
 
 /**
  * Sets the hint and thanks messages. Will be executed on load event.
  */
 function onLoad() {
-    //Works only for close2.html because close.html doesn't have this element.
+    // Works only for close2.html because close.html doesn't have this element.
     insertTextMsg('thanksMessage',
-        'Thank you for using ' + interfaceConfig.APP_NAME);
+        `Thank you for using ${interfaceConfig.APP_NAME}`);
 
     // If there is a setting show a special message only for the guests
     if (interfaceConfig.CLOSE_PAGE_GUEST_HINT) {
-        if ( window.sessionStorage.getItem('guest') === 'true' ) {
-            var element = document.getElementById('hintQuestion');
+        if (window.sessionStorage.getItem('guest') === 'true') {
+            const element = document.getElementById('hintQuestion');
+
             element.classList.add('hide');
             insertTextMsg('hintMessage', interfaceConfig.CLOSE_PAGE_GUEST_HINT);
+
             return;
         }
     }

webpack.config.js

@@ -3,7 +3,7 @@
 const process = require('process');
 const webpack = require('webpack');
 
-const aui_css = `${__dirname}/node_modules/@atlassian/aui/dist/aui/css/`;
+const auiCSS = `${__dirname}/node_modules/@atlassian/aui/dist/aui/css/`;
 
 /**
  * The URL of the Jitsi Meet deployment to be proxy to in the context of
@@ -15,6 +15,8 @@ const devServerProxyTarget
 const minimize
     = process.argv.indexOf('-p') !== -1
         || process.argv.indexOf('--optimize-minimize') !== -1;
+
+// eslint-disable-next-line camelcase
 const node_modules = `${__dirname}/node_modules/`;
 const plugins = [
     new webpack.LoaderOptionsPlugin({
@@ -62,8 +64,7 @@ const config = {
         rules: [ {
             // Transpile ES2015 (aka ES6) to ES5. Accept the JSX syntax by React
             // as well.
-
-            exclude: node_modules,
+            exclude: node_modules, // eslint-disable-line camelcase
             loader: 'babel-loader',
             options: {
                 // XXX The require.resolve bellow solves failures to locate the
@@ -113,10 +114,10 @@ const config = {
             // Emit the static assets of AUI such as images that are referenced
             // by CSS into the output path.
 
-            include: aui_css,
+            include: auiCSS,
             loader: 'file-loader',
             options: {
-                context: aui_css,
+                context: auiCSS,
                 name: '[path][name].[ext]'
             },
             test: /\.(gif|png|svg)$/
@@ -210,9 +211,10 @@ function devServerProxyBypass({ path }) {
     const configs = module.exports;
 
     /* eslint-disable indent */
+    let formattedPath = path;
 
     if ((Array.isArray(configs) ? configs : Array(configs)).some(c => {
-                if (path.startsWith(c.output.publicPath)) {
+                if (formattedPath.startsWith(c.output.publicPath)) {
                     if (!minimize) {
                         // Since webpack-dev-server is serving non-minimized
                         // artifacts, serve them even if the minimized ones are
@@ -220,18 +222,23 @@ function devServerProxyBypass({ path }) {
                         Object.keys(c.entry).some(e => {
                             const name = `${e}.min.js`;
 
-                            if (path.indexOf(name) !== -1) {
-                                path = path.replace(name, `${e}.js`);
+                            if (formattedPath.indexOf(name) !== -1) {
+                                formattedPath
+                                    = formattedPath.replace(name, `${e}.js`);
 
                                 return true;
                             }
+
+                            return false;
                         });
                     }
 
                     return true;
                 }
+
+                return false;
             })) {
-        return path;
+        return formattedPath;
     }
 
     /* eslint-enable indent */