Merge branch 'analytics_include_region_info' of github.com:jitsi/jitsi-meet into analytics_include_region_info

change analytics to pull from new collection jitsiAnalyticsPermanentProperties, which is to be user-defined via javascript in local.html

.eslintignore

@@ -3,6 +3,7 @@ build/*
 
 # Third-party source code which we (1) do not want to modify or (2) try to
 # modify as little as possible.
+flow-typed/*
 libs/*
 
 # ESLint will by default ignore its own configuration file. However, there does

.eslintrc.js

@@ -4,7 +4,10 @@ module.exports = {
         'commonjs': true,
         'es6': true
     },
-    'extends': 'eslint:recommended',
+    'extends': [
+        'eslint:recommended',
+        'plugin:flowtype/recommended'
+    ],
     'globals': {
         // The globals that (1) are accessed but not defined within many of our
         // files, (2) are certainly defined, and (3) we would like to use
@@ -12,12 +15,16 @@ module.exports = {
         // files.
         '__filename': false
     },
+    'parser': 'babel-eslint',
     'parserOptions': {
         'ecmaFeatures': {
             'experimentalObjectRestSpread': true
         },
         'sourceType': 'module'
     },
+    'plugins': [
+        'flowtype'
+    ],
     'rules': {
         'new-cap': [
             'error',

.flowconfig

@@ -0,0 +1,71 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have
+; seen to cause errors and we have chosen not to fix.
+.*/node_modules/babel-core/.*
+.*/node_modules/bower/.*
+.*/node_modules/jsonlint/.*
+.*/node_modules/styled-components/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+experimental.strict_type_args=true
+
+; FIXME: munge_underscores should be false but right now there are some errors
+; if we change the value to false
+; Treats class properties with underscore as private. Disabled because currently
+; for us "_" can mean protected too.
+; munge_underscores=false
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowDisableNextLine
+
+unsafe.enable_getters_and_setters=true
+
+; We (i.e. the jitsi-meet project) are using the haste module system on Web as
+; well, not only on React Native. Unfortunately, Flow does not support .web.js
+; by default. Override Flow's defaults to include .web.js as well. Technically,
+; we have .native.js as well so the choice of .web.js may lead to errors.
+; Practically though, it is a potential future problem that we do not have at
+; the time of this writing.
+module.file_ext=.web.js
+; Flow's defaults:
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+
+[version]
+^0.38.0

.gitattributes

@@ -1,2 +1,3 @@
 *.bundle.js -text -diff
+*.pbxproj -text
 lib-jitsi-meet.js -text -diff

.gitignore

@@ -4,7 +4,6 @@ deploy-local.sh
 libs/
 all.css
 *css.map
-unsupported_browser.css
 .remote-sync.json
 .sync-config.cson
 
@@ -36,21 +35,33 @@ DerivedData
 *.xcuserstate
 project.xcworkspace
 
-# Android/IJ
+# Android/IntelliJ
 #
-*.iml
+build/
 .idea
 .gradle
 local.properties
+*.iml
 
 # node.js
 #
 node_modules/
 npm-debug.log
+yarn-error.log
 
 # BUCK
 #
 buck-out/
 \.buckd/
-android/app/libs
-android/keystores/debug.keystore
+*.keystore
+
+# fastlane
+#
+# It is recommended to not store the screenshots in the git repo. Instead, use
+# fastlane to re-generate the screenshots whenever they are needed. For more
+# information about the recommended setup visit:
+# https://github.com/fastlane/fastlane/blob/master/fastlane/docs/Gitignore.md
+#
+fastlane/report.xml
+fastlane/Preview.html
+fastlane/screenshots

.jshintignore

@@ -1,7 +1,21 @@
+# The following do not need to be checked because they do not represent JS
+# source code.
 build/
 debian/
 libs/
 node_modules/
+
+# The following are checked by ESLint with the maximum configuration which
+# supersedes JSHint.
+flow-typed/
+modules/API/
+modules/remotecontrol/
+modules/transport/
 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
-webpack.config.babel.js

CONTRIBUTING.md

