Remove obsolete source code

Split language detectors to be web/native dependent. Take care of strings that contain html.

.jshintignore

@@ -5,8 +5,14 @@ debian/
 libs/
 node_modules/
 
-# The following are checked by ESLint which supersedes JSHint.
+# The following are checked by ESLint with the maximum configuration which
+# supersedes JSHint.
 flow-typed/
 react/
 
+# The following are checked by ESLint with the minimum configuration which does
+# not supersede JSHint but take advantage of advanced language features such as
+# Facebook Flow which are not supported by JSHint.
+modules/translation/translation.js
+
 analytics.js

android/app/build.gradle

@@ -91,7 +91,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 22
         versionCode Integer.parseInt("${version}")
-        versionName "1.2.${version}"
+        versionName "1.3.${version}"
         ndk {
             abiFilters 'armeabi-v7a', 'x86'
         }
@@ -139,6 +139,7 @@ if (project.hasProperty('JITSI_SIGNING')
 }
 
 dependencies {
+    compile project(':react-native-background-timer')
     compile project(':react-native-immersive')
     compile project(':react-native-keep-awake')
     compile project(':react-native-vector-icons')

android/app/src/main/java/org/jitsi/meet/MainApplication.java

@@ -29,6 +29,7 @@ public class MainApplication extends Application implements ReactApplication {
                 new com.corbt.keepawake.KCKeepAwakePackage(),
                 new com.facebook.react.shell.MainReactPackage(),
                 new com.oblador.vectoricons.VectorIconsPackage(),
+                new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.oney.WebRTCModule.WebRTCModulePackage(),
                 new com.rnimmersive.RNImmersivePackage(),
                 new org.jitsi.meet.audiomode.AudioModePackage()

android/build.gradle

@@ -5,7 +5,7 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:1.3.1'
+        classpath 'com.android.tools.build:gradle:2.2.3'
 
         // NOTE: Do not place your application dependencies here; they belong
         // in the individual module build.gradle files

android/gradle/wrapper/gradle-wrapper.properties

@@ -2,4 +2,4 @@ distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.1-all.zip

android/settings.gradle

@@ -1,6 +1,8 @@
 rootProject.name = 'jitsi-meet-react'
 
 include ':app'
+include ':react-native-background-timer'
+project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
 include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'

conference.js

@@ -20,6 +20,15 @@ import analytics from './modules/analytics/analytics';
 
 import EventEmitter from "events";
 
+import { conferenceFailed } from './react/features/base/conference';
+import {
+    isFatalJitsiConnectionError
+} from './react/features/base/lib-jitsi-meet';
+import {
+    mediaPermissionPromptVisibilityChanged,
+    suspendDetected
+} from './react/features/overlay';
+
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
 
@@ -91,7 +100,10 @@ function createInitialLocalTracksAndConnect(roomName) {
 
     JitsiMeetJS.mediaDevices.addEventListener(
         JitsiMeetJS.events.mediaDevices.PERMISSION_PROMPT_IS_SHOWN,
-        browser => APP.UI.showUserMediaPermissionsGuidanceOverlay(browser));
+        browser =>
+            APP.store.dispatch(
+                mediaPermissionPromptVisibilityChanged(true, browser))
+    );
 
     // First try to retrieve both audio and video.
     let tryCreateLocalTracks = createLocalTracks(
@@ -109,8 +121,7 @@ function createInitialLocalTracksAndConnect(roomName) {
 
     return Promise.all([ tryCreateLocalTracks, connect(roomName) ])
         .then(([tracks, con]) => {
-            APP.UI.hideUserMediaPermissionsGuidanceOverlay();
-
+            APP.store.dispatch(mediaPermissionPromptVisibilityChanged(false));
             if (audioAndVideoError) {
                 if (audioOnlyError) {
                     // If both requests for 'audio' + 'video' and 'audio' only
@@ -334,6 +345,7 @@ class ConferenceConnector {
         this._reject(err);
     }
     _onConferenceFailed(err, ...params) {
+        APP.store.dispatch(conferenceFailed(room, err, ...params));
         logger.error('CONFERENCE FAILED:', err, ...params);
         APP.UI.hideRingOverLay();
         switch (err) {
@@ -408,8 +420,6 @@ class ConferenceConnector {
             // the app. Both the errors above are unrecoverable from the library
             // perspective.
             room.leave().then(() => connection.disconnect());
-            APP.UI.showPageReloadOverlay(
-                false /* not a network type of failure */, err);
             break;
 
         case ConferenceErrors.CONFERENCE_MAX_USERS:
@@ -466,6 +476,23 @@ function disconnect() {
     return Promise.resolve();
 }
 
+/**
+ * Handles CONNECTION_FAILED events from lib-jitsi-meet.
+ *
+ * @param {JitsiMeetJS.connection.error} error - The reported error.
+ * @returns {void}
+ * @private
+ */
+function _connectionFailedHandler(error) {
+    if (isFatalJitsiConnectionError(error)) {
+        APP.connection.removeEventListener(
+            ConnectionEvents.CONNECTION_FAILED,
+            _connectionFailedHandler);
+        if (room)
+            room.leave();
+    }
+}
+
 export default {
     isModerator: false,
     audioMuted: false,
@@ -518,11 +545,13 @@ export default {
                 return createInitialLocalTracksAndConnect(options.roomName);
             }).then(([tracks, con]) => {
                 logger.log('initialized with %s local tracks', tracks.length);
+                con.addEventListener(
+                    ConnectionEvents.CONNECTION_FAILED,
+                    _connectionFailedHandler);
                 APP.connection = connection = con;
                 this.isDesktopSharingEnabled =
                     JitsiMeetJS.isDesktopSharingEnabled();
                 APP.remoteControl.init();
-                this._bindConnectionFailedHandler(con);
                 this._createRoom(tracks);
 
                 if (UIUtil.isButtonEnabled('contacts')
@@ -561,47 +590,6 @@ export default {
     isLocalId (id) {
         return this.getMyUserId() === id;
     },
-    /**
-     * Binds a handler that will handle the case when the connection is dropped
-     * in the middle of the conference.
-     * @param {JitsiConnection} connection the connection to which the handler
-     * will be bound to.
-     * @private
-     */
-    _bindConnectionFailedHandler (connection) {
-        const handler = function (error, errMsg) {
-            /* eslint-disable no-case-declarations */
-            switch (error) {
-                case ConnectionErrors.CONNECTION_DROPPED_ERROR:
-                case ConnectionErrors.OTHER_ERROR:
-                case ConnectionErrors.SERVER_ERROR:
-
-                    logger.error("XMPP connection error: " + errMsg);
-
-                    // From all of the cases above only CONNECTION_DROPPED_ERROR
-                    // is considered a network type of failure
-                    const isNetworkFailure
-                        = error === ConnectionErrors.CONNECTION_DROPPED_ERROR;
-
-                    APP.UI.showPageReloadOverlay(
-                        isNetworkFailure,
-                        "xmpp-conn-dropped:" + errMsg);
-
-                    connection.removeEventListener(
-                        ConnectionEvents.CONNECTION_FAILED, handler);
-
-                    // FIXME it feels like the conference should be stopped
-                    // by lib-jitsi-meet
-                    if (room)
-                        room.leave();
-
-                    break;
-            }
-            /* eslint-enable no-case-declarations */
-        };
-        connection.addEventListener(
-            ConnectionEvents.CONNECTION_FAILED, handler);
-    },
     /**
      * Simulates toolbar button click for audio mute. Used by shortcuts and API.
      * @param mute true for mute and false for unmute.
@@ -676,7 +664,7 @@ export default {
      * false.
      */
     isCallstatsEnabled () {
-        return room.isCallstatsEnabled();
+        return room && room.isCallstatsEnabled();
     },
     /**
      * Sends the given feedback through CallStats if enabled.
@@ -1229,7 +1217,8 @@ export default {
 
         room.on(ConferenceEvents.TALK_WHILE_MUTED, () => {
             APP.UI.showToolbar(6000);
-            UIUtil.animateShowElement($("#talkWhileMutedPopup"), true, 5000);
+
+            APP.UI.showCustomToolbarPopup('#talkWhileMutedPopup', true, 5000);
         });
 
 /*
@@ -1364,6 +1353,7 @@ export default {
         });
 
         room.on(ConferenceEvents.SUSPEND_DETECTED, () => {
+            APP.store.dispatch(suspendDetected());
             // After wake up, we will be in a state where conference is left
             // there will be dialog shown to user.
             // We do not want video/audio as we show an overlay and after it
@@ -1384,9 +1374,6 @@ export default {
             if (localAudio) {
                 localAudio.dispose();
             }
-
-            // show overlay
-            APP.UI.showSuspendedOverlay();
         });
 
         room.on(ConferenceEvents.DTMF_SUPPORT_CHANGED, (isDTMFSupported) => {

config.js

@@ -40,7 +40,7 @@ var config = { // eslint-disable-line no-unused-vars
     // up to and including 41. On Firefox 42 and higher, we will run without the
     // extension.
     // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: -1,
+    desktopSharingFirefoxMaxVersionExtRequired: 51,
     // The URL to the Firefox extension for desktop sharing.
     desktopSharingFirefoxExtensionURL: null,
 
@@ -53,8 +53,6 @@ var config = { // eslint-disable-line no-unused-vars
     disableStats: false,
     disableAudioLevels: false,
     channelLastN: -1, // The default value of the channel attribute last-n.
-    adaptiveLastN: false,
-    //disableAdaptiveSimulcast: false,
     enableRecording: false,
     enableWelcomePage: true,
     //enableClosePage: false, // enabling the close page will ignore the welcome
@@ -79,6 +77,8 @@ var config = { // eslint-disable-line no-unused-vars
     enableUserRolesBasedOnToken: false,
     // Suspending video might cause problems with audio playback. Disabling until these are fixed.
     disableSuspendVideo: true,
-    // disables or enables RTX (RFC 4588).
-    disableRtx: true
+    // disables or enables RTX (RFC 4588) (defaults to false).
+    disableRtx: false,
+    // Sets the preferred resolution (height) for local video. Defaults to 360.
+    resolution: 720
 };

connection.js

@@ -4,6 +4,14 @@ const logger = require("jitsi-meet-logger").getLogger(__filename);
 import AuthHandler from './modules/UI/authentication/AuthHandler';
 import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
 
+import {
+    connectionEstablished,
+    connectionFailed
+} from './react/features/base/connection';
+import {
+    isFatalJitsiConnectionError
+} from './react/features/base/lib-jitsi-meet';
+
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
 
@@ -67,6 +75,18 @@ function connect(id, password, roomName) {
         connection.addEventListener(
             ConnectionEvents.CONNECTION_FAILED, handleConnectionFailed
         );
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED, connectionFailedHandler);
+
+        function connectionFailedHandler(error, errMsg) {
+            APP.store.dispatch(connectionFailed(connection, error, errMsg));
+
+            if (isFatalJitsiConnectionError(error)) {
+                connection.removeEventListener(
+                    ConnectionEvents.CONNECTION_FAILED,
+                    connectionFailedHandler);
+            }
+        }
 
         function unsubscribe() {
             connection.removeEventListener(
@@ -80,6 +100,7 @@ function connect(id, password, roomName) {
         }
 
         function handleConnectionEstablished() {
+            APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }

css/_base.scss

@@ -3,21 +3,25 @@
     user-select: none;
 }
 
-html, body{
-    margin:0px;
-    height:100%;
-    color: $defaultColor;
+body {
+    margin: 0px;
+    width: 100%;
+    height: 100%;
     font-size: 12px;
     font-weight: 400;
-    background: #000000;
     overflow: hidden;
+    color: $defaultColor;
+    background: $defaultBackground;
+    &.filmstrip-only {
+        background: transparent;
+    }
 }
 
 p {
     margin: 0;
 }
 
-html, body, input, textarea, keygen, select, button {
+body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
 
@@ -122,6 +126,7 @@ form {
     z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
+        max-width: 350px;
     }
 
     &-arrow {

css/_login_menu.scss

@@ -1,34 +1,10 @@
 /*Initialize*/
-ul.loginmenu {
-    font-family: $baseFontFamily;
-    line-height: normal;
-    display:none;
+div.loginmenu {
     position: absolute;
     margin: 0;
     padding: 5px;
-    padding-bottom: 7px;
-    top: 45px;
-    left: -5px;
-    background-color: rgba(0,0,0,0.9);
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius:8px;
-}
-
-ul.loginmenu li {
-    list-style-type: none;
-    padding: 7px;
-    color: #fff;
-    font-size: 11pt;
-    cursor: default;
-    white-space: pre;
-}
-
-ul.loginmenu:after {
-    content: url('../images/dropdownPointer.png');
-    display: block;
-    position: absolute;
-    top: -7px;
-    left: 18px;
+    top: 40px;
+    left: 20px;
 }
 
 a.disabled {
@@ -36,23 +12,7 @@ a.disabled {
     pointer-events: none;
 }
 
-.loginmenuPadding {
-    width: 50px;
-    height: 30px;
-    position: absolute;
-    top: -30px;
-    left: 0px;
-}
-
 .loginmenu.extendedToolbarPopup {
-    left: 55px;
-    top: 0px;
-}
-
-ul.loginmenu.extendedToolbarPopup:after {
-    content: url('../images/leftDropdownPointer.png');
-    display: block;
-    position: absolute;
-    top: 18px;
-    left: -7px;
+    top: 20px;
+    left: 40px;
 }

css/_mixins.scss

@@ -2,52 +2,52 @@
  * Animation mixin.
  */
 @mixin animation($animate...) {
-  $max: length($animate);
-  $animations: '';
+    $max: length($animate);
+    $animations: '';
 
-  @for $i from 1 through $max {
-    $animations: #{$animations + nth($animate, $i)};
+    @for $i from 1 through $max {
+        $animations: #{$animations + nth($animate, $i)};
 
-    @if $i < $max {
-      $animations: #{$animations + ", "};
+        @if $i < $max {
+            $animations: #{$animations + ", "};
+        }
     }
-  }
-  -webkit-animation: $animations;
-  -moz-animation:    $animations;
-  -o-animation:      $animations;
-  animation:         $animations;
+    -webkit-animation: $animations;
+    -moz-animation:    $animations;
+    -o-animation:      $animations;
+    animation:         $animations;
 }
 
 @mixin flex() {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
 }
 
 /**
  * Keyframes mixin.
  */
 @mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content;
-  }
-  @-moz-keyframes #{$animationName} {
-    @content;
-  }
-  @-o-keyframes #{$animationName} {
-    @content;
-  }
-  @keyframes #{$animationName} {
-    @content;
-  }
+    @-webkit-keyframes #{$animationName} {
+        @content;
+    }
+    @-moz-keyframes #{$animationName} {
+        @content;
+    }
+    @-o-keyframes #{$animationName} {
+        @content;
+    }
+    @keyframes #{$animationName} {
+        @content;
+    }
 }
 
 @mixin circle($diameter) {
-  width: $diameter;
-  height: $diameter;
-  border-radius: 50%;
+    width: $diameter;
+    height: $diameter;
+    border-radius: 50%;
 }
 
 /**
@@ -60,10 +60,10 @@
 }
 
 @mixin absoluteAligning() {
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  @include transform(translate(-50%, -50%));
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    @include transform(translate(-50%, -50%));
 }
 
 /**
@@ -75,81 +75,115 @@
 }
 
 @mixin transform($func) {
-  -moz-transform: $func;
-  -ms-transform: $func;
-  -webkit-transform: $func;
-  -o-transform: $func;
-  transform: $func;
+    -moz-transform: $func;
+    -ms-transform: $func;
+    -webkit-transform: $func;
+    -o-transform: $func;
+    transform: $func;
 }
 
 @mixin transition($transition...) {
-  -moz-transition:    $transition;
-  -o-transition:      $transition;
-  -webkit-transition: $transition;
-  transition:         $transition;
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
 }
 
 /**
-* Mixin styling placeholder
-**/
+ * Mixin styling a placeholder.
+ **/
 @mixin placeholder() {
-  $selectors: (
-          "::-webkit-input-placeholder",
-          "::-moz-placeholder",
-          ":-moz-placeholder",
-          ":-ms-input-placeholder"
-  );
+    $selectors: (
+        "::-webkit-input-placeholder",
+        "::-moz-placeholder",
+        ":-moz-placeholder",
+        ":-ms-input-placeholder"
+    );
 
-  @each $selector in $selectors {
-    #{$selector} {
-      @content;
+    @each $selector in $selectors {
+        #{$selector} {
+            @content;
+        }
     }
+}
+
+/**
+ * Mixin styling a slider track for different browsers.
+ **/
+@mixin slider() {
+    $selectors: (
+        "input[type=range]::-webkit-slider-runnable-track",
+        "input[type=range]::-moz-range-track",
+        "input[type=range]::-ms-track"
+    );
+
+    @each $selector in $selectors {
+        #{$selector} {
+            @content;
+        }
   }
 }
 
+/**
+ * Mixin styling a slider thumb for different browsers.
+ **/
+@mixin slider-thumb() {
+    $selectors: (
+        "input[type=range]::-webkit-slider-thumb",
+        "input[type=range]::-moz-range-thumb",
+        "input[type=range]::-ms-thumb"
+    );
+
+    @each $selector in $selectors {
+        #{$selector} {
+            @content;
+        }
+    }
+}
+
 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
-  @if $inset {
-    -webkit-box-shadow: inset $h $y $blur $color;
-    -moz-box-shadow: inset $h $y $blur $color;
-    box-shadow: inset $h $y $blur $color;
-  } @else {
-    -webkit-box-shadow: $h $y $blur $color;
-    -moz-box-shadow: $h $y $blur $color;
-    box-shadow: $h $y $blur $color;
-  }
+    @if $inset {
+        -webkit-box-shadow: inset $h $y $blur $color;
+        -moz-box-shadow: inset $h $y $blur $color;
+        box-shadow: inset $h $y $blur $color;
+    } @else {
+        -webkit-box-shadow: $h $y $blur $color;
+        -moz-box-shadow: $h $y $blur $color;
+        box-shadow: $h $y $blur $color;
+    }
 }
 
 @mixin no-box-shadow {
-  -webkit-box-shadow: none;
-  -moz-box-shadow: none;
-  box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
 }
 
 @mixin box-sizing($box-model) {
-  -webkit-box-sizing: $box-model; // Safari <= 5
-     -moz-box-sizing: $box-model; // Firefox <= 19
-          box-sizing: $box-model;
+    -webkit-box-sizing: $box-model; // Safari <= 5
+    -moz-box-sizing: $box-model; // Firefox <= 19
+    box-sizing: $box-model;
 }
 
 @mixin border-radius($radius) {
-  -webkit-border-radius: $radius;
-  border-radius: $radius;
-  /* stops bg color from leaking outside the border: */
-  background-clip: padding-box;
+    -webkit-border-radius: $radius;
+    border-radius: $radius;
+    /* stops bg color from leaking outside the border: */
+    background-clip: padding-box;
 }
 
 @mixin opacity($opacity) {
-  opacity: $opacity;
-  $opacity-ie: $opacity * 100;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
-  filter: alpha(opacity=$opacity-ie); //IE8
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
+    filter: alpha(opacity=$opacity-ie); //IE8
 }
 
 @mixin text-truncate {
-  display: block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /**
@@ -157,5 +191,5 @@
  * (opacity) value.
  */
 @mixin transparentBg($color, $alpha) {
-  background-color: rgba(red($color), green($color), blue($color), $alpha);
+    background-color: rgba(red($color), green($color), blue($color), $alpha);
 }

css/_popup_menu.scss

@@ -23,7 +23,8 @@
     }
 
     // Link Appearance
-    &__link {
+    &__link,
+    &__contents {
         display: block;
         box-sizing: border-box;
         text-decoration: none;
@@ -40,11 +41,16 @@
         }
     }
 
-    &__text {
+    &__text,
+    &__slider {
         display: inline-block;
         vertical-align: middle;
     }
 
+    &__slider {
+        width: 50px;
+    }
+
     &__icon {
         vertical-align: middle;
         position: relative;

css/_redirect_page.scss

@@ -1,10 +1,3 @@
-html, body {
-    width: 100%;
-    height:100%;
-    color: $defaultColor;
-    background: $defaultBackground;
-}
-
 .redirectPageMessage {
     width: 30%;
     margin: 20% auto;

css/_variables.scss

@@ -16,7 +16,7 @@ $defaultToolbarSize: 50px;
 $thumbnailToolbarHeight: 22px;
 $thumbnailIndicatorBorder: 2px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
-$thumbnailVideoMargin: 5px;
+$thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
 $hideFilmstripButtonWidth: 17px;
@@ -129,8 +129,13 @@ $linkFontColor: #489afe;
 $linkHoverFontColor: #287ade;
 
 /**
- * Landing
+ * Unsupported browser
  */
 $primaryUnsupportedBrowserButtonBgColor: #17a0db;
 $unsupportedBrowserButtonBgColor: #ff9a00;
 $unsupportedBrowserTextColor: #4a4a4a;
+$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTitleColor: #fff;
+$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
+$unsupportedDesktopBrowserTextFontSize: 21px;

css/components/_input-slider.scss

@@ -0,0 +1,41 @@
+/**
+ * Disable the default webkit styles for range inputs (sliders).
+ */
+input[type=range]{
+    -webkit-appearance: none;
+    background: none;
+}
+
+/**
+ * Disable the default focus styles for webkit range inputs (sliders).
+ */
+input[type=range]:focus {
+    outline: none;
+}
+
+/**
+ * Include the mixin for a range input style.
+ */
+@include slider {
+    background: $sliderTrackBackground;
+    border: none;
+    border-radius: 3px;
+    cursor: pointer;
+    height: 6px;
+    width: 100%;
+}
+
+/**
+ * Include the mixin for a range input thumb style.
+ */
+@include slider-thumb {
+    -webkit-appearance: none;
+    background: white;
+    border: 1px solid $sliderThumbBackground;
+    border-radius: 50%;
+    box-shadow: 0px 0px 1px $sliderThumbBackground;
+    cursor: pointer;
+    height: 14px;
+    margin-top: -4px;
+    width: 14px;
+}

css/components/_link.scss

@@ -8,4 +8,13 @@
         text-decoration: underline;
         @include transition(color .1s ease-in);
     }
+}
+
+/**
+ * Helper links are links that are meant to open a documentation page or more
+ * detailed info.
+ */
+.helper-link {
+    @extend .link;
+    font-size: 12px;
 }

css/main.scss

@@ -60,14 +60,14 @@
 @import 'components/link';
 @import 'shortcuts/main';
 @import 'components/button-control';
-@import 'components/_input-control.scss';
+@import 'components/input-control';
+@import 'components/input-slider';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';
 @import '404';
 @import 'policy';
 @import 'filmstrip';
-@import 'unsupported-browser/unsupported-desktop-browser';
-@import 'unsupported-browser/unsupported-mobile-browser';
+@import 'unsupported-browser/main';
 
 /* Modules END */

css/reload_overlay/_reload_overlay.scss

@@ -4,7 +4,7 @@
     line-height: 20px;
 }
 
-.reload_overlay_msg {
+.reload_overlay_text {
     display: block;
     font-size: 12px;
     line-height: 30px;
@@ -13,4 +13,4 @@
 #reloadProgressBar {
     width: 180px;
     margin: 5px auto;
-}
+}

css/themes/_light.scss

@@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
 */
 $controlBackground: $baseLight;
 $controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
 
 /**
 * Buttons

css/unsupported-browser/_main.scss

@@ -0,0 +1,3 @@
+@import 'no-mobile-app';
+@import 'unsupported-desktop-browser';
+@import 'unsupported-mobile-browser';

css/unsupported-browser/_no-mobile-app.scss

@@ -0,0 +1,21 @@
+.no-mobile-app {
+    margin: 30% auto 0;
+    max-width: 25em;
+    text-align: center;
+    width: auto;
+
+    &__title {
+        border-bottom: 1px solid $auiBorderColor;
+        color: $unsupportedBrowserTitleColor;
+        font-weight: 400;
+        letter-spacing: 0.5px;
+        padding-bottom: em(17, 24);
+    }
+
+    &__description {
+        font-size: $unsupportedBrowserTextSmallFontSize;
+        font-weight: 300;
+        letter-spacing: 1px;
+        margin-top: 1em;
+    }
+}

css/unsupported-browser/_unsupported-desktop-browser.scss

@@ -1,132 +1,39 @@
-.supported-browser {
-    color: #929391;
-    display: inline-block;
-    font-size: 20px;
-    margin: 1em 7px;
-    vertical-align: middle;
-    width: 138px;
+.unsupported-desktop-browser {
+    @include absoluteAligning();
 
-    &__button {
-        background-color: #62c82a;
-        border: 1px solid #3c8117;
-        border-radius: 10px;
-        color: #FFFFFF;
-        font-size: 12px;
-        height: 26px;
-        margin: 15px auto 0px auto;
-        padding-top: 13px;
-        text-align: center;
-        width: 115px;
+    display: block;
+    text-align: center;
+
+    &__title {
+        color: $unsupportedBrowserTitleColor;
+        font-weight: 300;
+        font-size: $unsupportedBrowserTitleFontSize;
+        letter-spacing: 1px;
+    }
+
+    &__description {
+        color: $unsupportedDesktopBrowserTextColor;
+        font-size: $unsupportedDesktopBrowserTextFontSize;
+        font-weight: 300;
+        letter-spacing: 1px;
+        margin-top: 16px;
+
+        &_small {
+            @extend .unsupported-desktop-browser__description;
+            font-size: $unsupportedBrowserTextSmallFontSize;
+        }
     }
 
     &__link {
-        color: #087dba;
-        text-decoration: none;
+        color: $linkFontColor;
+        @include transition(color .1s ease-out);
 
         &:hover {
+            color: $linkHoverFontColor;
+            cursor: pointer;
             text-decoration: none;
+
+            @include transition(color .1s ease-in);
         }
-
-        &:active {
-            text-decoration: none;
-        }
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-
-    &-list
-    {
-        margin: 0 auto;
-    }
-
-    &__logo {
-        margin: 20px auto 0px auto;
-
-        &_chrome {
-            background-image: url('../../images/chrome.png');
-            height: 78px;
-            width: 78px;
-        }
-
-        &_chromium {
-            background-image: url('../../images/chromium.png');
-            height: 78px;
-            width: 77px;
-        }
-
-        &_firefox {
-            background-image: url('../../images/firefox.png');
-            height: 80px;
-            width: 86px;
-        }
-
-        &_opera {
-            background-image: url('../../images/opera.png');
-            height: 78px;
-            width: 73px;
-        }
-
-        &_ie {
-            background-image: url('../../images/ie.png');
-            height: 78px;
-            width: 80px;
-        }
-
-        &_safari {
-            background-image: url('../../images/safari.png');
-            height: 79px;
-            width: 78px;
-        }
-    }
-
-    &__text
-    {
-        line-height: 1.2em;
-
-        &_small {
-            font-size: small;
-        }
-    }
-
-    &__tile {
-        background-color: #e8e8e8;
-        border: 1px solid #cfcfcf;
-        border-radius: 10px;
-        height: 163px;
-        margin-top: 5px;
-        width: 138px;
-    }
-}
-
-.unsupported-desktop-browser {
-    display: block;
-    height: 565px;
-    margin: auto;
-    overflow:hidden;
-    position: absolute;
-    text-align: center;
-    top: 0; left: 0; bottom: 0; right: 0;
-    width:500px;
-
-    &__page {
-        display:inline-block;
-        font-size: 28px;
-        padding-top: 25px;
-        vertical-align:middle;
-    }
-
-    &__title {
-        margin: 0 auto;
-        width: 20em;
-    }
-
-    &-wrapper {
-        background: #fff;
-        display: block;
-        height: 100%;
-        position: absolute;
-        width: 100%;
     }
 }

debian/jitsi-meet-tokens.install

@@ -1 +1 @@
-prosody-plugins/     /usr/share/jitsi-meet/
+resources/prosody-plugins/     /usr/share/jitsi-meet/

doc/influxdb.md

@@ -1,29 +0,0 @@
-# Overview
-Jitsi Meet supports logging to an [InfluxDB](http://influxdb.com/) database.
-
-# Configuration
-The following needs to be done to enable this functionality.
-
-## Install InfluxDB
-The details are outside the scope of the document, see http://influxdb.com/download/ .
-
-## Create an InfluxDB database
-Use the InfluxDB admin interface (running on port 8083) and create a database. In this example we name it <code>jitsi_database</code>
-
-## Enable logging for Jitsi Videobridge
-Add the following properties to <code>/usr/share/jitsi-videobridge/.sip-communicator/sip-communicator.properties</code>.
-
-- org.jitsi.videobridge.log.INFLUX_DB_ENABLED=true
-- org.jitsi.videobridge.log.INFLUX_URL_BASE=http://influxdb.example.com:8086
-- org.jitsi.videobridge.log.INFLUX_DATABASE=jitsi_database
-- org.jitsi.videobridge.log.INFLUX_USER=user
-- org.jitsi.videobridge.log.INFLUX_PASS=pass
-
-## Enable logging for Jicofo
-Add the same properties as above to <code>/usr/share/jicofo/.sip-communicator/sip-communicator.properties</code>.
-
-## Enable logging for Jitsi Meet itself
-Change "logStats" to "true" in <code>/etc/jitsi/meet/you-domain.config.js</code> or the <code>config.js</code> file used in your installation.
-
-# User interface
-You can explore the database using the [Jiloin](https://github.com/jitsi/jiloin) web interface.

doc/mobile.md

@@ -1,9 +1,9 @@
 # Jitsi Meet mobile apps
 
 Jitsi Meet can also be built as a standalone mobile application for
-iOS and Android.  It uses the [React Native]() framework.
+iOS and Android.  It uses the [React Native] framework.
 
-First make sure the [React Native dependencies]() are installed.
+First make sure the [React Native dependencies] are installed.
 
 **NOTE**:  This document assumes the app is being built on a macOS system.
 
@@ -22,6 +22,8 @@ work properly with the native plugins we require.
     npm install -g ios-deploy
     ```
 
+    You may need to add ```--unsafe-perm=true``` if you are running on [Mac OS 10.11 or greater](https://github.com/phonegap/ios-deploy#os-x-1011-el-capitan-or-greater).
+
 2. Build the app
 
     There are 2 ways to build the app: using the CLI or using Xcode.
@@ -62,8 +64,8 @@ work properly with the native plugins we require.
 
 ## Android
 
-The [React Native dependencies]() page has very detailed information on how to
-setup [Android Studio]() and the required components for getting the necessary
+The [React Native dependencies] page has very detailed information on how to
+setup [Android Studio] and the required components for getting the necessary
 build environment.  Make sure you follow it closely.
 
 1. Building the app
@@ -79,7 +81,7 @@ build environment.  Make sure you follow it closely.
 
 ## Debugging
 
-The official documentation on [debugging]() is quite extensive, it is the
+The official documentation on [debugging] is quite extensive, it is the
 preferred method for debugging.
 
 **NOTE**: When using Chrome Developer Tools for debugging the JavaScript code

interface_config.js

@@ -70,5 +70,16 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     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
+    REMOTE_THUMBNAIL_RATIO: 1, //1:1
+    // Documentation reference for the live streaming feature.
+    LIVE_STREAMING_HELP_LINK: "https://jitsi.org/live",
+
+    /**
+     * Whether the mobile app Jitsi Meet is to be promoted to participants
+     * attempting to join a conference in a mobile Web browser. If undefined,
+     * default to true.
+     *
+     * @type {boolean}
+     */
+    MOBILE_APP_PROMO: true
 };

ios/app/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -2,53 +2,103 @@
   "images" : [
     {
       "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "2x"
+      "scale" : "2x",
+      "size" : "20x20"
     },
     {
       "idiom" : "iphone",
-      "size" : "20x20",
-      "scale" : "3x"
+      "scale" : "3x",
+      "size" : "20x20"
     },
     {
-      "size" : "29x29",
-      "idiom" : "iphone",
       "filename" : "AppIcon-29@2x.png",
-      "scale" : "2x"
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "29x29"
     },
     {
-      "size" : "29x29",
-      "idiom" : "iphone",
       "filename" : "AppIcon-29@3x.png",
-      "scale" : "3x"
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "29x29"
     },
     {
-      "size" : "40x40",
-      "idiom" : "iphone",
       "filename" : "AppIcon-40@2x.png",
-      "scale" : "2x"
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "40x40"
     },
     {
-      "size" : "40x40",
-      "idiom" : "iphone",
       "filename" : "AppIcon-60@2x.png",
-      "scale" : "3x"
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "40x40"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
       "filename" : "AppIcon-60@2x.png",
-      "scale" : "2x"
+      "idiom" : "iphone",
+      "scale" : "2x",
+      "size" : "60x60"
     },
     {
-      "size" : "60x60",
-      "idiom" : "iphone",
       "filename" : "AppIcon-60@3x.png",
-      "scale" : "3x"
+      "idiom" : "iphone",
+      "scale" : "3x",
+      "size" : "60x60"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "20x20"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "29x29"
+    },
+    {
+      "filename" : "AppIcon-29@2x.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "29x29"
+    },
+    {
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "AppIcon-40@2x.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "40x40"
+    },
+    {
+      "filename" : "AppIcon-76@1x.png",
+      "idiom" : "ipad",
+      "scale" : "1x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "AppIcon-76@2x.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "76x76"
+    },
+    {
+      "filename" : "AppIcon-83.5@2x.png",
+      "idiom" : "ipad",
+      "scale" : "2x",
+      "size" : "83.5x83.5"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

ios/app/Images.xcassets/LaunchScreen.imageset/Contents.json

@@ -1,22 +1,23 @@
 {
   "images" : [
     {
-      "idiom" : "universal",
       "filename" : "LaunchScreen-480@1x.png",
+      "idiom" : "universal",
       "scale" : "1x"
     },
     {
-      "idiom" : "universal",
       "filename" : "LaunchScreen-480@2x.png",
+      "idiom" : "universal",
       "scale" : "2x"
     },
     {
+      "filename" : "LaunchScreen-480@3x.png",
       "idiom" : "universal",
       "scale" : "3x"
     }
   ],
   "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
   }
-}
+}

ios/app/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>1.2</string>
+	<string>1.3</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>
@@ -80,9 +80,10 @@
 	</array>
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
-		<string>UIInterfaceOrientationPortrait</string>
 		<string>UIInterfaceOrientationLandscapeLeft</string>
 		<string>UIInterfaceOrientationLandscapeRight</string>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>

ios/jitsi-meet-react.xcodeproj/project.pbxproj

@@ -25,6 +25,7 @@
 		2602576C1D0A7703001E3363 /* jitsi.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2602576B1D0A7703001E3363 /* jitsi.ttf */; };
 		3847F11906B4479A9162628F /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 821D8ABD506944B4BDBB069B /* libRNVectorIcons.a */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
+		7FAD39BE09A84D6AB0ABACA8 /* libRNBackgroundTimer.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 27A0018BBB2C4FD5A4F9CE71 /* libRNBackgroundTimer.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
 		901FE90FA5744B5B94DCDC41 /* libKCKeepAwake.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 0EA8C046B2BF46279796F07D /* libKCKeepAwake.a */; };
 		B30EF2311DC0ED7C00690F45 /* WebRTC.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B30EF2301DC0ED7C00690F45 /* WebRTC.framework */; };
@@ -184,6 +185,13 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		B332D04E1E54E3170086EA16 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 0965153BB98645B4A8B6AA10 /* RNBackgroundTimer.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RNBackgroundTimer;
+		};
 		B3BA19D41DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
@@ -263,6 +271,7 @@
 		00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTImage.xcodeproj; path = "../node_modules/react-native/Libraries/Image/RCTImage.xcodeproj"; sourceTree = "<group>"; };
 		00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTNetwork.xcodeproj; path = "../node_modules/react-native/Libraries/Network/RCTNetwork.xcodeproj"; sourceTree = "<group>"; };
 		00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTVibration.xcodeproj; path = "../node_modules/react-native/Libraries/Vibration/RCTVibration.xcodeproj"; sourceTree = "<group>"; };
+		0965153BB98645B4A8B6AA10 /* RNBackgroundTimer.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNBackgroundTimer.xcodeproj; path = "../node_modules/react-native-background-timer/ios/RNBackgroundTimer.xcodeproj"; sourceTree = "<group>"; };
 		0B42DFAD1E2FD90700111B12 /* AudioMode.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = AudioMode.m; path = app/AudioMode.m; sourceTree = "<group>"; };
 		0EA8C046B2BF46279796F07D /* libKCKeepAwake.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libKCKeepAwake.a; sourceTree = "<group>"; };
 		139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTSettings.xcodeproj; path = "../node_modules/react-native/Libraries/Settings/RCTSettings.xcodeproj"; sourceTree = "<group>"; };
@@ -277,6 +286,7 @@
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
 		22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
 		2602576B1D0A7703001E3363 /* jitsi.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = jitsi.ttf; path = ../android/app/src/main/assets/fonts/jitsi.ttf; sourceTree = "<group>"; };
+		27A0018BBB2C4FD5A4F9CE71 /* libRNBackgroundTimer.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNBackgroundTimer.a; sourceTree = "<group>"; };
 		5B09C20C78C74A548AAAC1FA /* KCKeepAwake.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = KCKeepAwake.xcodeproj; path = "../node_modules/react-native-keep-awake/ios/KCKeepAwake.xcodeproj"; sourceTree = "<group>"; };
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
@@ -315,7 +325,7 @@
 				BF9643881C34FBC800B0BBDF /* GLKit.framework in Frameworks */,
 				B30EF2311DC0ED7C00690F45 /* WebRTC.framework in Frameworks */,
 				BF96438E1C34FBE100B0BBDF /* VideoToolbox.framework in Frameworks */,
-				146834051AC3E58100842450 /* libReact.a in Frameworks */,
+				901FE90FA5744B5B94DCDC41 /* libKCKeepAwake.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
 				5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */,
 				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
@@ -327,8 +337,9 @@
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
 				BFC745141CB829B300673F38 /* libRCTWebRTC.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
+				146834051AC3E58100842450 /* libReact.a in Frameworks */,
+				7FAD39BE09A84D6AB0ABACA8 /* libRNBackgroundTimer.a in Frameworks */,
 				3847F11906B4479A9162628F /* libRNVectorIcons.a in Frameworks */,
-				901FE90FA5744B5B94DCDC41 /* libKCKeepAwake.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -488,6 +499,7 @@
 				BFC7450D1CB829A700673F38 /* RCTWebRTC.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
 				146833FF1AC3E56700842450 /* React.xcodeproj */,
+				0965153BB98645B4A8B6AA10 /* RNBackgroundTimer.xcodeproj */,
 				22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */,
 			);
 			name = Libraries;
@@ -524,6 +536,14 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		B332D0301E54E3170086EA16 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				B332D04F1E54E3170086EA16 /* libRNBackgroundTimer.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		B3BA19B71DC6B02F00BCD481 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
@@ -653,6 +673,10 @@
 					ProductGroup = 146834001AC3E56700842450 /* Products */;
 					ProjectRef = 146833FF1AC3E56700842450 /* React.xcodeproj */;
 				},
