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 .
@@ -12,9 +12,21 @@ Installing Jitsi Meet is quite a simple experience. For Debian-based systems, we
 
 For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://github.com/jitsi/jitsi-meet/blob/master/doc/manual-install.md).
 
-## Building the sources
+## Download
 
-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 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))
+
+You can download source archives (produced by ```make source-package```):
+* [source builds](https://download.jitsi.org/jitsi-meet/src/)
+
+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:
 ```
@@ -28,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
@@ -75,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/BUCK

@@ -46,13 +46,13 @@ android_library(
 
 android_build_config(
   name = 'build_config',
-  package = 'org.jitsi.jitsi_meet_react',
+  package = 'org.jitsi.meet',
 )
 
 android_resource(
   name = 'res',
   res = 'src/main/res',
-  package = 'org.jitsi.jitsi_meet_react',
+  package = 'org.jitsi.meet',
 )
 
 android_binary(

android/app/build.gradle

@@ -1,15 +1,4 @@
-buildscript {
-    repositories {
-        maven { url 'https://maven.fabric.io/public' }
-    }
-
-    dependencies {
-        classpath 'io.fabric.tools:gradle:1.+'
-    }
-}
-
 apply plugin: 'com.android.application'
-apply plugin: 'io.fabric'
 
 import com.android.build.OutputFile
 
@@ -98,11 +87,11 @@ android {
     buildToolsVersion '23.0.1'
 
     defaultConfig {
-        applicationId 'org.jitsi.jitsi_meet_react'
+        applicationId 'org.jitsi.meet'
         minSdkVersion 16
         targetSdkVersion 22
-        versionCode 1
-        versionName '1.0'
+        versionCode Integer.parseInt("${version}")
+        versionName "1.4.${version}"
         ndk {
             abiFilters 'armeabi-v7a', 'x86'
         }
@@ -149,18 +138,15 @@ if (project.hasProperty('JITSI_SIGNING')
     apply from: project.property('JITSI_SIGNING');
 }
 
-repositories {
-    maven { url 'https://maven.fabric.io/public' }
-}
 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.crashlytics.sdk.android:crashlytics:2.6.5@aar') {
-        transitive = true
-    }
+    compile 'com.facebook.react:react-native:+'  // From node_modules
 }
 
 apply from: '../../node_modules/react-native-vector-icons/fonts.gradle'
@@ -168,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

@@ -1,20 +1,24 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
-    package="org.jitsi.jitsi_meet_react"
+    package="org.jitsi.meet"
     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,16 +40,21 @@
             <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" />
-      <meta-data
-        android:name="io.fabric.ApiKey"
-        android:value="a8ae24a58302ba79da1d312138e941f6b86e3242" />
     </application>
 </manifest>

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

@@ -1,39 +0,0 @@
-package org.jitsi.jitsi_meet_react;
-
-import android.app.Application;
-import android.util.Log;
-
-import com.facebook.react.ReactApplication;
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.ReactNativeHost;
-import com.facebook.react.ReactPackage;
-import com.facebook.react.shell.MainReactPackage;
-import com.oblador.vectoricons.VectorIconsPackage;
-import com.oney.WebRTCModule.WebRTCModulePackage;
-
-import java.util.Arrays;
-import java.util.List;
-
-public class MainApplication extends Application implements ReactApplication {
-
-  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
-    @Override
-    protected boolean getUseDeveloperSupport() {
-      return BuildConfig.DEBUG;
-    }
-
-    @Override
-    protected List<ReactPackage> getPackages() {
-      return Arrays.<ReactPackage>asList(
-          new MainReactPackage(),
-          new VectorIconsPackage(),
-          new WebRTCModulePackage()
-      );
-    }
-  };
-
-  @Override
-  public ReactNativeHost getReactNativeHost() {
-      return mReactNativeHost;
-  }
-}

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

@@ -1,11 +1,8 @@
-package org.jitsi.jitsi_meet_react;
+package org.jitsi.meet;
 
-import android.os.Bundle;
-import com.crashlytics.android.Crashlytics;
 import com.facebook.react.ReactActivity;
 import com.facebook.react.ReactActivityDelegate;
 import com.facebook.react.ReactRootView;
-import io.fabric.sdk.android.Fabric;
 
 public class MainActivity extends ReactActivity {
     /**
@@ -46,11 +43,4 @@ public class MainActivity extends ReactActivity {
     protected String getMainComponentName() {
         return "App";
     }
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-
-        Fabric.with(this, new Crashlytics());
-    }
 }

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

@@ -0,0 +1,65 @@
+package org.jitsi.meet;
+
+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;
+
+public class MainApplication extends Application implements ReactApplication {
+    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+        /**
+         * {@inheritDoc}
+         */
+        @Override
+        public boolean getUseDeveloperSupport() {
+            return BuildConfig.DEBUG;
+        }
+
+        /**
+         * {@inheritDoc}
+         */
+        @Override
+        protected List<ReactPackage> getPackages() {
+            return Arrays.<ReactPackage>asList(
+                new com.corbt.keepawake.KCKeepAwakePackage(),
+                new com.facebook.react.shell.MainReactPackage(),
+                new com.oblador.vectoricons.VectorIconsPackage(),
+                new com.ocetnik.timer.BackgroundTimerPackage(),
+                new com.oney.WebRTCModule.WebRTCModulePackage(),
+                new com.rnimmersive.RNImmersivePackage(),
+                new org.jitsi.meet.audiomode.AudioModePackage(),
+                new org.jitsi.meet.proximity.ProximityPackage()
+            );
+        }
+    };
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public ReactNativeHost getReactNativeHost() {
+        return mReactNativeHost;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void onCreate() {
+        super.onCreate();
+
+        SoLoader.init(this, /* native exopackage */ false);
+
+        if (!getReactNativeHost()
+                .getReactInstanceManager()
+                    .getDevSupportManager()
+                        .getDevSupportEnabled()) {
+            // TODO Auto-generated method stub
+        }
+    }
+}

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.properties

@@ -18,3 +18,4 @@
 # org.gradle.parallel=true
 
 android.useDeprecatedNdk=true
+version=1

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,12 @@
-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'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-webrtc'

app.js

@@ -1,13 +1,10 @@
-/* global $, config, getRoomName */
 /* application specific logic */
 
-import "babel-polyfill";
 import "jquery";
 import "jquery-contextmenu";
 import "jquery-ui";
 import "strophe";
 import "strophe-disco";
-import "strophe-caps";
 import "jQuery-Impromptu";
 import "autosize";
 
@@ -18,65 +15,13 @@ import 'aui-experimental-css';
 
 window.toastr = require("toastr");
 
-import URLProcessor from "./modules/config/URLProcessor";
-import RoomnameGenerator from './modules/util/RoomnameGenerator';
-
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
-import ConferenceUrl from './modules/URL/ConferenceUrl';
-import API from './modules/API/API';
+import API from './modules/API';
 
-import UIEvents from './service/UI/UIEvents';
-import getTokenData from "./modules/tokendata/TokenData";
 import translation from "./modules/translation/translation";
-
-/**
- * Tries to push history state with the following parameters:
- * 'VideoChat', `Room: ${roomName}`, URL. If fail, prints the error and returns
- * it.
- */
-function pushHistoryState(roomName, URL) {
-    try {
-        window.history.pushState(
-            'VideoChat', `Room: ${roomName}`, URL
-        );
-    } catch (e) {
-        console.warn("Push history state failed with parameters:",
-            'VideoChat', `Room: ${roomName}`, URL, e);
-        return e;
-    }
-    return null;
-}
-
-/**
- * Replaces current history state(replaces the URL displayed by the browser).
- * @param {string} newUrl the URL string which is to be displayed by the browser
- * to the user.
- */
-function replaceHistoryState (newUrl) {
-    if (window.history
-        && typeof window.history.replaceState === 'function') {
-        window.history.replaceState({}, document.title, newUrl);
-    }
-}
-
-/**
- * Builds and returns the room name.
- */
-function buildRoomName () {
-    let roomName = getRoomName();
-
-    if(!roomName) {
-        let word = RoomnameGenerator.generateRoomWithoutSeparator();
-        roomName = word.toLowerCase();
-        let historyURL = window.location.href + word;
-        //Trying to push state with current URL + roomName
-        pushHistoryState(word, historyURL);
-    }
-
-    return roomName;
-}
+import remoteControl from "./modules/remotecontrol/RemoteControl";
 
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
@@ -97,6 +42,16 @@ const APP = {
     settings,
     conference,
     translation,
+    /**
+     * The log collector which captures JS console logs for this app.
+     * @type {LogCollector}
+     */
+    logCollector: null,
+    /**
+     * Indicates if the log collector has been started (it will not be started
+     * if the welcome page is displayed).
+     */
+    logCollectorStarted : false,
     /**
      * After the APP has been initialized provides utility methods for dealing
      * with the conference room URL(address).
@@ -105,113 +60,15 @@ const APP = {
     ConferenceUrl : null,
     connection: null,
     API,
-    init () {
-        this.keyboardshortcut =
-            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.configFetch = require("./modules/config/HttpConfigFetch");
-        this.tokenData = getTokenData();
-    }
+    remoteControl
 };
 
-/**
- * If JWT token data it will be used for local user settings
- */
-function setTokenData() {
-    let localUser = APP.tokenData.caller;
-    if(localUser) {
-        APP.settings.setEmail((localUser.getEmail() || "").trim(), true);
-        APP.settings.setAvatarUrl((localUser.getAvatarUrl() || "").trim());
-        APP.settings.setDisplayName((localUser.getName() || "").trim(), true);
-    }
-}
-
-function init() {
-    setTokenData();
-    // Initialize the conference URL handler
-    APP.ConferenceUrl = new ConferenceUrl(window.location);
-    // Clean up the URL displayed by the browser
-    replaceHistoryState(APP.ConferenceUrl.getInviteUrl());
-    var isUIReady = APP.UI.start();
-    if (isUIReady) {
-        APP.conference.init({roomName: buildRoomName()}).then(function () {
-            APP.UI.initConference();
-
-            APP.UI.addListener(UIEvents.LANG_CHANGED, function (language) {
-                APP.translation.setLanguage(language);
-                APP.settings.setLanguage(language);
-            });
-
-            APP.keyboardshortcut.init();
-        }).catch(function (err) {
-            APP.UI.hideRingOverLay();
-            APP.API.notifyConferenceLeft(APP.conference.roomName);
-            console.error(err);
-        });
-    }
-}
-
-/**
- * If we have an HTTP endpoint for getting config.json configured we're going to
- * read it and override properties from config.js and interfaceConfig.js.
- * If there is no endpoint we'll just continue with initialization.
- * Keep in mind that if the endpoint has been configured and we fail to obtain
- * the config for any reason then the conference won't start and error message
- * will be displayed to the user.
- */
-function obtainConfigAndInit() {
-    let roomName = APP.conference.roomName;
-
-    if (config.configLocation) {
-        APP.configFetch.obtainConfig(
-            config.configLocation, roomName,
-            // Get config result callback
-            function(success, error) {
-                if (success) {
-                    var now = APP.connectionTimes["configuration.fetched"] =
-                        window.performance.now();
-                    console.log("(TIME) configuration fetched:\t", now);
-                    init();
-                } else {
-                    // Show obtain config error,
-                    // pass the error object for report
-                    APP.UI.messageHandler.openReportDialog(
-                        null, "dialog.connectError", error);
-                }
-            });
-    } else {
-        require("./modules/config/BoshAddressChoice").chooseAddress(
-            config, roomName);
-
-        init();
-    }
-}
-
-
-$(document).ready(function () {
-    var now = APP.connectionTimes["document.ready"] = window.performance.now();
-    console.log("(TIME) document ready:\t", now);
-
-    URLProcessor.setConfigParametersFromUrl();
-
-    // TODO The execution of the mobile app starts from react/index.native.js.
-    // Similarly, the execution of the Web app should start from
-    // react/index.web.js for the sake of consistency and ease of understanding.
-    // Temporarily though because we are at the beginning of introducing React
-    // into the Web app, allow the execution of the Web app to start from app.js
-    // in order to reduce the complexity of the beginning step.
-    require('./react');
-
-    APP.init();
-
-    APP.translation.init(settings.getLanguage());
-
-    APP.API.init(APP.tokenData.externalAPISettings);
-
-    obtainConfigAndInit();
-});
-
-$(window).bind('beforeunload', function () {
-    APP.API.dispose();
-});
+// TODO The execution of the mobile app starts from react/index.native.js.
+// Similarly, the execution of the Web app should start from react/index.web.js
+// for the sake of consistency and ease of understanding. Temporarily though
+// because we are at the beginning of introducing React into the Web app, allow
+// the execution of the Web app to start from app.js in order to reduce the
+// complexity of the beginning step.
+require('./react');
 
 module.exports = APP;

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,9 +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
+    enableUserRolesBasedOnToken: false,
+    // Suspending video might cause problems with audio playback. Disabling until these are fixed.
+    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,9 +1,19 @@
 /* global APP, JitsiMeetJS, config */
+
 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
@@ -51,40 +61,56 @@ 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);
         }
 
         function handleConnectionFailed(err) {
             unsubscribe();
-            console.error("CONNECTION FAILED:", err);
+            logger.error("CONNECTION FAILED:", err);
             reject(err);
         }
 
@@ -106,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
@@ -115,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,11 +89,10 @@ form {
     height: 74px;
     background-size: contain;
     background-repeat: no-repeat;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 .leftwatermark {
-    display: none;
     left: $defaultToolbarSize;
     margin-left: 10px;
     background-image: url($defaultWatermarkLink);
@@ -92,20 +100,18 @@ form {
 }
 
 .rightwatermark {
-    display: none;
     right: 15;
     background-position: center right;
 }
 
 .poweredby {
-    display: none;
     position: absolute;
     left: 25;
     bottom: 7;
     font-size: 11pt;
     color: rgba(255,255,255,.50);
     text-decoration: none;
-    z-index: 100;
+    z-index: $poweredByZ;
 }
 
 .connected {
@@ -125,6 +131,7 @@ form {
     z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
+        max-width: 350px;
     }
 
     &-arrow {
@@ -142,4 +149,4 @@ form {
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;
-}
+}

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,14 +50,17 @@
         position:relative;
         height:196px;
         padding: 0;
-        padding-left: 17px;
+        /* 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;
-        font-size: 0pt; /*!!!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 {
             bottom: -196px;
@@ -68,7 +71,7 @@
             position: relative;
             background-size: contain;
             border: $thumbnailVideoBorder solid transparent;
-            border-radius:1px;
+            border-radius: $borderRadius;
             margin: 0 $thumbnailVideoMargin;
 
             &.videoContainerFocused, &:hover {
@@ -76,8 +79,8 @@
             }
 
             /**
-            * Focused video thumbnail.
-            */
+             * Focused video thumbnail.
+             */
             &.videoContainerFocused {
                 transition-duration: 0.5s;
                 -webkit-transition-duration: 0.5s;
@@ -89,33 +92,42 @@
                 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 {
                 cursor: hand;
-                border-radius:1px;
+                border-radius: $borderRadius;
                 object-fit: cover;
                 overflow: hidden;
             }
         }
     }
-}
+
+    /**
+     * 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,115 +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";
-}
-.icon-autorenew:before {
-  content: "\e903";
+    content: "\e901";
 }
 .icon-hangup:before {
-  content: "\e905";
+    content: "\e905";
 }
 .icon-chat:before {
-  content: "\e906";
+    content: "\e906";
+}
+.icon-download:before {
+    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";
-}
-.icon-menu:before {
-  content: "\e91f";
+    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";
+}
+.icon-security:before {
+    content: "\e90d";
+}
+.icon-security-locked:before {
+    content: "\e90e";
+}
+.icon-reload:before {
+    content: "\e90f";
+}
+.icon-microphone:before {
+    content: "\e910";
+}
+.icon-mic-empty:before {
+    content: "\e911";
+}
+.icon-mic-disabled:before {
+    content: "\e912";
+}
+.icon-raised-hand:before {
+    content: "\e91e";
+}
+.icon-contactList:before {
+    content: "\e91b";
+}
+.icon-link:before {
+    content: "\e913";
+}
+.icon-shared-video:before {
+    content: "\e914";
+}
+.icon-settings:before {
+    content: "\e915";
 }
 .icon-star:before {
     content: "\e916";
 }
-.icon-star-full:before {
-  content: "\e90a";
-}
-.icon-security:before {
-  content: "\e90d";
-}
-.icon-security-locked:before {
-  content: "\e90e";
-}
-.icon-reload:before {
-  content: "\e90f";
-}
-.icon-microphone:before {
-  content: "\e910";
-}
-.icon-mic-empty:before {
-  content: "\e911";
-}
-.icon-mic-disabled:before {
-  content: "\e912";
-}
-.icon-raised-hand:before {
-  content: "\e91e";
-}
-.icon-contactList:before {
-  content: "\e91b";
-}
-.icon-link:before {
-  content: "\e913";
-}
-.icon-shared-video:before {
-  content: "\e914";
-}
-.icon-settings:before {
-  content: "\e915";
+.icon-switch-camera:before {
+    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";
 }
-// FIXME not used anymore - consider removing in the next font update
 .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,79 +75,121 @@
 }
 
 @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;
+}
+
+/**
+ * Creates a semi-transparent background with the given color and alpha
+ * (opacity) value.
+ */
+@mixin transparentBg($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: 0;
-$thumbnailIndicatorSize: 3em;
+$thumbnailIndicatorBorder: 2px;
+$thumbnailIndicatorSize: $thumbnailToolbarHeight;
 $thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
-$hideFilmstripButtonWidth: 17px;
+$filmstripToggleButtonWidth: 17px;
 
 
 /**
@@ -34,23 +33,25 @@ $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
  * TODO: looks like we don't use it
  */
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
 
-/*
+/**
  * Video layout
  */
 $videoThumbnailHovered: rgba(22, 94, 204, .4);
@@ -78,6 +79,14 @@ $rateStarDefault: #ccc;
 $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
 
+/**
+ * Modals
+ */
+$modalButtonFontSize: 14px;
+$modalMockAKInputBackground: #fafbfc;
+$modalMockAKInputBorder: 1px solid #f4f5f7;
+$modalTextColor: #333;
+
 /**
  * Notifications
  */
@@ -95,7 +104,7 @@ $notificationWidth: 215px;
 /**
  * Misc.
  */
-$borderRadius: 3px;
+$borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
 $sidebarWidth: 220px;
 $popoverMenuPadding: 13px;
@@ -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
@@ -126,4 +148,17 @@ $defaultDarkFontColor: #000;
 $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
+$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

@@ -18,9 +18,10 @@
 
     &__background {
         @include topLeft();
+        background-color: black;
+        border-radius: $borderRadius;
         width: 100%;
         height: 100%;
-        background-color: black;
     }
 
     /**
@@ -30,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.
     }
@@ -58,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;
@@ -106,12 +107,19 @@
     }
 
     &__hoverOverlay {
+        background: rgba(0,0,0,.6);
+        border-radius: $borderRadius;
         position: relative;
         width: 100%;
         height: 100%;
         visibility: hidden;
-        background: rgba(0,0,0,.6);
-        z-index: 2;
+        z-index: $zindex2;
+    }
+
+    &.audio-only {
+        .videoThumbnailProblemFilter {
+            filter: none;
+        }
     }
 }
 
@@ -128,8 +136,8 @@
 
 #localVideoWrapper>video,
 #localVideoWrapper>object {
+    border-radius: $borderRadius !important;
     cursor: hand;
-    border-radius:1px !important;
     object-fit: cover;
 }
 
@@ -159,7 +167,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
 }
@@ -169,7 +177,7 @@
 }
 
 #etherpad {
-    z-index: 0;
+    z-index: $zindex0;
 }
 
 /**
@@ -191,7 +199,7 @@
     overflow: hidden;
     white-space: nowrap;
     line-height: $thumbnailToolbarHeight;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -211,6 +219,7 @@
 
 .videocontainer .displayname {
     pointer-events: none;
+    padding: 0 3px 0 3px;
 }
 
 .videocontainer .editdisplayname {
@@ -230,7 +239,7 @@
     padding: 3px 5px;
     font-size: 9pt;
     cursor: pointer;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -280,7 +289,7 @@
     top: 0px;
     right: 0;
     margin: 7px;
-    z-index: 3;
+    z-index: $zindex3;
     width: 18px;
     height: 13px;
     color: #FFF;
@@ -298,7 +307,7 @@
     margin-top: -17px;
     width: 6px;
     height: 35px;
-    z-index: 2;
+    z-index: $zindex2;
     border: none;
 
     .audiodot-top,
@@ -341,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;
 }
@@ -405,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");
@@ -417,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");
@@ -450,7 +459,7 @@
     display: none;
     position: absolute;
     width: auto;
-    z-index: 2;
+    z-index: $zindex2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -471,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;
@@ -485,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;
@@ -501,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;
 
@@ -524,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 {
@@ -50,7 +50,7 @@
     float: left;
 }
 
-#domain_name
+.domain-name
 {
     float: left;
     height: 55px;
@@ -61,37 +61,51 @@
     color: $defaultDarkColor;
 }
 
-#enter_room_field {
-    font-size: 15px;
-    border: none;
-    -webkit-appearance: none;
-    width: 228px;
-    height: 55px;
-    line-height: 55px;
-    font-weight: 500;
-    box-shadow: none;
-    float: left;
-    background-color: #FFFFFF;
-    position: relative;
-    z-index: 2;
-}
+.enter-room {
+    &__field {
+        font-size: 15px;
+        border: none;
+        -webkit-appearance: none;
+        width: 228px;
+        height: 55px;
+        line-height: 55px;
+        font-weight: 500;
+        box-shadow: none;
+        float: left;
+        background-color: #FFFFFF;
+        position: relative;
+        z-index: $zindex2;
+    }
 
-#enter_room_button {
-    width: 73px;
-    height: 45px;
-    background-color: #21B9FC;
-    moz-border-radius: 1px;
-    -webkit-border-radius: 1px;
-    color: #ffffff;
-    font-weight: 600;
-    border: none;
-    margin-top: 5px;
-    font-size: 19px;
-    padding-top: 6px;
-    outline: none;
-    float:left;
-    position: relative;
-    z-index: 2;
+    &__reload {
+        display: block;
+        width: 30px;
+        color: #acacac;
+        font-size: 1.9em;
+        line-height: 55px;
+        z-index: $zindex3;
+        float:  left;
+        cursor: pointer;
+        text-align: center;
+    }
+
+    &__button {
+        width: 73px;
+        height: 45px;
+        background-color: #21B9FC;
+        moz-border-radius: 1px;
+        -webkit-border-radius: 1px;
+        color: #ffffff;
+        font-weight: 600;
+        border: none;
+        margin-top: 5px;
+        font-size: 19px;
+        padding-top: 6px;
+        outline: none;
+        float:left;
+        position: relative;
+        z-index: $zindex2;
+    }
 }
 
 #enter_room_container {
@@ -184,16 +198,3 @@
     line-height: 22px;
     font-weight: 200;
 }
-
-#reload_roomname
-{
-    width: 30px;
-    color: #acacac;
-    font-size: 1.9em;
-    line-height: 55px;
-    z-index: 3;
-    float:  left;
-    cursor: pointer;
-    text-align: center;
-    display: none;
-}

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;
@@ -82,4 +94,8 @@
             color: $linkHoverFontColor;
         }
     }
-}
+
+    &_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

@@ -1,5 +1,6 @@
 .overlay {
-    &__container {
+    &__container,
+    &__container-light {
         top: 0;
         left: 0;
         width: 100%;
@@ -7,6 +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 {
@@ -16,6 +27,11 @@
         width: 56%;
         left: 50%;
         @include transform(translateX(-50%));
+        &.filmstrip-only {
+            left: 0px;
+            width: 100%;
+            @include transform(none);
+        }
 
         &_bottom {
             position: absolute;
@@ -28,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;

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/control

@@ -21,8 +21,7 @@ Description: WebRTC JavaScript video conferences
 
 Package: jitsi-meet-web-config
 Architecture: all
-Depends: openssl, openjdk-8-jre-headless | nginx | apache2,
- jitsi-meet-web
+Depends: openssl, openjdk-8-jre-headless | nginx | apache2
 Description: Configuration for web serving of Jitsi Meet
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
  Videobridge to provide high quality, scalable video conferences.
@@ -37,7 +36,7 @@ Description: Configuration for web serving of Jitsi Meet
 
 Package: jitsi-meet-prosody
 Architecture: all
-Depends: openssl, prosody | prosody-trunk, jitsi-meet-web
+Depends: openssl, prosody | prosody-trunk
 Description: Prosody configuration for Jitsi Meet
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
  Videobridge to provide high quality, scalable video conferences.

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.docs

@@ -0,0 +1,4 @@
+doc/debian/jitsi-meet/jitsi-meet.example
+doc/debian/jitsi-meet/jitsi-meet.example-apache
+doc/debian/jitsi-meet/README
+config.js

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"
@@ -94,7 +94,7 @@ case "$1" in
         # jitsi meet
         JITSI_MEET_CONFIG="/etc/jitsi/meet/$JVB_HOSTNAME-config.js"
         if [ ! -f $JITSI_MEET_CONFIG ] ; then
-            cp /usr/share/doc/jitsi-meet-web/config.js $JITSI_MEET_CONFIG
+            cp /usr/share/doc/jitsi-meet-web-config/config.js $JITSI_MEET_CONFIG
             sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" $JITSI_MEET_CONFIG
         fi
 
@@ -127,6 +127,7 @@ case "$1" in
             echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.resourceBase=/usr/share/jitsi-meet" >> $JVB_CONFIG
             echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.alias./config.js=/etc/jitsi/meet/$JVB_HOSTNAME-config.js" >> $JVB_CONFIG
             echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.alias./interface_config.js=/usr/share/jitsi-meet/interface_config.js" >> $JVB_CONFIG
+            echo "org.jitsi.videobridge.rest.jetty.ResourceHandler.alias./logging_config.js=/usr/share/jitsi-meet/logging_config.js" >> $JVB_CONFIG
             echo "org.jitsi.videobridge.rest.jetty.RewriteHandler.regex=^/([a-zA-Z0-9]+)$" >> $JVB_CONFIG
             echo "org.jitsi.videobridge.rest.jetty.RewriteHandler.replacement=/" >> $JVB_CONFIG
             echo "org.jitsi.videobridge.rest.jetty.SSIResourceHandler.paths=/" >> $JVB_CONFIG
@@ -171,7 +172,7 @@ case "$1" in
 
             # nginx conf
             if [ ! -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf ] ; then
-                cp /usr/share/doc/jitsi-meet-web/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+                cp /usr/share/doc/jitsi-meet-web-config/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
                 if [ ! -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf ] ; then
                     ln -s /etc/nginx/sites-available/$JVB_HOSTNAME.conf /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
                 fi
@@ -192,10 +193,43 @@ case "$1" in
 
             invoke-rc.d nginx reload
         elif [[ "$FORCE_APACHE" = "true" && ( -z "$JVB_HOSTNAME_OLD" || "$RECONFIGURING" = "true" ) ]] ; then
-            echo "Apache2 server is installed, automatic configuration is not supported at this time."
-            echo "You need to configure yourselve the virtual host for your domain."
+            # this is a reconfigure, lets just delete old links
+            if [ "$RECONFIGURING" = "true" ] ; then
+                a2dissite $JVB_HOSTNAME_OLD.conf
+                rm -f /etc/jitsi/meet/$JVB_HOSTNAME_OLD-config.js
+            fi
+
+            # apache2 config
+            if [ ! -f /etc/apache2/sites-available/$JVB_HOSTNAME.conf ] ; then
+                # when creating new config, make sure all needed modules are enabled
+                a2enmod rewrite ssl headers proxy_http include
+                cp /usr/share/doc/jitsi-meet-web-config/jitsi-meet.example-apache /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+                a2ensite $JVB_HOSTNAME.conf
+                sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                # replace self-signed certificate paths with user provided ones
+                CERT_KEY_ESC=$(echo $CERT_KEY | sed 's/\./\\\./g')
+                CERT_KEY_ESC=$(echo $CERT_KEY_ESC | sed 's/\//\\\//g')
+                sed -i "s/SSLCertificateKeyFile\ \/etc\/jitsi\/meet\/.*key/SSLCertificateKeyFile\ $CERT_KEY_ESC/g" \
+                    /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+                CERT_CRT_ESC=$(echo $CERT_CRT | sed 's/\./\\\./g')
+                CERT_CRT_ESC=$(echo $CERT_CRT_ESC | sed 's/\//\\\//g')
+                sed -i "s/SSLCertificateFile\ \/etc\/jitsi\/meet\/.*crt/SSLCertificateFile\ $CERT_CRT_ESC/g" \
+                    /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            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.postrm

@@ -27,6 +27,9 @@ case "$1" in
         if [ -x "/etc/init.d/nginx" ]; then
             invoke-rc.d nginx reload
         fi
+        if [ -x "/etc/init.d/apache2" ]; then
+            invoke-rc.d apache2 reload
+        fi
     ;;
     purge)
         db_get jitsi-meet/jvb-hostname
@@ -35,6 +38,8 @@ case "$1" in
             rm -f /etc/jitsi/meet/$JVB_HOSTNAME-config.js
             rm -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf
             rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
+            rm -f /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            rm -f /etc/apache2/sites-enabled/$JVB_HOSTNAME.conf
             rm -f /etc/jitsi/videobridge/$JVB_HOSTNAME.jks
             rm -f /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
             rm -f /etc/jitsi/meet/$JVB_HOSTNAME.key

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.docs

@@ -1,4 +1 @@
 README.md
-doc/debian/jitsi-meet/jitsi-meet.example
-doc/debian/jitsi-meet/README
-config.js

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

@@ -1,181 +1,215 @@
-Jitsi Meet API
-============
+# Jitsi Meet API
 
-You can use Jitsi Meet API to embed Jitsi Meet in to your application.
+You can use the Jitsi Meet API to embed Jitsi Meet in to your application.
 
-Installation
-==========
+## Installation
+
+To embed Jitsi Meet in your application you need to add the Jitsi Meet API library:
 
-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
+## 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
-<script>
-    var domain = "meet.jit.si";
-    var room = "JitsiMeetAPIExample";
-    var width = 700;
-    var height = 700;
-    var api = new JitsiMeetExternalAPI(domain, room, width, height);
-</script>
+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 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.
+
+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 api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement);
+var interfaceConfigOverwrite = {filmStripOnly: true};
+var api = new JitsiMeetExternalAPI(domain, room, width, height, undefined, undefined, interfaceConfigOverwrite);
 ```
-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:
+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
-    var configOverwrite = {enableSimulcast: false};
-    var interfaceConfigOverwrite = {filmStripOnly: true};
-    var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, configOverwrite, interfaceConfigOverwrite);
+api.executeCommand(command, ...arguments)
 ```
 
-Controlling embedded Jitsi Meet Conference
-=========
+The `command` parameter is String object with the name of the command. The following commands are currently supported:
 
-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.
-The ```arguments``` parameter is array with the arguments required by the command.
-If no arguments are required by the command this parameter can be omitted or you can pass empty array.
-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
-```
+* **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.
-```
-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', [])
+
+* **toggleAudio** - Mutes / unmutes the audio for the local participant. No arguments are required.
+```javascript
+api.executeCommand('toggleAudio')
 ```
 
-* **toggleShareScreen** - starts / stops the screen sharing. No arguments are required.
+* **toggleVideo** - Mutes / unmutes the video for the local participant. No arguments are required.
+```javascript
+api.executeCommand('toggleVideo')
 ```
-api.executeCommand('toggleShareScreen', [])
+
+* **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.
-```
-api.executeCommand('hangup', [])
+```javascript
+api.executeCommand('hangup')
 ```
 