@@ -0,0 +1,29 @@
+# How to contribute
+We would love to have your help. Before you start working however, please read
+and follow this short guide.
+
+# Reporting Issues
+Provide as much information as possible. Mention the version of Jitsi Meet, 
+Jicofo and JVB you are using, and explain (as detailed as you can) how the 
+problem can be reproduced.
+
+# Code contributions
+Found a bug and know how to fix it? Great! Please read on.
+
+## Contributor License Agreement
+While the Jitsi projects are released under the
+[Apache License 2.0](https://github.com/jitsi/jitsi-meet/blob/master/LICENSE), the copyright
+holder and principal creator is [Atlassian](https://www.atlassian.com/). To
+ensure that we can continue making these projects available under an Open Source license,
+we need you to sign our Apache-based contributor
+license agreement as either a [corporation](https://jitsi.org/ccla) or an
+[individual](https://jitsi.org/icla). If you cannot accept the terms laid out
+in the agreement, unfortunately, we cannot accept your contribution.
+
+## Creating Pull Requests
+- Make sure your code passes the linter rules beforehand. The linter is exeuted
+  automatically when committing code.
+- Perform **one** logical change per pull request.
+- Maintain a clean list of commits, squash them if necessary.
+- Rebase your topic branch on top of the master branch before creating the pull
+ request.

ConferenceEvents.js

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

Makefile

@@ -8,16 +8,9 @@ OUTPUT_DIR = .
 STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
 STYLES_MAIN = css/main.scss
-STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
 WEBPACK = ./node_modules/.bin/webpack
 
-all: update-deps compile deploy clean
-
-# FIXME: there is a problem with node-sass not correctly installed (compiled)
-# a quick fix to make sure it is installed on every update
-# the problem appears on linux and not on macosx
-update-deps:
-	$(NPM) update && $(NPM) install node-sass
+all: compile deploy clean
 
 compile:
 	$(WEBPACK) -p
@@ -34,6 +27,8 @@ deploy-appbundle:
 	cp \
 		$(BUILD_DIR)/app.bundle.min.js \
 		$(BUILD_DIR)/app.bundle.min.map \
+		$(BUILD_DIR)/do_external_connect.min.js \
+		$(BUILD_DIR)/do_external_connect.min.map \
 		$(BUILD_DIR)/external_api.min.js \
 		$(BUILD_DIR)/external_api.min.map \
 		$(OUTPUT_DIR)/analytics.js \
@@ -47,7 +42,6 @@ deploy-lib-jitsi-meet:
 		$(DEPLOY_DIR)
 
 deploy-css:
-	$(NODE_SASS) css/unsupported_browser.scss css/unsupported_browser.css ; \
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
 	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
 	rm $(STYLES_BUNDLE)
@@ -57,8 +51,7 @@ deploy-local:
 
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
-	cp -r *.js *.html connection_optimization favicon.ico fonts images libs sounds LICENSE lang source_package/jitsi-meet && \
+	cp -r *.js *.html connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
 	cp css/all.css source_package/jitsi-meet/css && \
-	cp css/unsupported_browser.css source_package/jitsi-meet/css && \
 	(cd source_package ; tar cjf ../jitsi-meet.tar.bz2 jitsi-meet) && \
 	rm -rf source_package

README.md

@@ -1,5 +1,5 @@
-Jitsi Meet - Secure, Simple and Scalable Video Conferences
-====
+# Jitsi Meet - Secure, Simple and Scalable Video Conferences
+
 Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the session #482 of the VoIP Users Conference.
 
 You can also try it out yourself at https://meet.jit.si .
@@ -16,11 +16,17 @@ For other systems, or if you wish to install all components manually, see the [d
 
 You can download Debian/Ubuntu binaries:
 * [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianStableRepository))
+* [testing](https://download.jitsi.org/testing/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianTestingRepository))
 * [nightly](https://download.jitsi.org/unstable/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianNightlyRepository))
 
-## Building the sources
+You can download source archives (produced by ```make source-package```):
+* [source builds](https://download.jitsi.org/jitsi-meet/src/)
 
-Jitsi Meet uses [Browserify](http://browserify.org). If you want to make changes in the code you need to [install Browserify](http://browserify.org/#install). Browserify requires [nodejs](http://nodejs.org).
+You can get our mobile versions from here:
+* [Android](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+* [iOS](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+## Building the sources
 
 On Debian/Ubuntu systems, the required packages can be installed with:
 ```
@@ -34,7 +40,7 @@ To build the Jitsi Meet application, just type
 make
 ```
 
-## Working with the library sources(lib-jitsi-meet).
+## Working with the library sources (lib-jitsi-meet)
 
 By default the library is build from its git repository sources. The default dependency path in package.json is :
 ```json
@@ -81,8 +87,18 @@ npm unlink lib-jitsi-meet
 npm install
 ```
 
-## Discuss
-Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on Github.
+## Contributing
+
+If you are looking to contribute to Jitsi Meet, first of all, thank you! Please
+see our [guidelines for contributing](CONTRIBUTING.md).
+
+## Embedding in external applications
+
+Jitsi Meet provides a very flexible way of embedding it in external applications by using the [Jitsi Meet API](doc/api.md).
+
+## Mobile app
+Jitsi Meet is also available as a React Native application for Android and iOS.
+Instructions on how to build it can be  found [here](doc/mobile.md).
 
 ## Acknowledgements
 

android/app/build.gradle

@@ -91,7 +91,7 @@ android {
         minSdkVersion 16
         targetSdkVersion 22
         versionCode Integer.parseInt("${version}")
-        versionName "1.2.${version}"
+        versionName "1.4.${version}"
         ndk {
             abiFilters 'armeabi-v7a', 'x86'
         }
@@ -139,12 +139,14 @@ 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')
     compile project(':react-native-webrtc')
     compile fileTree(dir: 'libs', include: ['*.jar'])
     compile 'com.android.support:appcompat-v7:23.0.1'
-    compile 'com.facebook.react:react-native:+'
+    compile 'com.facebook.react:react-native:+'  // From node_modules
 }
 
 apply from: '../../node_modules/react-native-vector-icons/fonts.gradle'
@@ -152,6 +154,6 @@ apply from: '../../node_modules/react-native-vector-icons/fonts.gradle'
 // Run this once to be able to run the application with BUCK
 // puts all compile dependencies into folder libs for BUCK to use
 task copyDownloadableDepsToLibs(type: Copy) {
-  from configurations.compile
-  into 'libs'
+    from configurations.compile
+    into 'libs'
 }

android/app/src/main/AndroidManifest.xml

@@ -3,18 +3,22 @@
     android:versionCode="1"
     android:versionName="1.0">
 
-    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- WebRTC -->
+    <!-- XXX: ACCESS_NETWORK_STATE is required by WebRTC. -->
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+    <uses-permission android:name="android.permission.BLUETOOTH" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
     <uses-permission android:name="android.permission.RECORD_AUDIO" />
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+    <uses-permission android:name="android.permission.WAKE_LOCK"/>
 
     <uses-feature android:name="android.hardware.camera" />
     <uses-feature android:name="android.hardware.camera.autofocus"/>
 
     <uses-sdk
         android:minSdkVersion="16"
-        android:targetSdkVersion="22" />
+        android:targetSdkVersion="23" />
 
     <application
       android:allowBackup="true"
@@ -26,7 +30,8 @@
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         android:label="@string/app_name"
         android:launchMode="singleTask"
-        android:name=".MainActivity">
+        android:name=".MainActivity"
+        android:windowSoftInputMode="adjustResize">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />
@@ -35,11 +40,19 @@
             <action android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.BROWSABLE" />
             <category android:name="android.intent.category.DEFAULT" />
+            <data android:host="beta.hipchat.me" android:scheme="https" />
             <data android:host="beta.meet.jit.si" android:scheme="https" />
             <data android:host="chaos.hipchat.me" android:scheme="https" />
             <data android:host="enso.me" android:scheme="https" />
+            <data android:host="hipchat.me" android:scheme="https" />
             <data android:host="meet.jit.si" android:scheme="https" />
         </intent-filter>
+        <intent-filter>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <data android:scheme="org.jitsi.meet" />
+        </intent-filter>
       </activity>
       <activity
         android:name="com.facebook.react.devsupport.DevSettingsActivity" />

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

@@ -5,6 +5,7 @@ import android.app.Application;
 import com.facebook.react.ReactApplication;
 import com.facebook.react.ReactNativeHost;
 import com.facebook.react.ReactPackage;
+import com.facebook.soloader.SoLoader;
 
 import java.util.Arrays;
 import java.util.List;
@@ -15,7 +16,7 @@ public class MainApplication extends Application implements ReactApplication {
          * {@inheritDoc}
          */
         @Override
-        protected boolean getUseDeveloperSupport() {
+        public boolean getUseDeveloperSupport() {
             return BuildConfig.DEBUG;
         }
 
@@ -28,7 +29,11 @@ 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.oney.WebRTCModule.WebRTCModulePackage()
+                new com.ocetnik.timer.BackgroundTimerPackage(),
+                new com.oney.WebRTCModule.WebRTCModulePackage(),
+                new com.rnimmersive.RNImmersivePackage(),
+                new org.jitsi.meet.audiomode.AudioModePackage(),
+                new org.jitsi.meet.proximity.ProximityPackage()
             );
         }
     };
@@ -48,6 +53,8 @@ public class MainApplication extends Application implements ReactApplication {
     public void onCreate() {
         super.onCreate();
 
+        SoLoader.init(this, /* native exopackage */ false);
+
         if (!getReactNativeHost()
                 .getReactInstanceManager()
                     .getDevSupportManager()

android/app/src/main/java/org/jitsi/meet/audiomode/AudioModeModule.java

@@ -0,0 +1,333 @@
+package org.jitsi.meet.audiomode;
+
+import android.annotation.TargetApi;
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+import android.media.AudioDeviceInfo;
+import android.media.AudioManager;
+import android.os.Build;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+
+import java.util.HashMap;
+import java.util.Map;
+
+/**
+ * Module implementing a simple API to select the appropriate audio device for a
+ * conference call.
+ *
+ * Audio calls should use <tt>AudioModeModule.AUDIO_CALL</tt>, which uses the
+ * builtin earpiece, wired headset or bluetooth headset. The builtin earpiece is
+ * the default audio device.
+ *
+ * Video calls should should use <tt>AudioModeModule.VIDEO_CALL</tt>, which uses
+ * the builtin speaker, earpiece, wired headset or bluetooth headset. The
+ * builtin speaker is the default audio device.
+ *
+ * Before a call has started and after it has ended the
+ * <tt>AudioModeModule.DEFAULT</tt> mode should be used.
+ */
+public class AudioModeModule extends ReactContextBaseJavaModule {
+    /**
+     * Constants representing the audio mode.
+     * - DEFAULT: Used before and after every call. It represents the default
+     *   audio routing scheme.
+     * - AUDIO_CALL: Used for audio only calls. It will use the earpiece by
+     *   default, unless a wired or Bluetooth headset is connected.
+     * - VIDEO_CALL: Used for video calls. It will use the speaker by default,
+     *   unless a wired or Bluetooth headset is connected.
+     */
+    private static final int DEFAULT    = 0;
+    private static final int AUDIO_CALL = 1;
+    private static final int VIDEO_CALL = 2;
+
+    /**
+     *
+     */
+    private static final String ACTION_HEADSET_PLUG
+        = (Build.VERSION.SDK_INT >= 21)
+            ? AudioManager.ACTION_HEADSET_PLUG
+            : Intent.ACTION_HEADSET_PLUG;
+
+    /**
+     * React Native module name.
+     */
+    private static final String MODULE_NAME = "AudioMode";
+
+    /**
+     * Tag used when logging messages.
+     */
+    static final String TAG = MODULE_NAME;
+
+    /**
+     * {@link AudioManager} instance used to interact with the Android audio
+     * subsystem.
+     */
+    private final AudioManager audioManager;
+
+    /**
+     * {@link BluetoothHeadsetMonitor} for detecting Bluetooth device changes in
+     * old (< M) Android versions.
+     */
+    private BluetoothHeadsetMonitor bluetoothHeadsetMonitor;
+
+    /**
+     * {@link Handler} for running all operations on the main thread.
+     */
+    private final Handler mainThreadHandler
+        = new Handler(Looper.getMainLooper());
+
+    /**
+     * {@link Runnable} for running update operation on the main thread.
+     */
+    private final Runnable mainThreadRunner
+        = new Runnable() {
+            @Override
+            public void run() {
+                if (mode != -1) {
+                    updateAudioRoute(mode);
+                }
+            }
+        };
+
+    /**
+     * Audio mode currently in use.
+     */
+    private int mode = -1;
+
+    /**
+     * Initializes a new module instance. There shall be a single instance of
+     * this module throughout the lifetime of the application.
+     *
+     * @param reactContext the {@link ReactApplicationContext} where this module
+     * is created.
+     */
+    public AudioModeModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+
+        audioManager
+            = (AudioManager)
+                reactContext.getSystemService(Context.AUDIO_SERVICE);
+
+        // Setup runtime device change detection.
+        setupAudioRouteChangeDetection();
+    }
+
+    /**
+     * Gets a mapping with the constants this module is exporting.
+     *
+     * @return a {@link Map} mapping the constants to be exported with their
+     * values.
+     */
+    @Override
+    public Map<String, Object> getConstants() {
+        Map<String, Object> constants = new HashMap<>();
+
+        constants.put("AUDIO_CALL", AUDIO_CALL);
+        constants.put("DEFAULT", DEFAULT);
+        constants.put("VIDEO_CALL", VIDEO_CALL);
+
+        return constants;
+    }
+
+    /**
+     * Gets the name for this module, to be used in the React Native bridge.
+     *
+     * @return a string with the module name.
+     */
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    /**
+     * Helper method to trigger an audio route update when devices change. It
+     * makes sure the operation is performed on the main thread.
+     */
+    void onAudioDeviceChange() {
+        mainThreadHandler.post(mainThreadRunner);
+    }
+
+    /**
+     * Helper method to set the output route to a Bluetooth device.
+     *
+     * @param enabled true if Bluetooth should use used, false otherwise.
+     */
+    private void setBluetoothAudioRoute(boolean enabled) {
+        if (enabled) {
+            audioManager.startBluetoothSco();
+            audioManager.setBluetoothScoOn(true);
+        } else {
+            audioManager.setBluetoothScoOn(false);
+            audioManager.stopBluetoothSco();
+        }
+    }
+
+    /**
+     * Public method to set the current audio mode.
+     *
+     * @param mode the desired audio mode.
+     * @param promise a {@link Promise} which will be resolved if the audio mode
+     * could be updated successfully, and it will be rejected otherwise.
+     */
+    @ReactMethod
+    public void setMode(final int mode, final Promise promise) {
+        if (mode != DEFAULT && mode != AUDIO_CALL && mode != VIDEO_CALL) {
+            promise.reject("setMode", "Invalid audio mode " + mode);
+            return;
+        }
+
+        Runnable r = new Runnable() {
+            @Override
+            public void run() {
+                boolean success;
+
+                try {
+                    success = updateAudioRoute(mode);
+                } catch (Throwable e) {
+                    success = false;
+                    Log.e(
+                            TAG,
+                            "Failed to update audio route for mode: " + mode,
+                            e);
+                }
+                if (success) {
+                    AudioModeModule.this.mode = mode;
+                    promise.resolve(null);
+                } else {
+                    promise.reject(
+                            "setMode",
+                            "Failed to set audio mode to " + mode);
+                }
+            }
+        };
+        mainThreadHandler.post(r);
+    }
+
+    /**
+     * Setup the audio route change detection mechanism. We use the
+     * {@link android.media.AudioDeviceCallback} API on Android >= 23 only.
+     */
+    private void setupAudioRouteChangeDetection() {
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            setupAudioRouteChangeDetectionM();
+        } else {
+            setupAudioRouteChangeDetectionPreM();
+        }
+    }
+
+    /**
+     * Audio route change detection mechanism for Android API >= 23.
+     */
+    @TargetApi(Build.VERSION_CODES.M)
+    private void setupAudioRouteChangeDetectionM() {
+        android.media.AudioDeviceCallback audioDeviceCallback =
+                new android.media.AudioDeviceCallback() {
+                    @Override
+                    public void onAudioDevicesAdded(
+                            AudioDeviceInfo[] addedDevices) {
+                        Log.d(TAG, "Audio devices added");
+                        onAudioDeviceChange();
+                    }
+
+                    @Override
+                    public void onAudioDevicesRemoved(
+                            AudioDeviceInfo[] removedDevices) {
+                        Log.d(TAG, "Audio devices removed");
+                        onAudioDeviceChange();
+                    }
+                };
+
+        audioManager.registerAudioDeviceCallback(audioDeviceCallback, null);
+    }
+
+    /**
+     * Audio route change detection mechanism for Android API < 23.
+     */
+    private void setupAudioRouteChangeDetectionPreM() {
+        Context context = getReactApplicationContext();
+
+        // Detect changes in wired headset connections.
+        IntentFilter wiredHeadSetFilter = new IntentFilter(ACTION_HEADSET_PLUG);
+        BroadcastReceiver wiredHeadsetReceiver = new BroadcastReceiver() {
+            @Override
+            public void onReceive(Context context, Intent intent) {
+                Log.d(TAG, "Wired headset added / removed");
+                onAudioDeviceChange();
+            }
+        };
+        context.registerReceiver(wiredHeadsetReceiver, wiredHeadSetFilter);
+
+        // Detect Bluetooth device changes.
+        bluetoothHeadsetMonitor = new BluetoothHeadsetMonitor(this, context);
+    }
+
+    /**
+     * Updates the audio route for the given mode.
+     *
+     * @param mode the audio mode to be used when computing the audio route.
+     * @return true if the audio route was updated successfully, false
+     * otherwise.
+     */
+    private boolean updateAudioRoute(int mode) {
+        Log.d(TAG, "Update audio route for mode: " + mode);
+
+        if (mode == DEFAULT) {
+            audioManager.setMode(AudioManager.MODE_NORMAL);
+            audioManager.abandonAudioFocus(null);
+            audioManager.setSpeakerphoneOn(false);
+            audioManager.setMicrophoneMute(true);
+            setBluetoothAudioRoute(false);
+
+            return true;
+        }
+
+        audioManager.setMode(AudioManager.MODE_IN_COMMUNICATION);
+        audioManager.setMicrophoneMute(false);
+
+        if (audioManager.requestAudioFocus(
+                    null,
+                    AudioManager.STREAM_VOICE_CALL,
+                    AudioManager.AUDIOFOCUS_GAIN)
+                == AudioManager.AUDIOFOCUS_REQUEST_FAILED) {
+            Log.d(TAG, "Audio focus request failed");
+            return false;
+        }
+
+        boolean useSpeaker = (mode == VIDEO_CALL);
+
+        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
+            // On Android >= M we use the AudioDeviceCallback API, so turn on
+            // Bluetooth SCO from the start.
+            if (audioManager.isBluetoothScoAvailableOffCall()) {
+                audioManager.startBluetoothSco();
+            }
+        } else {
+            // On older Android versions we must set the Bluetooth route
+            // manually. Also disable the speaker in that case.
+            setBluetoothAudioRoute(
+                    bluetoothHeadsetMonitor.isHeadsetAvailable());
+            if (bluetoothHeadsetMonitor.isHeadsetAvailable()) {
+                useSpeaker = false;
+            }
+        }
+
+        // XXX: isWiredHeadsetOn is not deprecated when used just for knowing if
+        // there is a wired headset connected, regardless of audio being routed
+        // to it.
+        audioManager.setSpeakerphoneOn(
+                useSpeaker
+                    && !(audioManager.isWiredHeadsetOn()
+                        || audioManager.isBluetoothScoOn()));
+
+        return true;
+    }
+}

android/app/src/main/java/org/jitsi/meet/audiomode/AudioModePackage.java

@@ -0,0 +1,48 @@
+package org.jitsi.meet.audiomode;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Implements {@link ReactPackage} for {@link AudioModeModule}.
+ */
+public class AudioModePackage implements ReactPackage {
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    /**
+     * {@inheritDoc}
+     *
+     * @return List of native modules to be exposed by React Native.
+     */
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new AudioModeModule(reactContext));
+
+        return modules;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<ViewManager> createViewManagers(
+            ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/java/org/jitsi/meet/audiomode/BluetoothHeadsetMonitor.java

@@ -0,0 +1,189 @@
+package org.jitsi.meet.audiomode;
+
+import android.bluetooth.BluetoothAdapter;
+import android.bluetooth.BluetoothDevice;
+import android.bluetooth.BluetoothHeadset;
+import android.bluetooth.BluetoothProfile;
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+import android.media.AudioManager;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+/**
+ * Helper class to detect and handle Bluetooth device changes.  It monitors
+ * Bluetooth headsets being connected / disconnected and notifies the module
+ * about device changes when this occurs.
+ */
+public class BluetoothHeadsetMonitor {
+    /**
+     * {@link AudioModeModule} where this monitor reports.
+     */
+    private final AudioModeModule audioModeModule;
+
+    /**
+     * The {@link Context} in which {@link #audioModeModule} executes.
+     */
+    private final Context context;
+
+    /**
+     * Reference to a proxy object which allows us to query connected devices.
+     */
+    private BluetoothHeadset headset;
+
+    /**
+     * Flag indicating if there are any Bluetooth headset devices currently
+     * available.
+     */
+    private boolean headsetAvailable = false;
+
+    /**
+     * {@link Handler} for running all operations on the main thread.
+     */
+    private final Handler mainThreadHandler
+        = new Handler(Looper.getMainLooper());
+
+    /**
+     * Helper for running Bluetooth operations on the main thread.
+     */
+    private final Runnable updateDevicesRunnable
+        = new Runnable() {
+            @Override
+            public void run() {
+                headsetAvailable
+                    = (headset != null)
+                        && !headset.getConnectedDevices().isEmpty();
+                audioModeModule.onAudioDeviceChange();
+            }
+        };
+
+    public BluetoothHeadsetMonitor(
+            AudioModeModule audioModeModule,
+            Context context) {
+        this.audioModeModule = audioModeModule;
+        this.context = context;
+
+        AudioManager audioManager
+            = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
+
+        if (!audioManager.isBluetoothScoAvailableOffCall()) {
+            Log.w(AudioModeModule.TAG, "Bluetooth SCO is not available");
+            return;
+        }
+
+        if (getBluetoothHeadsetProfileProxy()) {
+            registerBluetoothReceiver();
+
+            // Initial detection.
+            updateDevices();
+        }
+    }
+
+    private boolean getBluetoothHeadsetProfileProxy() {
+        BluetoothAdapter adapter = BluetoothAdapter.getDefaultAdapter();
+
+        if (adapter == null) {
+            Log.w(AudioModeModule.TAG, "Device doesn't support Bluetooth");
+            return false;
+        }
+
+        // XXX: The profile listener listens for system services of the given
+        // type being available to the application. That is, if our Bluetooth
+        // adapter has the "headset" profile.
+        BluetoothProfile.ServiceListener listener
+            = new BluetoothProfile.ServiceListener() {
+                @Override
+                public void onServiceConnected(
+                        int profile,
+                        BluetoothProfile proxy) {
+                    if (profile == BluetoothProfile.HEADSET) {
+                        headset = (BluetoothHeadset) proxy;
+                        updateDevices();
+                    }
+                }
+
+                @Override
+                public void onServiceDisconnected(int profile) {
+                    // The logic is the same as the logic of onServiceConnected.
+                    onServiceConnected(profile, /* proxy */ null);
+                }
+            };
+
+        return
+            adapter.getProfileProxy(
+                    context,
+                    listener,
+                    BluetoothProfile.HEADSET);
+    }
+
+    /**
+     * Returns the current headset availability.
+     *
+     * @return true if there is a Bluetooth headset connected, false otherwise.
+     */
+    public boolean isHeadsetAvailable() {
+        return headsetAvailable;
+    }
+
+    private void onBluetoothReceiverReceive(Context context, Intent intent) {
+        final String action = intent.getAction();
+
+        if (action.equals(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED)) {
+            // XXX: This action will be fired when a Bluetooth headset is
+            // connected or disconnected to the system. This is not related to
+            // audio routing.
+            int state = intent.getIntExtra(BluetoothHeadset.EXTRA_STATE, -99);
+
+            switch (state) {
+            case BluetoothHeadset.STATE_CONNECTED:
+            case BluetoothHeadset.STATE_DISCONNECTED:
+                Log.d(
+                        AudioModeModule.TAG,
+                        "BT headset connection state changed: " + state);
+                updateDevices();
+                break;
+            }
+        } else if (action.equals(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED)) {
+            // XXX: This action will be fired when the connection established
+            // with a Bluetooth headset (called a SCO connection) changes state.
+            // When the SCO connection is active we route audio to it.
+            int state
+                = intent.getIntExtra(AudioManager.EXTRA_SCO_AUDIO_STATE, -99);
+
+            switch (state) {
+            case AudioManager.SCO_AUDIO_STATE_CONNECTED:
+            case AudioManager.SCO_AUDIO_STATE_DISCONNECTED:
+                Log.d(
+                        AudioModeModule.TAG,
+                        "BT SCO connection state changed: " + state);
+                updateDevices();
+                break;
+            }
+        }
+    }
+
+    private void registerBluetoothReceiver() {
+        BroadcastReceiver receiver = new BroadcastReceiver() {
+            @Override
+            public void onReceive(Context context, Intent intent) {
+                onBluetoothReceiverReceive(context, intent);
+            }
+        };
+        IntentFilter filter = new IntentFilter();
+
+        filter.addAction(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED);
+        filter.addAction(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED);
+        context.registerReceiver(receiver, filter);
+    }
+
+    /**
+     * Detects if there are new devices connected / disconnected and fires the
+     * {@link AudioModeModule#onAudioDeviceChange()} callback.
+     */
+    private void updateDevices() {
+        mainThreadHandler.post(updateDevicesRunnable);
+    }
+}

android/app/src/main/java/org/jitsi/meet/proximity/ProximityModule.java

@@ -0,0 +1,101 @@
+package org.jitsi.meet.proximity;
+
+import android.content.Context;
+import android.os.PowerManager;
+import android.os.PowerManager.WakeLock;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.UiThreadUtil;
+
+/**
+ * Module implementing a simple API to enable a proximity sensor-controlled
+ * wake lock. When the lock is held, if the proximity sensor detects a nearby
+ * object it will dim the screen and disable touch controls. The functionality
+ * is used with the conference audio-only mode.
+ */
+public class ProximityModule extends ReactContextBaseJavaModule {
+    /**
+     * React Native module name.
+     */
+    private static final String MODULE_NAME = "Proximity";
+
+    /**
+     * This type of wake lock (the one activated by the proximity sensor) has
+     * been available for a while, but the constant was only exported in API
+     * level 21 (Android Marshmallow) so make no assumptions and use its value
+     * directly.
+     *
+     * TODO: Remove when we bump the API level to 21.
+     */
+    private static final int PROXIMITY_SCREEN_OFF_WAKE_LOCK = 32;
+
+    /**
+     * {@link WakeLock} instance.
+     */
+    private final WakeLock wakeLock;
+
+    /**
+     * Initializes a new module instance. There shall be a single instance of
+     * this module throughout the lifetime of the application.
+     *
+     * @param reactContext The {@link ReactApplicationContext} where this module
+     * is created.
+     */
+    public ProximityModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+
+        WakeLock wakeLock;
+        PowerManager powerManager
+            = (PowerManager)
+                reactContext.getSystemService(Context.POWER_SERVICE);
+
+        try {
+            wakeLock
+                = powerManager.newWakeLock(
+                        PROXIMITY_SCREEN_OFF_WAKE_LOCK,
+                        MODULE_NAME);
+        } catch (Throwable ignored) {
+            wakeLock = null;
+        }
+
+        this.wakeLock = wakeLock;
+    }
+
+    /**
+     * Gets the name of this module to be used in the React Native bridge.
+     *
+     * @return The name of this module to be used in the React Native bridge.
+     */
+    @Override
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    /**
+     * Acquires / releases the proximity sensor wake lock.
+     *
+     * @param enabled {@code true} to enable the proximity sensor; otherwise,
+     * {@code false}.
+     */
+    @ReactMethod
+    public void setEnabled(final boolean enabled) {
+        if (wakeLock == null) {
+            return;
+        }
+
+        UiThreadUtil.runOnUiThread(new Runnable() {
+            @Override
+            public void run() {
+                if (enabled) {
+                    if (!wakeLock.isHeld()) {
+                        wakeLock.acquire();
+                    }
+                } else if (wakeLock.isHeld()) {
+                    wakeLock.release();
+                }
+            }
+        });
+    }
+}

android/app/src/main/java/org/jitsi/meet/proximity/ProximityPackage.java

@@ -0,0 +1,48 @@
+package org.jitsi.meet.proximity;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Implements {@link ReactPackage} for {@link ProximityModule}.
+ */
+public class ProximityPackage implements ReactPackage {
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    /**
+     * {@inheritDoc}
+     *
+     * @return List of native modules to be exposed by React Native.
+     */
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new ProximityModule(reactContext));
+
+        return modules;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<ViewManager> createViewManagers(
+            ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/res/values/styles.xml

@@ -3,6 +3,7 @@
     <!-- Base application theme. -->
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
         <!-- Customize your theme here. -->
+        <item name="android:windowTranslucentStatus">true</item>
     </style>
 
 </resources>

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,10 @@
-rootProject.name = 'jitsi-meet-react'
+rootProject.name = 'jitsi-meet'
 
 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'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
 include ':react-native-vector-icons'

app.js

@@ -1,6 +1,5 @@
 /* application specific logic */
 
-import "babel-polyfill";
 import "jquery";
 import "jquery-contextmenu";
 import "jquery-ui";
@@ -19,9 +18,10 @@ window.toastr = require("toastr");
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
-import API from './modules/API/API';
+import API from './modules/API';
 
 import translation from "./modules/translation/translation";
+import remoteControl from "./modules/remotecontrol/RemoteControl";
 
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
@@ -59,7 +59,8 @@ const APP = {
      */
     ConferenceUrl : null,
     connection: null,
-    API
+    API,
+    remoteControl
 };
 
 // TODO The execution of the mobile app starts from react/index.native.js.

config.js

@@ -20,10 +20,17 @@ var config = { // eslint-disable-line no-unused-vars
     //focusUserJid: 'focus@auth.jitsi-meet.example.com', // The real JID of focus participant - can be overridden here
     //defaultSipNumber: '', // Default SIP number
 
-    // Desktop sharing method. Can be set to 'ext', 'webrtc' or false to disable.
-    desktopSharingChromeMethod: 'ext',
+    // The STUN servers that will be used in the peer to peer connections
+    p2pStunServers: [
+        { urls: "stun:stun.l.google.com:19302" },
+        { urls: "stun:stun1.l.google.com:19302" },
+        { urls: "stun:stun2.l.google.com:19302" }
+    ],
+
     // The ID of the jidesha extension for Chrome.
-    desktopSharingChromeExtId: 'diibjkoicjeejcmhdnailmkgecihlobk',
+    desktopSharingChromeExtId: null,
+    // Whether desktop sharing should be disabled on Chrome.
+    desktopSharingChromeDisabled: true,
     // The media sources to use when using screen sharing with the Chrome
     // extension.
     desktopSharingChromeSources: ['screen', 'window', 'tab'],
@@ -34,13 +41,13 @@ var config = { // eslint-disable-line no-unused-vars
     // extension is required.
     desktopSharingFirefoxExtId: null,
     // Whether desktop sharing should be disabled on Firefox.
-    desktopSharingFirefoxDisabled: true,
+    desktopSharingFirefoxDisabled: false,
     // The maximum version of Firefox which requires a jidesha extension.
     // Example: if set to 41, we will require the extension for Firefox versions
     // 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,14 +60,11 @@ 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
                               // page redirection when call is hangup
     disableSimulcast: false,
-    logStats: false, // Enable logging of PeerConnection stats via the focus
 //    requireDisplayName: true, // Forces the participants that doesn't have display name to enter it when they enter the room.
 //    startAudioMuted: 10, // every participant after the Nth will start audio muted
 //    startVideoMuted: 10, // every participant after the Nth will start video muted
@@ -72,11 +76,26 @@ var config = { // eslint-disable-line no-unused-vars
     'During that time service will not be available. ' +
     'Apologise for inconvenience.',*/
     disableThirdPartyRequests: false,
+    // The minumum value a video's height (or width, whichever is smaller) needs
+    // to be in order to be considered high-definition.
     minHDHeight: 540,
     // If true - all users without token will be considered guests and all users
     // with token will be considered non-guests. Only guests will be allowed to
     // edit their profile.
     enableUserRolesBasedOnToken: false,
     // Suspending video might cause problems with audio playback. Disabling until these are fixed.
-    disableSuspendVideo: true
+    disableSuspendVideo: 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,
+    // Enables peer to peer mode. When enabled system will try to establish
+    // direct connection given that there are exactly 2 participants in
+    // the room. If that succeeds the conference will stop sending data through
+    // the JVB and use the peer to peer connection instead. When 3rd participant
+    // joins the conference will be moved back to the JVB connection.
+    //enableP2P: true
+    // How long we're going to wait, before going back to P2P after
+    // the 3rd participant has left the conference (to filter out page reload)
+    //backToP2PDelay: 5
 };

connection.js

@@ -1,11 +1,19 @@
 /* global APP, JitsiMeetJS, config */
-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;
+const logger = require("jitsi-meet-logger").getLogger(__filename);
 
 /**
  * Checks if we have data to use attach instead of connect. If we have the data
@@ -53,33 +61,49 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * everything is ok, else error.
  */
 function connect(id, password, roomName) {
-
-    let connectionConfig = Object.assign({}, config);
+    const connectionConfig = Object.assign({}, config);
+    const { issuer, jwt } = APP.store.getState()['features/jwt'];
 
     connectionConfig.bosh += '?room=' + roomName;
+
     let connection
-        = new JitsiMeetJS.JitsiConnection(null, config.token, connectionConfig);
+        = new JitsiMeetJS.JitsiConnection(
+            null,
+            jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
+            connectionConfig);
 
     return new Promise(function (resolve, reject) {
         connection.addEventListener(
-            ConnectionEvents.CONNECTION_ESTABLISHED, handleConnectionEstablished
-        );
+            ConnectionEvents.CONNECTION_ESTABLISHED,
+            handleConnectionEstablished);
         connection.addEventListener(
-            ConnectionEvents.CONNECTION_FAILED, handleConnectionFailed
-        );
+            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(
                 ConnectionEvents.CONNECTION_ESTABLISHED,
-                handleConnectionEstablished
-            );
+                handleConnectionEstablished);
             connection.removeEventListener(
                 ConnectionEvents.CONNECTION_FAILED,
-                handleConnectionFailed
-            );
+                handleConnectionFailed);
         }
 
         function handleConnectionEstablished() {
+            APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }
@@ -108,7 +132,6 @@ function connect(id, password, roomName) {
  * @returns {Promise<JitsiConnection>}
  */
 export function openConnection({id, password, retry, roomName}) {
-
     let usernameOverride
         = jitsiLocalStorage.getItem("xmpp_username_override");
     let passwordOverride
@@ -117,25 +140,20 @@ export function openConnection({id, password, retry, roomName}) {
     if (usernameOverride && usernameOverride.length > 0) {
         id = usernameOverride;
     }
-
     if (passwordOverride && passwordOverride.length > 0) {
         password = passwordOverride;
     }
 
-    return connect(id, password, roomName).catch(function (err) {
-        if (!retry) {
-            throw err;
-        }
+    return connect(id, password, roomName).catch(err => {
+        if (retry) {
+            const { issuer, jwt } = APP.store.getState()['features/jwt'];
 
-        if (err === ConnectionErrors.PASSWORD_REQUIRED) {
-            // do not retry if token is not valid
-            if (config.token) {
-                throw err;
-            } else {
+            if (err === ConnectionErrors.PASSWORD_REQUIRED
+                    && (!jwt || issuer === 'anonymous')) {
                 return AuthHandler.requestAuth(roomName, connect);
             }
-        } else {
-            throw err;
         }
+
+        throw err;
     });
 }

connection_optimization/.eslintrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+    'extends': '../react/.eslintrc.js'
+};

connection_optimization/do_external_connect.js

@@ -1,75 +1,82 @@
-/* global config, getRoomName, getConfigParamsFromUrl */
-/* global createConnectionExternally */
+/* global config, createConnectionExternally */
+
+import getRoomName from '../react/features/base/config/getRoomName';
+import parseURLParams from '../react/features/base/config/parseURLParams';
+
 /**
- * Implements extrnal connect using createConnectionExtenally function defined
- * in external_connect.js for Jitsi Meet. Parses the room name and token from
- * the url and executes createConnectionExtenally.
+ * Implements external connect using createConnectionExternally function defined
+ * in external_connect.js for Jitsi Meet. Parses the room name and JSON Web
+ * Token (JWT) from the URL and executes createConnectionExternally.
  *
- * NOTE: If you are using lib-jitsi-meet without Jitsi Meet you should use this
- * file as reference only because the implementation is Jitsi Meet specific.
+ * NOTE: If you are using lib-jitsi-meet without Jitsi Meet, you should use this
+ * file as reference only because the implementation is Jitsi Meet-specific.
  *
  * NOTE: For optimal results this file should be included right after
- * exrnal_connect.js.
+ * external_connect.js.
  */
 
+if (typeof createConnectionExternally === 'function') {
+    // URL params have higher proirity than config params.
+    let url
+        = parseURLParams(window.location, true, 'hash')[
+                'config.externalConnectUrl']
+            || config.externalConnectUrl;
+    let roomName;
+
+    if (url && (roomName = getRoomName())) {
+        url += `?room=${roomName}`;
+
+        const token = parseURLParams(window.location, true, 'search').jwt;
+
+        if (token) {
+            url += `&token=${token}`;
+        }
+
+        createConnectionExternally(
+            url,
+            connectionInfo => {
+                // Sets that global variable to be used later by connect method
+                // in connection.js.
+                window.XMPPAttachInfo = {
+                    status: 'success',
+                    data: connectionInfo
+                };
+                checkForConnectHandlerAndConnect();
+            },
+            errorCallback);
+    } else {
+        errorCallback();
+    }
+} else {
+    errorCallback();
+}
+
 /**
- * Executes createConnectionExternally function.
+ * Check if connect from connection.js was executed and executes the handler
+ * that is going to finish the connect work.
+ *
+ * @returns {void}
  */
-(function () {
-    var hashParams = getConfigParamsFromUrl("hash", true);
-    var searchParams = getConfigParamsFromUrl("search", true);
+function checkForConnectHandlerAndConnect() {
+    window.APP
+        && window.APP.connect.status === 'ready'
+        && window.APP.connect.handler();
+}
 
-    //Url params have higher proirity than config params
-    var url = config.externalConnectUrl;
-    if(hashParams.hasOwnProperty('config.externalConnectUrl'))
-        url = hashParams["config.externalConnectUrl"];
+/**
+ * Implements a callback to be invoked if anything goes wrong.
+ *
+ * @param {Error} error - The specifics of what went wrong.
+ * @returns {void}
+ */
+function errorCallback(error) {
+    // The value of error is undefined if external connect is disabled.
+    error && console.warn(error);
 
-    /**
-     * Check if connect from connection.js was executed and executes the handler
-     * that is going to finish the connect work.
-     */
-    function checkForConnectHandlerAndConnect() {
-
-        if(window.APP && window.APP.connect.status === "ready") {
-            window.APP.connect.handler();
-        }
-    }
-
-    function error_callback(error){
-        if(error) //error=undefined if external connect is disabled.
-            console.warn(error);
-        // Sets that global variable to be used later by connect method in
-        // connection.js
-        window.XMPPAttachInfo = {
-            status: "error"
-        };
-        checkForConnectHandlerAndConnect();
-    }
-
-    if(!url || !window.createConnectionExternally) {
-        error_callback();
-        return;
-    }
-    var room_name = getRoomName();
-    if(!room_name) {
-        error_callback();
-        return;
-    }
-
-    url += "?room=" + room_name;
-
-    var token = hashParams["config.token"] || config.token ||
-        searchParams.jwt;
-    if(token)
-        url += "&token=" + token;
-
-    createConnectionExternally(url, function(connectionInfo) {
-        // Sets that global variable to be used later by connect method in
-        // connection.js
-        window.XMPPAttachInfo = {
-            status: "success",
-            data: connectionInfo
-        };
-        checkForConnectHandlerAndConnect();
-    }, error_callback);
-})();
+    // Sets that global variable to be used later by connect method in
+    // connection.js.
+    window.XMPPAttachInfo = {
+        status: 'error'
+    };
+    checkForConnectHandlerAndConnect();
+}

css/_animations.scss

@@ -66,18 +66,4 @@
 @include keyframes(slideInExtContainer) {
     from { width: 0; }
     to { width: $sidebarWidth; }
-}
-
-/**
-*   Fade in / out animations
-**/
-
-@include keyframes(fadeIn) {
-    from { opacity: 0; }
-    to { opacity: 1; }
-}
-
-@include keyframes(fadeOut) {
-    from { opacity: 1; }
-    to { opacity: 0; }
 }

css/_base.scss

@@ -1,23 +1,32 @@
-* {
+/**
+ * Safari will limit input in input elements to one character when user-select
+ * none is applied. Other browsers already support selecting within inputs while
+ * user-select is none. As such, disallow user-select except on inputs.
+ */
+*:not(input) {
     -webkit-user-select: none;
     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;
 }
 
@@ -80,7 +89,7 @@ form {
     height: 74px;
     background-size: contain;
     background-repeat: no-repeat;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 .leftwatermark {
@@ -102,7 +111,7 @@ form {
     font-size: 11pt;
     color: rgba(255,255,255,.50);
     text-decoration: none;
-    z-index: 100;
+    z-index: $poweredByZ;
 }
 
 .connected {
@@ -122,6 +131,7 @@ form {
     z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
+        max-width: 350px;
     }
 
     &-arrow {

css/_chat.scss

@@ -212,24 +212,24 @@
     line-height: 30px;
 }
 
-::-webkit-scrollbar {
+:not(.default-scrollbar)::-webkit-scrollbar {
     background: #06a5df;
     width: 7px;
 }
 
-::-webkit-scrollbar-button {
+:not(.default-scrollbar)::-webkit-scrollbar-button {
     display: none;
 }
 
-::-webkit-scrollbar-track {
+:not(.default-scrollbar)::-webkit-scrollbar-track {
     background: black;
 }
 
-::-webkit-scrollbar-track-piece {
+:not(.default-scrollbar)::-webkit-scrollbar-track-piece {
     background: black;
 }
 
-::-webkit-scrollbar-thumb {
+:not(.default-scrollbar)::-webkit-scrollbar-thumb {
     background: #06a5df;
     border-radius: 4px;
 }

css/_device_settings_dialog.scss

@@ -1,31 +0,0 @@
-.settingsContent {
-    display: flex;
-    display: -webkit-flex;
-
-    #localVideoPreview {
-        width: 50%;
-        align-self: baseline;
-    }
-
-    .deviceSelection {
-        display: flex;
-        display: -webkit-flex;
-        -webkit-flex: 1;
-        flex: 1;
-        flex-direction: column;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        align-items: left;
-        margin-left: 10px;
-
-        .device {
-            display: flex;
-            margin-bottom: 5px;
-
-            select {
-                flex: 1;
-                margin_right: 5px;
-            }
-        }
-    }
-}

css/_dial-out.scss

@@ -0,0 +1,64 @@
+/**
+ * The dialog content element.
+ */
+.dial-out-content {
+    margin-top: 5px;
+
+   /**
+    * The style of the flag icon.
+    */
+    .dial-out-flag-icon {
+        position: absolute;
+        left: 5px;
+        top: 10px;
+    }
+
+    /**
+     * The style of the dial code element.
+     */
+    .dial-out-code {
+        padding-left: 25px !important;
+    }
+
+    /**
+     * The dial-out dialog error element.
+     */
+    .dial-out-error {
+        color: $errorColor;
+    }
+
+    /**
+     * The style of the dial input element.
+     */
+    .dial-out-input {
+        padding-left: 70px;
+    }
+
+    /**
+     * Re-styling the default dropdown inside the dial-out-content.
+     */
+    .dropdown {
+        left: $formPadding;
+        position: absolute !important;
+        width: 65px
+    }
+
+    /**
+     * Re-styling the default form-control inside the dial-out-content.
+     */
+    .form-control {
+        padding-bottom: 8px !important;
+    }
+
+    .dropdown {
+        display: inline-block;
+        position: relative;
+        overflow: hidden;
+    }
+
+    .dropdown-trigger-icon {
+        position: absolute;
+        right: 0;
+        top: 4px;
+    }
+}

css/_filmstrip.scss

@@ -17,8 +17,8 @@
         flex-direction: column-reverse;
         flex-wrap: nowrap;
         position: relative;
-        z-index: 1;                     // Set z-index to make element visible
-        width: $hideFilmstripButtonWidth;
+        z-index: $zindex1; // Set z-index to make element visible.
+        width: $filmstripToggleButtonWidth;
 
         button {
             font-size: 14px;
@@ -50,16 +50,16 @@
         position:relative;
         height:196px;
         padding: 0;
-        /*The filmstrip should not be covered by the left toolbar*/
+        /* The filmstrip should not be covered by the left toolbar. */
         padding-left: $defaultToolbarSize + 5;
         bottom: 0;
         width:auto;
         border: $thumbnailsBorder solid transparent;
-        z-index: 5;
+        z-index: $filmstripVideosZ;
         transition: bottom 2s;
         overflow: visible !important;
-        /*!!!Removes the gap between the local video container and the remote
-        videos.*/
+        /*!!! Removes the gap between the local video container and the remote
+        videos. */
         font-size: 0pt;
 
         &.hidden {
@@ -70,7 +70,7 @@
             display: none;
             position: relative;
             background-size: contain;
-            border: $thumbnailVideoBorder solid $thumbnailBorderColor;
+            border: $thumbnailVideoBorder solid transparent;
             border-radius: $borderRadius;
             margin: 0 $thumbnailVideoMargin;
 
@@ -79,8 +79,8 @@
             }
 
             /**
-            * Focused video thumbnail.
-            */
+             * Focused video thumbnail.
+             */
             &.videoContainerFocused {
                 transition-duration: 0.5s;
                 -webkit-transition-duration: 0.5s;
@@ -92,25 +92,25 @@
                 0 0 3px $videoThumbnailSelected !important;
             }
 
-            .remotevideomenu {
+            .remotevideomenu > .icon-menu {
                 display: none;
             }
 
             /**
-            * Hovered video thumbnail.
-            */
+             * Hovered video thumbnail.
+             */
             &:hover {
                 cursor: hand;
                 border: $thumbnailVideoBorder solid $videoThumbnailHovered;
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
                 0 0 3px $videoThumbnailHovered;
 
-                .remotevideomenu {
+                .remotevideomenu > .icon-menu {
                     display: inline-block;
                 }
             }
 
-            /* With TemasysWebRTC plugin <object/> element is used
+            /* With the TemasysWebRTC plugin <object/> element is used
             instead of <video/> */
             & > video,
             & > object {
@@ -121,4 +121,13 @@
             }
         }
     }
-}
+
+    /**
+     * Style the filmstrip videos in filmstrip-only mode.
+     */
+    &__videos-filmstripOnly {
+        margin-top: auto;
+        margin-bottom: auto;
+        padding-right: $defaultToolbarSize;
+    }
+}

css/_flag-icon.scss

@@ -0,0 +1,35 @@
+.flag-icon-background {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+}
+.flag-icon {
+  background-size: contain;
+  background-position: 50%;
+  background-repeat: no-repeat;
+  position: relative;
+  display: inline-block;
+  width: 1.33333333em;
+  line-height: 1em;
+}
+.flag-icon:before {
+  content: "\00a0";
+}
+.flag-icon-au {
+    background-image: url(../images/countries/au.svg);
+}
+.flag-icon-ca {
+    background-image: url(../images/countries/ca.svg);
+}
+.flag-icon-de {
+    background-image: url(../images/countries/de.svg);
+}
+.flag-icon-gb {
+    background-image: url(../images/countries/gb.svg);
+}
+.flag-icon-fr {
+    background-image: url(../images/countries/fr.svg);
+}
+.flag-icon-us {
+    background-image: url(../images/countries/us.svg);
+}

css/_font.scss

@@ -25,114 +25,126 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-mic-camera-combined:before {
+    content: "\e903";
+}
 .icon-feedback:before {
-  content: "\e91d";
+    content: "\e91d";
 }
 .icon-toggle-filmstrip:before {
-  content: "\e91c";
+    content: "\e91c";
 }
 .icon-avatar:before {
-  content: "\e901";
+    content: "\e901";
 }
 .icon-hangup:before {
-  content: "\e905";
+    content: "\e905";
 }
 .icon-chat:before {
-  content: "\e906";
+    content: "\e906";
 }
 .icon-download:before {
-  content: "\e902";
+    content: "\e902";
 }
 .icon-edit:before {
-  content: "\e907";
+    content: "\e907";
 }
 .icon-share-doc:before {
-  content: "\e908";
-}
-.icon-telephone:before {
-  content: "\e909";
+    content: "\e908";
 }
 .icon-kick:before {
-  content: "\e904";
+    content: "\e904";
 }
 .icon-menu-up:before {
-  content: "\e91f";
+    content: "\e91f";
 }
 .icon-menu-down:before {
-  content: "\e920";
+    content: "\e920";
 }
 .icon-full-screen:before {
-  content: "\e90b";
+    content: "\e90b";
 }
 .icon-exit-full-screen:before {
-  content: "\e90c";
+    content: "\e90c";
 }
 .icon-star-full:before {
-  content: "\e90a";
+    content: "\e90a";
 }
 .icon-security:before {
-  content: "\e90d";
+    content: "\e90d";
 }
 .icon-security-locked:before {
-  content: "\e90e";
+    content: "\e90e";
 }
 .icon-reload:before {
-  content: "\e90f";
+    content: "\e90f";
 }
 .icon-microphone:before {
-  content: "\e910";
+    content: "\e910";
 }
 .icon-mic-empty:before {
-  content: "\e911";
+    content: "\e911";
 }
 .icon-mic-disabled:before {
-  content: "\e912";
+    content: "\e912";
 }
 .icon-raised-hand:before {
-  content: "\e91e";
+    content: "\e91e";
 }
 .icon-contactList:before {
-  content: "\e91b";
+    content: "\e91b";
 }
 .icon-link:before {
-  content: "\e913";
+    content: "\e913";
 }
 .icon-shared-video:before {
-  content: "\e914";
+    content: "\e914";
 }
 .icon-settings:before {
-  content: "\e915";
+    content: "\e915";
 }
 .icon-star:before {
-  content: "\e916";
+    content: "\e916";
 }
 .icon-switch-camera:before {
-  content: "\e921";
+    content: "\e921";
 }
 .icon-share-desktop:before {
-  content: "\e917";
+    content: "\e917";
 }
 .icon-camera:before {
-  content: "\e918";
+    content: "\e918";
 }
 .icon-camera-disabled:before {
-  content: "\e919";
+    content: "\e919";
 }
 .icon-volume:before {
-  content: "\e91a";
+    content: "\e91a";
 }
 .icon-connection-lost:before {
-  content: "\e900";
+    content: "\e900";
 }
 .icon-connection:before {
-  content: "\e61a";
+    content: "\e61a";
 }
 .icon-recDisable:before {
-  content: "\e613";
+    content: "\e613";
 }
 .icon-recEnable:before {
-  content: "\e614";
+    content: "\e614";
 }
 .icon-presentation:before {
-  content: "\e603";
-}
+    content: "\e603";
+}
+.icon-dialpad:before {
+    content: "\e925";
+}
+.icon-visibility:before {
+    content: "\e923";
+}
+.icon-visibility-off:before {
+    content: "\e924";
+}
+.icon-telephone:before {
+    content: "\e0cd";
+}

css/_inlay.scss

@@ -1,6 +1,6 @@
 .inlay {
     margin-top: 14%;
-    @include border-radius(3px);
+    @include border-radius(4px);
     padding: 40px 38px 44px;
     color: #fff;
     background: $inlayColorBg;
@@ -27,7 +27,87 @@
         font-size: 50px;
     }
 
-    &__button {
-        float: none !important;
+    &-filmstrip-only {
+        background-color: $inlayFilmstripOnlyBg;
+        color: $inlayFilmstripOnlyColor;
+        margin-left: 20px;
+        margin-right: 20px;
+        margin-top: 20px;
+        bottom: 30px;
+        position: absolute;
+        display: flex;
+        max-height: 120px;
+        height: 80%;
+        right: 0px;
+        border-radius: 4px;
+        overflow: hidden;
+        &__content {
+            padding: 20px;
+            display: flex;
+            justify-content: center;
+            position: relative;
+            > .button-control {
+                align-self: center;
+            }
+            > #reloadProgressBar {
+                position: absolute;
+                left: 0px;
+                bottom: 0px;
+                margin-bottom: 0px;
+                width: 100%;
+                border-radius: 0px;
+                > .aui-progress-indicator-value {
+                    border-radius: 0px;
+                }
+            }
+        }
+        &__title {
+            font-size: 18px;
+            font-weight: 600;
+        }
+
+        &__container {
+            align-self: center;
+        }
+
+        &__text {
+            margin-top: 10px;
+            font-size: 14px;
+            font-weight: 600;
+        }
+
+        &__icon {
+            font-size: 50px;
+            align-self: center;
+            color: $inlayIconColor;
+            opacity: 0.6;
+        }
+        &__icon-container {
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+        }
+
+        &__avatar-container {
+            height: 100%;
+            position: relative;
+            > img {
+                height: 100%;
+            }
+        }
+
+        &__icon-background {
+            background: $inlayIconBg;
+            opacity: 0.6;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0px;
+        }
     }
-}
+
+}

css/_jitsi_popover.scss

@@ -2,7 +2,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    z-index: 1010;
+    z-index: $jitsipopoverZ;
     display: none;
     max-width: 300px;
     min-width: 100px;
@@ -10,7 +10,7 @@
     color: $popoverFontColor;
     background-color: $popoverBg;
     background-clip: padding-box;
-    border-radius: 3px;
+    border-radius: $borderRadius;
     /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
     /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
     white-space: normal;

css/_jquery.contextMenu.scss

@@ -1,18 +1,18 @@
 @charset "UTF-8";
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v2.1.1
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2016 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *
- * Date: 2016-02-28T09:53:18.890Z
+/*!
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: v2.1.1
+ *
+ * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://swisnl.github.io/jQuery-contextMenu/
+ *
+ * Copyright (c) 2011-2016 SWIS BV and contributors
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *
+ * Date: 2016-02-28T09:53:18.890Z
  */
 @font-face {
   font-family: "context-menu-icons";
@@ -88,7 +88,7 @@
   list-style-type: none;
   background: #fff;
   border: 1px solid #bebebe;
-  border-radius: 3px;
+  border-radius: $borderRadius;
   -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
           box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
 }
@@ -143,7 +143,7 @@
   position: absolute;
   top: 50%;
   right: 8px;
-  z-index: 1; 
+  z-index: $zindex1;
   width: 0;
   height: 0;
   content: '';
@@ -156,8 +156,8 @@
           transform: translateY(-50%);
 }
 
-/**
- * Inputs
+/**
+ * Inputs
  */
 .context-menu-item.context-menu-input {
   padding: 5px 10px;

css/_keyboard-shortcuts.scss

@@ -6,7 +6,7 @@
     overflow: hidden;
     padding: 20px;
     margin-left: 10px;
-    z-index: 10;
+    z-index: $zindex10;
     border-radius: $borderRadius;
     background-attachment: scroll;
     background-size: auto auto;

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/_notice.scss

@@ -1,11 +1,15 @@
-#notice {
-    position: relative;
-    z-index: 3;
+.notice {
+    position: absolute;
+    left: 50%;
+    z-index: $zindex3;
     margin-top: 6px;
+
+    @include transform(translateX(-50%));
+
+    &__message {
+        background-color: #000000;
+        color: white;
+        padding: 3px;
+        border-radius: 5px;
+    }
 }
-#noticeText {
-    background-color: #000000;
-    color: white;
-    padding: 3px;
-    border-radius: 5px;
-}

css/_popover.scss

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1015;
+  z-index: $popoverZ;
   display: none;
   max-width: 300px;
   min-width: 100px;

css/_popup_menu.scss

@@ -6,7 +6,6 @@
     padding: 0;
     margin: 2px 0;
     bottom: 0;
-    width: 100px;
     height: auto;
 
     &:first-child {
@@ -24,7 +23,8 @@
     }
 
     // Link Appearance
-    &__link {
+    &__link,
+    &__contents {
         display: block;
         box-sizing: border-box;
         text-decoration: none;
@@ -46,11 +46,32 @@
         vertical-align: middle;
     }
 
+    &__contents {
+        display: flex;
+
+        /**
+         * Positioning styles on the slider and its container are used to make
+         * the container fit the popup width, by removing the slider from the
+         * page flow, and then making the slider fit the container.
+         */
+        .popupmenu__slider_container {
+            position: relative;
+            width: 100%;
+
+            .popupmenu__slider {
+                bottom: 50%;
+                position: absolute;
+                top: 50%;
+                width: 100%;
+            }
+        }
+    }
+
     &__icon {
         vertical-align: middle;
         position: relative;
         display: inline-block;
-        width: 20px;
+        min-width: 20px;
         height: 100%;
         text-align: center;
 
@@ -66,4 +87,9 @@
 
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
     display:block !important;
-}
+}
+
+.remote-control-spinner {
+    top: 6px;
+    left: 2px;
+}

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/_side_toolbar_container.scss

@@ -10,7 +10,7 @@
     position: absolute;
     top: 0;
     width: 0;
-    z-index: 800;
+    z-index: $sideToolbarContainerZ;
 
     /**
      * Labels inside the side panel.
@@ -113,6 +113,12 @@
     text-align: center;
 }
 
+#deviceOptionsWrapper {
+    button {
+        float: none;
+    }
+}
+
 /**
  * Profile
  */

css/_toastr.scss

@@ -94,7 +94,7 @@
 #toast-container.notification-bottom-right {
   $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
   bottom: 135px;
-  right: $hideFilmstripButtonWidth + $videoOffset;
+  right: $filmstripToggleButtonWidth + $videoOffset;
 }
 
 #toast-container * {

css/_toolbars.scss

@@ -1,184 +1,260 @@
-.toolbar {
-    background-color: $toolbarBackground;
-    position: relative;
-    z-index: $toolbarZ;
-    height: 100%;
-    pointer-events: auto;
-
-    /**
-     * Splitter button in the toolbar.
-     */
-    &__splitter {
-        display: inline-block;
-        vertical-align: middle;
-        width: 1px;
-        height: 50%;
-        margin: 0 $splitterToolbarButtonMargin;
-        background: $splitterColor;
-    }
-}
-
-#mainToolbarContainer{
-    display: block;
-    position: absolute;
-    text-align: center;
-    top:0;
-    left:0;
-    right:0;
-    z-index: $toolbarZ;
-    pointer-events: none;
-    min-height: 100px;
-    opacity: 0;
-}
-
-#subject {
-    position: relative;
-    z-index: 3;
-    width: auto;
-    padding: 5px;
-    margin-left: 40%;
-    margin-right: 40%;
-    text-align: center;
-    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
-    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
-    border-bottom-left-radius: 12px;
-    border-bottom-right-radius: 12px;
-}
-
-#mainToolbar {
-    height: $defaultToolbarSize;
-    display: inline-block;
-    position: relative;
-    top: 30px;
-    margin-left: auto;
-    margin-right: auto;
-    width: auto;
-    border-radius: 3px;
-    .button:first-child {
-        border-bottom-left-radius: 3px;
-        border-top-left-radius: 3px;
-    }
-    .button:last-child {
-        border-bottom-right-radius: 3px;
-        border-top-right-radius: 3px;
-    }
-}
-
-#extendedToolbar {
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-box;
-    display: -webkit-flex;
-    display: flex;
-    width: $defaultToolbarSize;
-    height: 100%;
-    top: 0;
-    left: 0;
-    padding-top: 10px;
-    box-sizing: border-box;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    transform: translateX(-100%);
-    -webkit-transform: translateX(-100%);
-}
-
-#toolbar_button_hangup {
-    color: #BF2117;
-    font-size: $hangupFontSize !important;
-}
-
-#toolbar_button_etherpad {
-    display: none;
-}
-
-#mainToolbar a.button:last-child::after {
-    content: none;
-}
-
-.button {
-    display: inline-block;
-    position: relative;
-    color: #FFFFFF;
-    top:0px;
-    width: 50px;
-    height: 50px;
-    cursor: pointer;
-    text-align: center;
-    z-index: 1;
-    font-size: $toolbarFontSize !important;
-    line-height: 50px !important;
-    vertical-align: middle;
-}
-
-.button[disabled] {
-    opacity: 0.5;
-}
-
-.button.unclickable {
-    cursor: default;
-}
-
-.button.toggled {
-    background: $toolbarToggleBackground !important;
-}
-
-a.button.unclickable:hover,
-a.button.unclickable:active,
-a.button.unclickable.selected{
-    cursor: default;
-    background: none;
-}
-
-a.button:hover,
-a.button:active,
-a.button.selected {
-    cursor: pointer;
-    text-decoration: none;
-    // sum opacity with background layer should give us 0.8
-    background: $toolbarSelectBackground;
-}
-
-a.button>#avatar {
-    width: 30px;
-    border-radius: 50%;
-    padding-top: 10px;
-    padding-bottom: 10px;
-}
-
-#feedbackButton {
-    margin-top: auto;
-}
-
 /**
  * Round badge.
  */
 .badge-round {
     background-color: $toolbarBadgeBackground;
-    color: $toolbarBadgeColor;
-    font-size: 9px;
-    line-height: 13px;
-    font-weight: 700;
-    text-align: center;
     border-radius: 50%;
-    min-width: 13px;
-    overflow: hidden;
-    text-overflow: ellipsis;
     box-sizing: border-box;
-    vertical-align: middle;
+    color: $toolbarBadgeColor;
     // Do not inherit the font-family from the toolbar button, because it's an
     // icon style.
     font-family: $baseFontFamily;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 13px;
+    min-width: 13px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+ /**
+  * Toolbar button styles.
+  */
+.button {
+    color: #FFFFFF;
+    cursor: pointer;
+    z-index: $zindex1;
+    display: inline-block;
+    font-size: $toolbarFontSize !important;
+    height: 50px;
+    line-height: 50px !important;
+    position: relative;
+    text-align: center;
+    top:0px;
+    vertical-align: middle;
+    width: 50px;
+
+    &_hangup {
+        color: $hangupColor;
+        font-size: $hangupFontSize !important;
+    }
+
+    &[disabled] {
+        opacity: 0.5;
+    }
+
+    &:hover, &:active {
+        cursor: pointer;
+        text-decoration: none;
+    }
+
+    &:not(.toggled) {
+        &:hover, &:active {
+            // sum opacity with background layer should give us 0.8
+            background: $toolbarSelectBackground;
+        }
+    }
+
+    &.toggled {
+        background: $toolbarToggleBackground;
+
+        &.icon-camera {
+            @extend .icon-camera-disabled;
+        }
+
+        &.icon-full-screen {
+            @extend .icon-exit-full-screen;
+        }
+
+        &.icon-microphone {
+            @extend .icon-mic-disabled;
+        }
+
+        &.icon-visibility {
+            @extend .icon-visibility-off;
+        }
+    }
+
+    &.unclickable {
+        cursor: default;
+
+        &:hover, &:active, &.selected {
+            background: none;
+            cursor: default;
+        }
+    }
+}
+
+.toolbar-container {
+    display: block;
+    left:0;
+    min-height: 100px;
+    opacity: 0;
+    pointer-events: none;
+    position: absolute;
+    right:0;
+    text-align: center;
+    top:0;
+    z-index: $toolbarZ;
 }
 
 /**
- * Toolbar specific round badge.
+ * Common toolbar styles.
  */
-.toolbar .badge-round {
-    position: absolute;
-    right: 9px;
-    bottom: 9px;
+.toolbar {
+    background-color: $toolbarBackground;
+    height: 100%;
+    pointer-events: auto;
+    position: relative;
+    z-index: $toolbarZ;
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    &__splitter {
+        background: $splitterColor;
+        display: inline-block;
+        height: 50%;
+        margin: 0 $splitterToolbarButtonMargin;
+        vertical-align: middle;
+        width: 1px;
+    }
+
+    /**
+     * Primary toolbar styles.
+     */
+    &_primary {
+        position: absolute;
+        left: 50%;
+        top: 30px;
+        display: inline-block;
+        width: auto;
+        height: $defaultToolbarSize;
+        border-radius: 3px;
+        opacity: 0;
+
+        @include transform(translateX(-50%));
+
+        .button:first-child {
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        }
+        .button:last-child {
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        }
+    }
+
+    &_primary a.button:last-child::after {
+        content: none;
+    }
+
+    /**
+     * Secondary toolbar styles.
+     */
+    &_secondary {
+        position: absolute;
+        align-items: center;
+        box-sizing: border-box;
+        display: -moz-box;
+        display: -ms-flexbox;
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        flex-direction: column;
+        flex-wrap: nowrap;
+        height: 100%;
+        justify-content: flex-start;
+        left: 0;
+        padding-top: 10px;
+        top: 0;
+        transform: translateX(-100%);
+        width: $defaultToolbarSize;
+        -webkit-transform: translateX(-100%);
+
+        .button.toggled:not(.icon-raised-hand):not(.button-active) {
+            background: $toolbarSelectBackground;
+            cursor: pointer;
+            text-decoration: none;
+
+            &.unclickable {
+                cursor: default;
+
+                &:hover, &:active, &.selected {
+                    background: none;
+                    cursor: default;
+                }
+            }
+        }
+    }
+
+    /**
+     * Styles the toolbar in filmstrip-only mode.
+     */
+    &_filmstrip-only {
+        border-radius: 3px;
+        bottom: 0;
+        display: inline-block;
+        height: auto;
+        position: absolute;
+        right: 0;
+        width: $defaultToolbarSize;
+
+        .button:first-child {
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+        }
+        .button:last-child {
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+    }
+
+    /**
+     * Toolbar specific round badge.
+     */
+    .badge-round {
+        bottom: 9px;
+        position: absolute;
+        right: 9px;
+    }
+}
+
+.subject {
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    margin-left: 40%;
+    margin-right: 40%;
+    padding: 5px;
+    position: relative;
+    text-align: center;
+    width: auto;
+    z-index: $zindex3;
+
+    &.subject_slide-in {
+        top: 80px;
+        @include transition(top .3s ease-in);
+    }
+
+    &.subject_slide-out {
+        top: 0;
+        @include transition(top .3s ease-out);
+    }
+}
+
+a.button>#avatar {
+    border-radius: 50%;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    width: 30px;
+}
+
+#feedbackButton {
+    margin-top: auto;
 }
 
 /**
@@ -272,9 +348,13 @@ a.button>#avatar {
  * START of fade in animation for main toolbar
  */
 .fadeIn {
-    @include animation('fadeIn .3s linear .2s forwards');
+    opacity: 1;
+
+    @include transition(all .3s ease-in);
 }
 
 .fadeOut {
-    @include animation('fadeOut .5s linear forwards');
+    opacity: 0;
+
+    @include transition(all .3s ease-out);
 }

css/_variables.scss

@@ -4,22 +4,21 @@
  * Style variables
  */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$toolbarFontSize: 1.9em;
+$hangupColor: #bf2117;
 $hangupFontSize: 2em;
 
 /**
  * Size variables.
  */
-$defaultToolbarSize: 50px;
 
 // Video layout.
 $thumbnailToolbarHeight: 22px;
 $thumbnailIndicatorBorder: 2px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
-$thumbnailVideoMargin: 5px;
+$thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
-$hideFilmstripButtonWidth: 17px;
+$filmstripToggleButtonWidth: 17px;
 
 
 /**
@@ -34,14 +33,16 @@ $tooltipBg: rgba(0,0,0, 0.7);
 /**
  * Toolbar
  */
-$toolbarTitleColor: #FFFFFF;
-$toolbarTitleFontSize: 19px;
+$defaultToolbarSize: 50px;
+$splitterToolbarButtonMargin: 18px;
 $toolbarBackground: rgba(0, 0, 0, 0.5);
-$toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
+$toolbarFontSize: 1.9em;
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
 $toolbarToggleBackground: #12499C;
-$splitterToolbarButtonMargin: 18px;
 
 /**
  * Main controls
@@ -78,6 +79,14 @@ $rateStarDefault: #ccc;
 $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
 
+/**
+ * Modals
+ */
+$modalButtonFontSize: 14px;
+$modalMockAKInputBackground: #fafbfc;
+$modalMockAKInputBorder: 1px solid #f4f5f7;
+$modalTextColor: #333;
+
 /**
  * Notifications
  */
@@ -104,13 +113,26 @@ $happySoftwareBackground: transparent;
 /**
  * Z-indexes. TODO: Replace this by a function.
  */
-$tooltipsZ: 901;
-$toolbarZ: 900;
-$overlayZ: 902;
-$notificationZ: 1012;
-$ringingZ: 800;
-$dropdownZ: 901;
+$zindex0: 0;
+$zindex1: 1;
+$zindex2: 2;
+$zindex3: 3;
+$filmstripVideosZ: 5;
+$zindex10: 10;
+$reloadZ: 20;
+$poweredByZ: 100;
+$ringingZ: 300;
+$sideToolbarContainerZ: 300;
+$toolbarZ: 400;
+$tooltipsZ: 401;
 $dropdownMaskZ: 900;
+$dropdownZ: 901;
+$jitsipopoverZ: 1010;
+$centeredVideoLabelZ: 1011;
+$notificationZ: 1012;
+$popoverZ: 1015;
+$overlayZ: 1016;
+
 
 /**
  * Font Colors
@@ -127,3 +149,16 @@ $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
 $linkHoverFontColor: #287ade;
+$formPadding: 16px;
+
+/**
+ * Unsupported browser
+ */
+$primaryUnsupportedBrowserButtonBgColor: #17a0db;
+$unsupportedBrowserButtonBgColor: #ff9a00;
+$unsupportedBrowserTextColor: #4a4a4a;
+$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTitleColor: #fff;
+$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
+$unsupportedDesktopBrowserTextFontSize: 21px;

css/_videolayout_default.scss

@@ -19,7 +19,7 @@
     &__background {
         @include topLeft();
         background-color: black;
-        border-radius: $borderRadius - 1;
+        border-radius: $borderRadius;
         width: 100%;
         height: 100%;
     }
@@ -31,7 +31,7 @@
     &__toptoolbar {
         position: absolute;
         left: 0;
-        z-index: 3;
+        z-index: $zindex3;
         width: 100%;
         box-sizing: border-box; // Includes the padding in the 100% width.
     }
@@ -59,7 +59,7 @@
             float: left;
             @include circle($thumbnailIndicatorSize);
             box-sizing: border-box;
-            z-index: 3;
+            z-index: $zindex3;
             background: $dominantSpeakerBg;
             color: $thumbnailPictogramColor;
             border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
@@ -113,7 +113,13 @@
         width: 100%;
         height: 100%;
         visibility: hidden;
-        z-index: 2;
+        z-index: $zindex2;
+    }
+
+    &.audio-only {
+        .videoThumbnailProblemFilter {
+            filter: none;
+        }
     }
 }
 
@@ -161,7 +167,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
 }
@@ -171,7 +177,7 @@
 }
 
 #etherpad {
-    z-index: 0;
+    z-index: $zindex0;
 }
 
 /**
@@ -193,7 +199,7 @@
     overflow: hidden;
     white-space: nowrap;
     line-height: $thumbnailToolbarHeight;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -233,7 +239,7 @@
     padding: 3px 5px;
     font-size: 9pt;
     cursor: pointer;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -283,7 +289,7 @@
     top: 0px;
     right: 0;
     margin: 7px;
-    z-index: 3;
+    z-index: $zindex3;
     width: 18px;
     height: 13px;
     color: #FFF;
@@ -301,7 +307,7 @@
     margin-top: -17px;
     width: 6px;
     height: 35px;
-    z-index: 2;
+    z-index: $zindex2;
     border: none;
 
     .audiodot-top,
@@ -344,13 +350,13 @@
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -webkit-background-clip: padding-box;
-    z-index: 20; /*The reload button should appear on top of the header!*/
+    z-index: $reloadZ; /*The reload button should appear on top of the header!*/
 }
 
 .audiolevel {
     display: inline-block;
     position: absolute;
-    z-index: 0;
+    z-index: $zindex0;
     border-radius:1px;
     pointer-events: none;
 }
@@ -408,7 +414,7 @@
 .noMic {
     position: absolute;
     border-radius: 8px;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noMic.png");
@@ -420,7 +426,7 @@
 .noVideo {
     position: absolute;
     border-radius: 8px;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noVideo.png");
@@ -453,7 +459,7 @@
     display: none;
     position: absolute;
     width: auto;
-    z-index: 2;
+    z-index: $zindex2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -474,9 +480,10 @@
 #localConnectionMessage {
     display: none;
     position: absolute;
+    left: 0;
     width: 100%;
     top:50%;
-    z-index: 2;
+    z-index: $zindex2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -488,14 +495,23 @@
                     0px 0px 1px rgba(0,0,0,0.3);
 }
 
+.audio-only-label {
+    display: flex;
+    height: auto;
+    justify-content: center;
+    z-index: $centeredVideoLabelZ;
+}
+
+.audio-only-label,
 .video-state-indicator {
     background: $videoStateIndicatorBackground;
     color: $videoStateIndicatorColor;
+    cursor: default;
     font-size: 13px;
+    height: 40px;
     line-height: 20px;
     text-align: center;
     min-width: 40px;
-    height: 40px;
     padding: 10px 5px;
     border-radius: 50%;
     position: absolute;
@@ -504,13 +520,13 @@
 
 #videoResolutionLabel,
 .centeredVideoLabel {
-    display: none;
-    z-index: 1011;
+    z-index: $centeredVideoLabelZ;
 }
 
 .centeredVideoLabel {
     bottom: 45%;
     border-radius: 2px;
+    display: none;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
 
@@ -527,4 +543,58 @@
 
 .moveToCorner + .moveToCorner {
     right: 80px;
-}
+}
+
+.video-state-indicator-menu {
+    display: none;
+    padding: 10px;
+    position: absolute;
+    right: -10px;
+    top: 20px;
+
+    .video-state-indicator-menu-options {
+        background: $popoverBg;
+        border-radius: 3px;
+        color: $popoverFontColor;
+        margin-top: 20px;
+        padding: 5px 0;
+        position: relative;
+
+        div {
+            cursor: pointer;
+            padding: 10px;
+            padding-right: 30px;
+            text-align: left;
+            white-space: nowrap;
+
+            &.active {
+                background: $toolbarToggleBackground;
+            }
+            &:hover:not(.active) {
+                background: $popupMenuSelectedItemBackground;
+            }
+
+            i {
+                margin-right: 5px;
+                vertical-align: middle;
+            }
+        }
+    }
+
+    .video-state-indicator-menu-options::after {
+        content: " ";
+        border-color: transparent transparent $popoverBg transparent;
+        border-style: solid;
+        border-width: 5px;
+        position: absolute;
+        right: 15px;
+        top: -10px;
+    }
+}
+
+.video-state-indicator:hover,
+.video-state-indicator *:hover {
+    .video-state-indicator-menu {
+        display: block;
+    }
+}

css/_welcome_page.scss

@@ -22,7 +22,7 @@
     font-weight: 500;
     font-size: 16px;
     color: #acacac;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 #disable_welcome:checked + label
@@ -35,7 +35,7 @@
     font-weight: 500;
     font-size: 16px;
     color: #acacac;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 #enter_room_form {
@@ -74,7 +74,7 @@
         float: left;
         background-color: #FFFFFF;
         position: relative;
-        z-index: 2;
+        z-index: $zindex2;
     }
 
     &__reload {
@@ -83,7 +83,7 @@
         color: #acacac;
         font-size: 1.9em;
         line-height: 55px;
-        z-index: 3;
+        z-index: $zindex3;
         float:  left;
         cursor: pointer;
         text-align: center;
@@ -104,7 +104,7 @@
         outline: none;
         float:left;
         position: relative;
-        z-index: 2;
+        z-index: $zindex2;
     }
 }
 

css/components/_button-control.scss

@@ -57,6 +57,18 @@
         }
     }
 
+    &_overlay {
+        color: $primaryButtonColor;
+        background-color: $overlayButtonBg;
+        border-radius: 2px;
+        border: none;
+
+        &:hover {
+            background-color: $primaryButtonBackground;
+            border: none;
+        }
+    }
+
     &_primary {
         background-color: $primaryButtonBackground;
         border: 1px solid $primaryButtonBackground;
@@ -86,4 +98,4 @@
     &_center {
         float: none !important;
     }
-}
+}

css/components/_form-control.scss

@@ -1,5 +1,5 @@
 .form-control {
-    padding: 16px 0;
+    padding: $formPadding 0;
 
     &:first-child {
         padding-top: 0;

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

@@ -26,19 +26,24 @@
 
 @import 'font';
 @import 'font-awesome';
-
 /* Fonts END */
 
+@import 'flag-icon';
+
 /* Modules BEGIN */
 
+@import 'dial-out';
 @import 'toastr';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
+@import 'modals/desktop-picker/desktop-picker';
+@import 'modals/device-selection/device-selection';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
+@import 'modals/speaker_stats/speaker_stats';
 @import 'videolayout_default';
 @import 'notice';
 @import 'popup_menu';
@@ -52,7 +57,6 @@
 @import 'welcome_page';
 @import 'toolbars';
 @import 'side_toolbar_container';
-@import 'device_settings_dialog';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
@@ -60,12 +64,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/main';
 
 /* Modules END */

css/modals/_dialog.scss

@@ -76,3 +76,16 @@
         border-bottom: 1px solid $auiBorderColor;
     }
 }
+
+.modal-dialog-form {
+    color: $modalTextColor;
+
+    .input-control {
+        background: $modalMockAKInputBackground;
+        border: $modalMockAKInputBorder;
+        color: inherit;
+    }
+}
+.modal-dialog-footer {
+    font-size: $modalButtonFontSize;
+}

css/modals/desktop-picker/_desktop-picker.scss

@@ -0,0 +1,59 @@
+.desktop-picker-pane {
+    height: 320px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    width: 100%;
+
+    &.source-type-screen {
+        .desktop-picker-source {
+            margin-left: auto;
+            margin-right: auto;
+            width: 50%;
+        }
+
+        .desktop-source-preview-thumbnail {
+            width: 100%;
+        }
+
+        .desktop-source-preview-label {
+            display: none;
+        }
+    }
+
+    &.source-type-window {
+        .desktop-picker-source {
+            display: inline-block;
+            width: 30%;
+        }
+    }
+}
+
+.desktop-picker-source {
+    color: $defaultDarkFontColor;
+    margin-top: 10px;
+    text-align: center;
+
+    &.is-selected {
+        .desktop-source-preview-image-container {
+            background: rgba(0, 0, 0, 0.1);
+            border-radius: $borderRadius;
+        }
+    }
+}
+
+.desktop-source-preview-label {
+    margin-top: 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.desktop-source-preview-thumbnail {
+    box-shadow: 5px 5px 5px grey;
+    height: auto;
+    max-width: 100%;
+}
+
+.desktop-source-preview-image-container {
+    padding: 10px;
+}

css/modals/device-selection/_device-selection.scss

@@ -0,0 +1,132 @@
+.device-selection {
+    color: $feedbackInputTextColor;
+
+    .device-selectors {
+        font-size: 14px;
+
+        > div {
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        > div:last-child {
+            margin-bottom: 5px;
+        }
+
+        .device-selector-icon {
+            align-self: center;
+            color: inherit;
+            font-size: 20px;
+            margin-left: 3px;
+        }
+
+        /* device-selector-trigger stylings attempt to mimic AtlasKit button */
+        .device-selector-trigger {
+            background-color: rgba(9, 30, 66, 0.04);
+            border-radius: 3px;
+            color: #505f79;
+            display: flex;
+            height: 2.3em;
+            justify-content: space-between;
+            line-height: 2.3em;
+            overflow: hidden;
+            padding: 0 8px;
+
+            &:hover {
+                background-color: rgba(9,30,66,.08);
+            }
+        }
+        .device-selector-trigger-disabled {
+            .device-selector-trigger {
+                color: #a5adba;
+                cursor: default;
+            }
+        }
+
+        .device-selector-trigger-text {
+            overflow: hidden;
+            margin-left: 8px;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+        }
+    }
+
+    .device-selection-column {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: top;
+
+        &.column-selectors {
+            margin-left: 15px;
+            width: 45%;
+        }
+
+        &.column-video {
+            width: 50%;
+        }
+    }
+
+    .device-selection-video-container {
+        border-radius: 3px;
+        margin-bottom: 5px;
+
+        .video-input-preview {
+            margin-top: 2px;
+            position: relative;
+
+            > video {
+                border-radius: 3px;
+            }
+
+            .video-input-preview-error {
+                color: $participantNameColor;
+                display: none;
+                left: 0;
+                position: absolute;
+                right: 0;
+                text-align: center;
+                top: 50%;
+            }
+
+            &.video-preview-has-error {
+                background: black;
+
+                .video-input-preview-error {
+                    display: block;
+                }
+            }
+
+            .video-input-preview-display {
+                height: auto;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+    }
+
+    .audio-output-preview {
+        font-size: 14px;
+        margin-top: 10px;
+        a {
+            cursor: pointer;
+            text-decoration: none;
+        }
+    }
+
+    .audio-input-preview {
+        background: #f4f5f7;
+        border-radius: 5px;
+        height: 6px;
+
+        .audio-input-preview-level {
+            background: #0052cc;
+            border-radius: 5px;
+            height: 100%;
+            -webkit-transition: width .1s ease-in-out;
+            -moz-transition: width .1s ease-in-out;
+            -o-transition: width .1s ease-in-out;
+            transition: width .1s ease-in-out;
+        }
+    }
+}

css/modals/invite/_invite.scss

@@ -4,4 +4,84 @@
  */
 #inviteDialogRemovePassword {
     cursor: hand;
-}
+}
+
+.invite-dialog {
+    .dial-in-numbers {
+        .dial-in-numbers-conference-id {
+            color: orange;
+            margin-left: 3px;
+        }
+
+        /*
+         * dial-in-numbers-copy styling is needed for the feature of copying
+         * text to the clipboard. The styling keeps the element invisible
+         * to the user but still programmatically selectable for copying.
+         */
+        .dial-in-numbers-copy {
+            opacity: 0;
+            pointer-events: none;
+            position: fixed;
+            -webkit-user-select: text;
+            user-select: text;
+        }
+
+        .dial-in-numbers-trigger {
+            position: relative;
+            width: 100%;
+
+            .dial-in-numbers-trigger-icon {
+                position: absolute;
+                right: 0;
+                top: 4px;
+            }
+        }
+
+        .is-disabled,
+        .is-loading {
+            .dial-in-numbers-trigger-icon {
+                display: none;
+            }
+        }
+    }
+
+    .form-control {
+        padding: 0;
+    }
+
+    .inviteLink {
+        color: $readOnlyInputColor;
+    }
+
+    .lock-state {
+        display: flex;
+    }
+
+    .password-overview {
+        margin-top: 10px;
+
+        .form-control {
+            margin-top: 10px;
+        }
+
+        .password-overview-status,
+        .remove-password {
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .password-overview-toggle-edit,
+        .remove-password-link {
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        .remove-password {
+            margin-top: 15px;
+        }
+    }
+
+    .remove-password-current {
+        color: $inputControlEmColor;
+    }
+}

css/modals/speaker_stats/_speaker_stats.scss

@@ -0,0 +1,55 @@
+.speaker-stats {
+    list-style: none;
+    padding: 0;
+    width: 100%;
+    font-weight: 500;
+
+    .speaker-stats-item__status-dot {
+        position: relative;
+        display: block;
+        width: 9px;
+        height: 9px;
+        border-radius: 50%;
+        margin: 0 auto;
+
+        &.status-active {
+            background: green;
+        }
+
+        &.status-inactive {
+            background: gray;
+        }
+    }
+
+    .status-user-left {
+        color: $placeHolderColor;
+    }
+
+    .speaker-stats-item__status,
+    .speaker-stats-item__name,
+    .speaker-stats-item__time {
+        display: inline-block;
+        margin: 5px 0;
+        vertical-align: middle;
+    }
+    .speaker-stats-item__status {
+        width: 5%;
+    }
+    .speaker-stats-item__name {
+        width: 40%;
+    }
+    .speaker-stats-item__time {
+        width: 55%;
+    }
+
+    .speaker-stats-item:nth-child(even) {
+        background: whitesmoke;
+    }
+
+    .speaker-stats-item__name,
+    .speaker-stats-item__time {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}

css/overlay/_overlay.scss

@@ -8,10 +8,16 @@
         position: fixed;
         z-index: $overlayZ;
         background: $defaultBackground;
+        &.filmstrip-only {
+            @include transparentBg($filmstripOnlyOverlayBg, 0.8);
+        }
     }
 
     &__container-light {
         @include transparentBg($defaultBackground, 0.7);
+        &.filmstrip-only {
+            @include transparentBg($filmstripOnlyOverlayBg, 0.2);
+        }
     }
 
     &__content {
@@ -21,6 +27,11 @@
         width: 56%;
         left: 50%;
         @include transform(translateX(-50%));
+        &.filmstrip-only {
+            left: 0px;
+            width: 100%;
+            @include transform(none);
+        }
 
         &_bottom {
             position: absolute;
@@ -33,4 +44,4 @@
         bottom: 24px;
         width: 100%;
     }
-}
+}

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,7 @@
 #reloadProgressBar {
     width: 180px;
     margin: 5px auto;
-}
+    > .aui-progress-indicator-value {
+        background: $reloadProgressBarBg;
+    }
+}

css/themes/_light.scss

@@ -8,6 +8,8 @@ $baseLight: #FFFFFF;
 */
 $controlBackground: $baseLight;
 $controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
 
 /**
 * Buttons
@@ -33,10 +35,14 @@ $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+$overlayButtonBg: #0074E0;
+
 /**
 * Color variables
 **/
 $defaultBackground: #474747;
+$filmstripOnlyOverlayBg: #000;
+$reloadProgressBarBg: #0074E0;
 
 /**
 * Connection indicator
@@ -58,6 +64,10 @@ $dialogTitleFontWeight: 400;
 **/
 $inlayColorBg: lighten($defaultBackground, 20%);
 $inlayBorderColor: lighten($auiDialogContentBg, 10%);
+$inlayIconBg: #000;
+$inlayIconColor: #fff;
+$inlayFilmstripOnlyColor: #474747;
+$inlayFilmstripOnlyBg: #fff;
 
 // Main controls
 $inputBackground: $controlBackground;
@@ -85,9 +95,6 @@ $popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
 // Toolbar
 $splitterColor: #ccc;
 
-// Thumbnail
-$thumbnailBorderColor: rgba(71, 71, 71, .7);
-
 /**
  * Forms
  */

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

@@ -0,0 +1,39 @@
+.unsupported-desktop-browser {
+    @include absoluteAligning();
+
+    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: $linkFontColor;
+        @include transition(color .1s ease-out);
+
+        &:hover {
+            color: $linkHoverFontColor;
+            cursor: pointer;
+            text-decoration: none;
+
+            @include transition(color .1s ease-in);
+        }
+    }
+}

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

@@ -0,0 +1,69 @@
+.unsupported-mobile-browser {
+    background-color: #fff;
+    height: 100vh;
+    padding: 35px 0;
+    width: 100vw;
+
+    &__body {
+        color: $unsupportedBrowserTextColor;
+        margin: auto;
+        max-width: 40em;
+        text-align: center;
+        width: 75%;
+
+        a:active {
+            text-decoration: none;
+        }
+    }
+
+    &__text {
+        font-size: 1.8em;
+        line-height: em(29px, 21px);
+        margin-bottom: 0.65em;
+
+        &_small {
+            font-size: 1.5em;
+            margin-bottom: 1em;
+            margin-top: em(21, 18);
+
+            strong {
+                font-size: em(21, 18);
+            }
+        }
+    }
+
+    &__logo {
+        height: 108px;
+        width: 77px;
+    }
+
+    &__button {
+        border: 0;
+        height: 42px;
+        margin: 0 auto;
+        max-width: 300px;
+        width: 98%;
+        @include border-radius(8px);
+        background-color: $unsupportedBrowserButtonBgColor;
+        font-size: 1.5em;
+        font-weight: 300;
+        letter-spacing: 0.5px;
+        text-shadow: 0px 1px 2px $unsupportedBrowserTextColor;
+
+        // Disable standard button effects.
+        box-shadow: none;
+        outline: none;
+
+        &:active {
+            background-color: $unsupportedBrowserButtonBgColor;
+        }
+
+        &_primary {
+            background-color: $primaryUnsupportedBrowserButtonBgColor;
+
+            &:active {
+                background-color: $primaryUnsupportedBrowserButtonBgColor;
+            }
+        }
+    }
+}

css/unsupported_browser.scss

@@ -1,138 +0,0 @@
-@import 'variables';
-
-body {
-    width:100%;
-    height:100%;
-    background-color: white;
-    color: #424242;
-    font-family: $baseFontFamily;
-    font-size: 28px;
-    margin:0;
-    padding:0;
-}
-#wrap{
-    display: block;
-    position: absolute;
-    width:500px;
-    height: 565px;
-    overflow:hidden;
-    text-align: center;
-    margin: auto;
-    top: 0; left: 0; bottom: 0; right: 0;
-}
-.firefox{
-    font-size: 11pt;
-    color: #c8c8c8;
-    width: 468px;
-    text-align: center;
-    margin: 30px auto 0px auto;
-    padding-left: 15px;
-}
-#text{
-    display:inline-block;
-    font-size: 28px;
-    /* width: 568px; */
-    vertical-align:middle;
-    padding-top: 25px;
-}
-
-a {
-    color: #087dba;
-    text-decoration:none;
-}
-
-.browser {
-    width: 138px;
-    height: 163px;
-    margin-top: 5px;
-    background-color: #e8e8e8;
-    border: 1px solid #cfcfcf;
-    border-radius: 10px;
-}
-
-.browser_wrapper
-{
-    width: 138px;
-    /* height: 188px; */
-    vertical-align: middle;
-    color: #929391;
-    font-size: 20px;
-    float: left;
-    margin-left: 15px;
-    margin-top: 5px;
-}
-
-.browser_text
-{
-    height: 2em;
-}
-.supported_browsers
-{
-    margin: 0px auto 0px auto;
-    /* width: 660px; */
-}
-
-.clear
-{
-    clear: both;
-}
-
-.button
-{
-    background-color: #62c82a;
-    border: 1px solid #3c8117;
-    border-radius: 10px;
-    color: #FFFFFF;
-    font-size: 12px;
-    text-align: center;
-    width: 115px;
-    height: 26px;
-    padding-top: 13px;
-    margin: 15px auto 0px auto;
-}
-
-.logo
-{
-    margin: 20px auto 0px auto;
-}
-
-#chrome_logo
-{
-    width: 78px;
-    height: 78px;
-    background-image: url('../images/chrome.png');
-}
-#chromium_logo
-{
-    width: 77px;
-    height: 78px;
-    background-image: url('../images/chromium.png');
-}
-#firefox_logo
-{
-    width: 86px;
-    height: 80px;
-    background-image: url('../images/firefox.png');
-}
-
-#opera_logo
-{
-    width: 73px;
-    height: 78px;
-    background-image: url('../images/opera.png');
-}
-
-#safari_logo
-{
-    width: 78px;
-    height: 79px;
-    background-image: url('../images/safari.png');
-}
-
-#ie_logo
-{
-    width: 80px;
-    height: 78px;
-    background-image: url('../images/ie.png');
-}
-