+				{
+					ProductGroup = B332D0301E54E3170086EA16 /* Products */;
+					ProjectRef = 0965153BB98645B4A8B6AA10 /* RNBackgroundTimer.xcodeproj */;
+				},
 				{
 					ProductGroup = 26D589F81D0B42EE00FC396B /* Products */;
 					ProjectRef = 22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */;
@@ -806,6 +830,13 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		B332D04F1E54E3170086EA16 /* libRNBackgroundTimer.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRNBackgroundTimer.a;
+			remoteRef = B332D04E1E54E3170086EA16 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		B3BA19D51DC6B37B00BCD481 /* libRCTImage-tvOS.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -952,6 +983,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 					"$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS/**",
+					"$(SRCROOT)/../node_modules/react-native-background-timer/ios",
 					"$(SRCROOT)/../node_modules/react-native-keep-awake/ios",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
@@ -969,6 +1001,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.JitsiMeet.ios;
 				PRODUCT_NAME = "jitsi-meet-react";
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
@@ -988,6 +1021,7 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 					"$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS/**",
+					"$(SRCROOT)/../node_modules/react-native-background-timer/ios",
 					"$(SRCROOT)/../node_modules/react-native-keep-awake/ios",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
@@ -1005,6 +1039,7 @@
 				);
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.JitsiMeet.ios;
 				PRODUCT_NAME = "jitsi-meet-react";
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
 		};
@@ -1050,6 +1085,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-background-timer/ios",
 					"$(SRCROOT)/../node_modules/react-native-keep-awake/ios",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
@@ -1095,6 +1131,7 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 					"$(SRCROOT)/../node_modules/react-native/React/**",
+					"$(SRCROOT)/../node_modules/react-native-background-timer/ios",
 					"$(SRCROOT)/../node_modules/react-native-keep-awake/ios",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);

lang/languages-de.json

@@ -13,5 +13,6 @@
     "sk": "Slowakisch",
     "sl": "Slowenisch",
     "sv": "Schwedisch",
-    "tr": "Türkisch"
+    "tr": "Türkisch",
+    "zhCN": "Chinesisch (China)"
 }

lang/languages-zhCN.json

@@ -0,0 +1,17 @@
+{
+    "en": "",
+    "bg": "",
+    "de": "",
+    "es": "",
+    "fr": "",
+    "hy": "",
+    "it": "",
+    "oc": "",
+    "pl": "",
+    "ptBR": "",
+    "ru": "",
+    "sk": "",
+    "sl": "",
+    "sv": "",
+    "tr": ""
+}

lang/languages.json

@@ -13,5 +13,6 @@
     "sk": "Slovak",
     "sl": "Slovenian",
     "sv": "Swedish",
-    "tr": "Turkish"
+    "tr": "Turkish",
+    "zhCN": "Chinese (China)"
 }

lang/main-de.json

@@ -154,7 +154,8 @@
         "kick": "Hinauswerfen",
         "muted": "Stummgeschaltet",
         "domute": "Stummschalten",
-        "flip": "Spiegeln"
+        "flip": "Spiegeln",
+        "remoteControl": "Fernsteuerung"
     },
     "connectionindicator": {
         "header": "Verbindungsdaten",
@@ -312,7 +313,12 @@
         "externalInstallationMsg": "Die Bildschirmfreigabeerweiterung muss installiert werden.",
         "muteParticipantTitle": "Teilnehmer stummschalten?",
         "muteParticipantBody": "Sie können die Stummschaltung anderer Teilnehmer nicht aufheben, aber ein Teilnehmer kann seine eigene Stummschaltung jederzeit beenden.",
-        "muteParticipantButton": "Stummschalten"
+        "muteParticipantButton": "Stummschalten",
+        "remoteControlTitle": "Fernsteuerung",
+        "remoteControlDeniedMessage": "__user__ hat die Anfrage zur Fernsteuerung verweigert.",
+        "remoteControlAllowedMessage": "__user__ hat die Anfrage zur Fernsteuerung angenommen.",
+        "remoteControlErrorMessage": "Beim Anfordern der Fernsteuerungsberechtigung von __user__ ist ein Fehler aufgetreten.",
+        "remoteControlStopMessage": "Die Fernsteuerung wurde beendet."
     },
     "\u0005dialog": {},
     "email": {
@@ -375,6 +381,7 @@
         "failedToStart": "Live-Streaming konnte nicht gestartet werden",
         "buttonTooltip": "Live-Stream starten / stoppen",
         "streamIdRequired": "Bitte Stream-ID eingeben um das Live-Streaming zu starten.",
+        "streamIdHelp": "Wo ist die Stream-ID zu finden?",
         "error": "Das Live-Streaming ist fehlgeschlagen. Bitte versuchen Sie es erneut.",
         "busy": "All Aufnahmegeräte sind momentan ausgelastet. Bitte versuchen Sie es später noch einmal."
     }

lang/main-zhCN.json

@@ -0,0 +1,355 @@
+{
+    "contactlist": "",
+    "addParticipants": "",
+    "roomLocked": "",
+    "roomUnlocked": "",
+    "passwordSetRemotely": "",
+    "connectionsettings": "",
+    "poweredby": "",
+    "feedback": "",
+    "inviteUrlDefaultMsg": "",
+    "me": "",
+    "speaker": "",
+    "raisedHand": "",
+    "defaultNickname": "",
+    "defaultLink": "",
+    "callingName": "",
+    "userMedia": {
+        "react-nativeGrantPermissions": "",
+        "chromeGrantPermissions": "",
+        "androidGrantPermissions": "",
+        "firefoxGrantPermissions": "",
+        "operaGrantPermissions": "",
+        "iexplorerGrantPermissions": "",
+        "safariGrantPermissions": "",
+        "nwjsGrantPermissions": ""
+    },
+    "keyboardShortcuts": {
+        "keyboardShortcuts": "",
+        "raiseHand": "",
+        "pushToTalk": "",
+        "toggleScreensharing": "",
+        "toggleFilmstrip": "",
+        "toggleShortcuts": "",
+        "focusLocal": "",
+        "focusRemote": "",
+        "toggleChat": "",
+        "mute": "",
+        "fullScreen": "",
+        "videoMute": ""
+    },
+    "welcomepage": {
+        "go": "",
+        "roomname": "",
+        "disable": "",
+        "feature1": {
+            "title": "",
+            "content": ""
+        },
+        "feature2": {
+            "title": "",
+            "content": ""
+        },
+        "feature3": {
+            "title": "",
+            "content": ""
+        },
+        "feature4": {
+            "title": "",
+            "content": ""
+        },
+        "feature5": {
+            "title": "",
+            "content": ""
+        },
+        "feature6": {
+            "title": "",
+            "content": ""
+        },
+        "feature7": {
+            "title": "",
+            "content": ""
+        },
+        "feature8": {
+            "title": "",
+            "content": ""
+        }
+    },
+    "startupoverlay": {
+        "policyText": "",
+        "title": ""
+    },
+    "suspendedoverlay": {
+        "title": "",
+        "rejoinKeyTitle": ""
+    },
+    "toolbar": {
+        "mute": "",
+        "videomute": "",
+        "authenticate": "",
+        "lock": "",
+        "invite": "",
+        "chat": "",
+        "etherpad": "",
+        "sharedvideo": "",
+        "sharescreen": "",
+        "fullscreen": "",
+        "sip": "",
+        "Settings": "",
+        "hangup": "",
+        "login": "",
+        "logout": "",
+        "dialpad": "",
+        "sharedVideoMutedPopup": "",
+        "micMutedPopup": "",
+        "talkWhileMutedPopup": "",
+        "unableToUnmutePopup": "",
+        "cameraDisabled": "",
+        "micDisabled": "",
+        "filmstrip": "",
+        "profile": "",
+        "raiseHand": ""
+    },
+    "bottomtoolbar": {
+        "chat": "",
+        "filmstrip": "",
+        "contactlist": ""
+    },
+    "chat": {
+        "nickname": {
+            "title": "",
+            "popover": ""
+        },
+        "messagebox": ""
+    },
+    "settings": {
+        "title": "",
+        "update": "",
+        "name": "",
+        "startAudioMuted": "",
+        "startVideoMuted": "",
+        "selectCamera": "",
+        "selectMic": "",
+        "selectAudioOutput": "",
+        "followMe": "",
+        "noDevice": "",
+        "noPermission": "",
+        "cameraAndMic": "",
+        "moderator": "",
+        "password": "",
+        "audioVideo": "",
+        "setPasswordLabel": ""
+    },
+    "profile": {
+        "title": "",
+        "setDisplayNameLabel": "",
+        "setEmailLabel": "",
+        "setEmailInput": ""
+    },
+    "videothumbnail": {
+        "editnickname": "",
+        "moderator": "",
+        "videomute": "",
+        "mute": "",
+        "kick": "",
+        "muted": "",
+        "domute": "",
+        "flip": ""
+    },
+    "connectionindicator": {
+        "header": "",
+        "bitrate": "",
+        "packetloss": "",
+        "resolution": "",
+        "less": "",
+        "more": "",
+        "address": "",
+        "remoteport_plural": "",
+        "remoteport": "",
+        "localport_plural": "",
+        "localport": "",
+        "localaddress_plural": "",
+        "localaddress": "",
+        "remoteaddress_plural": "",
+        "remoteaddress": "",
+        "transport": "",
+        "bandwidth": "",
+        "na": ""
+    },
+    "notify": {
+        "disconnected": "",
+        "moderator": "",
+        "connected": "",
+        "somebody": "",
+        "me": "",
+        "focus": "",
+        "focusFail": "",
+        "grantedTo": "",
+        "grantedToUnknown": "",
+        "muted": "",
+        "mutedTitle": "",
+        "raisedHand": ""
+    },
+    "dialog": {
+        "add": "",
+        "kickMessage": "",
+        "popupError": "",
+        "passwordErrorTitle": "",
+        "passwordError": "",
+        "passwordError2": "",
+        "connectError": "",
+        "connectErrorWithMsg": "",
+        "incorrectPassword": "",
+        "connecting": "",
+        "copy": "",
+        "error": "",
+        "roomLocked": "",
+        "addPassword": "",
+        "createPassword": "",
+        "detectext": "",
+        "failtoinstall": "",
+        "failedpermissions": "",
+        "conferenceReloadTitle": "",
+        "conferenceReloadMsg": "",
+        "conferenceDisconnectTitle": "",
+        "conferenceDisconnectMsg": "",
+        "reconnectNow": "",
+        "conferenceReloadTimeLeft": "",
+        "maxUsersLimitReached": "",
+        "lockTitle": "",
+        "lockMessage": "",
+        "warning": "",
+        "passwordNotSupported": "",
+        "internalErrorTitle": "",
+        "internalError": "",
+        "unableToSwitch": "",
+        "SLDFailure": "",
+        "SRDFailure": "",
+        "oops": "",
+        "currentPassword": "",
+        "passwordLabel": "",
+        "defaultError": "",
+        "passwordRequired": "",
+        "Ok": "",
+        "done": "",
+        "Remove": "",
+        "removePassword": "",
+        "shareVideoTitle": "",
+        "shareVideoLinkError": "",
+        "removeSharedVideoTitle": "",
+        "removeSharedVideoMsg": "",
+        "alreadySharedVideoMsg": "",
+        "WaitingForHost": "",
+        "WaitForHostMsg": "",
+        "IamHost": "",
+        "Cancel": "",
+        "Submit": "",
+        "retry": "",
+        "logoutTitle": "",
+        "logoutQuestion": "",
+        "sessTerminated": "",
+        "hungUp": "",
+        "joinAgain": "",
+        "Share": "",
+        "Save": "",
+        "recording": "",
+        "recordingToken": "",
+        "Dial": "",
+        "sipMsg": "",
+        "passwordCheck": "",
+        "passwordMsg": "",
+        "shareLink": "",
+        "settings1": "",
+        "settings2": "",
+        "settings3": "",
+        "yourPassword": "",
+        "Back": "",
+        "serviceUnavailable": "",
+        "gracefulShutdown": "",
+        "Yes": "",
+        "reservationError": "",
+        "reservationErrorMsg": "",
+        "password": "",
+        "userPassword": "",
+        "token": "",
+        "tokenAuthFailedTitle": "",
+        "tokenAuthFailed": "",
+        "displayNameRequired": "",
+        "enterDisplayName": "",
+        "extensionRequired": "",
+        "firefoxExtensionPrompt": "",
+        "rateExperience": "",
+        "feedbackHelp": "",
+        "feedbackQuestion": "",
+        "thankYou": "",
+        "sorryFeedback": "",
+        "liveStreaming": "",
+        "streamKey": "",
+        "startLiveStreaming": "",
+        "stopStreamingWarning": "",
+        "stopRecordingWarning": "",
+        "stopLiveStreaming": "",
+        "stopRecording": "",
+        "doNotShowWarningAgain": "",
+        "doNotShowMessageAgain": "",
+        "permissionDenied": "",
+        "screenSharingPermissionDeniedError": "",
+        "micErrorPresent": "",
+        "cameraErrorPresent": "",
+        "cameraUnsupportedResolutionError": "",
+        "cameraUnknownError": "",
+        "cameraPermissionDeniedError": "",
+        "cameraNotFoundError": "",
+        "cameraConstraintFailedError": "",
+        "micUnknownError": "",
+        "micPermissionDeniedError": "",
+        "micNotFoundError": "",
+        "micConstraintFailedError": "",
+        "micNotSendingData": "",
+        "cameraNotSendingData": "",
+        "goToStore": "",
+        "externalInstallationTitle": "",
+        "externalInstallationMsg": "",
+        "muteParticipantTitle": "",
+        "muteParticipantBody": "",
+        "muteParticipantButton": ""
+    },
+    "email": {
+        "sharedKey": "",
+        "subject": "",
+        "body": "",
+        "and": ""
+    },
+    "connection": {
+        "ERROR": "",
+        "CONNECTING": "",
+        "RECONNECTING": "",
+        "CONNFAIL": "",
+        "AUTHENTICATING": "",
+        "AUTHFAIL": "",
+        "CONNECTED": "",
+        "DISCONNECTED": "",
+        "DISCONNECTING": "",
+        "ATTACHED": ""
+    },
+    "recording": {
+        "pending": "",
+        "on": "",
+        "off": "",
+        "failedToStart": "",
+        "buttonTooltip": "",
+        "error": "",
+        "unavailable": ""
+    },
+    "liveStreaming": {
+        "pending": "",
+        "on": "",
+        "off": "",
+        "unavailable": "",
+        "failedToStart": "",
+        "buttonTooltip": "",
+        "streamIdRequired": "",
+        "error": "",
+        "busy": ""
+    }
+}

lang/main.json

@@ -39,41 +39,46 @@
         "videoMute": "Start or stop your camera"
     },
     "welcomepage":{
-        "go": "GO",
-        "roomname": "Enter room name",
         "disable": "Don't show this page again",
         "feature1": {
-            "title": "Simple to use",
-            "content": "No downloads required. __app__ works directly within your browser. Simply share your conference URL with others to get started."
+            "content": "No downloads required. __app__ works directly within your browser. Simply share your conference URL with others to get started.",
+            "title": "Simple to use"
         },
         "feature2": {
-            "title": "Low bandwidth",
-            "content": "Multi-party video conferences work with as little as 128Kbps. Screen-sharing and audio-only conferences are possible with far less."
+            "content": "Multi-party video conferences work with as little as 128Kbps. Screen-sharing and audio-only conferences are possible with far less.",
+            "title": "Low bandwidth"
         },
         "feature3": {
-            "title": "Open source",
-            "content": "__app__ is licensed under the Apache License. You are free to download, use, modify, and share it as per this license."
+            "content": "__app__ is licensed under the Apache License. You are free to download, use, modify, and share it as per this license.",
+            "title": "Open source"
         },
         "feature4": {
-            "title": "Unlimited users",
-            "content": "There are no artificial restrictions on the number of users or conference participants. Server power and bandwidth are the only limiting factors."
+            "content": "There are no artificial restrictions on the number of users or conference participants. Server power and bandwidth are the only limiting factors.",
+            "title": "Unlimited users"
         },
         "feature5": {
-            "title": "Screen sharing",
-            "content": "It's easy to share your screen with others. __app__ is ideal for on-line presentations, lectures, and tech support sessions."
+            "content": "It's easy to share your screen with others. __app__ is ideal for on-line presentations, lectures, and tech support sessions.",
+            "title": "Screen sharing"
         },
         "feature6": {
-            "title": "Secure rooms",
-            "content": "Need some privacy? __app__ conference rooms can be secured with a password in order to exclude unwanted guests and prevent interruptions."
+            "content": "Need some privacy? __app__ conference rooms can be secured with a password in order to exclude unwanted guests and prevent interruptions.",
+            "title": "Secure rooms"
         },
         "feature7": {
-            "title": "Shared notes",
-            "content": "__app__ features Etherpad, a real-time collaborative text editor that's great for meeting minutes, writing articles, and more."
+            "content": "__app__ features Etherpad, a real-time collaborative text editor that's great for meeting minutes, writing articles, and more.",
+            "title": "Shared notes"
         },
         "feature8": {
-            "title": "Usage statistics",
-            "content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems."
-        }
+            "content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems.",
+            "title": "Usage statistics"
+        },
+        "go": "GO",
+        "join": "JOIN",
+        "privacy": "Privacy",
+        "roomname": "Enter room name",
+        "roomnamePlaceHolder": "room name",
+        "sendFeedback": "Send feedback",
+        "terms": "Terms"
     },
     "startupoverlay": {
         "policyText": " ",
@@ -110,6 +115,13 @@
         "profile": "Edit your profile",
         "raiseHand": "Raise / Lower your hand"
     },
+    "unsupportedBrowser": {
+        "appInstalled": "or if you already have it<br /><strong>then</strong>",
+        "appNotInstalled": "You need <strong>__app__</strong> to join a conversation on your mobile",
+        "downloadApp": "Download the App",
+        "joinConversation": "Join the conversation",
+        "startConference": "Start a conference"
+    },
     "bottomtoolbar": {
         "chat": "Open / close chat",
         "filmstrip": "Show / hide videos",
@@ -387,6 +399,7 @@
         "failedToStart": "Live streaming failed to start",
         "buttonTooltip": "Start / Stop live stream",
         "streamIdRequired": "Please fill in the stream id in order to launch the live streaming.",
+        "streamIdHelp": "Where do I find this?",
         "error": "Live streaming failed. Please try again.",
         "busy": "All recorders are currently busy. Please try again later."
     }

modules/UI/UI.js

@@ -15,18 +15,13 @@ import UIEvents from "../../service/UI/UIEvents";
 import EtherpadManager from './etherpad/Etherpad';
 import SharedVideoManager from './shared_video/SharedVideo';
 import Recording from "./recording/Recording";
-import GumPermissionsOverlay
-    from './gum_overlay/UserMediaPermissionsGuidanceOverlay';
 
-import * as PageReloadOverlay from './reload_overlay/PageReloadOverlay';
-import SuspendedOverlay from './suspended_overlay/SuspendedOverlay';
 import VideoLayout from "./videolayout/VideoLayout";
 import FilmStrip from "./videolayout/FilmStrip";
 import SettingsMenu from "./side_pannels/settings/SettingsMenu";
 import Profile from "./side_pannels/profile/Profile";
 import Settings from "./../settings/Settings";
 import RingOverlay from "./ring_overlay/RingOverlay";
-import { randomInt } from "../../react/features/base/util/randomUtil";
 import UIErrors from './UIErrors';
 import { debounce } from "../util/helpers";
 
@@ -40,6 +35,17 @@ import FollowMe from "../FollowMe";
 var eventEmitter = new EventEmitter();
 UI.eventEmitter = eventEmitter;
 
+/**
+ * Whether an overlay is visible or not.
+ *
+ * FIXME: This is temporary solution. Don't use this variable!
+ * Should be removed when all the code is move to react.
+ *
+ * @type {boolean}
+ * @public
+ */
+UI.overlayVisible = false;
+
 let etherpadManager;
 let sharedVideoManager;
 
@@ -77,57 +83,6 @@ JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.CONSTRAINT_FAILED]
 JITSI_TRACK_ERROR_TO_MESSAGE_KEY_MAP.microphone[TrackErrors.NO_DATA_FROM_SOURCE]
     = "dialog.micNotSendingData";
 
