Merge pull request #1095 from BeatC/shortcuts-reversed

Shortcuts reversed
Rename classname; Refactor click on video method
2026-01-04 13:52:28 +00:00 · 2016-11-03 09:14:05 -05:00 · 2016-11-03 12:13:03 +02:00 · 2016-11-03 11:48:48 +02:00 · 2016-11-03 11:48:48 +02:00 · 2016-11-02 18:16:13 -05:00
317 changed files with 19830 additions and 4909 deletions
--- a/.buckconfig
+++ b/.buckconfig
@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,11 @@
+# The build artifacts of the jitsi-meet project.
+build/*
+
+# Third-party source code which we (1) do not want to modify or (2) try to
+# modify as little as possible.
+libs/*
+
+# ESLint will by default ignore its own configuration file. However, there does
+# not seem to be a reason why we will want to risk being inconsistent with our
+# remaining JavaScript source code.
+!.eslintrc.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,37 @@
+module.exports = {
+    'env': {
+        'browser': true,
+        'commonjs': true,
+        'es6': true
+    },
+    'extends': 'eslint: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
+        // without explicitly specifying them (using a comment) inside of our
+        // files.
+        '__filename': false
+    },
+    'parserOptions': {
+        'ecmaFeatures': {
+            'experimentalObjectRestSpread': true
+        },
+        'sourceType': 'module'
+    },
+    'rules': {
+        'new-cap': [
+            'error',
+            {
+                'capIsNew': false // Behave like JSHint's newcap.
+            }
+        ],
+        // While it is considered a best practice to avoid using methods on
+        // console in JavaScript that is designed to be executed in the browser
+        // and ESLint includes the rule among its set of recommended rules, (1)
+        // the general practice is to strip such calls before pushing to
+        // production and (2) we prefer to utilize console in lib-jitsi-meet
+        // (and jitsi-meet).
+        'no-console': 'off',
+        'semi': 'error'
+    }
+};
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,4 @@
-node_modules
 *.swp
-.idea/
-*.iml
 .*.tmp
 deploy-local.sh
 libs/
@@ -9,3 +6,51 @@ all.css
 *css.map
 unsupported_browser.css
 .remote-sync.json
+.sync-config.cson
+
+# The following are automatically generated by the react-native command line
+# utility (either with the init or upgrade option which pull in the latest
+# template files recommended by Facebook for React Native).
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IJ
+#
+*.iml
+.idea
+.gradle
+local.properties
+
+# node.js
+#
+node_modules/
+npm-debug.log
+
+# BUCK
+#
+buck-out/
+\.buckd/
+android/app/libs
+android/keystores/debug.keystore
--- a/.jshintignore
+++ b/.jshintignore
@@ -1,4 +1,6 @@
-node_modules
-libs
-debian
+debian/
+libs/
+node_modules/
+react/
 analytics.js
+webpack.config.babel.js
--- a/.watchmanconfig
+++ b/.watchmanconfig
@@ -0,0 +1 @@
+{}
--- a/404.html
+++ b/404.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+</head>
+<body>
+    <div class="error_page">
+        <h2>404 Not Found</h2>
+        <p class="error_page__message">You can create new conversation <a href="/">here</a></p>
+    </div>
+</body>
+</html>
--- a/61
+++ b/61
@@ -1,20 +1,17 @@
-NPM = npm
-BROWSERIFY = ./node_modules/.bin/browserify
-NODE_SASS = ./node_modules/.bin/node-sass
-UGLIFYJS = ./node_modules/.bin/uglifyjs
-EXORCIST = ./node_modules/.bin/exorcist
+BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
-STYLES_MAIN = css/main.scss
-STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
+DEPLOY_DIR = libs
+LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
+NODE_SASS = ./node_modules/.bin/node-sass
+NPM = npm
+OUTPUT_DIR = .
 STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
-DEPLOY_DIR = libs
-BROWSERIFY_FLAGS = -d
-OUTPUT_DIR = .
-LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
-IFRAME_API_DIR = ./modules/API/external
+STYLES_MAIN = css/main.scss
+STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
+WEBPACK = ./node_modules/.bin/webpack

-all: update-deps compile compile-iframe-api uglify uglify-iframe-api deploy clean
+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
@@ -23,13 +20,10 @@ update-deps:
 	$(NPM) update && $(NPM) install node-sass

 compile:
-	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
-
-compile-iframe-api:
-	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e $(IFRAME_API_DIR)/external_api.js -s JitsiMeetExternalAPI | $(EXORCIST) $(OUTPUT_DIR)/external_api.js.map > $(OUTPUT_DIR)/external_api.js
+	$(WEBPACK) -p

 clean:
-	rm -f $(OUTPUT_DIR)/app.bundle.* $(OUTPUT_DIR)/external_api.*
+	rm -fr $(BUILD_DIR)

 deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local

@@ -37,20 +31,20 @@ deploy-init:
 	mkdir -p $(DEPLOY_DIR)

 deploy-appbundle:
-	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
-	$(OUTPUT_DIR)/app.bundle.js $(OUTPUT_DIR)/app.bundle.js.map \
-	$(OUTPUT_DIR)/external_api.js.map $(OUTPUT_DIR)/external_api.js \
-	$(OUTPUT_DIR)/external_api.min.map $(OUTPUT_DIR)/external_api.min.js \
-	$(OUTPUT_DIR)/analytics.js \
-	$(DEPLOY_DIR)
+	cp \
+		$(BUILD_DIR)/app.bundle.min.js \
+		$(BUILD_DIR)/app.bundle.min.map \
+		$(BUILD_DIR)/external_api.min.js \
+		$(BUILD_DIR)/external_api.min.map \
+		$(OUTPUT_DIR)/analytics.js \
+		$(DEPLOY_DIR)

 deploy-lib-jitsi-meet:
-	cp $(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js.map \
-	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
-	$(DEPLOY_DIR)
+	cp \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(DEPLOY_DIR)

 deploy-css:
 	$(NODE_SASS) css/unsupported_browser.scss css/unsupported_browser.css ; \
@@ -61,13 +55,6 @@ deploy-css:
 deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)

-uglify:
-	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/app.bundle.js -o $(OUTPUT_DIR)/app.bundle.min.js --source-map $(OUTPUT_DIR)/app.bundle.min.map --in-source-map $(OUTPUT_DIR)/app.bundle.js.map
-
-uglify-iframe-api:
-	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/external_api.js -o $(OUTPUT_DIR)/external_api.min.js --source-map $(OUTPUT_DIR)/external_api.min.map --in-source-map $(OUTPUT_DIR)/external_api.js.map
-
-
 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 && \
--- a/analytics.js
+++ b/analytics.js
@@ -1,5 +1,9 @@
+/* global ga */
+
 (function (ctx) {
  function Analytics() {
+    /* eslint-disable */
+
    /**
     * Google Analytics
     */
@@ -8,16 +12,20 @@
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-319188-14', 'jit.si');
    ga('send', 'pageview');
+
+    /* eslint-enable */
  }

-  Analytics.prototype.sendEvent = function (action, data, label, browserName) {
+  Analytics.prototype.sendEvent = function (action, data) {
    // empty label if missing value for it and add the value,
    // the value should be integer or null
-    var value = Math.round(parseFloat(data));
+    var value = data.value;
+    value = value? Math.round(parseFloat(value)) : null;
+    var label = data.label || "";

    ga('send', 'event', 'jit.si',
-        action + '.' + browserName, label ? label : "", value ? value : null);
+        action + '.' + data.browserName, label, value);
  };

  ctx.Analytics = Analytics;
-}(window));
+}(window));
--- a/android/app/BUCK
+++ b/android/app/BUCK
@@ -0,0 +1,66 @@
+import re
+
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+lib_deps = []
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
+
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
+
+android_library(
+  name = 'all-libs',
+  exported_deps = lib_deps
+)
+
+android_library(
+  name = 'app-code',
+  srcs = glob([
+    'src/main/java/**/*.java',
+  ]),
+  deps = [
+    ':all-libs',
+    ':build_config',
+    ':res',
+  ],
+)
+
+android_build_config(
+  name = 'build_config',
+  package = 'org.jitsi.jitsi_meet_react',
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'org.jitsi.jitsi_meet_react',
+)
+
+android_binary(
+  name = 'app',
+  package_type = 'debug',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//android/keystores:debug',
+  deps = [
+    ':app-code',
+  ],
+)
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -0,0 +1,173 @@
+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
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property can be in the following formats
+ *   //         'bundleIn${productFlavor}${buildType}'
+ *   //         'bundleIn${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"]
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
+ * ]
+ */
+
+apply from: '../../node_modules/react-native/react.gradle'
+
+/**
+ * Set this to true to create two separate APKs instead of one:
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
+
+android {
+    compileSdkVersion 23
+    buildToolsVersion '23.0.1'
+
+    defaultConfig {
+        applicationId 'org.jitsi.jitsi_meet_react'
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName '1.0'
+        ndk {
+            abiFilters 'armeabi-v7a', 'x86'
+        }
+        packagingOptions {
+            // The project react-native does not provide 64-bit binaries at the
+            // time of this writing. Unfortunately, packaging any 64-bit
+            // binaries into the .apk will crash the app at runtime on 64-bit
+            // platforms.
+            exclude 'lib/x86_64/libjingle_peerconnection_so.so'
+            exclude 'lib/arm64-v8a/libjingle_peerconnection_so.so'
+        }
+    }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include 'armeabi-v7a', 'x86'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ['armeabi-v7a':1, 'x86':2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+        }
+    }
+}
+
+if (project.hasProperty('JITSI_SIGNING')
+        && new File(project.property('JITSI_SIGNING')).exists()) {
+    apply from: project.property('JITSI_SIGNING');
+}
+
+repositories {
+    maven { url 'https://maven.fabric.io/public' }
+}
+dependencies {
+    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
+    }
+}
+
+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'
+}
--- a/android/app/proguard-rules.pro
+++ b/android/app/proguard-rules.pro
@@ -0,0 +1,66 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Disabling obfuscation is useful if you collect stack traces from production crashes
+# (unless you are using a system that supports de-obfuscate the stack traces).
+-dontobfuscate
+
+# React Native
+
+# Keep our interfaces so they can be used by other ProGuard rules.
+# See http://sourceforge.net/p/proguard/bugs/466/
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
+-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
+
+# Do not strip any method/class that is annotated with @DoNotStrip
+-keep @com.facebook.proguard.annotations.DoNotStrip class *
+-keep @com.facebook.common.internal.DoNotStrip class *
+-keepclassmembers class * {
+    @com.facebook.proguard.annotations.DoNotStrip *;
+    @com.facebook.common.internal.DoNotStrip *;
+}
+
+-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
+  void set*(***);
+  *** get*();
+}
+
+-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
+-keep class * extends com.facebook.react.bridge.NativeModule { *; }
+-keepclassmembers,includedescriptorclasses class * { native <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
+
+-dontwarn com.facebook.react.**
+
+# okhttp
+
+-keepattributes Signature
+-keepattributes *Annotation*
+-keep class okhttp3.** { *; }
+-keep interface okhttp3.** { *; }
+-dontwarn okhttp3.**
+
+# okio
+
+-keep class sun.misc.Unsafe { *; }
+-dontwarn java.nio.file.*
+-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
+-dontwarn okio.**
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -0,0 +1,50 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.jitsi.jitsi_meet_react"
+    android:versionCode="1"
+    android:versionName="1.0">
+
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- WebRTC -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <uses-feature android:name="android.hardware.camera" />
+    <uses-feature android:name="android.hardware.camera.autofocus"/>
+
+    <uses-sdk
+        android:minSdkVersion="16"
+        android:targetSdkVersion="22" />
+
+    <application
+      android:allowBackup="true"
+      android:icon="@mipmap/ic_launcher"
+      android:label="@string/app_name"
+      android:name=".MainApplication"
+      android:theme="@style/AppTheme">
+      <activity
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:label="@string/app_name"
+        android:launchMode="singleTask"
+        android:name=".MainActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </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: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="meet.jit.si" android:scheme="https" />
+        </intent-filter>
+      </activity>
+      <activity
+        android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+      <meta-data
+        android:name="io.fabric.ApiKey"
+        android:value="a8ae24a58302ba79da1d312138e941f6b86e3242" />
+    </application>
+</manifest>
--- a/android/app/src/main/assets/fonts/jitsi.ttf
+++ b/android/app/src/main/assets/fonts/jitsi.ttf
--- a/android/app/src/main/java/org/jitsi/jitsi_meet_react/MainActivity.java
+++ b/android/app/src/main/java/org/jitsi/jitsi_meet_react/MainActivity.java
@@ -0,0 +1,56 @@
+package org.jitsi.jitsi_meet_react;
+
+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 {
+    /**
+     * {@inheritDoc}
+     *
+     * Overrides {@link ReactActivity#createRootActivityDelegate()} to customize
+     * the {@link ReactRootView} with a background color that is in accord with
+     * the JavaScript and iOS parts of the application and causes less perceived
+     * visual flicker than the default background color.
+     */
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+            /**
+             * {@inheritDoc}
+             *
+             * Overrides {@link ReactActivityDelegate#createRootView()} to
+             * customize the {@link ReactRootView} with a background color that
+             * is in accord with the JavaScript and iOS parts of the application
+             * and causes less perceived visual flicker than the default
+             * background color.
+             */
+            @Override
+            protected ReactRootView createRootView() {
+                ReactRootView rootView = super.createRootView();
+
+                rootView.setBackgroundColor(0xFF111111);
+                return rootView;
+            }
+        };
+    }
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "App";
+    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Fabric.with(this, new Crashlytics());
+    }
+}
--- a/android/app/src/main/java/org/jitsi/jitsi_meet_react/MainApplication.java
+++ b/android/app/src/main/java/org/jitsi/jitsi_meet_react/MainApplication.java
@@ -0,0 +1,39 @@
+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;
+  }
+}
--- a/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-hdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-mdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
--- a/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
--- a/android/app/src/main/res/values/strings.xml
+++ b/android/app/src/main/res/values/strings.xml
@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Jitsi Meet</string>
+</resources>
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -0,0 +1,8 @@
+<resources>
+
+    <!-- Base application theme. -->
+    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
+        <!-- Customize your theme here. -->
+    </style>
+
+</resources>
--- a/android/build.gradle
+++ b/android/build.gradle
@@ -0,0 +1,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    repositories {
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:1.3.1'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+    }
+}
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -0,0 +1,20 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+android.useDeprecatedNdk=true
--- a/android/gradle/wrapper/gradle-wrapper.jar
+++ b/android/gradle/wrapper/gradle-wrapper.jar
--- a/android/gradle/wrapper/gradle-wrapper.properties
+++ b/android/gradle/wrapper/gradle-wrapper.properties
@@ -0,0 +1,5 @@
+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
--- a/android/gradlew
+++ b/android/gradlew
@@ -0,0 +1,164 @@
+#!/usr/bin/env bash
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn ( ) {
+    echo "$*"
+}
+
+die ( ) {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+esac
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >&-
+APP_HOME="`pwd -P`"
+cd "$SAVED" >&-
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+function splitJvmOpts() {
+    JVM_OPTS=("$@")
+}
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
+
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"
--- a/android/gradlew.bat
+++ b/android/gradlew.bat
@@ -0,0 +1,90 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windowz variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega
--- a/android/keystores/BUCK
+++ b/android/keystores/BUCK
@@ -0,0 +1,8 @@
+keystore(
+  name = 'debug',
+  store = 'debug.keystore',
+  properties = 'debug.keystore.properties',
+  visibility = [
+    'PUBLIC',
+  ],
+)
--- a/android/keystores/debug.keystore.properties
+++ b/android/keystores/debug.keystore.properties
@@ -0,0 +1,4 @@
+key.store=debug.keystore
+key.alias=androiddebugkey
+key.store.password=android
+key.alias.password=android
--- a/android/settings.gradle
+++ b/android/settings.gradle
@@ -0,0 +1,7 @@
+rootProject.name = 'jitsi-meet-react'
+
+include ':app'
+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'
+project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
--- a/app.js
+++ b/app.js
@@ -1,4 +1,4 @@
-/* global $, JitsiMeetJS, config, getRoomName */
+/* global $, config, getRoomName */
 /* application specific logic */

 import "babel-polyfill";
@@ -8,10 +8,14 @@ import "jquery-ui";
 import "strophe";
 import "strophe-disco";
 import "strophe-caps";
-import "tooltip";
-import "popover";
 import "jQuery-Impromptu";
 import "autosize";
+
+import 'aui';
+import 'aui-experimental';
+import 'aui-css';
+import 'aui-experimental-css';
+
 window.toastr = require("toastr");

 import URLProcessor from "./modules/config/URLProcessor";
@@ -20,10 +24,12 @@ 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";
+import translation from "./modules/translation/translation";

 /**
 * Tries to push history state with the following parameters:
@@ -43,6 +49,18 @@ function pushHistoryState(roomName, URL) {
    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.
 */
@@ -78,12 +96,18 @@ const APP = {
    UI,
    settings,
    conference,
+    translation,
+    /**
+     * After the APP has been initialized provides utility methods for dealing
+     * with the conference room URL(address).
+     * @type ConferenceUrl
+     */
+    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();
    }
@@ -103,6 +127,10 @@ function setTokenData() {

 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 () {
--- a/authError.html
+++ b/authError.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+</head>
+<body>
+    <div class="redirectPageMessage">Sorry! You are not allowed to be here :(</div>
+</body>
+</html>
--- a/close.html
+++ b/close.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+    <script><!--#include virtual="/interface_config.js" --></script>
+    <script>function translateStr(id, msg) {
+        var div = document.getElementById(id);
+        div.innerHTML = msg;
+    }
+    function translate() {
+        translateStr('hintMessage',
+            'You can use video calls with '
+            + interfaceConfig.APP_NAME +' for your business');
+    }
+    </script>
+</head>
+<body onload="translate();">
+<div class="redirectPageMessage">
+    <div class="thanks-msg">
+        <p id="thanksMessage">Thank you for your feedback!</p>
+    </div>
+    <div class="hint-msg">
+        <p>
+            <span>Did you know?</span>
+            <span class="hint-msg__holder" id="hintMessage"></span>
+        </p>
+        <div class="happy-software"></div>
+    </div>
+</div>
+</body>
+</html>
--- a/close2.html
+++ b/close2.html
@@ -0,0 +1,33 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+    <script><!--#include virtual="/interface_config.js" --></script>
+    <script>function translateStr(id, msg) {
+        var div = document.getElementById(id);
+        div.innerHTML = msg;
+    }
+    function translate() {
+        translateStr('thanksMessage',
+            'Thank you for using ' + interfaceConfig.APP_NAME);
+        translateStr('hintMessage',
+            'You can use video calls with '
+            + interfaceConfig.APP_NAME +' for your business');
+    }
+    </script>
+</head>
+<body onload="translate();">
+    <div class="redirectPageMessage">
+        <div class="thanks-msg">
+            <p id="thanksMessage"></p>
+        </div>
+        <div class="hint-msg">
+            <p>
+                <span>Did you know?</span>
+                <span class="hint-msg__holder" id="hintMessage"></span>
+            </p>
+            <div class="happy-software"></div>
+        </div>
+    </div>
+</body>
+</html>
--- a/conference.js
+++ b/conference.js
@@ -1,22 +1,17 @@
 /* global $, APP, JitsiMeetJS, config, interfaceConfig */
 import {openConnection} from './connection';
-//FIXME:
-import createRoomLocker from './modules/UI/authentication/RoomLocker';
-//FIXME:
+import Invite from './modules/UI/invite/Invite';
+import ContactList from './modules/UI/side_pannels/contactlist/ContactList';
+
 import AuthHandler from './modules/UI/authentication/AuthHandler';
-
-import ConnectionQuality from './modules/connectionquality/connectionquality';
-
 import Recorder from './modules/recorder/Recorder';

-import CQEvents from './service/connectionquality/CQEvents';
-import UIEvents from './service/UI/UIEvents';
-
 import mediaDeviceHelper from './modules/devices/mediaDeviceHelper';

 import {reportError} from './modules/util/helpers';

-import UIErrors from './modules/UI/UIErrors';
+import UIEvents from './service/UI/UIEvents';
+import UIUtil from './modules/UI/util/UIUtil';

 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -27,25 +22,21 @@ const ConferenceErrors = JitsiMeetJS.errors.conference;
 const TrackEvents = JitsiMeetJS.events.track;
 const TrackErrors = JitsiMeetJS.errors.track;

-let room, connection, localAudio, localVideo, roomLocker;
+const ConnectionQualityEvents = JitsiMeetJS.events.connectionQuality;

-/**
- * Indicates whether the connection is interrupted or not.
- */
-let connectionIsInterrupted = false;
+let room, connection, localAudio, localVideo;

 /**
 * Indicates whether extension external installation is in progress or not.
 */
 let DSExternalInstallationInProgress = false;

-import {VIDEO_CONTAINER_TYPE} from "./modules/UI/videolayout/LargeVideo";
+import {VIDEO_CONTAINER_TYPE} from "./modules/UI/videolayout/VideoContainer";

 /**
 * Known custom conference commands.
 */
 const commands = {
-    CONNECTION_QUALITY: "stats",
    EMAIL: "email",
    AVATAR_URL: "avatar-url",
    AVATAR_ID: "avatar-id",
@@ -151,29 +142,24 @@ function getDisplayName (id) {

 /**
 * Mute or unmute local audio stream if it exists.
- * @param {boolean} muted if audio stream should be muted or unmuted.
- * @param {boolean} indicates if this local audio mute was a result of user
- * interaction
- *
+ * @param {boolean} muted - if audio stream should be muted or unmuted.
+ * @param {boolean} userInteraction - indicates if this local audio mute was a
+ * result of user interaction
 */
-function muteLocalAudio (muted, userInteraction) {
-    if (!localAudio) {
+function muteLocalAudio (muted) {
+    muteLocalMedia(localAudio, muted, 'Audio');
+}
+
+function muteLocalMedia(localMedia, muted, localMediaTypeString) {
+    if (!localMedia) {
        return;
    }

-    if (muted) {
-        localAudio.mute().then(function(value) {},
-            function(value) {
-                console.warn('Audio Mute was rejected:', value);
-            }
-        );
-    } else {
-        localAudio.unmute().then(function(value) {},
-            function(value) {
-                console.warn('Audio unmute was rejected:', value);
-            }
-        );
-    }
+    const method = muted ? 'mute' : 'unmute';
+
+    localMedia[method]().catch(reason => {
+        console.warn(`${localMediaTypeString} ${method} was rejected:`, reason);
+    });
 }

 /**
@@ -181,85 +167,45 @@ function muteLocalAudio (muted, userInteraction) {
 * @param {boolean} muted if video stream should be muted or unmuted.
 */
 function muteLocalVideo (muted) {
-    if (!localVideo) {
-        return;
-    }
-
-    if (muted) {
-        localVideo.mute().then(function(value) {},
-            function(value) {
-                console.warn('Video mute was rejected:', value);
-            }
-        );
-    } else {
-        localVideo.unmute().then(function(value) {},
-            function(value) {
-                console.warn('Video unmute was rejected:', value);
-            }
-        );
-    }
+    muteLocalMedia(localVideo, muted, 'Video');
 }

 /**
 * Check if the welcome page is enabled and redirects to it.
+ * If requested show a thank you dialog before that.
+ * If we have a close page enabled, redirect to it without
+ * showing any other dialog.
+ *
+ * @param {object} options used to decide which particular close page to show
+ * or if close page is disabled, whether we should show the thankyou dialog
+ * @param {boolean} options.thankYouDialogVisible - whether we should
+ * show thank you dialog
+ * @param {boolean} options.feedbackSubmitted - whether feedback was submitted
 */
-function maybeRedirectToWelcomePage() {
-    if (!config.enableWelcomePage) {
+function maybeRedirectToWelcomePage(options) {
+    // if close page is enabled redirect to it, without further action
+    if (config.enableClosePage) {
+        if (options.feedbackSubmitted)
+            window.location.pathname = "close.html";
+        else
+            window.location.pathname = "close2.html";
        return;
    }
-    // redirect to welcome page
-    setTimeout(() => {
-        APP.settings.setWelcomePageEnabled(true);
-        window.location.pathname = "/";
-    }, 3000);
-}

-/**
- * Executes connection.disconnect and shows the feedback dialog
- * @param {boolean} [requestFeedback=false] if user feedback should be requested
- * @returns Promise.
- */
-function disconnectAndShowFeedback(requestFeedback) {
-    APP.UI.hideRingOverLay();
-    connection.disconnect();
-    APP.API.notifyConferenceLeft(APP.conference.roomName);
-    if (requestFeedback) {
-        return APP.UI.requestFeedback();
-    } else {
-        return Promise.resolve();
+    // else: show thankYou dialog only if there is no feedback
+    if (options.thankYouDialogVisible)
+        APP.UI.messageHandler.openMessageDialog(
+            null, "dialog.thankYou", {appName:interfaceConfig.APP_NAME});
+
+    // if Welcome page is enabled redirect to welcome page after 3 sec.
+    if (config.enableWelcomePage) {
+        setTimeout(() => {
+            APP.settings.setWelcomePageEnabled(true);
+            window.location.pathname = "/";
+        }, 3000);
    }
 }

-/**
- * Disconnect from the conference and optionally request user feedback.
- * @param {boolean} [requestFeedback=false] if user feedback should be requested
- */
-function hangup (requestFeedback = false) {
-    const errCallback = (f, err) => {
-
-        // If we want to break out the chain in our error handler, it needs
-        // to return a rejected promise. In the case of feedback request
-        // in progress it's important to not redirect to the welcome page
-        // (see below maybeRedirectToWelcomePage call).
-        if (err === UIErrors.FEEDBACK_REQUEST_IN_PROGRESS) {
-            return Promise.reject('Feedback request in progress.');
-        }
-        else {
-            console.error('Error occurred during hanging up: ', err);
-            return Promise.resolve();
-        }
-    };
-    const disconnect = disconnectAndShowFeedback.bind(null, requestFeedback);
-    APP.conference._room.leave()
-    .then(disconnect)
-    .catch(errCallback.bind(null, disconnect))
-    .then(maybeRedirectToWelcomePage)
-    .catch(function(err){
-            console.log(err);
-        });
-
-}
-
 /**
 * Create local tracks of specified types.
 * @param {Object} options
@@ -293,8 +239,13 @@ function createLocalTracks (options, checkForPermissionPrompt) {
            firefox_fake_device: config.firefox_fake_device,
            desktopSharingExtensionExternalInstallation:
                options.desktopSharingExtensionExternalInstallation
-        }, checkForPermissionPrompt)
-        .catch(function (err) {
+        }, checkForPermissionPrompt).then( (tracks) => {
+            tracks.forEach((track) => {
+                track.on(TrackEvents.NO_DATA_FROM_SOURCE,
+                    APP.UI.showTrackNotWorkingDialog.bind(null, track));
+            });
+            return tracks;
+        }).catch(function (err) {
            console.error(
                'failed to create local tracks', options.devices, err);
            return Promise.reject(err);
@@ -345,7 +296,7 @@ class ConferenceConnector {
        room.on(ConferenceEvents.CONFERENCE_ERROR,
            this._onConferenceError.bind(this));
    }
-    _handleConferenceFailed(err, msg) {
+    _handleConferenceFailed(err) {
        this._unsubscribe();
        this._reject(err);
    }
@@ -355,10 +306,7 @@ class ConferenceConnector {
        switch (err) {
            // room is locked by the password
        case ConferenceErrors.PASSWORD_REQUIRED:
-            APP.UI.markRoomLocked(true);
-            roomLocker.requirePassword().then(function () {
-                room.join(roomLocker.password);
-            });
+            APP.UI.emitEvent(UIEvents.PASSWORD_REQUIRED);
            break;

        case ConferenceErrors.CONNECTION_ERROR:
@@ -368,8 +316,11 @@ class ConferenceConnector {
            }
            break;

-        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
-            APP.UI.notifyBridgeDown();
+        case ConferenceErrors.NOT_ALLOWED_ERROR:
+            {
+                // let's show some auth not allowed page
+                window.location.pathname = "authError.html";
+            }
            break;

            // not enough rights to create conference
@@ -380,8 +331,7 @@ class ConferenceConnector {
            }, 5000);

            // notify user that auth is required
-
-            AuthHandler.requireAuth(room, roomLocker.password);
+            AuthHandler.requireAuth(room, this.invite.getRoomLocker().password);
            break;

        case ConferenceErrors.RESERVATION_ERROR:
@@ -407,6 +357,10 @@ class ConferenceConnector {
            }
            break;

+            // FIXME FOCUS_DISCONNECTED is confusing event name.
+            // What really happens there is that the library is not ready yet,
+            // because Jicofo is not available, but it is going to give
+            // it another try.
        case ConferenceErrors.FOCUS_DISCONNECTED:
            {
                let [focus, retrySec] = params;
@@ -415,8 +369,17 @@ class ConferenceConnector {
            break;

        case ConferenceErrors.FOCUS_LEFT:
+        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
+            // Log the page reload event
+            // FIXME (CallStats - issue) this event will not make it to
+            // the CallStats, because the log queue is not flushed, before
+            // "fabric terminated" is sent to the backed
+            APP.conference.logEvent('page.reload');
+            // FIXME the conference should be stopped by the library and not by
+            // the app. Both the errors above are unrecoverable from the library
+            // perspective.
            room.leave().then(() => connection.disconnect());
-            APP.UI.notifyFocusLeft();
+            APP.UI.showPageReloadOverlay();
            break;

        case ConferenceErrors.CONFERENCE_MAX_USERS:
@@ -462,6 +425,37 @@ class ConferenceConnector {
    }
 }

+/**
+ * Disconnects the connection.
+ * @returns resolved Promise. We need this in order to make the Promise.all
+ * call in hangup() to resolve when all operations are finished.
+ */
+function disconnect() {
+    connection.disconnect();
+    APP.API.notifyConferenceLeft(APP.conference.roomName);
+    return Promise.resolve();
+}
+
+/**
+ * Set permanent ptoperties to analytics.
+ * NOTE: Has to be used after JitsiMeetJS.init. otherwise analytics will be
+ * null.
+ */
+function setAnalyticsPermanentProperties() {
+    let permanentProperties = {
+        userAgent: navigator.userAgent,
+        roomName: APP.conference.roomName
+    };
+    let {server, group} = APP.tokenData;
+    if(server) {
+        permanentProperties.server = server;
+    }
+    if(group) {
+        permanentProperties.group = group;
+    }
+    JitsiMeetJS.analytics.addPermanentProperties(permanentProperties);
+}
+
 export default {
    isModerator: false,
    audioMuted: false,
@@ -509,22 +503,28 @@ export default {
        }

        return JitsiMeetJS.init(config)
-            .then(() => createInitialLocalTracksAndConnect(options.roomName))
-            .then(([tracks, con]) => {
+            .then(() => {
+                setAnalyticsPermanentProperties();
+                return createInitialLocalTracksAndConnect(options.roomName);
+            }).then(([tracks, con]) => {
                console.log('initialized with %s local tracks', tracks.length);
                APP.connection = connection = con;
+                this._bindConnectionFailedHandler(con);
                this._createRoom(tracks);
                this.isDesktopSharingEnabled =
                    JitsiMeetJS.isDesktopSharingEnabled();

+                if (UIUtil.isButtonEnabled('contacts'))
+                    APP.UI.ContactList = new ContactList(room);
+
                // if user didn't give access to mic or camera or doesn't have
                // them at all, we disable corresponding toolbar buttons
                if (!tracks.find((t) => t.isAudioTrack())) {
-                    APP.UI.disableMicrophoneButton();
+                    APP.UI.setMicrophoneButtonEnabled(false);
                }

                if (!tracks.find((t) => t.isVideoTrack())) {
-                    APP.UI.disableCameraButton();
+                    APP.UI.setCameraButtonEnabled(false);
                }

                this._initDeviceList();
@@ -547,6 +547,28 @@ export default {
    isLocalId (id) {
        return this.getMyUserId() === id;
    },
+    /**
+     * Binds a handler that will handle the case when the connection is dropped
+     * in the middle of the conference.
+     * @param {JitsiConnection} connection the connection to which the handler
+     * will be bound to.
+     * @private
+     */
+    _bindConnectionFailedHandler (connection) {
+        const handler = function (error, errMsg) {
+            if (ConnectionErrors.OTHER_ERROR === error) {
+                // - item-not-found
+                // - connection dropped(closed by Strophe unexpectedly
+                //   possible due too many transport errors)
+                console.error("XMPP connection error: " + errMsg);
+                APP.UI.showPageReloadOverlay();
+                connection.removeEventListener(
+                    ConnectionEvents.CONNECTION_FAILED, handler);
+            }
+        };
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED, handler);
+    },
    /**
     * Simulates toolbar button click for audio mute. Used by shortcuts and API.
     * @param mute true for mute and false for unmute.
@@ -648,6 +670,61 @@ export default {
        return this._room
            && this._room.getConnectionState();
    },
+    /**
+     * Checks whether or not our connection is currently in interrupted and
+     * reconnect attempts are in progress.
+     *
+     * @returns {boolean} true if the connection is in interrupted state or
+     * false otherwise.
+     */
+    isConnectionInterrupted () {
+        return this._room.isConnectionInterrupted();
+    },
+    /**
+     * Finds JitsiParticipant for given id.
+     *
+     * @param {string} id participant's identifier(MUC nickname).
+     *
+     * @returns {JitsiParticipant|null} participant instance for given id or
+     * null if not found.
+     */
+    getParticipantById (id) {
+        return room ? room.getParticipantById(id) : null;
+    },
+    /**
+     * Checks whether the user identified by given id is currently connected.
+     *
+     * @param {string} id participant's identifier(MUC nickname)
+     *
+     * @returns {boolean|null} true if participant's connection is ok or false
+     * if the user is having connectivity issues.
+     */
+    isParticipantConnectionActive (id) {
+        let participant = this.getParticipantById(id);
+        return participant ? participant.isConnectionActive() : null;
+    },
+    /**
+     * Gets the display name foe the <tt>JitsiParticipant</tt> identified by
+     * the given <tt>id</tt>.
+     *
+     * @param id {string} the participant's id(MUC nickname/JVB endpoint id)
+     *
+     * @return {string} the participant's display name or the default string if
+     * absent.
+     */
+    getParticipantDisplayName (id) {
+        let displayName = getDisplayName(id);
+        if (displayName) {
+            return displayName;
+        } else {
+            if (APP.conference.isLocalId(id)) {
+                return APP.translation.generateTranslationHTML(
+                    interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME);
+            } else {
+                return interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME;
+            }
+        }
+    },
    getMyUserId () {
        return this._room
            && this._room.myUserId();
@@ -690,7 +767,7 @@ export default {
     * Returns the stats.
     */
    getStats() {
-        return ConnectionQuality.getStats();
+        return room.connectionQuality.getStats();
    },
    // end used by torture

@@ -698,6 +775,30 @@ export default {
        return room.getLogs();
    },

+    /**
+     * Download logs, a function that can be called from console while
+     * debugging.
+     * @param filename (optional) specify target filename
+     */
+    saveLogs (filename = 'meetlog.json') {
+        // this can be called from console and will not have reference to this
+        // that's why we reference the global var
+        let logs = APP.conference.getLogs();
+        let data = encodeURIComponent(JSON.stringify(logs, null, '  '));
+
+        let elem = document.createElement('a');
+
+        elem.download = filename;
+        elem.href = 'data:application/json;charset=utf-8,\n' + data;
+        elem.dataset.downloadurl
+            = ['text/json', elem.download, elem.href].join(':');
+        elem.dispatchEvent(new MouseEvent('click', {
+            view: window,
+            bubbles: true,
+            cancelable: false
+        }));
+    },
+
    /**
     * Exposes a Command(s) API on this instance. It is necessitated by (1) the
     * desire to keep room private to this instance and (2) the need of other
@@ -750,7 +851,7 @@ export default {
        room = connection.initJitsiConference(APP.conference.roomName,
            this._getConferenceOptions());
        this._setLocalAudioVideoStreams(localTracks);
-        roomLocker = createRoomLocker(room);
+        this.invite = new Invite(room);
        this._room = room; // FIXME do not use this

        let email = APP.settings.getEmail();
@@ -828,7 +929,8 @@ export default {

                APP.UI.addLocalStream(stream);

-                stream.videoType === 'camera' && APP.UI.enableCameraButton();
+                stream.videoType === 'camera'
+                    && APP.UI.setCameraButtonEnabled(true);
            } else {
                this.videoMuted = false;
                this.isSharingScreen = false;
@@ -857,8 +959,6 @@ export default {

        return promise.then(function () {
            if (stream) {
-                stream.on(TrackEvents.TRACK_AUDIO_NOT_WORKING,
-                    APP.UI.showAudioNotWorkingDialog);
                return room.addTrack(stream);
            }
        }).then(() => {
@@ -870,7 +970,7 @@ export default {
                this.audioMuted = false;
            }

-            APP.UI.enableMicrophoneButton();
+            APP.UI.setMicrophoneButtonEnabled(true);
            APP.UI.setAudioMuted(this.getMyUserId(), this.audioMuted);
        });
    },
@@ -963,21 +1063,20 @@ export default {
                // TrackErrors.GENERAL
                // and any other
                let dialogTxt;
-                let dialogTitle;
+                let dialogTitleKey;

                if (err.name === TrackErrors.PERMISSION_DENIED) {
                    dialogTxt = APP.translation.generateTranslationHTML(
                        "dialog.screenSharingPermissionDeniedError");
-                    dialogTitle = APP.translation.generateTranslationHTML(
-                        "dialog.error");
+                    dialogTitleKey = "dialog.error";
                } else {
                    dialogTxt = APP.translation.generateTranslationHTML(
                        "dialog.failtoinstall");
-                    dialogTitle = APP.translation.generateTranslationHTML(
-                        "dialog.permissionDenied");
+                    dialogTitleKey = "dialog.permissionDenied";
                }

-                APP.UI.messageHandler.openDialog(dialogTitle, dialogTxt, false);
+                APP.UI.messageHandler.openDialog(
+                    dialogTitleKey, dialogTxt, false);
            });
        } else {
            createLocalTracks({ devices: ['video'] }).then(
@@ -1002,7 +1101,6 @@ export default {
        room.on(ConferenceEvents.CONFERENCE_JOINED, () => {
            APP.UI.mucJoined();
            APP.API.notifyConferenceJoined(APP.conference.roomName);
-            connectionIsInterrupted = false;
            APP.UI.markVideoInterrupted(false);
        });

@@ -1013,14 +1111,13 @@ export default {
            }
        );

-
        room.on(ConferenceEvents.USER_JOINED, (id, user) => {
            if (user.isHidden())
                return;

            console.log('USER %s connnected', id, user);
            APP.API.notifyUserJoined(id);
-            APP.UI.addUser(id, user.getDisplayName());
+            APP.UI.addUser(user);

            // check the roles for the new user and reflect them
            APP.UI.updateUserRole(user);
@@ -1036,8 +1133,10 @@ export default {
        room.on(ConferenceEvents.USER_ROLE_CHANGED, (id, role) => {
            if (this.isLocalId(id)) {
                console.info(`My role changed, new role: ${role}`);
-                this.isModerator = room.isModerator();
-                APP.UI.updateLocalRole(room.isModerator());
+                if (this.isModerator !== room.isModerator()) {
+                    this.isModerator = room.isModerator();
+                    APP.UI.updateLocalRole(room.isModerator());
+                }
            } else {
                let user = room.getParticipantById(id);
                if (user) {
@@ -1097,6 +1196,12 @@ export default {
            APP.UI.setAudioLevel(id, lvl);
        });

+        room.on(ConferenceEvents.TALK_WHILE_MUTED, () => {
+            APP.UI.showToolbar(6000);
+            UIUtil.animateShowElement($("#talkWhileMutedPopup"), true, 5000);
+        });
+
+/*
        room.on(ConferenceEvents.IN_LAST_N_CHANGED, (inLastN) => {
            //FIXME
            if (config.muteLocalVideoIfNotInLastN) {
@@ -1105,10 +1210,16 @@ export default {
                // APP.UI.markVideoMuted(true/false);
            }
        });
+*/
        room.on(
            ConferenceEvents.LAST_N_ENDPOINTS_CHANGED, (ids, enteringIds) => {
            APP.UI.handleLastNEndpoints(ids, enteringIds);
        });
+        room.on(
+            ConferenceEvents.PARTICIPANT_CONN_STATUS_CHANGED,
+            (id, isActive) => {
+                APP.UI.participantConnectionStatusChanged(id, isActive);
+        });
        room.on(ConferenceEvents.DOMINANT_SPEAKER_CHANGED, (id) => {
            if (this.isLocalId(id)) {
                this.isDominantSpeaker = true;
@@ -1138,12 +1249,11 @@ export default {
        }

        room.on(ConferenceEvents.CONNECTION_INTERRUPTED, () => {
-            connectionIsInterrupted = true;
-            ConnectionQuality.updateLocalConnectionQuality(0);
+            APP.UI.showLocalConnectionInterrupted(true);
        });

        room.on(ConferenceEvents.CONNECTION_RESTORED, () => {
-            connectionIsInterrupted = false;
+            APP.UI.showLocalConnectionInterrupted(false);
        });

        room.on(ConferenceEvents.DISPLAY_NAME_CHANGED, (id, displayName) => {
@@ -1163,16 +1273,6 @@ export default {
            APP.UI.updateRecordingState(status);
        });

-        room.on(ConferenceEvents.LOCK_STATE_CHANGED, (state, error) => {
-            console.log("Received channel password lock change: ", state,
-                error);
-            APP.UI.markRoomLocked(state);
-        });
-
-        room.on(ConferenceEvents.USER_STATUS_CHANGED, function (id, status) {
-            APP.UI.updateUserStatus(id, status);
-        });
-
        room.on(ConferenceEvents.KICKED, () => {
            APP.UI.hideStats();
            APP.UI.notifyKicked();
@@ -1194,19 +1294,6 @@ export default {
                "resizable,scrollbars=yes,status=1");
        });

-        APP.UI.addListener(UIEvents.ROOM_LOCK_CLICKED, () => {
-            if (room.isModerator()) {
-                let promise = roomLocker.isLocked
-                    ? roomLocker.askToUnlock()
-                    : roomLocker.askToLock();
-                promise.then(() => {
-                    APP.UI.markRoomLocked(roomLocker.isLocked);
-                });
-            } else {
-                roomLocker.notifyModeratorRequired();
-            }
-        });
-
        APP.UI.addListener(UIEvents.AUDIO_MUTED, muteLocalAudio);
        APP.UI.addListener(UIEvents.VIDEO_MUTED, muteLocalVideo);

@@ -1217,42 +1304,16 @@ export default {
            });
        }

-        room.on(ConferenceEvents.CONNECTION_STATS, function (stats) {
-            ConnectionQuality.updateLocalStats(stats, connectionIsInterrupted);
+        room.on(ConnectionQualityEvents.LOCAL_STATS_UPDATED,
+            (stats) => {
+                APP.UI.updateLocalStats(stats.connectionQuality, stats);
+
        });

-        ConnectionQuality.addListener(CQEvents.LOCALSTATS_UPDATED,
-            (percent, stats) => {
-                APP.UI.updateLocalStats(percent, stats);
-                // Send only the data that remote participants care about.
-                let data = {
-                    bitrate: stats.bitrate,
-                    packetLoss: stats.packetLoss};
-                try {
-                    room.broadcastEndpointMessage({
-                        type: this.commands.defaults.CONNECTION_QUALITY,
-                        values: data });
-                } catch (e) {
-                    reportError(e);
-                }
-            });
-
-        room.on(ConferenceEvents.ENDPOINT_MESSAGE_RECEIVED,
-            (participant, payload) => {
-                switch(payload.type) {
-                    case this.commands.defaults.CONNECTION_QUALITY:
-                        ConnectionQuality.updateRemoteStats(participant.getId(),
-                            payload.values);
-                        break;
-                    default:
-                        console.warn("Unknown datachannel message", payload);
-                }
-            });
-
-        ConnectionQuality.addListener(CQEvents.REMOTESTATS_UPDATED,
-            (id, percent, stats) => {
-                APP.UI.updateRemoteStats(id, percent, stats);
-            });
+        room.on(ConnectionQualityEvents.REMOTE_STATS_UPDATED,
+            (id, stats) => {
+                APP.UI.updateRemoteStats(id, stats.connectionQuality, stats);
+        });

        room.addCommandListener(this.commands.defaults.ETHERPAD, ({value}) => {
            APP.UI.initEtherpad(value);
@@ -1263,9 +1324,10 @@ export default {
            APP.UI.setUserEmail(from, data.value);
        });

-        room.addCommandListener(this.commands.defaults.AVATAR_URL,
-        (data, from) => {
-            APP.UI.setUserAvatarUrl(from, data.value);
+        room.addCommandListener(
+            this.commands.defaults.AVATAR_URL,
+            (data, from) => {
+                APP.UI.setUserAvatarUrl(from, data.value);
        });

        room.addCommandListener(this.commands.defaults.AVATAR_ID,
@@ -1294,15 +1356,6 @@ export default {
                && APP.UI.notifyInitiallyMuted();
        });

-        APP.UI.addListener(UIEvents.USER_INVITED, (roomUrl) => {
-            APP.UI.inviteParticipants(
-                roomUrl,
-                APP.conference.roomName,
-                roomLocker.password,
-                APP.settings.getDisplayName()
-            );
-        });
-
        room.on(
            ConferenceEvents.AVAILABLE_DEVICES_CHANGED, function (id, devices) {
                APP.UI.updateDevicesAvailability(id, devices);
@@ -1311,16 +1364,16 @@ export default {

        // call hangup
        APP.UI.addListener(UIEvents.HANGUP, () => {
-            hangup(true);
+            this.hangup(true);
        });

        // logout
        APP.UI.addListener(UIEvents.LOGOUT, () => {
-            AuthHandler.logout(room).then(function (url) {
+            AuthHandler.logout(room).then(url => {
                if (url) {
                    window.location.href = url;
                } else {
-                    hangup(true);
+                    this.hangup(true);
                }
            });
        });
@@ -1344,7 +1397,8 @@ export default {
            // Longer delays will be caused by something else and will just
            // poison the data.
            if (delay < 2000) {
-                JitsiMeetJS.analytics.sendEvent('stream.switch.delay', delay);
+                JitsiMeetJS.analytics.sendEvent('stream.switch.delay',
+                    {value: delay});
            }
        });

@@ -1389,6 +1443,8 @@ export default {

        APP.UI.addListener(UIEvents.PINNED_ENDPOINT, (smallVideo, isPinned) => {
            var smallVideoId = smallVideo.getId();
+            // FIXME why VIDEO_CONTAINER_TYPE instead of checking if
+            // the participant is on the large video ?
            if (smallVideo.getVideoType() === VIDEO_CONTAINER_TYPE
                && !APP.conference.isLocalId(smallVideoId)) {

@@ -1416,7 +1472,7 @@ export default {
                .then(([stream]) => {
                    this.useVideoStream(stream);
                    console.log('switched local video device');
-                    APP.settings.setCameraDeviceId(cameraDeviceId);
+                    APP.settings.setCameraDeviceId(cameraDeviceId, true);
                })
                .catch((err) => {
                    APP.UI.showDeviceErrorDialog(null, err);
@@ -1438,7 +1494,7 @@ export default {
                .then(([stream]) => {
                    this.useAudioStream(stream);
                    console.log('switched local audio device');
-                    APP.settings.setMicDeviceId(micDeviceId);
+                    APP.settings.setMicDeviceId(micDeviceId, true);
                })
                .catch((err) => {
                    APP.UI.showDeviceErrorDialog(err, null);
@@ -1533,13 +1589,13 @@ export default {
                // storage and settings menu. This is a workaround until
                // getConstraints() method will be implemented in browsers.
                if (localAudio) {
-                    localAudio._setRealDeviceIdFromDeviceList(devices);
-                    APP.settings.setMicDeviceId(localAudio.getDeviceId());
+                    APP.settings.setMicDeviceId(
+                        localAudio.getDeviceId(), false);
                }

                if (localVideo) {
-                    localVideo._setRealDeviceIdFromDeviceList(devices);
-                    APP.settings.setCameraDeviceId(localVideo.getDeviceId());
+                    APP.settings.setCameraDeviceId(
+                        localVideo.getDeviceId(), false);
                }

                mediaDeviceHelper.setCurrentMediaDevices(devices);
@@ -1624,14 +1680,10 @@ export default {
    },

    /**
-     * Toggles the local "raised hand" status, if the current state allows
-     * toggling.
+     * Toggles the local "raised hand" status.
     */
    maybeToggleRaisedHand() {
-        // If we are the dominant speaker, we don't enable "raise hand".
-        if (this.isHandRaised || !this.isDominantSpeaker) {
-            this.setRaisedHand(!this.isHandRaised);
-        }
+        this.setRaisedHand(!this.isHandRaised);
    },

    /**
@@ -1640,11 +1692,53 @@ export default {
    setRaisedHand(raisedHand) {
        if (raisedHand !== this.isHandRaised)
        {
+            APP.UI.onLocalRaiseHandChanged(raisedHand);
+
            this.isHandRaised = raisedHand;
            // Advertise the updated status
            room.setLocalParticipantProperty("raisedHand", raisedHand);
            // Update the view
            APP.UI.setLocalRaisedHandStatus(raisedHand);
        }
+    },
+    /**
+     * Log event to callstats and analytics.
+     * @param {string} name the event name
+     * @param {int} value the value (it's int because google analytics supports
+     * only int).
+     * NOTE: Should be used after conference.init
+     */
+    logEvent(name, value) {
+        if(JitsiMeetJS.analytics) {
+            JitsiMeetJS.analytics.sendEvent(name, {value});
+        }
+        if(room) {
+            room.sendApplicationLog(JSON.stringify({name, value}));
+        }
+    },
+    /**
+     * Disconnect from the conference and optionally request user feedback.
+     * @param {boolean} [requestFeedback=false] if user feedback should be
+     * requested
+     */
+    hangup (requestFeedback = false) {
+        APP.UI.hideRingOverLay();
+        let requestFeedbackPromise = requestFeedback
+                ? APP.UI.requestFeedbackOnHangup()
+                // false - because the thank you dialog shouldn't be displayed
+                    .catch(() => Promise.resolve(false))
+                : Promise.resolve(true);// true - because the thank you dialog
+                //should be displayed
+        // All promises are returning Promise.resolve to make Promise.all to
+        // be resolved when both Promises are finished. Otherwise Promise.all
+        // will reject on first rejected Promise and we can redirect the page
+        // before all operations are done.
+        Promise.all([
+            requestFeedbackPromise,
+            room.leave().then(disconnect, disconnect)
+        ]).then(values => {
+            APP.API.notifyReadyToClose();
+            maybeRedirectToWelcomePage(values[0]);
+        });
    }
 };
--- a/config.js
+++ b/config.js
@@ -1,5 +1,6 @@
-/* jshint -W101 */
-var config = {
+/* jshint maxlen:false */
+
+var config = { // eslint-disable-line no-unused-vars
 //    configLocation: './config.json', // see ./modules/HttpConfigFetch.js
    hosts: {
        domain: 'jitsi-meet.example.com',
@@ -56,6 +57,8 @@ var config = {
    //disableAdaptiveSimulcast: false,
    enableRecording: false,
    enableWelcomePage: true,
+    //enableClosePage: false, // enabling the close page will ignore the welcome
+                              // page redirection when call is hangup
    disableSimulcast: false,
    logStats: false, // Enable logging of PeerConnection stats via the focus
 //    requireDisplayName: true, // Forces the participants that doesn't have display name to enter it when they enter the room.
--- a/connection.js
+++ b/connection.js
@@ -1,5 +1,6 @@
 /* global APP, JitsiMeetJS, config */
 import AuthHandler from './modules/UI/authentication/AuthHandler';
+import jitsiLocalStorage from './modules/util/JitsiLocalStorage';

 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -107,9 +108,9 @@ function connect(id, password, roomName) {
 export function openConnection({id, password, retry, roomName}) {

    let usernameOverride
-        = window.localStorage.getItem("xmpp_username_override");
+        = jitsiLocalStorage.getItem("xmpp_username_override");
    let passwordOverride
-        = window.localStorage.getItem("xmpp_password_override");
+        = jitsiLocalStorage.getItem("xmpp_password_override");

    if (usernameOverride && usernameOverride.length > 0) {
        id = usernameOverride;
--- a/css/.DS_Store
+++ b/css/.DS_Store
--- a/css/404.scss
+++ b/css/404.scss
@@ -0,0 +1,14 @@
+.error_page {
+    width: 60%;
+    margin: 20% auto;
+    text-align: center;
+
+    h2 {
+        font-size: 36px;
+    }
+
+    &__message {
+        font-size: 24px;
+        margin-top: 20px;
+    }
+}
--- a/css/_animations.scss
+++ b/css/_animations.scss
@@ -0,0 +1,83 @@
+/**
+* Project animations
+**/
+
+/**
+ *   Slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-100%); }
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+/**
+ *   Slide in / out animation for main toolbar.
+ */
+
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+/**
+ *   Slide in animation for extended toolbar (inner) panel.
+ */
+
+// FIX: Can't use percentage because of breaking animation when width is changed
+// (100% of 0 is also zero) Extracted this to config variable.
+@include keyframes(slideInExt) {
+    from { left: -$sidebarWidth; }
+    to   { left: 0; }
+}
+
+@include keyframes(slideOutExt) {
+    from { left: 0; }
+    to   { left: -$sidebarWidth; }
+}
+
+/**
+*   Slide in animation for extended toolbar container
+**/
+
+@include keyframes(slideOutExtContainer) {
+    from { width: $sidebarWidth; }
+    to { width: 0; }
+}
+
+@include keyframes(slideInExtContainer) {
+    from { width: 0; }
+    to { width: $sidebarWidth; }
+}
+
+/**
+*   Fade in / out animations
+**/
+
+@include keyframes(fadeIn) {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@include keyframes(fadeOut) {
+    from { opacity: 1; }
+    to { opacity: 0; }
+}
--- a/css/_base.scss
+++ b/css/_base.scss
@@ -13,6 +13,10 @@ html, body{
    overflow: hidden;
 }

+p {
+    margin: 0;
+}
+
 html, body, input, textarea, keygen, select, button {
    font-family: $baseFontFamily !important;
 }
@@ -26,24 +30,29 @@ html, body, input, textarea, keygen, select, button {
 }

 input[type='text'], input[type='password'], textarea {
-    -webkit-user-select: text;
-    user-select: text;
    display: inline-block;
-    padding: 5px;
-    color: $defaultDarkColor;
+    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: horizontal;
+    resize: none;
+    line-height: 1.5em;
 }

 button.no-icon {
@@ -53,12 +62,8 @@ button.no-icon {
 button, input, select, textarea {
    margin: 0;
    vertical-align: baseline;
-    color: $defaultDarkColor;
-    background: $inputLightBackground;
-    font-size: 12px;
-    border: none;
-    box-shadow: none;
-    outline: none;
+    color: $inputColor;
+    font-size: 1em;
 }

 button, select, input[type="button"],
@@ -72,7 +77,7 @@ input[type="reset"], input[type="submit"] {

 button {
    color: #FFF;
-    background-color: $buttonBackground !important;
+    background-color: $buttonBackground;
    border-radius: $borderRadius;
 }

@@ -81,24 +86,6 @@ form {
    display: block;
 }

-#downloadlog {
-    display: none;
-    position: absolute;
-    bottom: 5;
-    left: 5;
-    overflow: visible;
-    color: rgba(255,255,255,.50);
-}
-
-.active {
-    background-color: #00ccff;
-}
-
-.glow
-{
-    text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
-}
-
 .watermark {
    display: block;
    position: absolute;
@@ -175,4 +162,42 @@ form {
    display: -ms-flexbox !important;
    display: -webkit-flex !important;
    display: flex !important;
+}
+
+/**
+* Tooltips
+**/
+.tipsy {
+    z-index: $tooltipsZ;
+    &-inner {
+        background-color: $tooltipBg;
+    }
+
+    &-arrow {
+        border-color: $tooltipBg;
+    }
+}
+
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+    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;
 }
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -13,8 +13,7 @@
    font-size: 10pt;
    width: 100%;
    height: 90%;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: auto;
    word-wrap: break-word;

    a:link {
@@ -104,11 +103,6 @@
    color: #a7a7a7;
 }

-#unreadMessages {
-    font-size: 8px;
-    position: absolute;
-}
-
 #chat_container .username {
    float: left;
    padding-left: 5px;
@@ -135,7 +129,7 @@
 .chatmessage {
    background: #3a3a3a;
    width: 93%;
-    margin-left: 5%;
+    margin-left: 9px;
    margin-right: auto;
    border-radius: 5px;
    border-top-left-radius: 0px;
@@ -238,4 +232,4 @@

 #usermsg::-webkit-scrollbar-track-piece {
    background: #3a3a3a;
-}
+}
--- a/css/_connection-info.scss
+++ b/css/_connection-info.scss
@@ -0,0 +1,43 @@
+%connection-info {
+    text-align: left;
+    font-size: 12px;
+    font-weight: 400;
+    color: $popoverFontColor;
+
+    td {
+        padding: 2px 0;
+    }
+}
+
+.connection-info
+{
+    float: left;
+    padding: 5px;
+    padding-left: 0;
+    @extend %connection-info;
+
+    > table {
+        white-space: nowrap;
+        @extend %connection-info;
+    }
+
+    td:nth-child(n-1) {
+        padding-left: 5px;
+    }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+        color: $downloadConnectionIconColor;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+        color: $uploadConnectionIconColor;
+    }
+}
--- a/css/_contact_list.scss
+++ b/css/_contact_list.scss
@@ -2,14 +2,12 @@
    cursor: default;

    > ul#contacts {
-        position: absolute;
-        top: 31px;
+        font-size: 12px;
        bottom: 0px;
-        width: 100%;
-        margin: 0px;
+        margin: 0;
+        margin-top: 16px;
        padding: 0px;
-        overflow-y: scroll;
-        overflow-x: hidden;
+        width: 100%;
    }

    .clickable {
@@ -20,13 +18,13 @@
 #contacts {

    >li {
+        color: $defaultSideBarFontColor;
        list-style-type: none;
        text-align: left;
        white-space: nowrap;
        color: #FFF;
        font-size: 10pt;
-        padding: 7px 10px;
-        margin: 2px;
+        padding: 6px 10%;

        &:hover,
        &:active {
@@ -37,6 +35,9 @@
            display: inline-block;
            vertical-align: middle;
            margin: 0px;
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
        }
    }
 }
--- a/css/_feedback.scss
+++ b/css/_feedback.scss
@@ -1,107 +0,0 @@
-@-webkit-keyframes shake-rotate {
-    0% {
-        -webkit-transform:scale(1) rotate(0deg);
-        transform:scale(1) rotate(0deg)
-    }
-
-    50% {
-        -webkit-transform:scale(.8) rotate(-5deg);
-        transform:scale(.8) rotate(-5deg)
-    }
-
-    to {
-        -webkit-transform:scale(1) rotate(3deg);
-        transform:scale(1) rotate(3deg)
-    }
-}
-
-@keyframes shake-rotate {
-    0% {
-        -webkit-transform:scale(1) rotate(0deg);
-        transform:scale(1) rotate(0deg)
-    }
-
-    50% {
-        -webkit-transform:scale(.8) rotate(-5deg);
-        transform:scale(.8) rotate(-5deg)
-    }
-
-    to {
-        -webkit-transform:scale(1) rotate(3deg);
-        transform:scale(1) rotate(3deg)
-    }
-}
-
-.shake-rotate {
-    -webkit-animation-duration: .4s;
-    animation-duration: .4s;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-    -webkit-animation-name: shake-rotate;
-    animation-name: shake-rotate;
-    -webkit-animation-timing-function: ease-in-out;
-    animation-timing-function: ease-in-out
-}
-
-.text-center {
-    text-align: center;
-}
-
-.feedbackDetails textarea {
-    resize: vertical;
-    min-height: 100px;
-}
-
-.feedback-rating {
-    line-height: 1.2;
-    padding: 20px 0;
-
-    h2 {
-        font-weight: 400;
-        font-size: 24px;
-        line-height: 1.2;
-        padding: auto;
-        margin: auto;
-        border: none;
-    }
-
-    p {
-        margin-top: 10px;
-        margin-left: 0px;
-        margin-bottom: 0px;
-        margin-right: 0px;
-    }
-
-    .star-label {
-        font-size: 16px;
-        color: $rateStarLabelColor;
-    }
-
-    .star-btn {
-        color: $rateStarDefault;
-        font-size: 36px;
-        position: relative;
-        cursor: pointer;
-        outline: none;
-        text-decoration: none;
-        @include transition(all .2s ease);
-
-        &.starHover,
-        &.active,
-        &:hover {
-            color: $rateStarActivity;
-
-            .fa {
-                top: -6px;
-            }
-        };
-
-        &.rated:hover .fa {
-            top: 0;
-        }
-
-        .fa {
-            position: relative;
-        }
-    }
-}
--- a/css/_font-awesome.scss
+++ b/css/_font-awesome.scss
@@ -255,9 +255,6 @@
 .fa-road:before {
  content: "\f018";
 }
-.fa-download:before {
-  content: "\f019";
-}
 .fa-arrow-circle-o-down:before {
  content: "\f01a";
 }
@@ -842,9 +839,6 @@
 .fa-exchange:before {
  content: "\f0ec";
 }
-.fa-cloud-download:before {
-  content: "\f0ed";
-}
 .fa-cloud-upload:before {
  content: "\f0ee";
 }
--- a/css/_font.scss
+++ b/css/_font.scss
@@ -16,8 +16,9 @@
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
-    line-height: 0.75em;
+    line-height: 1.22em;
    font-size: 1.22em;
+    cursor: default;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
@@ -42,9 +43,6 @@
 .icon-chat:before {
  content: "\e906";
 }
-.icon-download:before {
-  content: "\e902";
-}
 .icon-edit:before {
  content: "\e907";
 }
@@ -57,12 +55,21 @@
 .icon-kick:before {
  content: "\e904";
 }
+.icon-menu-up:before {
+  content: "\e91f";
+}
+.icon-menu-down:before {
+  content: "\e920";
+}
 .icon-full-screen:before {
  content: "\e90b";
 }
 .icon-exit-full-screen:before {
  content: "\e90c";
 }
+.icon-star:before {
+    content: "\e916";
+}
 .icon-star-full:before {
  content: "\e90a";
 }
@@ -84,6 +91,9 @@
 .icon-mic-disabled:before {
  content: "\e912";
 }
+.icon-raised-hand:before {
+  content: "\e91e";
+}
 .icon-contactList:before {
  content: "\e91b";
 }
@@ -96,9 +106,6 @@
 .icon-settings:before {
  content: "\e915";
 }
-.icon-star:before {
-  content: "\e916";
-}
 .icon-share-desktop:before {
  content: "\e917";
 }
@@ -123,6 +130,7 @@
 .icon-recEnable:before {
  content: "\e614";
 }
+// FIXME not used anymore - consider removing in the next font update
 .icon-presentation:before {
  content: "\e603";
 }
--- a/css/_functions.scss
+++ b/css/_functions.scss
@@ -0,0 +1,6 @@
+/* Functions */
+
+/* Pixels to Ems function */
+@function em($value, $base: 16) {
+    @return #{$value / $base}em;
+}
--- a/css/_inlay.scss
+++ b/css/_inlay.scss
@@ -0,0 +1,29 @@
+.inlay {
+    margin-top: 14%;
+    @include border-radius(3px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: lighten(desaturate($defaultBackground, 70%), 20%);
+    text-align: center;
+
+    &__title {
+        margin: 12px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $auiBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
+        display: block;
+        margin-top: 22px;
+        font-size: 16px;
+    }
+
+    &__icon {
+        margin: 0 10px;
+        font-size: 50px;
+    }
+}
--- a/css/_jitsi_popover.scss
+++ b/css/_jitsi_popover.scss
@@ -6,100 +6,43 @@
    display: none;
    max-width: 300px;
    min-width: 100px;
-    padding: 1px;
    text-align: left;
-    color: #333333;
-    background-color: #ffffff;
+    color: $popoverFontColor;
+    background-color: $popoverBg;
    background-clip: padding-box;
-    border: 1px solid #cccccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
+    border-radius: 3px;
    /*-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;
-}

-.jitsipopover.black
-{
-    background-color: rgba(0,0,0,0.8);
-    color: #ffffff;
-}
+    &__menu-padding {
+        height: 35px;
+        width: 100px;
+        position: absolute;
+        bottom: -35px;
+    }

-.jitsipopover-content {
-    padding: 9px 14px;
-    font-size: 10pt;
-    white-space:pre-wrap;
-    text-align: center;
-}
+    &__showmore {
+        display: block;
+        text-align: center;
+        width: 90px;
+        margin: 10px auto;
+    }

-.jitsipopover > .arrow,
-.jitsipopover > .arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-}
-
-.jitsipopover > .arrow {
-    border-width: 11px;
-    left: 50%;
-    margin-left: -11px;
-    border-bottom-width: 0;
-    border-top-color: #999999;
-    border-top-color: rgba(0, 0, 0, 0.25);
-    bottom: -11px;
-}
-.jitsipopover > .arrow:after {
-    border-width: 10px;
-    content: " ";
-    bottom: 1px;
-    margin-left: -10px;
-    border-bottom-width: 0;
-    border-top-color: #ffffff;
-}
-
-.jitsipopover.black > .arrow:after
-{
-    border-top-color: rgba(0, 0, 0, 0.8);
-}
-
-.jitsiPopupmenuPadding {
-    height: 35px;
-    width: 100px;
-    position: absolute;
-    bottom: -35px;
-}
-
-.jitsipopover_green
-{
-    color: #4abd04;
-}
-
-.jitsipopover_orange
-{
-    color: #ffa800;
-}
-
-.jitsipopover_blue
-{
-    color: #21B9FC;
-}
-
-.jitsipopover_showmore
-{
-    background-color: #21B9FC;
-    color: #ffffff;
-    cursor: pointer;
-    border-radius: 3px;
-    text-align: center;
-    width: 90px;
-    height: 16px;
-    padding-top: 4px;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 15px auto 0px auto;
+    > .arrow {
+        position: absolute;
+        display: block;
+        left: 50%;
+        bottom: -5px;
+        margin-left: -5px;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-top-color: $popoverBg;
+        border-style: solid;
+        border-width: 5px;
+        border-bottom-width: 0;
+    }
 }
--- a/css/_jquery-impromptu.scss
+++ b/css/_jquery-impromptu.scss
@@ -9,7 +9,8 @@
 }
 div.jqi{ 
 	width: 400px;
-	position: absolute; 
+	position: absolute;
+    color: #3a3a3a;
 	background-color: #ffffff; 
 	font-size: 11px; 
 	text-align: left; 
--- a/css/_login_menu.scss
+++ b/css/_login_menu.scss
@@ -31,24 +31,6 @@ ul.loginmenu:after {
    left: 18px;
 }

-li a.authButton{
-    background-color: #06a5df;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 29px;
-    padding-right: 29px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
-    display:block !important;
-}
-
-span.authentication {
-    position: relative;
-}
-
 a.disabled {
    color: gray !important;
    pointer-events: none;
@@ -73,4 +55,4 @@ ul.loginmenu.extendedToolbarPopup:after {
    position: absolute;
    top: 18px;
    left: -7px;
-}
+}
--- a/css/_mixins.scss
+++ b/css/_mixins.scss
@@ -18,6 +18,14 @@
  animation:         $animations;
 }

+@mixin flex() {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
 /**
 * Keyframes mixin.
 */
@@ -36,17 +44,102 @@
  }
 }

+@mixin circle($diameter) {
+  width: $diameter;
+  height: $diameter;
+  border-radius: 50%;
+}
+
+/**
+* Absolute position the element at the top left corner
+**/
+@mixin topLeft() {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+@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;
+  -moz-transform: $func;
+  -ms-transform: $func;
+  -webkit-transform: $func;
+  -o-transform: $func;
+  transform: $func;
 }

@mixin transition($transition...) {
-    -moz-transition:    $transition;
-    -o-transition:      $transition;
-    -webkit-transition: $transition;
-    transition:         $transition;
+  -moz-transition:    $transition;
+  -o-transition:      $transition;
+  -webkit-transition: $transition;
+  transition:         $transition;
 }
+
+/**
+* Mixin styling placeholder
+**/
+@mixin placeholder() {
+  $selectors: (
+          "::-webkit-input-placeholder",
+          "::-moz-placeholder",
+          ":-moz-placeholder",
+          ":-ms-input-placeholder"
+  );
+
+  @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;
+  }
+}
+
+@mixin no-box-shadow {
+  -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;
+}
+
+@mixin border-radius($radius) {
+  -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
+}
+
+@mixin text-truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
--- a/css/_modaldialog.scss
+++ b/css/_modaldialog.scss
@@ -19,11 +19,6 @@
    width: 100%;
 }

-.jqibuttons button {
-    margin-right: 5px;
-    float:right;
-}
-
 button.jqidefaultbutton #inviteLinkRef {
    color: #2c8ad2;
 }
--- a/css/_policy.scss
+++ b/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;
+    }
+}
--- a/css/_popup_menu.scss
+++ b/css/_popup_menu.scss
@@ -1,58 +1,69 @@
-/*Initialize*/
-ul.popupmenu {
-    padding: 0px 10px 0px 10px;
-    margin: 0;
+/**
+* Initialize
+**/
+
+.popupmenu {
+    padding: 0;
+    margin: 2px 0;
    bottom: 0;
    width: 100px;
    height: auto;
-}

-ul.popupmenu li {
-    list-style-type: none;
-    text-align: left;
-}
+    &:first-child {
+        margin-top: 2px;
+    }

-ul.popupmenu li:hover {
-    background-color: rgba(256, 256, 256, .2);
-    border-radius:3px;
-}
+    &__item {
+        list-style-type: none;
+        text-align: left;
+        height: 35px;

-/*Link Appearance*/
-ul.popupmenu li a {
-    display: block;
-    text-decoration: none;
-    color: #fff;
-    padding: 5px;
-    font-size: 9pt;
-    width: 100%;
-    cursor: hand;
-}
+        &:hover {
+            background-color: $popupMenuSelectedItemBackground;
+        }
+    }

-ul.popupmenu li a i.icon-kick {
-    font-size: 8pt;
-}
+    // Link Appearance
+    &__link {
+        display: block;
+        box-sizing: border-box;
+        text-decoration: none;
+        color: #fff;
+        padding: 5px;
+        height: 100%;
+        font-size: 9pt;
+        width: 100%;
+        cursor: hand;

-ul.popupmenu li a span {
-    display: inline-block;
-    width: 20px;
-    height: 16px;
-    text-align: center;
-}
+        &.disabled {
+            color: gray !important;
+            pointer-events: none;
+        }
+    }

-ul.popupmenu li a div {
-    display: inline-block;
-    line-height: 25px;
-}
+    &__text {
+        display: inline-block;
+        vertical-align: middle;
+    }

-ul.popupmenu li a i {
-    line-height: 25px;
+    &__icon {
+        vertical-align: middle;
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        height: 100%;
+        text-align: center;
+
+        > * {
+            @include absoluteAligning();
+        }
+    }
+
+    .icon-kick {
+        font-size: 8pt;
+    }
 }

 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
    display:block !important;
-}
-
-a.disabled {
-    color: gray !important;
-    pointer-events: none;
 }
--- a/css/_recording.scss
+++ b/css/_recording.scss
@@ -1,4 +1,4 @@
 .recordingSpinner {
    display: none;
-    vertical-align: text-bottom;
+    vertical-align: top;
 }
--- a/css/_redirect_page.scss
+++ b/css/_redirect_page.scss
@@ -0,0 +1,41 @@
+html, body {
+    width: 100%;
+    height:100%;
+    color: $defaultColor;
+    background: $defaultBackground;
+}
+
+.redirectPageMessage {
+    width: 30%;
+    margin: 20% auto;
+    text-align: center;
+    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;
+        }
+    }
+}
--- a/css/_side_toolbar_container.css
+++ b/css/_side_toolbar_container.css
@@ -1,114 +0,0 @@
-/**
- * Toolbar side panel main container element.
- */
-#sideToolbarContainer {
-    display: inline-block;
-    position:absolute;
-    top: 0px;
-    left: $defaultToolbarSize;
-    width: 0%;
-    height: 100%;
-    max-width: 200px;
-    background-color: rgba(0,0,0,0.8);
-    z-index: 800;
-    overflow: hidden;
-
-    /**
-     * Labels inside the side panel.
-     */
-    label {
-        color: $defaultSemiDarkColor;
-    }
-
-    /**
-     * Form elements and blocks.
-     */
-    input, label, select, button, a, .sideToolbarBlock {
-        display: inline-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: $defaultColor;
-        background: $inputBackground;
-        border: none;
-    }
-
-    /**
-     * Specify styling of elements inside a block.
-     */
-    .sideToolbarBlock {
-        input, label, button, a, select {
-            margin-top: 5px;
-            margin-left: 0;
-            width: 100%;
-        }
-
-        .startMutedLabel,
-        .followMeLabel {
-            display: inline;
-            margin-top: 0;
-        }
-    }
-
-    /**
-     * Inner container, for example contact list, settings or profile.
-     */
-    .sideToolbarContainer__inner {
-        display: none;
-        width: 200px;
-        color: #FFF;
-
-        /**
-         * Titles and subtitles of inner containers.
-         */
-        > div.title,
-          div.subTitle {
-            color: $defaultColor !important;
-            text-align: left;
-            margin: 10px 0px 10px 0px;
-            padding: 5px 10px 5px 10px;
-        }
-
-        /**
-         * Main title size.
-         */
-        > div.title {
-            font-size: 16px;
-        }
-
-        /**
-         * Subtitle specific properties.
-         */
-        > div.subTitle {
-            font-size: 12px;
-            background: $inputSemiBackground !important;
-            margin-top: 20px !important;
-            margin-bottom: 8px !important;
-        }
-
-        /**
-         * First element after a title.
-         */
-        .first {
-            margin-top: 0px !important;
-        }
-    }
-}
-
-#device_settings {
-    width : auto !important;
-    text-align: center;
-}
-
-#startAudioMuted,
-#startVideoMuted,
-#followMeCheckBox {
-    width: 13px !important;
-}
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@@ -0,0 +1,146 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    background-color: rgba(0,0,0,0.8);
+    height: 100%;
+    left: $defaultToolbarSize;
+    max-width: $sidebarWidth;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: 800;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $defaultColor;
+    }
+
+    /**
+     * Form elements and blocks.
+     */
+    input, select, a,
+    .sideToolbarBlock, .input-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.
+     */
+    .sideToolbarBlock {
+        input, button, a, select {
+            margin-left: 0;
+            margin-top: 5px;
+            width: 100%;
+        }
+        input[type='checkbox'] {
+            display: inline;
+            width: auto !important;
+            > label {
+                margin-top: 5px;
+                width: 80%;
+            }
+        }
+    }
+
+    /**
+     * Inner container, for example contact list, settings or profile.
+     */
+    .sideToolbarContainer__inner {
+        display: none;
+        height: 100%;
+        width: $sidebarWidth;
+        position: absolute;
+        box-sizing: border-box;
+        color: #FFF;
+
+        /**
+         * Titles and subtitles of inner containers.
+         */
+        div.title, div.subTitle {
+            margin: 10px 0;
+        }
+
+        /**
+         * Main title size.
+         */
+        div.title {
+            color: $defaultColor !important;
+            font-size: 16px;
+            text-align: center;
+        }
+
+        /**
+         * Subtitle specific properties.
+         */
+        div.subTitle {
+            color: $defaultSideBarFontColor !important;
+            font-size: 11px;
+            font-weight: 500;
+            margin-left: 10%;
+            text-align: left;
+        }
+
+        /**
+         * First element after a title.
+         */
+        .first {
+            margin-top: 0 !important;
+        }
+
+        /**
+         * Buttons in the side toolbar container.
+         */
+        .button-control {
+            margin: 9px 0;
+            width: 100%;
+        }
+    }
+}
+
+#device_settings {
+    width : auto !important;
+    text-align: center;
+}
+
+/**
+ * Profile
+ */
+.auth_container {
+    ul {
+        padding: 0;
+
+        li {
+            list-style-type: none;
+
+            a.authButton {
+                width: 160px;
+                margin: 10px 20px;
+                padding: 3px 29px;
+                box-sizing: border-box;
+                background-color: #06a5df;
+                border-radius: 4px;
+                cursor: pointer;
+                color: $defaultColor;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}
--- a/css/_toastr.scss
+++ b/css/_toastr.scss
@@ -7,206 +7,100 @@
 *
 * Author: John Papa and Hans Fjällemark
 * Project: https://github.com/CodeSeven/toastr
+ *
+ * Last updated: October 13, 2016
 */
-.toast-title {
+
+.toast-title,
+.toast-message .nickname {
  font-weight: bold;
+  margin: 0 0 3px;
+  @include text-truncate;
 }
+
 .toast-message {
  -ms-word-wrap: break-word;
  word-wrap: break-word;
 }
+
 .toast-message a,
-.toast-message label {
-  color: #ffffff;
-}
-
-.toast-message .nickname {
-  font-weight: bold;
-}
-
-.toast-message a:hover {
-  color: #cccccc;
+.toast-message label,
+.toast-message .connected,
+.toast-message .disconnected {
+  color: $notificationLinkColor;
  text-decoration: none;
 }

+.toast-message a:hover {
+  text-decoration: underline;
+}
+
+.toast-message br {
+  display: none;
+}
+
+// close button
 .toast-close-button {
-  position: relative;
-  right: -0.3em;
-  top: -0.3em;
-  float: right;
+  color: $notificationColor;
+  background: transparent;
+
  font-size: 15px;
-  height: 15px;
-  width: 15px;
-  font-weight: bold;
-  color: #ffffff;
-  background: transparent !important;
-  -webkit-text-shadow: 0 1px 0 #ffffff;
-  text-shadow: 0 1px 0 #ffffff;
-  opacity: 0.8;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-  filter: alpha(opacity=80);
+  line-height: 1.2;
+
+  height: 20px;
+  width: 20px;
+  padding: 0;
+  border: 0;
+  margin: -6px -10px 0 0;
+  float: right;
+
+  cursor: pointer;
+  @include opacity(0.4);
+  /* Additional properties for button version
+  iOS requires the button element instead of an anchor tag.
+  If you want the anchor version, it requires `href="#"`. */
+  -webkit-appearance: none;
 }

 .toast-close-button:hover,
 .toast-close-button:focus {
-  color: #ffffff;
-  text-decoration: none;
-  cursor: pointer;
-  opacity: 1;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  filter: alpha(opacity=100);
+  @include opacity(1);
 }
-/*Additional properties for button version
- iOS requires the button element instead of an anchor tag.
- If you want the anchor version, it requires `href="#"`.*/
-button.toast-close-button {
-  padding: 0;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  -webkit-appearance: none;
+
+
+.toast {
+  color: $notificationColor;
+  background-color: $notificationBackground;
+
+  font-size: $notificationFontSize;
+
+  padding: $notificationPadding;
+  border: 1px solid lighten($notificationBackground, 10%);
+
+  @include border-radius($notificationBorderRadius);
+  @include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3));
+  @include opacity($notificationOpacity);
 }
-.toast-top-full-width {
-  top: 0;
-  right: 0;
-  width: 100%;
-}
-.toast-bottom-full-width {
-  bottom: 0;
-  right: 0;
-  width: 100%;
-}
-.toast-top-left {
-  top: 12px;
-  left: 12px;
-}
-.toast-top-right {
-  top: 12px;
-  right: 12px;
-}
-.toast-bottom-right {
-  right: 12px;
-  bottom: 12px;
-}
-.toast-bottom-left {
-  bottom: 12px;
-  left: 12px;
+
+.toast:hover {
+  @include opacity(1);
 }
+
 #toast-container {
  position: fixed;
-  z-index: 1012;
-  /*overrides*/
-
-}
-#toast-container * {
-  -moz-box-sizing: border-box;
-  -webkit-box-sizing: border-box;
-  box-sizing: border-box;
-}
-#toast-container > div {
-  margin: 0 0 6px;
-  padding: 15px 15px 15px 15px;
-  width: 300px;
-  -moz-border-radius: 3px 3px 3px 3px;
-  -webkit-border-radius: 3px 3px 3px 3px;
-  border-radius: 3px 3px 3px 3px;
-  background-position: 15px center;
-  background-repeat: no-repeat;
-  -moz-box-shadow: 0 0 12px #999999;
-  -webkit-box-shadow: 0 0 12px #999999;
-  box-shadow: 0 0 12px #999999;
-  color: #ffffff;
-  opacity: 0.8;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-  filter: alpha(opacity=80);
-}
-#toast-container > :hover {
-  -moz-box-shadow: 0 0 12px #000000;
-  -webkit-box-shadow: 0 0 12px #000000;
-  box-shadow: 0 0 12px #000000;
-  opacity: 1;
-  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-  filter: alpha(opacity=100);
-  cursor: pointer;
-}
-#toast-container .toast-info,
-#toast-container .toast-success,
-#toast-container .toast-error,
-#toast-container .toast-warning
-{
-  padding: 10px 10px 10px 10px !important;
-}
-
-#toast-container.toast-top-full-width > div,
-#toast-container.toast-bottom-full-width > div {
-  width: 100%;
-  margin: auto;
-}
-.toast {
-  background-color: #030303;
-}
-.toast-success {
-  background-color: #51a351;
-}
-.toast-error {
-  background-color: #bd362f;
-}
-.toast-info {
-  background-color: #2f96b4;
-}
-.toast-warning {
-  background-color: #f89406;
-}
-/*Responsive Design*/
-@media all and (max-width: 240px) {
-  #toast-container > div {
-    padding: 8px 8px 8px 8px;
-    width: 11em;
-  }
-  #toast-container .toast-close-button {
-    right: -0.2em;
-    top: -0.2em;
-  }
-}
-@media all and (min-width: 241px) and (max-width: 480px) {
-  #toast-container > div {
-    padding: 8px 8px 8px 8px;
-    width: 18em;
-  }
-  #toast-container .toast-close-button {
-    right: -0.2em;
-    top: -0.2em;
-  }
-}
-@media all and (min-width: 481px) and (max-width: 768px) {
-  #toast-container > div {
-    padding: 15px 15px 15px 15px;
-    width: 25em;
-  }
+  z-index: $notificationZ;
 }

 #toast-container.notification-bottom-right {
-  bottom: 140px;
-  right: 5px;
+  bottom: 135px;
+  right: 13px;
 }

-#toast-container.notification-bottom-right-center {
-  right: 205px;
+#toast-container * {
+  @include box-sizing(border-box);
 }

-#toast-container .toast-info {
-  -webkit-box-shadow: none;
-  box-shadow: none;
-}
-
-.toast-close-button {
-  right: -7px;
-  top: -19px;
-}
-
-#toast-container .toast-info {
-  background-color: black;
-  border: 1px solid #3a3a3a;
-  width: 220px;
-  padding: 10px 10px 10px 50px;
+#toast-container .toast {
+  width: $notificationWidth;
+  margin: 0 0 8px;
 }
--- a/css/_toolbars.scss
+++ b/css/_toolbars.scss
@@ -1,9 +1,21 @@
 .toolbar {
-    background-color: rgba(0,0,0,0.5);
+    background-color: $toolbarBackground;
    position: relative;
    z-index: $toolbarZ;
    height: 100%;
    pointer-events: auto;
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    &__splitter {
+        display: inline-block;
+        vertical-align: middle;
+        width: 1px;
+        height: 50%;
+        margin: 0 $splitterToolbarButtonMargin;
+        background: $splitterColor;
+    }
 }

 #mainToolbarContainer{
@@ -16,8 +28,7 @@
    z-index: $toolbarZ;
    pointer-events: none;
    min-height: 100px;
-    transform: translateY(-100%);
-    -webkit-transform: translateY(-100%);
+    opacity: 0;
 }

 #subject {
@@ -42,30 +53,22 @@
    margin-left: auto;
    margin-right: auto;
    width: auto;
-    border-radius: 4px;
-
-    .first {
-        border-bottom-left-radius: 4px;
-        border-top-left-radius: 4px;
-    }
-
-    .last {
-        border-bottom-right-radius: 4px;
-        border-top-right-radius: 4px;
-    }
+    border-radius: 3px;
+    overflow: hidden;
 }

 #extendedToolbar {
-    display: flex;
-    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
+    display: -webkit-box;
    display: -webkit-flex;
+    display: flex;
    width: $defaultToolbarSize;
    height: 100%;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
    padding-top: 10px;
+    box-sizing: border-box;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
@@ -83,14 +86,6 @@
    display: none;
 }

-#numberOfParticipants {
-  position: absolute;
-  top: 5px;
-  line-height: 13px;
-  font-weight: bold;
-  font-size: 11px;
-}
-
 #mainToolbar a.button:last-child::after {
    content: none;
 }
@@ -118,6 +113,10 @@
    cursor: default;
 }

+.button.toggled {
+    background: $toolbarToggleBackground !important;
+}
+
 a.button.unclickable:hover,
 a.button.unclickable:active,
 a.button.unclickable.selected{
@@ -129,6 +128,7 @@ a.button:hover,
 a.button:active,
 a.button.selected {
    cursor: pointer;
+    text-decoration: none;
    // sum opacity with background layer should give us 0.8
    background: $toolbarSelectBackground;
 }
@@ -144,6 +144,36 @@ a.button>#avatar {
    margin-top: auto;
 }

+/**
+ * Round badge.
+ */
+.badge-round {
+    background-color: $toolbarBadgeBackground;
+    color: $toolbarBadgeColor;
+    font-size: 9px;
+    line-height: 13px;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 50%;
+    min-width: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    vertical-align: middle;
+    // Do not inherit the font-family from the toolbar button, because it's an
+    // icon style.
+    font-family: $baseFontFamily;
+}
+
+/**
+ * Toolbar specific round badge.
+ */
+.toolbar .badge-round {
+    position: absolute;
+    right: 9px;
+    bottom: 9px;
+}
+
 /**
 * START of slide in animation for extended toolbar.
 */
@@ -232,5 +262,12 @@ a.button>#avatar {
 }

 /**
- * END of slide in animation for extended toolbar panel.
+ * START of fade in animation for main toolbar
 */
+.fadeIn {
+    @include animation('fadeIn .3s linear .2s forwards');
+}
+
+.fadeOut {
+    @include animation('fadeOut .5s linear forwards');
+}
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,5 +1,6 @@
+@import "themes/light";
+
 /**
-<<<<<<< HEAD
 * Style variables
 */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@@ -11,32 +12,118 @@ $hangupFontSize: 2em;
 */
 $defaultToolbarSize: 50px;

+// Video layout.
+$thumbnailToolbarHeight: 22px;
+$thumbnailIndicatorBorder: 0px;
+$thumbnailIndicatorSize: $thumbnailToolbarHeight;
+$thumbnailVideoMargin: 2px;
+
 /**
 * Color variables.
 */
 $defaultColor: #F1F1F1;
+$defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
-$defaultDarkColor: #4F4F4F;
-$defaultBackground: #474747;
+$defaultDarkColor: #2b3d5c;
+$tooltipBg: rgba(0,0,0, 0.7);
+
+/**
+ * Toolbar
+ */
+$toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
-$inputBackground: rgba(132, 132, 132, .5);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+$toolbarToggleBackground: #12499C;
+$splitterToolbarButtonMargin: 18px;
+
+/*
+ * Main controls
+ * TODO: looks like we don't use it
+ */
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
-$inputBorderColor: #EBEBEB;
-$buttonBackground: #44A5FF;
+
+/*
+ * Video layout
+ */
+$videoThumbnailHovered: rgba(22, 94, 204, .4);
+$videoThumbnailSelected: #165ECC;
+$participantNameColor: #fff;
+$thumbnailPictogramColor: #fff;
+$dominantSpeakerBg: #165ecc;
+$raiseHandBg: #D6D61E;
+$audioLevelBg: #44A5FF;
+$connectionIndicatorBg: #165ecc;
+$audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $toolbarBackground;
+
+/**
+ * Feedback Modal
+ */
+$feedbackContentBg: #fff;
+$feedbackInputBg: #fff;
+$feedbackTextColor: #000;
+$feedbackInputTextColor: #333;
+$feedbackInputPlaceholderColor: #777;
+$rateStarLabelColor: #333;
+$rateStarDefault: #ccc;
+$rateStarActivity: #165ecc;
+$rateStarSize: 34px;
+$feedbackCancelFontColor: #333;
+
+/**
+ * Notifications
+ */
+$notificationFontSize: 13px;
+$notificationColor: #FFFFFF;
+$notificationBackground: $tooltipBg;
+$notificationTitleColor: $notificationColor;
+$notificationMessageColor: $notificationColor;
+$notificationLinkColor: $notificationColor;
+$notificationOpacity: 0.9;
+$notificationPadding: 15px 20px;
+$notificationBorderRadius: 4px;
+$notificationWidth: 215px;

 /**
 * Misc.
 */
 $borderRadius: 4px;
 $defaultWatermarkLink: '../images/watermark.png';
+$sidebarWidth: 200px;
+
+$happySoftwareBackground: transparent;

 /**
 * Z-indexes. TODO: Replace this by a function.
 */
+$tooltipsZ: 901;
 $toolbarZ: 900;
-$overlayZ: 800;
+$overlayZ: 902;
+$notificationZ: 1012;
+$ringingZ: 800;
+$dropdownZ: 901;
+$dropdownMaskZ: 900;

-$rateStarDefault: #ccc;
-$rateStarActivity: #f6c342;
-$rateStarLabelColor: #333;
+/**
+ * Font Colors
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+
+/**
+ * Forms
+ */
+//dropdown
+$selectFontColor: $defaultLightFontColor;
+$selectBg: $defaultBackground;
+$selectActiveBg: $defaultBackground;
+$selectActiveItemBg: $defaultDarkColor;
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -1,5 +1,10 @@
+#videoconference_page {
+    min-height: 100%;
+}
+
 #videospace {
    display: block;
+    min-height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
@@ -13,19 +18,18 @@
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
-    flex-direction: row;
+    flex-direction: row-reverse;
    flex-wrap: nowrap;
-    justify-content: flex-end;
+    justify-content: flex-start;

    position:absolute;
    text-align:right;
    height:196px;
-    padding: 18px;
+    padding: 10px 10px 17px 5px;
    bottom: 0;
-    left: 0;
-    right: 20px;
+    right: 0;
    width:auto;
-    border:1px solid transparent;
+    border: 2px solid transparent;
    z-index: 5;
    transition: bottom 2s;
    overflow: visible !important;
@@ -39,37 +43,85 @@
 .videocontainer {
    position: relative;
    text-align: center;
+
+    &__background {
+        @include topLeft();
+        width: 100%;
+        height: 100%;
+        background-color: black;
+    }
 }

 #remoteVideos .videocontainer {
    display: none;
-    background-color: black;
+    position: relative;
    background-size: contain;
+    border: 2px solid transparent;
    border-radius:1px;
-    border: 1px solid #212425;
+    margin: 0 $thumbnailVideoMargin;
 }

-#remoteVideos .videocontainer.videoContainerFocused {
+/**
+ * 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.
+}
+
+.videocontainer__toolbar {
+    bottom: 0;
+    padding: 0 5px 0 5px;
+    height: $thumbnailToolbarHeight;
+}
+
+.videocontainer__toptoolbar {
+    $toolbarPadding: 5px;
+    top: 0;
+    padding: $toolbarPadding;
+    padding-bottom: 0;
+    height: $thumbnailIndicatorSize + $toolbarPadding;
+}
+
+.videocontainer__hoverOverlay {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    visibility: hidden;
+    background: rgba(0,0,0,.6);
+    z-index: 2;
+}
+
+#remoteVideos .videocontainer.videoContainerFocused,
+#remoteVideos .videocontainer:hover {
    cursor: hand;
+}
+/**
+ * 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;
 }

+/**
+ * Hovered video thumbnail.
+ */
 #remoteVideos .videocontainer:hover {
-    border: 1px solid #c1c1c1;
-}
-
-#remoteVideos .videocontainer.videoContainerFocused {
-    box-shadow: inset 0 0 28px #006d91;
-    border: 1px solid #006d91;
-}
-
-#remoteVideos .videocontainer.videoContainerFocused:hover {
-    box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
-    border: 1px solid #c1c1c1;
+    cursor: hand;
+    border: 2px solid $videoThumbnailHovered;
+    box-shadow: inset 0 0 3px $videoThumbnailHovered,
+              0 0 3px $videoThumbnailHovered;
 }

 #localVideoWrapper {
@@ -113,7 +165,6 @@
    object-fit: cover;
 }

-#presentation,
 #sharedVideo,
 #etherpad,
 #localVideoWrapper>video,
@@ -132,8 +183,7 @@
    height: 100%;
 }

-#etherpad,
-#presentation {
+#etherpad {
    text-align: center;
 }

@@ -141,132 +191,48 @@
    z-index: 0;
 }

-#remoteVideos .videocontainer>span.focusindicator,
-#remoteVideos .videocontainer>div.remotevideomenu {
-    position: absolute;
-    color: #FFFFFF;
-    top: 0;
-    left: 0;
-    padding: 5px 0px;
-    width: 25px;
-    font-size: 11pt;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
-    border: 0px;
-    z-index: 2;
-    text-align: center;
-}
-
-#remoteVideos .videocontainer>span.focusindicator {
+/**
+ * Positions video thumbnail display name and editor.
+ */
+.videocontainer .displayname,
+.videocontainer .editdisplayname {
    display: inline-block;
-}
-
-#remoteVideos .videocontainer>div.remotevideomenu {
-    display: block;
-}
-
-.videocontainer>span.displayname,
-.videocontainer>input.displayname {
-    display: none;
    position: absolute;
-    color: #FFFFFF;
-    background: rgba(0,0,0,.7);
+    left: 10%;
+    width: 80%;
+    top: 50%;
+    @include transform(translateY(-40%));
+    color: $participantNameColor;
    text-align: center;
    text-overflow: ellipsis;
-    width: 70%;
-    height: 20%;
-    left: 15%;
-    top: 40%;
-    padding: 5px;
-    font-size: 11pt;
+    font-size: 12px;
+    font-weight: 100;
    overflow: hidden;
    white-space: nowrap;
+    line-height: $thumbnailToolbarHeight;
    z-index: 2;
-    border-radius:3px;
 }

-.videocontainer>span.status {
-    display: inline-block;
-    position: absolute;
-    color: #FFFFFF;
-    background: rgba(0,0,0,.7);
-    text-align: center;
-    text-overflow: ellipsis;
-    width: 70%;
-    height: 15%;
-    left: 15%;
-    bottom: 2%;
-    padding: 5px;
-    font-size: 10pt;
-    overflow: hidden;
-    white-space: nowrap;
-    z-index: 2;
-    border-radius:3px;
+/**
+ * Positions video thumbnail display name editor.
+ */
+.videocontainer .editdisplayname {
+    outline: none;
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
 }

-.connectionindicator
-{
-    display: inline-block;
-    position: absolute;
-    top: 7px;
-    right: 0;
-    padding: 0px 5px;
-    z-index: 3;
-    width: 18px;
-    height: 13px;
-}
-
-.connection.connection_empty
-{
-    color: #8B8B8B;/*#FFFFFF*/
-    overflow: hidden;
-}
-
-.connection.connection_full
-{
-    color: #FFFFFF;/*#15A1ED*/
-    overflow: hidden;
-}
-
-.connection
-{
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    font-size: 8pt;
-    border: 0px;
-    width: 18px;
-    height: 13px;
-}
-
-.connection_info
-{
-    float: left;
-    padding-bottom: 5px;
-}
-
-.connection_info > table
-{
-    white-space: nowrap;
-}
-
-.connection_info, .connection_info > table
-{
-    text-align: left;
-    font-size: 11px;
-    color: #ffffff;
-}
-
-#localVideoContainer>span.status:hover,
-#localVideoContainer>span.displayname:hover {
+#localVideoContainer .displayname:hover {
    cursor: text;
 }

-.videocontainer>span.status,
-.videocontainer>span.displayname {
+.videocontainer .displayname {
    pointer-events: none;
 }

-.videocontainer>input.displayname {
+.videocontainer .editdisplayname {
    height: auto;
 }

@@ -274,7 +240,6 @@
    pointer-events: auto !important;
 }

-.videocontainer>a.status,
 .videocontainer>a.displayname {
    display: inline-block;
    position: absolute;
@@ -287,53 +252,164 @@
    z-index: 2;
 }

-.videocontainer>span.audioMuted {
-    display: inline-block;
-    position: absolute;
-    color: #FFFFFF;
-    top: 0;
-    padding: 8px 5px;
-    width: 25px;
+/**
+ * Video thumbnail toolbar icon.
+ */
+.videocontainer .toolbar-icon {
    font-size: 8pt;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
-    border: 0px;
-    z-index: 3;
    text-align: center;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    color: #FFFFFF;
+    width: 12px;
+    line-height: $thumbnailToolbarHeight;
+    height: $thumbnailToolbarHeight;
+    padding: 0;
+    border: 0;
+    margin: 0px 5px 0px 0px;
+    float: left;
 }

-.videocontainer>span.videoMuted {
+/**
+ * Toolbar icon internal i elements (font icons).
+ */
+.toolbar-icon>i {
+    line-height: $thumbnailToolbarHeight;
+}
+
+/**
+ * Toolbar icons positioned on the right.
+ */
+.toolbar-icon.right {
+  float: right;
+  margin: 0px 0px 0px 5px;
+}
+
+#raisehandindicator {
+  background: $raiseHandBg;
+}
+
+#connectionindicator {
+  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;
    position: absolute;
-    color: #FFFFFF;
-    top: 0;
+    top: 0px;
    right: 0;
-    padding: 8px 5px;
-    width: 25px;
+    margin: 7px;
+    z-index: 3;
+    width: 18px;
+    height: 13px;
+    color: #FFF;
    font-size: 8pt;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
-    border: 0px;
-    z-index: 3;
 }

-.videocontainer>span.indicator {
-    bottom: 0px;
-    left: 0px;
-    width: 25px;
-    height: 25px;
-    z-index: 3;
-    text-align: center;
-    border-radius: 50%;
-    background: #21B9FC;
-    margin: 5px;
-    display: inline-block;
+/**
+ * Audio indicator on video thumbnails.
+ */
+.videocontainer>span.audioindicator {
    position: absolute;
-    color: #FFFFFF;
-    font-size: 11pt;
-    border: 0px;
-}
+    display: inline-block;
+    left: 6px;
+    top: 50%;
+    margin-top: -17px;
+    width: 6px;
+    height: 35px;
+    z-index: 2;
+    border: none;

-#indicatoricon {
-    padding-top: 5px;
+    .audiodot-top,
+    .audiodot-bottom,
+    .audiodot-middle {
+        opacity: 0;
+        display: inline-block;
+        @include circle(5px);
+        background: $audioLevelShadow;
+        margin: 1px 0 1px 0;
+        transition: opacity .25s ease-in-out;
+        -moz-transition: opacity .25s ease-in-out;
+    }
+
+    span.audiodot-top::after,
+    span.audiodot-bottom::after,
+    span.audiodot-middle::after {
+        content: "";
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        -webkit-filter: blur(0.5px);
+        filter: blur(0.5px);
+        background: $audioLevelBg;
+    }
 }

 #reloadPresentation {
@@ -366,39 +442,40 @@
    width: 300px;
    height: 300px;
    margin: auto;
-    overflow: hidden;
    position: relative;
 }

-#dominantSpeakerAudioLevel {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    z-index: 2;
-    visibility: inherit;
-}
-
 #mixedstream {
    display:none !important;
 }

-#dominantSpeakerAvatar {
+#dominantSpeakerAvatar,
+.dynamic-shadow {
    width: 200px;
    height: 200px;
+}
+
+#dominantSpeakerAvatar {
    top: 50px;
    margin: auto;
    position: relative;
    border-radius: 100px;
-    z-index: 3;
    visibility: inherit;
    background-color: #000000;
 }

-.userAvatar {
-    height: 100%;
+.dynamic-shadow {
+    border-radius: 50%;
    position: absolute;
-    left: 0;
-    border-radius: 2px;
+    top: 50%;
+    left: 50%;
+    margin: -100px 0 0 -100px;
+    transition: box-shadow 0.3s ease;
+}
+
+.userAvatar {
+    @include circle(60px);
+    @include absoluteAligning();
 }

 .sharedVideoAvatar {
@@ -436,17 +513,49 @@
    filter: grayscale(.5) opacity(0.8);
 }

+.remoteVideoProblemFilter {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
 .videoProblemFilter {
    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
    filter: blur(10px) grayscale(.5) opacity(0.8);
 }

-#videoConnectionMessage {
+.videoThumbnailProblemFilter {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+#remoteConnectionMessage {
+    display: none;
+    position: absolute;
+    width: auto;
+    z-index: 2;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+
+    background: rgba(0,0,0,.5);
+    border-radius: 5px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#localConnectionMessage {
    display: none;
    position: absolute;
    width: 100%;
    top:50%;
-    z-index: 1011;
+    z-index: 2;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
@@ -458,46 +567,78 @@
                    0px 0px 1px rgba(0,0,0,0.3);
 }

-#videoResolutionLabel {
-    display: none;
+.video-state-indicator {
+    background: $videoStateIndicatorBackground;
+    color: $videoStateIndicatorColor;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    min-width: 40px;
+    height: 40px;
+    padding: 10px 5px;
+    border-radius: 50%;
    position: absolute;
-    top: 5px;
-    right: 5px;
-    background: rgba(0,0,0,.5);
-    padding: 10px;
-    color: rgba(255,255,255,.5);
+    box-sizing: border-box;
+}
+
+#videoResolutionLabel,
+.centeredVideoLabel {
+    display: none;
    z-index: 1011;
 }

 .centeredVideoLabel {
-    display: none;
-    position: absolute;
    bottom: 45%;
-    top: auto;
-    right: auto;
-    left: auto;
-    line-height: 28px;
-    height: 28px;
-    width: auto;
-    padding: 5px;
-    margin-right: auto;
-    margin-left: auto;
-    background: rgba(0,0,0,.5);
-    color: #FFF;
-    z-index: 1011;
    border-radius: 2px;
    -webkit-transition: all 2s 2s linear;
    transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
 }

 .moveToCorner {
-    top: 5px;
-    right: 50px; /*leave free space for the HD label*/
-    margin-right: 0px;
-    margin-left: auto;
-    background: rgba(0,0,0,.3);
-    color: rgba(255,255,255,.5);
+    position: absolute;
+    top: 30px;
+    right: 30px;
 }

-.hidden {
+.moveToCorner + .moveToCorner {
+    right: 80px;
 }
+
+.filmstripToolbar {
+    width: 20px;
+    position: absolute;
+    right: 4px;
+    bottom: 20px;
+    z-index: 6;
+
+    button {
+        font-size: 14px;
+        line-height: 1.2;
+        text-align: center;
+        background: transparent;
+        opacity: 0.7;
+        height: auto;
+        width: 100%;
+        padding: 0;
+        margin: 0 1px;
+        border: none;
+
+        -webkit-appearance: none;
+
+        &:hover {
+            opacity: 1;
+        }
+
+        i {
+            cursor: pointer;
+        }
+    }
+}
+
+.filmstripToolbar + #remoteVideos {
+    padding-right: 24px;
+}
--- a/css/aui-components/dropdown.scss
+++ b/css/aui-components/dropdown.scss
@@ -0,0 +1,67 @@
+
+.select2-container.aui-select2-container {
+    background-color: transparent !important;
+
+    a.select2-choice {
+        height: 28px !important;
+        line-height: 18px !important;
+        width: 100% !important;
+        background-color: $selectBg !important;
+        border-color: $selectBg !important;
+        color: $selectFontColor !important;
+        text-shadow: none !important;
+        font-size: 12px !important;
+        margin: 0 auto !important;
+
+        &:after {
+            border-top-color: $selectFontColor;
+        }
+    }
+
+    &.select2-dropdown-open{
+        a.select2-choice {
+            background-color: $selectActiveBg !important;
+            border-color: $selectActiveBg !important;
+        }
+    }
+}
+
+.select2-drop.aui-select2-drop.aui-style-default {
+    z-index: $dropdownZ;
+    background-color: $selectActiveBg;
+    border-color: $selectActiveBg;
+
+    .select2-results{
+        background-color: $selectActiveBg;
+        border-color: $selectActiveBg;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track-piece {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: $selectActiveItemBg;
+        }
+
+        .select2-result{
+            &.select2-highlighted{
+                background-color: $selectActiveItemBg;
+            }
+
+            .select2-result-label{
+                font-size: 12px;
+                line-height: 20px;
+            }
+        }
+
+    }
+}
+
+.select2-drop-mask {
+    z-index: $dropdownMaskZ;
+}
--- a/css/buttons/_button-control.scss
+++ b/css/buttons/_button-control.scss
@@ -0,0 +1,85 @@
+.button-control {
+    box-sizing: border-box;
+    display: inline-block;
+    border: 1px solid $buttonBorder;
+    vertical-align: baseline;
+    height: 30px;
+    min-width: 60px;
+    padding: 4px 10px;
+    margin: 0;
+    line-height: 1.5em;
+    outline: none;
+    background-color: transparent;
+    float: right;
+    font-size: 14px;
+    margin-left: 10px;
+    color: $buttonColor;
+    font-weight: $buttonFontWeight;
+    @include transition(background-color .1s ease-out);
+
+    &[disabled] {
+        color: #666;
+        cursor: default;
+    }
+
+    &_full-width {
+        margin: 0;
+        width: 100%;
+    }
+
+    &:hover {
+        border: 1px solid $buttonHoverBorder;
+        background-color: $buttonHoverBackground;
+        @include transition(background-color .1s ease-in);
+    }
+
+    &:active {
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
+    }
+
+    &_light {
+        color: $defaultDarkColor;
+        background-color: $buttonLightBackground;
+        border: 1px solid $buttonLightBorder;
+
+        &:hover {
+            border: 1px solid $buttonLightHoverBorder;
+            background-color: $buttonLightHoverBackground;
+        }
+    }
+
+    &_link {
+        color: $buttonLinkColor;
+        background-color: $buttonLinkBackground;
+
+        &:hover {
+            background-color: $buttonLinkBackground;
+        }
+    }
+
+    &_primary {
+        background-color: $primaryButtonBackground;
+        border: 1px solid $primaryButtonBackground;
+        color: $primaryButtonColor !important;
+        font-weight: $primaryButtonFontWeight;
+
+        &:hover {
+            border: 1px solid $primaryButtonHoverBackground;
+            background-color: $primaryButtonHoverBackground;
+        }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
+    }
+
+    &_close {
+        color: $defaultFontColor;
+    }
+    &_submit {
+        color: $linkFontColor;
+        &:hover {
+            color: $linkHoverFontColor;
+        }
+    }
+}
--- a/css/input-control/_input-control.scss
+++ b/css/input-control/_input-control.scss
@@ -0,0 +1,69 @@
+.input-control {
+    padding: 16px 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+    &__text {
+        margin: 8px 0;
+        font-size: 1em
+    }
+
+    &__label {
+        font-size: 1em;
+        font-weight: $labelFontWeight;
+    }
+
+    &__input {
+
+        &:last-child {
+            margin-bottom: inherit;
+        }
+
+        &::selection {
+            background-color: $defaultDarkSelectionColor;
+        }
+    }
+
+    &__em {
+        color: $inputControlEmColor;
+    }
+
+    &__hint {
+        margin-top: 0;
+        font-size: $hintFontSize;
+
+        span {
+            vertical-align: middle;
+        }
+    }
+
+    &__container {
+        position: relative;
+        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        @include flex();
+
+        .button-control {
+            margin: 1px 0 1px 10px;
+        }
+    }
+
+    &__right {
+        position: absolute;
+        right: 0;
+    }
+}
+
+/**
+ * Set a specific color for read only style.
+ */
+input:read-only {
+    color: $readOnlyInputColor;
+}
--- a/css/main.scss
+++ b/css/main.scss
@@ -1,3 +1,9 @@
+/* Functions BEGIN */
+
+@import 'functions';
+
+/* Functions END */
+
 /* Variables BEGIN */

@import 'variables';
@@ -10,6 +16,12 @@

 /* Mixins END */

+/* Animations BEGIN */
+
+@import "animations";
+
+/* Animations END */
+
 /* Fonts BEGIN */

@import 'font';
@@ -22,9 +34,11 @@
@import 'toastr';
@import 'base';
@import 'overlay/overlay';
+@import 'inlay';
+@import 'reload_overlay/reload_overlay';
+@import 'modals/dialog';
+@import 'modals/feedback/feedback';
@import 'videolayout_default';
-@import 'jquery-impromptu';
-@import 'modaldialog';
@import 'notice';
@import 'popup_menu';
@import 'recording';
@@ -38,8 +52,16 @@
@import 'toolbars';
@import 'side_toolbar_container';
@import 'device_settings_dialog';
-@import 'feedback';
@import 'jquery.contextMenu';
@import 'keyboard-shortcuts';
+@import 'redirect_page';
+@import 'input-control/input-control';
+@import 'shortcuts/main';
+@import 'buttons/button-control';
+@import "modals/invite/invite";
+@import "connection-info";
+@import 'aui-components/dropdown';
+@import '404';
+@import 'policy';

-/* Modules END */
+/* Modules END */
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -0,0 +1,78 @@
+.dialog {
+    visibility: visible;
+    height: auto;
+
+    h3 {
+        color: $auiDialogColor;
+    }
+
+    .aui {
+
+        &-icon {
+            color: $auiDialogColor;
+
+            &-small {
+                width: 14px;
+                height: 14px;
+            }
+        }
+
+        &-iconfont-close-dialog {
+            cursor: pointer;
+            right: 20px;
+            position: absolute;
+            top: -49px;
+        }
+
+        &-dialog2 {
+            &-header, &-footer {
+                background-color: $auiDialogBg;
+                border: none;
+            }
+
+            &-header {
+                height: em(58, 12);
+                border-bottom: 1px solid $auiBorderColor;
+
+                h2 {
+                    font-size: em(20, 12);
+                    font-weight: $dialogTitleFontWeight;
+                    color: $auiDialogColor;
+                }
+
+                &-main {
+                    padding-right: 0;
+                }
+            }
+
+            &-footer {
+                border-top: 1px solid $auiBorderColor;
+            }
+
+            &-content {
+                font-size: em(14, 12);
+                min-height: 0;
+                background-color: $auiDialogContentBg;
+                color: $auiDialogColor;
+
+                p,span, h3 {
+                    font-weight: $labelFontWeight;
+                }
+
+                &:last-child {
+                    border-bottom-right-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
+
+                &:first-child {
+                    border-top-right-radius: 5px;
+                    border-top-left-radius: 5px;
+                }
+            }
+        }
+    }
+
+    .input-control:not(:last-child) {
+        border-bottom: 1px solid $auiBorderColor;
+    }
+}
--- a/css/modals/feedback/_feedback.scss
+++ b/css/modals/feedback/_feedback.scss
@@ -0,0 +1,129 @@
+@-webkit-keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+@keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+.shake-rotate {
+    display: inline-block;
+
+    -webkit-animation-duration: .4s;
+    animation-duration: .4s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: shake-rotate;
+    animation-name: shake-rotate;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out
+}
+
+.feedback.aui-dialog2{
+    .aui-dialog2{
+        &-header {
+            background-color: $feedbackContentBg;
+            border-bottom-color: transparent;
+            padding-top: 30px;
+            h2 {
+                color: $feedbackTextColor;
+                text-align: center;
+            }
+        }
+
+        &-content {
+            background-color: $feedbackContentBg;
+            text-align: center;
+            padding: 10px 40px 20px 40px;
+
+            .input-control{
+                &__input {
+                    background-color: $feedbackInputBg;
+                    color: $feedbackInputTextColor;
+
+                    &::-webkit-input-placeholder {
+                        color: $feedbackInputPlaceholderColor;
+                    }
+                    &::-moz-placeholder {  /* Firefox 19+ */
+                        color: $feedbackInputPlaceholderColor;
+                    }
+                    &:-ms-input-placeholder {
+                        color: $feedbackInputPlaceholderColor;
+                    }
+                }
+            }
+
+            .rating {
+                line-height: 1.2;
+                text-align: center;
+                margin-top: 10px;
+
+                .star-label {
+                    height: 16px;
+                    font-size: 14px;
+                    color: $rateStarLabelColor;
+                }
+                .star-btn {
+                    display: inline-block;
+                    color: $rateStarDefault;
+                    font-size: $rateStarSize;
+                    position: relative;
+                    cursor: pointer;
+                    outline: none;
+                    text-decoration: none;
+                    @include transition(all .2s ease);
+
+                    &.starHover,
+                    &.active,
+                    &:hover {
+                        color: $rateStarActivity;
+                    };
+
+                }
+            }
+
+            .details {
+                padding-left: 60px;
+                padding-right: 60px;
+                margin-top: 20px;
+                textarea {
+                    min-height: 100px;
+                }
+            }
+        }
+        &-footer {
+            background-color: $feedbackContentBg;
+            border-top-color: transparent;
+
+            .button-control {
+                color: $feedbackCancelFontColor;
+            }
+        }
+    }
+}
--- a/css/modals/invite/_invite.scss
+++ b/css/modals/invite/_invite.scss
@@ -0,0 +1,7 @@
+/*
+ * Sets the default cursor the remove password link. The link doesn't use
+ * the href attribute, so we need to set the  cursor manually.
+ */
+#inviteDialogRemovePassword {
+    cursor: hand;
+}
--- a/css/overlay/_overlay.scss
+++ b/css/overlay/_overlay.scss
@@ -1,48 +1,31 @@
 .overlay {
-    position: fixed;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    z-index: $overlayZ;
-    background: #21B9FC; /* Old browsers */
-    opacity: 0.75;
-    display: block;
-}
+    &__container {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: $overlayZ;
+        background: $defaultBackground;
+    }

-.overlay_transparent {
-    background: rgba(22, 185, 252, .9);
-}
+    &__content {
+        position: absolute;
+        margin: 0 auto;
+        height: 100%;
+        width: 56%;
+        left: 50%;
+        @include transform(translateX(-50%));

-.overlay_container {
-    width: 100%;
-    height: 100%;
-    position: fixed;
-    z-index: $overlayZ;
-}
+        &_bottom {
+            position: absolute;
+            bottom: 0;
+        }
+    }

-.overlay_content {
-    color: #fff;
-    font-weight: normal;
-    font-size: 20px;
-    text-align: center;
-    width: 400px;
-    height: 250px;
-    top: 50%;
-    left: 50%;
-    position:absolute;
-    margin-top: -125px;
-    margin-left: -200px;
-}
-
-
-.overlay_text_small {
-    font-size: 18px;
-}
-
-.overlay_icon {
-    position: relative;
-    z-index: 1013;
-    float: none;
-    font-size: 100px;
-}
+    &__policy {
+        position: absolute;
+        bottom: 24px;
+        width: 100%;
+    }
+}
--- a/css/reload_overlay/_reload_overlay.scss
+++ b/css/reload_overlay/_reload_overlay.scss
@@ -0,0 +1,17 @@
+.reload_overlay_title {
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.reload_overlay_msg {
+    display: block;
+    font-size: 12px;
+    line-height: 30px;
+}
+
+#reloadProgressBar {
+    width: 180px;
+    margin: 5px auto;
+}
+
--- a/css/ringing/_ringing.scss
+++ b/css/ringing/_ringing.scss
@@ -5,10 +5,15 @@
    width: 100%;
    height: 100%;
    position: fixed;
-    z-index: $overlayZ;
+    z-index: $ringingZ;
    background: linear-gradient(transparent, #000);
    opacity: 0.8;

+    &.solidBG {
+        background: $defaultBackground;
+        opacity: 1;
+    }
+
    &__content {
        position: absolute;
        width: 400px;
@@ -33,4 +38,4 @@
            color: #333;
        }
    }
-}
+}
--- a/css/shortcuts/_main.scss
+++ b/css/shortcuts/_main.scss
@@ -0,0 +1,4 @@
+/* Import shortcuts blocks */
+
+@import 'regular-key';
+@import 'shortcuts-list';
--- a/css/shortcuts/_regular-key.scss
+++ b/css/shortcuts/_regular-key.scss
@@ -0,0 +1,11 @@
+.regular-key {
+    display: table-cell;
+    width: 25px;
+    height: 20px;
+    padding: 0;
+    text-align: center;
+    vertical-align: middle;
+    font-family: $baseFontFamily;
+    color: $defaultDarkColor;
+    font-size: 12px;
+}
--- a/css/shortcuts/_shortcuts-list.scss
+++ b/css/shortcuts/_shortcuts-list.scss
@@ -0,0 +1,12 @@
+.shortcuts-list {
+    padding: 0;
+
+    &__description {
+        margin-left: em(16, 14);
+        vertical-align: top;
+    }
+
+    &__item {
+        margin-bottom: em(7, 14);
+    }
+}
--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -0,0 +1,65 @@
+/**
+* Buttons
+*/
+$buttonBackground: #f5f5f5;
+$buttonHoverBackground: #e9e9e9;
+$buttonBorder: #ccc;
+$buttonHoverBorder: #999;
+$buttonColor: #333;
+
+$buttonLightBackground: #f5f5f5;
+$buttonLightHoverBackground: #e9e9e9;
+$buttonLightBorder: #ccc;
+$buttonLightHoverBorder: #999;
+
+$buttonLinkBackground: transparent;
+$buttonLinkColor: #0090e8;
+
+$primaryButtonBackground: #3572b0;
+$primaryButtonHoverBackground: #2a67a5;
+$primaryButtonColor: #fff;
+$primaryButtonFontWeight: 400;
+
+$buttonShadowColor: #192d4f;
+
+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+
+/**
+* Connection indicator
+**/
+$downloadConnectionIconColor: #4abd04;
+$uploadConnectionIconColor: #ffa800;
+
+/**
+ * Dialog colors
+ **/
+$auiDialogColor: #333;
+$auiDialogBg: #f5f5f5;
+$auiDialogContentBg: #fff;
+$auiBorderColor: #ccc;
+$dialogTitleFontWeight: 400;
+
+// Main controls
+$inputBackground: #fff;
+$inputBorderColor: #ccc;
+$inputColor: #333;
+$placeHolderColor: #a7a7a7;
+$readOnlyInputColor: #a7a7a7;
+$defaultDarkSelectionColor: #ccc;
+$buttonFontWeight: 400;
+$labelFontWeight: 400;
+$hintFontSize: em(13, 14);
+$linkFontColor: #3572b0;
+$linkHoverFontColor: darken(#3572b0, 10%);
+$dropdownColor: #333;
+
+// Popover colors
+$popoverBg: #000;
+$popoverFontColor: #ffffff;
+$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+
+// Toolbar
+$splitterColor: #ccc;
--- a/doc/api.md
+++ b/doc/api.md
@@ -82,6 +82,11 @@ api.executeCommand('toggleContactList', [])
 api.executeCommand('toggleShareScreen', [])
 ```

+* **hangup** - Hangups the call. No arguments are required.
+```
+api.executeCommand('hangup', [])
+```
+
 You can also execute multiple commands using the method ```executeCommands```.
 ```
 api.executeCommands(commands)
@@ -156,6 +161,8 @@ roomName: room //the room name of the conference
 }
 ```

+* **readyToClose** - event notification fired when Jitsi Meet is ready to be closed (hangup operations are completed).
+
 You can also add multiple event listeners by using ```addEventListeners```.
 This method requires one argument of type Object. The object argument must
 have keys with the names of the events and values the listeners of the events.
--- a/doc/coding-style.md
+++ b/doc/coding-style.md
@@ -0,0 +1,84 @@
+# Comments
+
+* Comments documenting the source code are required.
+
+  * Comments from which documentation is automatically generated are **not**
+    subject to case-by-case decisions. Such comments are used, for example, on
+    types and their members. Examples of tools which automatically generate
+    documentation from such comments include JSDoc, Javadoc, Doxygen.
+
+  * Comments which are not automatically processed are strongly encouraged. They
+    are subject to case-by-case decisions. Such comments are often observed in
+    function bodies.
+
+* Comments should be formatted as proper English sentences. Such formatting pays
+  attention to, for example, capitalization and punctuation.
+
+# Duplication
+
+* Don't copy-paste source code. Reuse it.
+
+# Formatting
+
+* Line length is limited to 80 characters.
+
+* Sort by alphabetical order in order to make the addition of new entities as
+  easy as looking a word up in a dictionary. Otherwise, one risks duplicate
+  entries (with conflicting values in the cases of key-value pairs). For
+  example:
+
+  * Within an `import` of multiple names from a module, sort the names in
+    alphabetical order. (Of course, the default name stays first as required by
+    the `import` syntax.)
+
+    ````javascript
+    import {
+        DOMINANT_SPEAKER_CHANGED,
+        JITSI_CLIENT_CONNECTED,
+        JITSI_CLIENT_CREATED,
+        JITSI_CLIENT_DISCONNECTED,
+        JITSI_CLIENT_ERROR,
+        JITSI_CONFERENCE_JOINED,
+        MODERATOR_CHANGED,
+        PEER_JOINED,
+        PEER_LEFT,
+        RTC_ERROR
+    } from './actionTypes';
+    ````
+
+  * Within a group of imports (e.g. groups of imports delimited by an empty line
+    may be: third-party modules, then project modules, and eventually the
+    private files of a module), sort the module names in alphabetical order.
+
+    ````javascript
+    import React, { Component } from 'react';
+    import { connect } from 'react-redux';
+    ````
+
+# Indentation
+
+* Align `switch` and `case`/`default`. Don't indent the `case`/`default` more
+  than its `switch`.
+
+  ````javascript
+  switch (i) {
+  case 0:
+      ...
+      break;
+  default:
+      ...
+  }
+  ````
+
+# Naming
+
+* An abstraction should have one name within the project and across multiple
+  projects. For example:
+
+  * The instance of lib-jitsi-meet's `JitsiConnection` type should be named
+    `connection` or `jitsiConnection` in jitsi-meet-react, not `client`.
+
+  * The class `ReducerRegistry` should be defined in ReducerRegistry.js and its
+    imports in other files should use the same name. Don't define the class
+    `Registry` in ReducerRegistry.js and then import it as `Reducers` in other
+    files.
--- a/doc/debian/jitsi-meet/jitsi-meet.example
+++ b/doc/debian/jitsi-meet/jitsi-meet.example
@@ -20,6 +20,7 @@ server {

    root /usr/share/jitsi-meet;
    index index.html index.htm;
+    error_page 404 /404.html;

    location /config.js {
        alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
--- a/fonts/jitsi.eot
+++ b/fonts/jitsi.eot
--- a/fonts/jitsi.svg
+++ b/fonts/jitsi.svg
@@ -41,4 +41,7 @@
 <glyph unicode="&#xe91b;" glyph-name="contactList" d="M704 746c-46 0-86-38-86-84s40-86 86-86 86 40 86 86-40 84-86 84zM704 512c-82 0-150 68-150 150s68 148 150 148 150-66 150-148-68-150-150-150zM320 746c-46 0-86-38-86-84s40-86 86-86 86 40 86 86-40 84-86 84zM320 512c-82 0-150 68-150 150s68 148 150 148 150-66 150-148-68-150-150-150zM918 278v52c0 24-110 76-214 76-46 0-90-12-128-24 14-16 22-32 22-52v-52h320zM534 278v52c0 24-110 76-214 76s-214-52-214-76v-52h428zM704 470c92 0 278-48 278-140v-116h-940v116c0 92 186 140 278 140 52 0 130-16 192-44 62 28 140 44 192 44z" />
 <glyph unicode="&#xe91c;" glyph-name="toggle-filmstrip" d="M896 896h-768c-46.933 0-85.333-38.4-85.333-85.333v-597.333c0-46.933 38.4-85.333 85.333-85.333h768c46.933 0 85.333 38.4 85.333 85.333v597.333c0 46.933-38.4 85.333-85.333 85.333zM896 213.333h-768v128h768v-128z" />
 <glyph unicode="&#xe91d;" glyph-name="feedback" d="M42.667 128h170.667v512h-170.667v-512zM981.333 597.333c0 46.933-38.4 85.333-85.333 85.333h-269.227l40.533 194.987 1.28 13.653c0 17.493-7.253 33.707-18.773 45.227l-45.227 44.8-280.747-281.173c-15.787-15.36-25.173-36.693-25.173-60.16v-426.667c0-46.933 38.4-85.333 85.333-85.333h384c35.413 0 65.707 21.333 78.507 52.053l128.853 300.8c3.84 9.813 5.973 20.053 5.973 31.147v81.493l-0.427 0.427 0.427 3.413z" />
+<glyph unicode="&#xe91e;" glyph-name="raised-hand" d="M982 790v-620c0-94-78-170-172-170h-310c-46 0-90 18-122 50l-336 342s54 52 56 52c10 8 22 12 34 12 10 0 18-2 26-6 2 0 184-104 184-104v508c0 36 28 64 64 64s64-28 64-64v-300h42v406c0 36 28 64 64 64s64-28 64-64v-406h42v364c0 36 28 64 64 64s64-28 64-64v-364h44v236c0 36 28 64 64 64s64-28 64-64z" />
+<glyph unicode="&#xe91f;" glyph-name="menu-up" d="M512 682l256-256-60-60-196 196-196-196-60 60z" />
+<glyph unicode="&#xe920;" glyph-name="menu-down" d="M708 658l60-60-256-256-256 256 60 60 196-196z" />
 </font></defs></svg>
--- a/fonts/jitsi.ttf
+++ b/fonts/jitsi.ttf
--- a/fonts/jitsi.woff
+++ b/fonts/jitsi.woff
--- a/fonts/selection.json
+++ b/fonts/selection.json
@@ -69,8 +69,10 @@
        "tags": [
          "account_circle"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 11,
        "order": 60,
@@ -93,8 +95,10 @@
        "tags": [
          "autorenew"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 68,
        "order": 84,
@@ -117,8 +121,10 @@
        "tags": [
          "call_end"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 122,
        "order": 63,
@@ -141,8 +147,10 @@
        "tags": [
          "chat_bubble_outline"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 148,
        "order": 61,
@@ -165,8 +173,10 @@
        "tags": [
          "cloud_download"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 164,
        "order": 99,
@@ -189,8 +199,10 @@
        "tags": [
          "mode_edit"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 185,
        "order": 89,
@@ -213,8 +225,10 @@
        "tags": [
          "description"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 206,
        "order": 85,
@@ -237,8 +251,10 @@
        "tags": [
          "dialer_sip"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 215,
        "order": 95,
@@ -261,8 +277,10 @@
        "tags": [
          "eject"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 242,
        "order": 98,
@@ -275,6 +293,58 @@
      "setId": 2,
      "iconIdx": 243
    },
+    {
+      "icon": {
+        "paths": [
+          "M512 342l256 256-60 60-196-196-196 196-60-60z"
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "expand_less"
+        ],
+        "grid": 0,
+        "attrs": []
+      },
+      "attrs": [],
+      "properties": {
+        "id": 256,
+        "order": 106,
+        "ligatures": "expand_less",
+        "prevSize": 32,
+        "code": 59679,
+        "name": "menu-up"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 257
+    },
+    {
+      "icon": {
+        "paths": [
+          "M708 366l60 60-256 256-256-256 60-60 196 196z"
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "expand_more"
+        ],
+        "grid": 0,
+        "attrs": []
+      },
+      "attrs": [],
+      "properties": {
+        "id": 257,
+        "order": 107,
+        "ligatures": "expand_more",
+        "prevSize": 32,
+        "code": 59680,
+        "name": "menu-down"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 258
+    },
    {
      "icon": {
        "paths": [
@@ -285,8 +355,10 @@
        "tags": [
          "fullscreen"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 350,
        "order": 94,
@@ -309,8 +381,10 @@
        "tags": [
          "fullscreen_exit"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 351,
        "order": 92,
@@ -333,8 +407,10 @@
        "tags": [
          "star"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 363,
        "order": 101,
@@ -357,8 +433,10 @@
        "tags": [
          "lock_open"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 473,
        "order": 66,
@@ -381,8 +459,10 @@
        "tags": [
          "lock_outline"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 474,
        "order": 65,
@@ -405,8 +485,10 @@
        "tags": [
          "sync"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 482,
        "order": 67,
@@ -429,8 +511,10 @@
        "tags": [
          "mic"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 492,
        "order": 68,
@@ -453,8 +537,10 @@
        "tags": [
          "mic_none"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 493,
        "order": 69,
@@ -477,8 +563,10 @@
        "tags": [
          "mic_off"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 494,
        "order": 70,
@@ -491,6 +579,32 @@
      "setId": 2,
      "iconIdx": 495
    },
+    {
+      "icon": {
+        "paths": [
+          "M982 234v620c0 94-78 170-172 170h-310c-46 0-90-18-122-50l-336-342s54-52 56-52c10-8 22-12 34-12 10 0 18 2 26 6 2 0 184 104 184 104v-508c0-36 28-64 64-64s64 28 64 64v300h42v-406c0-36 28-64 64-64s64 28 64 64v406h42v-364c0-36 28-64 64-64s64 28 64 64v364h44v-236c0-36 28-64 64-64s64 28 64 64z"
+        ],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "pan_tool"
+        ],
+        "grid": 0,
+        "attrs": []
+      },
+      "attrs": [],
+      "properties": {
+        "id": 539,
+        "order": 105,
+        "ligatures": "pan_tool",
+        "prevSize": 32,
+        "code": 59678,
+        "name": "raised-hand"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 540
+    },
    {
      "icon": {
        "paths": [
@@ -501,8 +615,10 @@
        "tags": [
          "people_outline"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 549,
        "order": 100,
@@ -525,8 +641,10 @@
        "tags": [
          "person_add"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 559,
        "order": 87,
@@ -549,8 +667,10 @@
        "tags": [
          "play_circle_outline"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 590,
        "order": 82,
@@ -573,8 +693,10 @@
        "tags": [
          "settings"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 665,
        "order": 81,
@@ -597,8 +719,10 @@
        "tags": [
          "star_border"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 717,
        "order": 76,
@@ -621,8 +745,10 @@
        "tags": [
          "tv"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 783,
        "order": 93,
@@ -645,8 +771,10 @@
        "tags": [
          "videocam"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 798,
        "order": 77,
@@ -669,8 +797,10 @@
        "tags": [
          "videocam_off"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 799,
        "order": 78,
@@ -693,8 +823,10 @@
        "tags": [
          "volume_up"
        ],
-        "grid": 0
+        "grid": 0,
+        "attrs": []
      },
+      "attrs": [],
      "properties": {
        "id": 821,
        "order": 79,
--- a/index.android.js
+++ b/index.android.js
@@ -0,0 +1 @@
+export * from './react/index.native';
--- a/index.html
+++ b/index.html
@@ -6,6 +6,37 @@
    <script>
        window.indexLoadedTime = window.performance.now();
        console.log("(TIME) index.html loaded:\t", indexLoadedTime);
+        // XXX the code below listeners for errors and displays an error message
+        // in the document body when any of the required files fails to load.
+        // The intention is to prevent from displaying broken page.
+        var criticalFiles = [
+            "config.js",
+            "utils.js",
+            "do_external_connect.js",
+            "interface_config.js",
+            "lib-jitsi-meet.min.js",
+            "app.bundle.min.js",
+            "all.css"
+        ];
+        var loadErrHandler = function(e) {
+            var target = e.target;
+            // Error on <script> and <link>(CSS)
+            // <script> will have .src and <link> .href
+            var fileRef = (target.src ? target.src : target.href);
+            if (("SCRIPT" === target.tagName || "LINK" === target.tagName)
+                && criticalFiles.some(
+                    function(file) { return fileRef.indexOf(file) !== -1 })) {
+                window.onload = function() {
+                    document.body.innerHTML
+                        = "The application failed to load, missing file: "
+                            + fileRef;
+                };
+                window.removeEventListener(
+                    'error', loadErrHandler, true /* capture phase */);
+            }
+        }
+        window.addEventListener(
+            'error', loadErrHandler, true /* capture phase type of listener */);
    </script>
    <script><!--#include virtual="/config.js" --></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
    <script src="utils.js?v=1"></script>
@@ -30,15 +61,15 @@
            <a class="poweredby" href="http://jitsi.org" target="_new" ><span data-i18n="poweredby"></span> jitsi.org</a>

            <div id="enter_room_container">
-                    <div id="enter_room_form" >
-                        <div id="domain_name"></div>
-                        <div id="enter_room">
-                            <input id="enter_room_field" type="text" autofocus/>
-                            <div class="icon-reload" id="reload_roomname"></div>
-                            <input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />
+                <div id="enter_room_form" >
+                    <div id="domain_name"></div>
+                    <div id="enter_room">
+                        <input id="enter_room_field" type="text" autofocus/>
+                        <div class="icon-reload" id="reload_roomname"></div>
+                        <input id="enter_room_button" type="button" data-i18n="[value]welcomepage.go" value="GO" />

-                        </div>
                    </div>
+                </div>
            </div>
            <div id="brand_header"></div>
            <input type='checkbox' name='checkbox' id="disable_welcome"/>
@@ -100,119 +131,19 @@
                <div id="notice" class="notice" style="display: none">
                    <span id="noticeText" class="noticeText"></span>
                </div>
-                <span id="mainToolbar" class="toolbar"></span>
+                <div id="mainToolbar" class="toolbar"></div>
        </div>
        <div id="subject" class="hide"></div>
-        <div id="extendedToolbar" class="toolbar">
-            <a class="button" id="toolbar_button_profile" data-container="body" data-placement="right" data-i18n="[content]toolbar.profile" content="Edit your profile">
-                <img id="avatar" src="images/avatar2.png"/>
-            </a>
-            <span id="authentication" class="authentication" style="display: none">
-                <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
-                <ul class="loginmenu extendedToolbarPopup">
-                    <span class="loginmenuPadding"></span>
-                    <li id="toolbar_auth_identity"></li>
-                    <li id="toolbar_button_login">
-                        <a class="authButton" data-i18n="toolbar.login"></a>
-                    </li>
-                    <li id="toolbar_button_logout">
-                        <a class="authButton" data-i18n="toolbar.logout"></a>
-                    </li>
-                </ul>
-            </span>
-            <a class="button icon-contactList" id="toolbar_contact_list" data-container="body" data-toggle="popover" data-placement="right" shortcut="contactlistpopover"  data-i18n="[content]bottomtoolbar.contactlist" content="Open / close contact list">
-                <span id="numberOfParticipants"></span>
-            </a>
-            <a class="button icon-chat" id="toolbar_button_chat" data-container="body" data-toggle="popover" shortcut="toggleChatPopover" data-placement="right" data-i18n="[content]toolbar.chat" content="Open / close chat">
-                <span id="unreadMessages"></span>
-            </a>
-            <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="right" style="display: none"></a>
-            <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
-            <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="right" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
-            <a class="button icon-shared-video" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="right" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
-                <ul id="sharedVideoMutedPopup" class="loginmenu extendedToolbarPopup">
-                    <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
-                </ul>
-            </a>
-            <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="right" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>
-            <a class="button icon-dialpad" id="toolbar_button_dialpad" data-container="body" data-toggle="popover" data-placement="right" content="Open dialpad" data-i18n="[content]toolbar.dialpad" style="display: none"></a>
-            <a class="button icon-settings" id="toolbar_button_settings" data-container="body" data-toggle="popover" data-placement="right" content="Settings" data-i18n="[content]toolbar.Settings"></a>
-            <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="right" shortcut="toggleFullscreenPopover" data-i18n="[content]toolbar.fullscreen" content="Enter / Exit Full Screen"></a>
-            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" data-toggle="popover" shortcut="filmstripPopover" data-placement="right" data-i18n="[content]toolbar.filmstrip" content="Show / hide videos"></a>
-            <a class="button icon-feedback" id="feedbackButton" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[content]feedback"></a>
-            <div id="sideToolbarContainer">
-                <div id="profile_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="profile.title"></div>
-                    <div class="sideToolbarBlock first">
-                        <label class="first" data-i18n="profile.setDisplayNameLabel"></label>
-                        <input type="text" id="setDisplayName" data-i18n="[placeholder]settings.name" placeholder="Name">
-                    </div>
-                    <div class="sideToolbarBlock">
-                        <label data-i18n="profile.setEmailLabel"></label>
-                        <input type="text" id="setEmail" placeholder="Enter e-mail">
-                    </div>
-                </div>
-                <div id="chat_container" class="sideToolbarContainer__inner">
-                    <div id="nickname">
-                        <span data-i18n="chat.nickname.title"></span>
-                        <form>
-                            <input type='text' id="nickinput" data-i18n="[placeholder]chat.nickname.popover" autofocus>
-                        </form>
-                    </div>

-                    <div id="chatconversation"></div>
-                    <audio id="chatNotification" src="sounds/incomingMessage.wav" preload="auto"></audio>
-                    <textarea id="usermsg" data-i18n="[placeholder]chat.messagebox" autofocus></textarea>
-                    <div id="smileysarea">
-                        <div id="smileys" id="toggle_smileys">
-                            <img src="images/smile.svg"/>
-                        </div>
-                    </div>
-                </div>
-                <div id="contacts_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="contactlist"></div>
-                    <ul id="contacts"></ul>
-                </div>
-                <div id="settings_container" class="sideToolbarContainer__inner">
-                    <div class="title" data-i18n="settings.title"></div>
-                    <select id="languages_selectbox" class="first hide"></select>
-                    <div id="deviceOptionsTitle" class="subTitle hide" data-i18n="settings.audioVideo"></div>
-                    <div id="devicesOptions" class="hide">
-                        <div class="sideToolbarBlock first">
-                            <label class="first" data-i18n="settings.selectCamera"></label>
-                            <select id="selectCamera"></select>
-                        </div>
-                        <div class="sideToolbarBlock">
-                            <label data-i18n="settings.selectMic"></label>
-                            <select  id="selectMic"></select>
-                        </div>
-                        <div class="sideToolbarBlock">
-                            <label data-i18n="settings.selectAudioOutput"></label>
-                            <select  id="selectAudioOutput"></select>
-                        </div>
-                    </div>
-                    <div id="moderatorOptionsTitle" class="subTitle hide" data-i18n="settings.moderator"></div>
-                    <div id = "startMutedOptions" class="hide">
-                        <div class="sideToolbarBlock first">
-                            <input type="checkbox" id="startAudioMuted">
-                            <label class="startMutedLabel" for="startAudioMuted" data-i18n="settings.startAudioMuted"></label>
-                        </div>
-                        <div class="sideToolbarBlock">
-                            <input type="checkbox" id="startVideoMuted">
-                            <label class="startMutedLabel" for="startVideoMuted" data-i18n="settings.startVideoMuted"></label>
-                        </div>
-                    </div>
-                    <div id="followMeOptions" class="sideToolbarBlock hide">
-                        <input type="checkbox" id="followMeCheckBox">
-                        <label class="followMeLabel" for="followMeCheckBox" data-i18n="settings.followMe"></label>
-                    </div>
-                    <a id="downloadlog" data-container="body" data-toggle="popover" data-placement="right" data-i18n="[data-content]downloadlogs" ><i class="icon-download"></i></a>
-                </div>
-            </div>
+        <div id="extendedToolbar" class="toolbar">
+            <div id="extendedToolbarButtons"></div>
+
+            <a class="button icon-feedback" id="feedbackButton"></a>
+
+            <div id="sideToolbarContainer"></div>
        </div>
        <div id="videospace">
            <div id="largeVideoContainer" class="videocontainer">
-                <div id="presentation"></div>
                <div id="sharedVideo"><div id="sharedVideoIFrame"></div></div>
                <div id="etherpad"></div>
                <a target="_new"><div class="watermark leftwatermark"></div></a>
@@ -221,27 +152,31 @@
                    <span data-i18n="poweredby"></span> jitsi.org
                </a>
                <div id="dominantSpeaker">
+                    <div class="dynamic-shadow"></div>
                    <img id="dominantSpeakerAvatar" src=""/>
-                    <canvas id="dominantSpeakerAudioLevel"></canvas>
                </div>
+                <span id="remoteConnectionMessage"></span>
                <div id="largeVideoWrapper">
                    <video id="largeVideo" muted="true" autoplay></video>
                </div>
-                <span id="videoConnectionMessage"></span>
-                <span id="videoResolutionLabel">HD</span>
-                <span id="recordingLabel" class="centeredVideoLabel">
+                <span id="localConnectionMessage"></span>
+                <span id="videoResolutionLabel" class="video-state-indicator moveToCorner">HD</span>
+                <span id="recordingLabel" class="video-state-indicator centeredVideoLabel">
                    <span id="recordingLabelText"></span>
                    <img id="recordingSpinner" class="recordingSpinner" src="images/spin.svg"></img>
                </span>
            </div>

            <div id="remoteVideos">
-                <span id="localVideoContainer" class="videocontainer">
+                <span id="localVideoContainer" class="videocontainer videocontainer_small">
+                    <div class="videocontainer__background"></div>
                    <span id="localVideoWrapper">
                        <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
                    </span>
                    <audio id="localAudio" autoplay muted></audio>
-                    <span class="focusindicator"></span>
+                    <div class="videocontainer__toolbar"></div>
+                    <div class="videocontainer__toptoolbar"></div>
+                    <div class="videocontainer__hoverOverlay"></div>
                </span>
                <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
                <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
@@ -249,9 +184,8 @@
        </div>
    </div>
    <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
-        <div class="header"><h3 data-i18n="keyboardShortcuts.keyboardShortcuts"></h3></div>
        <div class="content">
-            <ul id="keyboard-shortcuts-list" class="item">
+            <ul id="keyboard-shortcuts-list" class="shortcuts-list">
            </ul>
        </div>
    </div>
--- a/index.ios.js
+++ b/index.ios.js
@@ -0,0 +1 @@
+export * from './react/index.native';
--- a/interface_config.js
+++ b/interface_config.js
@@ -1,4 +1,4 @@
-var interfaceConfig = {
+var interfaceConfig = { // eslint-disable-line no-unused-vars
    CANVAS_EXTRA: 104,
    CANVAS_RADIUS: 0,
    SHADOW_COLOR: '#ffffff',
@@ -16,22 +16,59 @@ var interfaceConfig = {
    SHOW_POWERED_BY: false,
    GENERATE_ROOMNAMES_ON_WELCOME_PAGE: true,
    APP_NAME: "Jitsi Meet",
+    LANG_DETECTION: false,    // Allow i18n to detect the system language
    INVITATION_POWERED_BY: true,
+    /**
+     * If we should show authentication block in profile
+     */
+    AUTHENTICATION_ENABLE: true,
    // the toolbar buttons line is intentionally left in one line, to be able
    // to easily override values or remove them using regex
-    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'hangup'], // jshint ignore:line
-    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'invite', 'chat', 'etherpad', 'sharedvideo', 'fullscreen', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    /**
+     * The index of the splitter button in the main toolbar. The splitter
+     * button is a button in the toolbar that will be applied a special styling
+     * visually dividing the toolbar buttons.
+     */
+    //MAIN_TOOLBAR_SPLITTER_INDEX: -1,
+    /**
+     * the toolbar buttons line is intentionally left in one line, to be able
+     * to easily override values or remove them using regex
+     */
+    TOOLBAR_BUTTONS: [
+        //main toolbar
+        'microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup',
+        //extended toolbar
+        'profile', 'contacts', 'chat', 'recording', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'raisehand', 'filmstrip'], // jshint ignore:line
+    /**
+     * Main Toolbar Buttons
+     * All of them should be in TOOLBAR_BUTTONS
+     */
+    MAIN_TOOLBAR_BUTTONS: ['microphone', 'camera', 'desktop', 'invite', 'fullscreen', 'hangup'], // jshint ignore:line
    SETTINGS_SECTIONS: ['language', 'devices', 'moderator'],
    // Determines how the video would fit the screen. 'both' would fit the whole
    // screen, 'height' would fit the original video height to the height of the
    // screen, 'width' would fit the original video width to the width of the
    // screen respecting ratio.
    VIDEO_LAYOUT_FIT: 'both',
+    SHOW_CONTACTLIST_AVATARS: false,
    /**
     * Whether to only show the filmstrip (and hide the toolbar).
     */
    filmStripOnly: false,
    RANDOM_AVATAR_URL_PREFIX: false,
    RANDOM_AVATAR_URL_SUFFIX: false,
-    FILM_STRIP_MAX_HEIGHT: 120
-};
+    FILM_STRIP_MAX_HEIGHT: 120,
+    LOCAL_THUMBNAIL_RATIO_WIDTH: 16,
+    LOCAL_THUMBNAIL_RATIO_HEIGHT: 9,
+    REMOTE_THUMBNAIL_RATIO_WIDTH: 1,
+    REMOTE_THUMBNAIL_RATIO_HEIGHT: 1,
+    // Enables feedback star animation.
+    ENABLE_FEEDBACK_ANIMATION: false,
+    DISABLE_FOCUS_INDICATOR: false,
+    DISABLE_DOMINANT_SPEAKER_INDICATOR: false,
+    // disables the ringing sound when the RingOverlay is shown.
+    DISABLE_RINGING: false,
+    AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
+    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+    POLICY_LOGO: null
+};
--- a/ios/Podfile
+++ b/ios/Podfile
@@ -0,0 +1,12 @@
+# Uncomment the next line to define a global platform for your project
+# platform :ios, '9.0'
+
+target 'jitsi-meet-react' do
+  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
+  # use_frameworks!
+
+  # Pods for jitsi-meet-react
+  pod 'Crashlytics'
+  pod 'Fabric'
+
+end
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -0,0 +1,16 @@
+PODS:
+  - Crashlytics (3.8.3):
+    - Fabric (~> 1.6.3)
+  - Fabric (1.6.11)
+
+DEPENDENCIES:
+  - Crashlytics
+  - Fabric
+
+SPEC CHECKSUMS:
+  Crashlytics: 2b6dbe138a42395577cfa73dfa1aa7248cadf39e
+  Fabric: 5911403591946b8228ab1c51d98f1d7137e863c6
+
+PODFILE CHECKSUM: 672d557f679f28c07b3364884b4580e605000f01
+
+COCOAPODS: 1.1.1
--- a/ios/app/AppDelegate.h
+++ b/ios/app/AppDelegate.h
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import <UIKit/UIKit.h>
+
+@interface AppDelegate : UIResponder <UIApplicationDelegate>
+
+@property (nonatomic, strong) UIWindow *window;
+
+@end
--- a/ios/app/AppDelegate.m
+++ b/ios/app/AppDelegate.m
@@ -0,0 +1,69 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+#import "AppDelegate.h"
+#import <Crashlytics/Crashlytics.h>
+#import <Fabric/Fabric.h>
+#import "RCTBundleURLProvider.h"
+#import "RCTLinkingManager.h"
+#import "RCTRootView.h"
+
+@implementation AppDelegate
+
+// https://facebook.github.io/react-native/docs/linking.html
+- (BOOL)application:(UIApplication *)application
+continueUserActivity:(NSUserActivity *)userActivity
+ restorationHandler:(void (^)(NSArray *restorableObjects))restorationHandler
+{
+  return [RCTLinkingManager application:application
+                   continueUserActivity:userActivity
+                     restorationHandler:restorationHandler];
+}
+
+- (BOOL)application:(UIApplication *)application
+didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  [Fabric with:@[[Crashlytics class]]];
+
+  NSURL *jsCodeLocation
+    = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios"
+                                                     fallbackResource:nil];
+  RCTRootView *rootView
+    = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
+                                  moduleName:@"App"
+                           initialProperties:nil
+                               launchOptions:launchOptions];
+
+  // Set a background color which is in accord with the JavaScript and Android
+  // parts of the application and causes less perceived visual flicker than the
+  // default background color.
+  rootView.backgroundColor
+    = [[UIColor alloc] initWithRed:.07f green:.07f blue:.07f alpha:1];
+
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  UIViewController *rootViewController = [UIViewController new];
+  rootViewController.view = rootView;
+  self.window.rootViewController = rootViewController;
+  [self.window makeKeyAndVisible];
+  return YES;
+}
+
+// https://facebook.github.io/react-native/docs/linking.html
+- (BOOL)application:(UIApplication *)application
+            openURL:(NSURL *)url
+  sourceApplication:(NSString *)sourceApplication
+        annotation:(id)annotation
+{
+  return [RCTLinkingManager application:application
+                                openURL:url
+                      sourceApplication:sourceApplication
+                             annotation:annotation];
+}
+
+@end
--- a/ios/app/Base.lproj/LaunchScreen.xib
+++ b/ios/app/Base.lproj/LaunchScreen.xib
@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="7702" systemVersion="14D136" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES">
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="7701"/>
+        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
+    </dependencies>
+    <objects>
+        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
+        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
+        <view contentMode="scaleToFill" id="iN0-l3-epB">
+            <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+            <subviews>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="8ie-xW-0ye">
+                    <rect key="frame" x="20" y="439" width="441" height="21"/>
+                    <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+                <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Jitsi Meet" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="kId-c2-rCX">
+                    <rect key="frame" x="20" y="140" width="441" height="43"/>
+                    <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
+                    <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
+                    <nil key="highlightedColor"/>
+                </label>
+            </subviews>
+            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <constraints>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="bottom" multiplier="1/3" constant="1" id="5cJ-9S-tgC"/>
+                <constraint firstAttribute="centerX" secondItem="kId-c2-rCX" secondAttribute="centerX" id="Koa-jz-hwk"/>
+                <constraint firstAttribute="bottom" secondItem="8ie-xW-0ye" secondAttribute="bottom" constant="20" id="Kzo-t9-V3l"/>
+                <constraint firstItem="8ie-xW-0ye" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="MfP-vx-nX0"/>
+                <constraint firstAttribute="centerX" secondItem="8ie-xW-0ye" secondAttribute="centerX" id="ZEH-qu-HZ9"/>
+                <constraint firstItem="kId-c2-rCX" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" constant="20" symbolic="YES" id="fvb-Df-36g"/>
+            </constraints>
+            <nil key="simulatedStatusBarMetrics"/>
+            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
+            <point key="canvasLocation" x="548" y="455"/>
+        </view>
+    </objects>
+</document>
--- a/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-29@2x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-29@2x.png
--- a/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-29@3x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-29@3x.png
--- a/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-40@2x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-40@2x.png
--- a/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-40@3x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-40@3x.png
--- a/Show More
+++ b/Show More