debian/jitsi-meet-tokens.install

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

debian/jitsi-meet-tokens.postinst

@@ -48,7 +48,9 @@ case "$1" in
         db_stop
 
         if [ -f "$PROSODY_HOST_CONFIG" ] ; then
-            if grep -q "plugin_paths" "$PROSODY_HOST_CONFIG"; then
+            # search for --plugin_paths, if this is not enabled this is the
+            # first time we install tokens package and needs a config change
+            if grep -q "\-\-plugin_paths" "$PROSODY_HOST_CONFIG"; then
                 # enable tokens in prosody host config
                 sed -i 's/--plugin_paths/plugin_paths/g' $PROSODY_HOST_CONFIG
                 sed -i 's/authentication = "anonymous"/authentication = "token"/g' $PROSODY_HOST_CONFIG
@@ -70,8 +72,6 @@ case "$1" in
                 echo "Use the following command, after this package has been installed and"
                 echo "after every prosody-trunk upgrade:"
                 echo "sudo patch -N /usr/lib/prosody/modules/mod_bosh.lua /usr/share/jitsi-meet/prosody-plugins/mod_bosh.lua.patch"
-            else
-                echo "Failed apply auto-config to $PROSODY_HOST_CONFIG which most likely comes from not supported version of jitsi-meet"
             fi
         else
             echo "Prosody config not found at $PROSODY_HOST_CONFIG - unable to auto-configure token authentication"