-/**
- * Prompt user for nickname.
- */
-function promptDisplayName() {
-    let labelKey = 'dialog.enterDisplayName';
-    let message = (
-        `<div class="form-control">
-            <label data-i18n="${labelKey}" class="form-control__label"></label>
-            <input name="displayName" type="text"
-               data-i18n="[placeholder]defaultNickname"
-               class="input-control" autofocus>
-         </div>`
-    );
-
-    // Don't use a translation string, because we're too early in the call and
-    // the translation may not be initialised.
-    let buttons = {Ok:true};
-
-    let dialog = messageHandler.openDialog(
-        'dialog.displayNameRequired',
-        message,
-        true,
-        buttons,
-        function (e, v, m, f) {
-            e.preventDefault();
-            if (v) {
-                let displayName = f.displayName;
-                if (displayName) {
-                    UI.inputDisplayNameHandler(displayName);
-                    dialog.close();
-                    return;
-                }
-            }
-        },
-        function () {
-            let form  = $.prompt.getPrompt();
-            let input = form.find("input[name='displayName']");
-            input.focus();
-            let button = form.find("button");
-            button.attr("disabled", "disabled");
-            input.keyup(function () {
-                if (input.val()) {
-                    button.removeAttr("disabled");
-                } else {
-                    button.attr("disabled", "disabled");
-                }
-            });
-        }
-    );
-}
-
 /**
  * Initialize toolbars with side panels.
  */
