Fixes renewing let's encrypt certificates when using jetty.

Uses webroot for obtaining certificate, avoids stopping jitsi-videobridge before obtaining certificate.
Adds a renew hook, where we reload apache or nginx and try to graceful shutdown jvb and restart it.
Before merging this we need to make sure graceful shutdown is enabled by default and also pubsub is enabled by default so after restarting jvb, jicofo will discover it.

.editorconfig

@@ -8,3 +8,6 @@ indent_size = 4
 indent_style = space
 max_line_length = 80
 trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab

.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,52 @@
+[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/.*
+
+[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
+
+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
+
+unsafe.enable_getters_and_setters=true
+
+[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,6 +1,18 @@
+# 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/
 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,33 @@
+# How to contribute
+We would love to have your help. Before you start working however, please read
+and follow this short guide.
+
+# Reporting Issues
+Before you open an issue on GitHub, please discuss it on one of our
+[mailing lists](https://jitsi.org/Development/MailingLists) and wait for
+confirmation from one of the committers. Once you have that confirmation,
+please proceed to reporting the issue on GitHub, while providing 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,4 @@
+/**
+ * Notifies interested parties that hangup procedure will start.
+ */
+export const BEFORE_HANGUP = "conference.before_hangup";

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
@@ -47,7 +40,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 +49,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,6 +12,17 @@ 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).
 
+## Download
+
+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 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
 
 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).
@@ -28,7 +39,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,6 +86,19 @@ npm unlink lib-jitsi-meet
 npm install
 ```
 
+## 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).
+
 ## Discuss
 Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on Github.
 

analytics.js

@@ -27,5 +27,7 @@
         action + '.' + data.browserName, label, value);
   };
 
-  ctx.Analytics = Analytics;
+  if(typeof ctx.analyticsHandlers === "undefined")
+    ctx.analyticsHandlers = [];
+  ctx.analyticsHandlers.push(Analytics);
 }(window));

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.3.${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,11 +1,14 @@
 <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"/>
 
@@ -13,8 +16,8 @@
     <uses-feature android:name="android.hardware.camera.autofocus"/>
 
     <uses-sdk
-        android:minSdkVersion="16"
-        android:targetSdkVersion="22" />
+        android:minSdkVersion="19"
+        android:targetSdkVersion="23" />
 
     <application
       android:allowBackup="true"
@@ -26,7 +29,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 +39,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,64 @@
+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()
+            );
+        }
+    };
+
+    /**
+     * {@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,322 @@
+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() {
+                if (updateAudioRoute(mode)) {
+                    AudioModeModule.this.mode = mode;
+                    promise.resolve(null);
+                } else {
+                    promise.reject(
+                            "setMode",
+                            "Failed to set the requested audio 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/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'
 
 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,4 +1,3 @@
-/* global $, config, getRoomName */
 /* application specific logic */
 
 import "babel-polyfill";
@@ -7,7 +6,6 @@ import "jquery-contextmenu";
 import "jquery-ui";
 import "strophe";
 import "strophe-disco";
-import "strophe-caps";
 import "jQuery-Impromptu";
 import "autosize";
 
@@ -18,64 +16,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 UIEvents from './service/UI/UIEvents';
-import getTokenData from "./modules/TokenData/TokenData";
-
-/**
- * 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 translation from "./modules/translation/translation";
+import remoteControl from "./modules/remotecontrol/RemoteControl";
 
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
@@ -95,6 +42,17 @@ const APP = {
     UI,
     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).
@@ -103,105 +61,15 @@ const APP = {
     ConferenceUrl : null,
     connection: null,
     API,
-    init () {
-        this.keyboardshortcut =
-            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
-        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();
-    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;

close.html

@@ -1,8 +0,0 @@
-<html>
-<head>
-    <link rel="stylesheet" href="css/all.css"/>
-</head>
-<body>
-    <div class="redirectPageMessage">Thank you for your feedback!</div>
-</body>
-</html>

config.js

@@ -20,13 +20,20 @@ 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'],
+    desktopSharingChromeSources: ['screen', 'window', 'tab'],
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
@@ -40,7 +47,7 @@ var config = { // eslint-disable-line no-unused-vars
     // up to and including 41. On Firefox 42 and higher, we will run without the
     // extension.
     // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: -1,
+    desktopSharingFirefoxMaxVersionExtRequired: 51,
     // The URL to the Firefox extension for desktop sharing.
     desktopSharingFirefoxExtensionURL: null,
 
@@ -53,8 +60,6 @@ var config = { // eslint-disable-line no-unused-vars
     disableStats: false,
     disableAudioLevels: false,
     channelLastN: -1, // The default value of the channel attribute last-n.
-    adaptiveLastN: false,
-    //disableAdaptiveSimulcast: false,
     enableRecording: false,
     enableWelcomePage: true,
     //enableClosePage: false, // enabling the close page will ignore the welcome
@@ -76,5 +81,20 @@ var config = { // eslint-disable-line no-unused-vars
     // 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,7 +1,17 @@
 /* global APP, JitsiMeetJS, config */
+const logger = require("jitsi-meet-logger").getLogger(__filename);
+
 import AuthHandler from './modules/UI/authentication/AuthHandler';
 import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
 
+import {
+    connectionEstablished,
+    connectionFailed
+} from './react/features/base/connection';
+import {
+    isFatalJitsiConnectionError
+} from './react/features/base/lib-jitsi-meet';
+
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
 
@@ -65,6 +75,18 @@ function connect(id, password, roomName) {
         connection.addEventListener(
             ConnectionEvents.CONNECTION_FAILED, handleConnectionFailed
         );
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED, connectionFailedHandler);
+
+        function connectionFailedHandler(error, errMsg) {
+            APP.store.dispatch(connectionFailed(connection, error, errMsg));
+
+            if (isFatalJitsiConnectionError(error)) {
+                connection.removeEventListener(
+                    ConnectionEvents.CONNECTION_FAILED,
+                    connectionFailedHandler);
+            }
+        }
 
         function unsubscribe() {
             connection.removeEventListener(
@@ -78,13 +100,14 @@ function connect(id, password, roomName) {
         }
 
         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);
         }
 

css/_base.scss

@@ -3,21 +3,25 @@
     user-select: none;
 }
 
-html, body{
-    margin:0px;
-    height:100%;
-    color: $defaultColor;
+body {
+    margin: 0px;
+    width: 100%;
+    height: 100%;
     font-size: 12px;
     font-weight: 400;
-    background: #000000;
     overflow: hidden;
+    color: $defaultColor;
+    background: $defaultBackground;
+    &.filmstrip-only {
+        background: transparent;
+    }
 }
 
 p {
     margin: 0;
 }
 
-html, body, input, textarea, keygen, select, button {
+body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
 
@@ -29,36 +33,6 @@ html, body, input, textarea, keygen, select, button {
     color: #636363;
 }
 
-input[type='text'], input[type='password'], textarea {
-    display: inline-block;
-    width: 100%;
-    padding: 5px 7px;
-    color: $inputColor;
-    border-radius: $borderRadius;
-    line-height: 32px;
-    height: 32px;
-    text-align: left;
-    border:1px solid $inputBorderColor;
-    background-color: $inputBackground;
-    outline: none; /* removes the default outline */
-    resize: none; /* prevents the user-resizing, adjust to taste */
-}
-
-@include placeholder {
-    color: $placeHolderColor;
-}
-
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: none;
-    line-height: 1.5em;
-}
-
-button.no-icon {
-    padding: 0 1em;
-}
-
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
@@ -75,10 +49,26 @@ input[type="reset"], input[type="submit"] {
     cursor: pointer;
 }
 
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: none;
+    line-height: 1.5em;
+}
+
+input[type='text'], input[type='password'], textarea {
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
 button {
     color: #FFF;
     background-color: $buttonBackground;
     border-radius: $borderRadius;
+
+    &.no-icon {
+        padding: 0 1em;
+    }
 }
 
 button,
@@ -94,11 +84,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);
@@ -106,20 +95,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 {
@@ -132,38 +119,6 @@ form {
     font-size: 12px;
 }
 
-/**
- * Hides an element.
- */
-.hide {
-    display: none !important;
-}
-
-/**
- * Shows an element.
- */
-.show {
-    display: block !important;
-}
-
-/**
- * Shows an inline element.
- */
-.show-inline {
-    display: inline-block !important;
-}
-
-/**
- * Shows a flex element.
- */
-.show-flex {
-    display: -webkit-box !important;
-    display: -moz-box !important;
-    display: -ms-flexbox !important;
-    display: -webkit-flex !important;
-    display: flex !important;
-}
-
 /**
 * Tooltips
 **/
@@ -171,6 +126,7 @@ form {
     z-index: $tooltipsZ;
     &-inner {
         background-color: $tooltipBg;
+        max-width: 350px;
     }
 
     &-arrow {
@@ -185,19 +141,7 @@ form {
     visibility: visible;
 }
 
-.link {
-    cursor: pointer;
-    color: $linkFontColor;
-    @include transition(color .1s ease-out);
-
-    &:hover {
-        color: $linkHoverFontColor;
-        text-decoration: underline;
-        @include transition(color .1s ease-in);
-    }
-}
-
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;
-}
+}

css/_chat.scss

@@ -107,6 +107,10 @@
     float: left;
     padding-left: 5px;
     font-weight: bold;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 95%;
+    overflow: hidden;
 }
 
 #chat_container .timestamp {
@@ -208,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/_contact_list.scss

@@ -5,7 +5,7 @@
         font-size: 12px;
         bottom: 0px;
         margin: 0;
-        margin-top: 16px;
+        margin-top: 12px;
         padding: 0px;
         width: 100%;
     }
@@ -13,18 +13,24 @@
     .clickable {
         cursor: pointer;
     }
+
+    .icon-security,
+    .icon-security-locked {
+        font-size: 16px;
+    }
 }
 
 #contacts {
 
     >li {
-        color: $defaultSideBarFontColor;
+        display: block;
         list-style-type: none;
         text-align: left;
         white-space: nowrap;
-        color: #FFF;
-        font-size: 10pt;
-        padding: 6px 10%;
+        color: $baseLight;
+        font-size: 16px;
+        padding: 0 10%;
+        height: 27px;
 
         &:hover,
         &:active {
@@ -36,6 +42,7 @@
             vertical-align: middle;
             margin: 0px;
             width: 100%;
+            line-height: 1.5em;
             text-overflow: ellipsis;
             overflow: hidden;
         }

css/_filmstrip.scss

@@ -0,0 +1,124 @@
+%align-right {
+    @include flex();
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.filmstrip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 10px 5px;
+    @extend %align-right;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        z-index: $zindex1;              // Set z-index to make element visible
+        width: $hideFilmstripButtonWidth;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        height:196px;
+        padding: 0;
+        /*The filmstrip should not be covered by the left toolbar*/
+        padding-left: $defaultToolbarSize + 5;
+        bottom: 0;
+        width:auto;
+        border: $thumbnailsBorder solid transparent;
+        z-index: $filmstripVideosZ;
+        transition: bottom 2s;
+        overflow: visible !important;
+        /*!!!Removes the gap between the local video container and the remote
+        videos.*/
+        font-size: 0pt;
+
+        &.hidden {
+            bottom: -196px;
+        }
+
+        .videocontainer {
+            display: none;
+            position: relative;
+            background-size: contain;
+            border: $thumbnailVideoBorder solid transparent;
+            border-radius: $borderRadius;
+            margin: 0 $thumbnailVideoMargin;
+
+            &.videoContainerFocused, &:hover {
+                cursor: hand;
+            }
+
+            /**
+            * Focused video thumbnail.
+            */
+            &.videoContainerFocused {
+                transition-duration: 0.5s;
+                -webkit-transition-duration: 0.5s;
+                -webkit-animation-name: greyPulse;
+                -webkit-animation-duration: 2s;
+                -webkit-animation-iteration-count: 1;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+                box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
+            }
+
+            .remotevideomenu > .icon-menu {
+                display: none;
+            }
+
+            /**
+            * Hovered video thumbnail.
+            */
+            &:hover {
+                cursor: hand;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
+                box-shadow: inset 0 0 3px $videoThumbnailHovered,
+                0 0 3px $videoThumbnailHovered;
+
+                .remotevideomenu > .icon-menu {
+                    display: inline-block;
+                }
+            }
+
+            /* With TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius: $borderRadius;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+}

css/_font.scss

@@ -25,6 +25,9 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-mic-camera-combined:before {
+  content: "\e903";
+}
 .icon-feedback:before {
   content: "\e91d";
 }
@@ -34,15 +37,15 @@
 .icon-avatar:before {
   content: "\e901";
 }
-.icon-autorenew:before {
-  content: "\e903";
-}
 .icon-hangup:before {
   content: "\e905";
 }
 .icon-chat:before {
   content: "\e906";
 }
+.icon-download:before {
+  content: "\e902";
+}
 .icon-edit:before {
   content: "\e907";
 }
@@ -67,9 +70,6 @@
 .icon-exit-full-screen:before {
   content: "\e90c";
 }
-.icon-star:before {
-    content: "\e916";
-}
 .icon-star-full:before {
   content: "\e90a";
 }
@@ -106,6 +106,12 @@
 .icon-settings:before {
   content: "\e915";
 }
+.icon-star:before {
+  content: "\e916";
+}
+.icon-switch-camera:before {
+  content: "\e921";
+}
 .icon-share-desktop:before {
   content: "\e917";
 }
@@ -130,7 +136,6 @@
 .icon-recEnable:before {
   content: "\e614";
 }
-// FIXME not used anymore - consider removing in the next font update
 .icon-presentation:before {
   content: "\e603";
 }

css/_inlay.scss

@@ -0,0 +1,112 @@
+.inlay {
+    margin-top: 14%;
+    @include border-radius(4px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: $inlayColorBg;
+    text-align: center;
+
+    &__title {
+        margin: 17px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $inlayBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
+        display: block;
+        margin-top: 22px;
+        font-size: 16px;
+    }
+
+    &__icon {
+        margin: 0 10px;
+        font-size: 50px;
+    }
+
+    &-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 {
+            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,18 +10,17 @@
     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;
-    margin-top: -10px;
-    margin-bottom: 35px;
+    margin-top: -$popoverMenuPadding;
 
     &__menu-padding {
-        height: 35px;
+        height: $popoverMenuPadding;
         width: 100px;
         position: absolute;
-        bottom: -35px;
+        bottom: -$popoverMenuPadding;
     }
 
     &__showmore {

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,86 +60,136 @@
 }
 
 @mixin absoluteAligning() {
-  top: 50%;
-  left: 50%;
-  position: absolute;
-  @include transform(translate(-50%, -50%))
-}
-
-@mixin 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;
+    top: 50%;
+    left: 50%;
+    position: absolute;
+    @include transform(translate(-50%, -50%));
 }
 
 /**
-* Mixin styling placeholder
+* Defines the maximum width and height
 **/
-@mixin placeholder() {
-  $selectors: (
-          "::-webkit-input-placeholder",
-          "::-moz-placeholder",
-          ":-moz-placeholder",
-          ":-ms-input-placeholder"
-  );
+@mixin maxSize($value) {
+    max-width: $value;
+    max-height: $value;
+}
 
-  @each $selector in $selectors {
-    #{$selector} {
-      @content;
+@mixin 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;
+}
+
+/**
+ * Mixin styling a placeholder.
+ **/
+@mixin placeholder() {
+    $selectors: (
+        "::-webkit-input-placeholder",
+        "::-moz-placeholder",
+        ":-moz-placeholder",
+        ":-ms-input-placeholder"
+    );
+
+    @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,12 @@
-#notice {
+.notice {
     position: relative;
-    z-index: 3;
+    z-index: $zindex3;
     margin-top: 6px;
+
+    &__message {
+        background-color: #000000;
+        color: white;
+        padding: 3px;
+        border-radius: 5px;
+    }
 }
-#noticeText {
-    background-color: #000000;
-    color: white;
-    padding: 3px;
-    border-radius: 5px;
-}

css/_policy.scss

@@ -0,0 +1,15 @@
+.policy {
+    &__logo {
+        display: block;
+        width: 200px;
+        height: 50px;
+        margin: 30px auto 0;
+    }
+
+    &__text {
+        text-align: center;
+        font-size: 14px;
+        line-height: 21px;
+        font-weight: 300;
+    }
+}

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;
@@ -41,11 +41,16 @@
         }
     }
 
-    &__text {
+    &__text,
+    &__slider {
         display: inline-block;
         vertical-align: middle;
     }
 
+    &__slider {
+        width: 50px;
+    }
+
     &__icon {
         vertical-align: middle;
         position: relative;
@@ -66,4 +71,9 @@
 
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
     display:block !important;
-}
+}
+
+.remote-control-spinner {
+    top: 6px;
+    left: 2px;
+}

css/_redirect_page.scss

@@ -1,12 +1,34 @@
-html, body {
-    width: 100%;
-    height:100%;
-    color: $defaultColor;
-    background: $defaultBackground;
-}
-
 .redirectPageMessage {
+    width: 30%;
+    margin: 20% auto;
     text-align: center;
-    font-size: 36px;
-    margin-top: 20%;
+    font-size: 24px;
+
+    .thanks-msg {
+        border-bottom: 1px solid $selectBg;
+        padding-left: 30px;
+        padding-right: 30px;
+        p {
+            margin: 30px auto;
+            font-size: 24px;
+            line-height: 24px;
+        }
+    }
+    .hint-msg{
+        p {
+            margin: 26px auto;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 18px;
+            .hint-msg__holder{
+                font-weight: 200;
+            }
+        }
+        .happy-software{
+            width: 120px;
+            height: 86px;
+            margin: 0 auto;
+            background: $happySoftwareBackground;
+        }
+    }
 }

css/_side_toolbar_container.scss

@@ -10,36 +10,26 @@
     position: absolute;
     top: 0;
     width: 0;
-    z-index: 800;
+    z-index: $sideToolbarContainerZ;
 
     /**
      * Labels inside the side panel.
      */
     label {
-        color: $defaultColor;
+        color: $baseLight;
     }
 
     /**
      * Form elements and blocks.
      */
     input, select, a,
-    .sideToolbarBlock, .input-control, .button-control {
+    .sideToolbarBlock, .form-control, .button-control {
         display: block;
         margin-top: 15px;
         margin-left: 10%;
         width: 80%;
     }
 
-    /**
-     * Specify colors for edit elements.
-     */
-    select, input[type="button"], input[type="text"], input[type="reset"],
-    input[type="submit"] {
-        color: $inputColor;
-        background: $inputBackground;
-        border: none;
-    }
-
     /**
      * Specify styling of elements inside a block.
      */
@@ -70,20 +60,24 @@
         box-sizing: border-box;
         color: #FFF;
 
+        .input-control {
+            border: 0;
+        }
+
         /**
          * Titles and subtitles of inner containers.
          */
         div.title, div.subTitle {
-            margin: 10px 0;
+            margin: 24px 0 11px;
         }
 
         /**
          * Main title size.
          */
         div.title {
-            color: $defaultColor !important;
-            font-size: 16px;
+            color: $toolbarTitleColor;
             text-align: center;
+            font-size: $toolbarTitleFontSize;
         }
 
         /**

css/_toastr.scss

@@ -7,7 +7,7 @@
  *
  * Author: John Papa and Hans Fjällemark
  * Project: https://github.com/CodeSeven/toastr
- * 
+ *
  * Last updated: October 13, 2016
  */
 
@@ -77,7 +77,7 @@
   padding: $notificationPadding;
   border: 1px solid lighten($notificationBackground, 10%);
 
-  @include border-radius($notificationBorderRadius); 
+  @include border-radius($notificationBorderRadius);
   @include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3));
   @include opacity($notificationOpacity);
 }
@@ -92,8 +92,9 @@
 }
 
 #toast-container.notification-bottom-right {
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
   bottom: 135px;
-  right: 13px;
+  right: $hideFilmstripButtonWidth + $videoOffset;
 }
 
 #toast-container * {
@@ -101,6 +102,6 @@
 }
 
 #toast-container .toast {
-  width: 200px;
+  width: $notificationWidth;
   margin: 0 0 8px;
 }

css/_toolbars.scss

@@ -4,6 +4,18 @@
     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{
@@ -21,7 +33,7 @@
 
 #subject {
     position: relative;
-    z-index: 3;
+    z-index: $zindex3;
     width: auto;
     padding: 5px;
     margin-left: 40%;
@@ -42,13 +54,13 @@
     margin-right: auto;
     width: auto;
     border-radius: 3px;
-    overflow: hidden;
-
-    /**
-     * Splitter button in the toolbar.
-     */
-    .splitter {
-        margin-left: $splitterToolbarButtonLeftMargin;
+    .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;
     }
 }
 
@@ -94,7 +106,7 @@
     height: 50px;
     cursor: pointer;
     text-align: center;
-    z-index: 1;
+    z-index: $zindex1;
     font-size: $toolbarFontSize !important;
     line-height: 50px !important;
     vertical-align: middle;
@@ -240,7 +252,7 @@ a.button>#avatar {
  */
 @include keyframes(slideInExt) {
     from { width: 0px; }
-    to   { width: 200px; } // TO FIX: Make this value a percentage.
+    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
 }
 
 .slideInExt {
@@ -248,7 +260,7 @@ a.button>#avatar {
 }
 
 @include keyframes(slideOutExt) {
-  from { width: 200px; } // TO FIX: Make this value a percentage.
+  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
   to   { width: 0px; }
 }
 

css/_utils.scss

@@ -0,0 +1,38 @@
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
+}
+
+/**
+ * Shows an element.
+ */
+.show {
+    display: block !important;
+}
+
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
+}
+
+/**
+* Shows as a list item
+**/
+.show-list-item {
+    display: list-item !important;
+}
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}

css/_variables.scss

@@ -1,3 +1,5 @@
+@import "themes/light";
+
 /**
  * Style variables
  */
@@ -12,9 +14,13 @@ $defaultToolbarSize: 50px;
 
 // Video layout.
 $thumbnailToolbarHeight: 22px;
-$thumbnailIndicatorBorder: 0px;
+$thumbnailIndicatorBorder: 2px;
 $thumbnailIndicatorSize: $thumbnailToolbarHeight;
 $thumbnailVideoMargin: 2px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$hideFilmstripButtonWidth: 17px;
+
 
 /**
  * Color variables.
@@ -23,27 +29,28 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
-$defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);
 
 /**
  * Toolbar
  */
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
 $toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
-$splitterToolbarButtonLeftMargin: 0px;
+$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);
@@ -70,7 +77,6 @@ $rateStarLabelColor: #333;
 $rateStarDefault: #ccc;
 $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
-$feedbackCancelFontColor: #333;
 
 /**
  * Notifications
@@ -84,24 +90,40 @@ $notificationLinkColor: $notificationColor;
 $notificationOpacity: 0.9;
 $notificationPadding: 15px 20px;
 $notificationBorderRadius: 4px;
+$notificationWidth: 215px;
 
 /**
  * Misc.
  */
 $borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
-$sidebarWidth: 200px;
+$sidebarWidth: 220px;
+$popoverMenuPadding: 13px;
+$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;
+$overlayZ: 902;
+$jitsipopoverZ: 1010;
+$centeredVideoLabelZ: 1011;
+$notificationZ: 1012;
+$popoverZ: 1015;
+
 
 /**
  * Font Colors
@@ -113,13 +135,20 @@ $defaultDarkFontColor: #000;
 /**
  * Forms
  */
-//dropdown
-$selectFontColor: $defaultLightFontColor;
-$selectBg: $defaultBackground;
-$selectActiveBg: $defaultBackground;
-$selectActiveItemBg: $defaultDarkColor;
 //inputs
 $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
+$linkHoverFontColor: #287ade;
+
+/**
+ * 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

@@ -12,129 +12,115 @@
     overflow: hidden;
 }
 
-#remoteVideos {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: row-reverse;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-
-    position:absolute;
-    text-align:right;
-    height:196px;
-    padding: 10px 10px 10px 5px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width:auto;
-    border: 2px solid transparent;
-    z-index: 5;
-    transition: bottom 2s;
-    overflow: visible !important;
-    font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
-}
-
-#remotevideos.hidden {
-    bottom: -196px;
-}
-
 .videocontainer {
     position: relative;
     text-align: center;
-}
 
-#remoteVideos .videocontainer {
-    display: none;
-    position: relative;
-    background-color: black;
-    background-size: contain;
-    border-radius:1px;
-    margin: 0 $thumbnailVideoMargin;
-}
+    &__background {
+        @include topLeft();
+        background-color: black;
+        border-radius: $borderRadius;
+        width: 100%;
+        height: 100%;
+    }
 
-/**
- * The toolbar of the video thumbnail.
- */
-.videocontainer__toolbar,
-.videocontainer__toptoolbar {
-    position: absolute;
-    left: 0;
-    z-index: 3;
-    width: 100%;
-    box-sizing: border-box; // Includes the padding in the 100% width.
-}
+    /**
+     * The toolbar of the video thumbnail.
+     */
+    &__toolbar,
+    &__toptoolbar {
+        position: absolute;
+        left: 0;
+        z-index: $zindex3;
+        width: 100%;
+        box-sizing: border-box; // Includes the padding in the 100% width.
+    }
 
-.videocontainer__toolbar {
-    bottom: 0;
-    padding: 0 5px 0 5px;
-    height: $thumbnailToolbarHeight;
-}
+    &__toolbar {
+        bottom: 0;
+        padding: 0 5px 0 5px;
+        height: $thumbnailToolbarHeight;
+    }
 
-.videocontainer__toptoolbar {
-    $toolbarPadding: 5px;
-    top: 0;
-    padding: $toolbarPadding;
-    padding-bottom: 0;
-    height: $thumbnailIndicatorSize + $toolbarPadding;
-}
+    &__toptoolbar {
+        $toolbarPadding: 5px;
+        top: 0;
+        padding: $toolbarPadding;
+        padding-bottom: 0;
 
-.videocontainer__hoverOverlay {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    visibility: hidden;
-    background: rgba(0,0,0,.6);
-    z-index: 2;
-}
+        span.indicator {
+            position: relative;
+            font-size: 8px;
+            text-align: center;
+            line-height: $thumbnailIndicatorSize;
+            display: none;
+            padding: 0;
+            margin-right: em(5, 8);
+            float: left;
+            @include circle($thumbnailIndicatorSize);
+            box-sizing: border-box;
+            z-index: $zindex3;
+            background: $dominantSpeakerBg;
+            color: $thumbnailPictogramColor;
+            border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
 
-#remoteVideos .videocontainer.videoContainerFocused,
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    margin-right: $thumbnailVideoMargin - 2;
-    margin-left: $thumbnailVideoMargin - 2;
-    margin-top: -2px;
-}
-/**
- * Focused video thumbnail.
- */
-#remoteVideos .videocontainer.videoContainerFocused {
-    transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    -webkit-animation-name: greyPulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: 1;
-    border: 2px solid $videoThumbnailSelected !important;
-    box-shadow: inset 0 0 3px $videoThumbnailSelected,
-                0 0 3px $videoThumbnailSelected !important;
-}
+            &:last-child {
+                margin-right: 0;
+            }
 
-/**
- * Hovered video thumbnail.
- */
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    border: 2px solid $videoThumbnailHovered;
-    box-shadow: inset 0 0 3px $videoThumbnailHovered,
-              0 0 3px $videoThumbnailHovered;
+            .indicatoricon {
+                @include absoluteAligning();
+            }
+
+            .connection {
+                position: relative;
+                display: inline-block;
+                margin: 0 auto;
+                left: 0;
+                @include transform(translate(0, -50%));
+
+                &_empty
+                {
+                    color: #8B8B8B;/*#FFFFFF*/
+                    overflow: hidden;
+                }
+
+                &_lost
+                {
+                    color: #8B8B8B;
+                    overflow: visible;
+                }
+
+                &_full
+                {
+                    @include topLeft();
+                    color: #FFFFFF;/*#15A1ED*/
+                    overflow: hidden;
+                }
+            }
+
+            .icon-connection,
+            .icon-connection-lost {
+                font-size: 1em;
+            }
+        }
+    }
+
+    &__hoverOverlay {
+        background: rgba(0,0,0,.6);
+        border-radius: $borderRadius;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        z-index: $zindex2;
+    }
 }
 
 #localVideoWrapper {
     display:inline-block;
 }
 
-/* With TemasysWebRTC plugin <object/> element is used
-   instead of <video/> */
-#remoteVideos .videocontainer>video,
-#remoteVideos .videocontainer>object {
-    cursor: hand;
-    border-radius:1px;
-    object-fit: cover;
-    overflow: hidden;
-}
-
 .flipVideoX {
     transform: scale(-1, 1);
     -moz-transform: scale(-1, 1);
@@ -144,8 +130,8 @@
 
 #localVideoWrapper>video,
 #localVideoWrapper>object {
+    border-radius: $borderRadius !important;
     cursor: hand;
-    border-radius:1px !important;
     object-fit: cover;
 }
 
@@ -175,7 +161,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
 }
@@ -185,7 +171,7 @@
 }
 
 #etherpad {
-    z-index: 0;
+    z-index: $zindex0;
 }
 
 /**
@@ -207,7 +193,7 @@
     overflow: hidden;
     white-space: nowrap;
     line-height: $thumbnailToolbarHeight;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -227,6 +213,7 @@
 
 .videocontainer .displayname {
     pointer-events: none;
+    padding: 0 3px 0 3px;
 }
 
 .videocontainer .editdisplayname {
@@ -246,7 +233,7 @@
     padding: 3px 5px;
     font-size: 9pt;
     cursor: pointer;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 /**
@@ -289,72 +276,6 @@
   background: $connectionIndicatorBg;
 }
 
-.videocontainer__toptoolbar span.indicator {
-    position: relative;
-    font-size: 8pt;
-    text-align: center;
-    line-height: $thumbnailToolbarHeight;
-    display: none;
-    padding: 0;
-    margin-right: 5px;
-    float: left;
-    @include circle($thumbnailIndicatorSize);
-    box-sizing: border-box;
-    z-index: 3;
-    background: $dominantSpeakerBg;
-    color: $thumbnailPictogramColor;
-    border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
-
-    .indicatoricon {
-        position: absolute;
-        top: 50%;
-        left: 0;
-        @include transform(translateY(-50%));
-        width: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-        height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-        line-height: $thumbnailIndicatorSize - 2 * $thumbnailIndicatorBorder;
-    }
-
-    .connection {
-        position: relative;
-        margin: 0 auto;
-        width: 12px;
-        height: 8px;
-
-        &_empty
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #8B8B8B;/*#FFFFFF*/
-            overflow: hidden;
-        }
-
-        &_lost
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #8B8B8B;
-            overflow: visible;
-        }
-
-        &_full
-        {
-            @include topLeft();
-            max-width: 12px;
-            width: 12px;
-            color: #FFFFFF;/*#15A1ED*/
-            overflow: hidden;
-        }
-    }
-
-    .icon-connection,
-    .icon-connection-lost {
-        font-size: 6pt;
-    }
-}
-
 .remotevideomenu
 {
     display: inline-block;
@@ -362,7 +283,7 @@
     top: 0px;
     right: 0;
     margin: 7px;
-    z-index: 3;
+    z-index: $zindex3;
     width: 18px;
     height: 13px;
     color: #FFF;
@@ -380,7 +301,7 @@
     margin-top: -17px;
     width: 6px;
     height: 35px;
-    z-index: 2;
+    z-index: $zindex2;
     border: none;
 
     .audiodot-top,
@@ -423,13 +344,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;
 }
@@ -471,8 +392,11 @@
 }
 
 .userAvatar {
-    @include circle(60px);
+    @include maxSize(60px);
     @include absoluteAligning();
+    border-radius: 50%;
+    height: 50%;
+    width: auto;
 }
 
 .sharedVideoAvatar {
@@ -484,7 +408,7 @@
 .noMic {
     position: absolute;
     border-radius: 8px;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noMic.png");
@@ -496,7 +420,7 @@
 .noVideo {
     position: absolute;
     border-radius: 8px;
-    z-index: 1;
+    z-index: $zindex1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noVideo.png");
@@ -529,7 +453,7 @@
     display: none;
     position: absolute;
     width: auto;
-    z-index: 2;
+    z-index: $zindex2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -550,9 +474,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;
@@ -581,7 +506,7 @@
 #videoResolutionLabel,
 .centeredVideoLabel {
     display: none;
-    z-index: 1011;
+    z-index: $centeredVideoLabelZ;
 }
 
 .centeredVideoLabel {

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/aui-components/dropdown.scss

@@ -1,6 +1,6 @@
-
 .select2-container.aui-select2-container {
     background-color: transparent !important;
+    margin-top: 2px;
 
     a.select2-choice {
         height: 28px !important;
@@ -55,6 +55,7 @@
 
             .select2-result-label{
                 font-size: 12px;
+                color: $selectFontColor !important;
                 line-height: 20px;
             }
         }

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,4 +1,4 @@
-.input-control {
+.form-control {
     padding: 16px 0;
 
     &:first-child {
@@ -19,17 +19,6 @@
         font-weight: $labelFontWeight;
     }
 
-    &__input {
-
-        &:last-child {
-            margin-bottom: inherit;
-        }
-
-        &::selection {
-            background-color: $defaultDarkSelectionColor;
-        }
-    }
-
     &__em {
         color: $inputControlEmColor;
     }
@@ -41,6 +30,10 @@
         span {
             vertical-align: middle;
         }
+
+        &_error {
+            color: $errorColor;
+        }
     }
 
     &__container {

css/components/_input-control.scss

@@ -0,0 +1,32 @@
+.input-control {
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    color: $inputColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    background-color: $inputBackground;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
+}

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

@@ -0,0 +1,20 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        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

@@ -29,18 +29,18 @@
 
 /* Fonts END */
 
-/* Theme  BEGIN */
-@import "themes/main";
-/* Theme END */
-
 /* Modules BEGIN */
 
 @import 'toastr';
 @import 'base';
+@import 'utils';
 @import 'overlay/overlay';
+@import 'inlay';
 @import 'reload_overlay/reload_overlay';
+@import 'modals/desktop-picker/desktop-picker';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
+@import 'modals/speaker_stats/speaker_stats';
 @import 'videolayout_default';
 @import 'notice';
 @import 'popup_menu';
@@ -58,12 +58,18 @@
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
-@import 'input-control/input-control';
+@import 'components/form-control';
+@import 'components/link';
 @import 'shortcuts/main';
-@import 'buttons/button-control';
+@import 'components/button-control';
+@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

@@ -2,7 +2,7 @@
     visibility: visible;
     height: auto;
 
-    h3 {
+    h1, h2, h3, h4, h5, h6 {
         color: $auiDialogColor;
     }
 
@@ -72,7 +72,7 @@
         }
     }
 
-    .input-control:not(:last-child) {
+    .form-control:not(:last-child) {
         border-bottom: 1px solid $auiBorderColor;
     }
 }

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/feedback/_feedback.scss

@@ -62,20 +62,18 @@
             text-align: center;
             padding: 10px 40px 20px 40px;
 
-            .input-control{
-                &__input {
-                    background-color: $feedbackInputBg;
-                    color: $feedbackInputTextColor;
+            .input-control {
+                background-color: $feedbackInputBg;
+                color: $feedbackInputTextColor;
 
-                    &::-webkit-input-placeholder {
-                        color: $feedbackInputPlaceholderColor;
-                    }
-                    &::-moz-placeholder {  /* Firefox 19+ */
-                        color: $feedbackInputPlaceholderColor;
-                    }
-                    &:-ms-input-placeholder {
-                        color: $feedbackInputPlaceholderColor;
-                    }
+                &::-webkit-input-placeholder {
+                    color: $feedbackInputPlaceholderColor;
+                }
+                &::-moz-placeholder {  /* Firefox 19+ */
+                    color: $feedbackInputPlaceholderColor;
+                }
+                &:-ms-input-placeholder {
+                    color: $feedbackInputPlaceholderColor;
                 }
             }
 

css/modals/speaker_stats/_speaker_stats.scss

@@ -0,0 +1,56 @@
+.speaker-stats {
+    list-style: none;
+    padding: 0;
+    color: $auiDialogColor;
+    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,30 +1,47 @@
-.overlay_container {
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: $overlayZ;
-    background: rgba(22, 185, 252, .9);
-}
+.overlay {
+    &__container,
+    &__container-light {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: $overlayZ;
+        background: $defaultBackground;
+        &.filmstrip-only {
+            @include transparentBg($filmStripOnlyOverlayBg, 0.8);
+        }
+    }
 
-.overlay_content {
-    color: #fff;
-    text-align: center;
-    width: 400px;
-    height: 250px;
-    top: 50%;
-    left: 50%;
-    position: absolute;
-    margin-top: -125px;
-    margin-left: -200px;
-}
+    &__container-light {
+        @include transparentBg($defaultBackground, 0.7);
+        &.filmstrip-only {
+            @include transparentBg($filmStripOnlyOverlayBg, 0.2);
+        }
+    }
 
-.overlay_text_small {
-    display: block;
-    font-size: 18px;
-}
+    &__content {
+        position: absolute;
+        margin: 0 auto;
+        height: 100%;
+        width: 56%;
+        left: 50%;
+        @include transform(translateX(-50%));
+        &.filmstrip-only {
+            left: 0px;
+            width: 100%;
+            @include transform(none);
+        }
 
-.overlay_icon {
-    font-size: 100px;
+        &_bottom {
+            position: absolute;
+            bottom: 0;
+        }
+    }
+
+    &__policy {
+        position: absolute;
+        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,5 +13,7 @@
 #reloadProgressBar {
     width: 180px;
     margin: 5px auto;
+    > .aui-progress-indicator-value {
+        background: $reloadProgressBarBg;
+    }
 }
-

css/themes/_light.scss

@@ -1,3 +1,16 @@
+/**
+ * Base
+ */
+$baseLight: #FFFFFF;
+
+/**
+* Controls
+*/
+$controlBackground: $baseLight;
+$controlColor: #333333;
+$sliderTrackBackground: #474747;
+$sliderThumbBackground: #3572b0;
+
 /**
 * Buttons
 */
@@ -17,11 +30,20 @@ $buttonLinkColor: #0090e8;
 
 $primaryButtonBackground: #3572b0;
 $primaryButtonHoverBackground: #2a67a5;
-$primaryButtonColor: #fff;
+$primaryButtonColor: $baseLight;
 $primaryButtonFontWeight: 400;
 
 $buttonShadowColor: #192d4f;
 
+$overlayButtonBg: #0074E0;
+
+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+$filmStripOnlyOverlayBg: #000;
+$reloadProgressBarBg: #0074E0;
+
 /**
 * Connection indicator
 **/
@@ -33,14 +55,24 @@ $uploadConnectionIconColor: #ffa800;
  **/
 $auiDialogColor: #333;
 $auiDialogBg: #f5f5f5;
-$auiDialogContentBg: #fff;
+$auiDialogContentBg: $baseLight;
 $auiBorderColor: #ccc;
 $dialogTitleFontWeight: 400;
 
+/**
+* Inlay colors
+**/
+$inlayColorBg: lighten($defaultBackground, 20%);
+$inlayBorderColor: lighten($auiDialogContentBg, 10%);
+$inlayIconBg: #000;
+$inlayIconColor: #fff;
+$inlayFilmstripOnlyColor: #474747;
+$inlayFilmstripOnlyBg: #fff;
+
 // Main controls
-$inputBackground: #fff;
+$inputBackground: $controlBackground;
 $inputBorderColor: #ccc;
-$inputColor: #333;
+$inputColor: $controlColor;
 $placeHolderColor: #a7a7a7;
 $readOnlyInputColor: #a7a7a7;
 $defaultDarkSelectionColor: #ccc;
@@ -50,8 +82,24 @@ $hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
 $dropdownColor: #333;
+$errorColor: #c61600;
+
+// Feedback colors
+$feedbackCancelFontColor: #333;
 
 // Popover colors
 $popoverBg: #000;
 $popoverFontColor: #ffffff;
-$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+
+// Toolbar
+$splitterColor: #ccc;
+
+/**
+ * Forms
+ */
+//dropdown
+$selectFontColor: $controlColor;
+$selectBg: $controlBackground;
+$selectActiveBg: darken($controlBackground, 5%);
+$selectActiveItemBg: darken($controlBackground, 20%);

css/themes/_main.scss

@@ -1,5 +0,0 @@
-/**
-* Switch themes here
-*/
-
-@import "light";

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

@@ -1,4 +1,4 @@
-jitsi-meet (1.0.1-1) unstable; urgency=low
+jitsi-meet-web (1.0.1-1) unstable; urgency=low
 
   * Initial release. (Closes: #760485)
 

debian/control

@@ -1,4 +1,4 @@
-Source: jitsi-meet
+Source: jitsi-meet-web
 Section: net
 Priority: extra
 Maintainer: Jitsi Team <dev@jitsi.org>
@@ -7,10 +7,10 @@ Build-Depends: debhelper (>= 8.0.0)
 Standards-Version: 3.9.6
 Homepage: https://jitsi.org/meet
 
-Package: jitsi-meet
+Package: jitsi-meet-web
+Replaces: jitsi-meet (<= 1.0.1525-1)
 Architecture: all
-Depends: ${misc:Depends}, jitsi-videobridge, jitsi-meet-prosody,
- openjdk-8-jre-headless | nginx
+Depends: ${misc:Depends}
 Description: WebRTC JavaScript video conferences
  Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
  Videobridge to provide high quality, scalable video conferences.
@@ -19,9 +19,24 @@ Description: WebRTC JavaScript video conferences
  forwarding and relaying, configured to work with jetty instance
  running embedded into Jitsi Videobridge
 
+Package: jitsi-meet-web-config
+Architecture: all
+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.
+ .
+ It is a web interface to Jitsi Videobridge for audio and video
+ forwarding and relaying, configured to work with jetty instance
+ running embedded into Jitsi Videobridge or using a webserver Nginx or
+ Apache2.
+ .
+ This package contains configuration for Nginx to be used with
+ Jitsi Meet.
+
 Package: jitsi-meet-prosody
 Architecture: all
-Depends: ${misc:Depends}, openssl, prosody | prosody-trunk, jitsi-videobridge, jicofo
+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-prosody.config

@@ -1,4 +0,0 @@
-#!/bin/sh -e
-
-# Source debconf library.
-. /usr/share/debconf/confmodule

debian/jitsi-meet-prosody.postinst

@@ -21,13 +21,49 @@ set -e
 case "$1" in
     configure)
 
-        . /etc/jitsi/videobridge/config
-
-        . /etc/jitsi/jicofo/config
-
         # loading debconf
         . /usr/share/debconf/confmodule
 
+        # try to get host from jitsi-videobridge
+        db_get jitsi-videobridge/jvb-hostname
+        if [ -z "$RET" ] ; then
+            # server hostname
+            db_set jitsi-videobridge/jvb-hostname "localhost"
+            db_input critical jitsi-videobridge/jvb-hostname || true
+            db_go
+        fi
+        JVB_HOSTNAME="$RET"
+
+        db_get jitsi-videobridge/jvbsecret
+        if [ -z "$RET" ] ; then
+            db_input critical jitsi-videobridge/jvbsecret || true
+            db_go
+        fi
+        JVB_SECRET="$RET"
+
+        db_get jicofo/jicofo-authuser
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofo-authuser || true
+            db_go
+        fi
+        JICOFO_AUTH_USER="$RET"
+
+        db_get jicofo/jicofo-authpassword
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofo-authpassword || true
+            db_go
+        fi
+        JICOFO_AUTH_PASSWORD="$RET"
+
+        db_get jicofo/jicofosecret
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofosecret || true
+            db_go
+        fi
+        JICOFO_SECRET="$RET"
+
+        JICOFO_AUTH_DOMAIN="auth.$JVB_HOSTNAME"
+
         # detect dpkg-reconfigure, just delete old links
         db_get jitsi-meet-prosody/jvb-hostname
         JVB_HOSTNAME_OLD=$RET
@@ -38,7 +74,7 @@ case "$1" in
         fi
 
         # stores the hostname so we will reuse it later, like in purge
-        db_set jitsi-meet-prosody/jvb-hostname $JVB_HOSTNAME
+        db_set jitsi-meet-prosody/jvb-hostname "$JVB_HOSTNAME"
 
         # and we're done with debconf
         db_stop
@@ -68,21 +104,21 @@ case "$1" in
             fi
         fi
         # UPGRADE to server side focus check if focus is configured
-        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"auth.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG; then
-            echo -e "\nVirtualHost \"auth.$JVB_HOSTNAME\"" >> $PROSODY_HOST_CONFIG
+        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_HOST_CONFIG; then
+            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_HOST_CONFIG
             echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_HOST_CONFIG
-            sed -i "s/Component \"conference.$JVB_HOSTNAME\" \"muc\"/Component \"conference.$JVB_HOSTNAME\" \"muc\"\nadmins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n/g" $PROSODY_HOST_CONFIG
+            sed -i "s/Component \"conference.$JVB_HOSTNAME\" \"muc\"/Component \"conference.$JVB_HOSTNAME\" \"muc\"\nadmins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_HOST_CONFIG
             echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_HOST_CONFIG
             echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_HOST_CONFIG
             PROSODY_CREATE_JICOFO_USER="true"
         # UPGRADE to server side focus on old config(/etc/prosody/prosody.cfg.lua)
-        elif [ ! -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"auth.$JVB_HOSTNAME\"" $PROSODY_CONFIG_OLD; then
-            echo -e "\nVirtualHost \"auth.$JVB_HOSTNAME\"" >> $PROSODY_CONFIG_OLD
+        elif [ ! -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_CONFIG_OLD; then
+            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_CONFIG_OLD
             echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_CONFIG_OLD
             if ! grep -q "admins = { }" $PROSODY_CONFIG_OLD; then
-                echo -e "admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n" >> $PROSODY_CONFIG_OLD
+                echo -e "admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n" >> $PROSODY_CONFIG_OLD
             else
-                sed -i "s/admins = { }/admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n/g" $PROSODY_CONFIG_OLD
+                sed -i "s/admins = { }/admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_CONFIG_OLD
             fi
             echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_CONFIG_OLD
             echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_CONFIG_OLD
@@ -109,8 +145,6 @@ case "$1" in
 
         if [ "$PROSODY_CONFIG_PRESENT" = "false" ]; then
             invoke-rc.d prosody restart
-            invoke-rc.d jitsi-videobridge restart
-            invoke-rc.d jicofo restart
         fi
     ;;
 

debian/jitsi-meet-prosody.postrm

@@ -36,6 +36,9 @@ case "$1" in
             rm -f /etc/prosody/conf.avail/$JVB_HOSTNAME.cfg.lua
             rm -f /etc/prosody/conf.d/$JVB_HOSTNAME.cfg.lua
         fi
+
+        # Clear the debconf variable
+        db_purge
     ;;
 
     upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)

debian/jitsi-meet-prosody.templates

@@ -2,3 +2,29 @@ Template: jitsi-meet-prosody/jvb-hostname
 Type: string
 _Description: The hostname of the current installation:
  The value for the hostname that is set in Jitsi Videobridge installation.
+
+Template: jitsi-videobridge/jvb-hostname
+Type: string
+_Description: The hostname of the current installation:
+ The value for the hostname that is set in Jitsi Videobridge installation.
+
+Template: jitsi-videobridge/jvbsecret
+Type: password
+_Description: Jitsi Videobridge Component secret:
+ The secret used by Jitsi Videobridge to connect to xmpp server as component.
+
+Template: jicofo/jicofo-authuser
+Type: string
+Default: focus
+_Description: Jicofo username:
+ The jicofo needs an authenticated admin user to connect to xmpp server.
+
+Template: jicofo/jicofo-authpassword
+Type: password
+_Description: Jicofo user password:
+ The secret used to connect to xmpp server as jicofo user.
+
+Template: jicofo/jicofosecret
+Type: password
+_Description: Jicofo Component secret:
+ The secret used to connect to xmpp server as component

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

@@ -21,17 +21,12 @@ set -e
 case "$1" in
     configure)
 
-        if [ -f "/etc/jitsi/videobridge/config" ] ; then
-            . /etc/jitsi/videobridge/config
-        fi
-
-        if [ -f "/etc/jitsi/jicofo/config" ] ; then
-            . /etc/jitsi/jicofo/config
-        fi
-
         # loading debconf
         . /usr/share/debconf/confmodule
 
+        db_get jitsi-meet-prosody/jvb-hostname
+        JVB_HOSTNAME="$RET"
+
         db_get jitsi-meet-tokens/appid
         if [ "$RET" = "false" ] ; then
             echo "Application ID is mandatory"
@@ -45,14 +40,10 @@ case "$1" in
         fi
         APP_SECRET=$RET
 
-        # We can adjust Prosody config only if there is Jvb or Jicofo domain configured
         PROSODY_HOST_CONFIG="/etc/prosody/conf.avail/$JVB_HOSTNAME.cfg.lua"
-        if [ ! -f "$PROSODY_HOST_CONFIG" ] ; then
-            PROSODY_HOST_CONFIG="/etc/prosody/conf.avail/$JICOFO_HOSTNAME.cfg.lua"
-        fi
 
         # Store config filename for purge
-        db_set jitsi-meet-prosody/prosody_config $PROSODY_HOST_CONFIG
+        db_set jitsi-meet-prosody/prosody_config "$PROSODY_HOST_CONFIG"
 
         db_stop
 

debian/jitsi-meet-tokens.postrm

@@ -52,6 +52,8 @@ case "$1" in
     ;;
 
     purge)
+        # Clear the debconf variable
+        db_purge
     ;;
 
     upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)

debian/jitsi-meet-web-config.docs

@@ -1,4 +1,4 @@
-README.md
 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

@@ -1,5 +1,5 @@
 #!/bin/bash
-# postinst script for jitsi-meet
+# postinst script for jitsi-meet-web-config
 #
 # see: dh_installdeb(1)
 
@@ -20,13 +20,19 @@ set -e
 case "$1" in
     configure)
 
-        JVB_ETC_CONFIG="/etc/jitsi/videobridge/config"
-
-        . $JVB_ETC_CONFIG
-
         # loading debconf
         . /usr/share/debconf/confmodule
 
+        # try to get host from jitsi-videobridge
+        db_get jitsi-videobridge/jvb-hostname
+        if [ -z "$RET" ] ; then
+            # server hostname
+            db_set jitsi-videobridge/jvb-hostname "localhost"
+            db_input critical jitsi-videobridge/jvb-hostname || true
+            db_go
+        fi
+        JVB_HOSTNAME="$RET"
+
         # detect dpkg-reconfigure
         RECONFIGURING="false"
         db_get jitsi-meet/jvb-hostname
@@ -49,22 +55,54 @@ case "$1" in
         if [ "$NGINX_INSTALL_CHECK" = "installed" ] || [ "$NGINX_INSTALL_CHECK" = "unpacked" ] ; then
             FORCE_NGINX="true"
         fi
+        APACHE_INSTALL_CHECK="$(dpkg-query -f '${Status}' -W 'apache2' 2>/dev/null | awk '{print $3}' || true)"
+        if [ "$APACHE_INSTALL_CHECK" = "installed" ] || [ "$APACHE_INSTALL_CHECK" = "unpacked" ] ; then
+            FORCE_APACHE="true"
+        fi
 
-        # 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"
+        # if first time config ask for certs, or if we are reconfiguring
+        if [ -z "$JVB_HOSTNAME_OLD" ] || [ "$RECONFIGURING" = "true" ] ; then
+            # SSL for nginx
+            db_get jitsi-meet/cert-choice
+            CERT_CHOICE="$RET"
+            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"
+                db_input critical jitsi-meet/cert-path-key || true
+                db_go
+                db_get jitsi-meet/cert-path-key
+                CERT_KEY="$RET"
+                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
+                db_input critical jitsi-meet/cert-path-crt || true
+                db_go
+                db_get jitsi-meet/cert-path-crt
+                CERT_CRT="$RET"
+            else
+                # create self-signed certs
+                CERT_KEY="/etc/jitsi/meet/$JVB_HOSTNAME.key"
+                CERT_CRT="/etc/jitsi/meet/$JVB_HOSTNAME.crt"
+                HOST="$( (hostname -s; echo localhost) | head -n 1)"
+                DOMAIN="$( (hostname -d; echo localdomain) | head -n 1)"
+                openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -subj \
+                    "/O=$DOMAIN/OU=$HOST/CN=$JVB_HOSTNAME/emailAddress=webmaster@$HOST.$DOMAIN" \
+                    -keyout $CERT_KEY \
+                    -out $CERT_CRT
+            fi
+        fi
 
         # jitsi meet
         JITSI_MEET_CONFIG="/etc/jitsi/meet/$JVB_HOSTNAME-config.js"
         if [ ! -f $JITSI_MEET_CONFIG ] ; then
-            cp /usr/share/doc/jitsi-meet/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
 
         # this is new install let's configure jvb to serve meet
-        if [[ -z $FORCE_NGINX && ( -z $JVB_HOSTNAME_OLD || "$JVB_SERVE" = "true" ) ]] ; then
+        # no-nginx, no-apache installed on machine, this is new install or reconfiguring old one which have jvb_serve set
+        if [[ -z "$FORCE_NGINX" && -z "$FORCE_APACHE" && ( -z "$JVB_HOSTNAME_OLD" || ( "$JVB_SERVE" = "true" && "$RECONFIGURING" = "true" )) ]] ; then
 
+            JVB_ETC_CONFIG="/etc/jitsi/videobridge/config"
             JVB_CONFIG="/etc/jitsi/videobridge/sip-communicator.properties"
 
             # this is a reconfigure, lets just delete old links
@@ -89,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
@@ -112,34 +151,19 @@ case "$1" in
                 chmod 755 /etc/authbind/byport/443
             fi
 
-            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
-                # create jks from uploaded certs
-                openssl pkcs12 -export \
-                    -in /etc/ssl/$JVB_HOSTNAME.crt \
-                    -inkey /etc/ssl/$JVB_HOSTNAME.key \
-                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
-                keytool -importkeystore \
-                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
-                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
-                    -srcstoretype pkcs12 \
-                    -noprompt -storepass changeit -srcstorepass changeit
-            else
-                # create jks from self-signed certs
-                openssl pkcs12 -export \
-                    -in /var/lib/prosody/$JVB_HOSTNAME.crt \
-                    -inkey /var/lib/prosody/$JVB_HOSTNAME.key \
-                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
-                keytool -importkeystore \
-                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
-                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
-                    -srcstoretype pkcs12 \
-                    -noprompt -storepass changeit -srcstorepass changeit
-            fi
+            CERT_P12="/etc/jitsi/videobridge/$JVB_HOSTNAME.p12"
+            CERT_JKS="/etc/jitsi/videobridge/$JVB_HOSTNAME.jks"
+            # create jks from  certs
+            openssl pkcs12 -export \
+                -in $CERT_CRT -inkey $CERT_KEY -passout pass:changeit > $CERT_P12
+            keytool -importkeystore -destkeystore $CERT_JKS \
+                -srckeystore $CERT_P12 -srcstoretype pkcs12 \
+                -noprompt -storepass changeit -srcstorepass changeit
 
             db_set jitsi-meet/jvb-serve "true"
 
             invoke-rc.d jitsi-videobridge restart
-        elif [[ "$FORCE_NGINX" = "true" || ( -n $JVB_HOSTNAME_OLD && "$JVB_SERVE" = "false" ) ]] ; then
+        elif [[ "$FORCE_NGINX" = "true" && ( -z "$JVB_HOSTNAME_OLD" || "$RECONFIGURING" = "true" ) ]] ; then
             # this is a reconfigure, lets just delete old links
             if [ "$RECONFIGURING" = "true" ] ; then
                 rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME_OLD.conf
@@ -148,7 +172,7 @@ case "$1" in
 
             # nginx conf
             if [ ! -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf ] ; then
-                cp /usr/share/doc/jitsi-meet/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
@@ -156,30 +180,56 @@ case "$1" in
             fi
 
             if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
-                db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
-                db_input critical jitsi-meet/cert-path-key || true
-                db_go
-                db_get jitsi-meet/cert-path-key
-                CERT_KEY="$RET"
-                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
-                db_input critical jitsi-meet/cert-path-crt || true
-                db_go
-                db_get jitsi-meet/cert-path-crt
-                CERT_CRT="$RET"
                 # 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/ssl_certificate_key\ \/var\/lib\/prosody\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
+                sed -i "s/ssl_certificate_key\ \/etc\/jitsi\/meet\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
                     /etc/nginx/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/ssl_certificate\ \/var\/lib\/prosody\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
+                sed -i "s/ssl_certificate\ \/etc\/jitsi\/meet\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
                     /etc/nginx/sites-available/$JVB_HOSTNAME.conf
             fi
 
             invoke-rc.d nginx reload
+        elif [[ "$FORCE_APACHE" = "true" && ( -z "$JVB_HOSTNAME_OLD" || "$RECONFIGURING" = "true" ) ]] ; then
+            # 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

@@ -1,5 +1,5 @@
 #!/bin/sh
-# postrm script for jitsi-meet
+# postrm script for jitsi-meet-web-config
 #
 # see: dh_installdeb(1)
 
@@ -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,9 +38,15 @@ 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
+            rm -f /etc/jitsi/meet/$JVB_HOSTNAME.crt
         fi
+        # Clear the debconf variable
+        db_purge
     ;;
     upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
     ;;

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.
@@ -30,3 +31,8 @@ Type: boolean
 Default: false
 _Description: for internal use
  for internal use.
+
+Template: jitsi-videobridge/jvb-hostname
+Type: string
+_Description: Hostname:
+ The Jitsi Meet web config package needs the DNS hostname of your instance.

debian/jitsi-meet-web.docs

@@ -0,0 +1 @@
+README.md

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/POTFILES.in

@@ -1 +1 @@
-[type: gettext/rfc822deb] jitsi-meet.templates
+[type: gettext/rfc822deb] jitsi-meet-web-config.templates

debian/po/templates.pot

@@ -1,10 +1,14 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the jitsi-meet-web package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: jitsi-meet\n"
-"Report-Msgid-Bugs-To: jitsi-meet@packages.debian.org\n"
-"POT-Creation-Date: 2014-09-03 17:26+0200\n"
+"Project-Id-Version: jitsi-meet-web\n"
+"Report-Msgid-Bugs-To: jitsi-meet-web@packages.debian.org\n"
+"POT-Creation-Date: 2016-11-15 22:39+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -15,25 +19,25 @@ msgstr ""
 
 #. Type: select
 #. Choices
-#: ../jitsi-meet.templates:1001
-msgid "Self-signed certificate will be generated"
+#: ../jitsi-meet-web-config.templates:1001
+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.templates:1001
-msgid "A certificate is available and the files are uploaded on the server"
+#: ../jitsi-meet-web-config.templates:1001
+msgid "I want to use my own certificate"
 msgstr ""
 
 #. Type: select
 #. Description
-#: ../jitsi-meet.templates:1002
+#: ../jitsi-meet-web-config.templates:1002
 msgid "SSL certificate for the Jitsi Meet instance"
 msgstr ""
 
 #. Type: select
 #. Description
-#: ../jitsi-meet.templates:1002
+#: ../jitsi-meet-web-config.templates:1002
 msgid ""
 "Jitsi Meet is best to be set up with an SSL certificate. Having no "
 "certificate, a self-signed one will be generated. Having a certificate "
@@ -44,13 +48,13 @@ msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:2001
+#: ../jitsi-meet-web-config.templates:2001
 msgid "Full local server path to the SSL key file:"
 msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:2001
+#: ../jitsi-meet-web-config.templates:2001
 msgid ""
 "The full path to the SSL key file on the server. If it has not been "
 "uploaded, now is a good time to do so."
@@ -58,13 +62,13 @@ msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:3001
+#: ../jitsi-meet-web-config.templates:3001
 msgid "Full local server path to the SSL certificate file:"
 msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:3001
+#: ../jitsi-meet-web-config.templates:3001
 msgid ""
 "The full path to the SSL certificate file on the server. If you haven't "
 "uploaded it, now is a good time to upload it in another console."
@@ -72,27 +76,38 @@ msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:4001
+#: ../jitsi-meet-web-config.templates:4001
 msgid "The hostname of the current installation:"
 msgstr ""
 
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:4001
+#: ../jitsi-meet-web-config.templates:4001
 msgid ""
 "The value for the hostname that is set in Jitsi Videobridge installation."
 msgstr ""
 
-
-#. Type: string
+#. Type: boolean
 #. Description
-#: ../jitsi-meet.templates:5001
+#: ../jitsi-meet-web-config.templates:5001
 msgid "for internal use"
 msgstr ""
 
+#. Type: boolean
+#. Description
+#: ../jitsi-meet-web-config.templates:5001
+msgid "for internal use."
+msgstr ""
+
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:5001
-msgid ""
-"Jitsi Videobridge installation can use its internal jetty to serve static meet pages."
+#: ../jitsi-meet-web-config.templates:6001
+msgid "Hostname:"
+msgstr ""
+
+#. Type: string
+#. Description
+#: ../jitsi-meet-web-config.templates:6001
+msgid ""
+"The Jitsi Meet web config package needs the DNS hostname of your instance."
 msgstr ""