ref(config): move loggingConfig to config.js

Merge pull request #1176 from jitsi/net_or_infra
Add 'isNetworkFailure' argument to PageReloadOverlay
2026-05-30 05:47:51 +00:00 · 2016-12-01 16:59:39 -06:00 · 2016-12-01 16:57:39 -06:00 · 2016-12-01 15:55:00 -06:00 · 2016-12-01 11:38:44 -06:00 · 2016-12-01 11:38:44 -06:00
225 changed files with 7219 additions and 4617 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -8,3 +8,6 @@ indent_size = 4
 indent_style = space
 max_line_length = 80
 trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab
--- a/.jshintignore
+++ b/.jshintignore
@@ -1,3 +1,4 @@
+build/
 debian/
 libs/
 node_modules/
--- 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 class="link" href="/">here</a></p>
+    </div>
+</body>
+</html>
--- a/analytics.js
+++ b/analytics.js
@@ -27,5 +27,7 @@
        action + '.' + data.browserName, label, value);
  };

-  ctx.Analytics = Analytics;
+  if(typeof ctx.analyticsHandlers === "undefined")
+    ctx.analyticsHandlers = [];
+  ctx.analyticsHandlers.push(Analytics);
 }(window));
--- a/android/app/build.gradle
+++ b/android/app/build.gradle
@@ -1,4 +1,15 @@
-apply plugin: "com.android.application"
+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

@@ -65,7 +76,7 @@ import com.android.build.OutputFile
 * ]
 */

-apply from: "../../node_modules/react-native/react.gradle"
+apply from: '../../node_modules/react-native/react.gradle'

 /**
 * Set this to true to create two separate APKs instead of one:
@@ -84,24 +95,24 @@ def enableProguardInReleaseBuilds = false

 android {
    compileSdkVersion 23
-    buildToolsVersion "23.0.1"
+    buildToolsVersion '23.0.1'

    defaultConfig {
-        applicationId "org.jitsi.jitsi_meet_react"
+        applicationId 'org.jitsi.jitsi_meet_react'
        minSdkVersion 16
        targetSdkVersion 22
        versionCode 1
-        versionName "1.0"
+        versionName '1.0'
        ndk {
-            abiFilters "armeabi-v7a", "x86"
+            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"
+            exclude 'lib/x86_64/libjingle_peerconnection_so.so'
+            exclude 'lib/arm64-v8a/libjingle_peerconnection_so.so'
        }
    }
    splits {
@@ -109,13 +120,13 @@ android {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
-            include "armeabi-v7a", "x86"
+            include 'armeabi-v7a', 'x86'
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
-            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    // applicationVariants are e.g. debug, release
@@ -123,7 +134,7 @@ android {
        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 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 =
@@ -133,19 +144,27 @@ android {
    }
 }

-if (project.hasProperty("JITSI_SIGNING")
-        && new File(project.property("JITSI_SIGNING")).exists()) {
-    apply from: project.property("JITSI_SIGNING");
+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:+"  // From node_modules
+    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) {
--- a/android/app/src/main/AndroidManifest.xml
+++ b/android/app/src/main/AndroidManifest.xml
@@ -29,10 +29,12 @@
        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" />
-            <category android:name="android.intent.category.LAUNCHER" />
            <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" />
@@ -41,5 +43,8 @@
      </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/FontAwesome.ttf
+++ b/android/app/src/main/assets/fonts/FontAwesome.ttf
--- a/react/features/base/fontIcons/fonts/jitsi.ttf
+++ b/react/features/base/fontIcons/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
@@ -1,8 +1,11 @@
 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 {
    /**
@@ -43,4 +46,11 @@ public class MainActivity extends ReactActivity {
    protected String getMainComponentName() {
        return "App";
    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Fabric.with(this, new Crashlytics());
+    }
 }
--- 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/mipmap-xxxhdpi/ic_launcher.png
+++ b/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
--- a/app.js
+++ b/app.js
@@ -1,5 +1,6 @@
-/* global $, config, getRoomName */
+/* global $, config, getRoomName, loggingConfig, JitsiMeetJS */
 /* application specific logic */
+const logger = require("jitsi-meet-logger").getLogger(__filename);

 import "babel-polyfill";
 import "jquery";
@@ -18,16 +19,24 @@ import 'aui-experimental-css';

 window.toastr = require("toastr");

+const Logger = require("jitsi-meet-logger");
+const LogCollector = Logger.LogCollector;
+import JitsiMeetLogStorage from "./modules/util/JitsiMeetLogStorage";
+
 import URLProcessor from "./modules/config/URLProcessor";
 import RoomnameGenerator from './modules/util/RoomnameGenerator';

 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
+import ConferenceUrl from './modules/URL/ConferenceUrl';
 import API from './modules/API/API';

 import UIEvents from './service/UI/UIEvents';
-import getTokenData from "./modules/TokenData/TokenData";
+import getTokenData from "./modules/tokendata/TokenData";
+import translation from "./modules/translation/translation";
+
+const ConferenceEvents = JitsiMeetJS.events.conference;

 /**
 * Tries to push history state with the following parameters:
@@ -40,13 +49,25 @@ function pushHistoryState(roomName, URL) {
            'VideoChat', `Room: ${roomName}`, URL
        );
    } catch (e) {
-        console.warn("Push history state failed with parameters:",
+        logger.warn("Push history state failed with parameters:",
            'VideoChat', `Room: ${roomName}`, URL, e);
        return e;
    }
    return null;
 }

+/**
+ * Replaces current history state(replaces the URL displayed by the browser).
+ * @param {string} newUrl the URL string which is to be displayed by the browser
+ * to the user.
+ */
+function replaceHistoryState (newUrl) {
+    if (window.history
+        && typeof window.history.replaceState === 'function') {
+        window.history.replaceState({}, document.title, newUrl);
+    }
+}
+
 /**
 * Builds and returns the room name.
 */
@@ -64,6 +85,36 @@ function buildRoomName () {
    return roomName;
 }