@@ -298,9 +253,7 @@ UI.mucJoined = function () {
 /***
  * Handler for toggling filmstrip
  */
-UI.handleToggleFilmStrip = () => {
-    UI.toggleFilmStrip();
-};
+UI.handleToggleFilmStrip = () => UI.toggleFilmStrip();
 
 /**
  * Sets tooltip defaults.
@@ -318,69 +271,6 @@ function _setTooltipDefaults() {
     };
 }
 
-/**
- * Setup some UI event listeners.
- */
-function registerListeners() {
-
-    UI.addListener(UIEvents.ETHERPAD_CLICKED, function () {
-        if (etherpadManager) {
-            etherpadManager.toggleEtherpad();
-        }
-    });
-
-    UI.addListener(UIEvents.SHARED_VIDEO_CLICKED, function () {
-        if (sharedVideoManager) {
-            sharedVideoManager.toggleSharedVideo();
-        }
-    });
-
-    UI.addListener(UIEvents.TOGGLE_FULLSCREEN, UI.toggleFullScreen);
-
-    UI.addListener(UIEvents.TOGGLE_CHAT, UI.toggleChat);
-
-    UI.addListener(UIEvents.TOGGLE_SETTINGS, function () {
-        UI.toggleSidePanel("settings_container");
-    });
-
-    UI.addListener(UIEvents.TOGGLE_CONTACT_LIST, UI.toggleContactList);
-
-    UI.addListener( UIEvents.TOGGLE_PROFILE, function() {
-        if(APP.tokenData.isGuest)
-            UI.toggleSidePanel("profile_container");
-    });
-
-    UI.addListener(UIEvents.TOGGLE_FILM_STRIP, UI.handleToggleFilmStrip);
-
-    UI.addListener(UIEvents.FOLLOW_ME_ENABLED, function (isEnabled) {
-        if (followMeHandler)
-            followMeHandler.enableFollowMe(isEnabled);
-    });
-}
-
-/**
- * Setup some DOM event listeners.
- */
-function bindEvents() {
-    function onResize() {
-        SideContainerToggler.resize();
-        VideoLayout.resizeVideoArea();
-    }
-
-    // Resize and reposition videos in full screen mode.
-    $(document).on(
-        'webkitfullscreenchange mozfullscreenchange fullscreenchange',
-        () => {
-            eventEmitter.emit(  UIEvents.FULLSCREEN_TOGGLED,
-                                UIUtil.isFullScreen());
-
-            onResize();
-        }
-    );
-
-    $(window).resize(onResize);
-}
-
 /**
  * Returns the shared document manager object.
  * @return {EtherpadManager} the shared document manager object
@@ -404,8 +294,6 @@ UI.start = function () {
     // Set the defaults for tooltips.
     _setTooltipDefaults();
 
-    registerListeners();
-
     ToolbarToggler.init();
     SideContainerToggler.init(eventEmitter);
     FilmStrip.init(eventEmitter);
@@ -416,7 +304,6 @@ UI.start = function () {
     }
     VideoLayout.resizeVideoArea(true, true);
 
-    bindEvents();
     sharedVideoManager = new SharedVideoManager(eventEmitter);
     if (!interfaceConfig.filmStripOnly) {
         let debouncedShowToolbar = debounce(() => {
@@ -435,6 +322,7 @@ UI.start = function () {
             UIUtil.setVisible('notice', true);
         }
     } else {
+        $("body").addClass("filmstrip-only");
         UIUtil.setVisible('mainToolbarContainer', false);
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
@@ -443,12 +331,6 @@ UI.start = function () {
 
     document.title = interfaceConfig.APP_NAME;
 
-    if(config.requireDisplayName) {
-        if (!APP.settings.getDisplayName()) {
-            promptDisplayName();
-        }
-    }
-
     if (!interfaceConfig.filmStripOnly) {
         toastr.options = {
             "closeButton": true,
@@ -473,17 +355,57 @@ UI.start = function () {
     if(APP.tokenData.callee) {
         UI.showRingOverlay();
     }
+};
 
-    // Return true to indicate that the UI has been fully started and
-    // conference ready.
-    return true;
+/**
+ * Setup some UI event listeners.
+ */
+UI.registerListeners
+    = () => UIListeners.forEach((value, key) => UI.addListener(key, value));
+
+/**
+ * Unregister some UI event listeners.
+ */
+UI.unregisterListeners
+    = () => UIListeners.forEach((value, key) => UI.removeListener(key, value));
+
+/**
+ * Setup some DOM event listeners.
+ */
+UI.bindEvents = () => {
+    function onResize() {
+        SideContainerToggler.resize();
+        VideoLayout.resizeVideoArea();
+    }
+
+    // Resize and reposition videos in full screen mode.
+    $(document).on(
+            'webkitfullscreenchange mozfullscreenchange fullscreenchange',
+            () => {
+                eventEmitter.emit(
+                        UIEvents.FULLSCREEN_TOGGLED,
+                        UIUtil.isFullScreen());
+                onResize();
+            });
+
+    $(window).resize(onResize);
+};
+
+/**
+ * Unbind some DOM event listeners.
+ */
+UI.unbindEvents = () => {
+    $(document).off(
+            'webkitfullscreenchange mozfullscreenchange fullscreenchange');
+
+    $(window).off('resize');
 };
 
 /**
  * Show local stream on UI.
  * @param {JitsiTrack} track stream to show
  */
-UI.addLocalStream = function (track) {
+UI.addLocalStream = track => {
     switch (track.getType()) {
     case 'audio':
         VideoLayout.changeLocalAudio(track);
@@ -502,31 +424,25 @@ UI.addLocalStream = function (track) {
  * Show remote stream on UI.
  * @param {JitsiTrack} track stream to show
  */
-UI.addRemoteStream = function (track) {
-    VideoLayout.onRemoteStreamAdded(track);
-};
+UI.addRemoteStream = track => VideoLayout.onRemoteStreamAdded(track);
 
 /**
  * Removed remote stream from UI.
  * @param {JitsiTrack} track stream to remove
  */
-UI.removeRemoteStream = function (track) {
-    VideoLayout.onRemoteStreamRemoved(track);
-};
+UI.removeRemoteStream = track => VideoLayout.onRemoteStreamRemoved(track);
 
 /**
  * Update chat subject.
  * @param {string} subject new chat subject
  */
-UI.setSubject = function (subject) {
-    Chat.setSubject(subject);
-};
+UI.setSubject = subject => Chat.setSubject(subject);
 
 /**
  * Setup and show Etherpad.
  * @param {string} name etherpad id
  */
-UI.initEtherpad = function (name) {
+UI.initEtherpad = name => {
     if (etherpadManager || !config.etherpad_base || !name) {
         return;
     }
@@ -540,9 +456,7 @@ UI.initEtherpad = function (name) {
  * Returns the shared document manager object.
  * @return {EtherpadManager} the shared document manager object
  */
-UI.getSharedDocumentManager = function () {
-    return etherpadManager;
-};
+UI.getSharedDocumentManager = () => etherpadManager;
 
 /**
  * Show user on UI.
@@ -600,15 +514,14 @@ UI.removeUser = function (id, displayName) {
  * @param {string} id user id
  * @param {string} newVideoType new videotype
  */
-UI.onPeerVideoTypeChanged = (id, newVideoType) => {
-    VideoLayout.onVideoTypeChanged(id, newVideoType);
-};
+UI.onPeerVideoTypeChanged
+    = (id, newVideoType) => VideoLayout.onVideoTypeChanged(id, newVideoType);
 
 /**
  * Update local user role and show notification if user is moderator.
  * @param {boolean} isModerator if local user is moderator or not
  */
-UI.updateLocalRole = function (isModerator) {
+UI.updateLocalRole = isModerator => {
     VideoLayout.showModeratorIndicator();
 
     Toolbar.showSipCallButton(isModerator);
@@ -631,7 +544,7 @@ UI.updateLocalRole = function (isModerator) {
  * and notifies user who is the moderator
  * @param user to check for moderator
  */
-UI.updateUserRole = function (user) {
+UI.updateUserRole = user => {
     VideoLayout.showModeratorIndicator();
 
     // We don't need to show moderator notifications when the focus (moderator)
@@ -656,13 +569,10 @@ UI.updateUserRole = function (user) {
     }
 };
 
-
 /**
  * Toggles smileys in the chat.
  */
-UI.toggleSmileys = function () {
-    Chat.toggleSmileys();
-};
+UI.toggleSmileys = () => Chat.toggleSmileys();
 
 /**
  * Toggles film strip.
@@ -677,32 +587,24 @@ UI.toggleFilmStrip = function () {
  * Indicates if the film strip is currently visible or not.
  * @returns {true} if the film strip is currently visible, otherwise
  */
-UI.isFilmStripVisible = function () {
-    return FilmStrip.isFilmStripVisible();
-};
+UI.isFilmStripVisible = () => FilmStrip.isFilmStripVisible();
 
 /**
  * Toggles chat panel.
  */
-UI.toggleChat = function () {
-    UI.toggleSidePanel("chat_container");
-};
+UI.toggleChat = () => UI.toggleSidePanel("chat_container");
 
 /**
  * Toggles contact list panel.
  */
-UI.toggleContactList = function () {
-    UI.toggleSidePanel("contacts_container");
-};
+UI.toggleContactList = () => UI.toggleSidePanel("contacts_container");
 
 /**
  * Toggles the given side panel.
  *
  * @param {String} sidePanelId the identifier of the side panel to toggle
  */
-UI.toggleSidePanel = function (sidePanelId) {
-    SideContainerToggler.toggle(sidePanelId);
-};
+UI.toggleSidePanel = sidePanelId => SideContainerToggler.toggle(sidePanelId);
 
 
 /**
@@ -712,6 +614,17 @@ UI.inputDisplayNameHandler = function (newDisplayName) {
     eventEmitter.emit(UIEvents.NICKNAME_CHANGED, newDisplayName);
 };
 
+/**
+ * Show custom popup/tooltip for a specified button.
+ * @param popupSelectorID the selector id of the popup to show
+ * @param show true or false/show or hide the popup
+ * @param timeout the time to show the popup
+ */
+UI.showCustomToolbarPopup = function (popupSelectorID, show, timeout) {
+    eventEmitter.emit(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+        popupSelectorID, show, timeout);
+};
+
 /**
  * Return the type of the remote video.
  * @param jid the jid for the remote video
@@ -946,6 +859,59 @@ UI.participantConnectionStatusChanged = function (id, isActive) {
     VideoLayout.onParticipantConnectionStatusChanged(id, isActive);
 };
 
+/**
+ * Prompt user for nickname.
+ */
+UI.promptDisplayName = () => {
+    const labelKey = 'dialog.enterDisplayName';
+    const message = (
+        `<div class="form-control">
+            <label data-i18n="${labelKey}" class="form-control__label"></label>
+            <input name="displayName" type="text"
+               data-i18n="[placeholder]defaultNickname"
+               class="input-control" autofocus>
+         </div>`
+    );
+
+    // Don't use a translation string, because we're too early in the call and
+    // the translation may not be initialised.
+    const buttons = { Ok: true };
+
+    const dialog = messageHandler.openDialog(
+        'dialog.displayNameRequired',
+        message,
+        true,
+        buttons,
+        (e, v, m, f) => {
+            e.preventDefault();
+            if (v) {
+                const displayName = f.displayName;
+
+                if (displayName) {
+                    UI.inputDisplayNameHandler(displayName);
+                    dialog.close();
+                    return;
+                }
+            }
+        },
+        () => {
+            const form  = $.prompt.getPrompt();
+            const input = form.find("input[name='displayName']");
+            const button = form.find("button");
+
+            input.focus();
+            button.attr("disabled", "disabled");
+            input.keyup(() => {
+                if (input.val()) {
+                    button.removeAttr("disabled");
+                } else {
+                    button.attr("disabled", "disabled");
+                }
+            });
+        }
+    );
+};
+
 /**
  * Update audio level visualization for specified user.
  * @param {string} id user id
@@ -1076,20 +1042,6 @@ UI.notifyFocusDisconnected = function (focus, retrySec) {
     );
 };
 
-/**
- * Notify the user that the video conferencing service is badly broken and
- * the page should be reloaded.
- *
- * @param {boolean} isNetworkFailure <tt>true</tt> indicates that it's caused by
- * network related failure or <tt>false</tt> when it's the infrastructure.
- * @param {string} a label string identifying the reason for the page reload
- * which will be included in details of the log event.
- */
-UI.showPageReloadOverlay = function (isNetworkFailure, reason) {
-    // Reload the page after 10 - 30 seconds
-    PageReloadOverlay.show(10 + randomInt(0, 20), isNetworkFailure, reason);
-};
-
 /**
  * Updates auth info on the UI.
  * @param {boolean} isAuthEnabled if authentication is enabled
@@ -1370,9 +1322,7 @@ UI.onSharedVideoStop = function (id, attributes) {
  * @param {boolean} enabled indicates if the camera button should be enabled
  * or disabled
  */
-UI.setCameraButtonEnabled = function (enabled) {
-    Toolbar.setVideoIconEnabled(enabled);
-};
+UI.setCameraButtonEnabled = enabled => Toolbar.setVideoIconEnabled(enabled);
 
 /**
  * Enables / disables microphone toolbar button.
@@ -1380,9 +1330,7 @@ UI.setCameraButtonEnabled = function (enabled) {
  * @param {boolean} enabled indicates if the microphone button should be
  * enabled or disabled
  */
-UI.setMicrophoneButtonEnabled = function (enabled) {
-    Toolbar.setAudioIconEnabled(enabled);
-};
+UI.setMicrophoneButtonEnabled = enabled => Toolbar.setAudioIconEnabled(enabled);
 
 UI.showRingOverlay = function () {
     RingOverlay.show(APP.tokenData.callee, interfaceConfig.DISABLE_RINGING);
@@ -1403,10 +1351,7 @@ UI.hideRingOverLay = function () {
  * @returns {*|boolean} {true} if the overlay is visible, {false} otherwise
  */
 UI.isOverlayVisible = function () {
-    return RingOverlay.isVisible()
-        || SuspendedOverlay.isVisible()
-        || PageReloadOverlay.isVisible()
-        || GumPermissionsOverlay.isVisible();
+    return RingOverlay.isVisible() || this.overlayVisible;
 };
 
 /**
@@ -1414,38 +1359,42 @@ UI.isOverlayVisible = function () {
  *
  * @returns {*|boolean} {true} if the ring overlay is visible, {false} otherwise
  */
-UI.isRingOverlayVisible = function () {
-    return RingOverlay.isVisible();
-};
-
-/**
- * Shows browser-specific overlay with guidance how to proceed with gUM prompt.
- * @param {string} browser - name of browser for which to show the guidance
- *      overlay.
- */
-UI.showUserMediaPermissionsGuidanceOverlay = function (browser) {
-    GumPermissionsOverlay.show(browser);
-};
-
-/**
- * Shows suspended overlay with a button to rejoin conference.
- */
-UI.showSuspendedOverlay = function () {
-    SuspendedOverlay.show();
-};
-
-/**
- * Hides browser-specific overlay with guidance how to proceed with gUM prompt.
- */
-UI.hideUserMediaPermissionsGuidanceOverlay = function () {
-    GumPermissionsOverlay.hide();
-};
+UI.isRingOverlayVisible = () => RingOverlay.isVisible();
 
 /**
  * Handles user's features changes.
  */
-UI.onUserFeaturesChanged = function (user) {
-    VideoLayout.onUserFeaturesChanged(user);
-};
+UI.onUserFeaturesChanged = user => VideoLayout.onUserFeaturesChanged(user);
+
+const UIListeners = new Map([
+    [
+        UIEvents.ETHERPAD_CLICKED,
+        () => etherpadManager && etherpadManager.toggleEtherpad()
+    ], [
+        UIEvents.SHARED_VIDEO_CLICKED,
+        () => sharedVideoManager && sharedVideoManager.toggleSharedVideo()
+    ], [
+        UIEvents.TOGGLE_FULLSCREEN,
+        UI.toggleFullScreen
+    ], [
+        UIEvents.TOGGLE_CHAT,
+        UI.toggleChat
+    ], [
+        UIEvents.TOGGLE_SETTINGS,
+        () => UI.toggleSidePanel("settings_container")
+    ], [
+        UIEvents.TOGGLE_CONTACT_LIST,
+        UI.toggleContactList
+    ], [
+        UIEvents.TOGGLE_PROFILE,
+        () => APP.tokenData.isGuest && UI.toggleSidePanel("profile_container")
+    ], [
+        UIEvents.TOGGLE_FILM_STRIP,
+        UI.handleToggleFilmStrip
+    ], [
+        UIEvents.FOLLOW_ME_ENABLED,
+        enabled => (followMeHandler && followMeHandler.enableFollowMe(enabled))
+    ]
+]);
 
 module.exports = UI;

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -1,90 +0,0 @@
-/* global interfaceConfig */
-
-import Overlay from '../overlay/Overlay';
-
-/**
- * An overlay with guidance how to proceed with gUM prompt.
- */
-class GUMOverlayImpl extends Overlay {
-
-    /**
-     * Constructs overlay with guidance how to proceed with gUM prompt.
-     * @param {string} browser - name of browser for which to construct the
-     *     guidance overlay.
-     * @override
-     */
-    constructor(browser) {
-        super();
-        this.browser = browser;
-    }
-
-    /**
-     * @inheritDoc
-     */
-    _buildOverlayContent() {
-        let textKey = `userMedia.${this.browser}GrantPermissions`;
-        let titleKey = 'startupoverlay.title';
-        let titleOptions = '{ "postProcess": "resolveAppName" }';
-        let policyTextKey = 'startupoverlay.policyText';
-        let policyLogo = '';
-        let policyLogoSrc = interfaceConfig.POLICY_LOGO;
-        if (policyLogoSrc) {
-            policyLogo += (
-                `<div class="policy__logo">
-                    <img src="${policyLogoSrc}"/>
-                </div>`
-            );
-        }
-
-        return (
-            `<div class="inlay">
-                <span class="inlay__icon icon-microphone"></span>
-                <span class="inlay__icon icon-camera"></span>
-                <h3 class="inlay__title" data-i18n="${titleKey}"
-                    data-i18n-options='${titleOptions}'></h3>
-                <span class='inlay__text'data-i18n='[html]${textKey}'></span>
-            </div>
-            <div class="policy overlay__policy">
-                <p class="policy__text" data-i18n="[html]${policyTextKey}"></p>
-                ${policyLogo}
-            </div>`
-        );
-    }
-}
-
-/**
- * Stores GUM overlay instance.
- * @type {GUMOverlayImpl}
- */
-let overlay;
-
-export default {
-    /**
-     * Checks whether the overlay is currently visible.
-     * @return {boolean} <tt>true</tt> if the overlay is visible
-     * or <tt>false</tt> otherwise.
-     */
-    isVisible () {
-        return overlay && overlay.isVisible();
-    },
-    /**
-     * Shows browser-specific overlay with guidance how to proceed with
-     * gUM prompt.
-     * @param {string} browser - name of browser for which to show the
-     *      guidance overlay.
-     */
-    show(browser) {
-        if (!overlay) {
-            overlay = new GUMOverlayImpl(browser);
-        }
-        overlay.show();
-    },
-
-    /**
-     * Hides browser-specific overlay with guidance how to proceed with
-     * gUM prompt.
-     */
-    hide() {
-        overlay && overlay.hide();
-    }
-};

modules/UI/overlay/Overlay.js

@@ -1,94 +0,0 @@
-/* global $, APP */
-
-/**
- * Base class for overlay components - the components which are displayed on
- * top of the application with semi-transparent background covering the whole
- * screen.
- */
-export default class Overlay{
-    /**
-     * Creates new <tt>Overlay</tt> instance.
-     */
-    constructor() {
-        /**
-         *
-         * @type {jQuery}
-         */
-        this.$overlay = null;
-
-        /**
-         * Indicates if this overlay should use the light look & feel or the
-         * standard one.
-         * @type {boolean}
-         */
-        this.isLightOverlay = false;
-    }
-    /**
-     * Template method which should be used by subclasses to provide the overlay
-     * content. The contents provided by this method are later subject to
-     * the translation using {@link APP.translation.translateElement}.
-     * @return {string} HTML representation of the overlay dialog contents.
-     * @protected
-     */
-    _buildOverlayContent() {
-        return '';
-    }
-    /**
-     * Constructs the HTML body of the overlay dialog.
-     *
-     * @private
-     */
-    _buildOverlayHtml() {
-
-        let overlayContent = this._buildOverlayContent();
-
-        let containerClass = this.isLightOverlay    ? "overlay__container-light"
-                                                    : "overlay__container";
-
-        this.$overlay = $(`
-            <div class=${containerClass}>
-                <div class='overlay__content'>
-                    ${overlayContent}
-                </div>
-            </div>`);
-
-        APP.translation.translateElement(this.$overlay);
-    }
-    /**
-     * Checks whether the page reload overlay has been displayed.
-     * @return {boolean} <tt>true</tt> if the page reload overlay is currently
-     * visible or <tt>false</tt> otherwise.
-     */
-    isVisible() {
-        return this.$overlay && this.$overlay.parents('body').length > 0;
-    }
-    /**
-     * Template method called just after the overlay is displayed for the first
-     * time.
-     * @protected
-     */
-    _onShow() {
-        // To be overridden by subclasses.
-    }
-    /**
-     * Shows the overlay dialog and attaches the underlying HTML representation
-     * to the DOM.
-     */
-    show() {
-
-        !this.$overlay && this._buildOverlayHtml();
-
-        if (!this.isVisible()) {
-            this.$overlay.appendTo('body');
-            this._onShow();
-        }
-    }
-
-    /**
-     * Hides the overlay dialog and detaches it's HTML representation from
-     * the DOM.
-     */
-    hide() {
-        this.$overlay && this.$overlay.detach();
-    }
-}

modules/UI/recording/Recording.js

@@ -51,6 +51,9 @@ function _requestLiveStreamId() {
     const streamIdRequired
         = APP.translation.generateTranslationHTML(
             "liveStreaming.streamIdRequired");
+    const streamIdHelp
+        = APP.translation.generateTranslationHTML(
+            "liveStreaming.streamIdHelp");
 
     return new Promise(function (resolve, reject) {
         dialog = APP.UI.messageHandler.openDialogWithStates({
@@ -60,7 +63,11 @@ function _requestLiveStreamId() {
                     `<input  class="input-control"
                     name="streamId" type="text"
                     data-i18n="[placeholder]dialog.streamKey"
-                    autofocus>`,
+                    autofocus><div style="text-align: right">
+                    <a class="helper-link" target="_new" 
+                    href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">`
+                        + streamIdHelp
+                        + `</a></div>`,
                 persistent: false,
                 buttons: [
                     {title: cancelButton, value: false},

modules/UI/reload_overlay/PageReloadOverlay.js

@@ -1,175 +0,0 @@
-/* global $, APP, AJS */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
-
-import Overlay from "../overlay/Overlay";
-
-/**
- * An overlay dialog which is shown before the conference is reloaded. Shows
- * a warning message and counts down towards the reload.
- */
-class PageReloadOverlayImpl extends Overlay{
-    /**
-     * Creates new <tt>PageReloadOverlayImpl</tt>
-     * @param {number} timeoutSeconds how long the overlay dialog will be
-     * displayed, before the conference will be reloaded.
-     * @param {string} title the title of the overlay message
-     * @param {string} message the message of the overlay
-     * @param {string} buttonHtml the button html or an empty string if there's
-     * no button
-     * @param {boolean} isLightOverlay indicates if the overlay should be a
-     * light overlay or a standard one
-     */
-    constructor(timeoutSeconds, title, message, buttonHtml, isLightOverlay) {
-        super();
-        /**
-         * Conference reload counter in seconds.
-         * @type {number}
-         */
-        this.timeLeft = timeoutSeconds;
-        /**
-         * Conference reload timeout in seconds.
-         * @type {number}
-         */
-        this.timeout = timeoutSeconds;
-
-        this.title = title;
-        this.message = message;
-        this.buttonHtml = buttonHtml;
-        this.isLightOverlay = isLightOverlay;
-    }
-    /**
-     * Constructs overlay body with the warning message and count down towards
-     * the conference reload.
-     * @override
-     */
-    _buildOverlayContent() {
-        return `<div class="inlay">
-                    <span data-i18n=${this.title}
-                          class='reload_overlay_title'></span>
-                    <span data-i18n=${this.message}
-                          class='reload_overlay_msg'></span>
-                    <div>
-                        <div id='reloadProgressBar'
-                            class="aui-progress-indicator">
-                            <span class="aui-progress-indicator-value"></span>
-                        </div>
-                        <span id='reloadSecRemaining'
-                              data-i18n="dialog.conferenceReloadTimeLeft"
-                            class='reload_overlay_msg'>
-                        </span>
-                    </div>
-                    ${this.buttonHtml}
-                </div>`;
-    }
-
-    /**
-     * Updates the progress indicator position and the label with the time left.
-     */
-    updateDisplay() {
-
-        APP.translation.translateElement(
-            $("#reloadSecRemaining"), { seconds: this.timeLeft });
-
-        const ratio = (this.timeout - this.timeLeft) / this.timeout;
-        AJS.progressBars.update("#reloadProgressBar", ratio);
-    }
-
-    /**
-     * Starts the reload countdown with the animation.
-     * @override
-     */
-    _onShow() {
-        $("#reconnectNow").click(() => {
-            APP.ConferenceUrl.reload();
-        });
-
-        // Initialize displays
-        this.updateDisplay();
-
-        var intervalId = window.setInterval(function() {
-
-            if (this.timeLeft >= 1) {
-                this.timeLeft -= 1;
-            }
-
-            this.updateDisplay();
-
-            if (this.timeLeft === 0) {
-                window.clearInterval(intervalId);
-                APP.ConferenceUrl.reload();
-            }
-        }.bind(this), 1000);
-
-        logger.info(
-            "The conference will be reloaded after "
-                + this.timeLeft + " seconds.");
-    }
-}
-
-/**
- * Holds the page reload overlay instance.
- *
- * {@type PageReloadOverlayImpl}
- */
-let overlay;
-
-/**
- * Checks whether the page reload overlay has been displayed.
- * @return {boolean} <tt>true</tt> if the page reload overlay is currently
- * visible or <tt>false</tt> otherwise.
- */
-export function isVisible() {
-        return overlay && overlay.isVisible();
-}
-
-/**
- * Shows the page reload overlay which will do the conference reload after
- * the given amount of time.
- *
- * @param {number} timeoutSeconds how many seconds before the conference
- * reload will happen.
- * @param {boolean} isNetworkFailure <tt>true</tt> indicates that it's
- * caused by network related failure or <tt>false</tt> when it's
- * the infrastructure.
- * @param {string} reason a label string identifying the reason for the page
- * reload which will be included in details of the log event
- */
-export function show(timeoutSeconds, isNetworkFailure, reason) {
-    let title;
-    let message;
-    let buttonHtml;
-    let isLightOverlay;
-
-    if (isNetworkFailure) {
-        title = "dialog.conferenceDisconnectTitle";
-        message = "dialog.conferenceDisconnectMsg";
-        buttonHtml
-            = `<button id="reconnectNow" data-i18n="dialog.reconnectNow"
-                    class="button-control button-control_primary
-                            button-control_center"></button>`;
-        isLightOverlay = true;
-    }
-    else {
-        title = "dialog.conferenceReloadTitle";
-        message = "dialog.conferenceReloadMsg";
-        buttonHtml = "";
-        isLightOverlay = false;
-    }
-
-    if (!overlay) {
-        overlay = new PageReloadOverlayImpl(timeoutSeconds,
-                                            title,
-                                            message,
-                                            buttonHtml,
-                                            isLightOverlay);
-    }
-    // Log the page reload event
-    if (!this.isVisible()) {
-        // FIXME (CallStats - issue) this event will not make it to
-        // the CallStats, because the log queue is not flushed, before
-        // "fabric terminated" is sent to the backed
-        APP.conference.logEvent(
-            'page.reload', undefined /* value */, reason /* label */);
-    }
-    overlay.show();
-}

modules/UI/shared_video/SharedVideo.js

@@ -541,7 +541,7 @@ export default class SharedVideoManager {
         if(show)
             this.showSharedVideoMutedPopup(false);
 
-        UIUtil.animateShowElement($("#micMutedPopup"), show, 5000);
+        APP.UI.showCustomToolbarPopup('#micMutedPopup', show, 5000);
     }
 
     /**
@@ -554,7 +554,7 @@ export default class SharedVideoManager {
         if(show)
             this.showMicMutedPopup(false);
 
-        UIUtil.animateShowElement($("#sharedVideoMutedPopup"), show, 5000);
+        APP.UI.showCustomToolbarPopup('#sharedVideoMutedPopup', show, 5000);
     }
 }
 

modules/UI/side_pannels/chat/Chat.js

@@ -164,9 +164,7 @@ function resizeChatConversation() {
  * @param id {string} input id
  */
 function deferredFocus(id){
-    setTimeout(function (){
-        $(`#${id}`).focus();
-    }, 400);
+    setTimeout(() => $(`#${id}`).focus(), 400);
 }
 /**
  * Chat related user interface.
@@ -353,10 +351,17 @@ var Chat = {
      * Scrolls chat to the bottom.
      */
     scrollChatToBottom () {
-        setTimeout(function () {
-            $('#chatconversation').scrollTop(
-                $('#chatconversation')[0].scrollHeight);
-        }, 5);
+        setTimeout(
+            () => {
+                const chatconversation = $('#chatconversation');
+
+                // XXX Prevent TypeError: undefined is not an object when the
+                // Web browser does not support WebRTC (yet).
+                chatconversation.length > 0
+                    && chatconversation.scrollTop(
+                            chatconversation[0].scrollHeight);
+            },
+            5);
     }
 };
 

modules/UI/side_pannels/settings/SettingsMenu.js

@@ -1,8 +1,9 @@
 /* global $, APP, AJS, interfaceConfig, JitsiMeetJS */
 
+import { LANGUAGES } from "../../../../react/features/base/i18n";
+
 import UIUtil from "../../util/UIUtil";
 import UIEvents from "../../../../service/UI/UIEvents";
-import languages from "../../../../service/translation/languages";
 import Settings from '../../../settings/Settings';
 
 const sidePanelsContainerId = 'sideToolbarContainer';
@@ -145,7 +146,7 @@ export default {
             let selectInput;
 
             selectEl.html(generateLanguagesOptions(
-                languages.getLanguages(),
+                LANGUAGES,
                 APP.translation.getCurrentLanguage()
             ));
             initSelect2(selectEl, () => {

modules/UI/suspended_overlay/SuspendedOverlay.js

@@ -1,63 +0,0 @@
-/* global $, APP */
-
-import Overlay from '../overlay/Overlay';
-
-/**
- * An overlay dialog which is shown when a suspended event is detected.
- */
-class SuspendedOverlayImpl extends Overlay{
-    /**
-     * Creates new <tt>SuspendedOverlayImpl</tt>
-     */
-    constructor() {
-        super();
-
-        $(document).on('click', '#rejoin', () => {
-            APP.ConferenceUrl.reload();
-        });
-    }
-    /**
-     * Constructs overlay body with the message and a button to rejoin.
-     * @override
-     */
-    _buildOverlayContent() {
-        return (
-        `<div class="inlay">
-            <span class="inlay__icon icon-microphone"></span>
-            <span class="inlay__icon icon-camera"></span>
-            <h3 class="inlay__title" data-i18n="suspendedoverlay.title"></h3>
-            <button id="rejoin" 
-                 data-i18n="suspendedoverlay.rejoinKeyTitle" 
-                 class="inlay__button button-control button-control_primary">
-            </button>
-        </div>`);
-    }
-}
-
-/**
- * Holds the page suspended overlay instance.
- *
- * {@type SuspendedOverlayImpl}
- */
-let overlay;
-
-export default {
-    /**
-     * Checks whether the page suspended overlay has been displayed.
-     * @return {boolean} <tt>true</tt> if the page suspended overlay is
-     * currently visible or <tt>false</tt> otherwise.
-     */
-    isVisible() {
-        return overlay && overlay.isVisible();
-    },
-    /**
-     * Shows the page suspended overlay.
-     */
-    show() {
-
-        if (!overlay) {
-            overlay = new SuspendedOverlayImpl();
-        }
-        overlay.show();
-    }
-};

modules/UI/toolbars/Toolbar.js

@@ -1,4 +1,4 @@
-/* global APP, $, config, interfaceConfig, JitsiMeetJS */
+/* global AJS, APP, $, config, interfaceConfig, JitsiMeetJS */
 import UIUtil from '../util/UIUtil';
 import UIEvents from '../../../service/UI/UIEvents';
 import SideContainerToggler from "../side_pannels/SideContainerToggler";
@@ -26,8 +26,8 @@ const buttonHandlers = {
             if (sharedVideoManager
                 && sharedVideoManager.isSharedVideoVolumeOn()
                 && !sharedVideoManager.isSharedVideoOwner()) {
-                UIUtil.animateShowElement(
-                    $("#unableToUnmutePopup"), true, 5000);
+                APP.UI.showCustomToolbarPopup(
+                    '#unableToUnmutePopup', true, 5000);
             }
             else {
                 JitsiMeetJS.analytics.sendEvent('toolbar.audio.unmuted');
@@ -120,19 +120,19 @@ const defaultToolbarButtons = {
         shortcutDescription: "keyboardShortcuts.mute",
         popups: [
             {
-                id: "micMutedPopup",
-                className: "loginmenu",
-                dataAttr: "[html]toolbar.micMutedPopup"
+                id: 'micMutedPopup',
+                className: 'loginmenu',
+                dataAttr: '[title]toolbar.micMutedPopup'
             },
             {
-                id: "unableToUnmutePopup",
-                className: "loginmenu",
-                dataAttr: "[html]toolbar.unableToUnmutePopup"
+                id: 'unableToUnmutePopup',
+                className: 'loginmenu',
+                dataAttr: '[title]toolbar.unableToUnmutePopup'
             },
             {
-                id: "talkWhileMutedPopup",
-                className: "loginmenu",
-                dataAttr: "[html]toolbar.talkWhileMutedPopup"
+                id: 'talkWhileMutedPopup',
+                className: 'loginmenu',
+                dataAttr: '[title]toolbar.talkWhileMutedPopup'
             }
         ],
         content: "Mute / Unmute",
@@ -263,11 +263,14 @@ const defaultToolbarButtons = {
         id: 'toolbar_button_sharedvideo',
         tooltipKey: 'toolbar.sharedvideo',
         className: 'button icon-shared-video',
-        html: `<ul id="sharedVideoMutedPopup" 
-                   class="loginmenu extendedToolbarPopup">
-                   <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
-               </ul>
-`
+        popups: [
+            {
+                id: 'sharedVideoMutedPopup',
+                className: 'loginmenu extendedToolbarPopup',
+                dataAttr: '[title]toolbar.sharedVideoMutedPopup',
+                dataAttrPosition: 'w'
+            }
+        ]
     },
     'sip': {
         id: 'toolbar_button_sip',
@@ -325,6 +328,39 @@ function getToolbarButtonPlace (btn) {
         'extended';
 }
 
+/**
+ * Event handler for side toolbar container toggled event.
+ *
+ * @param {string} containerId - ID of the container.
+ * @param {boolean} isVisible - Flag showing whether container
+ * is visible.
+ * @returns {void}
+ */
+function onSideToolbarContainerToggled(containerId, isVisible) {
+    Toolbar._handleSideToolbarContainerToggled(containerId, isVisible);
+}
+
+/**
+ * Event handler for local raise hand changed event.
+ *
+ * @param {boolean} isRaisedHand - Flag showing whether hand is raised.
+ * @returns {void}
+ */
+function onLocalRaiseHandChanged(isRaisedHand) {
+    Toolbar._setToggledState("toolbar_button_raisehand", isRaisedHand);
+}
+
+/**
+ * Event handler for full screen toggled event.
+ *
+ * @param {boolean} isFullScreen - Flag showing whether app in full
+ * screen mode.
+ * @returns {void}
+ */
+function onFullScreenToggled(isFullScreen) {
+    Toolbar._handleFullScreenToggled(isFullScreen);
+}
+
 Toolbar = {
     init (eventEmitter) {
         emitter = eventEmitter;
@@ -333,6 +369,9 @@ Toolbar = {
         this.toolbarSelector = $("#mainToolbarContainer");
         this.extendedToolbarSelector = $("#extendedToolbar");
 
+        // Unregister listeners in case of reinitialization.
+        this.unregisterListeners();
+
         // Initialise the toolbar buttons.
         // The main toolbar will only take into account
         // it's own configuration from interface_config.
@@ -342,20 +381,11 @@ Toolbar = {
 
         this._setButtonHandlers();
 
-        APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
-            (containerId, isVisible) => {
-                Toolbar._handleSideToolbarContainerToggled( containerId,
-                                                            isVisible);
-            });
+        this.registerListeners();
 
-        APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
-            (isRaisedHand) => {
-                this._setToggledState("toolbar_button_raisehand", isRaisedHand);
-            });
-
-        APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED,
-            (isFullScreen) => {
-                Toolbar._handleFullScreenToggled(isFullScreen);
+        APP.UI.addListener(UIEvents.SHOW_CUSTOM_TOOLBAR_BUTTON_POPUP,
+            (popupID, show, timeout) => {
+                Toolbar._showCustomToolbarPopup(popupID, show, timeout);
             });
 
         if(!APP.tokenData.isGuest) {
@@ -364,6 +394,35 @@ Toolbar = {
                 document.getElementById('toolbar_button_profile'));
         }
     },
+    /**
+     *  Register listeners for UI events of toolbar component.
+     *
+     *  @returns {void}
+     */
+    registerListeners() {
+        APP.UI.addListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            onSideToolbarContainerToggled);
+
+        APP.UI.addListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
+            onLocalRaiseHandChanged);
+
+        APP.UI.addListener(UIEvents.FULLSCREEN_TOGGLED, onFullScreenToggled);
+    },
+    /**
+     *  Unregisters handlers for UI events of Toolbar component.
+     *
+     *  @returns {void}
+     */
+    unregisterListeners() {
+        APP.UI.removeListener(UIEvents.SIDE_TOOLBAR_CONTAINER_TOGGLED,
+            onSideToolbarContainerToggled);
+
+        APP.UI.removeListener(UIEvents.LOCAL_RAISE_HAND_CHANGED,
+            onLocalRaiseHandChanged);
+
+        APP.UI.removeListener(UIEvents.FULLSCREEN_TOGGLED,
+            onFullScreenToggled);
+    },
     /**
      * Enables / disables the toolbar.
      * @param {e} set to {true} to enable the toolbar or {false}
@@ -724,17 +783,52 @@ Toolbar = {
 
     _addPopups(buttonElement, popups = []) {
         popups.forEach((popup) => {
-            let popupElement = document.createElement("ul");
+            const popupElement = document.createElement('div');
             popupElement.id = popup.id;
             popupElement.className = popup.className;
-            let liElement = document.createElement("li");
-            liElement.setAttribute("data-i18n", popup.dataAttr);
-            popupElement.appendChild(liElement);
+            popupElement.setAttribute('data-i18n', popup.dataAttr);
+
+            let gravity = 'n';
+            if (popup.dataAttrPosition)
+                gravity = popup.dataAttrPosition;
+            // use custom attribute to save gravity option
+            // we use 'data-tooltip' in UIUtil to activate all tooltips
+            // but we want these to be manually triggered
+            popupElement.setAttribute('tooltip-gravity', gravity);
+
+            APP.translation.translateElement($(popupElement));
+
             buttonElement.appendChild(popupElement);
         });
     },
 
     /**
+     * Show custom popup/tooltip for a specified button.
+     * @param popupSelectorID the selector id of the popup to show
+     * @param show true or false/show or hide the popup
+     * @param timeout the time to show the popup
+     */
+    _showCustomToolbarPopup(popupSelectorID, show, timeout) {
+
+        const gravity = $(popupSelectorID).attr('tooltip-gravity');
+        AJS.$(popupSelectorID)
+            .tooltip({
+                trigger: 'manual',
+                html: true,
+                gravity: gravity,
+                title: 'title'});
+        if (show) {
+            AJS.$(popupSelectorID).tooltip('show');
+            setTimeout(function () {
+                // hide the tooltip
+                AJS.$(popupSelectorID).tooltip('hide');
+            }, timeout);
+        } else {
+            AJS.$(popupSelectorID).tooltip('hide');
+        }
+    },
+
+/**
      * Sets the toggled state of the given element depending on the isToggled
      * parameter.
      *

modules/UI/videolayout/RemoteVideo.js

@@ -28,6 +28,7 @@ function RemoteVideo(user, VideoLayout, emitter) {
     this.emitter = emitter;
     this.videoSpanId = `participant_${this.id}`;
     SmallVideo.call(this, VideoLayout);
+    this._audioStreamElement = null;
     this.hasRemoteVideoMenu = false;
     this._supportsRemoteControl = false;
     this.addRemoteVideoContainer();
@@ -200,6 +201,18 @@ RemoteVideo.prototype._generatePopupContent = function () {
         popupmenuElement.appendChild(menuItem);
     });
 
+    // feature check for volume setting as temasys objects cannot adjust volume
+    if (this._canSetAudioVolume()) {
+        const volumeScale = 100;
+        const volumeSlider = this._generatePopupMenuSliderItem({
+            handler: this._setAudioVolume.bind(this, volumeScale),
+            icon: 'icon-volume',
+            initialValue: this._getAudioElement().volume * volumeScale,
+            maxValue: volumeScale
+        });
+        popupmenuElement.appendChild(volumeSlider);
+    }
+
     APP.translation.translateElement($(popupmenuElement));
 
     return popupmenuElement;
@@ -343,6 +356,74 @@ RemoteVideo.prototype._generatePopupMenuItem = function (opts = {}) {
     return menuItem;
 };
 
+/**
+ * Create a div element with a slider.
+ *
+ * @param {object} options - Configuration for the div's display and slider.
+ * @param {string} options.icon - The classname for the icon to display.
+ * @param {int} options.maxValue - The maximum value on the slider. The default
+ * value is 100.
+ * @param {int} options.initialValue - The value the slider should start at.
+ * The default value is 0.
+ * @param {function} options.handler - The callback for slider value changes.
+ * @returns {Element} A div element with a slider.
+ */
+RemoteVideo.prototype._generatePopupMenuSliderItem = function (options) {
+    const template = `<div class='popupmenu__contents'>
+        <span class='popupmenu__icon'>
+            <i class=${options.icon}></i>
+        </span>
+        <input class='popupmenu__slider'
+            type='range'
+            min='0'
+            max=${options.maxValue || 100}
+            value=${options.initialValue || 0}>
+        </input>
+    </div>`;
+
+    const menuItem = document.createElement('li');
+    menuItem.className = 'popupmenu__item';
+    menuItem.innerHTML = template;
+
+    const slider = menuItem.getElementsByClassName('popupmenu__slider')[0];
+    slider.oninput = function () {
+        options.handler(Number(slider.value));
+    };
+
+    return menuItem;
+};
+
+/**
+ * Get the remote participant's audio element.
+ *
+ * @returns {Element} audio element
+ */
+RemoteVideo.prototype._getAudioElement = function () {
+    return this._audioStreamElement;
+};
+
+/**
+ * Check if the remote participant's audio can have its volume adjusted.
+ *
+ * @returns {boolean} true if the volume can be adjusted.
+ */
+RemoteVideo.prototype._canSetAudioVolume = function () {
+    const audioElement = this._getAudioElement();
+    return audioElement && audioElement.volume !== undefined;
+};
+
+/**
+ * Change the remote participant's volume level.
+ *
+ * @param {int} scale - The maximum value the slider can go to.
+ * @param {int} newVal - The value to set the slider to.
+ */
+RemoteVideo.prototype._setAudioVolume = function (scale, newVal) {
+    if (this._canSetAudioVolume()) {
+        this._getAudioElement().volume = newVal / scale;
+    }
+};
+
 /**
  * Updates the remote video menu.
  *
@@ -613,6 +694,10 @@ RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
     }
 
     $(streamElement).click(onClickHandler);
+
+    if (!isVideo) {
+        this._audioStreamElement = streamElement;
+    }
 };
 
 /**

modules/UI/videolayout/VideoContainer.js

@@ -310,6 +310,12 @@ export class VideoContainer extends LargeContainer {
     }
 
     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) {
+            return;
+        }
+
         let [width, height]
             = this.getVideoSize(containerWidth, containerHeight);
         let { horizontalIndent, verticalIndent }

modules/UI/videolayout/VideoLayout.js

@@ -67,6 +67,17 @@ function onContactClicked (id) {
     }
 }
 
+/**
+ * Handler for local flip X changed event.
+ * @param {Object} val
+ */
+function onLocalFlipXChanged (val) {
+    localFlipX = val;
+    if(largeVideo) {
+        largeVideo.onLocalFlipXChange(val);
+    }
+}
+
 /**
  * Returns the corresponding resource id to the given peer container
  * DOM element.
@@ -91,11 +102,10 @@ let largeVideo;
 var VideoLayout = {
     init (emitter) {
         eventEmitter = emitter;
-        eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED, function (val) {
-                localFlipX = val;
-                if(largeVideo)
-                    largeVideo.onLocalFlipXChange(val);
-            });
+
+        // Unregister listeners in case of reinitialization
+        this.unregisterListeners();
+
         localVideoThumbnail = new LocalVideo(VideoLayout, emitter);
         // sets default video type of local video
         // FIXME container type is totally different thing from the video type
@@ -104,8 +114,29 @@ var VideoLayout = {
         // the local video thumb maybe one pixel
         this.resizeThumbnails(false, true);
 
-        emitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
         this.lastNCount = config.channelLastN;
+
+        this.registerListeners();
+    },
+
+    /**
+     * Registering listeners for UI events in Video layout component.
+     *
+     * @returns {void}
+     */
+    registerListeners() {
+        eventEmitter.addListener(UIEvents.LOCAL_FLIPX_CHANGED,
+            onLocalFlipXChanged);
+        eventEmitter.addListener(UIEvents.CONTACT_CLICKED, onContactClicked);
+    },
+
+    /**
+     * Unregistering listeners for UI events in Video layout component.
+     *
+     * @returns {void}
+     */
+    unregisterListeners() {
+        eventEmitter.removeListener(UIEvents.CONTACT_CLICKED, onContactClicked);
     },
 
     initLargeVideo () {

modules/settings/Settings.js

@@ -24,7 +24,6 @@ if (!avatarId) {
 let localFlipX = JSON.parse(jitsiLocalStorage.getItem("localFlipX") || true);
 let displayName = UIUtil.unescapeHtml(
     jitsiLocalStorage.getItem("displayname") || '');
-let language = jitsiLocalStorage.getItem("language");
 let cameraDeviceId = jitsiLocalStorage.getItem("cameraDeviceId") || '';
 let micDeviceId = jitsiLocalStorage.getItem("micDeviceId") || '';
 let welcomePageDisabled = JSON.parse(
@@ -113,14 +112,6 @@ export default {
         return avatarUrl;
     },
 
-    getLanguage () {
-        return language;
-    },
-    setLanguage: function (lang) {
-        language = lang;
-        jitsiLocalStorage.setItem("language", lang);
-    },
-
     /**
      * Sets new flipX state of local video and saves it to the local storage.
      * @param {string} val flipX state of local video

modules/translation/translation.js

@@ -1,108 +1,56 @@
-/* global $, require, config, interfaceConfig */
-import i18n from 'i18next';
-import XHR from 'i18next-xhr-backend';
+/* @flow */
+
 import jqueryI18next from 'jquery-i18next';
-import languagesR from "../../lang/languages.json";
-import mainR from "../../lang/main.json";
-import languages from "../../service/translation/languages";
 
-const DEFAULT_LANG = languages.EN;
+import { DEFAULT_LANGUAGE, i18next } from '../../react/features/base/i18n';
 
-const defaultOptions = {
-    compatibilityAPI: 'v1',
-    compatibilityJSON: 'v1',
-    fallbackLng: DEFAULT_LANG,
-    load: "unspecific",
-    resGetPath: 'lang/__ns__-__lng__.json',
-    ns: {
-        namespaces: ['main', 'languages'],
-        defaultNs: 'main'
-    },
-    lngWhitelist : languages.getLanguages(),
-    fallbackOnNull: true,
-    fallbackOnEmpty: true,
-    useDataAttrOptions: true,
-    app: interfaceConfig.APP_NAME
-};
+declare var $: Function;
 
-function initCompleted() {
-    $("[data-i18n]").localize();
-}
-
-function getLangFromQuery() {
-    var query = window.location.search.substring(1);
-    var vars = query.split("&");
-    for (var i=0;i<vars.length;i++) {
-        var pair = vars[i].split("=");
-        if(pair[0] == "lang")
-        {
-            return pair[1];
-        }
-    }
-    return null;
+/**
+ * Notifies that the {@link i18next} instance has finished its initialization.
+ *
+ * @returns {void}
+ * @private
+ */
+function _onI18nInitialized() {
+    $('[data-i18n]').localize();
 }
 
 class Translation {
-    init (settingsLang) {
-        let options = defaultOptions;
-
-        let lang = getLangFromQuery() || settingsLang || config.defaultLanguage;
-        // XXX If none of the above has been set then the 'lang' will be
-        // 'undefined' and the i18n lib will try to auto detect user's
-        // preferred language based on browser's locale.
-        // The interface config option allows to disable this auto detection
-        // by specifying the fallback language in that case.
-        let langDetection = interfaceConfig.LANG_DETECTION;
-
-        if (!langDetection && !lang) {
-            lang = DEFAULT_LANG;
-        }
-
-        if (lang) {
-            options.lng = lang;
-        }
-
-        i18n.use(XHR)
-            .use({
-                type: 'postProcessor',
-                name: "resolveAppName",
-                process: (res, key) => {
-                    return i18n.t(key, {app: options.app});
-                }
-            })
-            .init(options, initCompleted);
-        // adds default language which is preloaded from code
-        i18n.addResourceBundle(DEFAULT_LANG, 'main', mainR, true, true);
-        i18n.addResourceBundle(
-            DEFAULT_LANG, 'languages', languagesR, true, true);
-        jqueryI18next.init(i18n, $, {useOptionsAttr: true});
+    addLanguageChangedListener(listener: Function) {
+        i18next.on('languageChanged', listener);
     }
 
-    setLanguage (lang) {
-        if(!lang)
-            lang = DEFAULT_LANG;
-        i18n.setLng(lang, defaultOptions, initCompleted);
-    }
+    generateTranslationHTML(key: string, options: Object) {
+        const optAttr
+            = options ? ` data-i18n-options='${JSON.stringify(options)}'` : '';
 
-    getCurrentLanguage () {
-        return i18n.lng();
-    }
+        // XXX i18next expects undefined if options are missing.
+        const text = i18next.t(key, options ? options : undefined);
 
-    translateElement (selector, options) {
-        // i18next expects undefined if options are missing, check if its null
-        selector.localize(
-            options === null ? undefined : options);
-    }
-
-    generateTranslationHTML (key, options) {
-        let optAttr = options
-            ? ` data-i18n-options='${JSON.stringify(options)}'` : "";
-        let text = i18n.t(key, options === null ? undefined : options);
         return `<span data-i18n="${key}"${optAttr}>${text}</span>`;
     }
 
-    addLanguageChangedListener(listener) {
-        i18n.on('languageChanged', listener);
+    getCurrentLanguage() {
+        return i18next.lng();
+    }
+
+    init() {
+        if (i18next.isInitialized)
+            _onI18nInitialized();
+        else
+            i18next.on('initialized', _onI18nInitialized);
+
+        jqueryI18next.init(i18next, $, { useOptionsAttr: true });
+    }
+
+    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);
     }
 }
 

package.json

@@ -20,8 +20,9 @@
     "async": "0.9.0",
     "autosize": "^1.18.13",
     "bootstrap": "3.1.1",
-    "i18next": "3.4.4",
-    "i18next-xhr-backend": "1.1.0",
+    "i18next": "7.0.0",
+    "i18next-browser-languagedetector": "1.0.1",
+    "i18next-xhr-backend": "1.3.0",
     "jitsi-meet-logger": "jitsi/jitsi-meet-logger",
     "jquery": "~2.1.1",
     "jquery-contextmenu": "*",
@@ -34,9 +35,12 @@
     "postis": "^2.2.0",
     "react": "15.4.2",
     "react-dom": "15.4.2",
+    "react-i18next": "2.2.0",
     "react-native": "0.41.2",
+    "react-native-background-timer": "1.0.0",
     "react-native-immersive": "0.0.4",
     "react-native-keep-awake": "^2.0.2",
+    "react-native-locale-detector": "1.0.1",
     "react-native-prompt": "^1.0.0",
     "react-native-vector-icons": "^4.0.0",
     "react-native-webrtc": "jitsi/react-native-webrtc",
@@ -66,7 +70,7 @@
     "eslint-plugin-jsdoc": "*",
     "eslint-plugin-react": "*",
     "eslint-plugin-react-native": "^2.2.1",
-    "expose-loader": "*",
+    "expose-loader": "0.7.1",
     "file-loader": "^0.10.0",
     "flow-bin": "^0.37.0",
     "haste-resolver-webpack-plugin": "^0.2.2",

react/features/app/actions.js

@@ -8,7 +8,6 @@ import {
     _parseURIString,
     init
 } from './functions';
-import './reducer';
 
 /**
  * Temporary solution. Should dispatch actions related to initial settings of
@@ -25,16 +24,27 @@ export function appInit() {
  * Triggers an in-app navigation to a different route. Allows navigation to be
  * abstracted between the mobile and web versions.
  *
- * @param {(string|undefined)} urlOrRoom - The URL or room name to which to
- * navigate.
+ * @param {(string|undefined)} uri - The URI to which to navigate. It may be a
+ * full URL with an http(s) scheme, a full or partial URI with the app-specific
+ * sheme, or a mere room name.
  * @returns {Function}
  */
-export function appNavigate(urlOrRoom) {
+export function appNavigate(uri) {
     return (dispatch, getState) => {
         const state = getState();
         const oldDomain = getDomain(state);
 
-        const { domain, room } = _parseURIString(urlOrRoom);
+        // eslint-disable-next-line prefer-const
+        let { domain, room } = _parseURIString(uri);
+
+        // If the specified URI does not identify a domain, use the app's
+        // default.
+        if (typeof domain === 'undefined') {
+            domain
+                = _parseURIString(state['features/app'].app._getDefaultURL())
+                    .domain;
+
+        }
 
         // TODO Kostiantyn Tsaregradskyi: We should probably detect if user is
         // currently in a conference and ask her if she wants to close the
@@ -49,7 +59,7 @@ export function appNavigate(urlOrRoom) {
             dispatch(setDomain(domain));
 
             // If domain has changed, we need to load the config of the new
-            // domain and set it, and only after that we can navigate to
+            // domain and set it, and only after that we can navigate to a
             // different route.
             loadConfig(`https://${domain}`)
                 .then(
@@ -93,7 +103,7 @@ export function appNavigate(urlOrRoom) {
             dispatch(
                 _setRoomAndNavigate(
                     typeof room === 'undefined' && typeof domain === 'undefined'
-                        ? urlOrRoom
+                        ? uri
                         : room));
         }
     };

react/features/app/components/AbstractApp.js

@@ -1,8 +1,12 @@
+/* global APP */
+
 import React, { Component } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
 import Thunk from 'redux-thunk';
 
+import { i18next } from '../../base/i18n';
 import {
     localParticipantJoined,
     localParticipantLeft
@@ -76,7 +80,9 @@ export class AbstractApp extends Component {
 
         dispatch(localParticipantJoined());
 
-        this._openURL(this._getDefaultURL());
+        // If a URL was explicitly specified to this React Component, then open
+        // it; otherwise, use a default.
+        this._openURL(this.props.url || this._getDefaultURL());
     }
 
     /**
@@ -130,11 +136,13 @@ export class AbstractApp extends Component {
 
         if (route) {
             return (
-                <Provider store = { this._getStore() }>
-                    {
-                        this._createElement(route.component)
-                    }
-                </Provider>
+                <I18nextProvider i18n = { i18next }>
+                    <Provider store = { this._getStore() }>
+                        {
+                            this._createElement(route.component)
+                        }
+                    </Provider>
+                </I18nextProvider>
             );
         }
 
@@ -211,27 +219,20 @@ export class AbstractApp extends Component {
     /**
      * Gets the default URL to be opened when this App mounts.
      *
-     * @private
+     * @protected
      * @returns {string} The default URL to be opened when this App mounts.
      */
     _getDefaultURL() {
-        // If the URL was explicitly specified to the React Component, then open
-        // it.
-        let url = this.props.url;
-
-        if (url) {
-            return url;
-        }
-
         // If the execution environment provides a Location abstraction, then
         // this App at already at that location but it must be made aware of the
         // fact.
         const windowLocation = this._getWindowLocation();
 
         if (windowLocation) {
-            url = windowLocation.toString();
-            if (url) {
-                return url;
+            const href = windowLocation.toString();
+
+            if (href) {
+                return href;
             }
         }
 
@@ -305,6 +306,14 @@ export class AbstractApp extends Component {
 
         if (typeof store === 'undefined') {
             store = this._createStore();
+
+            // This is temporary workaround to be able to dispatch actions from
+            // non-reactified parts of the code (conference.js for example).
+            // Don't use in the react code!!!
+            // FIXME: remove when the reactification is finished!
+            if (typeof APP !== 'undefined') {
+                APP.store = store;
+            }
         }
 
         return store;

react/features/app/components/App.native.js

@@ -2,8 +2,9 @@
 
 import { Linking } from 'react-native';
 
-import { Platform } from '../../base/react';
 import '../../audio-mode';
+import '../../background';
+import { Platform } from '../../base/react';
 import '../../full-screen';
 import '../../wake-lock';
 

react/features/app/functions.native.js

@@ -126,7 +126,7 @@ function _getRoomAndDomainFromURLObject(url) {
     let room;
 
     if (url) {
-        domain = url.hostname;
+        domain = url.host;
 
         // The room (name) is the last component of pathname.
         room = url.pathname;

react/features/app/functions.web.js

@@ -1,6 +1,7 @@
-/* global APP, JitsiMeetJS, loggingConfig */
+/* global APP, loggingConfig */
 
 import { isRoomValid } from '../base/conference';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
 import { RouteRegistry } from '../base/react';
 import { interceptComponent } from '../base/util';
 import { Conference } from '../conference';
@@ -9,7 +10,6 @@ import { WelcomePage } from '../welcome';
 import URLProcessor from '../../../modules/config/URLProcessor';
 import KeyboardShortcut
     from '../../../modules/keyboardshortcut/keyboardshortcut';
-import settings from '../../../modules/settings/Settings';
 import getTokenData from '../../../modules/tokendata/TokenData';
 import JitsiMeetLogStorage from '../../../modules/util/JitsiMeetLogStorage';
 
@@ -61,7 +61,7 @@ export function init() {
     // with jitsi meet.
     APP.API.init(APP.tokenData.jwt ? { forceEnable: true } : undefined);
 
-    APP.translation.init(settings.getLanguage());
+    APP.translation.init();
 }
 
 /**

react/features/app/index.js

@@ -2,3 +2,5 @@ export * from './actions';
 export * from './actionTypes';
 export * from './components';
 export * from './functions';
+
+import './reducer';

react/features/background/actionTypes.js

@@ -0,0 +1,43 @@
+import { Symbol } from '../base/react';
+
+/**
+ * The type of redux action to set the AppState API change event listener.
+ *
+ * {
+ *      type: _SET_APP_STATE_LISTENER,
+ *      listener: Function
+ * }
+ *
+ * @protected
+ */
+export const _SET_APP_STATE_LISTENER
+    = Symbol('_SET_APP_STATE_LISTENER');
+
+/**
+ * The type of redux action which signals that video will be muted because the
+ * app is going to the background.
+ *
+ * {
+ *      type: _SET_BACKGROUND_VIDEO_MUTED,
+ *      muted: boolean
+ * }
+ *
+ * @protected
+ */
+export const _SET_BACKGROUND_VIDEO_MUTED
+    = Symbol('_SET_BACKGROUND_VIDEO_MUTED');
+
+/**
+ * The type of redux action which signals that the app state has changed (in
+ * terms of execution mode). The app state can be one of 'active', 'inactive',
+ * or 'background'.
+ *
+ * {
+ *      type: APP_STATE_CHANGED,
+ *      appState: string
+ * }
+ *
+ * @public
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+export const APP_STATE_CHANGED = Symbol('APP_STATE_CHANGED');

react/features/background/actions.js

@@ -0,0 +1,81 @@
+import { setVideoMuted } from '../base/media';
+
+import {
+    _SET_APP_STATE_LISTENER,
+    _SET_BACKGROUND_VIDEO_MUTED,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+/**
+ * Signals that the App state has changed (in terms of execution state). The
+ * application can be in 3 states: 'active', 'inactive' and 'background'.
+ *
+ * @param {string} appState - The new App state.
+ * @public
+ * @returns {{
+ *      type: APP_STATE_CHANGED,
+ *      appState: string
+ * }}
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+export function appStateChanged(appState: string) {
+    return {
+        type: APP_STATE_CHANGED,
+        appState
+    };
+}
+
+/**
+ * Sets the listener to be used with React Native's AppState API.
+ *
+ * @param {Function} listener - Function to be set as the change event listener.
+ * @protected
+ * @returns {{
+ *     type: _SET_APP_STATE_LISTENER,
+ *     listener: Function
+ * }}
+ */
+export function _setAppStateListener(listener: ?Function) {
+    return {
+        type: _SET_APP_STATE_LISTENER,
+        listener
+    };
+}
+
+/**
+ * Signals that the app should mute video because it's now running in the
+ * background, or unmute it because it came back from the background. If video
+ * was already muted nothing will happen; otherwise, it will be muted. When
+ * coming back from the background the previous state will be restored.
+ *
+ * @param {boolean} muted - True if video should be muted; false, otherwise.
+ * @protected
+ * @returns {Function}
+ */
+export function _setBackgroundVideoMuted(muted: boolean) {
+    return (dispatch, getState) => {
+        if (muted) {
+            const mediaState = getState()['features/base/media'];
+
+            if (mediaState.video.muted) {
+                // Video is already muted, do nothing.
+                return;
+            }
+        } else {
+            const bgState = getState()['features/background'];
+
+            if (!bgState.videoMuted) {
+                // We didn't mute video, do nothing.
+                return;
+            }
+        }
+
+        // Remember that video was muted due to the app going to the background
+        // vs user's choice.
+        dispatch({
+            type: _SET_BACKGROUND_VIDEO_MUTED,
+            muted
+        });
+        dispatch(setVideoMuted(muted));
+    };
+}

react/features/background/index.js

@@ -0,0 +1,5 @@
+export * from './actions';
+export * from './actionTypes';
+
+import './middleware';
+import './reducer';

react/features/background/middleware.js

@@ -0,0 +1,109 @@
+/* @flow */
+
+import { AppState } from 'react-native';
+import type { Dispatch } from 'redux';
+
+import {
+    APP_WILL_MOUNT,
+    APP_WILL_UNMOUNT
+} from '../app';
+import { MiddlewareRegistry } from '../base/redux';
+
+import {
+    _setAppStateListener,
+    _setBackgroundVideoMuted,
+    appStateChanged
+} from './actions';
+import {
+    _SET_APP_STATE_LISTENER,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+/**
+ * Middleware that captures App lifetime actions and subscribes to application
+ * state changes. When the application state changes it will fire the action
+ * required to mute or unmute the local video in case the application goes to
+ * the background or comes back from it.
+ *
+ * @param {Store} store - Redux store.
+ * @returns {Function}
+ * @see {@link https://facebook.github.io/react-native/docs/appstate.html}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case _SET_APP_STATE_LISTENER: {
+        // Remove the current/old AppState listener.
+        const { appStateListener } = store.getState()['features/background'];
+
+        if (appStateListener) {
+            AppState.removeEventListener('change', appStateListener);
+        }
+
+        // Add the new AppState listener.
+        if (action.listener) {
+            AppState.addEventListener('change', action.listener);
+        }
+        break;
+    }
+
+    case APP_STATE_CHANGED:
+        _appStateChanged(store.dispatch, action.appState);
+        break;
+
+    case APP_WILL_MOUNT:
+        store.dispatch(
+                _setAppStateListener(
+                        _onAppStateChange.bind(undefined, store.dispatch)));
+        break;
+
+    case APP_WILL_UNMOUNT:
+        store.dispatch(_setAppStateListener(null));
+        break;
+    }
+
+    return next(action);
+});
+
+/**
+ * Handles app state changes. Dispatches the necessary Redux actions for the
+ * local video to be muted when the app goes to the background, and to be
+ * unmuted when the app comes back.
+ *
+ * @param {Dispatch} dispatch - Redux dispatch function.
+ * @param {string} appState - The current app state.
+ * @private
+ * @returns {void}
+ */
+function _appStateChanged(dispatch: Dispatch<*>, appState: string) {
+    let muted;
+
+    switch (appState) {
+    case 'active':
+        muted = false;
+        break;
+
+    case 'background':
+        muted = true;
+        break;
+
+    case 'inactive':
+    default:
+        // XXX: We purposely don't handle the 'inactive' app state.
+        return;
+    }
+
+    dispatch(_setBackgroundVideoMuted(muted));
+}
+
+/**
+ * Called by React Native's AppState API to notify that the application state
+ * has changed. Dispatches the change within the (associated) Redux store.
+ *
+ * @param {Dispatch} dispatch - Redux dispatch function.
+ * @param {string} appState - The current application execution state.
+ * @private
+ * @returns {void}
+ */
+function _onAppStateChange(dispatch: Dispatch<*>, appState: string) {
+    dispatch(appStateChanged(appState));
+}

react/features/background/reducer.js

@@ -0,0 +1,31 @@
+import { ReducerRegistry } from '../base/redux';
+
+import {
+    _SET_APP_STATE_LISTENER,
+    _SET_BACKGROUND_VIDEO_MUTED,
+    APP_STATE_CHANGED
+} from './actionTypes';
+
+ReducerRegistry.register('features/background', (state = {}, action) => {
+    switch (action.type) {
+    case _SET_APP_STATE_LISTENER:
+        return {
+            ...state,
+            appStateListener: action.listener
+        };
+
+    case _SET_BACKGROUND_VIDEO_MUTED:
+        return {
+            ...state,
+            videoMuted: action.muted
+        };
+
+    case APP_STATE_CHANGED:
+        return {
+            ...state,
+            appState: action.appState
+        };
+    }
+
+    return state;
+});

react/features/base/conference/actions.js

@@ -1,4 +1,4 @@
-import JitsiMeetJS from '../lib-jitsi-meet';
+import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import {
     changeParticipantEmail,
     dominantSpeakerChanged,
@@ -20,8 +20,6 @@ import {
 } from './actionTypes';
 import { EMAIL_COMMAND } from './constants';
 import { _addLocalTracksToConference } from './functions';
-import './middleware';
-import './reducer';
 
 /**
  * Adds conference (event) listeners.
@@ -32,11 +30,9 @@ import './reducer';
  * @returns {void}
  */
 function _addConferenceListeners(conference, dispatch) {
-    const JitsiConferenceEvents = JitsiMeetJS.events.conference;
-
     conference.on(
             JitsiConferenceEvents.CONFERENCE_FAILED,
-            (...args) => dispatch(_conferenceFailed(conference, ...args)));
+            (...args) => dispatch(conferenceFailed(conference, ...args)));
     conference.on(
             JitsiConferenceEvents.CONFERENCE_JOINED,
             (...args) => dispatch(_conferenceJoined(conference, ...args)));
@@ -89,8 +85,9 @@ function _addConferenceListeners(conference, dispatch) {
  *     conference: JitsiConference,
  *     error: string
  * }}
+ * @public
  */
-function _conferenceFailed(conference, error) {
+export function conferenceFailed(conference, error) {
     return {
         type: CONFERENCE_FAILED,
         conference,
@@ -206,9 +203,17 @@ export function createConference() {
         const conference
             = connection.initJitsiConference(
 
-                    // XXX Lib-jitsi-meet does not accept uppercase letters.
-                    room.toLowerCase(),
-                    { openSctp: true });
+                // XXX Lib-jitsi-meet does not accept uppercase letters.
+                room.toLowerCase(),
+                {
+                    openSctp: true
+
+                    // FIXME I tested H.264 from iPhone 6S during a morning
+                    // standup but, unfortunately, the other participants who
+                    // happened to be running the Web app saw only black.
+                    //
+                    // preferH264: true
+                });
 
         _addConferenceListeners(conference, dispatch);
 

react/features/base/conference/functions.js

@@ -1,6 +1,4 @@
-import JitsiMeetJS from '../lib-jitsi-meet';
-
-const JitsiTrackErrors = JitsiMeetJS.errors.track;
+import { JitsiTrackErrors } from '../lib-jitsi-meet';
 
 /**
  * Attach a set of local tracks to a conference.
@@ -19,8 +17,8 @@ export function _addLocalTracksToConference(conference, localTracks) {
         // XXX The library lib-jitsi-meet may be draconian, for example, when
         // adding one and the same video track multiple times.
         if (conferenceLocalTracks.indexOf(track) === -1) {
-            promises.push(conference.addTrack(track)
-                .catch(err => {
+            promises.push(
+                conference.addTrack(track).catch(err => {
                     _reportError(
                         'Failed to add local track to conference',
                         err);

react/features/base/conference/index.js

@@ -1,3 +1,6 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/conference/middleware.js

@@ -1,3 +1,4 @@
+/* global APP */
 import { CONNECTION_ESTABLISHED } from '../connection';
 import {
     getLocalParticipant,
@@ -53,7 +54,11 @@ MiddlewareRegistry.register(store => next => action => {
 function _connectionEstablished(store, next, action) {
     const result = next(action);
 
-    store.dispatch(createConference());
+    // FIXME: workaround for the web version. Currently the creation of the
+    // conference is handled by /conference.js
+    if (typeof APP === 'undefined') {
+        store.dispatch(createConference());
+    }
 
     return result;
 }

react/features/base/conference/reducer.js

@@ -1,4 +1,4 @@
-import JitsiMeetJS from '../lib-jitsi-meet';
+import { JitsiConferenceErrors } from '../lib-jitsi-meet';
 import {
     ReducerRegistry,
     setStateProperties,
@@ -64,7 +64,6 @@ function _conferenceFailed(state, action) {
         return state;
     }
 
-    const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
     const passwordRequired
         = JitsiConferenceErrors.PASSWORD_REQUIRED === action.error
             ? conference

react/features/base/connection/actions.native.js

@@ -3,7 +3,7 @@
 import type { Dispatch } from 'redux';
 
 import { conferenceWillLeave } from '../conference';
-import JitsiMeetJS from '../lib-jitsi-meet';
+import JitsiMeetJS, { JitsiConnectionEvents } from '../lib-jitsi-meet';
 
 import {
     CONNECTION_DISCONNECTED,
@@ -11,9 +11,6 @@ import {
     CONNECTION_FAILED,
     SET_DOMAIN
 } from './actionTypes';
-import './reducer';
-
-const JitsiConnectionEvents = JitsiMeetJS.events.connection;
 
 /**
  * Opens new connection.
@@ -23,17 +20,16 @@ const JitsiConnectionEvents = JitsiMeetJS.events.connection;
 export function connect() {
     return (dispatch: Dispatch<*>, getState: Function) => {
         const state = getState();
-        const connectionOptions
-            = state['features/base/connection'].connectionOptions;
-        const room = state['features/base/conference'].room;
+        const { options } = state['features/base/connection'];
+        const { room } = state['features/base/conference'];
         const connection
             = new JitsiMeetJS.JitsiConnection(
-                connectionOptions.appId,
-                connectionOptions.token,
+                options.appId,
+                options.token,
                 {
-                    ...connectionOptions,
+                    ...options,
                     bosh:
-                        connectionOptions.bosh
+                        options.bosh
 
                             // XXX The Jitsi Meet deployments require the room
                             // argument to be in lower case at the time of this
@@ -44,13 +40,13 @@ export function connect() {
 
         connection.addEventListener(
                 JitsiConnectionEvents.CONNECTION_DISCONNECTED,
-                connectionDisconnected);
+                _onConnectionDisconnected);
         connection.addEventListener(
                 JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-                connectionEstablished);
+                _onConnectionEstablished);
         connection.addEventListener(
                 JitsiConnectionEvents.CONNECTION_FAILED,
-                connectionFailed);
+                _onConnectionFailed);
 
         connection.connect();
 
@@ -60,11 +56,12 @@ export function connect() {
          *
          * @param {string} message - Disconnect reason.
          * @returns {void}
+         * @private
          */
-        function connectionDisconnected(message: string) {
+        function _onConnectionDisconnected(message: string) {
             connection.removeEventListener(
                     JitsiConnectionEvents.CONNECTION_DISCONNECTED,
-                    connectionDisconnected);
+                    _onConnectionDisconnected);
 
             dispatch(_connectionDisconnected(connection, message));
         }
@@ -73,10 +70,11 @@ export function connect() {
          * Resolves external promise when connection is established.
          *
          * @returns {void}
+         * @private
          */
-        function connectionEstablished() {
+        function _onConnectionEstablished() {
             unsubscribe();
-            dispatch(_connectionEstablished(connection));
+            dispatch(connectionEstablished(connection));
         }
 
         /**
@@ -84,11 +82,12 @@ export function connect() {
          *
          * @param {JitsiConnectionErrors} err - Connection error.
          * @returns {void}
+         * @private
          */
-        function connectionFailed(err) {
+        function _onConnectionFailed(err) {
             unsubscribe();
             console.error('CONNECTION FAILED:', err);
-            dispatch(_connectionFailed(connection, err));
+            dispatch(connectionFailed(connection, err, ''));
         }
 
         /**
@@ -100,10 +99,10 @@ export function connect() {
         function unsubscribe() {
             connection.removeEventListener(
                     JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-                    connectionEstablished);
+                    _onConnectionEstablished);
             connection.removeEventListener(
                     JitsiConnectionEvents.CONNECTION_FAILED,
-                    connectionFailed);
+                    _onConnectionFailed);
         }
     };
 }
@@ -184,13 +183,13 @@ function _connectionDisconnected(connection, message: string) {
  *
  * @param {JitsiConnection} connection - The JitsiConnection which was
  * established.
- * @private
  * @returns {{
  *     type: CONNECTION_ESTABLISHED,
  *     connection: JitsiConnection
  * }}
+ * @public
  */
-function _connectionEstablished(connection) {
+export function connectionEstablished(connection: Object) {
     return {
         type: CONNECTION_ESTABLISHED,
         connection
@@ -201,18 +200,22 @@ function _connectionEstablished(connection) {
  * Create an action for when the signaling connection could not be created.
  *
  * @param {JitsiConnection} connection - The JitsiConnection which failed.
- * @param {string} error - Error message.
- * @private
+ * @param {string} error - Error.
+ * @param {string} errorMessage - Error message.
  * @returns {{
  *     type: CONNECTION_FAILED,
  *     connection: JitsiConnection,
- *     error: string
+ *     error: string,
+ *     errorMessage: string
  * }}
+ * @public
  */
-function _connectionFailed(connection, error: string) {
+export function connectionFailed(
+    connection: Object, error: string, errorMessage: string) {
     return {
         type: CONNECTION_FAILED,
         connection,
-        error
+        error,
+        errorMessage
     };
 }

react/features/base/connection/actions.web.js

@@ -2,17 +2,27 @@
 
 import type { Dispatch } from 'redux';
 
+import {
+    JitsiConferenceEvents,
+    libInitError,
+    WEBRTC_NOT_READY,
+    WEBRTC_NOT_SUPPORTED
+} from '../lib-jitsi-meet';
+
 import UIEvents from '../../../../service/UI/UIEvents';
 
 import { SET_DOMAIN } from './actionTypes';
-import './reducer';
 
 declare var APP: Object;
-declare var JitsiMeetJS: Object;
+declare var config: Object;
 
-const JitsiConferenceEvents = JitsiMeetJS.events.conference;
 const logger = require('jitsi-meet-logger').getLogger(__filename);
 
+export {
+    connectionEstablished,
+    connectionFailed
+} from './actions.native.js';
+
 /**
  * Opens new connection.
  *
@@ -58,17 +68,30 @@ export function connect() {
 
             APP.UI.initConference();
 
-            APP.UI.addListener(UIEvents.LANG_CHANGED, language => {
-                APP.translation.setLanguage(language);
-                APP.settings.setLanguage(language);
-            });
+            APP.UI.addListener(
+                    UIEvents.LANG_CHANGED,
+                    language => APP.translation.setLanguage(language));
 
             APP.keyboardshortcut.init();
+
+            if (config.requireDisplayName && !APP.settings.getDisplayName()) {
+                APP.UI.promptDisplayName();
+            }
         })
-            .catch(err => {
+            .catch(error => {
                 APP.UI.hideRingOverLay();
                 APP.API.notifyConferenceLeft(APP.conference.roomName);
-                logger.error(err);
+                logger.error(error);
+
+                // TODO The following are in fact Errors raised by
+                // JitsiMeetJS.init() which should be taken care of in
+                // features/base/lib-jitsi-meet but we are not there yet on the
+                // Web at the time of this writing.
+                switch (error.name) {
+                case WEBRTC_NOT_READY:
+                case WEBRTC_NOT_SUPPORTED:
+                    dispatch(libInitError(error));
+                }
             });
     };
 }

react/features/base/connection/functions.js

@@ -12,16 +12,16 @@ export function getDomain(stateOrGetState: Function | Object) {
         = typeof stateOrGetState === 'function'
             ? stateOrGetState()
             : stateOrGetState;
-    const connection = state['features/base/connection'];
+    const { options } = state['features/base/connection'];
     let domain;
 
     try {
-        domain = connection.connectionOptions.hosts.domain;
+        domain = options.hosts.domain;
     } catch (e) {
-        // XXX The value of connectionOptions or any of the properties
-        // descending from it may be undefined at some point in the execution
-        // (e.g. on start). Instead of multiple checks for the undefined value,
-        // we just wrap it in a try-catch block.
+        // XXX The value of options or any of the properties descending from it
+        // may be undefined at some point in the execution (e.g. on start).
+        // Instead of multiple checks for the undefined value, we just wrap it
+        // in a try-catch block.
     }
 
     return domain;

react/features/base/connection/index.js

@@ -1,3 +1,5 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './functions';
+
+import './reducer';

react/features/base/connection/reducer.js

@@ -69,7 +69,7 @@ function _connectionEstablished(state: Object, action: Object) {
  * @private
  * @returns {Object}
  */
-function _constructConnectionOptions(domain: string) {
+function _constructOptions(domain: string) {
     // FIXME The HTTPS scheme for the BOSH URL works with meet.jit.si on both
     // mobile & Web. It also works with beta.meet.jit.si on Web. Unfortunately,
     // it doesn't work with beta.meet.jit.si on mobile. Temporarily, use the
@@ -96,7 +96,9 @@ function _constructConnectionOptions(domain: string) {
         bosh: `${String(boshProtocol)}//${domain}/http-bind`,
         hosts: {
             domain,
-            focus: `focus.${domain}`,
+
+            // Required by:
+            // - lib-jitsi-meet/modules/xmpp/xmpp.js
             muc: `conference.${domain}`
         }
     };
@@ -114,9 +116,9 @@ function _constructConnectionOptions(domain: string) {
 function _setDomain(state: Object, action: Object) {
     return {
         ...state,
-        connectionOptions: {
-            ...state.connectionOptions,
-            ..._constructConnectionOptions(action.domain)
+        options: {
+            ...state.options,
+            ..._constructOptions(action.domain)
         }
     };
 }

react/features/base/i18n/configLanguageDetector.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+declare var config: Object;
+
+/**
+ * Custom language detection, just returns the config property if any.
+ */
+export default {
+    /**
+     * Does not support caching.
+     *
+     * @returns {void}
+     */
+    cacheUserLanguage: Function.prototype,
+
+    /**
+     * Looks the language up in the config.
+     *
+     * @returns {string} The default language if any.
+     */
+    lookup() {
+        return config.defaultLanguage;
+    },
+
+    /**
+     * Name of the language detector.
+     */
+    name: 'configLanguageDetector'
+};

react/features/base/i18n/constants.js

@@ -0,0 +1,36 @@
+/**
+ * The available/supported languages.
+ *
+ * XXX The element at index zero is the default language.
+ *
+ * @public
+ * @type {Array<string>}
+ */
+export const LANGUAGES = [
+    'en', // XXX The default language.
+
+    'bg',
+    'de',
+    'es',
+    'fr',
+    'hy',
+    'it',
+    'oc',
+    'pl',
+    'ptBR',
+    'ru',
+    'sk',
+    'sl',
+    'sv',
+    'tr'
+];
+
+/**
+ * The default language.
+ *
+ * XXX The element at index zero of {@link LANGUAGES} is the default language.
+ *
+ * @public
+ * @type {string} The default language.
+ */
+export const DEFAULT_LANGUAGE = LANGUAGES[0];

react/features/base/i18n/functions.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { translate as reactI18nextTranslate } from 'react-i18next';
+
+/**
+ * Wraps a specific React Component in order to enable translations in it.
+ *
+ * @param {Component} component - The React Component to wrap.
+ * @returns {Component} The React Component which wraps {@link component} and
+ * enables translations in it.
+ */
+export function translate(component) {
+    // Use the default list of namespaces.
+    return (
+        reactI18nextTranslate([ 'main', 'languages' ], { wait: true })(
+                component));
+}
+
+/**
+ * Translates a specific key to text containing HTML via a specific translate
+ * function.
+ *
+ * @param {Function} t - The translate function.
+ * @param {string} key - The key to translate.
+ * @param {Array<*>} options - The options, if any, to pass to {@link t}.
+ * @returns {ReactElement} A ReactElement which depicts the translated HTML
+ * text.
+ */
+export function translateToHTML(t, key, options = {}) {
+    // eslint-disable-next-line react/no-danger
+    return <span dangerouslySetInnerHTML = {{ __html: t(key, options) }} />;
+}

react/features/base/i18n/i18next.js

@@ -0,0 +1,63 @@
+import i18next from 'i18next';
+import I18nextXHRBackend from 'i18next-xhr-backend';
+
+import LANGUAGES_RESOURCES from '../../../../lang/languages.json';
+import MAIN_RESOURCES from '../../../../lang/main.json';
+
+import { DEFAULT_LANGUAGE, LANGUAGES } from './constants';
+import languageDetector from './languageDetector';
+
+declare var interfaceConfig: Object;
+
+/**
+ * The options to initialize i18next with.
+ *
+ * @type {Object}
+ */
+const options = {
+    app:
+        (typeof interfaceConfig !== 'undefined' && interfaceConfig.APP_NAME)
+            || 'Jitsi Meet',
+    compatibilityAPI: 'v1',
+    compatibilityJSON: 'v1',
+    fallbackLng: DEFAULT_LANGUAGE,
+    fallbackOnEmpty: true,
+    fallbackOnNull: true,
+
+    // XXX i18next modifies the array lngWhitelist so make sure to clone
+    // LANGUAGES.
+    lngWhitelist: LANGUAGES.slice(),
+    load: 'unspecific',
+    ns: {
+        defaultNs: 'main',
+        namespaces: [ 'main', 'languages' ]
+    },
+    resGetPath: 'lang/__ns__-__lng__.json',
+    useDataAttrOptions: true
+};
+
+i18next
+    .use(I18nextXHRBackend)
+    .use(languageDetector)
+    .use({
+        name: 'resolveAppName',
+        process: (res, key) => i18next.t(key, { app: options.app }),
+        type: 'postProcessor'
+    })
+    .init(options);
+
+// Add default language which is preloaded from the source code.
+i18next.addResourceBundle(
+        DEFAULT_LANGUAGE,
+        'main',
+        MAIN_RESOURCES,
+        /* deep */ true,
+        /* overwrite */ true);
+i18next.addResourceBundle(
+        DEFAULT_LANGUAGE,
+        'languages',
+        LANGUAGES_RESOURCES,
+        /* deep */ true,
+        /* overwrite */ true);
+
+export default i18next;

react/features/base/i18n/index.js

@@ -0,0 +1,6 @@
+export * from './constants';
+export * from './functions';
+
+// TODO Eventually (e.g. when the non-React Web app is rewritten into React), it
+// should not be necessary to export i18next.
+export { default as i18next } from './i18next';

react/features/base/i18n/languageDetector.native.js

@@ -0,0 +1,24 @@
+/* @flow */
+
+import locale from 'react-native-locale-detector';
+
+/**
+ * The singleton language detector for React Native which uses the system-wide
+ * locale.
+ */
+export default {
+    /**
+     * Does not support caching.
+     *
+     * @returns {void}
+     */
+    cacheUserLanguage: Function.prototype,
+
+    detect() {
+        return locale;
+    },
+
+    init: Function.prototype,
+
+    type: 'languageDetector'
+};

react/features/base/i18n/languageDetector.web.js

@@ -0,0 +1,42 @@
+/* @flow */
+
+import BrowserLanguageDetector from 'i18next-browser-languagedetector';
+
+import configLanguageDetector from './configLanguageDetector';
+
+declare var interfaceConfig: Object;
+
+/**
+ * The ordered list (by name) of language detectors to be utilized as backends
+ * by the singleton language detector for Web.
+ *
+ * @type {Array<string>}
+ */
+const order = [
+    'querystring',
+    'localStorage',
+    configLanguageDetector.name
+];
+
+// Allow i18next to detect the system language reported by the Web browser
+// itself.
+interfaceConfig.LANG_DETECTION && order.push('navigator');
+
+/**
+ * The singleton language detector for Web.
+ */
+const languageDetector
+    = new BrowserLanguageDetector(
+        /* services */ null,
+        /* options */ {
+            caches: [ 'localStorage' ],
+            lookupLocalStorage: 'language',
+            lookupQuerystring: 'lang',
+            order
+        });
+
+// Add the language detector which looks the language up in the config. Its
+// order has already been established above.
+languageDetector.addDetector(configLanguageDetector);
+
+export default languageDetector;

react/features/base/lib-jitsi-meet/_.web.js

@@ -1,3 +1,8 @@
-/* global JitsiMeetJS */
+/* @flow */
+
+// Polyfill URL for Internet Explorer.
+import 'url-polyfill';
+
+declare var JitsiMeetJS: Object;
 
 export default JitsiMeetJS;

react/features/base/lib-jitsi-meet/actionTypes.js

@@ -1,13 +1,23 @@
 import { Symbol } from '../react';
 
 /**
- * Action to signal that lib-jitsi-meet library was disposed.
+ * The type of Redux action which signals that {@link JitsiMeetJS} was disposed.
  *
  * {
- *     type: LIB_DISPOSED
+ *     type: LIB_DID_DISPOSE
  * }
  */
-export const LIB_DISPOSED = Symbol('LIB_DISPOSED');
+export const LIB_DID_DISPOSE = Symbol('LIB_DID_DISPOSE');
+
+/**
+ * The type of Redux action which signals that {@link JitsiMeetJS.init()} was
+ * invoked and completed successfully.
+ *
+ * {
+ *     type: LIB_DID_INIT
+ * }
+ */
+export const LIB_DID_INIT = Symbol('LIB_DID_INIT');
 
 /**
  * Action to signal that lib-jitsi-meet initialized failed with error.
@@ -20,13 +30,24 @@ export const LIB_DISPOSED = Symbol('LIB_DISPOSED');
 export const LIB_INIT_ERROR = Symbol('LIB_INIT_ERROR');
 
 /**
- * Action to signal that lib-jitsi-meet initialization succeeded.
+ * The type of Redux action which signals that {@link JitsiMeetJS} will be
+ * disposed.
  *
  * {
- *     type: LIB_INITIALIZED
+ *     type: LIB_WILL_DISPOSE
  * }
  */
-export const LIB_INITIALIZED = Symbol('LIB_INITIALIZED');
+export const LIB_WILL_DISPOSE = Symbol('LIB_WILL_DISPOSE');
+
+/**
+ * The type of Redux action which signals that {@link JitsiMeetJS.init()} will
+ * be invoked.
+ *
+ * {
+ *     type: LIB_WILL_INIT
+ * }
+ */
+export const LIB_WILL_INIT = Symbol('LIB_WILL_INIT');
 
 /**
  * Action to signal that config was set.
@@ -37,3 +58,13 @@ export const LIB_INITIALIZED = Symbol('LIB_INITIALIZED');
  * }
  */
 export const SET_CONFIG = Symbol('SET_CONFIG');
+
+/**
+ * The type of Redux action which indicates whether WebRTC is ready.
+ *
+ * {
+ *     type: SET_WEBRTC_READY,
+ *     webRTCReady: boolean | Promise
+ * }
+ */
+export const SET_WEBRTC_READY = Symbol('SET_WEBRTC_READY');

react/features/base/lib-jitsi-meet/actions.js

@@ -1,43 +1,51 @@
-import JitsiMeetJS from './';
+import type { Dispatch } from 'redux';
+
+import JitsiMeetJS from './_';
 import {
-    LIB_DISPOSED,
+    LIB_DID_DISPOSE,
+    LIB_DID_INIT,
     LIB_INIT_ERROR,
-    LIB_INITIALIZED,
-    SET_CONFIG
+    LIB_WILL_DISPOSE,
+    LIB_WILL_INIT,
+    SET_CONFIG,
+    SET_WEBRTC_READY
 } from './actionTypes';
-import './middleware';
-import './reducer';
+
+declare var APP: Object;
 
 /**
- * Disposes lib-jitsi-meet.
+ * Disposes (of) lib-jitsi-meet.
  *
  * @returns {Function}
  */
 export function disposeLib() {
-    // XXX We're wrapping it with Promise, because:
-    // a) to be better aligned with initLib() method, which is async.
-    // b) as currently there is no implementation for it in lib-jitsi-meet, and
-    // there is a big chance it will be async.
-    // TODO Currently, lib-jitsi-meet doesn't have any functionality to
-    // dispose itself.
-    return dispatch => {
-        dispatch({ type: LIB_DISPOSED });
+    return (dispatch: Dispatch<*>) => {
+        dispatch({ type: LIB_WILL_DISPOSE });
 
-        return Promise.resolve();
+        // XXX We're wrapping it with Promise because:
+        // a) to be better aligned with initLib() method which is async;
+        // b) as currently there is no implementation for it in lib-jitsi-meet
+        //    and there is a big chance it will be async.
+        // TODO Currently, lib-jitsi-meet doesn't have the functionality to
+        // dispose itself.
+        return (
+            Promise.resolve()
+                .then(() => dispatch({ type: LIB_DID_DISPOSE })));
     };
 }
 
 /**
- * Initializes lib-jitsi-meet with passed configuration.
+ * Initializes lib-jitsi-meet (i.e. {@link invokes JitsiMeetJS.init()}) with the
+ * current config(uration).
  *
  * @returns {Function}
  */
 export function initLib() {
-    return (dispatch, getState) => {
-        const config = getState()['features/base/lib-jitsi-meet'].config;
+    return (dispatch: Dispatch<*>, getState: Function) => {
+        const { config } = getState()['features/base/lib-jitsi-meet'];
 
         if (!config) {
-            throw new Error('Cannot initialize lib-jitsi-meet without config');
+            throw new Error('Cannot init lib-jitsi-meet without config');
         }
 
         // XXX Temporarily until conference.js is moved to the React app we
@@ -46,34 +54,101 @@ export function initLib() {
             return Promise.resolve();
         }
 
-        return JitsiMeetJS.init(config)
-            .then(() => dispatch({ type: LIB_INITIALIZED }))
-            .catch(error => {
-                dispatch({
-                    type: LIB_INIT_ERROR,
-                    lib: { error }
-                });
+        dispatch({ type: LIB_WILL_INIT });
 
-                // TODO Handle LIB_INIT_ERROR error somewhere instead.
-                console.error('lib-jitsi-meet failed to init due to ', error);
-                throw error;
-            });
+        return (
+            JitsiMeetJS.init(config)
+                .then(() => dispatch({ type: LIB_DID_INIT }))
+                .catch(error => {
+                    dispatch(libInitError(error));
+
+                    // TODO Handle LIB_INIT_ERROR error somewhere instead.
+                    console.error('lib-jitsi-meet failed to init:', error);
+                    throw error;
+                }));
+    };
+}
+
+/**
+ * Notifies about a specific error raised by {@link JitsiMeetJS.init()}.
+ *
+ * @param {Error} error - The Error raised by JitsiMeetJS.init().
+ * @returns {{
+ *     type: LIB_INIT_ERROR,
+ *     error: Error
+ * }}
+ */
+export function libInitError(error: Error) {
+    return {
+        type: LIB_INIT_ERROR,
+        error
     };
 }
 
 /**
  * Sets config.
  *
- * @param {Object} config - Config object accepted by JitsiMeetJS#init()
- * method.
+ * @param {Object} config - The config(uration) object in the format accepted by
+ * the JitsiMeetJS.init() method.
  * @returns {{
- *      type: SET_CONFIG,
- *      config: Object
- *  }}
+ *     type: SET_CONFIG,
+ *     config: Object
+ * }}
  */
-export function setConfig(config) {
+export function setConfig(config: Object) {
     return {
         type: SET_CONFIG,
         config
     };
 }
+
+/**
+ * Sets the indicator which determines whether WebRTC is ready. In execution
+ * environments in which WebRTC is supported via a known plugin such
+ * as Temasys WebRTC may start not ready and then become ready. Of course, there
+ * are execution enviroments such as old Mozilla Firefox versions or
+ * certains Microsoft Edge versions in which WebRTC is not supported at all.
+ *
+ * @param {boolean|Promise} webRTCReady - The indicator which determines
+ * whether WebRTC is ready. If a Promise is specified, its resolution will be
+ * awaited.
+ * @returns {Function}
+ */
+export function setWebRTCReady(webRTCReady: boolean | Promise<*>) {
+    return (dispatch: Dispatch<*>, getState: Function) => {
+        if (getState()['features/base/lib-jitsi-meet'].webRTCReady
+                !== webRTCReady) {
+            dispatch({
+                type: SET_WEBRTC_READY,
+                webRTCReady
+            });
+
+            // If the specified webRTCReady is a thenable (i.e. a Promise), then
+            // await its resolution.
+            switch (typeof webRTCReady) {
+            case 'function':
+            case 'object': {
+                const { then } = webRTCReady;
+
+                if (typeof then === 'function') {
+                    const onFulfilled = value => {
+                        // Is the app still interested in the specified
+                        // webRTCReady?
+                        if (getState()['features/base/lib-jitsi-meet']
+                                    .webRTCReady
+                                === webRTCReady) {
+                            dispatch(setWebRTCReady(value));
+                        }
+                    };
+
+                    then.call(
+                             webRTCReady,
+                             /* onFulfilled */ () => onFulfilled(true),
+                             /* onRejected*/ () => onFulfilled(false));
+                }
+                break;
+            }
+            }
+        }
+    };
+}

react/features/base/lib-jitsi-meet/constants.js

@@ -0,0 +1,13 @@
+/**
+ * The name of the Error thrown by {@link JitsiMeetJS.init()} which indicates
+ * that WebRTC is not ready and its readiness may be tracked via the
+ * webRTCReadyPromise property value of the Error.
+ */
+export const WEBRTC_NOT_READY = 'WEBRTC_NOT_READY';
+
+/**
+ * The name of the Error thrown by {@link JitsiMeetJS.init()} which indicates
+ * that WebRTC is not supported by the execution environment either natively or
+ * via a known plugin such as Temasys.
+ */
+export const WEBRTC_NOT_SUPPORTED = 'WEBRTC_NOT_SUPPORTED';

react/features/base/lib-jitsi-meet/functions.js

@@ -1,5 +1,31 @@
 import { loadScript } from '../../base/util';
 
+import JitsiMeetJS from './_';
+
+declare var APP: Object;
+
+const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
+
+/**
+ * Determines whether a specific JitsiConnectionErrors instance indicates a
+ * fatal JitsiConnection error.
+ *
+ * FIXME Figure out the category of errors defined by the fucntion and describe
+ * that category. I've currently named the category fatal because it appears to
+ * be used in the cases of unrecoverable errors that necessitate a reload.
+ *
+ * @param {string} error - The JitsiConnectionErrors instance to
+ * categorize/classify.
+ * @returns {boolean} True if the specified JitsiConnectionErrors instance
+ * indicates a fatal JitsiConnection error; otherwise, false.
+ */
+export function isFatalJitsiConnectionError(error: string) {
+    return (
+        error === JitsiConnectionErrors.CONNECTION_DROPPED_ERROR
+            || error === JitsiConnectionErrors.OTHER_ERROR
+            || error === JitsiConnectionErrors.SERVER_ERROR);
+}
+
 /**
  * Loads config.js file from remote server.
  *
@@ -7,7 +33,7 @@ import { loadScript } from '../../base/util';
  * @param {string} path='/config.js' - Relative pah to config.js file.
  * @returns {Promise<Object>}
  */
-export function loadConfig(host, path = '/config.js') {
+export function loadConfig(host: string, path: string = '/config.js') {
     // Returns config.js file from global scope. We can't use the version that's
     // being used for the React Native app because the old/current Web app uses
     // config from the global scope.

react/features/base/lib-jitsi-meet/index.js

@@ -3,6 +3,20 @@
 import JitsiMeetJS from './_';
 export { JitsiMeetJS as default };
 
+// XXX Re-export the types exported by JitsiMeetJS in order to prevent undefined
+// imported JitsiMeetJS. It may be caused by import cycles but I have not
+// confirmed the theory.
+export const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
+export const JitsiConferenceEvents = JitsiMeetJS.events.conference;
+export const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
+export const JitsiConnectionEvents = JitsiMeetJS.events.connection;
+export const JitsiTrackErrors = JitsiMeetJS.errors.track;
+export const JitsiTrackEvents = JitsiMeetJS.events.track;
+
 export * from './actions';
 export * from './actionTypes';
+export * from './constants';
 export * from './functions';
+
+import './middleware';
+import './reducer';

react/features/base/lib-jitsi-meet/middleware.js

@@ -1,11 +1,9 @@
 import { PARTICIPANT_LEFT } from '../participants';
 import { MiddlewareRegistry } from '../redux';
 
-import {
-    disposeLib,
-    initLib
-} from './actions';
-import { SET_CONFIG } from './actionTypes';
+import { disposeLib, initLib, setWebRTCReady } from './actions';
+import { LIB_DID_INIT, LIB_INIT_ERROR, SET_CONFIG } from './actionTypes';
+import { WEBRTC_NOT_READY, WEBRTC_NOT_SUPPORTED } from './constants';
 
 /**
  * Middleware that captures PARTICIPANT_LEFT action for a local participant
@@ -15,31 +13,97 @@ import { SET_CONFIG } from './actionTypes';
  *
  * @param {Store} store - Redux store.
  * @returns {Function}
+ * @private
  */
 MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
+    case LIB_DID_INIT:
+        store.dispatch(setWebRTCReady(true));
+        break;
+
+    case LIB_INIT_ERROR:
+        return _libInitError(store, next, action);
+
     case PARTICIPANT_LEFT:
         action.participant.local && store.dispatch(disposeLib());
         break;
 
-    case SET_CONFIG: {
-        const { dispatch, getState } = store;
-        const initialized
-            = getState()['features/base/lib-jitsi-meet'].initialized;
-
-        // XXX If we already have config, that means new config is coming, which
-        // means that we should dispose instance of lib initialized with
-        // previous config first.
-        // TODO Currently 'disposeLib' actually does not dispose lib-jitsi-meet.
-        // This functionality should be implemented.
-        const promise
-            = initialized ? dispatch(disposeLib()) : Promise.resolve();
-
-        promise.then(dispatch(initLib()));
-
-        break;
-    }
+    case SET_CONFIG:
+        return _setConfig(store, next, action);
     }
 
     return next(action);
 });
+
+/**
+ * Notifies the feature base/lib-jitsi-meet that the action LIB_INIT_ERROR is
+ * being dispatched within a specific Redux store.
+ *
+ * @param {Store} store - The Redux store in which the specified action is being
+ * dispatched.
+ * @param {Dispatch} next - The Redux dispatch function to dispatch the
+ * specified action to the specified store.
+ * @param {Action} action - The Redux action LIB_INIT_ERROR which is being
+ * dispatched in the specified store.
+ * @returns {Object} The new state that is the result of the reduction of the
+ * specified action.
+ * @private
+ */
+function _libInitError(store, next, action) {
+    const nextState = next(action);
+
+    const error = action.error;
+
+    if (error) {
+        let webRTCReady;
+
+        switch (error.name) {
+        case WEBRTC_NOT_READY:
+            webRTCReady = error.webRTCReadyPromise;
+            break;
+
+        case WEBRTC_NOT_SUPPORTED:
+            webRTCReady = false;
+            break;
+        }
+        typeof webRTCReady === 'undefined'
+            || store.dispatch(setWebRTCReady(webRTCReady));
+    }
+
+    return nextState;
+}
+
+/**
+ * Notifies the feature base/lib-jitsi-meet that the action SET_CONFIG is being
+ * dispatched within a specific Redux store.
+ *
+ * @param {Store} store - The Redux store in which the specified action is being
+ * dispatched.
+ * @param {Dispatch} next - The Redux dispatch function to dispatch the
+ * specified action to the specified store.
+ * @param {Action} action - The Redux action SET_CONFIG which is being
+ * dispatched in the specified store.
+ * @returns {Object} The new state that is the result of the reduction of the
+ * specified action.
+ * @private
+ */
+function _setConfig(store, next, action) {
+    const { dispatch, getState } = store;
+    const { initialized } = getState()['features/base/lib-jitsi-meet'];
+
+    // XXX Since the config is changing, the library lib-jitsi-meet must be
+    // initialized again with the new config. Consequntly, it may need to be
+    // disposed of first.
+    // TODO Currently, disposeLib actually does not dispose of lib-jitsi-meet
+    // because lib-jitsi-meet does not implement such functionality.
+    const disposeLibPromise
+        = initialized ? dispatch(disposeLib()) : Promise.resolve();
+
+    // Let the new config into the Redux store (because initLib will read it
+    // from there).
+    const nextState = next(action);
+
+    disposeLibPromise.then(dispatch(initLib()));
+
+    return nextState;
+}

react/features/base/lib-jitsi-meet/native/index.js

@@ -1,2 +1,2 @@
-require('./polyfills-browser');
-require('./polyfills-browserify');
+import './polyfills-browser';
+import './polyfills-browserify';