-You can also execute multiple commands using the method ```executeCommands```.
+* **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 object with keys the names of the commands and values the arguments for the
-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 ```addEventListener``` method.
-```
+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 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:
+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.
 
-* **incomingMessage** - event notifications about incoming
-messages. The listener will receive object with the following structure:
-```
+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
+"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:
-```
+
+* **outgoingMessage** - Event notifications about outgoing
+messages. The listener will receive an object with the following structure:
+```javascript
 {
-"message": txt//the text of the message
+"message": txt   // the text of the message
 }
 ```
+
 * **displayNameChanged** - event notifications about display name
-change. The listener will receive object with the following structure:
-```
+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
+"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:
-```
+
+* **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
+"jid": jid   // the JID of the participant
 }
 ```
-* **participantLeft** - event notifications about participant that left room.
-The listener will receive object with the following structure:
-```
+
+* **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
+"jid": jid   // the JID of the participant
 }
 ```
-* **video-conference-joined** - event notifications fired when the local user has joined the video conference.
-The listener will receive object with the following structure:
-```
+
+* **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
+"roomName": room   // the room name of the conference
 }
 ```
-* **video-conference-left** - event notifications fired when the local user has left the video conference.
-The listener will receive object with the following structure:
-```
+
+* **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
+"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```.
+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.
+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({
@@ -183,20 +217,30 @@ api.addEventListeners({
     outgoingMessage: outgoingMessageListener})
 ```
 
-If you want to remove a listener you can use ```removeEventListener``` method with argument the name of the event.
-```
+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 argument
- array with the names of the events.
-```
+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 remove the embedded Jitsi Meet Conference with the following code:
+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()
 ```
 
-It is a good practice to remove the conference before the page is unloaded.
+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/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

@@ -0,0 +1,45 @@
+
+<VirtualHost *:80>
+    ServerName jitsi-meet.example.com
+    Redirect permanent / https://jitsi-meet.example.com/
+    RewriteEngine On
+    RewriteCond %{HTTPS} off
+    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+</VirtualHost>
+
+<VirtualHost *:443>
+
+  ServerName jitsi-meet.example.com
+
+  SSLProtocol TLSv1 TLSv1.1 TLSv1.2
+  SSLEngine on
+  SSLProxyEngine on
+  SSLCertificateFile /etc/jitsi/meet/jitsi-meet.example.com.crt
+  SSLCertificateKeyFile /etc/jitsi/meet/jitsi-meet.example.com.key
+  SSLCipherSuite "EECDH+ECDSA+AESGCM:EECDH+aRSA+AESGCM:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA256:EECDH+ECDSA+SHA384:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA384:EDH+aRSA+AESGCM:EDH+aRSA+SHA256:EDH+aRSA:EECDH:!aNULL:!eNULL:!MEDIUM:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS:!RC4:!SEED"
+  SSLHonorCipherOrder on
+  Header set Strict-Transport-Security "max-age=31536000"
+
+  DocumentRoot "/usr/share/jitsi-meet"
+  <Directory "/usr/share/jitsi-meet">
+    Options Indexes MultiViews Includes FollowSymLinks
+    AddOutputFilter Includes html
+    AllowOverride All
+    Order allow,deny
+    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
+  </Location>
+
+  ProxyPreserveHost on
+  ProxyPass /http-bind http://localhost:5280/http-bind/
+  ProxyPassReverse /http-bind http://localhost:5280/http-bind/
+
+  RewriteEngine on
+  RewriteRule ^/([a-zA-Z0-9]+)$ /index.html
+</VirtualHost>

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/examples/api.html

@@ -0,0 +1,22 @@
+<html itemscope itemtype="http://schema.org/Product" prefix="og: http://ogp.me/ns#" xmlns="http://www.w3.org/1999/html">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="content-type" content="text/html;charset=utf-8">
+    </head>
+    <body>
+        <script src="https://meet.jit.si/external_api.js"></script>
+        <script>
+            var domain = "meet.jit.si";
+            var room = "JitsiMeetAPIExample";
+            var width = 700;
+            var height = 180;
+            var htmlElement = undefined;
+            var configOverwrite = {};
+            var interfaceConfigOverwrite = {
+                filmStripOnly: true
+            };
+            var api = new JitsiMeetExternalAPI(domain, room, width, height,
+                htmlElement, configOverwrite, interfaceConfigOverwrite);
+        </script>
+    </body>
+</html>

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 --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