+/**
+ * Adjusts the logging levels.
+ * @private
+ */
+function configureLoggingLevels () {
+    // NOTE The library Logger is separated from the app loggers, so the levels
+    // have to be set in two places
+
+    // Set default logging level
+    const defaultLogLevel
+        = loggingConfig.defaultLogLevel || JitsiMeetJS.logLevels.TRACE;
+    Logger.setLogLevel(defaultLogLevel);
+    JitsiMeetJS.setLogLevel(defaultLogLevel);
+
+    // NOTE console was used on purpose here to go around the logging
+    // and always print the default logging level to the console
+    console.info("Default logging level set to: " + defaultLogLevel);
+
+    // Set log level for each logger
+    if (loggingConfig) {
+        Object.keys(loggingConfig).forEach(function(loggerName) {
+            if ('defaultLogLevel' !== loggerName) {
+                const level = loggingConfig[loggerName];
+                Logger.setLogLevelById(level, loggerName);
+                JitsiMeetJS.setLogLevelById(level, loggerName);
+            }
+        });
+    }
+}
+
 const APP = {
    // Used by do_external_connect.js if we receive the attach data after
    // connect was already executed. status property can be "initialized",
@@ -82,14 +133,44 @@ const APP = {
    UI,
    settings,
    conference,
+    translation,
+    /**
+     * The log collector which captures JS console logs for this app.
+     * @type {LogCollector}
+     */
+    logCollector: null,
+    /**
+     * Indicates if the log collector has been started (it will not be started
+     * if the welcome page is displayed).
+     */
+    logCollectorStarted : false,
+    /**
+     * After the APP has been initialized provides utility methods for dealing
+     * with the conference room URL(address).
+     * @type ConferenceUrl
+     */
+    ConferenceUrl : null,
    connection: null,
    API,
    init () {
+        this.initLogging();
        this.keyboardshortcut =
            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
        this.configFetch = require("./modules/config/HttpConfigFetch");
        this.tokenData = getTokenData();
+    },
+    initLogging () {
+        // Adjust logging level
+        configureLoggingLevels();
+        // Create the LogCollector and register it as the global log transport.
+        // It is done early to capture as much logs as possible. Captured logs
+        // will be cached, before the JitsiMeetLogStorage gets ready (statistics
+        // module is initialized).
+        if (!this.logCollector && !loggingConfig.disableLogCollector) {
+            this.logCollector = new LogCollector(new JitsiMeetLogStorage());
+            Logger.addGlobalTransport(this.logCollector);
+            JitsiMeetJS.addGlobalLogTransport(this.logCollector);
+        }
    }
 };

@@ -107,21 +188,64 @@ function setTokenData() {

 function init() {
    setTokenData();
-    var isUIReady = APP.UI.start();
+    // Initialize the conference URL handler
+    APP.ConferenceUrl = new ConferenceUrl(window.location);
+    // Clean up the URL displayed by the browser
+    replaceHistoryState(APP.ConferenceUrl.getInviteUrl());
+
+    // TODO The execution of the mobile app starts from react/index.native.js.
+    // Similarly, the execution of the Web app should start from
+    // react/index.web.js for the sake of consistency and ease of understanding.
+    // Temporarily though because we are at the beginning of introducing React
+    // into the Web app, allow the execution of the Web app to start from app.js
+    // in order to reduce the complexity of the beginning step.
+    require('./react');
+
+    const isUIReady = APP.UI.start();
    if (isUIReady) {
-        APP.conference.init({roomName: buildRoomName()}).then(function () {
+        APP.conference.init({roomName: buildRoomName()}).then(() => {
+
+            if (APP.logCollector) {
+                // Start the LogCollector's periodic "store logs" task only if
+                // we're in the conference and not on the welcome page. This is
+                // determined by the value of "isUIReady" const above.
+                APP.logCollector.start();
+                APP.logCollectorStarted = true;
+                // Make an attempt to flush in case a lot of logs have been
+                // cached, before the collector was started.
+                APP.logCollector.flush();
+
+                // This event listener will flush the logs, before
+                // the statistics module (CallStats) is stopped.
+                //
+                // NOTE The LogCollector is not stopped, because this event can
+                // be triggered multiple times during single conference
+                // (whenever statistics module is stopped). That includes
+                // the case when Jicofo terminates the single person left in the
+                // room. It will then restart the media session when someone
+                // eventually join the room which will start the stats again.
+                APP.conference.addConferenceListener(
+                    ConferenceEvents.BEFORE_STATISTICS_DISPOSED,
+                    () => {
+                        if (APP.logCollector) {
+                            APP.logCollector.flush();
+                        }
+                    }
+                );
+            }
+
            APP.UI.initConference();

-            APP.UI.addListener(UIEvents.LANG_CHANGED, function (language) {
+            APP.UI.addListener(UIEvents.LANG_CHANGED, language => {
                APP.translation.setLanguage(language);
                APP.settings.setLanguage(language);
            });

            APP.keyboardshortcut.init();
-        }).catch(function (err) {
+        }).catch(err => {
            APP.UI.hideRingOverLay();
            APP.API.notifyConferenceLeft(APP.conference.roomName);
-            console.error(err);
+            logger.error(err);
        });
    }
 }
@@ -145,7 +269,7 @@ function obtainConfigAndInit() {
                if (success) {
                    var now = APP.connectionTimes["configuration.fetched"] =
                        window.performance.now();
-                    console.log("(TIME) configuration fetched:\t", now);
+                    logger.log("(TIME) configuration fetched:\t", now);
                    init();
                } else {
                    // Show obtain config error,
@@ -165,9 +289,10 @@ function obtainConfigAndInit() {

 $(document).ready(function () {
    var now = APP.connectionTimes["document.ready"] = window.performance.now();
-    console.log("(TIME) document ready:\t", now);
+    logger.log("(TIME) document ready:\t", now);

    URLProcessor.setConfigParametersFromUrl();
+
    APP.init();

    APP.translation.init(settings.getLanguage());
@@ -178,6 +303,11 @@ $(document).ready(function () {
 });

 $(window).bind('beforeunload', function () {
+    // Stop the LogCollector
+    if (APP.logCollectorStarted) {
+        APP.logCollector.stop();
+        APP.logCollectorStarted = false;
+    }
    APP.API.dispose();
 });

--- a/authError.html
+++ b/authError.html
@@ -1,6 +1,7 @@
 <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>
--- a/close.html
+++ b/close.html
@@ -1,8 +1,22 @@
 <html>
 <head>
    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+    <script><!--#include virtual="/interface_config.js" --></script>
+    <script src="close.js"></script>
 </head>
 <body>
-    <div class="redirectPageMessage">Thank you for your feedback!</div>
+<div class="redirectPageMessage">
+    <div class="thanks-msg">
+        <p>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>
+</html>
--- a/close.js
+++ b/close.js
@@ -0,0 +1,48 @@
+/* global interfaceConfig */
+//list of tips
+var hints = [
+    "You can pin participants by clicking on their thumbnails.",// jshint ignore:line
+    "You can tell others you have something to say by using the \"Raise Hand\" feature",// jshint ignore:line
+    "You can learn about key shortcuts by pressing Shift+?",// jshint ignore:line
+    "You can learn more about the state of everyone's connection by hovering on the bars in their thumbnail",// jshint ignore:line
+    "You can hide all thumbnails by using the button in the bottom right corner"// jshint ignore:line
+];
+
+/**
+ * Get a random hint meessage from hint array.
+ *
+ * @return {string} the hint message.
+ */
+function getHint(){
+    var l = hints.length - 1;
+    var n = Math.round(Math.random() * l);
+
+    return hints[n];
+}
+
+/**
+ * Inserts text message
+ * into DOM element
+ *
+ * @param id {string} element identificator
+ * @param msg {string} text message
+ */
+// eslint-disable-next-line no-unused-vars
+function insertTextMsg(id, msg){
+    var el = document.getElementById(id);
+
+    if (el)
+        el.innerText = msg;
+}
+
+/**
+ * Sets the hint and thanks messages. Will be executed on load event.
+ */
+function onLoad() {
+    //Works only for close2.html because close.html doesn't have this element.
+    insertTextMsg('thanksMessage',
+        'Thank you for using ' + interfaceConfig.APP_NAME);
+    insertTextMsg('hintMessage', getHint());
+}
+
+window.onload = onLoad;
--- a/close2.html
+++ b/close2.html
@@ -0,0 +1,22 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+    <script><!--#include virtual="/interface_config.js" --></script>
+    <script src="close.js"></script>
+</head>
+<body>
+    <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,23 +1,23 @@
 /* global $, APP, JitsiMeetJS, config, interfaceConfig */
+const logger = require("jitsi-meet-logger").getLogger(__filename);
+
 import {openConnection} from './connection';
 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 UIEvents from './service/UI/UIEvents';
 import UIUtil from './modules/UI/util/UIUtil';

+import analytics from './modules/analytics/analytics';
+
+const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;

 const ConferenceEvents = JitsiMeetJS.events.conference;
@@ -26,12 +26,9 @@ const ConferenceErrors = JitsiMeetJS.errors.conference;
 const TrackEvents = JitsiMeetJS.events.track;
 const TrackErrors = JitsiMeetJS.errors.track;

-let room, connection, localAudio, localVideo;
+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.
@@ -44,7 +41,6 @@ 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",
@@ -53,6 +49,12 @@ const commands = {
    CUSTOM_ROLE: "custom-role"
 };

+/**
+ * Max length of the display names. If we receive longer display name the
+ * additional chars are going to be cut.
+ */
+const MAX_DISPLAY_NAME_LENGTH = 50;
+
 /**
 * Open Connection. When authentication failed it shows auth dialog.
 * @param roomName the room name to use
@@ -166,7 +168,7 @@ function muteLocalMedia(localMedia, muted, localMediaTypeString) {
    const method = muted ? 'mute' : 'unmute';

    localMedia[method]().catch(reason => {
-        console.warn(`${localMediaTypeString} ${method} was rejected:`, reason);
+        logger.warn(`${localMediaTypeString} ${method} was rejected:`, reason);
    });
 }

@@ -183,33 +185,35 @@ function muteLocalVideo (muted) {
 * 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 {boolean} showThankYou whether we should show a thank you 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(showThankYou) {
-
+function maybeRedirectToWelcomePage(options) {
    // if close page is enabled redirect to it, without further action
    if (config.enableClosePage) {
-        window.location.pathname = "close.html";
+        if (options.feedbackSubmitted)
+            window.location.pathname = "close.html";
+        else
+            window.location.pathname = "close2.html";
        return;
    }

-    if (showThankYou) {
+    // else: show thankYou dialog only if there is no feedback
+    if (options.thankYouDialogVisible)
        APP.UI.messageHandler.openMessageDialog(
-            null, null, null,
-            APP.translation.translateString(
-                "dialog.thankYou", {appName:interfaceConfig.APP_NAME}
-            )
-        );
-    }
+            null, "dialog.thankYou", {appName:interfaceConfig.APP_NAME});

-    if (!config.enableWelcomePage) {
-        return;
+    // if Welcome page is enabled redirect to welcome page after 3 sec.
+    if (config.enableWelcomePage) {
+        setTimeout(() => {
+            APP.settings.setWelcomePageEnabled(true);
+            window.location.pathname = "/";
+        }, 3000);
    }
-    // redirect to welcome page
-    setTimeout(() => {
-        APP.settings.setWelcomePageEnabled(true);
-        window.location.pathname = "/";
-    }, 3000);
 }

 /**
@@ -252,7 +256,7 @@ function createLocalTracks (options, checkForPermissionPrompt) {
            });
            return tracks;
        }).catch(function (err) {
-            console.error(
+            logger.error(
                'failed to create local tracks', options.devices, err);
            return Promise.reject(err);
        });
@@ -279,21 +283,23 @@ function changeLocalEmail(email = '') {
 * @param nickname {string} the new display name
 */
 function changeLocalDisplayName(nickname = '') {
-    nickname = nickname.trim();
+    const formattedNickname
+        = nickname.trim().substr(0, MAX_DISPLAY_NAME_LENGTH);

-    if (nickname === APP.settings.getDisplayName()) {
+    if (formattedNickname === APP.settings.getDisplayName()) {
        return;
    }

-    APP.settings.setDisplayName(nickname);
-    room.setDisplayName(nickname);
-    APP.UI.changeDisplayName(APP.conference.getMyUserId(), nickname);
+    APP.settings.setDisplayName(formattedNickname);
+    room.setDisplayName(formattedNickname);
+    APP.UI.changeDisplayName(APP.conference.getMyUserId(), formattedNickname);
 }

 class ConferenceConnector {
-    constructor(resolve, reject) {
+    constructor(resolve, reject, invite) {
        this._resolve = resolve;
        this._reject = reject;
+        this._invite = invite;
        this.reconnectTimeout = null;
        room.on(ConferenceEvents.CONFERENCE_JOINED,
            this._handleConferenceJoined.bind(this));
@@ -307,7 +313,7 @@ class ConferenceConnector {
        this._reject(err);
    }
    _onConferenceFailed(err, ...params) {
-        console.error('CONFERENCE FAILED:', err, ...params);
+        logger.error('CONFERENCE FAILED:', err, ...params);
        APP.UI.hideRingOverLay();
        switch (err) {
            // room is locked by the password
@@ -329,10 +335,6 @@ class ConferenceConnector {
            }
            break;

-        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
-            APP.UI.notifyBridgeDown();
-            break;
-
            // not enough rights to create conference
        case ConferenceErrors.AUTHENTICATION_REQUIRED:
            // schedule reconnect to check if someone else created the room
@@ -341,7 +343,8 @@ class ConferenceConnector {
            }, 5000);

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

        case ConferenceErrors.RESERVATION_ERROR:
@@ -367,6 +370,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;
@@ -375,8 +382,13 @@ class ConferenceConnector {
            break;

        case ConferenceErrors.FOCUS_LEFT:
+        case ConferenceErrors.VIDEOBRIDGE_NOT_AVAILABLE:
+            // 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(
+                false /* not a network type of failure */, err);
            break;

        case ConferenceErrors.CONFERENCE_MAX_USERS:
@@ -391,7 +403,7 @@ class ConferenceConnector {
        }
    }
    _onConferenceError(err, ...params) {
-        console.error('CONFERENCE Error:', err, params);
+        logger.error('CONFERENCE Error:', err, params);
        switch (err) {
        case ConferenceErrors.CHAT_ERROR:
            {
@@ -400,7 +412,7 @@ class ConferenceConnector {
            }
            break;
        default:
-            console.error("Unknown error.");
+            logger.error("Unknown error.", err);
        }
    }
    _unsubscribe() {
@@ -422,19 +434,6 @@ class ConferenceConnector {
    }
 }

-/**
- * Sends statistics from APP.tokenData
- */
-function sendTokenDataStats() {
-    let {server, group} = APP.tokenData;
-    if(server) {
-        APP.conference.logEvent("server." + server, 1);
-    }
-    if(group) {
-        APP.conference.logEvent("group", group);
-    }
-}
-
 /**
 * Disconnects the connection.
 * @returns resolved Promise. We need this in order to make the Promise.all
@@ -446,26 +445,6 @@ function disconnect() {
    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,
@@ -488,8 +467,6 @@ export default {
     */
    init(options) {
        this.roomName = options.roomName;
-        JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.TRACE);
-
        // attaches global error handler, if there is already one, respect it
        if(JitsiMeetJS.getGlobalOnErrorHandler){
            var oldOnErrorHandler = window.onerror;
@@ -512,19 +489,22 @@ export default {
            };
        }

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

-                APP.UI.ContactList = new ContactList(room);
+                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
@@ -544,7 +524,8 @@ export default {
                // XXX The API will take care of disconnecting from the XMPP
                // server (and, thus, leaving the room) on unload.
                return new Promise((resolve, reject) => {
-                    (new ConferenceConnector(resolve, reject)).connect();
+                    (new ConferenceConnector(
+                        resolve, reject, this.invite)).connect();
                });
        });
    },
@@ -556,6 +537,47 @@ export default {
    isLocalId (id) {
        return this.getMyUserId() === id;
    },
+    /**
+     * Binds a handler that will handle the case when the connection is dropped
+     * in the middle of the conference.
+     * @param {JitsiConnection} connection the connection to which the handler
+     * will be bound to.
+     * @private
+     */
+    _bindConnectionFailedHandler (connection) {
+        const handler = function (error, errMsg) {
+            /* eslint-disable no-case-declarations */
+            switch (error) {
+                case ConnectionErrors.CONNECTION_DROPPED_ERROR:
+                case ConnectionErrors.OTHER_ERROR:
+                case ConnectionErrors.SERVER_ERROR:
+
+                    logger.error("XMPP connection error: " + errMsg);
+
+                    // From all of the cases above only CONNECTION_DROPPED_ERROR
+                    // is considered a network type of failure
+                    const isNetworkFailure
+                        = error === ConnectionErrors.CONNECTION_DROPPED_ERROR;
+
+                    APP.UI.showPageReloadOverlay(
+                        isNetworkFailure,
+                        "xmpp-conn-dropped:" + errMsg);
+
+                    connection.removeEventListener(
+                        ConnectionEvents.CONNECTION_FAILED, handler);
+
+                    // FIXME it feels like the conference should be stopped
+                    // by lib-jitsi-meet
+                    if (room)
+                        room.leave();
+
+                    break;
+            }
+            /* eslint-enable no-case-declarations */
+        };
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED, handler);
+    },
    /**
     * Simulates toolbar button click for audio mute. Used by shortcuts and API.
     * @param mute true for mute and false for unmute.
@@ -665,7 +687,7 @@ export default {
     * false otherwise.
     */
    isConnectionInterrupted () {
-        return connectionIsInterrupted;
+        return this._room.isConnectionInterrupted();
    },
    /**
     * Finds JitsiParticipant for given id.
@@ -754,7 +776,7 @@ export default {
     * Returns the stats.
     */
    getStats() {
-        return ConnectionQuality.getStats();
+        return room.connectionQuality.getStats();
    },
    // end used by torture

@@ -873,7 +895,7 @@ export default {
            } else if (track.isVideoTrack()) {
                return this.useVideoStream(track);
            } else {
-                console.error(
+                logger.error(
                    "Ignored not an audio nor a video track: ", track);
                return Promise.resolve();
            }
@@ -965,11 +987,11 @@ export default {
    videoSwitchInProgress: false,
    toggleScreenSharing (shareScreen = !this.isSharingScreen) {
        if (this.videoSwitchInProgress) {
-            console.warn("Switch in progress.");
+            logger.warn("Switch in progress.");
            return;
        }
        if (!this.isDesktopSharingEnabled) {
-            console.warn("Cannot toggle screen sharing: not supported.");
+            logger.warn("Cannot toggle screen sharing: not supported.");
            return;
        }

@@ -1023,7 +1045,7 @@ export default {
                this.videoSwitchInProgress = false;
                JitsiMeetJS.analytics.sendEvent(
                    'conference.sharingDesktop.start');
-                console.log('sharing local desktop');
+                logger.log('sharing local desktop');
            }).catch((err) => {
                // close external installation dialog to show the error.
                if(externalInstallation)
@@ -1035,7 +1057,7 @@ export default {
                    return;
                }

-                console.error('failed to share local desktop', err);
+                logger.error('failed to share local desktop', err);

                if (err.name === TrackErrors.FIREFOX_EXTENSION_NEEDED) {
                    APP.UI.showExtensionRequiredDialog(
@@ -1050,21 +1072,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(
@@ -1073,11 +1094,11 @@ export default {
                this.videoSwitchInProgress = false;
                JitsiMeetJS.analytics.sendEvent(
                    'conference.sharingDesktop.stop');
-                console.log('sharing local video');
+                logger.log('sharing local video');
            }).catch((err) => {
                this.useVideoStream(null);
                this.videoSwitchInProgress = false;
-                console.error('failed to share local video', err);
+                logger.error('failed to share local video', err);
            });
        }
    },
@@ -1089,7 +1110,6 @@ export default {
        room.on(ConferenceEvents.CONFERENCE_JOINED, () => {
            APP.UI.mucJoined();
            APP.API.notifyConferenceJoined(APP.conference.roomName);
-            connectionIsInterrupted = false;
            APP.UI.markVideoInterrupted(false);
        });

@@ -1100,12 +1120,11 @@ export default {
            }
        );

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

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

@@ -1113,7 +1132,7 @@ export default {
            APP.UI.updateUserRole(user);
        });
        room.on(ConferenceEvents.USER_LEFT, (id, user) => {
-            console.log('USER %s LEFT', id, user);
+            logger.log('USER %s LEFT', id, user);
            APP.API.notifyUserLeft(id);
            APP.UI.removeUser(id, user.getDisplayName());
            APP.UI.onSharedVideoStop(id);
@@ -1122,7 +1141,7 @@ export default {

        room.on(ConferenceEvents.USER_ROLE_CHANGED, (id, role) => {
            if (this.isLocalId(id)) {
-                console.info(`My role changed, new role: ${role}`);
+                logger.info(`My role changed, new role: ${role}`);
                if (this.isModerator !== room.isModerator()) {
                    this.isModerator = room.isModerator();
                    APP.UI.updateLocalRole(room.isModerator());
@@ -1180,7 +1199,7 @@ export default {
            {
                this.audioLevelsMap[id] = lvl;
                if(config.debugAudioLevels)
-                    console.log("AudioLevel:" + id + "/" + lvl);
+                    logger.log("AudioLevel:" + id + "/" + lvl);
            }

            APP.UI.setAudioLevel(id, lvl);
@@ -1239,19 +1258,18 @@ 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) => {
-            APP.API.notifyDisplayNameChanged(id, displayName);
-            APP.UI.changeDisplayName(id, displayName);
+            const formattedDisplayName
+                = displayName.substr(0, MAX_DISPLAY_NAME_LENGTH);
+            APP.API.notifyDisplayNameChanged(id, formattedDisplayName);
+            APP.UI.changeDisplayName(id, formattedDisplayName);
        });

        room.on(ConferenceEvents.PARTICIPANT_PROPERTY_CHANGED,
@@ -1262,20 +1280,40 @@ export default {
        });

        room.on(ConferenceEvents.RECORDER_STATE_CHANGED, (status, error) => {
-            console.log("Received recorder status change: ", status, error);
+            logger.log("Received recorder status change: ", status, error);
            APP.UI.updateRecordingState(status);
        });

-        room.on(ConferenceEvents.USER_STATUS_CHANGED, function (id, status) {
-            APP.UI.updateUserStatus(id, status);
-        });
-
        room.on(ConferenceEvents.KICKED, () => {
            APP.UI.hideStats();
            APP.UI.notifyKicked();
            // FIXME close
        });

+        room.on(ConferenceEvents.SUSPEND_DETECTED, () => {
+            // After wake up, we will be in a state where conference is left
+            // there will be dialog shown to user.
+            // We do not want video/audio as we show an overlay and after it
+            // user need to rejoin or close, while waking up we can detect
+            // camera wakeup as a problem with device.
+            // We also do not care about device change, which happens
+            // on resume after suspending PC.
+            if (this.deviceChangeListener)
+                JitsiMeetJS.mediaDevices.removeEventListener(
+                    JitsiMeetJS.events.mediaDevices.DEVICE_LIST_CHANGED,
+                    this.deviceChangeListener);
+
+            // stop local video
+            if (localVideo)
+                localVideo.dispose();
+            // stop local audio
+            if (localAudio)
+                localAudio.dispose();
+
+            // show overlay
+            APP.UI.showSuspendedOverlay();
+        });
+
        room.on(ConferenceEvents.DTMF_SUPPORT_CHANGED, (isDTMFSupported) => {
            APP.UI.updateDTMFSupport(isDTMFSupported);
        });
@@ -1301,59 +1339,16 @@ export default {
            });
        }

-        room.on(ConferenceEvents.CONNECTION_STATS, function (stats) {
-            // if we say video muted we will use old method of calculating
-            // quality and will not depend on localVideo if it is missing
-            ConnectionQuality.updateLocalStats(
-                stats,
-                connectionIsInterrupted,
-                localVideo ? localVideo.videoType : undefined,
-                localVideo ? localVideo.isMuted() : true,
-                localVideo ? localVideo.resolution : null);
+        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};
-                if (localVideo && localVideo.resolution) {
-                    data.resolution = localVideo.resolution;
-                }
-
-                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: {
-                        let remoteVideo = participant.getTracks()
-                            .find(tr => tr.isVideoTrack());
-                        ConnectionQuality.updateRemoteStats(
-                            participant.getId(),
-                            payload.values,
-                            remoteVideo ? remoteVideo.videoType : undefined,
-                            remoteVideo ? remoteVideo.isMuted() : undefined);
-                        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);
@@ -1364,9 +1359,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,
@@ -1481,11 +1477,21 @@ export default {
        });

        APP.UI.addListener(UIEvents.PINNED_ENDPOINT, (smallVideo, isPinned) => {
-            var smallVideoId = smallVideo.getId();
+            let smallVideoId = smallVideo.getId();
+            let isLocal = APP.conference.isLocalId(smallVideoId);
+
+            let eventName
+                = (isPinned ? "pinned" : "unpinned") + "." +
+                        (isLocal ? "local" : "remote");
+            let participantCount = room.getParticipantCount();
+            JitsiMeetJS.analytics.sendEvent(
+                    eventName,
+                    { value: participantCount });
+
            // 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)) {
+                && !isLocal) {

                // When the library starts supporting multiple pins we would
                // pass the isPinned parameter together with the identifier,
@@ -1510,7 +1516,7 @@ export default {
                })
                .then(([stream]) => {
                    this.useVideoStream(stream);
-                    console.log('switched local video device');
+                    logger.log('switched local video device');
                    APP.settings.setCameraDeviceId(cameraDeviceId, true);
                })
                .catch((err) => {
@@ -1532,7 +1538,7 @@ export default {
                })
                .then(([stream]) => {
                    this.useAudioStream(stream);
-                    console.log('switched local audio device');
+                    logger.log('switched local audio device');
                    APP.settings.setMicDeviceId(micDeviceId, true);
                })
                .catch((err) => {
@@ -1548,9 +1554,9 @@ export default {
                JitsiMeetJS.analytics.sendEvent(
                    'settings.changeDevice.audioOut');
                APP.settings.setAudioOutputDeviceId(audioOutputDeviceId)
-                    .then(() => console.log('changed audio output device'))
+                    .then(() => logger.log('changed audio output device'))
                    .catch((err) => {
-                        console.warn('Failed to change audio output device. ' +
+                        logger.warn('Failed to change audio output device. ' +
                            'Default or previously set audio output device ' +
                            'will be used instead.', err);
                        APP.UI.setSelectedAudioOutputFromSettings();
@@ -1642,11 +1648,12 @@ export default {
                APP.UI.onAvailableDevicesChanged(devices);
            });

+            this.deviceChangeListener = (devices) =>
+                window.setTimeout(
+                    () => this._onDeviceListChanged(devices), 0);
            JitsiMeetJS.mediaDevices.addEventListener(
                JitsiMeetJS.events.mediaDevices.DEVICE_LIST_CHANGED,
-                (devices) =>
-                    window.setTimeout(
-                        () => this._onDeviceListChanged(devices), 0));
+                this.deviceChangeListener);
        }
    },
    /**
@@ -1745,14 +1752,25 @@ export default {
     * @param {string} name the event name
     * @param {int} value the value (it's int because google analytics supports
     * only int).
+     * @param {string} label short text which provides more info about the event
+     * which allows to distinguish between few event cases of the same name
     * NOTE: Should be used after conference.init
     */
-    logEvent(name, value) {
+    logEvent(name, value, label) {
        if(JitsiMeetJS.analytics) {
-            JitsiMeetJS.analytics.sendEvent(name, {value});
+            JitsiMeetJS.analytics.sendEvent(name, {value, label});
        }
        if(room) {
-            room.sendApplicationLog(JSON.stringify({name, value}));
+            room.sendApplicationLog(JSON.stringify({name, value, label}));
+        }
+    },
+    /**
+     * Methods logs an application event given in the JSON format.
+     * @param {string} logJSON an event to be logged in JSON format
+     */
+    logJSON(logJSON) {
+        if (room) {
+            room.sendApplicationLog(logJSON);
        }
    },
    /**
@@ -1763,8 +1781,11 @@ export default {
    hangup (requestFeedback = false) {
        APP.UI.hideRingOverLay();
        let requestFeedbackPromise = requestFeedback
-                ? APP.UI.requestFeedback().catch(() => Promise.resolve())
-                : Promise.resolve();
+                ? 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
@@ -1772,9 +1793,9 @@ export default {
        Promise.all([
            requestFeedbackPromise,
            room.leave().then(disconnect, disconnect)
-        ]).then(() => {
+        ]).then(values => {
            APP.API.notifyReadyToClose();
-            maybeRedirectToWelcomePage();
+            maybeRedirectToWelcomePage(values[0]);
        });
    }
 };
--- a/config.js
+++ b/config.js
@@ -26,7 +26,7 @@ var config = { // eslint-disable-line no-unused-vars
    desktopSharingChromeExtId: 'diibjkoicjeejcmhdnailmkgecihlobk',
    // The media sources to use when using screen sharing with the Chrome
    // extension.
-    desktopSharingChromeSources: ['screen', 'window'],
+    desktopSharingChromeSources: ['screen', 'window', 'tab'],
    // Required version of Chrome extension
    desktopSharingChromeMinExtVersion: '0.1',

@@ -78,3 +78,13 @@ var config = { // eslint-disable-line no-unused-vars
    // edit their profile.
    enableUserRolesBasedOnToken: false
 };
+
+// Logging configuration
+var loggingConfig = { // eslint-disable-line no-unused-vars
+    //default log level for the app and lib-jitsi-meet
+    defaultLogLevel: 'trace',
+    // Option to disable LogCollector (which stores the logs on CallStats)
+    //disableLogCollector: true,
+    // Logging level adjustments for verbose modules:
+    'modules/xmpp/strophe.util.js': 'log'
+};
--- a/connection.js
+++ b/connection.js
@@ -1,5 +1,8 @@
 /* global APP, JitsiMeetJS, config */
+const logger = require("jitsi-meet-logger").getLogger(__filename);
+
 import AuthHandler from './modules/UI/authentication/AuthHandler';
+import jitsiLocalStorage from './modules/util/JitsiLocalStorage';

 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -83,7 +86,7 @@ function connect(id, password, roomName) {

        function handleConnectionFailed(err) {
            unsubscribe();
-            console.error("CONNECTION FAILED:", err);
+            logger.error("CONNECTION FAILED:", err);
            reject(err);
        }

@@ -107,9 +110,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/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
@@ -3,7 +3,7 @@
 **/

 /**
- * START of slide in animation for extended toolbar.
+ *   Slide in animation for extended toolbar.
 */
@include keyframes(slideInX) {
    0% { transform: translateX(-100%); }
@@ -26,12 +26,9 @@
 }

 /**
- * END of slide out animation for extended toolbar.
+ *   Slide in / out animation for main toolbar.
 */

-/**
- * START of slide in / out animation for main toolbar.
- */
@include keyframes(slideInY) {
    100% { transform: translateY(0%); }
 }
@@ -42,11 +39,7 @@
 }

 /**
- * END of slide in / out animation for main toolbar.
- */
-
-/**
- * START of slide in animation for extended toolbar (inner) panel.
+ *   Slide in animation for extended toolbar (inner) panel.
 */

 // FIX: Can't use percentage because of breaking animation when width is changed
@@ -62,11 +55,7 @@
 }

 /**
- * END of slide in animation for extended toolbar (inner) panel.
- */
-
-/**
-* START of slide in animation for extended toolbar container
+*   Slide in animation for extended toolbar container
 **/

@include keyframes(slideOutExtContainer) {
@@ -80,5 +69,15 @@
 }

 /**
-* END of slide in animation for extended toolbar container
-**/
+*   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
@@ -29,39 +29,11 @@ html, body, input, textarea, keygen, select, button {
    color: #636363;
 }

-input[type='text'], input[type='password'], textarea {
-    display: inline-block;
-    width: 100%;
-    padding: 5px 7px;
-    color: $inputColor;
-    border-radius: $borderRadius;
-    line-height: 32px;
-    letter-spacing: $letterSpacing;
-    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 */
-}
-
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: none;
-    line-height: 1.5em;
-}
-
-button.no-icon {
-    padding: 0 1em;
-}
-
 button, input, select, textarea {
    margin: 0;
    vertical-align: baseline;
    color: $inputColor;
    font-size: 1em;
-    letter-spacing: $letterSpacing;
 }

 button, select, input[type="button"],
@@ -73,10 +45,26 @@ input[type="reset"], input[type="submit"] {
    cursor: pointer;
 }

+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: none;
+    line-height: 1.5em;
+}
+
+input[type='text'], input[type='password'], textarea {
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
 button {
    color: #FFF;
    background-color: $buttonBackground;
    border-radius: $borderRadius;
+
+    &.no-icon {
+        padding: 0 1em;
+    }
 }

 button,
@@ -130,38 +118,6 @@ form {
    font-size: 12px;
 }

-/**
- * Hides an element.
- */
-.hide {
-    display: none !important;
-}
-
-/**
- * Shows an element.
- */
-.show {
-    display: block !important;
-}
-
-/**
- * Shows an inline element.
- */
-.show-inline {
-    display: inline-block !important;
-}
-
-/**
- * Shows a flex element.
- */
-.show-flex {
-    display: -webkit-box !important;
-    display: -moz-box !important;
-    display: -ms-flexbox !important;
-    display: -webkit-flex !important;
-    display: flex !important;
-}
-
 /**
 * Tooltips
 **/
@@ -183,17 +139,6 @@ form {
    visibility: visible;
 }

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

 #chat_container .timestamp {
@@ -129,7 +133,7 @@
 .chatmessage {
    background: #3a3a3a;
    width: 93%;
-    margin-left: 5%;
+    margin-left: 9px;
    margin-right: auto;
    border-radius: 5px;
    border-top-left-radius: 0px;
@@ -232,4 +236,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
@@ -5,7 +5,7 @@
        font-size: 12px;
        bottom: 0px;
        margin: 0;
-        margin-top: 16px;
+        margin-top: 12px;
        padding: 0px;
        width: 100%;
    }
@@ -13,18 +13,24 @@
    .clickable {
        cursor: pointer;
    }
+
+    .icon-security,
+    .icon-security-locked {
+        font-size: 16px;
+    }
 }

 #contacts {

    >li {
-        color: $defaultSideBarFontColor;
+        display: block;
        list-style-type: none;
        text-align: left;
        white-space: nowrap;
-        color: #FFF;
-        font-size: 10pt;
-        padding: 6px 10%;
+        color: $baseLight;
+        font-size: 16px;
+        padding: 0 10%;
+        height: 27px;

        &:hover,
        &:active {
@@ -36,6 +42,7 @@
            vertical-align: middle;
            margin: 0px;
            width: 100%;
+            line-height: 1.5em;
            text-overflow: ellipsis;
            overflow: hidden;
        }
--- a/css/_filmstrip.scss
+++ b/css/_filmstrip.scss
@@ -0,0 +1,121 @@
+%align-right {
+    @include flex();
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.filmstrip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 10px 5px;
+    @extend %align-right;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        z-index: 1;                     // Set z-index to make element visible
+        width: $hideFilmstripButtonWidth;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        height:196px;
+        padding: 0;
+        padding-left: 17px;
+        bottom: 0;
+        width:auto;
+        border: $thumbnailsBorder solid transparent;
+        z-index: 5;
+        transition: bottom 2s;
+        overflow: visible !important;
+        font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
+
+        &.hidden {
+            bottom: -196px;
+        }
+
+        .videocontainer {
+            display: none;
+            position: relative;
+            background-size: contain;
+            border: $thumbnailVideoBorder solid transparent;
+            border-radius:1px;
+            margin: 0 $thumbnailVideoMargin;
+
+            &.videoContainerFocused, &:hover {
+                cursor: hand;
+            }
+
+            /**
+            * Focused video thumbnail.
+            */
+            &.videoContainerFocused {
+                transition-duration: 0.5s;
+                -webkit-transition-duration: 0.5s;
+                -webkit-animation-name: greyPulse;
+                -webkit-animation-duration: 2s;
+                -webkit-animation-iteration-count: 1;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+                box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
+            }
+
+            .remotevideomenu {
+                display: none;
+            }
+
+            /**
+            * Hovered video thumbnail.
+            */
+            &:hover {
+                cursor: hand;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
+                box-shadow: inset 0 0 3px $videoThumbnailHovered,
+                0 0 3px $videoThumbnailHovered;
+
+                .remotevideomenu {
+                    display: inline-block;
+                }
+            }
+
+            /* With TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius:1px;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+}
--- a/css/_font.scss
+++ b/css/_font.scss
@@ -55,6 +55,9 @@
 .icon-kick:before {
  content: "\e904";
 }
+.icon-menu:before {
+  content: "\e91f";
+}
 .icon-menu-up:before {
  content: "\e91f";
 }
@@ -133,4 +136,4 @@
 // FIXME not used anymore - consider removing in the next font update
 .icon-presentation:before {
  content: "\e603";
-}
+}
--- a/css/_inlay.scss
+++ b/css/_inlay.scss
@@ -0,0 +1,33 @@
+.inlay {
+    margin-top: 14%;
+    @include border-radius(3px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: $inlayColorBg;
+    text-align: center;
+
+    &__title {
+        margin: 17px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $inlayBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
+        display: block;
+        margin-top: 22px;
+        font-size: 16px;
+    }
+
+    &__icon {
+        margin: 0 10px;
+        font-size: 50px;
+    }
+
+    &__button {
+        float: none !important;
+    }
+}
--- a/css/_jitsi_popover.scss
+++ b/css/_jitsi_popover.scss
@@ -6,100 +6,42 @@
    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;
-}
+    margin-top: -$popoverMenuPadding;

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

-.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/_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
@@ -19,11 +19,11 @@
 }

@mixin flex() {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
 }

 /**
@@ -45,35 +45,109 @@
 }

@mixin circle($diameter) {
-    width: $diameter;
-    height: $diameter;
-    border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+  border-radius: 50%;
 }

-@mixin absoluteAligning($sizeX, $sizeY) {
-    top: 50%;
-    left: 50%;
+/**
+* Absolute position the element at the top left corner
+**/
+@mixin topLeft() {
    position: absolute;
-    @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
+    top: 0;
+    left: 0;
+}
+
+@mixin absoluteAligning() {
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  @include transform(translate(-50%, -50%));
+}
+
+/**
+* Defines the maximum width and height
+**/
+@mixin maxSize($value) {
+    max-width: $value;
+    max-height: $value;
 }

@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 box-shadow($type, $h, $y, $blur, $color) {
-    -webkit-box-shadow: $type $h $y $blur $color;
-    -moz-box-shadow: $type $h $y $blur $color;
-    box-shadow: $type $h $y $blur $color;
+/**
+* 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/_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
@@ -6,7 +6,36 @@ html, body {
 }

 .redirectPageMessage {
+    width: 30%;
+    margin: 20% auto;
    text-align: center;
-    font-size: 36px;
-    margin-top: 20%;
+    font-size: 24px;
+
+    .thanks-msg {
+        border-bottom: 1px solid $selectBg;
+        padding-left: 30px;
+        padding-right: 30px;
+        p {
+            margin: 30px auto;
+            font-size: 24px;
+            line-height: 24px;
+        }
+    }
+    .hint-msg{
+        p {
+            margin: 26px auto;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 18px;
+            .hint-msg__holder{
+                font-weight: 200;
+            }
+        }
+        .happy-software{
+            width: 120px;
+            height: 86px;
+            margin: 0 auto;
+            background: $happySoftwareBackground;
+        }
+    }
 }
--- a/css/_side_toolbar_container.scss
+++ b/css/_side_toolbar_container.scss
@@ -2,60 +2,50 @@
 * Toolbar side panel main container element.
 */
 #sideToolbarContainer {
-    display: inline-block;
-    position:absolute;
-    top: 0px;
-    left: $defaultToolbarSize;
-    width: 0;
    background-color: rgba(0,0,0,0.8);
    height: 100%;
+    left: $defaultToolbarSize;
    max-width: $sidebarWidth;
-    z-index: 800;
    overflow: hidden;
-    letter-spacing: $titleLetterSpacing;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: 800;

    /**
     * Labels inside the side panel.
     */
    label {
-        color: $defaultColor;
+        color: $baseLight;
    }

    /**
     * Form elements and blocks.
     */
-    input, label, select, a,
-    .sideToolbarBlock, .input-control, .button-control {
-        display: inline-block;
+    input, select, a,
+    .sideToolbarBlock, .form-control, .button-control {
+        display: block;
        margin-top: 15px;
        margin-left: 10%;
        width: 80%;
    }

-    /**
-     * Specify colors for edit elements.
-     */
-    select, input[type="button"], input[type="text"],
-    input[type="reset"], input[type="submit"] {
-        color: $inputColor;
-        background: $inputBackground;
-        border: none;
-    }
-
    /**
     * Specify styling of elements inside a block.
     */
    .sideToolbarBlock {
-        input, label, button, a, select {
-            margin-top: 5px;
+        input, button, a, select {
            margin-left: 0;
+            margin-top: 5px;
            width: 100%;
        }
-
-        .startMutedLabel,
-        .followMeLabel {
+        input[type='checkbox'] {
            display: inline;
-            margin-top: 0;
+            width: auto !important;
+            > label {
+                margin-top: 5px;
+                width: 80%;
+            }
        }
    }

@@ -70,39 +60,42 @@
        box-sizing: border-box;
        color: #FFF;

+        .input-control {
+            border: 0;
+        }
+
        /**
         * Titles and subtitles of inner containers.
         */
-        > div.title,
-          div.subTitle {
-            text-align: left;
-            margin: 10px 0px 10px 0px;
+        div.title, div.subTitle {
+            margin: 24px 0 11px;
        }

        /**
         * Main title size.
         */
-        > div.title {
-            color: $defaultColor !important;
+        div.title {
+            color: $toolbarTitleColor;
            text-align: center;
-            font-size: 16px;
+            font-size: $toolbarTitleFontSize;
        }

        /**
         * Subtitle specific properties.
         */
-        > div.subTitle {
+        div.subTitle {
+            color: $defaultSideBarFontColor !important;
            font-size: 11px;
            font-weight: 500;
-            color: $defaultSideBarFontColor !important;
            margin-left: 10%;
+            text-align: left;
        }

        /**
         * First element after a title.
         */
        .first {
-            margin-top: 0px !important;
+            margin-top: 0 !important;
        }

        /**
@@ -120,8 +113,28 @@
    text-align: center;
 }

-#startAudioMuted,
-#startVideoMuted,
-#followMeCheckBox {
-    width: 13px !important;
+/**
+ * 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,101 @@
 *
 * 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;
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
+  bottom: 135px;
+  right: $hideFilmstripButtonWidth + $videoOffset;
 }

-#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 {
@@ -43,29 +54,14 @@
    margin-right: auto;
    width: auto;
    border-radius: 3px;
-
-    /**
-     * First button in the toolbar.
-     */
-    .first {
+    .button:first-child {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
    }
-
-    /**
-     * Last button in the toolbar.
-     */
-    .last {
+    .button:last-child {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }
-
-    /**
-     * Splitter button in the toolbar.
-     */
-    .splitter {
-        margin-left: $splitterToolbarButtonLeftMargin;
-    }
 }

 #extendedToolbar {
@@ -76,8 +72,8 @@
    display: flex;
    width: $defaultToolbarSize;
    height: 100%;
-    top: 0px;
-    left: 0px;
+    top: 0;
+    left: 0;
    padding-top: 10px;
    box-sizing: border-box;
    flex-direction: column;
@@ -256,7 +252,7 @@ a.button>#avatar {
 */
@include keyframes(slideInExt) {
    from { width: 0px; }
-    to   { width: 200px; } // TO FIX: Make this value a percentage.
+    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
 }

 .slideInExt {
@@ -264,7 +260,7 @@ a.button>#avatar {
 }

@include keyframes(slideOutExt) {
-  from { width: 200px; } // TO FIX: Make this value a percentage.
+  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
  to   { width: 0px; }
 }

@@ -273,5 +269,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/_utils.scss
+++ b/css/_utils.scss
@@ -0,0 +1,38 @@
+/**
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
+}
+
+/**
+ * Shows an element.
+ */
+.show {
+    display: block !important;
+}
+
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
+}
+
+/**
+* Shows as a list item
+**/
+.show-list-item {
+    display: list-item !important;
+}
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}
--- a/css/_variables.scss
+++ b/css/_variables.scss
@@ -1,3 +1,5 @@
+@import "themes/light";
+
 /**
 * Style variables
 */
@@ -11,10 +13,14 @@ $hangupFontSize: 2em;
 $defaultToolbarSize: 50px;

 // Video layout.
-$thumbnailIndicatorSize: 23px;
-$thumbnailIndicatorBorder: 0px;
+$thumbnailToolbarHeight: 22px;
+$thumbnailIndicatorBorder: 0;
+$thumbnailIndicatorSize: 3em;
 $thumbnailVideoMargin: 2px;
-$thumbnailToolbarHeight: 25px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$hideFilmstripButtonWidth: 17px;
+

 /**
 * Color variables.
@@ -23,58 +29,101 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
-$defaultBackground: #474747;
 $tooltipBg: rgba(0,0,0, 0.7);

-// Toolbar
+/**
+ * Toolbar
+ */
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
+$toolbarBackground: rgba(0, 0, 0, 0.5);
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
 $toolbarBadgeBackground: #165ECC;
 $toolbarBadgeColor: #FFFFFF;
 $toolbarToggleBackground: #12499C;
-$splitterToolbarButtonLeftMargin: 0px;
+$splitterToolbarButtonMargin: 18px;

-// Main controls
+/*
+ * Main controls
+ * TODO: looks like we don't use it
+ */
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;

-// Video layout.
-$videoThumbnailHovered: #BFEBFF;
+/*
+ * 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;
-$rateStarLabelColor: #333;
+$rateStarSize: 34px;
+
+/**
+ * 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;
+$borderRadius: 3px;
 $defaultWatermarkLink: '../images/watermark.png';
-$sidebarWidth: 200px;
+$sidebarWidth: 220px;
+$popoverMenuPadding: 13px;
+$happySoftwareBackground: transparent;

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

 /**
- * Font Colors TODO: Change colors when general dialogs are implemented.
+ * Font Colors
 */
 $defaultFontColor: #777;
 $defaultLightFontColor: #F1F1F1;
 $defaultDarkFontColor: #000;
-$buttonFontColor: #777;
-$buttonHoverFontColor: #287ade;
-$auiPrimaryButtonBg: #3572b0;
-$auiPrimaryButtonHoverBg: #57647b;
-$auiPrimaryButtonColor: #fff;
-$auiIconColor: #707070;
-$inputControlEmColor: #f29424;
+
+/**
+ * Forms
+ */
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -12,110 +12,113 @@
    overflow: hidden;
 }

-#remoteVideos {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    flex-direction: row-reverse;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-
-    position:absolute;
-    text-align:right;
-    height:196px;
-    padding: 10px 10px 10px 5px;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    width:auto;
-    border: 2px solid transparent;
-    z-index: 5;
-    transition: bottom 2s;
-    overflow: visible !important;
-    font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
-}
-
-#remotevideos.hidden {
-    bottom: -196px;
-}
-
 .videocontainer {
    position: relative;
    text-align: center;
-}

-#remoteVideos .videocontainer {
-    display: none;
-    position: relative;
-    background-color: black;
-    background-size: contain;
-    border-radius:1px;
-    margin: 0 $thumbnailVideoMargin;
-}
+    &__background {
+        @include topLeft();
+        width: 100%;
+        height: 100%;
+        background-color: black;
+    }

-/**
- * The toolbar of the video thumbnail.
- */
-.videocontainer__toolbar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 1;
-    width: 100%;
-    box-sizing: border-box; // Includes the padding in the 100% width.
-    height: $thumbnailToolbarHeight;
-    max-height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    padding: 0 5px 0 5px;
-}
+    /**
+     * The toolbar of the video thumbnail.
+     */
+    &__toolbar,
+    &__toptoolbar {
+        position: absolute;
+        left: 0;
+        z-index: 3;
+        width: 100%;
+        box-sizing: border-box; // Includes the padding in the 100% width.
+    }

-#remoteVideos .videocontainer.videoContainerFocused,
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    margin-right: $thumbnailVideoMargin - 2;
-    margin-left: $thumbnailVideoMargin - 2;
-    margin-top: -2px;
-}
-/**
- * Focused video thumbnail.
- */
-#remoteVideos .videocontainer.videoContainerFocused {
-    transition-duration: 0.5s;
-    -webkit-transition-duration: 0.5s;
-    -webkit-animation-name: greyPulse;
-    -webkit-animation-duration: 2s;
-    -webkit-animation-iteration-count: 1;
-    border: 2px solid $videoThumbnailSelected !important;
-    box-shadow: inset 0 0 3px $videoThumbnailSelected,
-                0 0 3px $videoThumbnailSelected !important;
-}
+    &__toolbar {
+        bottom: 0;
+        padding: 0 5px 0 5px;
+        height: $thumbnailToolbarHeight;
+    }

-/**
- * Hovered video thumbnail.
- */
-#remoteVideos .videocontainer:hover {
-    cursor: hand;
-    border: 2px solid $videoThumbnailHovered;
-    box-shadow: inset 0 0 3px $videoThumbnailHovered,
-              0 0 3px $videoThumbnailHovered;
+    &__toptoolbar {
+        $toolbarPadding: 5px;
+        top: 0;
+        padding: $toolbarPadding;
+        padding-bottom: 0;
+
+        span.indicator {
+            position: relative;
+            font-size: 8px;
+            text-align: center;
+            line-height: $thumbnailIndicatorSize;
+            display: none;
+            padding: 0;
+            margin-right: em(5, 8);
+            float: left;
+            @include circle($thumbnailIndicatorSize);
+            box-sizing: border-box;
+            z-index: 3;
+            background: $dominantSpeakerBg;
+            color: $thumbnailPictogramColor;
+            border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            .indicatoricon {
+                @include absoluteAligning();
+            }
+
+            .connection {
+                position: relative;
+                display: inline-block;
+                margin: 0 auto;
+                left: 0;
+                @include transform(translate(0, -50%));
+
+                &_empty
+                {
+                    color: #8B8B8B;/*#FFFFFF*/
+                    overflow: hidden;
+                }
+
+                &_lost
+                {
+                    color: #8B8B8B;
+                    overflow: visible;
+                }
+
+                &_full
+                {
+                    @include topLeft();
+                    color: #FFFFFF;/*#15A1ED*/
+                    overflow: hidden;
+                }
+            }
+
+            .icon-connection,
+            .icon-connection-lost {
+                font-size: 1em;
+            }
+        }
+    }
+
+    &__hoverOverlay {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        background: rgba(0,0,0,.6);
+        z-index: 2;
+    }
 }

 #localVideoWrapper {
    display:inline-block;
 }

-/* With TemasysWebRTC plugin <object/> element is used
-   instead of <video/> */
-#remoteVideos .videocontainer>video,
-#remoteVideos .videocontainer>object {
-    cursor: hand;
-    border-radius:1px;
-    object-fit: cover;
-    overflow: hidden;
-}
-
 .flipVideoX {
    transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
@@ -176,14 +179,15 @@
 .videocontainer .editdisplayname {
    display: inline-block;
    position: absolute;
-    left: 30%;
-    width: 40%;
+    left: 10%;
+    width: 80%;
+    top: 50%;
+    @include transform(translateY(-40%));
    color: $participantNameColor;
    text-align: center;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 100;
-    letter-spacing: 1px;
    overflow: hidden;
    white-space: nowrap;
    line-height: $thumbnailToolbarHeight;
@@ -201,90 +205,10 @@
    padding: 0;
 }

-.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;
-}
-
-.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_lost
-{
-    color: #8B8B8B;
-    overflow: visible;
-}
-
-.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 .displayname:hover {
    cursor: text;
 }

-.videocontainer>span.status,
 .videocontainer .displayname {
    pointer-events: none;
 }
@@ -297,7 +221,6 @@
    pointer-events: auto !important;
 }

-.videocontainer>a.status,
 .videocontainer>a.displayname {
    display: inline-block;
    position: absolute;
@@ -342,25 +265,26 @@
  margin: 0px 0px 0px 5px;
 }

-.videocontainer>span.indicator {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    @include circle($thumbnailIndicatorSize);
-    box-sizing: border-box;
-    line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-    z-index: 3;
-    text-align: center;
-    background: $dominantSpeakerBg;
-    margin: 7px;
-    display: inline-block;
-    color: $thumbnailPictogramColor;
-    font-size: 8pt;
-    border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+#raisehandindicator {
+  background: $raiseHandBg;
 }

-.videocontainer>#raisehandindicator {
-    background: $raiseHandBg;
+#connectionindicator {
+  background: $connectionIndicatorBg;
+}
+
+.remotevideomenu
+{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0;
+    margin: 7px;
+    z-index: 3;
+    width: 18px;
+    height: 13px;
+    color: #FFF;
+    font-size: 8pt;
 }

 /**
@@ -403,12 +327,6 @@
    }
 }

-#indicatoricon {
-    width: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-    height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-    line-height: $thumbnailIndicatorSize - 2*$thumbnailIndicatorBorder;
-}
-
 #reloadPresentation {
    display: none;
    position: absolute;
@@ -457,7 +375,6 @@
    margin: auto;
    position: relative;
    border-radius: 100px;
-    z-index: 3;
    visibility: inherit;
    background-color: #000000;
 }
@@ -472,8 +389,11 @@
 }

 .userAvatar {
-    @include circle(60px);
-    @include absoluteAligning(60px, 60px);
+    @include maxSize(60px);
+    @include absoluteAligning();
+    border-radius: 50%;
+    height: 50%;
+    width: auto;
 }

 .sharedVideoAvatar {
@@ -530,7 +450,7 @@
    display: none;
    position: absolute;
    width: auto;
-    z-index: 1011;
+    z-index: 2;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
@@ -553,7 +473,7 @@
    position: absolute;
    width: 100%;
    top:50%;
-    z-index: 1011;
+    z-index: 2;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
@@ -565,47 +485,43 @@
                    0px 0px 1px rgba(0,0,0,0.3);
 }

-#videoResolutionLabel {
-    display: none;
-    position: absolute;
-    top: 5px;
-    right: 5px;
-    background: rgba(0,0,0,.5);
-    padding: 10px;
-    color: rgba(255,255,255,.5);
-    z-index: 1011;
+.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;
+    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;
+}
--- a/css/aui-components/dropdown.scss
+++ b/css/aui-components/dropdown.scss
@@ -0,0 +1,68 @@
+.select2-container.aui-select2-container {
+    background-color: transparent !important;
+    margin-top: 2px;
+
+    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;
+                color: $selectFontColor !important;
+                line-height: 20px;
+            }
+        }
+
+    }
+}
+
+.select2-drop-mask {
+    z-index: $dropdownMaskZ;
+}
--- a/css/components/_button-control.scss
+++ b/css/components/_button-control.scss
@@ -4,6 +4,7 @@
    border: 1px solid $buttonBorder;
    vertical-align: baseline;
    height: 30px;
+    min-width: 60px;
    padding: 4px 10px;
    margin: 0;
    line-height: 1.5em;
@@ -13,7 +14,6 @@
    font-size: 14px;
    margin-left: 10px;
    color: $buttonColor;
-    letter-spacing: $letterSpacing;
    font-weight: $buttonFontWeight;
    @include transition(background-color .1s ease-out);

@@ -34,7 +34,7 @@
    }

    &:active {
-        @include box-shadow(inset, 0, 0, 1px, $buttonShadowColor);
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
    }

    &_light {
@@ -60,13 +60,17 @@
    &_primary {
        background-color: $primaryButtonBackground;
        border: 1px solid $primaryButtonBackground;
-        color: $primaryButtonColor;
+        color: $primaryButtonColor !important;
        font-weight: $primaryButtonFontWeight;

        &:hover {
            border: 1px solid $primaryButtonHoverBackground;
            background-color: $primaryButtonHoverBackground;
        }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
    }

    &_close {
--- a/css/input-control/_input-control.scss
+++ b/css/input-control/_input-control.scss
@@ -1,6 +1,14 @@
-.input-control {
+.form-control {
    padding: 16px 0;

+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
    &__text {
        margin: 8px 0;
        font-size: 1em
@@ -11,14 +19,6 @@
        font-weight: $labelFontWeight;
    }

-    &__input {
-        margin: 8px 0;
-
-        &::selection {
-            background-color: $defaultDarkSelectionColor;
-        }
-    }
-
    &__em {
        color: $inputControlEmColor;
    }
@@ -30,15 +30,21 @@
        span {
            vertical-align: middle;
        }
+
+        &_error {
+            color: $errorColor;
+        }
    }

    &__container {
        position: relative;
        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
        @include flex();

        .button-control {
-            margin: 9px 0 9px 10px;
+            margin: 1px 0 1px 10px;
        }
    }

@@ -46,4 +52,11 @@
        position: absolute;
        right: 0;
    }
+}
+
+/**
+ * Set a specific color for read only style.
+ */
+input:read-only {
+    color: $readOnlyInputColor;
 }
--- a/css/components/_input-control.scss
+++ b/css/components/_input-control.scss
@@ -0,0 +1,32 @@
+.input-control {
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    color: $inputColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    background-color: $inputBackground;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
+}
--- a/css/components/_link.scss
+++ b/css/components/_link.scss
@@ -0,0 +1,11 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}
--- a/css/main.scss
+++ b/css/main.scss
@@ -29,15 +29,14 @@

 /* Fonts END */

-/* Theme  BEGIN */
-@import "themes/main";
-/* Theme END */
-
 /* Modules BEGIN */

@import 'toastr';
@import 'base';
+@import 'utils';
@import 'overlay/overlay';
+@import 'inlay';
+@import 'reload_overlay/reload_overlay';
@import 'modals/dialog';
@import 'modals/feedback/feedback';
@import 'videolayout_default';
@@ -57,9 +56,16 @@
@import 'jquery.contextMenu';
@import 'keyboard-shortcuts';
@import 'redirect_page';
-@import 'input-control/input-control';
+@import 'components/form-control';
+@import 'components/link';
@import 'shortcuts/main';
-@import 'buttons/button-control';
+@import 'components/button-control';
+@import 'components/_input-control.scss';
@import "modals/invite/invite";
+@import "connection-info";
+@import 'aui-components/dropdown';
+@import '404';
+@import 'policy';
+@import 'filmstrip';

-/* Modules END */
+/* Modules END */
--- a/css/modals/_dialog.scss
+++ b/css/modals/_dialog.scss
@@ -2,7 +2,7 @@
    visibility: visible;
    height: auto;

-    h3 {
+    h1, h2, h3, h4, h5, h6 {
        color: $auiDialogColor;
    }

@@ -37,7 +37,6 @@
                h2 {
                    font-size: em(20, 12);
                    font-weight: $dialogTitleFontWeight;
-                    letter-spacing: $titleLetterSpacing;
                    color: $auiDialogColor;
                }

@@ -58,7 +57,6 @@

                p,span, h3 {
                    font-weight: $labelFontWeight;
-                    letter-spacing: $letterSpacing;
                }

                &:last-child {
@@ -74,7 +72,7 @@
        }
    }

-    .input-control:not(:last-child) {
+    .form-control:not(:last-child) {
        border-bottom: 1px solid $auiBorderColor;
    }
 }
--- a/css/modals/feedback/_feedback.scss
+++ b/css/modals/feedback/_feedback.scss
@@ -48,18 +48,35 @@
 .feedback.aui-dialog2{
    .aui-dialog2{
        &-header {
-            background-color: $auiDialogContentBg;
+            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 {
+                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;
@@ -68,10 +85,12 @@
                .star-label {
                    height: 16px;
                    font-size: 14px;
+                    color: $rateStarLabelColor;
                }
                .star-btn {
+                    display: inline-block;
                    color: $rateStarDefault;
-                    font-size: 36px;
+                    font-size: $rateStarSize;
                    position: relative;
                    cursor: pointer;
                    outline: none;
@@ -97,8 +116,12 @@
            }
        }
        &-footer {
-            background-color: $auiDialogContentBg;
+            background-color: $feedbackContentBg;
            border-top-color: transparent;
+
+            .button-control {
+                color: $feedbackCancelFontColor;
+            }
        }
    }
 }
--- 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,16 @@
+.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,7 +5,7 @@
    width: 100%;
    height: 100%;
    position: fixed;
-    z-index: $overlayZ;
+    z-index: $ringingZ;
    background: linear-gradient(transparent, #000);
    opacity: 0.8;

--- a/css/themes/_light.scss
+++ b/css/themes/_light.scss
@@ -1,3 +1,14 @@
+/**
+ * Base
+ */
+$baseLight: #FFFFFF;
+
+/**
+* Controls
+*/
+$controlBackground: $baseLight;
+$controlColor: #333333;
+
 /**
 * Buttons
 */
@@ -17,30 +28,68 @@ $buttonLinkColor: #0090e8;

 $primaryButtonBackground: #3572b0;
 $primaryButtonHoverBackground: #2a67a5;
-$primaryButtonColor: #fff;
+$primaryButtonColor: $baseLight;
 $primaryButtonFontWeight: 400;

 $buttonShadowColor: #192d4f;

+/**
+* Color variables
+**/
+$defaultBackground: #474747;
+
+/**
+* Connection indicator
+**/
+$downloadConnectionIconColor: #4abd04;
+$uploadConnectionIconColor: #ffa800;
+
 /**
 * Dialog colors
 **/
 $auiDialogColor: #333;
 $auiDialogBg: #f5f5f5;
-$auiDialogContentBg: #fff;
+$auiDialogContentBg: $baseLight;
 $auiBorderColor: #ccc;
 $dialogTitleFontWeight: 400;

+/**
+* Inlay colors
+**/
+$inlayColorBg: lighten($defaultBackground, 20%);
+$inlayBorderColor: lighten($auiDialogContentBg, 10%);
+
 // Main controls
-$inputBackground: #fff;
+$inputBackground: $controlBackground;
 $inputBorderColor: #ccc;
-$inputColor: #333;
+$inputColor: $controlColor;
+$placeHolderColor: #a7a7a7;
+$readOnlyInputColor: #a7a7a7;
 $defaultDarkSelectionColor: #ccc;
-$titleLetterSpacing: 0;
-$letterSpacing: 0;
 $buttonFontWeight: 400;
 $labelFontWeight: 400;
 $hintFontSize: em(13, 14);
 $linkFontColor: #3572b0;
 $linkHoverFontColor: darken(#3572b0, 10%);
-$dropdownColor: #333;
+$dropdownColor: #333;
+$errorColor: #c61600;
+
+// Feedback colors
+$feedbackCancelFontColor: #333;
+
+// Popover colors
+$popoverBg: #000;
+$popoverFontColor: #ffffff;
+$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
+
+// Toolbar
+$splitterColor: #ccc;
+
+/**
+ * Forms
+ */
+//dropdown
+$selectFontColor: $controlColor;
+$selectBg: $controlBackground;
+$selectActiveBg: darken($controlBackground, 5%);
+$selectActiveItemBg: darken($controlBackground, 20%);
--- a/css/themes/_main.scss
+++ b/css/themes/_main.scss
@@ -1,5 +0,0 @@
-/**
-* Switch themes here
-*/
-
-@import "light";
--- a/debian/changelog
+++ b/debian/changelog
@@ -1,4 +1,4 @@
-jitsi-meet (1.0.1-1) unstable; urgency=low
+jitsi-meet-web (1.0.1-1) unstable; urgency=low

  * Initial release. (Closes: #760485)

--- a/debian/control
+++ b/debian/control
@@ -1,4 +1,4 @@
-Source: jitsi-meet
+Source: jitsi-meet-web
 Section: net
 Priority: extra
 Maintainer: Jitsi Team <dev@jitsi.org>
@@ -7,10 +7,10 @@ Build-Depends: debhelper (>= 8.0.0)
 Standards-Version: 3.9.6
 Homepage: https://jitsi.org/meet

-Package: jitsi-meet
+Package: jitsi-meet-web
+Replaces: jitsi-meet (<= 1.0.1525-1)
 Architecture: all
-Depends: ${misc:Depends}, jitsi-videobridge, jitsi-meet-prosody,
- openjdk-8-jre-headless | nginx
+Depends: ${misc:Depends}
 Description: WebRTC JavaScript video conferences
 Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
 Videobridge to provide high quality, scalable video conferences.
@@ -19,9 +19,25 @@ Description: WebRTC JavaScript video conferences
 forwarding and relaying, configured to work with jetty instance
 running embedded into Jitsi Videobridge

+Package: jitsi-meet-web-config
+Architecture: all
+Depends: openssl, openjdk-8-jre-headless | nginx | apache2,
+ jitsi-meet-web
+Description: Configuration for web serving of Jitsi Meet
+ Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
+ Videobridge to provide high quality, scalable video conferences.
+ .
+ It is a web interface to Jitsi Videobridge for audio and video
+ forwarding and relaying, configured to work with jetty instance
+ running embedded into Jitsi Videobridge or using a webserver Nginx or
+ Apache2.
+ .
+ This package contains configuration for Nginx to be used with
+ Jitsi Meet.
+
 Package: jitsi-meet-prosody
 Architecture: all
-Depends: ${misc:Depends}, openssl, prosody | prosody-trunk, jitsi-videobridge, jicofo
+Depends: openssl, prosody | prosody-trunk, jitsi-meet-web
 Description: Prosody configuration for Jitsi Meet
 Jitsi Meet is a WebRTC JavaScript application that uses Jitsi
 Videobridge to provide high quality, scalable video conferences.
--- a/debian/jitsi-meet-prosody.config
+++ b/debian/jitsi-meet-prosody.config
@@ -1,4 +0,0 @@
-#!/bin/sh -e
-
-# Source debconf library.
-. /usr/share/debconf/confmodule
--- a/debian/jitsi-meet-prosody.postinst
+++ b/debian/jitsi-meet-prosody.postinst
@@ -21,13 +21,49 @@ set -e
 case "$1" in
    configure)

-        . /etc/jitsi/videobridge/config
-
-        . /etc/jitsi/jicofo/config
-
        # loading debconf
        . /usr/share/debconf/confmodule

+        # try to get host from jitsi-videobridge
+        db_get jitsi-videobridge/jvb-hostname
+        if [ -z "$RET" ] ; then
+            # server hostname
+            db_set jitsi-videobridge/jvb-hostname "localhost"
+            db_input critical jitsi-videobridge/jvb-hostname || true
+            db_go
+        fi
+        JVB_HOSTNAME="$RET"
+
+        db_get jitsi-videobridge/jvbsecret
+        if [ -z "$RET" ] ; then
+            db_input critical jitsi-videobridge/jvbsecret || true
+            db_go
+        fi
+        JVB_SECRET="$RET"
+
+        db_get jicofo/jicofo-authuser
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofo-authuser || true
+            db_go
+        fi
+        JICOFO_AUTH_USER="$RET"
+
+        db_get jicofo/jicofo-authpassword
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofo-authpassword || true
+            db_go
+        fi
+        JICOFO_AUTH_PASSWORD="$RET"
+
+        db_get jicofo/jicofosecret
+        if [ -z "$RET" ] ; then
+            db_input critical jicofo/jicofosecret || true
+            db_go
+        fi
+        JICOFO_SECRET="$RET"
+
+        JICOFO_AUTH_DOMAIN="auth.$JVB_HOSTNAME"
+
        # detect dpkg-reconfigure, just delete old links
        db_get jitsi-meet-prosody/jvb-hostname
        JVB_HOSTNAME_OLD=$RET
@@ -38,7 +74,7 @@ case "$1" in
        fi

        # stores the hostname so we will reuse it later, like in purge
-        db_set jitsi-meet-prosody/jvb-hostname $JVB_HOSTNAME
+        db_set jitsi-meet-prosody/jvb-hostname "$JVB_HOSTNAME"

        # and we're done with debconf
        db_stop
@@ -68,21 +104,21 @@ case "$1" in
            fi
        fi
        # UPGRADE to server side focus check if focus is configured
-        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"auth.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG; then
-            echo -e "\nVirtualHost \"auth.$JVB_HOSTNAME\"" >> $PROSODY_HOST_CONFIG
+        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_HOST_CONFIG; then
+            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_HOST_CONFIG
            echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_HOST_CONFIG
-            sed -i "s/Component \"conference.$JVB_HOSTNAME\" \"muc\"/Component \"conference.$JVB_HOSTNAME\" \"muc\"\nadmins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n/g" $PROSODY_HOST_CONFIG
+            sed -i "s/Component \"conference.$JVB_HOSTNAME\" \"muc\"/Component \"conference.$JVB_HOSTNAME\" \"muc\"\nadmins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_HOST_CONFIG
            echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_HOST_CONFIG
            echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_HOST_CONFIG
            PROSODY_CREATE_JICOFO_USER="true"
        # UPGRADE to server side focus on old config(/etc/prosody/prosody.cfg.lua)
-        elif [ ! -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"auth.$JVB_HOSTNAME\"" $PROSODY_CONFIG_OLD; then
-            echo -e "\nVirtualHost \"auth.$JVB_HOSTNAME\"" >> $PROSODY_CONFIG_OLD
+        elif [ ! -f $PROSODY_HOST_CONFIG ] && ! grep -q "VirtualHost \"$JICOFO_AUTH_DOMAIN\"" $PROSODY_CONFIG_OLD; then
+            echo -e "\nVirtualHost \"$JICOFO_AUTH_DOMAIN\"" >> $PROSODY_CONFIG_OLD
            echo -e "        authentication = \"internal_plain\"\n" >> $PROSODY_CONFIG_OLD
            if ! grep -q "admins = { }" $PROSODY_CONFIG_OLD; then
-                echo -e "admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n" >> $PROSODY_CONFIG_OLD
+                echo -e "admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n" >> $PROSODY_CONFIG_OLD
            else
-                sed -i "s/admins = { }/admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\" }\n/g" $PROSODY_CONFIG_OLD
+                sed -i "s/admins = { }/admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\" }\n/g" $PROSODY_CONFIG_OLD
            fi
            echo -e "Component \"focus.$JVB_HOSTNAME\"" >> $PROSODY_CONFIG_OLD
            echo -e "    component_secret=\"$JICOFO_SECRET\"\n" >> $PROSODY_CONFIG_OLD
@@ -109,8 +145,6 @@ case "$1" in

        if [ "$PROSODY_CONFIG_PRESENT" = "false" ]; then
            invoke-rc.d prosody restart
-            invoke-rc.d jitsi-videobridge restart
-            invoke-rc.d jicofo restart
        fi
    ;;

--- a/debian/jitsi-meet-prosody.postrm
+++ b/debian/jitsi-meet-prosody.postrm
@@ -36,6 +36,9 @@ case "$1" in
            rm -f /etc/prosody/conf.avail/$JVB_HOSTNAME.cfg.lua
            rm -f /etc/prosody/conf.d/$JVB_HOSTNAME.cfg.lua
        fi
+
+        # Clear the debconf variable
+        db_purge
    ;;

    upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
--- a/debian/jitsi-meet-prosody.templates
+++ b/debian/jitsi-meet-prosody.templates
@@ -2,3 +2,29 @@ Template: jitsi-meet-prosody/jvb-hostname
 Type: string
 _Description: The hostname of the current installation:
 The value for the hostname that is set in Jitsi Videobridge installation.
+
+Template: jitsi-videobridge/jvb-hostname
+Type: string
+_Description: The hostname of the current installation:
+ The value for the hostname that is set in Jitsi Videobridge installation.
+
+Template: jitsi-videobridge/jvbsecret
+Type: password
+_Description: Jitsi Videobridge Component secret:
+ The secret used by Jitsi Videobridge to connect to xmpp server as component.
+
+Template: jicofo/jicofo-authuser
+Type: string
+Default: focus
+_Description: Jicofo username:
+ The jicofo needs an authenticated admin user to connect to xmpp server.
+
+Template: jicofo/jicofo-authpassword
+Type: password
+_Description: Jicofo user password:
+ The secret used to connect to xmpp server as jicofo user.
+
+Template: jicofo/jicofosecret
+Type: password
+_Description: Jicofo Component secret:
+ The secret used to connect to xmpp server as component
--- a/debian/jitsi-meet-tokens.postinst
+++ b/debian/jitsi-meet-tokens.postinst
@@ -21,17 +21,12 @@ set -e
 case "$1" in
    configure)

-        if [ -f "/etc/jitsi/videobridge/config" ] ; then
-            . /etc/jitsi/videobridge/config
-        fi
-
-        if [ -f "/etc/jitsi/jicofo/config" ] ; then
-            . /etc/jitsi/jicofo/config
-        fi
-
        # loading debconf
        . /usr/share/debconf/confmodule

+        db_get jitsi-meet-prosody/jvb-hostname
+        JVB_HOSTNAME="$RET"
+
        db_get jitsi-meet-tokens/appid
        if [ "$RET" = "false" ] ; then
            echo "Application ID is mandatory"
@@ -45,14 +40,10 @@ case "$1" in
        fi
        APP_SECRET=$RET

-        # We can adjust Prosody config only if there is Jvb or Jicofo domain configured
        PROSODY_HOST_CONFIG="/etc/prosody/conf.avail/$JVB_HOSTNAME.cfg.lua"
-        if [ ! -f "$PROSODY_HOST_CONFIG" ] ; then
-            PROSODY_HOST_CONFIG="/etc/prosody/conf.avail/$JICOFO_HOSTNAME.cfg.lua"
-        fi

        # Store config filename for purge
-        db_set jitsi-meet-prosody/prosody_config $PROSODY_HOST_CONFIG
+        db_set jitsi-meet-prosody/prosody_config "$PROSODY_HOST_CONFIG"

        db_stop

--- a/debian/jitsi-meet-tokens.postrm
+++ b/debian/jitsi-meet-tokens.postrm
@@ -52,6 +52,8 @@ case "$1" in
    ;;

    purge)
+        # Clear the debconf variable
+        db_purge
    ;;

    upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
--- a/debian/jitsi-meet-web-config.config
+++ b/debian/jitsi-meet-web-config.config
--- a/debian/jitsi-meet-web-config.dirs
+++ b/debian/jitsi-meet-web-config.dirs
--- a/debian/jitsi-meet-web-config.postinst
+++ b/debian/jitsi-meet-web-config.postinst
@@ -1,5 +1,5 @@
 #!/bin/bash
-# postinst script for jitsi-meet
+# postinst script for jitsi-meet-web-config
 #
 # see: dh_installdeb(1)

@@ -20,13 +20,19 @@ set -e
 case "$1" in
    configure)

-        JVB_ETC_CONFIG="/etc/jitsi/videobridge/config"
-
-        . $JVB_ETC_CONFIG
-
        # loading debconf
        . /usr/share/debconf/confmodule

+        # try to get host from jitsi-videobridge
+        db_get jitsi-videobridge/jvb-hostname
+        if [ -z "$RET" ] ; then
+            # server hostname
+            db_set jitsi-videobridge/jvb-hostname "localhost"
+            db_input critical jitsi-videobridge/jvb-hostname || true
+            db_go
+        fi
+        JVB_HOSTNAME="$RET"
+
        # detect dpkg-reconfigure
        RECONFIGURING="false"
        db_get jitsi-meet/jvb-hostname
@@ -49,22 +55,54 @@ case "$1" in
        if [ "$NGINX_INSTALL_CHECK" = "installed" ] || [ "$NGINX_INSTALL_CHECK" = "unpacked" ] ; then
            FORCE_NGINX="true"
        fi
+        APACHE_INSTALL_CHECK="$(dpkg-query -f '${Status}' -W 'apache2' 2>/dev/null | awk '{print $3}' || true)"
+        if [ "$APACHE_INSTALL_CHECK" = "installed" ] || [ "$APACHE_INSTALL_CHECK" = "unpacked" ] ; then
+            FORCE_APACHE="true"
+        fi

-        # SSL for nginx
-        db_get jitsi-meet/cert-choice
-        CERT_CHOICE="$RET"
-        UPLOADED_CERT_CHOICE="A certificate is available and the files are uploaded on the server"
+        # if first time config ask for certs, or if we are reconfiguring
+        if [ -z "$JVB_HOSTNAME_OLD" ] || [ "$RECONFIGURING" = "true" ] ; then
+            # SSL for nginx
+            db_get jitsi-meet/cert-choice
+            CERT_CHOICE="$RET"
+            UPLOADED_CERT_CHOICE="A certificate is available and the files are uploaded on the server"
+
+            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
+                db_input critical jitsi-meet/cert-path-key || true
+                db_go
+                db_get jitsi-meet/cert-path-key
+                CERT_KEY="$RET"
+                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
+                db_input critical jitsi-meet/cert-path-crt || true
+                db_go
+                db_get jitsi-meet/cert-path-crt
+                CERT_CRT="$RET"
+            else
+                # create self-signed certs
+                CERT_KEY="/etc/jitsi/meet/$JVB_HOSTNAME.key"
+                CERT_CRT="/etc/jitsi/meet/$JVB_HOSTNAME.crt"
+                HOST="$( (hostname -s; echo localhost) | head -n 1)"
+                DOMAIN="$( (hostname -d; echo localdomain) | head -n 1)"
+                openssl req -new -newkey rsa:4096 -days 365 -nodes -x509 -subj \
+                    "/O=$DOMAIN/OU=$HOST/CN=$JVB_HOSTNAME/emailAddress=webmaster@$HOST.$DOMAIN" \
+                    -keyout $CERT_KEY \
+                    -out $CERT_CRT
+            fi
+        fi

        # jitsi meet
        JITSI_MEET_CONFIG="/etc/jitsi/meet/$JVB_HOSTNAME-config.js"
        if [ ! -f $JITSI_MEET_CONFIG ] ; then
-            cp /usr/share/doc/jitsi-meet/config.js $JITSI_MEET_CONFIG
+            cp /usr/share/doc/jitsi-meet-web/config.js $JITSI_MEET_CONFIG
            sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" $JITSI_MEET_CONFIG
        fi

        # this is new install let's configure jvb to serve meet
-        if [[ -z $FORCE_NGINX && ( -z $JVB_HOSTNAME_OLD || "$JVB_SERVE" = "true" ) ]] ; then
+        # no-nginx, no-apache installed on machine, this is new install or reconfiguring old one which have jvb_serve set
+        if [[ -z "$FORCE_NGINX" && -z "$FORCE_APACHE" && ( -z "$JVB_HOSTNAME_OLD" || ( "$JVB_SERVE" = "true" && "$RECONFIGURING" = "true" )) ]] ; then

+            JVB_ETC_CONFIG="/etc/jitsi/videobridge/config"
            JVB_CONFIG="/etc/jitsi/videobridge/sip-communicator.properties"

            # this is a reconfigure, lets just delete old links
@@ -112,34 +150,19 @@ case "$1" in
                chmod 755 /etc/authbind/byport/443
            fi

-            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
-                # create jks from uploaded certs
-                openssl pkcs12 -export \
-                    -in /etc/ssl/$JVB_HOSTNAME.crt \
-                    -inkey /etc/ssl/$JVB_HOSTNAME.key \
-                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
-                keytool -importkeystore \
-                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
-                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
-                    -srcstoretype pkcs12 \
-                    -noprompt -storepass changeit -srcstorepass changeit
-            else
-                # create jks from self-signed certs
-                openssl pkcs12 -export \
-                    -in /var/lib/prosody/$JVB_HOSTNAME.crt \
-                    -inkey /var/lib/prosody/$JVB_HOSTNAME.key \
-                    -passout pass:changeit > /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
-                keytool -importkeystore \
-                    -srckeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.p12 \
-                    -destkeystore /etc/jitsi/videobridge/$JVB_HOSTNAME.jks \
-                    -srcstoretype pkcs12 \
-                    -noprompt -storepass changeit -srcstorepass changeit
-            fi
+            CERT_P12="/etc/jitsi/videobridge/$JVB_HOSTNAME.p12"
+            CERT_JKS="/etc/jitsi/videobridge/$JVB_HOSTNAME.jks"
+            # create jks from  certs
+            openssl pkcs12 -export \
+                -in $CERT_CRT -inkey $CERT_KEY -passout pass:changeit > $CERT_P12
+            keytool -importkeystore -destkeystore $CERT_JKS \
+                -srckeystore $CERT_P12 -srcstoretype pkcs12 \
+                -noprompt -storepass changeit -srcstorepass changeit

            db_set jitsi-meet/jvb-serve "true"

            invoke-rc.d jitsi-videobridge restart
-        elif [[ "$FORCE_NGINX" = "true" || ( -n $JVB_HOSTNAME_OLD && "$JVB_SERVE" = "false" ) ]] ; then
+        elif [[ "$FORCE_NGINX" = "true" && ( -z "$JVB_HOSTNAME_OLD" || "$RECONFIGURING" = "true" ) ]] ; then
            # this is a reconfigure, lets just delete old links
            if [ "$RECONFIGURING" = "true" ] ; then
                rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME_OLD.conf
@@ -148,7 +171,7 @@ case "$1" in

            # nginx conf
            if [ ! -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf ] ; then
-                cp /usr/share/doc/jitsi-meet/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
+                cp /usr/share/doc/jitsi-meet-web/jitsi-meet.example /etc/nginx/sites-available/$JVB_HOSTNAME.conf
                if [ ! -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf ] ; then
                    ln -s /etc/nginx/sites-available/$JVB_HOSTNAME.conf /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
                fi
@@ -156,28 +179,47 @@ case "$1" in
            fi

            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
-                db_set jitsi-meet/cert-path-key "/etc/ssl/$JVB_HOSTNAME.key"
-                db_input critical jitsi-meet/cert-path-key || true
-                db_go
-                db_get jitsi-meet/cert-path-key
-                CERT_KEY="$RET"
-                db_set jitsi-meet/cert-path-crt "/etc/ssl/$JVB_HOSTNAME.crt"
-                db_input critical jitsi-meet/cert-path-crt || true
-                db_go
-                db_get jitsi-meet/cert-path-crt
-                CERT_CRT="$RET"
                # replace self-signed certificate paths with user provided ones
                CERT_KEY_ESC=$(echo $CERT_KEY | sed 's/\./\\\./g')
                CERT_KEY_ESC=$(echo $CERT_KEY_ESC | sed 's/\//\\\//g')
-                sed -i "s/ssl_certificate_key\ \/var\/lib\/prosody\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
+                sed -i "s/ssl_certificate_key\ \/etc\/jitsi\/meet\/.*key/ssl_certificate_key\ $CERT_KEY_ESC/g" \
                    /etc/nginx/sites-available/$JVB_HOSTNAME.conf
                CERT_CRT_ESC=$(echo $CERT_CRT | sed 's/\./\\\./g')
                CERT_CRT_ESC=$(echo $CERT_CRT_ESC | sed 's/\//\\\//g')
-                sed -i "s/ssl_certificate\ \/var\/lib\/prosody\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
+                sed -i "s/ssl_certificate\ \/etc\/jitsi\/meet\/.*crt/ssl_certificate\ $CERT_CRT_ESC/g" \
                    /etc/nginx/sites-available/$JVB_HOSTNAME.conf
            fi

            invoke-rc.d nginx reload
+        elif [[ "$FORCE_APACHE" = "true" && ( -z "$JVB_HOSTNAME_OLD" || "$RECONFIGURING" = "true" ) ]] ; then
+            # this is a reconfigure, lets just delete old links
+            if [ "$RECONFIGURING" = "true" ] ; then
+                a2dissite $JVB_HOSTNAME_OLD.conf
+                rm -f /etc/jitsi/meet/$JVB_HOSTNAME_OLD-config.js
+            fi
+
+            # apache2 config
+            if [ ! -f /etc/apache2/sites-available/$JVB_HOSTNAME.conf ] ; then
+                # when creating new config, make sure all needed modules are enabled
+                a2enmod rewrite ssl headers proxy_http include
+                cp /usr/share/doc/jitsi-meet-web/jitsi-meet.example-apache /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+                a2ensite $JVB_HOSTNAME.conf
+                sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            if [ "$CERT_CHOICE" = "$UPLOADED_CERT_CHOICE" ] ; then
+                # replace self-signed certificate paths with user provided ones
+                CERT_KEY_ESC=$(echo $CERT_KEY | sed 's/\./\\\./g')
+                CERT_KEY_ESC=$(echo $CERT_KEY_ESC | sed 's/\//\\\//g')
+                sed -i "s/SSLCertificateKeyFile\ \/etc\/jitsi\/meet\/.*key/SSLCertificateKeyFile\ $CERT_KEY_ESC/g" \
+                    /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+                CERT_CRT_ESC=$(echo $CERT_CRT | sed 's/\./\\\./g')
+                CERT_CRT_ESC=$(echo $CERT_CRT_ESC | sed 's/\//\\\//g')
+                sed -i "s/SSLCertificateFile\ \/etc\/jitsi\/meet\/.*crt/SSLCertificateFile\ $CERT_CRT_ESC/g" \
+                    /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            fi
+
+            invoke-rc.d apache2 reload
        fi

        # and we're done with debconf
--- a/debian/jitsi-meet-web-config.postrm
+++ b/debian/jitsi-meet-web-config.postrm
@@ -1,5 +1,5 @@
 #!/bin/sh
-# postrm script for jitsi-meet
+# postrm script for jitsi-meet-web-config
 #
 # see: dh_installdeb(1)

@@ -27,6 +27,9 @@ case "$1" in
        if [ -x "/etc/init.d/nginx" ]; then
            invoke-rc.d nginx reload
        fi
+        if [ -x "/etc/init.d/apache2" ]; then
+            invoke-rc.d apache2 reload
+        fi
    ;;
    purge)
        db_get jitsi-meet/jvb-hostname
@@ -35,9 +38,15 @@ case "$1" in
            rm -f /etc/jitsi/meet/$JVB_HOSTNAME-config.js
            rm -f /etc/nginx/sites-available/$JVB_HOSTNAME.conf
            rm -f /etc/nginx/sites-enabled/$JVB_HOSTNAME.conf
+            rm -f /etc/apache2/sites-available/$JVB_HOSTNAME.conf
+            rm -f /etc/apache2/sites-enabled/$JVB_HOSTNAME.conf
            rm -f /etc/jitsi/videobridge/$JVB_HOSTNAME.jks
            rm -f /etc/jitsi/videobridge/$JVB_HOSTNAME.p12
+            rm -f /etc/jitsi/meet/$JVB_HOSTNAME.key
+            rm -f /etc/jitsi/meet/$JVB_HOSTNAME.crt
        fi
+        # Clear the debconf variable
+        db_purge
    ;;
    upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
    ;;
--- a/debian/jitsi-meet-web-config.templates
+++ b/debian/jitsi-meet-web-config.templates
@@ -30,3 +30,8 @@ Type: boolean
 Default: false
 _Description: for internal use
 for internal use.
+
+Template: jitsi-videobridge/jvb-hostname
+Type: string
+_Description: Hostname:
+ The Jitsi Meet web config package needs the DNS hostname of your instance.
--- a/debian/jitsi-meet-web.README.Debian
+++ b/debian/jitsi-meet-web.README.Debian
--- a/debian/jitsi-meet-web.docs
+++ b/debian/jitsi-meet-web.docs
@@ -1,4 +1,5 @@
 README.md
 doc/debian/jitsi-meet/jitsi-meet.example
+doc/debian/jitsi-meet/jitsi-meet.example-apache
 doc/debian/jitsi-meet/README
 config.js
--- a/debian/jitsi-meet-web.install
+++ b/debian/jitsi-meet-web.install
--- a/debian/po/POTFILES.in
+++ b/debian/po/POTFILES.in
@@ -1 +1 @@
-[type: gettext/rfc822deb] jitsi-meet.templates
+[type: gettext/rfc822deb] jitsi-meet-web-config.templates
--- a/debian/po/templates.pot
+++ b/debian/po/templates.pot
@@ -1,10 +1,14 @@
+# SOME DESCRIPTIVE TITLE.
+# Copyright (C) YEAR THE PACKAGE'S COPYRIGHT HOLDER
+# This file is distributed under the same license as the jitsi-meet-web package.
+# FIRST AUTHOR <EMAIL@ADDRESS>, YEAR.
 #
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: jitsi-meet\n"
-"Report-Msgid-Bugs-To: jitsi-meet@packages.debian.org\n"
-"POT-Creation-Date: 2014-09-03 17:26+0200\n"
+"Project-Id-Version: jitsi-meet-web\n"
+"Report-Msgid-Bugs-To: jitsi-meet-web@packages.debian.org\n"
+"POT-Creation-Date: 2016-11-15 22:39+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -15,25 +19,25 @@ msgstr ""

 #. Type: select
 #. Choices
-#: ../jitsi-meet.templates:1001
+#: ../jitsi-meet-web-config.templates:1001
 msgid "Self-signed certificate will be generated"
 msgstr ""

 #. Type: select
 #. Choices
-#: ../jitsi-meet.templates:1001
+#: ../jitsi-meet-web-config.templates:1001
 msgid "A certificate is available and the files are uploaded on the server"
 msgstr ""

 #. Type: select
 #. Description
-#: ../jitsi-meet.templates:1002
+#: ../jitsi-meet-web-config.templates:1002
 msgid "SSL certificate for the Jitsi Meet instance"
 msgstr ""

 #. Type: select
 #. Description
-#: ../jitsi-meet.templates:1002
+#: ../jitsi-meet-web-config.templates:1002
 msgid ""
 "Jitsi Meet is best to be set up with an SSL certificate. Having no "
 "certificate, a self-signed one will be generated. Having a certificate "
@@ -44,13 +48,13 @@ msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:2001
+#: ../jitsi-meet-web-config.templates:2001
 msgid "Full local server path to the SSL key file:"
 msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:2001
+#: ../jitsi-meet-web-config.templates:2001
 msgid ""
 "The full path to the SSL key file on the server. If it has not been "
 "uploaded, now is a good time to do so."
@@ -58,13 +62,13 @@ msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:3001
+#: ../jitsi-meet-web-config.templates:3001
 msgid "Full local server path to the SSL certificate file:"
 msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:3001
+#: ../jitsi-meet-web-config.templates:3001
 msgid ""
 "The full path to the SSL certificate file on the server. If you haven't "
 "uploaded it, now is a good time to upload it in another console."
@@ -72,27 +76,38 @@ msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:4001
+#: ../jitsi-meet-web-config.templates:4001
 msgid "The hostname of the current installation:"
 msgstr ""

 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:4001
+#: ../jitsi-meet-web-config.templates:4001
 msgid ""
 "The value for the hostname that is set in Jitsi Videobridge installation."
 msgstr ""

-
-#. Type: string
+#. Type: boolean
 #. Description
-#: ../jitsi-meet.templates:5001
+#: ../jitsi-meet-web-config.templates:5001
 msgid "for internal use"
 msgstr ""

+#. Type: boolean
+#. Description
+#: ../jitsi-meet-web-config.templates:5001
+msgid "for internal use."
+msgstr ""
+
 #. Type: string
 #. Description
-#: ../jitsi-meet.templates:5001
-msgid ""
-"Jitsi Videobridge installation can use its internal jetty to serve static meet pages."
+#: ../jitsi-meet-web-config.templates:6001
+msgid "Hostname:"
+msgstr ""
+
+#. Type: string
+#. Description
+#: ../jitsi-meet-web-config.templates:6001
+msgid ""
+"The Jitsi Meet web config package needs the DNS hostname of your instance."
 msgstr ""
--- a/doc/api.md
+++ b/doc/api.md
@@ -33,7 +33,7 @@ You can overwrite options set in config.js and interface_config.js. For example,
 ```javascript
    var configOverwrite = {enableSimulcast: false};
    var interfaceConfigOverwrite = {filmStripOnly: true};
-    var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, true, configOverwrite, interfaceConfigOverwrite);
+    var api = new JitsiMeetExternalAPI(domain, room, width, height, htmlElement, configOverwrite, interfaceConfigOverwrite);
 ```

 Controlling embedded Jitsi Meet Conference
@@ -54,7 +54,7 @@ Currently we support the following commands:
 * **displayName** - sets the display name of the local participant. This command requires one argument -
 the new display name to be set
 ```
-api.executeCommand('displayName', ['New Nickname']);
+api.executeCommand('displayName', 'New Nickname');
 ```
 * **toggleAudio** - mutes / unmutes the audio for the local participant. No arguments are required.
 ```
--- a/doc/debian/jitsi-meet/jitsi-meet.example
+++ b/doc/debian/jitsi-meet/jitsi-meet.example
@@ -15,11 +15,12 @@ server {

    add_header Strict-Transport-Security "max-age=31536000";

-    ssl_certificate /var/lib/prosody/jitsi-meet.example.com.crt;
-    ssl_certificate_key /var/lib/prosody/jitsi-meet.example.com.key;
+    ssl_certificate /etc/jitsi/meet/jitsi-meet.example.com.crt;
+    ssl_certificate_key /etc/jitsi/meet/jitsi-meet.example.com.key;

    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/doc/debian/jitsi-meet/jitsi-meet.example-apache
+++ b/doc/debian/jitsi-meet/jitsi-meet.example-apache
@@ -0,0 +1,43 @@
+
+<VirtualHost *:80>
+    ServerName jitsi-meet.example.com
+    Redirect permanent / https://jitsi-meet.example.com/
+    RewriteEngine On
+    RewriteCond %{HTTPS} off
+    RewriteRule ^ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
+</VirtualHost>
+
+<VirtualHost *:443>
+
+  ServerName jitsi-meet.example.com
+
+  SSLProtocol TLSv1 TLSv1.1 TLSv1.2
+  SSLEngine on
+  SSLProxyEngine on
+  SSLCertificateFile /etc/jitsi/meet/jitsi-meet.example.com.crt
+  SSLCertificateKeyFile /etc/jitsi/meet/jitsi-meet.example.com.key
+  SSLCipherSuite "EECDH+ECDSA+AESGCM:EECDH+aRSA+AESGCM:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA256:EECDH+ECDSA+SHA384:EECDH+ECDSA+SHA256:EECDH+aRSA+SHA384:EDH+aRSA+AESGCM:EDH+aRSA+SHA256:EDH+aRSA:EECDH:!aNULL:!eNULL:!MEDIUM:!LOW:!3DES:!MD5:!EXP:!PSK:!SRP:!DSS:!RC4:!SEED"
+  SSLHonorCipherOrder on
+  Header set Strict-Transport-Security "max-age=31536000"
+
+  DocumentRoot "/usr/share/jitsi-meet"
+  <Directory "/usr/share/jitsi-meet">
+    Options Indexes MultiViews Includes FollowSymLinks
+    AddOutputFilter Includes html
+    AllowOverride All
+    Order allow,deny
+    Allow from all
+  </Directory>
+
+  Alias "/config.js" "/etc/jitsi/meet/jitsi-meet.example.com-config.js"
+  <Location /config.js>
+    Require all granted
+  </Location>
+
+  ProxyPreserveHost on
+  ProxyPass /http-bind http://localhost:5280/http-bind/
+  ProxyPassReverse /http-bind http://localhost:5280/http-bind/
+
+  RewriteEngine on
+  RewriteRule ^/([a-zA-Z0-9]+)$ /index.html
+</VirtualHost>
--- a/index.html
+++ b/index.html
@@ -6,6 +6,38 @@
    <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",
+            "logging_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>
@@ -19,238 +51,7 @@
    <!--#include virtual="plugin.head.html" -->
  </head>
  <body>
-    <div id="welcome_page">
-        <div id="welcome_page_header">
-            <a target="_new">
-                <div class="watermark leftwatermark"></div>
-            </a>
-            <a target="_new">
-                <div class="watermark rightwatermark"></div>
-            </a>
-            <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>
-                    </div>
-            </div>
-            <div id="brand_header"></div>
-            <input type='checkbox' name='checkbox' id="disable_welcome"/>
-            <label for="disable_welcome" class="disable_welcome_position" data-i18n="welcomepage.disable"></label>
-            <div id="header_text">
-                <!--#include virtual="plugin.header.text.html" -->
-            </div>
-        </div>
-        <div id="welcome_page_main">
-            <div id="features">
-                <div class="feature_row">
-                    <div class="feature_holder">
-                        <div class="feature_icon" data-i18n="welcomepage.feature1.title" ></div>
-                        <div class="feature_description" data-i18n="welcomepage.feature1.content" data-i18n-options='{ "postProcess": "resolveAppName" }'>
-                        </div>
-                    </div>
-                    <div class="feature_holder">
-                        <div class="feature_icon" data-i18n="welcomepage.feature2.title" ></div>
-                        <div class="feature_description" data-i18n="welcomepage.feature2.content">
-                        </div>
-                    </div>
-                    <div class="feature_holder">
-                        <div class="feature_icon" data-i18n="welcomepage.feature3.title" ></div>
-                        <div class="feature_description" data-i18n="welcomepage.feature3.content" data-i18n-options='{ "postProcess": "resolveAppName" }'>
-                        </div>
-                    </div>
-                    <div class="feature_holder">
-                        <div class="feature_icon" data-i18n="welcomepage.feature4.title" ></div>
-                        <div class="feature_description" data-i18n="welcomepage.feature4.content">
-                        </div>
-                    </div>
-                </div>
-                <div class="feature_row">
-                    <div class="feature_holder">
-                            <div class="feature_icon" data-i18n="welcomepage.feature5.title" ></div>
-                            <div class="feature_description" data-i18n="welcomepage.feature5.content" data-i18n-options='{ "postProcess": "resolveAppName" }'>
-                            </div>
-                    </div>
-                    <div class="feature_holder">
-                            <div class="feature_icon" data-i18n="welcomepage.feature6.title" ></div>
-                            <div class="feature_description" data-i18n="welcomepage.feature6.content" data-i18n-options='{ "postProcess": "resolveAppName" }'>
-                            </div>
-                    </div>
-                    <div class="feature_holder">
-                            <div class="feature_icon" data-i18n="welcomepage.feature7.title" ></div>
-                            <div class="feature_description" data-i18n="welcomepage.feature7.content" data-i18n-options='{ "postProcess": "resolveAppName" }'></div>
-                    </div>
-                    <div class="feature_holder">
-                            <div class="feature_icon" data-i18n="welcomepage.feature8.title" ></div>
-                            <div class="feature_description" data-i18n="welcomepage.feature8.content"></div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!--#include virtual="plugin.welcomepage.footer.html" -->
-    </div>
-    <div id="videoconference_page">
-        <div id="mainToolbarContainer">
-                <div id="notice" class="notice" style="display: none">
-                    <span id="noticeText" class="noticeText"></span>
-                </div>
-                <span id="mainToolbar" class="toolbar"></span>
-        </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" shortcut="contactlistpopover">
-                <span class="badge-round">
-                    <span id="numberOfParticipants"></span>
-                </span>
-            </a>
-            <!--a class="button icon-link" id="toolbar_button_link"></a-->
-            <a class="button icon-chat" id="toolbar_button_chat" shortcut="toggleChatPopover">
-                <span class="badge-round">
-                    <span id="unreadMessages"></span>
-                </span>
-            </a>
-            <a class="button" id="toolbar_button_record" style="display: none"></a>
-            <a class="button icon-share-doc" id="toolbar_button_etherpad"></a>
-            <a class="button icon-shared-video" id="toolbar_button_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" style="display: none"></a>
-            <a class="button icon-dialpad" id="toolbar_button_dialpad" style="display: none"></a>
-            <a class="button icon-settings" id="toolbar_button_settings"></a>
-            <a class="button icon-raised-hand" id="toolbar_button_raisehand" shortcut="raiseHandPopover"></a>
-            <a class="button icon-toggle-filmstrip" id="toolbar_film_strip" data-container="body" shortcut="filmstripPopover"></a>
-            <a class="button icon-feedback" id="feedbackButton"></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>
-                </div>
-            </div>
-        </div>
-        <div id="videospace">
-            <div id="largeVideoContainer" class="videocontainer">
-                <div id="sharedVideo"><div id="sharedVideoIFrame"></div></div>
-                <div id="etherpad"></div>
-                <a target="_new"><div class="watermark leftwatermark"></div></a>
-                <a target="_new"><div class="watermark rightwatermark"></div></a>
-                <a class="poweredby" href="http://jitsi.org" target="_new">
-                    <span data-i18n="poweredby"></span> jitsi.org
-                </a>
-                <div id="dominantSpeaker">
-                    <div class="dynamic-shadow"></div>
-                    <img id="dominantSpeakerAvatar" src=""/>
-                </div>
-                <span id="remoteConnectionMessage"></span>
-                <div id="largeVideoWrapper">
-                    <video id="largeVideo" muted="true" autoplay></video>
-                </div>
-                <span id="localConnectionMessage"></span>
-                <span id="videoResolutionLabel">HD</span>
-                <span id="recordingLabel" class="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 videocontainer_small">
-                    <span id="localVideoWrapper">
-                        <!--<video id="localVideo" autoplay muted></video> - is now per stream generated -->
-                    </span>
-                    <audio id="localAudio" autoplay muted></audio>
-                    <div class="videocontainer__toolbar"></div>
-                </span>
-                <audio id="userJoined" src="sounds/joined.wav" preload="auto"></audio>
-                <audio id="userLeft" src="sounds/left.wav" preload="auto"></audio>
-            </div>
-        </div>
-    </div>
+    <div id="react"></div>
    <div id="keyboard-shortcuts" class="keyboard-shortcuts" style="display:none;">
        <div class="content">
            <ul id="keyboard-shortcuts-list" class="shortcuts-list">
--- a/interface_config.js
+++ b/interface_config.js
@@ -16,17 +16,32 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
    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,
-    // 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', 'fullscreen', 'hangup'], // jshint ignore:line
+    /**
+     * If we should show authentication block in profile
+     */
+    AUTHENTICATION_ENABLE: true,
    /**
     * 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,
-    TOOLBAR_BUTTONS: ['profile', 'authentication', 'microphone', 'camera', 'desktop', 'recording', 'security', 'raisehand', 'chat', 'etherpad', 'sharedvideo', 'sip', 'dialpad', 'settings', 'hangup', 'filmstrip', 'contacts'], // jshint ignore:line
+    /**
+     * 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
@@ -41,16 +56,15 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
    RANDOM_AVATAR_URL_PREFIX: false,
    RANDOM_AVATAR_URL_SUFFIX: false,
    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.7)",
-    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.4)"
+    AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
+    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+    POLICY_LOGO: null,
+    LOCAL_THUMBNAIL_RATIO: 16/9, //16:9
+    REMOTE_THUMBNAIL_RATIO: 1 //1:1
 };
--- 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.m
+++ b/ios/app/AppDelegate.m
@@ -8,7 +8,8 @@
 */

 #import "AppDelegate.h"
-
+#import <Crashlytics/Crashlytics.h>
+#import <Fabric/Fabric.h>
 #import "RCTBundleURLProvider.h"
 #import "RCTLinkingManager.h"
 #import "RCTRootView.h"
@@ -28,6 +29,8 @@ continueUserActivity:(NSUserActivity *)userActivity
 - (BOOL)application:(UIApplication *)application
 didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
 {
+  [Fabric with:@[[Crashlytics class]]];
+
  NSURL *jsCodeLocation
    = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios"
                                                     fallbackResource:nil];
--- a/ios/app/Base.lproj/LaunchScreen.xib
+++ b/ios/app/Base.lproj/LaunchScreen.xib
@@ -1,9 +1,8 @@
 <?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">
+<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" colorMatched="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"/>
@@ -12,31 +11,23 @@
            <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>
+                <imageView opaque="NO" userInteractionEnabled="NO" contentMode="center" image="LaunchScreen" translatesAutoresizingMaskIntoConstraints="NO" id="4B8-Xf-NDE">
+                    <rect key="frame" x="0.0" y="0.0" width="480" height="480"/>
+                </imageView>
            </subviews>
-            <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
+            <color key="backgroundColor" red="0.090196078431372548" green="0.62745098039215685" blue="0.85882352941176465" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <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"/>
+                <constraint firstAttribute="bottom" secondItem="4B8-Xf-NDE" secondAttribute="bottom" id="aFF-BR-glX"/>
+                <constraint firstItem="4B8-Xf-NDE" firstAttribute="leading" secondItem="iN0-l3-epB" secondAttribute="leading" id="glR-YN-1GF"/>
+                <constraint firstAttribute="trailing" secondItem="4B8-Xf-NDE" secondAttribute="trailing" id="tva-gl-jRX"/>
+                <constraint firstItem="4B8-Xf-NDE" firstAttribute="top" secondItem="iN0-l3-epB" secondAttribute="top" id="yaV-1V-oEh"/>
            </constraints>
            <nil key="simulatedStatusBarMetrics"/>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <point key="canvasLocation" x="548" y="455"/>
        </view>
    </objects>
+    <resources>
+        <image name="LaunchScreen" width="480" height="480"/>
+    </resources>
 </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/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-60@2x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-60@2x.png
--- a/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-60@3x.png
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/AppIcon-60@3x.png
--- a/ios/app/Images.xcassets/AppIcon.appiconset/Contents.json
+++ b/ios/app/Images.xcassets/AppIcon.appiconset/Contents.json
@@ -1,5 +1,15 @@
 {
  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
    {
      "size" : "29x29",
      "idiom" : "iphone",
@@ -21,7 +31,7 @@
    {
      "size" : "40x40",
      "idiom" : "iphone",
-      "filename" : "AppIcon-40@3x.png",
+      "filename" : "AppIcon-60@2x.png",
      "scale" : "3x"
    },
    {
--- a/ios/app/Images.xcassets/Contents.json
+++ b/ios/app/Images.xcassets/Contents.json
@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/ios/app/Images.xcassets/LaunchScreen.imageset/Contents.json
+++ b/ios/app/Images.xcassets/LaunchScreen.imageset/Contents.json
@@ -0,0 +1,22 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-480@1x.png",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "LaunchScreen-480@2x.png",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}
--- a/ios/app/Images.xcassets/LaunchScreen.imageset/LaunchScreen-480@1x.png
+++ b/ios/app/Images.xcassets/LaunchScreen.imageset/LaunchScreen-480@1x.png
--- a/ios/app/Images.xcassets/LaunchScreen.imageset/LaunchScreen-480@2x.png
+++ b/ios/app/Images.xcassets/LaunchScreen.imageset/LaunchScreen-480@2x.png
--- a/ios/app/Info.plist
+++ b/ios/app/Info.plist
@@ -22,6 +22,22 @@
 	<string>????</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
+	<key>Fabric</key>
+	<dict>
+		<key>APIKey</key>
+		<string>a8ae24a58302ba79da1d312138e941f6b86e3242</string>
+		<key>Kits</key>
+		<array>
+			<dict>
+				<key>KitInfo</key>
+				<dict/>
+				<key>KitName</key>
+				<string>Crashlytics</string>
+			</dict>
+		</array>
+	</dict>
+	<key>ITSAppUsesNonExemptEncryption</key>
+	<false/>
 	<key>LSRequiresIPhoneOS</key>
 	<true/>
 	<key>NSAppTransportSecurity</key>
@@ -51,6 +67,12 @@
 		<string>jitsi.ttf</string>
 		<string>FontAwesome.ttf</string>
 	</array>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>audio</string>
+		<string>fetch</string>
+		<string>voip</string>
+	</array>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
--- a/ios/apple-app-site-association
+++ b/ios/apple-app-site-association
@@ -5,6 +5,10 @@
            {
                "appID": "BQNXB4G3KQ.org.jitsi.JitsiMeet.ios",
                "paths": [ "*" ]
+            },
+            {
+                "appID": "UPXU4CQZ5P.com.atlassian.JitsiMeet.ios",
+                "paths": [ "*" ]
            }
        ]
    }
--- a/ios/jitsi-meet-react.xcodeproj/project.pbxproj
+++ b/ios/jitsi-meet-react.xcodeproj/project.pbxproj
@@ -24,6 +24,8 @@
 		2602576C1D0A7703001E3363 /* jitsi.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 2602576B1D0A7703001E3363 /* jitsi.ttf */; };
 		3847F11906B4479A9162628F /* libRNVectorIcons.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 821D8ABD506944B4BDBB069B /* libRNVectorIcons.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		B30EF2311DC0ED7C00690F45 /* WebRTC.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B30EF2301DC0ED7C00690F45 /* WebRTC.framework */; };
+		B30EF2331DC0EEA500690F45 /* WebRTC.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = B30EF2301DC0ED7C00690F45 /* WebRTC.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		BF9643821C34FBB300B0BBDF /* AVFoundation.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BF9643811C34FBB300B0BBDF /* AVFoundation.framework */; };
 		BF9643841C34FBBB00B0BBDF /* AudioToolbox.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BF9643831C34FBBB00B0BBDF /* AudioToolbox.framework */; };
 		BF9643861C34FBC100B0BBDF /* CoreGraphics.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BF9643851C34FBC100B0BBDF /* CoreGraphics.framework */; };
@@ -34,7 +36,6 @@
 		BF9643901C34FBEB00B0BBDF /* libc.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = BF96438F1C34FBEB00B0BBDF /* libc.tbd */; };
 		BF9643921C34FBF100B0BBDF /* libsqlite3.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = BF9643911C34FBF100B0BBDF /* libsqlite3.tbd */; };
 		BF9643941C34FBF900B0BBDF /* libstdc++.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = BF9643931C34FBF900B0BBDF /* libstdc++.tbd */; };
-		BFC745101CB829A700673F38 /* libWebRTC.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BFC7450C1CB829A700673F38 /* libWebRTC.a */; };
 		BFC745141CB829B300673F38 /* libRCTWebRTC.a in Frameworks */ = {isa = PBXBuildFile; fileRef = BFC745131CB829A700673F38 /* libRCTWebRTC.a */; };
 /* End PBXBuildFile section */

@@ -116,6 +117,55 @@
 			remoteGlobalIDString = 58B5119B1A9E6C1200147676;
 			remoteInfo = RCTText;
 		};
+		B3BA19D41DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A283A1D9B042B00D4039D;
+			remoteInfo = "RCTImage-tvOS";
+		};
+		B3BA19D81DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28471D9B043800D4039D;
+			remoteInfo = "RCTLinking-tvOS";
+		};
+		B3BA19DC1DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 00C302D31ABCB9D200DB3ED1 /* RCTNetwork.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28541D9B044C00D4039D;
+			remoteInfo = "RCTNetwork-tvOS";
+		};
+		B3BA19E01DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28611D9B046600D4039D;
+			remoteInfo = "RCTSettings-tvOS";
+		};
+		B3BA19E41DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A287B1D9B048500D4039D;
+			remoteInfo = "RCTText-tvOS";
+		};
+		B3BA19EA1DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28881D9B049200D4039D;
+			remoteInfo = "RCTWebSocket-tvOS";
+		};
+		B3BA19EE1DC6B37B00BCD481 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 146833FF1AC3E56700842450 /* React.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28131D9B038B00D4039D;
+			remoteInfo = "React-tvOS";
+		};
 		BFC745121CB829A700673F38 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = BFC7450D1CB829A700673F38 /* RCTWebRTC.xcodeproj */;
@@ -125,6 +175,20 @@
 		};
 /* End PBXContainerItemProxy section */

+/* Begin PBXCopyFilesBuildPhase section */
+		B30EF2341DC0EEA500690F45 /* Embed Frameworks */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "";
+			dstSubfolderSpec = 10;
+			files = (
+				B30EF2331DC0EEA500690F45 /* WebRTC.framework in Embed Frameworks */,
+			);
+			name = "Embed Frameworks";
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
 /* Begin PBXFileReference section */
 		008F07F21AC5B25A0029DE68 /* main.jsbundle */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text; path = main.jsbundle; sourceTree = "<group>"; };
 		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
@@ -143,10 +207,11 @@
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = app/main.m; sourceTree = "<group>"; };
 		146833FF1AC3E56700842450 /* React.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = React.xcodeproj; path = "../node_modules/react-native/React/React.xcodeproj"; sourceTree = "<group>"; };
 		22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = "wrapper.pb-project"; name = RNVectorIcons.xcodeproj; path = "../node_modules/react-native-vector-icons/RNVectorIcons.xcodeproj"; sourceTree = "<group>"; };
-		2602576B1D0A7703001E3363 /* jitsi.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = jitsi.ttf; path = ../react/features/base/fontIcons/fonts/jitsi.ttf; sourceTree = "<group>"; };
+		2602576B1D0A7703001E3363 /* jitsi.ttf */ = {isa = PBXFileReference; lastKnownFileType = file; name = jitsi.ttf; path = ../android/app/src/main/assets/fonts/jitsi.ttf; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		821D8ABD506944B4BDBB069B /* libRNVectorIcons.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libRNVectorIcons.a; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+		B30EF2301DC0ED7C00690F45 /* WebRTC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebRTC.framework; path = "../node_modules/react-native-webrtc/ios/WebRTC.framework"; sourceTree = "<group>"; };
 		B3B083EB1D4955FF0069CEE7 /* jitsi-meet-react.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.xml; path = "jitsi-meet-react.entitlements"; sourceTree = "<group>"; };
 		B96AF9B6FBC0453798399985 /* FontAwesome.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = FontAwesome.ttf; path = "../node_modules/react-native-vector-icons/Fonts/FontAwesome.ttf"; sourceTree = "<group>"; };
 		BF9643811C34FBB300B0BBDF /* AVFoundation.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = AVFoundation.framework; path = System/Library/Frameworks/AVFoundation.framework; sourceTree = SDKROOT; };
@@ -159,37 +224,6 @@
 		BF96438F1C34FBEB00B0BBDF /* libc.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libc.tbd; path = usr/lib/libc.tbd; sourceTree = SDKROOT; };
 		BF9643911C34FBF100B0BBDF /* libsqlite3.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = libsqlite3.tbd; path = usr/lib/libsqlite3.tbd; sourceTree = SDKROOT; };
 		BF9643931C34FBF900B0BBDF /* libstdc++.tbd */ = {isa = PBXFileReference; lastKnownFileType = "sourcecode.text-based-dylib-definition"; name = "libstdc++.tbd"; path = "usr/lib/libstdc++.tbd"; sourceTree = SDKROOT; };
-		BFC744EE1CB829A700673F38 /* RTCAudioSource.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCAudioSource.h; sourceTree = "<group>"; };
-		BFC744EF1CB829A700673F38 /* RTCAudioTrack.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCAudioTrack.h; sourceTree = "<group>"; };
-		BFC744F01CB829A700673F38 /* RTCAVFoundationVideoSource.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCAVFoundationVideoSource.h; sourceTree = "<group>"; };
-		BFC744F11CB829A700673F38 /* RTCDataChannel.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCDataChannel.h; sourceTree = "<group>"; };
-		BFC744F21CB829A700673F38 /* RTCEAGLVideoView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCEAGLVideoView.h; sourceTree = "<group>"; };
-		BFC744F31CB829A700673F38 /* RTCFileLogger.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCFileLogger.h; sourceTree = "<group>"; };
-		BFC744F41CB829A700673F38 /* RTCI420Frame.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCI420Frame.h; sourceTree = "<group>"; };
-		BFC744F51CB829A700673F38 /* RTCICECandidate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCICECandidate.h; sourceTree = "<group>"; };
-		BFC744F61CB829A700673F38 /* RTCICEServer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCICEServer.h; sourceTree = "<group>"; };
-		BFC744F71CB829A700673F38 /* RTCLogging.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCLogging.h; sourceTree = "<group>"; };
-		BFC744F81CB829A700673F38 /* RTCMediaConstraints.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCMediaConstraints.h; sourceTree = "<group>"; };
-		BFC744F91CB829A700673F38 /* RTCMediaSource.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCMediaSource.h; sourceTree = "<group>"; };
-		BFC744FA1CB829A700673F38 /* RTCMediaStream.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCMediaStream.h; sourceTree = "<group>"; };
-		BFC744FB1CB829A700673F38 /* RTCMediaStreamTrack.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCMediaStreamTrack.h; sourceTree = "<group>"; };
-		BFC744FC1CB829A700673F38 /* RTCNSGLVideoView.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCNSGLVideoView.h; sourceTree = "<group>"; };
-		BFC744FD1CB829A700673F38 /* RTCOpenGLVideoRenderer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCOpenGLVideoRenderer.h; sourceTree = "<group>"; };
-		BFC744FE1CB829A700673F38 /* RTCPair.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCPair.h; sourceTree = "<group>"; };
-		BFC744FF1CB829A700673F38 /* RTCPeerConnection.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCPeerConnection.h; sourceTree = "<group>"; };
-		BFC745001CB829A700673F38 /* RTCPeerConnectionDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCPeerConnectionDelegate.h; sourceTree = "<group>"; };
-		BFC745011CB829A700673F38 /* RTCPeerConnectionFactory.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCPeerConnectionFactory.h; sourceTree = "<group>"; };
-		BFC745021CB829A700673F38 /* RTCPeerConnectionInterface.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCPeerConnectionInterface.h; sourceTree = "<group>"; };
-		BFC745031CB829A700673F38 /* RTCSessionDescription.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCSessionDescription.h; sourceTree = "<group>"; };
-		BFC745041CB829A700673F38 /* RTCSessionDescriptionDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCSessionDescriptionDelegate.h; sourceTree = "<group>"; };
-		BFC745051CB829A700673F38 /* RTCStatsDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCStatsDelegate.h; sourceTree = "<group>"; };
-		BFC745061CB829A700673F38 /* RTCStatsReport.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCStatsReport.h; sourceTree = "<group>"; };
-		BFC745071CB829A700673F38 /* RTCTypes.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCTypes.h; sourceTree = "<group>"; };
-		BFC745081CB829A700673F38 /* RTCVideoCapturer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCVideoCapturer.h; sourceTree = "<group>"; };
-		BFC745091CB829A700673F38 /* RTCVideoRenderer.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCVideoRenderer.h; sourceTree = "<group>"; };
-		BFC7450A1CB829A700673F38 /* RTCVideoSource.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCVideoSource.h; sourceTree = "<group>"; };
-		BFC7450B1CB829A700673F38 /* RTCVideoTrack.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = RTCVideoTrack.h; sourceTree = "<group>"; };
-		BFC7450C1CB829A700673F38 /* libWebRTC.a */ = {isa = PBXFileReference; lastKnownFileType = archive.ar; path = libWebRTC.a; sourceTree = "<group>"; };
 		BFC7450D1CB829A700673F38 /* RCTWebRTC.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTWebRTC.xcodeproj; path = "../node_modules/react-native-webrtc/ios/RCTWebRTC.xcodeproj"; sourceTree = "<group>"; };
 /* End PBXFileReference section */

@@ -198,18 +232,17 @@
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				BFC745141CB829B300673F38 /* libRCTWebRTC.a in Frameworks */,
-				BF9643941C34FBF900B0BBDF /* libstdc++.tbd in Frameworks */,
-				BF9643921C34FBF100B0BBDF /* libsqlite3.tbd in Frameworks */,
 				BF9643901C34FBEB00B0BBDF /* libc.tbd in Frameworks */,
-				BF96438E1C34FBE100B0BBDF /* VideoToolbox.framework in Frameworks */,
-				BF96438C1C34FBD700B0BBDF /* CoreVideo.framework in Frameworks */,
-				BF96438A1C34FBD100B0BBDF /* CoreAudio.framework in Frameworks */,
-				BF9643881C34FBC800B0BBDF /* GLKit.framework in Frameworks */,
-				BFC745101CB829A700673F38 /* libWebRTC.a in Frameworks */,
-				BF9643861C34FBC100B0BBDF /* CoreGraphics.framework in Frameworks */,
+				BF9643921C34FBF100B0BBDF /* libsqlite3.tbd in Frameworks */,
+				BF9643941C34FBF900B0BBDF /* libstdc++.tbd in Frameworks */,
 				BF9643841C34FBBB00B0BBDF /* AudioToolbox.framework in Frameworks */,
 				BF9643821C34FBB300B0BBDF /* AVFoundation.framework in Frameworks */,
+				BF96438A1C34FBD100B0BBDF /* CoreAudio.framework in Frameworks */,
+				BF9643861C34FBC100B0BBDF /* CoreGraphics.framework in Frameworks */,
+				BF96438C1C34FBD700B0BBDF /* CoreVideo.framework in Frameworks */,
+				BF9643881C34FBC800B0BBDF /* GLKit.framework in Frameworks */,
+				B30EF2311DC0ED7C00690F45 /* WebRTC.framework in Frameworks */,
+				BF96438E1C34FBE100B0BBDF /* VideoToolbox.framework in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
 				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
@@ -219,6 +252,7 @@
 				139105C61AF99C1200B5F7CC /* libRCTSettings.a in Frameworks */,
 				832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */,
 				00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */,
+				BFC745141CB829B300673F38 /* libRCTWebRTC.a in Frameworks */,
 				139FDEF61B0652A700C62182 /* libRCTWebSocket.a in Frameworks */,
 				3847F11906B4479A9162628F /* libRNVectorIcons.a in Frameworks */,
 			);
@@ -247,6 +281,7 @@
 			isa = PBXGroup;
 			children = (
 				00C302C01ABCB91800DB3ED1 /* libRCTImage.a */,
+				B3BA19D51DC6B37B00BCD481 /* libRCTImage-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -255,6 +290,7 @@
 			isa = PBXGroup;
 			children = (
 				00C302DC1ABCB9D200DB3ED1 /* libRCTNetwork.a */,
+				B3BA19DD1DC6B37B00BCD481 /* libRCTNetwork-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -271,6 +307,7 @@
 			isa = PBXGroup;
 			children = (
 				139105C11AF99BAD00B5F7CC /* libRCTSettings.a */,
+				B3BA19E11DC6B37B00BCD481 /* libRCTSettings-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -279,6 +316,7 @@
 			isa = PBXGroup;
 			children = (
 				139FDEF41B06529B00C62182 /* libRCTWebSocket.a */,
+				B3BA19EB1DC6B37B00BCD481 /* libRCTWebSocket-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -286,12 +324,12 @@
 		13B07FAE1A68108700A75B9A /* app */ = {
 			isa = PBXGroup;
 			children = (
-				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FAF1A68108700A75B9A /* AppDelegate.h */,
 				13B07FB01A68108700A75B9A /* AppDelegate.m */,
 				13B07FB51A68108700A75B9A /* Images.xcassets */,
 				13B07FB61A68108700A75B9A /* Info.plist */,
 				13B07FB11A68108700A75B9A /* LaunchScreen.xib */,
+				008F07F21AC5B25A0029DE68 /* main.jsbundle */,
 				13B07FB71A68108700A75B9A /* main.m */,
 			);
 			name = app;
@@ -301,6 +339,7 @@
 			isa = PBXGroup;
 			children = (
 				146834041AC3E56700842450 /* libReact.a */,
+				B3BA19EF1DC6B37B00BCD481 /* libReact-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -317,6 +356,7 @@
 			isa = PBXGroup;
 			children = (
 				B96AF9B6FBC0453798399985 /* FontAwesome.ttf */,
+				2602576B1D0A7703001E3363 /* jitsi.ttf */,
 			);
 			name = Resources;
 			sourceTree = "<group>";
@@ -325,6 +365,7 @@
 			isa = PBXGroup;
 			children = (
 				78C398B91ACF4ADC00677621 /* libRCTLinking.a */,
+				B3BA19D91DC6B37B00BCD481 /* libRCTLinking-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -332,9 +373,9 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
-				BFC744EC1CB829A700673F38 /* libjingle_peerconnection */,
-				BFC7450D1CB829A700673F38 /* RCTWebRTC.xcodeproj */,
-				146833FF1AC3E56700842450 /* React.xcodeproj */,
+				BF96438F1C34FBEB00B0BBDF /* libc.tbd */,
+				BF9643911C34FBF100B0BBDF /* libsqlite3.tbd */,
+				BF9643931C34FBF900B0BBDF /* libstdc++.tbd */,
 				00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */,
 				00C302B51ABCB90400DB3ED1 /* RCTGeolocation.xcodeproj */,
 				00C302BB1ABCB91800DB3ED1 /* RCTImage.xcodeproj */,
@@ -343,7 +384,9 @@
 				139105B61AF99BAD00B5F7CC /* RCTSettings.xcodeproj */,
 				832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */,
 				00C302DF1ABCB9EE00DB3ED1 /* RCTVibration.xcodeproj */,
+				BFC7450D1CB829A700673F38 /* RCTWebRTC.xcodeproj */,
 				139FDEE61B06529A00C62182 /* RCTWebSocket.xcodeproj */,
+				146833FF1AC3E56700842450 /* React.xcodeproj */,
 				22418656B14845609F953A42 /* RNVectorIcons.xcodeproj */,
 			);
 			name = Libraries;
@@ -353,6 +396,7 @@
 			isa = PBXGroup;
 			children = (
 				832341B51AAA6A8300B99B32 /* libRCTText.a */,
+				B3BA19E51DC6B37B00BCD481 /* libRCTText-tvOS.a */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -360,19 +404,9 @@
 		83CBB9F61A601CBA00E9B192 = {
 			isa = PBXGroup;
 			children = (
-				B3B083EB1D4955FF0069CEE7 /* jitsi-meet-react.entitlements */,
-				2602576B1D0A7703001E3363 /* jitsi.ttf */,
-				BF9643931C34FBF900B0BBDF /* libstdc++.tbd */,
-				BF9643911C34FBF100B0BBDF /* libsqlite3.tbd */,
-				BF96438F1C34FBEB00B0BBDF /* libc.tbd */,
-				BF96438D1C34FBE100B0BBDF /* VideoToolbox.framework */,
-				BF96438B1C34FBD700B0BBDF /* CoreVideo.framework */,
-				BF9643891C34FBD100B0BBDF /* CoreAudio.framework */,
-				BF9643871C34FBC800B0BBDF /* GLKit.framework */,
-				BF9643851C34FBC100B0BBDF /* CoreGraphics.framework */,
-				BF9643831C34FBBB00B0BBDF /* AudioToolbox.framework */,
-				BF9643811C34FBB300B0BBDF /* AVFoundation.framework */,
 				13B07FAE1A68108700A75B9A /* app */,
+				B3BA19B71DC6B02F00BCD481 /* Frameworks */,
+				B3B083EB1D4955FF0069CEE7 /* jitsi-meet-react.entitlements */,
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				83CBBA001A601CBA00E9B192 /* Products */,
 				6956B374CC3C453DB7B8E82D /* Resources */,
@@ -389,51 +423,19 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
-		BFC744EC1CB829A700673F38 /* libjingle_peerconnection */ = {
+		B3BA19B71DC6B02F00BCD481 /* Frameworks */ = {
 			isa = PBXGroup;
 			children = (
-				BFC744ED1CB829A700673F38 /* Headers */,
-				BFC7450C1CB829A700673F38 /* libWebRTC.a */,
+				BF9643831C34FBBB00B0BBDF /* AudioToolbox.framework */,
+				BF9643811C34FBB300B0BBDF /* AVFoundation.framework */,
+				BF9643891C34FBD100B0BBDF /* CoreAudio.framework */,
+				BF9643851C34FBC100B0BBDF /* CoreGraphics.framework */,
+				BF96438B1C34FBD700B0BBDF /* CoreVideo.framework */,
+				BF9643871C34FBC800B0BBDF /* GLKit.framework */,
+				BF96438D1C34FBE100B0BBDF /* VideoToolbox.framework */,
+				B30EF2301DC0ED7C00690F45 /* WebRTC.framework */,
 			);
-			name = libjingle_peerconnection;
-			path = "../node_modules/react-native-webrtc/ios/libjingle_peerconnection";
-			sourceTree = "<group>";
-		};
-		BFC744ED1CB829A700673F38 /* Headers */ = {
-			isa = PBXGroup;
-			children = (
-				BFC744EE1CB829A700673F38 /* RTCAudioSource.h */,
-				BFC744EF1CB829A700673F38 /* RTCAudioTrack.h */,
-				BFC744F01CB829A700673F38 /* RTCAVFoundationVideoSource.h */,
-				BFC744F11CB829A700673F38 /* RTCDataChannel.h */,
-				BFC744F21CB829A700673F38 /* RTCEAGLVideoView.h */,
-				BFC744F31CB829A700673F38 /* RTCFileLogger.h */,
-				BFC744F41CB829A700673F38 /* RTCI420Frame.h */,
-				BFC744F51CB829A700673F38 /* RTCICECandidate.h */,
-				BFC744F61CB829A700673F38 /* RTCICEServer.h */,
-				BFC744F71CB829A700673F38 /* RTCLogging.h */,
-				BFC744F81CB829A700673F38 /* RTCMediaConstraints.h */,
-				BFC744F91CB829A700673F38 /* RTCMediaSource.h */,
-				BFC744FA1CB829A700673F38 /* RTCMediaStream.h */,
-				BFC744FB1CB829A700673F38 /* RTCMediaStreamTrack.h */,
-				BFC744FC1CB829A700673F38 /* RTCNSGLVideoView.h */,
-				BFC744FD1CB829A700673F38 /* RTCOpenGLVideoRenderer.h */,
-				BFC744FE1CB829A700673F38 /* RTCPair.h */,
-				BFC744FF1CB829A700673F38 /* RTCPeerConnection.h */,
-				BFC745001CB829A700673F38 /* RTCPeerConnectionDelegate.h */,
-				BFC745011CB829A700673F38 /* RTCPeerConnectionFactory.h */,
-				BFC745021CB829A700673F38 /* RTCPeerConnectionInterface.h */,
-				BFC745031CB829A700673F38 /* RTCSessionDescription.h */,
-				BFC745041CB829A700673F38 /* RTCSessionDescriptionDelegate.h */,
-				BFC745051CB829A700673F38 /* RTCStatsDelegate.h */,
-				BFC745061CB829A700673F38 /* RTCStatsReport.h */,
-				BFC745071CB829A700673F38 /* RTCTypes.h */,
-				BFC745081CB829A700673F38 /* RTCVideoCapturer.h */,
-				BFC745091CB829A700673F38 /* RTCVideoRenderer.h */,
-				BFC7450A1CB829A700673F38 /* RTCVideoSource.h */,
-				BFC7450B1CB829A700673F38 /* RTCVideoTrack.h */,
-			);
-			path = Headers;
+			name = Frameworks;
 			sourceTree = "<group>";
 		};
 		BFC7450E1CB829A700673F38 /* Products */ = {
@@ -455,6 +457,9 @@
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				B30EF2341DC0EEA500690F45 /* Embed Frameworks */,
+				B3DBBAC41DC6A3BE001DA4DD /* ShellScript */,
+				B35383AD1DDA0083008F406A /* ShellScript */,
 			);
 			buildRules = (
 			);
@@ -471,7 +476,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
-				LastUpgradeCheck = 0730;
+				LastUpgradeCheck = 0800;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
 					13B07F861A680F5B00A75B9A = {
@@ -630,6 +635,55 @@
 			remoteRef = 832341B41AAA6A8300B99B32 /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		B3BA19D51DC6B37B00BCD481 /* libRCTImage-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTImage-tvOS.a";
+			remoteRef = B3BA19D41DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19D91DC6B37B00BCD481 /* libRCTLinking-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTLinking-tvOS.a";
+			remoteRef = B3BA19D81DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19DD1DC6B37B00BCD481 /* libRCTNetwork-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTNetwork-tvOS.a";
+			remoteRef = B3BA19DC1DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19E11DC6B37B00BCD481 /* libRCTSettings-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTSettings-tvOS.a";
+			remoteRef = B3BA19E01DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19E51DC6B37B00BCD481 /* libRCTText-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTText-tvOS.a";
+			remoteRef = B3BA19E41DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19EB1DC6B37B00BCD481 /* libRCTWebSocket-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTWebSocket-tvOS.a";
+			remoteRef = B3BA19EA1DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B3BA19EF1DC6B37B00BCD481 /* libReact-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libReact-tvOS.a";
+			remoteRef = B3BA19EE1DC6B37B00BCD481 /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		BFC745131CB829A700673F38 /* libRCTWebRTC.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;
@@ -668,6 +722,32 @@
 			shellPath = /bin/sh;
 			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
 		};
+		B35383AD1DDA0083008F406A /* ShellScript */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "APP_PATH=\"${TARGET_BUILD_DIR}/${WRAPPER_NAME}\"\n\n# This script loops through the frameworks embedded in the application and\n# removes unused architectures.\nfind \"$APP_PATH\" -name '*.framework' -type d | while read -r FRAMEWORK\ndo\nFRAMEWORK_EXECUTABLE_NAME=$(defaults read \"$FRAMEWORK/Info.plist\" CFBundleExecutable)\nFRAMEWORK_EXECUTABLE_PATH=\"$FRAMEWORK/$FRAMEWORK_EXECUTABLE_NAME\"\necho \"Executable is $FRAMEWORK_EXECUTABLE_PATH\"\n\nEXTRACTED_ARCHS=()\n\nfor ARCH in $ARCHS\ndo\necho \"Extracting $ARCH from $FRAMEWORK_EXECUTABLE_NAME\"\nlipo -extract \"$ARCH\" \"$FRAMEWORK_EXECUTABLE_PATH\" -o \"$FRAMEWORK_EXECUTABLE_PATH-$ARCH\"\nEXTRACTED_ARCHS+=(\"$FRAMEWORK_EXECUTABLE_PATH-$ARCH\")\ndone\n\necho \"Merging extracted architectures: ${ARCHS}\"\nlipo -o \"$FRAMEWORK_EXECUTABLE_PATH-merged\" -create \"${EXTRACTED_ARCHS[@]}\"\nrm \"${EXTRACTED_ARCHS[@]}\"\n\necho \"Replacing original executable with thinned version\"\nrm \"$FRAMEWORK_EXECUTABLE_PATH\"\nmv \"$FRAMEWORK_EXECUTABLE_PATH-merged\" \"$FRAMEWORK_EXECUTABLE_PATH\"\n\ndone";
+		};
+		B3DBBAC41DC6A3BE001DA4DD /* ShellScript */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "\"${PODS_ROOT}/Fabric/run\" a8ae24a58302ba79da1d312138e941f6b86e3242 256ed316263eb534e26a1ad5dcc42ca9c179af5937dd864c3e44cfefa2e8b54c";
+		};
 /* End PBXShellScriptBuildPhase section */

 /* Begin PBXSourcesBuildPhase section */
@@ -700,10 +780,13 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = "jitsi-meet-react.entitlements";
-				CODE_SIGN_IDENTITY = "iPhone Developer";
 				CURRENT_PROJECT_VERSION = 1;
 				DEAD_CODE_STRIPPING = NO;
 				ENABLE_BITCODE = NO;
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-webrtc/**",
+				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
@@ -712,8 +795,12 @@
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
 				INFOPLIST_FILE = app/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(SRCROOT)/../node_modules/react-native-webrtc/**";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-webrtc/**",
+				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -730,6 +817,11 @@
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_ENTITLEMENTS = "jitsi-meet-react.entitlements";
 				CURRENT_PROJECT_VERSION = 1;
+				ENABLE_BITCODE = NO;
+				FRAMEWORK_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-webrtc/**",
+				);
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
@@ -737,10 +829,13 @@
 					"$(SRCROOT)/../node_modules/react-native/Libraries/LinkingIOS/**",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
-				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = app/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
-				LIBRARY_SEARCH_PATHS = "$(SRCROOT)/../node_modules/react-native-webrtc/**";
+				LIBRARY_SEARCH_PATHS = (
+					"$(inherited)",
+					"$(SRCROOT)/../node_modules/react-native-webrtc/**",
+				);
 				OTHER_LDFLAGS = (
 					"$(inherited)",
 					"-ObjC",
@@ -791,7 +886,7 @@
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -832,7 +927,7 @@
 					"$(SRCROOT)/../node_modules/react-native/React/**",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 7.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 8.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				VALIDATE_PRODUCT = YES;
--- a/ios/jitsi-meet-react.xcodeproj/xcshareddata/xcschemes/jitsi-meet-react.xcscheme
+++ b/ios/jitsi-meet-react.xcodeproj/xcshareddata/xcschemes/jitsi-meet-react.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "0730"
+   LastUpgradeVersion = "0800"
   version = "1.3">
   <BuildAction
      parallelizeBuildables = "YES"
@@ -23,10 +23,12 @@
      </BuildActionEntries>
   </BuildAction>
   <TestAction
+      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
-      shouldUseLaunchSchemeArgsEnv = "YES"
-      buildConfiguration = "Debug">
+      shouldUseLaunchSchemeArgsEnv = "YES">
+      <Testables>
+      </Testables>
      <MacroExpansion>
         <BuildableReference
            BuildableIdentifier = "primary"
@@ -40,13 +42,14 @@
      </AdditionalOptions>
   </TestAction>
   <LaunchAction
+      buildConfiguration = "Debug"
      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
      launchStyle = "0"
      useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Debug"
      ignoresPersistentStateOnLaunch = "NO"
      debugDocumentVersioning = "YES"
+      debugServiceExtension = "internal"
      allowLocationSimulation = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
@@ -62,10 +65,10 @@
      </AdditionalOptions>
   </LaunchAction>
   <ProfileAction
+      buildConfiguration = "Release"
      shouldUseLaunchSchemeArgsEnv = "YES"
      savedToolIdentifier = ""
      useCustomWorkingDirectory = "NO"
-      buildConfiguration = "Release"
      debugDocumentVersioning = "YES">
      <BuildableProductRunnable
         runnableDebuggingMode = "0">
--- a/ios/jitsi-meet-react.xcworkspace/contents.xcworkspacedata
+++ b/ios/jitsi-meet-react.xcworkspace/contents.xcworkspacedata
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<Workspace
+   version = "1.0">
+   <FileRef
+      location = "group:jitsi-meet-react.xcodeproj">
+   </FileRef>
+   <FileRef
+      location = "group:Pods/Pods.xcodeproj">
+   </FileRef>
+</Workspace>
--- a/Show More
+++ b/Show More