debian/jitsi-meet-web-config.postinst

@@ -65,7 +65,7 @@ case "$1" in
             # SSL for nginx
             db_get jitsi-meet/cert-choice
             CERT_CHOICE="$RET"
-            UPLOADED_CERT_CHOICE="A certificate is available and the files are uploaded on the server"
+            UPLOADED_CERT_CHOICE="I want to use my own certificate"
 
             if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
                 db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
@@ -223,6 +223,13 @@ case "$1" in
             invoke-rc.d apache2 reload
         fi
 
+        echo "----------------"
+        echo ""
+        echo "You can now switch to a Let’s Encrypt certificate. To do so, execute:"
+        echo "/usr/share/jitsi-meet/scripts/install-letsencrypt-cert.sh"
+        echo ""
+        echo "----------------"
+
         # and we're done with debconf
         db_stop
     ;;

debian/jitsi-meet-web-config.templates

@@ -1,9 +1,10 @@
 Template: jitsi-meet/cert-choice
 Type: select
-__Choices: Self-signed certificate will be generated, A certificate is available and the files are uploaded on the server
+__Choices: Generate a new self-signed certificate (You will later get a chance to obtain a Let's encrypt certificate), I want to use my own certificate
 _Description: SSL certificate for the Jitsi Meet instance
  Jitsi Meet is best to be set up with an SSL certificate.
  Having no certificate, a self-signed one will be generated.
+ By choosing self-signed you will later have a chance to install Let’s Encrypt certificates.
  Having a certificate signed by a recognised CA, it can be uploaded on the server
  and point its location. The default filenames will be /etc/ssl/--domain.name--.key
  for the key and /etc/ssl/--domain.name--.crt for the certificate.

debian/jitsi-meet-web.install

@@ -1,12 +1,14 @@
-*.js					/usr/share/jitsi-meet/
+interface_config.js		/usr/share/jitsi-meet/
+logging_config.js		/usr/share/jitsi-meet/
 *.json					/usr/share/jitsi-meet/
 *.html					/usr/share/jitsi-meet/
 *.ico					/usr/share/jitsi-meet/
 libs					/usr/share/jitsi-meet/
+static                  /usr/share/jitsi-meet/
 css/all.css 			/usr/share/jitsi-meet/css/
-css/unsupported_browser.css		/usr/share/jitsi-meet/css/
 sounds					/usr/share/jitsi-meet/
 fonts					/usr/share/jitsi-meet/
 images					/usr/share/jitsi-meet/
 lang					/usr/share/jitsi-meet/
 connection_optimization	/usr/share/jitsi-meet/
+resources/*.sh			/usr/share/jitsi-meet/scripts/

debian/po/templates.pot

@@ -20,13 +20,13 @@ msgstr ""
 #. Type: select
 #. Choices
 #: ../jitsi-meet-web-config.templates:1001
-msgid "Self-signed certificate will be generated"
+msgid "Generate a new self-signed certificate (You will later get a chance to obtain a Let's encrypt certificate)"
 msgstr ""
 
 #. Type: select
 #. Choices
 #: ../jitsi-meet-web-config.templates:1001
-msgid "A certificate is available and the files are uploaded on the server"
+msgid "I want to use my own certificate"
 msgstr ""
 
 #. Type: select

doc/api.md

@@ -0,0 +1,246 @@
+# Jitsi Meet API
+
+You can use the Jitsi Meet API to embed Jitsi Meet in to your application.
+
+## Installation
+
+To embed Jitsi Meet in your application you need to add the Jitsi Meet API library:
+
+```javascript
+<script src="https://meet.jit.si/external_api.js"></script>
+```
+
+## API
+
+### `api = new JitsiMeetExternalAPI(domain, room, [width], [height], [htmlElement], [configOverwite], [interfaceConfigOverwrite], [noSsl], [jwt])`
+
+The next step for embedding Jitsi Meet is to create the Jitsi Meet API object.
+Its constructor gets a number of options:
+
+* **domain**: domain used to build the conference URL, "meet.jit.si" for
+  example.
+* **room**: name of the room to join.
+* **width**: (optional) width for the iframe which will be created.
+* **height**: (optional) height for the iframe which will be created.
+* **htmlElement**: (optional) HTL DOM Element where the iframe will be added as
+  a child.
+* **configOverwite**: (optional) JS object with overrides for options defined in
+  [config.js].
+* **interfaceConfigOverwrite**: (optional) JS object with overrides for options
+  defined in [interface_config.js].
+* **noSsl**: (optional, defaults to true) Boolean indicating if the server
+  should be contacted using HTTP or HTTPS.
+* **jwt**: (optional) [JWT](https://jwt.io/) token.
+
+Example:
+
+```javascript
+var domain = "meet.jit.si";
+var room = "JitsiMeetAPIExample";
+var width = 700;
+var height = 700;
+var htmlElement = document.querySelector('#meet');
+var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement);
+```
+
+You can overwrite options set in [config.js] and [interface_config.js].
+For example, to enable the filmstrip-only interface mode, you can use:
+
+```javascript
+var interfaceConfigOverwrite = {filmStripOnly: true};
+var api = new JitsiMeetExternalAPI(domain, room, width, height, undefined, undefined, interfaceConfigOverwrite);
+```
+
+You can also pass a jwt token to Jitsi Meet:
+
+ ```javascript
+var jwt = "<jwt_token>";
+var noSsl = false;
+var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, configOverwrite, interfaceConfigOverwrite, noSsl, jwt);
+ ```
+
+### Controlling the embedded Jitsi Meet Conference
+
+You can control the embedded Jitsi Meet conference using the `JitsiMeetExternalAPI` object by using `executeCommand`:
+
+```javascript
+api.executeCommand(command, ...arguments)
+```
+
+The `command` parameter is String object with the name of the command. The following commands are currently supported:
+
+* **displayName** - Sets the display name of the local participant. This command requires one argument - the new display name to be set.
+```javascript
+api.executeCommand('displayName', 'New Nickname');
+```
+
+* **toggleAudio** - Mutes / unmutes the audio for the local participant. No arguments are required.
+```javascript
+api.executeCommand('toggleAudio')
+```
+
+* **toggleVideo** - Mutes / unmutes the video for the local participant. No arguments are required.
+```javascript
+api.executeCommand('toggleVideo')
+```
+
+* **toggleFilmStrip** - Hides / shows the filmstrip. No arguments are required.
+```javascript
+api.executeCommand('toggleFilmStrip')
+```
+
+* **toggleChat** - Hides / shows the chat. No arguments are required.
+```javascript
+api.executeCommand('toggleChat')
+```
+
+* **toggleContactList** - Hides / shows the contact list. No arguments are required.
+```javascript
+api.executeCommand('toggleContactList')
+```
+
+* **toggleShareScreen** - Starts / stops screen sharing. No arguments are required.
+```javascript
+api.executeCommand('toggleShareScreen')
+```
+
+* **hangup** - Hangups the call. No arguments are required.
+```javascript
+api.executeCommand('hangup')
+```
+
+* **email** - Changes the local email address. This command requires one argument - the new email address to be set.
+```javascript
+api.executeCommand('email', 'example@example.com')
+```
+
+* **avatarUrl** - Changes the local avatar URL. This command requires one argument - the new avatar URL to be set.
+```javascript
+api.executeCommand('avatarUrl', 'https://avatars0.githubusercontent.com/u/3671647')
+```
+
+You can also execute multiple commands using the `executeCommands` method:
+```javascript
+api.executeCommands(commands)
+```
+The `commands` parameter is an object with the names of the commands as keys and the arguments for the commands as values:
+```javascript
+api.executeCommands({displayName: ['nickname'], toggleAudio: []});
+```
+
+You can add event listeners to the embedded Jitsi Meet using the `addEventListener` method.
+**NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods (`addListener` or `on`).**
+```javascript
+api.addEventListener(event, listener)
+```
+
+The `event` parameter is a String object with the name of the event.
+The `listener` parameter is a Function object with one argument that will be notified when the event occurs with data related to the event.
+
+The following events are currently supported:
+
+* **incomingMessage** - Event notifications about incoming
+messages. The listener will receive an object with the following structure:
+```javascript
+{
+"from": from,    // JID of the user that sent the message
+"nick": nick,    // the nickname of the user that sent the message
+"message": txt   // the text of the message
+}
+```
+
+* **outgoingMessage** - Event notifications about outgoing
+messages. The listener will receive an object with the following structure:
+```javascript
+{
+"message": txt   // the text of the message
+}
+```
+
+* **displayNameChanged** - event notifications about display name
+changes. The listener will receive an object with the following structure:
+```javascript
+{
+"jid": jid,                 // the JID of the participant that changed his display name
+"displayname": displayName  // the new display name
+}
+```
+
+* **participantJoined** - event notifications about new participants who join the room. The listener will receive an object with the following structure:
+```javascript
+{
+"jid": jid   // the JID of the participant
+}
+```
+
+* **participantLeft** - event notifications about participants that leave the room. The listener will receive an object with the following structure:
+```javascript
+{
+"jid": jid   // the JID of the participant
+}
+```
+
+* **videoConferenceJoined** - event notifications fired when the local user has joined the video conference. The listener will receive an object with the following structure:
+```javascript
+{
+"roomName": room   // the room name of the conference
+}
+```
+
+* **videoConferenceLeft** - event notifications fired when the local user has left the video conference. The listener will receive an object with the following structure:
+```javascript
+{
+"roomName": room   // the room name of the conference
+}
+```
+
+* **readyToClose** - event notification fired when Jitsi Meet is ready to be closed (hangup operations are completed).
+
+You can also add multiple event listeners by using `addEventListeners`.
+This method requires one argument of type Object. The object argument must
+have the names of the events as keys and the listeners of the events as values.
+**NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods.**
+
+```javascript
+function incomingMessageListener(object)
+{
+// ...
+}
+
+function outgoingMessageListener(object)
+{
+// ...
+}
+
+api.addEventListeners({
+    incomingMessage: incomingMessageListener,
+    outgoingMessage: outgoingMessageListener})
+```
+
+If you want to remove a listener you can use `removeEventListener` method with argument the name of the event.
+**NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods( `removeListener`).**
+```javascript
+api.removeEventListener("incomingMessage");
+```
+
+If you want to remove more than one event you can use `removeEventListeners` method with an Array with the names of the events as an argument.
+**NOTE: This method still exists but it is deprecated. JitsiMeetExternalAPI class extends [EventEmitter]. Use [EventEmitter] methods.**
+```javascript
+api.removeEventListeners(["incomingMessage", "outgoingMessageListener"]);
+```
+
+You can get the number of participants in the conference with the following API function:
+```javascript
+var numberOfParticipants = api.getNumberOfParticipants();
+```
+
+You can remove the embedded Jitsi Meet Conference with the following API function:
+```javascript
+api.dispose()
+```
+
+NOTE: It's a good practice to remove the conference before the page is unloaded.
+
+[config.js]: https://github.com/jitsi/jitsi-meet/blob/master/config.js
+[interface_config.js]: https://github.com/jitsi/jitsi-meet/blob/master/interface_config.js
+[EventEmitter]: https://nodejs.org/api/events.html

doc/api/api.md

@@ -1,215 +0,0 @@
-Jitsi Meet API
-============
-
-You can use Jitsi Meet API to embed Jitsi Meet in to your application.
-
-Installation
-==========
-
-To embed Jitsi Meet in your application you need to add Jitsi Meet API library
-```javascript
-<script src="https://meet.jit.si/external_api.js"></script>
-```
-
-The next step for embedding Jitsi Meet is to create the Jitsi Meet API object
-```javascript
-<script>
-    var domain = "meet.jit.si";
-    var room = "JitsiMeetAPIExample";
-    var width = 700;
-    var height = 700;
-    var api = new JitsiMeetExternalAPI(domain, room, width, height);
-</script>
-```
-You can paste that lines in your html code where you want to be placed the Jitsi Meet conference
-or you can specify the parent HTML element for the Jitsi Meet conference in the JitsiMeetExternalAPI
-constructor.
-```javascript
-    var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement);
-```
-If you don't specify room the user will enter in new conference with random room name.
-
-You can overwrite options set in config.js and interface_config.js. For example, to enable the film-strip-only interface mode and disable simulcast, you can use:
-```javascript
-    var configOverwrite = {enableSimulcast: false};
-    var interfaceConfigOverwrite = {filmStripOnly: true};
-    var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, configOverwrite, interfaceConfigOverwrite);
-```
-
-Controlling embedded Jitsi Meet Conference
-=========
-
-You can control the embedded Jitsi Meet conference using the JitsiMeetExternalAPI object.
-
-You can send command to Jitsi Meet conference using ```executeCommand```.
-```
-api.executeCommand(command, ...arguments)
-```
-The ```command``` parameter is String object with the name of the command.
-Currently we support the following commands:
-
-
-* **displayName** - sets the display name of the local participant. This command requires one argument -
-the new display name to be set
-```
-api.executeCommand('displayName', 'New Nickname');
-```
-* **toggleAudio** - mutes / unmutes the audio for the local participant. No arguments are required.
-```
-api.executeCommand('toggleAudio')
-```
-* **toggleVideo** - mutes / unmutes the video for the local participant. No arguments are required.
-```
-api.executeCommand('toggleVideo')
-```
-* **toggleFilmStrip** - hides / shows the film strip. No arguments are required.
-```
-api.executeCommand('filmStrip')
-```
-* **toggleChat** - hides / shows the chat. No arguments are required.
-```
-api.executeCommand('toggleChat')
-```
-* **toggleContactList** - hides / shows the contact list. No arguments are required.
-```
-api.executeCommand('toggleContactList')
-```
-
-* **toggleShareScreen** - starts / stops the screen sharing. No arguments are required.
-```
-api.executeCommand('toggleShareScreen')
-```
-
-* **hangup** - Hangups the call. No arguments are required.
-```
-api.executeCommand('hangup')
-```
-
-* **email** - Hangups the call. No arguments are required.
-```
-api.executeCommand('email', 'example@example.com')
-```
-
-* **avatarUrl** - Hangups the call. No arguments are required.
-```
-api.executeCommand('avatarUrl', 'avatarUrl')
-```
-
-You can also execute multiple commands using the method ```executeCommands```.
-```
-api.executeCommands(commands)
-```
-The ```commands``` parameter is object with keys the names of the commands and values the arguments for the
-commands.
-
-```
-api.executeCommands({displayName: ['nickname'], toggleAudio: []});
-```
-
-You can add event listeners to the embedded Jitsi Meet using ```addEventListener``` method.
-```
-api.addEventListener(event, listener)
-```
-The ```event``` parameter is String object with the name of the event.
-The ```listener``` paramenter is Function object with one argument that will be notified when the event occurs
-with data related to the event.
-
-Currently we support the following events:
-
-* **incomingMessage** - event notifications about incoming
-messages. The listener will receive object with the following structure:
-```
-{
-"from": from,//JID of the user that sent the message
-"nick": nick,//the nickname of the user that sent the message
-"message": txt//the text of the message
-}
-```
-* **outgoingMessage** - event notifications about outgoing
-messages. The listener will receive object with the following structure:
-```
-{
-"message": txt//the text of the message
-}
-```
-* **displayNameChanged** - event notifications about display name
-change. The listener will receive object with the following structure:
-```
-{
-jid: jid,//the JID of the participant that changed his display name
-displayname: displayName //the new display name
-}
-```
-* **participantJoined** - event notifications about new participant.
-The listener will receive object with the following structure:
-```
-{
-jid: jid //the jid of the participant
-}
-```
-* **participantLeft** - event notifications about participant that left room.
-The listener will receive object with the following structure:
-```
-{
-jid: jid //the jid of the participant
-}
-```
-* **videoConferenceJoined** - event notifications fired when the local user has joined the video conference.
-The listener will receive object with the following structure:
-```
-{
-roomName: room //the room name of the conference
-}
-```
-* **videoConferenceLeft** - event notifications fired when the local user has left the video conference.
-The listener will receive object with the following structure:
-```
-{
-roomName: room //the room name of the conference
-}
-```
-
-* **readyToClose** - event notification fired when Jitsi Meet is ready to be closed (hangup operations are completed).
-
-You can also add multiple event listeners by using ```addEventListeners```.
-This method requires one argument of type Object. The object argument must
-have keys with the names of the events and values the listeners of the events.
-
-```
-function incomingMessageListener(object)
-{
-...
-}
-
-function outgoingMessageListener(object)
-{
-...
-}
-
-api.addEventListeners({
-    incomingMessage: incomingMessageListener,
-    outgoingMessage: outgoingMessageListener})
-```
-
-If you want to remove a listener you can use ```removeEventListener``` method with argument the name of the event.
-```
-api.removeEventListener("incomingMessage");
-```
-
-If you want to remove more than one event you can use ```removeEventListeners``` method with argument
- array with the names of the events.
-```
-api.removeEventListeners(["incomingMessage", "outgoingMessageListener"]);
-```
-
-You can get the number of participants in the conference with the following code:
-```
-var numberOfParticipants = api.getNumberOfParticipants();
-```
-
-You can remove the embedded Jitsi Meet Conference with the following code:
-```
-api.dispose()
-```
-
-It is a good practice to remove the conference before the page is unloaded.

doc/coding-style.md

@@ -76,9 +76,18 @@
   projects. For example:
 
   * The instance of lib-jitsi-meet's `JitsiConnection` type should be named
-    `connection` or `jitsiConnection` in jitsi-meet-react, not `client`.
+    `connection` or `jitsiConnection` in jitsi-meet, not `client`.
 
   * The class `ReducerRegistry` should be defined in ReducerRegistry.js and its
     imports in other files should use the same name. Don't define the class
     `Registry` in ReducerRegistry.js and then import it as `Reducers` in other
     files.
+
+* The names of global constants (including ES6 module-global constants) should
+  be written in uppercase with underscores to separate words. For example,
+  `BACKGROUND_COLOR`.
+
+* The underscore character at the beginning of a name signals that the
+  respective variable, function, property is non-public i.e. private, protected,
+  or internal. In contrast, the lack of an underscore at the beginning of a name
+  signals public API.

doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example

@@ -23,7 +23,10 @@ VirtualHost "jitmeet.example.com"
             "ping"; -- Enable mod_ping
         }
 
+        c2s_require_encryption = false
+
 Component "conference.jitmeet.example.com" "muc"
+    storage = "null"
     --modules_enabled = { "token_verification" }
 admins = { "focusUser@auth.jitmeet.example.com" }
 

doc/debian/jitsi-meet/jitsi-meet.example

@@ -20,7 +20,7 @@ server {
 
     root /usr/share/jitsi-meet;
     index index.html index.htm;
-    error_page 404 /404.html;
+    error_page 404 /static/404.html;
 
     location /config.js {
         alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;

doc/debian/jitsi-meet/jitsi-meet.example-apache

@@ -29,6 +29,8 @@
     Allow from all
   </Directory>
 
+  ErrorDocument 404 /static/404.html
+
   Alias "/config.js" "/etc/jitsi/meet/jitsi-meet.example.com-config.js"
   <Location /config.js>
     Require all granted

doc/example-config-files/prosody.cfg.lua.example

@@ -179,6 +179,8 @@ VirtualHost "jitsi.example.com"
 		certificate = "/var/lib/prosody/jitsi.example.com.crt";
 	}
 
+	c2s_require_encryption = false
+
 ------ Components ------
 -- You can specify components to add hosts that provide special services,
 -- like multi-user conferences, and transports.

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/manual-install.md

@@ -6,6 +6,34 @@ change references to that to match your host, and generate some passwords for
 
 There are also some complete [example config files](https://github.com/jitsi/jitsi-meet/tree/master/doc/example-config-files/) available, mentioned in each section.
 
+## Network description
+
+This how the network look like:
+```
+                   +                           +
+                   |                           |
+                   |                           |
+                   v                           |
+                  443                          |
+               +-------+                       |
+               |       |                       |
+               | NginX |                       |
+               |       |                       |
+               +--+-+--+                       |
+                  | |                          |
++------------+    | |    +--------------+      |
+|            |    | |    |              |      |
+| jitsi-meet +<---+ +--->+ prosody/xmpp |      |
+|            |files 5280 |              |      |
++------------+           +--------------+      v
+                     5222,5347^    ^5347      4443
+                +--------+    |    |    +-------------+
+                |        |    |    |    |             |
+                | jicofo +----^    ^----+ videobridge |
+                |        |              |             |
+                +--------+              +-------------+
+```
+
 ## Install prosody
 ```sh
 apt-get install prosody
@@ -27,6 +55,7 @@ VirtualHost "jitsi.example.com"
         "bosh";
         "pubsub";
     }
+    c2s_require_encryption = false
 ```
 - add domain with authentication for conference focus user:
 ```
@@ -76,7 +105,9 @@ Add a new file `jitsi.example.com` in `/etc/nginx/sites-available` (see also the
 server_names_hash_bucket_size 64;
 
 server {
-    listen 80;
+    listen 443;
+    # tls configuration that is not covered in this guide
+    # we recommend the use of https://certbot.eff.org/
     server_name jitsi.example.com;
     # set the root
     root /srv/jitsi.example.com;
@@ -131,9 +162,9 @@ Or autostart it by adding the line in `/etc/rc.local`:
 
 ## Install Jitsi Conference Focus (jicofo)
 
-Install JDK and Ant if missing:
+Install JDK and Maven if missing:
 ```
-apt-get install default-jdk ant
+apt-get install default-jdk maven
 ```
 
 _NOTE: When installing on older Debian releases keep in mind that you need JDK >= 1.7._
@@ -145,12 +176,14 @@ git clone https://github.com/jitsi/jicofo.git
 Build distribution package. Replace {os-name} with one of: 'lin', 'lin64', 'macosx', 'win', 'win64'.
 ```sh
 cd jicofo
-ant dist.{os-name}
+mvn package -DskipTests -Dassembly.skipAssembly=false
 ```
 Run jicofo:
 ```sh
-cd dist/{os-name}'
-./jicofo.sh --host=127.0.0.1 --domain=jitsi.example.com --secret=YOURSECRET2 --user_domain=auth.jitsi.example.com --user_name=focus --user_password=YOURSECRET3
+=======
+unzip target/jicofo-{os-name}-1.0-SNAPSHOT.zip
+cd jicofo-{os-name}-1.0-SNAPSHOT'
+./jicofo.sh --host=localhost --domain=jitsi.example.com --secret=YOURSECRET2 --user_domain=auth.jitsi.example.com --user_name=focus --user_password=YOURSECRET3
 ```
 
 ## Deploy Jitsi Meet
@@ -159,6 +192,8 @@ Checkout and configure Jitsi Meet:
 cd /srv
 git clone https://github.com/jitsi/jitsi-meet.git
 mv jitsi-meet/ jitsi.example.com
+npm install
+make
 ```
 
 Edit host names in `/srv/jitsi.example.com/config.js` (see also the example config file):
@@ -167,11 +202,11 @@ var config = {
     hosts: {
         domain: 'jitsi.example.com',
         muc: 'conference.jitsi.example.com',
-        bridge: 'jitsi-videobridge.jitsi.example.com'
+        bridge: 'jitsi-videobridge.jitsi.example.com',
+        focus: 'focus.jitsi.example.com'
     },
     useNicks: false,
     bosh: '//jitsi.example.com/http-bind', // FIXME: use xep-0156 for that
-    desktopSharing: 'false' // Desktop sharing method. Can be set to 'ext', 'webrtc' or false to disable.
     //chromeExtensionId: 'diibjkoicjeejcmhdnailmkgecihlobk', // Id of desktop streamer Chrome extension
     //minChromeExtVersion: '0.1' // Required version of Chrome extension
 };
@@ -203,23 +238,4 @@ You are now all set and ready to have your first meet by going to http://jitsi.e
 
 
 ## Enabling recording
-Currently recording is only supported for linux-64 and macos. To enable it, add
-the following properties to sip-communicator.properties:
-```
-org.jitsi.videobridge.ENABLE_MEDIA_RECORDING=true
-org.jitsi.videobridge.MEDIA_RECORDING_PATH=/path/to/recordings/dir
-org.jitsi.videobridge.MEDIA_RECORDING_TOKEN=secret
-```
-
-where /path/to/recordings/dir is the path to a pre-existing directory where recordings
-will be stored (needs to be writeable by the user running jitsi-videobridge),
-and "secret" is a string which will be used for authentication.
-
-Then, edit the Jitsi-Meet config.js file and set:
-```
-enableRecording: true
-```
-
-Restart jitsi-videobridge and start a new conference (making sure that the page
-is reloaded with the new config.js) -- the organizer of the conference should
-now have a "recording" button in the floating menu, near the "mute" button.
+[Jibri](https://github.com/jitsi/jibri)is a set of tools for recording and/or streaming a Jitsi Meet conference.

doc/mobile.md

@@ -0,0 +1,96 @@
+# 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.
+
+First make sure the [React Native dependencies] are installed.
+
+**NOTE**:  This document assumes the app is being built on a macOS system.
+
+**NOTE**:  The app must be built for an actual device since the simulators don't
+work properly with the native plugins we require.
+
+
+## iOS
+
+1. Install some extra dependencies
+
+  - Install ios-deploy globally (in case you want to use the React Native CLI
+    to deploy the app to the device)
+
+    ```bash
+    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.
+
+    Using the CLI:
+
+    ```bash
+    react-native run-ios --device
+    ```
+
+    When the app is launched from the CLI the output can be checked with the
+    following command:
+
+    ```bash
+    react-native log-ios
+    ```
+
+    Using Xcode
+
+    - Open **ios/jitsi-meet.xcworkspace** in Xcode. Make sure it's the workspace
+      file!
+
+    - Select your device from the top bar and hit the "play" button.
+
+    When the app is launched from Xcode the Debug console will show the output
+    logs the application creates.
+
+
+3. Other remarks
+
+    It's likely you'll need to change the bundle ID for deploying to a device
+    because the default bundle ID points to the application signed by Atlassian.
+
+    This can be changed in the "General" tab.  Under "Identity" set
+    "Bundle Identifier" to a different value, and adjust the "Team" in the
+    "Signing" section to match your own.
+
+
+## Android
+
+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
+
+    The app can be built using the CLI utility as follows:
+
+    ```bash
+    react-native run-android
+    ```
+
+    It will be launched on the connected Android device.
+
+
+## Debugging
+
+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
+is being interpreted by Chrome's V8 engine, instead of JSCore which
+React Native uses.  It's important to keep this in mind due to potential
+differences in supported JavaScript features.
+
+
+[Android Studio]: https://developer.android.com/studio/index.html
+[debugging]: https://facebook.github.io/react-native/docs/debugging.html
+[React Native]: https://facebook.github.io/react-native/
+[React Native dependencies]: https://facebook.github.io/react-native/docs/getting-started.html#installing-dependencies

doc/quick-install.md

@@ -30,6 +30,17 @@ During the installation, you will be asked to enter the hostname of the Jitsi Me
 
 This hostname (or IP address) will be used for virtualhost configuration inside the Jitsi Meet and also, you and your correspondents will be using it to access the web conferences.
 
+#### Advanced configuration
+If installation is on a machine behind NAT further configuration of jitsi-videobridge is needed in order for it to be accessible.
+Provided that all required ports are routed (forwarded) to the machine that it runs on. By default these ports are (TCP/443 or TCP/4443 and UDP 10000).
+The following extra lines need to be added the file `/etc/jitsi/videobridge/sip-communicator.properties`:
+```
+org.ice4j.ice.harvest.NAT_HARVESTER_LOCAL_ADDRESS=<Local.IP.Address>
+org.ice4j.ice.harvest.NAT_HARVESTER_PUBLIC_ADDRESS=<Public.IP.Address>
+```
+See [the documenation of ice4j](https://github.com/jitsi/ice4j/blob/master/doc/configuration.md)
+for details.
+
 ### Open a conference
 
 Launch a web browser (Chrome, Chromium or latest Opera) and enter in the URL bar the hostname (or IP address) you used in the previous step.
@@ -63,7 +74,7 @@ Enjoy!
 ## Uninstall
 
 ```sh
-apt-get purge jigasi jitsi-meet jicofo jitsi-videobridge
+apt-get purge jigasi jitsi-meet jitsi-meet-web-config jitsi-meet-web jicofo jitsi-videobridge
 ```
 
 Sometimes the following packages will fail to uninstall properly:

flow-typed/npm/flow-bin_v0.x.x.js

@@ -0,0 +1,6 @@
+// flow-typed signature: 6a5610678d4b01e13bbfbbc62bdaf583
+// flow-typed version: 3817bc6980/flow-bin_v0.x.x/flow_>=v0.25.x
+
+declare module "flow-bin" {
+  declare module.exports: string;
+}

flow-typed/npm/react-redux_v5.x.x.js

@@ -0,0 +1,89 @@
+// flow-typed signature: 0ed284c5a2e97a9e3c0e87af3dedc09d
+// flow-typed version: bdf1e66252/react-redux_v5.x.x/flow_>=v0.30.x
+
+import type { Dispatch, Store } from 'redux'
+
+declare module 'react-redux' {
+
+  /*
+
+    S = State
+    A = Action
+    OP = OwnProps
+    SP = StateProps
+    DP = DispatchProps
+
+  */
+
+  declare type MapStateToProps<S, OP: Object, SP: Object> = (state: S, ownProps: OP) => SP | MapStateToProps<S, OP, SP>;
+
+  declare type MapDispatchToProps<A, OP: Object, DP: Object> = ((dispatch: Dispatch<A>, ownProps: OP) => DP) | DP;
+
+  declare type MergeProps<SP, DP: Object, OP: Object, P: Object> = (stateProps: SP, dispatchProps: DP, ownProps: OP) => P;
+
+  declare type StatelessComponent<P> = (props: P) => ?React$Element<any>;
+
+  declare class ConnectedComponent<OP, P, Def, St> extends React$Component<void, OP, void> {
+    static WrappedComponent: Class<React$Component<Def, P, St>>;
+    getWrappedInstance(): React$Component<Def, P, St>;
+    static defaultProps: void;
+    props: OP;
+    state: void;
+  }
+
+  declare type ConnectedComponentClass<OP, P, Def, St> = Class<ConnectedComponent<OP, P, Def, St>>;
+
+  declare type Connector<OP, P> = {
+    (component: StatelessComponent<P>): ConnectedComponentClass<OP, P, void, void>;
+    <Def, St>(component: Class<React$Component<Def, P, St>>): ConnectedComponentClass<OP, P, Def, St>;
+  };
+
+  declare class Provider<S, A> extends React$Component<void, { store: Store<S, A>, children?: any }, void> { }
+
+  declare type ConnectOptions = {
+    pure?: boolean,
+    withRef?: boolean
+  };
+
+  declare type Null = null | void;
+
+  declare function connect<A, OP>(
+    ...rest: Array<void> // <= workaround for https://github.com/facebook/flow/issues/2360
+  ): Connector<OP, $Supertype<{ dispatch: Dispatch<A> } & OP>>;
+
+  declare function connect<A, OP>(
+    mapStateToProps: Null,
+    mapDispatchToProps: Null,
+    mergeProps: Null,
+    options: ConnectOptions
+  ): Connector<OP, $Supertype<{ dispatch: Dispatch<A> } & OP>>;
+
+  declare function connect<S, A, OP, SP>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: Null,
+    mergeProps: Null,
+    options?: ConnectOptions
+  ): Connector<OP, $Supertype<SP & { dispatch: Dispatch<A> } & OP>>;
+
+  declare function connect<A, OP, DP>(
+    mapStateToProps: Null,
+    mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
+    mergeProps: Null,
+    options?: ConnectOptions
+  ): Connector<OP, $Supertype<DP & OP>>;
+
+  declare function connect<S, A, OP, SP, DP>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
+    mergeProps: Null,
+    options?: ConnectOptions
+  ): Connector<OP, $Supertype<SP & DP & OP>>;
+
+  declare function connect<S, A, OP, SP, DP, P>(
+    mapStateToProps: MapStateToProps<S, OP, SP>,
+    mapDispatchToProps: MapDispatchToProps<A, OP, DP>,
+    mergeProps: MergeProps<SP, DP, OP, P>,
+    options?: ConnectOptions
+  ): Connector<OP, P>;
+
+}

flow-typed/npm/redux_v3.x.x.js

@@ -0,0 +1,58 @@
+// flow-typed signature: 7f1a115f75043c44385071ea3f33c586
+// flow-typed version: 358375125e/redux_v3.x.x/flow_>=v0.33.x
+
+declare module 'redux' {
+
+  /*
+
+    S = State
+    A = Action
+
+  */
+
+  declare type Dispatch<A: { type: $Subtype<string> }> = (action: A) => A;
+
+  declare type MiddlewareAPI<S, A> = {
+    dispatch: Dispatch<A>;
+    getState(): S;
+  };
+
+  declare type Store<S, A> = {
+    // rewrite MiddlewareAPI members in order to get nicer error messages (intersections produce long messages)
+    dispatch: Dispatch<A>;
+    getState(): S;
+    subscribe(listener: () => void): () => void;
+    replaceReducer(nextReducer: Reducer<S, A>): void
+  };
+
+  declare type Reducer<S, A> = (state: S, action: A) => S;
+
+  declare type CombinedReducer<S, A> = (state: $Shape<S> & {} | void, action: A) => S;
+
+  declare type Middleware<S, A> =
+    (api: MiddlewareAPI<S, A>) =>
+      (next: Dispatch<A>) => Dispatch<A>;
+
+  declare type StoreCreator<S, A> = {
+    (reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
+    (reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
+  };
+
+  declare type StoreEnhancer<S, A> = (next: StoreCreator<S, A>) => StoreCreator<S, A>;
+
+  declare function createStore<S, A>(reducer: Reducer<S, A>, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
+  declare function createStore<S, A>(reducer: Reducer<S, A>, preloadedState: S, enhancer?: StoreEnhancer<S, A>): Store<S, A>;
+
+  declare function applyMiddleware<S, A>(...middlewares: Array<Middleware<S, A>>): StoreEnhancer<S, A>;
+
+  declare type ActionCreator<A, B> = (...args: Array<B>) => A;
+  declare type ActionCreators<K, A> = { [key: K]: ActionCreator<A, any> };
+
+  declare function bindActionCreators<A, C: ActionCreator<A, any>>(actionCreator: C, dispatch: Dispatch<A>): C;
+  declare function bindActionCreators<A, K, C: ActionCreators<K, A>>(actionCreators: C, dispatch: Dispatch<A>): C;
+
+  declare function combineReducers<O: Object, A>(reducers: O): CombinedReducer<$ObjMap<O, <S>(r: Reducer<S, any>) => S>, A>;
+
+  declare function compose<S, A>(...fns: Array<StoreEnhancer<S, A>>): Function;
+
+}

fonts/jitsi.svg

@@ -7,6 +7,7 @@
 <font-face units-per-em="1024" ascent="1024" descent="0" />
 <missing-glyph horiz-adv-x="1024" />
 <glyph unicode="&#x20;" d="" />
+<glyph unicode="&#xe0cd;" glyph-name="phone" d="M282 564c62-120 162-220 282-282l94 94c12 12 30 16 44 10 48-16 100-24 152-24 24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44z" />
 <glyph unicode="&#xe603;" glyph-name="presentation" horiz-adv-x="1088" d="M952.495 1019.065h-818.689c-72.81 0-132.183-60.63-132.183-135.162v-750.719c0-74.473 59.372-135.101 132.183-135.101h818.686c72.936 0 132.314 60.625 132.314 135.101v750.722c0.003 74.532-59.378 135.159-132.311 135.159zM946.346 139.651h-806.14v737.822h806.015l0.126-737.822zM685.753 738.544h216.911v-566.758h-216.911v566.758zM428.672 610.002h216.911v-438.216h-216.911v438.216zM172.339 481.46h216.161v-309.677h-216.161v309.677z" />
 <glyph unicode="&#xe613;" glyph-name="recDisable" horiz-adv-x="1140" d="M1123.444 1003.015c-23.593 26.481-64.131 28.989-90.74 5.395l-1008.269-893.436c-26.609-23.468-28.991-64.131-5.46-90.676 12.674-14.306 30.308-21.649 48.126-21.649 15.123 0 30.372 5.401 42.544 16.195l130.045 115.22c90.743-81.844 210.569-132.165 342.473-132.101 282.816 0.061 510.913 227.969 511.287 510.972 0.126 109.934-34.682 211.367-93.499 294.72l118.088 104.625c26.483 23.526 28.997 64.129 5.404 90.735zM944.422 513.818c0.128-200.922-161.896-363.201-362.509-362.952-87.56 0.123-167.573 31.151-230.061 82.569l331.277 293.509v-73.176c1.071-60.993 32.696-92.18 94.944-93.692 61.997 1.512 93.686 32.763 95.131 93.756v41.096h-72.227v-47.499c0.251-4.642-0.564-10.607-2.511-17.949-1.25-3.261-3.448-6.020-6.525-8.093-3.197-2.572-7.845-3.828-13.868-3.828-10.543 0.31-17.132 4.268-19.827 11.921-1.068 3.512-1.947 6.905-2.508 10.163-0.254 2.887-0.377 5.532-0.377 7.786v143.511l42.477 37.634c0.215-0.432 0.452-0.851 0.63-1.303 1.947-6.467 2.762-12.799 2.511-19.076v-36.772h72.227v30.121c-0.246 31.245-9.086 54.699-26.363 70.447l40.711 36.069c35.787-56.055 56.803-122.585 56.867-194.244zM239.795 395.47c-12.613 37.023-19.827 76.557-19.827 117.913-0.19 200.236 161.584 362.009 361.945 362.135 56.853 0 110.313-13.302 158.133-36.398l117.846 104.421c-79.444 50.952-173.758 80.817-275.292 80.948-283.377 0.181-511.354-227.729-511.789-511.675-0.126-79.567 18.636-154.679 51.137-221.882l117.848 104.538zM388.576 690.020h-97.514v-249.057l72.23 64.070v0.689h0.815l117.72 104.418c0 0.564 0.123 0.94 0.123 1.509 0.753 53.898-30.369 80.069-93.374 78.37zM405.959 625.517c1.942-2.767 3.074-6.469 3.323-11.112 0.312-4.452 0.438-9.6 0.438-15.246 0.251-10.916-0.689-19.83-2.949-26.985-2.952-7.594-10.983-11.357-24.159-11.357h-19.325v74.043h15.31c7.842 0 13.865-0.683 18.072-2.19 4.397-1.573 7.468-3.953 9.29-7.153z" />
 <glyph unicode="&#xe614;" glyph-name="recEnable" horiz-adv-x="1142" d="M581.278 1025.708c284.857-0.19 514.807-230.517 514.427-514.997-0.378-285.047-230.073-514.553-514.869-514.615-284.541-0.062-515.311 230.517-514.933 514.422 0.439 285.936 230.009 515.439 515.375 515.19zM580.579 875.756c-201.764-0.123-364.666-163.032-364.478-364.663 0-202.018 162.524-364.735 364.478-364.984 202.018-0.316 365.174 163.030 365.048 365.423-0.252 201.767-163.156 364.35-365.048 364.224zM287.698 688.907h98.196c63.442 1.767 94.785-24.518 94.027-78.863 0.254-19.081-2.211-34.882-7.456-47.521-6.005-12.508-18.706-21.988-38.167-28.181v-0.819c28.373-6.259 43.031-23.573 43.981-51.946v-57.689c0-11.247 0.254-22.813 0.758-34.756 0.819-12.005 3.033-20.979 6.696-27.043h-71.846c-3.727 6.064-6.128 15.038-7.14 27.043-1.012 11.943-1.454 23.509-1.138 34.756v52.321c0 9.603-2.214 16.553-6.573 20.979-4.675 4.107-12.701 6.19-24.012 6.19h-14.599v-141.291h-72.73v326.82zM360.428 558.861h19.463c13.271 0 21.359 3.794 24.331 11.375 2.276 7.204 3.221 16.304 2.969 27.171 0 5.815-0.126 10.867-0.442 15.418-0.252 4.675-1.392 8.404-3.352 11.247-1.831 3.157-4.926 5.561-9.352 7.14-4.233 1.454-10.299 2.211-18.2 2.211h-15.418v-74.564zM498.372 688.907h162.082v-62.687h-89.35v-65.587h78.103v-62.685h-78.103v-73.11h92.822v-62.749h-165.557v326.818zM682.507 599.999c0.316 31.782 9.416 55.542 27.425 71.407 17.44 15.29 40.185 22.936 68.181 22.936 28.247 0 51.119-7.646 68.623-23 17.82-15.798 26.92-39.623 27.171-71.407v-30.333h-72.73v37.031c0.254 6.192-0.57 12.639-2.527 19.209-1.264 3.157-3.475 5.938-6.573 8.214-3.221 1.515-7.898 2.404-13.964 2.404-10.615-0.316-17.249-3.855-19.967-10.618-2.211-6.573-3.223-13.017-2.907-19.209v-161.956c0-2.273 0.126-4.865 0.38-7.772 0.568-3.411 1.454-6.824 2.527-10.233 2.717-7.775 9.352-11.756 19.967-12.007 6.067 0 10.744 1.261 13.964 3.791 3.098 2.15 5.309 4.867 6.573 8.216 1.96 7.33 2.782 13.33 2.527 18.007v47.837h72.73v-41.328c-1.451-61.547-33.364-93.015-95.794-94.469-62.685 1.454-94.53 32.922-95.607 94.343v148.937z" />
@@ -14,12 +15,12 @@
 <glyph unicode="&#xe900;" glyph-name="connection-lost" horiz-adv-x="1414" d="M0 299.153h196.337v-187.951h-196.337v187.951zM271.842 480.372h196.337v-369.169h-196.337v369.169zM543.656 661.562h196.337v-550.36h-196.337v550.36zM815.47 842.766v-731.564h119.56c-14.589 33.025-23.125 71.503-23.232 111.943 0.132 86.42 38.697 163.851 99.656 216.468l0.348 403.153h-196.332zM1087.292 1024v-533.672c28.874 10.572 62.222 16.73 97.009 16.825 35.717-0.129 69.823-6.614 101.322-18.371l-1.999 535.218h-196.332zM1192.868 439.852c-0.009 0-0.020 0-0.031 0-122.247 0-221.351-98.447-221.372-219.896 0-0.007 0-0.014 0-0.021 0-121.467 99.111-219.935 221.372-219.935 0.011 0 0.021 0 0.032 0 122.248 0.014 221.345 98.477 221.345 219.935 0 0.007 0 0.013 0 0.020-0.021 121.441-99.11 219.883-221.345 219.897zM1194.706 372.607c87.601-0.006 158.614-69.787 158.614-155.866 0-0.006 0-0.012 0-0.019-0.022-86.062-71.026-155.822-158.614-155.828-87.588 0.006-158.593 69.766-158.615 155.826 0 0.007 0 0.014 0 0.020 0 86.079 71.013 155.86 158.613 155.866zM1286.795 355.682l48.348-52.528-236.375-217.567-48.348 52.528 236.375 217.567z" />
 <glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
+<glyph unicode="&#xe903;" glyph-name="mic-camera-combined" d="M756.704 628.138l267.296 202.213v-635.075l-267.296 202.213v-191.923c0-12.085-11.296-21.863-25.216-21.863h-706.272c-13.92 0-25.216 9.777-25.216 21.863v612.25c0 12.085 11.296 21.863 25.216 21.863h706.272c13.92 0 25.216-9.777 25.216-21.863v-189.679zM371.338 376.228c47.817 0 86.529 40.232 86.529 89.811v184.835c0 49.651-38.713 89.883-86.529 89.883-47.788 0-86.515-40.232-86.515-89.883v-184.835c0-49.579 38.756-89.811 86.515-89.811v0zM356.754 314.070v-32.78h33.718v33.412c73.858 9.606 131.235 73.73 131.235 151.351v88.232h-30.636v-88.232c0-67.57-53.696-122.534-119.734-122.534-66.024 0-119.691 54.964-119.691 122.534v88.232h-30.636v-88.232c0-79.215 59.674-144.502 135.744-151.969v-0.014z" />
 <glyph unicode="&#xe904;" glyph-name="kick" d="M512 810l284-426h-568zM214 298h596v-84h-596v84z" />
 <glyph unicode="&#xe905;" glyph-name="hangup" d="M512 640c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
 <glyph unicode="&#xe906;" glyph-name="chat" d="M854 342v512h-684v-598l86 86h598zM854 938c46 0 84-38 84-84v-512c0-46-38-86-84-86h-598l-170-170v768c0 46 38 84 84 84h684z" />
 <glyph unicode="&#xe907;" glyph-name="edit" d="M884 724l-78-78-160 160 78 78c16 16 44 16 60 0l100-100c16-16 16-44 0-60zM128 288l472 472 160-160-472-472h-160v160z" />
 <glyph unicode="&#xe908;" glyph-name="share-doc" d="M554 640h236l-236 234v-234zM682 426v86h-340v-86h340zM682 256v86h-340v-86h340zM598 938l256-256v-512c0-46-40-84-86-84h-512c-46 0-86 38-86 84l2 684c0 46 38 84 84 84h342z" />
-<glyph unicode="&#xe909;" glyph-name="telephone" d="M854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24zM854 810v44h-44v-44h44zM768 896h128v-128h-86v-86h-42v214zM640 810v-128h-128v44h86v42h-86v128h128v-42h-86v-44h86zM726 896v-214h-44v214h44z" />
 <glyph unicode="&#xe90a;" glyph-name="star-full" d="M512 288l-264-160 70 300-232 202 306 26 120 282 120-282 306-26-232-202 70-300z" />
 <glyph unicode="&#xe90b;" glyph-name="full-screen" d="M598 810h212v-212h-84v128h-128v84zM726 298v128h84v-212h-212v84h128zM214 598v212h212v-84h-128v-128h-84zM298 426v-128h128v-84h-212v212h84z" />
 <glyph unicode="&#xe90c;" glyph-name="exit-full-screen" d="M682 682h128v-84h-212v212h84v-128zM598 214v212h212v-84h-128v-128h-84zM342 682v128h84v-212h-212v84h128zM214 342v84h212v-212h-84v128h-128z" />
@@ -44,4 +45,7 @@
 <glyph unicode="&#xe91f;" glyph-name="menu-up" d="M512 682l256-256-60-60-196 196-196-196-60 60z" />
 <glyph unicode="&#xe920;" glyph-name="menu-down" d="M708 658l60-60-256-256-256 256 60 60 196-196z" />
 <glyph unicode="&#xe921;" glyph-name="switch-camera" d="M640 362l150 150-150 150v-108h-256v108l-150-150 150-150v108h256v-108zM854 854c46 0 84-40 84-86v-512c0-46-38-86-84-86h-684c-46 0-84 40-84 86v512c0 46 38 86 84 86h136l78 84h256l78-84h136z" />
+<glyph unicode="&#xe923;" glyph-name="visibility" d="M512 640c70 0 128-58 128-128s-58-128-128-128-128 58-128 128 58 128 128 128zM512 298c118 0 214 96 214 214s-96 214-214 214-214-96-214-214 96-214 214-214zM512 832c214 0 396-132 470-320-74-188-256-320-470-320s-396 132-470 320c74 188 256 320 470 320z" />
+<glyph unicode="&#xe924;" glyph-name="visibility-off" d="M506 640h6c70 0 128-58 128-128v-8zM322 606c-14-28-24-60-24-94 0-118 96-214 214-214 34 0 66 10 94 24l-66 66c-8-2-18-4-28-4-70 0-128 58-128 128 0 10 2 20 4 28zM86 842l54 54 756-756-54-54c-47.968 47.365-96.266 94.401-144 142-58-24-120-36-186-36-214 0-396 132-470 320 34 84 90 156 160 212-39.017 38.983-77.307 78.693-116 118zM512 726c-28 0-54-6-78-16l-92 92c52 20 110 30 170 30 214 0 394-132 468-320-32-80-82-148-146-202l-124 124c10 24 16 50 16 78 0 118-96 214-214 214z" />
+<glyph unicode="&#xe925;" glyph-name="dialpad" d="M512 982c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 726c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM768 726c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM768 470c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 470c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM768 810c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86zM256 470c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM256 726c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM256 982c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 214c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86z" />
 </font></defs></svg>