ref(config): move loggingConfig to config.js

.eslintignore

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

.eslintrc.js

@@ -1,5 +1,37 @@
 module.exports = {
-    'extends': [
-        'eslint-config-jitsi'
-    ]
+    'env': {
+        'browser': true,
+        'commonjs': true,
+        'es6': true
+    },
+    'extends': 'eslint:recommended',
+    'globals': {
+        // The globals that (1) are accessed but not defined within many of our
+        // files, (2) are certainly defined, and (3) we would like to use
+        // without explicitly specifying them (using a comment) inside of our
+        // files.
+        '__filename': false
+    },
+    'parserOptions': {
+        'ecmaFeatures': {
+            'experimentalObjectRestSpread': true
+        },
+        'sourceType': 'module'
+    },
+    'rules': {
+        'new-cap': [
+            'error',
+            {
+                'capIsNew': false // Behave like JSHint's newcap.
+            }
+        ],
+        // While it is considered a best practice to avoid using methods on
+        // console in JavaScript that is designed to be executed in the browser
+        // and ESLint includes the rule among its set of recommended rules, (1)
+        // the general practice is to strip such calls before pushing to
+        // production and (2) we prefer to utilize console in lib-jitsi-meet
+        // (and jitsi-meet).
+        'no-console': 'off',
+        'semi': 'error'
+    }
 };

.flowconfig

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

.gitattributes

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

.gitignore

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

.jshintignore

@@ -0,0 +1,7 @@
+build/
+debian/
+libs/
+node_modules/
+react/
+analytics.js
+webpack.config.babel.js

.jshintrc

@@ -0,0 +1,20 @@
+{
+    // Refer to http://jshint.com/docs/options/ for an exhaustive list of options
+    "asi": false, // true: Tolerate Automatic Semicolon Insertion (no semicolons)
+    "expr": true, // true: Tolerate `ExpressionStatement` as Programs
+    "loopfunc": true, // true: Tolerate functions being defined in loops
+    "curly": false, // true: Require {} for every new block or scope
+    "evil": true, // true: Tolerate use of `eval` and `new Function()`
+    "white": true,
+    "undef": true, // true: Require all non-global variables to be declared (prevents global leaks)
+    "browser": true, // Web Browser (window, document, etc)
+    "node": true, // Node.js
+    "trailing": true,
+    "indent": 4, // {int} Number of spaces to use for indentation
+    "latedef": true, // true: Require variables/functions to be defined before being used
+    "newcap": true, // true: Require capitalization of all constructor functions e.g. `new F()`
+    "maxlen": 80, // {int} Max number of characters per line
+    "latedef": false, //This option prohibits the use of a variable before it was defined
+    "laxbreak": true, //Ignore line breaks around "=", "==", "&&", etc.
+    "esnext": true //support ES2015
+}

404.html

@@ -1,7 +1,7 @@
 <html>
 <head>
-    <link rel="stylesheet" href="../css/all.css"/>
-    <!--#include virtual="/title.html" -->
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
 </head>
 <body>
     <div class="error_page">

CONTRIBUTING.md

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

ConferenceEvents.js

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

Makefile

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

README.md

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

analytics.js

@@ -1,44 +1,33 @@
 /* global ga */
 
-(function(ctx) {
+(function (ctx) {
+  function Analytics() {
+    /* eslint-disable */
+
     /**
-     *
+     * Google Analytics
      */
-    function Analytics() {
-        /* eslint-disable */
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    ga('create', 'UA-319188-14', 'jit.si');
+    ga('send', 'pageview');
 
-        /**
-         * Google Analytics
-         */
-        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-        ga('create', 'UA-319188-14', 'jit.si');
-        ga('send', 'pageview');
+    /* eslint-enable */
+  }
 
-        /* eslint-enable */
-    }
+  Analytics.prototype.sendEvent = function (action, data) {
+    // empty label if missing value for it and add the value,
+    // the value should be integer or null
+    var value = data.value;
+    value = value? Math.round(parseFloat(value)) : null;
+    var label = data.label || "";
 
-    Analytics.prototype.sendEvent = function(action, data) {
-        // empty label if missing value for it and add the value,
-        // the value should be integer or null
-        let value = data.value;
+    ga('send', 'event', 'jit.si',
+        action + '.' + data.browserName, label, value);
+  };
 
-        value = value ? Math.round(parseFloat(value)) : null;
-        const label = data.label || '';
-
-        ga('send', 'event', 'jit.si',
-            `${action}.${data.browserName}`, label, value);
-    };
-
-    if (typeof ctx.JitsiMeetJS === 'undefined') {
-        ctx.JitsiMeetJS = {};
-    }
-    if (typeof ctx.JitsiMeetJS.app === 'undefined') {
-        ctx.JitsiMeetJS.app = {};
-    }
-    if (typeof ctx.JitsiMeetJS.app.analyticsHandlers === 'undefined') {
-        ctx.JitsiMeetJS.app.analyticsHandlers = [];
-    }
-    ctx.JitsiMeetJS.app.analyticsHandlers.push(Analytics);
-})(window);
+  if(typeof ctx.analyticsHandlers === "undefined")
+    ctx.analyticsHandlers = [];
+  ctx.analyticsHandlers.push(Analytics);
+}(window));

android/README.md

@@ -1,311 +0,0 @@
-# Jitsi Meet SDK for Android
-
-## Build
-
-1. Install all required [dependencies](https://github.com/jitsi/jitsi-meet/blob/master/doc/mobile.md).
-
-2. ```bash
-   cd android/
-   ./gradlew :sdk:assembleRelease
-   ```
-
-3. Configure the Maven repositories in which you are going to publish the
-   artifacts/binaries during step 4. Modify
-   `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
-   in adroid/sdk/build.gradle for Jitsi Meet SDK for Android and/or
-   `"file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases"`
-   in android/build.gradle for the third-party react-native modules which Jitsi
-   Meet SDK for Android depends on and are not publicly available in Maven
-   repositories. Generally, if you are modifying the JavaSource code of Jitsi
-   Meet SDK for Android only, you will very likely need to consider the former
-   only.
-
-4. Publish the Maven artifact/binary of Jitsi Meet SDK for Android in the Maven
-   repository configured in step 3:
-
-   ```bash
-   ./gradlew :sdk:publish
-   cd ../
-   ```
-
-   If you would like to publish a third-party react-native module which Jitsi
-   Meet SDK for Android depends on and is not publicly available in Maven
-   repositories, replace `sdk` with the name of the react-native module. For
-   example, to publish react-native-webrtc:
-
-   ```bash
-   ./gradlew :react-native-webrtc:publish
-   ```
-
-## Install
-
-Add the Maven repository
-`https://github.com/jitsi/jitsi-maven-repository/raw/master/releases` and the
-dependency `org.jitsi.react:jitsi-meet-sdk:1.9.0` into your `build.gradle`.
-
-## API
-
-Jitsi Meet SDK is an Android library which embodies the whole Jitsi Meet
-experience and makes it reusable by third-party apps.
-
-To get started, extends your `android.app.Activity` from
-`org.jitsi.meet.sdk.JitsiMeetActivity`:
-
-```java
-package org.jitsi.example;
-
-import org.jitsi.meet.sdk.JitsiMeetActivity;
-
-public class MainActivity extends JitsiMeetActivity {
-}
-```
-
-Alternatively, you can use the `org.jitsi.meet.sdk.JitsiMeetView` class which
-extends `android.view.View`:
-
-```java
-package org.jitsi.example;
-
-import android.os.Bundle;
-import android.support.v7.app.AppCompatActivity;
-
-import org.jitsi.meet.sdk.JitsiMeetView;
-
-public class MainActivity extends AppCompatActivity {
-    private JitsiMeetView view;
-
-    @Override
-    public void onBackPressed() {
-        if (!JitsiMeetView.onBackPressed()) {
-            // Invoke the default handler if it wasn't handled by React.
-            super.onBackPressed();
-        }
-    }
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-
-        view = new JitsiMeetView(this);
-        view.loadURL(null);
-
-        setContentView(view);
-    }
-
-    @Override
-    protected void onDestroy() {
-        super.onDestroy();
-
-        view.dispose();
-        view = null;
-
-        JitsiMeetView.onHostDestroy(this);
-    }
-
-    @Override
-    public void onNewIntent(Intent intent) {
-        JitsiMeetView.onNewIntent(intent);
-    }
-
-    @Override
-    protected void onPause() {
-        super.onPause();
-
-        JitsiMeetView.onHostPause(this);
-    }
-
-    @Override
-    protected void onResume() {
-        super.onResume();
-
-        JitsiMeetView.onHostResume(this);
-    }
-}
-```
-
-### JitsiMeetActivity
-
-This class encapsulates a high level API in the form of an Android `Activity`
-which displays a single `JitsiMeetView`.
-
-#### getDefaultURL()
-
-See JitsiMeetView.getDefaultURL.
-
-#### getWelcomePageEnabled()
-
-See JitsiMeetView.getWelcomePageEnabled.
-
-#### loadURL(URL)
-
-See JitsiMeetView.loadURL.
-
-#### setDefaultURL(URL)
-
-See JitsiMeetView.setDefaultURL.
-
-#### setWelcomePageEnabled(boolean)
-
-See JitsiMeetView.setWelcomePageEnabled.
-
-### JitsiMeetView
-
-The `JitsiMeetView` class is the core of Jitsi Meet SDK. It's designed to
-display a Jitsi Meet conference (or a welcome page).
-
-#### dispose()
-
-Releases all resources associated with this view. This method MUST be called
-when the Activity holding this view is going to be destroyed, usually in the
-`onDestroy()` method.
-
-#### getDefaultURL()
-
-Returns the default base URL used to join a conference when a partial URL (e.g.
-a room name only) is specified to `loadURLString`/`loadURLObject`. If not set or
-if set to `null`, the default built in JavaScript is used: https://meet.jit.si.
-
-#### getListener()
-
-Returns the `JitsiMeetViewListener` instance attached to the view.
-
-#### getWelcomePageEnabled()
-
-Returns true if the Welcome page is enabled; otherwise, false. If false, a black
-empty view will be rendered when not in a conference. Defaults to false.
-
-#### loadURL(URL)
-
-Loads a specific URL which may identify a conference to join. If the specified
-URL is null and the Welcome page is enabled, the Welcome page is displayed
-instead.
-
-#### loadURLString(String)
-
-Loads a specific URL which may identify a conference to join. If the specified
-URL is null and the Welcome page is enabled, the Welcome page is displayed
-instead.
-
-#### loadURLObject(Bundle)
-
-Loads a specific URL which may identify a conference to join. The URL is
-specified in the form of a Bundle of properties which (1) internally are
-sufficient to construct a URL (string) while (2) abstracting the specifics of
-constructing the URL away from API clients/consumers. If the specified URL is
-null and the Welcome page is enabled, the Welcome page is displayed instead.
-
-Example:
-
-```java
-Bundle config = new Bundle();
-config.putBoolean("startWithAudioMuted", true);
-config.putBoolean("startWithVideoMuted", false);
-Bundle urlObject = new Bundle();
-urlObject.putBundle("config", config);
-urlObject.putString("url", "https://meet.jit.si/Test123");
-view.loadURLObject(urlObject);
-```
-
-#### setDefaultURL(URL)
-
-Sets the default URL. See `getDefaultURL` for more information.
-
-NOTE: Must be called before `loadURL`/`loadURLString` for it to take effect.
-
-#### setListener(listener)
-
-Sets the given listener (class implementing the `JitsiMeetViewListener`
-interface) on the view.
-
-#### setWelcomePageEnabled(boolean)
-
-Sets whether the Welcome page is enabled. See `getWelcomePageEnabled` for more
-information.
-
-NOTE: Must be called before `loadURL`/`loadURLString` for it to take effect.
-
-#### onBackPressed()
-
-Helper method which should be called from the activity's `onBackPressed` method.
-If this function returns `true`, it means the action was handled and thus no
-extra processing is required; otherwise the app should call the parent's
-`onBackPressed` method.
-
-This is a static method.
-
-#### onHostDestroy(activity)
-
-Helper method which should be called from the activity's `onDestroy` method.
-
-This is a static method.
-
-#### onHostPause(activity)
-
-Helper method which should be called from the activity's `onPause` method.
-
-This is a static method.
-
-#### onHostResume(activity)
-
-Helper method which should be called from the activity's `onResume` method.
-
-This is a static method.
-
-#### onNewIntent(intent)
-
-Helper method for integrating the *deep linking* functionality. If your app's
-activity is launched in "singleTask" mode this method should be called from the
-activity's `onNewIntent` method.
-
-This is a static method.
-
-#### JitsiMeetViewListener
-
-`JitsiMeetViewListener` provides an interface apps can implement to listen to
-the state of the Jitsi Meet conference displayed in a `JitsiMeetView`.
-
-### JitsiMeetViewAdapter
-
-A default implementation of the `JitsiMeetViewListener` interface. Apps may
-extend the class instead of implementing the interface in order to minimize
-boilerplate.
-
-##### onConferenceFailed
-
-Called when a joining a conference was unsuccessful or when there was an error
-while in a conference.
-
-The `data` `Map` contains an "error" key describing the error and a "url" key
-with the conference URL.
-
-#### onConferenceJoined
-
-Called when a conference was joined.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-#### onConferenceLeft
-
-Called when a conference was left.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-#### onConferenceWillJoin
-
-Called before a conference is joined.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-#### onConferenceWillLeave
-
-Called before a conference is left.
-
-The `data` `Map` contains a "url" key with the conference URL.
-
-#### onLoadConfigError
-
-Called when loading the main configuration file from the Jitsi Meet deployment
-fails.
-
-The `data` `Map` contains an "error" key with the error and a "url" key with the
-conference URL which necessitated the loading of the configuration file.

android/app/BUCK

@@ -0,0 +1,66 @@
+import re
+
+# To learn about Buck see [Docs](https://buckbuild.com/).
+# To run your application with Buck:
+# - install Buck
+# - `npm start` - to start the packager
+# - `cd android`
+# - `keytool -genkey -v -keystore keystores/debug.keystore -storepass android -alias androiddebugkey -keypass android -dname "CN=Android Debug,O=Android,C=US"`
+# - `./gradlew :app:copyDownloadableDepsToLibs` - make all Gradle compile dependencies available to Buck
+# - `buck install -r android/app` - compile, install and run application
+#
+
+lib_deps = []
+for jarfile in glob(['libs/*.jar']):
+  name = 'jars__' + re.sub(r'^.*/([^/]+)\.jar$', r'\1', jarfile)
+  lib_deps.append(':' + name)
+  prebuilt_jar(
+    name = name,
+    binary_jar = jarfile,
+  )
+
+for aarfile in glob(['libs/*.aar']):
+  name = 'aars__' + re.sub(r'^.*/([^/]+)\.aar$', r'\1', aarfile)
+  lib_deps.append(':' + name)
+  android_prebuilt_aar(
+    name = name,
+    aar = aarfile,
+  )
+
+android_library(
+  name = 'all-libs',
+  exported_deps = lib_deps
+)
+
+android_library(
+  name = 'app-code',
+  srcs = glob([
+    'src/main/java/**/*.java',
+  ]),
+  deps = [
+    ':all-libs',
+    ':build_config',
+    ':res',
+  ],
+)
+
+android_build_config(
+  name = 'build_config',
+  package = 'org.jitsi.jitsi_meet_react',
+)
+
+android_resource(
+  name = 'res',
+  res = 'src/main/res',
+  package = 'org.jitsi.jitsi_meet_react',
+)
+
+android_binary(
+  name = 'app',
+  package_type = 'debug',
+  manifest = 'src/main/AndroidManifest.xml',
+  keystore = '//android/keystores:debug',
+  deps = [
+    ':app-code',
+  ],
+)

android/app/build.gradle

@@ -1,40 +1,173 @@
+buildscript {
+    repositories {
+        maven { url 'https://maven.fabric.io/public' }
+    }
+
+    dependencies {
+        classpath 'io.fabric.tools:gradle:1.+'
+    }
+}
+
 apply plugin: 'com.android.application'
+apply plugin: 'io.fabric'
+
+import com.android.build.OutputFile
+
+/**
+ * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
+ * and bundleReleaseJsAndAssets).
+ * These basically call `react-native bundle` with the correct arguments during the Android build
+ * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
+ * bundle directly from the development server. Below you can see all the possible configurations
+ * and their defaults. If you decide to add a configuration block, make sure to add it before the
+ * `apply from: "../../node_modules/react-native/react.gradle"` line.
+ *
+ * project.ext.react = [
+ *   // the name of the generated asset file containing your JS bundle
+ *   bundleAssetName: "index.android.bundle",
+ *
+ *   // the entry file for bundle generation
+ *   entryFile: "index.android.js",
+ *
+ *   // whether to bundle JS and assets in debug mode
+ *   bundleInDebug: false,
+ *
+ *   // whether to bundle JS and assets in release mode
+ *   bundleInRelease: true,
+ *
+ *   // whether to bundle JS and assets in another build variant (if configured).
+ *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
+ *   // The configuration property can be in the following formats
+ *   //         'bundleIn${productFlavor}${buildType}'
+ *   //         'bundleIn${buildType}'
+ *   // bundleInFreeDebug: true,
+ *   // bundleInPaidRelease: true,
+ *   // bundleInBeta: true,
+ *
+ *   // the root of your project, i.e. where "package.json" lives
+ *   root: "../../",
+ *
+ *   // where to put the JS bundle asset in debug mode
+ *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
+ *
+ *   // where to put the JS bundle asset in release mode
+ *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in debug mode
+ *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
+ *
+ *   // where to put drawable resources / React Native assets, e.g. the ones you use via
+ *   // require('./image.png')), in release mode
+ *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
+ *
+ *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
+ *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
+ *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
+ *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
+ *   // for example, you might want to remove it from here.
+ *   inputExcludes: ["android/**", "ios/**"],
+ *
+ *   // override which node gets called and with what additional arguments
+ *   nodeExecutableAndArgs: ["node"]
+ *
+ *   // supply additional arguments to the packager
+ *   extraPackagerArgs: []
+ * ]
+ */
+
+apply from: '../../node_modules/react-native/react.gradle'
+
+/**
+ * Set this to true to create two separate APKs instead of one:
+ *   - An APK that only works on ARM devices
+ *   - An APK that only works on x86 devices
+ * The advantage is the size of the APK is reduced by about 4MB.
+ * Upload all the APKs to the Play Store and people will download
+ * the correct one based on the CPU architecture of their device.
+ */
+def enableSeparateBuildPerCPUArchitecture = false
+
+/**
+ * Run Proguard to shrink the Java bytecode in release builds.
+ */
+def enableProguardInReleaseBuilds = false
 
 android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    compileSdkVersion 23
+    buildToolsVersion '23.0.1'
 
     defaultConfig {
-        applicationId 'org.jitsi.meet'
-        versionCode Integer.parseInt("${version}")
-        versionName "1.9.${version}"
-
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-
+        applicationId 'org.jitsi.jitsi_meet_react'
+        minSdkVersion 16
+        targetSdkVersion 22
+        versionCode 1
+        versionName '1.0'
         ndk {
             abiFilters 'armeabi-v7a', 'x86'
         }
-
         packagingOptions {
             // The project react-native does not provide 64-bit binaries at the
             // time of this writing. Unfortunately, packaging any 64-bit
             // binaries into the .apk will crash the app at runtime on 64-bit
             // platforms.
-            exclude '/lib/mips64/**'
-            exclude '/lib/arm64-v8a/**'
-            exclude '/lib/x86_64/**'
+            exclude 'lib/x86_64/libjingle_peerconnection_so.so'
+            exclude 'lib/arm64-v8a/libjingle_peerconnection_so.so'
+        }
+    }
+    splits {
+        abi {
+            reset()
+            enable enableSeparateBuildPerCPUArchitecture
+            universalApk false  // If true, also generate a universal APK
+            include 'armeabi-v7a', 'x86'
         }
     }
     buildTypes {
         release {
-            minifyEnabled false
+            minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
+    // applicationVariants are e.g. debug, release
+    applicationVariants.all { variant ->
+        variant.outputs.each { output ->
+            // For each separate APK per architecture, set a unique version code as described here:
+            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
+            def versionCodes = ['armeabi-v7a':1, 'x86':2]
+            def abi = output.getFilter(OutputFile.ABI)
+            if (abi != null) {  // null for the universal-debug, universal-release variants
+                output.versionCodeOverride =
+                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
+            }
+        }
+    }
 }
 
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-
-    implementation project(':sdk')
+if (project.hasProperty('JITSI_SIGNING')
+        && new File(project.property('JITSI_SIGNING')).exists()) {
+    apply from: project.property('JITSI_SIGNING');
+}
+
+repositories {
+    maven { url 'https://maven.fabric.io/public' }
+}
+dependencies {
+    compile project(':react-native-vector-icons')
+    compile project(':react-native-webrtc')
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+    compile 'com.android.support:appcompat-v7:23.0.1'
+    compile 'com.facebook.react:react-native:+'
+    compile('com.crashlytics.sdk.android:crashlytics:2.6.5@aar') {
+        transitive = true
+    }
+}
+
+apply from: '../../node_modules/react-native-vector-icons/fonts.gradle'
+
+// Run this once to be able to run the application with BUCK
+// puts all compile dependencies into folder libs for BUCK to use
+task copyDownloadableDepsToLibs(type: Copy) {
+  from configurations.compile
+  into 'libs'
 }

android/app/src/main/AndroidManifest.xml

@@ -1,38 +1,50 @@
-<manifest
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    package="org.jitsi.meet">
-  <application
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.jitsi.jitsi_meet_react"
+    android:versionCode="1"
+    android:versionName="1.0">
+
+    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /><!-- WebRTC -->
+    <uses-permission android:name="android.permission.CAMERA" />
+    <uses-permission android:name="android.permission.INTERNET" />
+    <uses-permission android:name="android.permission.RECORD_AUDIO" />
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <uses-feature android:name="android.hardware.camera" />
+    <uses-feature android:name="android.hardware.camera.autofocus"/>
+
+    <uses-sdk
+        android:minSdkVersion="16"
+        android:targetSdkVersion="22" />
+
+    <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
+      android:name=".MainApplication"
       android:theme="@style/AppTheme">
-    <activity
+      <activity
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
         android:label="@string/app_name"
         android:launchMode="singleTask"
-        android:name=".MainActivity"
-        android:windowSoftInputMode="adjustResize">
-      <intent-filter>
-        <action android:name="android.intent.action.MAIN" />
-        <category android:name="android.intent.category.LAUNCHER" />
-      </intent-filter>
-      <intent-filter>
-        <action android:name="android.intent.action.VIEW" />
-        <category android:name="android.intent.category.BROWSABLE" />
-        <category android:name="android.intent.category.DEFAULT" />
-        <data android:host="beta.hipchat.me" android:scheme="https" />
-        <data android:host="beta.meet.jit.si" android:scheme="https" />
-        <data android:host="chaos.hipchat.me" android:scheme="https" />
-        <data android:host="enso.me" android:scheme="https" />
-        <data android:host="hipchat.me" android:scheme="https" />
-        <data android:host="meet.jit.si" android:scheme="https" />
-      </intent-filter>
-      <intent-filter>
-        <action android:name="android.intent.action.VIEW" />
-        <category android:name="android.intent.category.BROWSABLE" />
-        <category android:name="android.intent.category.DEFAULT" />
-        <data android:scheme="org.jitsi.meet" />
-      </intent-filter>
-    </activity>
-  </application>
+        android:name=".MainActivity">
+        <intent-filter>
+            <action android:name="android.intent.action.MAIN" />
+            <category android:name="android.intent.category.LAUNCHER" />
+        </intent-filter>
+        <intent-filter>
+            <action android:name="android.intent.action.VIEW" />
+            <category android:name="android.intent.category.BROWSABLE" />
+            <category android:name="android.intent.category.DEFAULT" />
+            <data android:host="beta.meet.jit.si" android:scheme="https" />
+            <data android:host="chaos.hipchat.me" android:scheme="https" />
+            <data android:host="enso.me" android:scheme="https" />
+            <data android:host="meet.jit.si" android:scheme="https" />
+        </intent-filter>
+      </activity>
+      <activity
+        android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+      <meta-data
+        android:name="io.fabric.ApiKey"
+        android:value="a8ae24a58302ba79da1d312138e941f6b86e3242" />
+    </application>
 </manifest>

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

@@ -0,0 +1,56 @@
+package org.jitsi.jitsi_meet_react;
+
+import android.os.Bundle;
+import com.crashlytics.android.Crashlytics;
+import com.facebook.react.ReactActivity;
+import com.facebook.react.ReactActivityDelegate;
+import com.facebook.react.ReactRootView;
+import io.fabric.sdk.android.Fabric;
+
+public class MainActivity extends ReactActivity {
+    /**
+     * {@inheritDoc}
+     *
+     * Overrides {@link ReactActivity#createRootActivityDelegate()} to customize
+     * the {@link ReactRootView} with a background color that is in accord with
+     * the JavaScript and iOS parts of the application and causes less perceived
+     * visual flicker than the default background color.
+     */
+    @Override
+    protected ReactActivityDelegate createReactActivityDelegate() {
+        return new ReactActivityDelegate(this, getMainComponentName()) {
+            /**
+             * {@inheritDoc}
+             *
+             * Overrides {@link ReactActivityDelegate#createRootView()} to
+             * customize the {@link ReactRootView} with a background color that
+             * is in accord with the JavaScript and iOS parts of the application
+             * and causes less perceived visual flicker than the default
+             * background color.
+             */
+            @Override
+            protected ReactRootView createRootView() {
+                ReactRootView rootView = super.createRootView();
+
+                rootView.setBackgroundColor(0xFF111111);
+                return rootView;
+            }
+        };
+    }
+
+    /**
+     * Returns the name of the main component registered from JavaScript.
+     * This is used to schedule rendering of the component.
+     */
+    @Override
+    protected String getMainComponentName() {
+        return "App";
+    }
+
+    @Override
+    protected void onCreate(Bundle savedInstanceState) {
+        super.onCreate(savedInstanceState);
+
+        Fabric.with(this, new Crashlytics());
+    }
+}

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

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

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

@@ -1,105 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet;
-
-import android.os.Bundle;
-import android.util.Log;
-
-import org.jitsi.meet.sdk.JitsiMeetActivity;
-import org.jitsi.meet.sdk.JitsiMeetView;
-import org.jitsi.meet.sdk.JitsiMeetViewListener;
-
-import java.util.Map;
-
-/**
- * The one and only {@link Activity} that the Jitsi Meet app needs. The
- * {@code Activity} is launched in {@code singleTask} mode, so it will be
- * created upon application initialization and there will be a single instance
- * of it. Further attempts at launching the application once it was already
- * launched will result in {@link Activity#onNewIntent(Intent)} being called.
- *
- * This {@code Activity} extends {@link JitsiMeetActivity} to keep the React
- * Native CLI working, since the latter always tries to launch an
- * {@code Activity} named {@code MainActivity} when doing
- * {@code react-native run-android}.
- */
-public class MainActivity extends JitsiMeetActivity {
-    @Override
-    protected JitsiMeetView initializeView() {
-        JitsiMeetView view = super.initializeView();
-
-        // XXX In order to increase (1) awareness of API breakages and (2) API
-        // coverage, utilize JitsiMeetViewListener in the Debug configuration of
-        // the app.
-        if (BuildConfig.DEBUG && view != null) {
-            view.setListener(new JitsiMeetViewListener() {
-                private void on(String name, Map<String, Object> data) {
-                    // Log with the tag "ReactNative" in order to have the log
-                    // visible in react-native log-android as well.
-                    Log.d(
-                        "ReactNative",
-                        JitsiMeetViewListener.class.getSimpleName() + " "
-                            + name + " "
-                            + data);
-                }
-
-                @Override
-                public void onConferenceFailed(Map<String, Object> data) {
-                    on("CONFERENCE_FAILED", data);
-                }
-
-                @Override
-                public void onConferenceJoined(Map<String, Object> data) {
-                    on("CONFERENCE_JOINED", data);
-                }
-
-                @Override
-                public void onConferenceLeft(Map<String, Object> data) {
-                    on("CONFERENCE_LEFT", data);
-                }
-
-                @Override
-                public void onConferenceWillJoin(Map<String, Object> data) {
-                    on("CONFERENCE_WILL_JOIN", data);
-                }
-
-                @Override
-                public void onConferenceWillLeave(Map<String, Object> data) {
-                    on("CONFERENCE_WILL_LEAVE", data);
-                }
-
-                @Override
-                public void onLoadConfigError(Map<String, Object> data) {
-                    on("LOAD_CONFIG_ERROR", data);
-                }
-            });
-        }
-
-        return view;
-    }
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        // As this is the Jitsi Meet app (i.e. not the Jitsi Meet SDK), we do
-        // want the Welcome page to be enabled. It defaults to disabled in the
-        // SDK at the time of this writing but it is clearer to be explicit
-        // about what we want anyway.
-        setWelcomePageEnabled(true);
-
-        super.onCreate(savedInstanceState);
-    }
-}

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

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

android/build.gradle

@@ -1,16 +1,14 @@
-// Top-level build file where you can add configuration options common to all
-// sub-projects/modules.
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
     repositories {
         jcenter()
-        maven { url 'https://maven.google.com' }
     }
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.0.0'
+        classpath 'com.android.tools.build:gradle:1.3.1'
 
         // NOTE: Do not place your application dependencies here; they belong
-        // in the individual module build.gradle files.
+        // in the individual module build.gradle files
     }
 }
 
@@ -18,141 +16,9 @@ allprojects {
     repositories {
         mavenLocal()
         jcenter()
-        maven { url "https://maven.google.com" } // Required for appcompat.
-        // React Native (JS, Obj-C sources, Android binaries) is installed from
-        // npm.
-        maven { url "$rootDir/../node_modules/react-native/android" }
-    }
-
-    // Third-party react-native modules which Jitsi Meet SDK for Android depends
-    // on and which are not available in third-party Maven repositories need to
-    // be deployed in a Maven repository of ours.
-    //
-
-    if (project.name.startsWith('react-native-')) {
-        apply plugin: 'maven-publish'
-        publishing {
-            publications {}
-            repositories {
-                maven { url "file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases" }
-            }
-        }
-    }
-
-    afterEvaluate { project ->
-        if (project.name.startsWith('react-native-')) {
-            def npmManifest = project.file('../package.json')
-            def json = new groovy.json.JsonSlurper().parseText(npmManifest.text)
-
-            // React Native modules have an npm peer dependency on react-native,
-            // they do not have an npm dependency on it. Further below though we
-            // choose a react-native version (range) when we represent them as
-            // Maven artifacts. Effectively, we are forking the projects by not
-            // complying with the full range of their npm peer dependency and,
-            // consequently, we should qualify their version.
-            def versionQualifier = '-jitsi-1'
-            if ('react-native-webrtc'.equals(project.name))
-                versionQualifier = '-jitsi-1'
-
-            project.version = "${json.version}${versionQualifier}"
-
-            project.android {
-                compileSdkVersion rootProject.ext.compileSdkVersion
-                if (rootProject.ext.has('buildToolsVersion')) {
-                    buildToolsVersion rootProject.ext.buildToolsVersion
-                }
-                defaultConfig {
-                    minSdkVersion rootProject.ext.minSdkVersion
-                    targetSdkVersion rootProject.ext.targetSdkVersion
-                }
-            }
-
-            task androidJavadocs(type: Javadoc) {
-                source = android.sourceSets.main.java.source
-                classpath += project.files(android.getBootClasspath().join(File.pathSeparator))
-                failOnError false
-            }
-            task androidJavadocsJar(type: Jar, dependsOn: androidJavadocs) {
-                classifier = 'javadoc'
-                from androidJavadocs.destinationDir
-            }
-            task androidSourcesJar(type: Jar) {
-                classifier = 'sources'
-                from android.sourceSets.main.java.source
-            }
-
-            publishing.publications {
-                aarArchive(MavenPublication) {
-                    groupId rootProject.ext.moduleGroupId
-                    artifactId project.name
-                    version project.version
-
-                    artifact("${project.buildDir}/outputs/aar/${project.name}-release.aar") {
-                        extension "aar"
-                    }
-                    artifact(androidSourcesJar)
-                    artifact(androidJavadocsJar)
-                    pom.withXml {
-                        def pomXml = asNode()
-                        pomXml.appendNode('name', project.name)
-                        pomXml.appendNode('description', json.description)
-                        pomXml.appendNode('url', json.homepage)
-                        if (json.license) {
-                            def license = pomXml.appendNode('licenses').appendNode('license')
-                            license.appendNode('name', json.license)
-                            license.appendNode('distribution', 'repo')
-                        }
-
-                        def dependencies = pomXml.appendNode('dependencies')
-                        configurations.getByName('releaseCompileClasspath').getResolvedConfiguration().getFirstLevelModuleDependencies().each {
-                            def artifactId = it.moduleName
-                            def version = it.moduleVersion
-                            // React Native signals breaking changes by
-                            // increasing the minor version number. So the
-                            // (third-party) React Native modules we utilize can
-                            // depend not on a specific react-native release but
-                            // a wider range.
-                            if (artifactId.equals('react-native')) {
-                                def versionNumber = VersionNumber.parse(version)
-                                version = "${versionNumber.major}.${versionNumber.minor}"
-                            }
-
-                            def dependency = dependencies.appendNode('dependency')
-                            dependency.appendNode('groupId', it.moduleGroup)
-                            dependency.appendNode('artifactId', artifactId)
-                            dependency.appendNode('version', version)
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-ext {
-    buildToolsVersion = "26.0.2"
-    compileSdkVersion = 26
-    minSdkVersion    = 16
-    targetSdkVersion = 25
-
-    // The Maven artifact groupdId of the third-party react-native modules which
-    // Jitsi Meet SDK for Android depends on and which are not available in
-    // third-party Maven repositories so we have to deploy to a Maven repository
-    // of ours.
-    moduleGroupId = 'com.facebook.react'
-}
-
-// Force the version of the Android build tools we have chosen on all
-// subprojects. The forcing was introduced for react-native and the third-party
-// modules that we utilize such as react-native-background-timer.
-subprojects { subproject ->
-    afterEvaluate{
-        if ((subproject.plugins.hasPlugin('android')
-                    || subproject.plugins.hasPlugin('android-library'))
-                && rootProject.ext.has('buildToolsVersion')) {
-            android {
-                buildToolsVersion rootProject.ext.buildToolsVersion
-            }
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
         }
     }
 }

android/gradle.properties

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

android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,5 @@
-#Fri Sep 08 10:42:14 CEST 2017
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-4.1-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.4-all.zip

android/sdk/build.gradle

@@ -1,162 +0,0 @@
-apply plugin: 'com.android.library'
-apply plugin: 'maven-publish'
-
-android {
-    compileSdkVersion rootProject.ext.compileSdkVersion
-
-    defaultConfig {
-        minSdkVersion rootProject.ext.minSdkVersion
-        targetSdkVersion rootProject.ext.targetSdkVersion
-    }
-
-    buildTypes {
-        debug {}
-        release {
-            minifyEnabled false
-            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
-        }
-    }
-}
-
-dependencies {
-    compile fileTree(dir: 'libs', include: ['*.jar'])
-
-    compile 'com.android.support:appcompat-v7:25.4.0'
-    compile 'com.facebook.react:react-native:+'
-
-    compile project(':react-native-background-timer')
-    compile project(':react-native-fetch-blob')
-    compile project(':react-native-immersive')
-    compile project(':react-native-keep-awake')
-    compile project(':react-native-vector-icons')
-    compile project(':react-native-webrtc')
-}
-
-// Build process helpers
-//
-
-void runBefore(String dependentTaskName, Task task) {
-    Task dependentTask = tasks.findByPath(dependentTaskName);
-    if (dependentTask != null) {
-        dependentTask.dependsOn task
-    }
-}
-
-gradle.projectsEvaluated {
-    android.buildTypes.all { buildType ->
-        def buildNameCapitalized = "${buildType.name.capitalize()}"
-        def bundlePath = "${buildDir}/intermediates/bundles/${buildType.name}"
-
-        // Bundle fonts in react-native-vector-icons.
-        //
-
-        def currentFontTask = tasks.create(
-                name: "copy${buildNameCapitalized}Fonts",
-                type: Copy) {
-            from("${projectDir}/../../fonts/jitsi.ttf")
-            from("${projectDir}/../../node_modules/react-native-vector-icons/Fonts/")
-            into("${bundlePath}/assets/fonts")
-        }
-
-        currentFontTask.dependsOn("merge${buildNameCapitalized}Resources")
-        currentFontTask.dependsOn("merge${buildNameCapitalized}Assets")
-
-        runBefore("processArmeabi-v7a${buildNameCapitalized}Resources", currentFontTask)
-        runBefore("processX86${buildNameCapitalized}Resources", currentFontTask)
-        runBefore("processUniversal${buildNameCapitalized}Resources", currentFontTask)
-        runBefore("process${buildNameCapitalized}Resources", currentFontTask)
-
-        // Bundle JavaScript and React resources.
-        // (adapted from react-native/react.gradle)
-        //
-
-        // React JS bundle directories
-        def jsBundleDir = file("${bundlePath}/assets")
-        def resourcesDir = file("${bundlePath}/res/merged")
-        def jsBundleFile = file("${jsBundleDir}/index.android.bundle")
-
-        // Bundle task name for variant.
-        def bundleJsAndAssetsTaskName = "bundle${buildNameCapitalized}JsAndAssets"
-
-        def currentBundleTask = tasks.create(
-                name: bundleJsAndAssetsTaskName,
-                type: Exec) {
-            // Set up inputs and outputs so gradle can cache the result.
-            def reactRoot = file("${projectDir}/../../")
-            inputs.files fileTree(dir: reactRoot, excludes: ['android/**', 'ios/**'])
-            outputs.dir jsBundleDir
-            outputs.dir resourcesDir
-
-            // Set up the call to the react-native cli.
-            workingDir reactRoot
-
-            // Create JS bundle
-            def devEnabled = !buildNameCapitalized.toLowerCase().contains('release')
-            commandLine(
-                'node',
-                'node_modules/react-native/local-cli/cli.js',
-                'bundle',
-                '--assets-dest', resourcesDir,
-                '--bundle-output', jsBundleFile,
-                '--dev', "${devEnabled}",
-                '--entry-file', 'index.android.js',
-                '--platform', 'android',
-                '--reset-cache')
-
-            // Disable bundling on dev builds
-            enabled !devEnabled
-        }
-
-        // Hook bundle${productFlavor}${buildType}JsAndAssets into the android build process
-        currentBundleTask.dependsOn("merge${buildNameCapitalized}Resources")
-        currentBundleTask.dependsOn("merge${buildNameCapitalized}Assets")
-
-        runBefore("processArmeabi-v7a${buildNameCapitalized}Resources", currentBundleTask)
-        runBefore("processX86${buildNameCapitalized}Resources", currentBundleTask)
-        runBefore("processUniversal${buildNameCapitalized}Resources", currentBundleTask)
-        runBefore("process${buildNameCapitalized}Resources", currentBundleTask)
-    }
-}
-
-publishing {
-    publications {
-        aarArchive(MavenPublication) {
-            groupId 'org.jitsi.react'
-            artifactId 'jitsi-meet-sdk'
-            version '1.9.0'
-
-            artifact("${project.buildDir}/outputs/aar/${project.name}-release.aar") {
-                extension "aar"
-            }
-            pom.withXml {
-                def pomXml = asNode()
-                pomXml.appendNode('name', 'jitsi-meet-sdk')
-                pomXml.appendNode('description', 'Jitsi Meet SDK for Android')
-                def dependencies = pomXml.appendNode('dependencies')
-                configurations.getByName('releaseCompileClasspath').getResolvedConfiguration().getFirstLevelModuleDependencies().each {
-                    // The (third-party) React Native modules that we depend on
-                    // are in source code form and do not have groupId. That is
-                    // why we have a dedicated groupId for them. But the other
-                    // dependencies come through Maven and, consequently, have
-                    // groupId.
-                    def groupId = it.moduleGroup
-                    def artifactId = it.moduleName
-
-                    if (artifactId.startsWith('react-native-')
-                            && groupId.equals('jitsi-meet')) {
-                        groupId = rootProject.ext.moduleGroupId
-                    }
-
-                    def dependency = dependencies.appendNode('dependency')
-                    dependency.appendNode('groupId', groupId)
-                    dependency.appendNode('artifactId', artifactId)
-                    dependency.appendNode('version', it.moduleVersion)
-                }
-            }
-        }
-
-    }
-    repositories {
-        maven { url "file:${rootProject.projectDir}/../../../jitsi/jitsi-maven-repository/releases" }
-    }
-}

android/sdk/proguard-rules.pro

@@ -1,25 +0,0 @@
-# Add project specific ProGuard rules here.
-# By default, the flags in this file are appended to flags specified
-# in /Users/scorretge/Library/Android/sdk/tools/proguard/proguard-android.txt
-# You can edit the include path and order by changing the proguardFiles
-# directive in build.gradle.
-#
-# For more details, see
-#   http://developer.android.com/guide/developing/tools/proguard.html
-
-# Add any project specific keep options here:
-
-# If your project uses WebView with JS, uncomment the following
-# and specify the fully qualified class name to the JavaScript interface
-# class:
-#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
-#   public *;
-#}
-
-# Uncomment this to preserve the line number information for
-# debugging stack traces.
-#-keepattributes SourceFile,LineNumberTable
-
-# If you keep the line number information, uncomment this to
-# hide the original source file name.
-#-renamesourcefileattribute SourceFile

android/sdk/src/main/AndroidManifest.xml

@@ -1,29 +0,0 @@
-<manifest
-    xmlns:android="http://schemas.android.com/apk/res/android"
-    package="org.jitsi.meet.sdk">
-  <!-- XXX ACCESS_NETWORK_STATE is required by WebRTC. -->
-  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
-  <uses-permission android:name="android.permission.BLUETOOTH" />
-  <uses-permission android:name="android.permission.CAMERA" />
-  <uses-permission android:name="android.permission.INTERNET" />
-  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
-  <uses-permission android:name="android.permission.RECORD_AUDIO" />
-  <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
-  <uses-permission android:name="android.permission.WAKE_LOCK" />
-
-  <uses-feature android:glEsVersion="0x00020000" android:required="true" />
-  <uses-feature
-      android:name="android.hardware.camera"
-      android:required="false" />
-  <uses-feature
-      android:name="android.hardware.camera.autofocus"
-      android:required="false" />
-
-  <application
-      android:allowBackup="true"
-      android:label="@string/app_name"
-      android:supportsRtl="true">
-    <activity
-        android:name="com.facebook.react.devsupport.DevSettingsActivity" />
-  </application>
-</manifest>

android/sdk/src/main/java/org/jitsi/meet/sdk/AndroidSettingsModule.java

@@ -1,39 +0,0 @@
-/**
- * Adapted from
- * {@link https://github.com/Aleksandern/react-native-android-settings-library}.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.content.Context;
-import android.content.Intent;
-import android.net.Uri;
-import android.provider.Settings;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-
-class AndroidSettingsModule extends ReactContextBaseJavaModule {
-    public AndroidSettingsModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    @Override
-    public String getName() {
-        return "AndroidSettings";
-    }
-
-    @ReactMethod
-    public void open() {
-        Context context = getReactApplicationContext();
-        Intent intent = new Intent();
-
-        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
-        intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS);
-        intent.setData(
-            Uri.fromParts("package", context.getPackageName(), null));
-
-        context.startActivity(intent);
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/AppInfoModule.java

@@ -1,61 +0,0 @@
-package org.jitsi.meet.sdk;
-
-import android.content.Context;
-import android.content.pm.ApplicationInfo;
-import android.content.pm.PackageInfo;
-import android.content.pm.PackageManager;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-
-import java.util.HashMap;
-import java.util.Map;
-
-class AppInfoModule extends ReactContextBaseJavaModule {
-    public AppInfoModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    /**
-     * Gets a {@code Map} of constants this module exports to JS. Supports JSON
-     * types.
-     *
-     * @return a {@link Map} of constants this module exports to JS
-     */
-    @Override
-    public Map<String, Object> getConstants() {
-        Context context = getReactApplicationContext();
-        PackageManager packageManager = context.getPackageManager();
-        ApplicationInfo applicationInfo;
-        PackageInfo packageInfo;
-
-        try {
-             String packageName = context.getPackageName();
-
-             applicationInfo
-                 = packageManager.getApplicationInfo(packageName, 0);
-             packageInfo = packageManager.getPackageInfo(packageName, 0);
-        } catch (PackageManager.NameNotFoundException e) {
-             applicationInfo = null;
-             packageInfo = null;
-        }
-
-        Map<String, Object> constants = new HashMap<>();
-
-        constants.put(
-            "name",
-            applicationInfo == null
-                ? ""
-                : packageManager.getApplicationLabel(applicationInfo));
-        constants.put(
-            "version",
-            packageInfo == null ? "" : packageInfo.versionName);
-
-        return constants;
-    }
-
-    @Override
-    public String getName() {
-        return "AppInfo";
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/AudioModeModule.java

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

android/sdk/src/main/java/org/jitsi/meet/sdk/BluetoothHeadsetMonitor.java

@@ -1,205 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.bluetooth.BluetoothAdapter;
-import android.bluetooth.BluetoothHeadset;
-import android.bluetooth.BluetoothProfile;
-import android.content.BroadcastReceiver;
-import android.content.Context;
-import android.content.Intent;
-import android.content.IntentFilter;
-import android.media.AudioManager;
-import android.os.Handler;
-import android.os.Looper;
-import android.util.Log;
-
-/**
- * Helper class to detect and handle Bluetooth device changes.  It monitors
- * Bluetooth headsets being connected / disconnected and notifies the module
- * about device changes when this occurs.
- */
-class BluetoothHeadsetMonitor {
-    /**
-     * {@link AudioModeModule} where this monitor reports.
-     */
-    private final AudioModeModule audioModeModule;
-
-    /**
-     * The {@link Context} in which {@link #audioModeModule} executes.
-     */
-    private final Context context;
-
-    /**
-     * Reference to a proxy object which allows us to query connected devices.
-     */
-    private BluetoothHeadset headset;
-
-    /**
-     * Flag indicating if there are any Bluetooth headset devices currently
-     * available.
-     */
-    private boolean headsetAvailable = false;
-
-    /**
-     * {@link Handler} for running all operations on the main thread.
-     */
-    private final Handler mainThreadHandler
-        = new Handler(Looper.getMainLooper());
-
-    /**
-     * Helper for running Bluetooth operations on the main thread.
-     */
-    private final Runnable updateDevicesRunnable
-        = new Runnable() {
-            @Override
-            public void run() {
-                headsetAvailable
-                    = (headset != null)
-                        && !headset.getConnectedDevices().isEmpty();
-                audioModeModule.onAudioDeviceChange();
-            }
-        };
-
-    public BluetoothHeadsetMonitor(
-            AudioModeModule audioModeModule,
-            Context context) {
-        this.audioModeModule = audioModeModule;
-        this.context = context;
-
-        AudioManager audioManager
-            = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
-
-        if (!audioManager.isBluetoothScoAvailableOffCall()) {
-            Log.w(AudioModeModule.TAG, "Bluetooth SCO is not available");
-            return;
-        }
-
-        if (getBluetoothHeadsetProfileProxy()) {
-            registerBluetoothReceiver();
-
-            // Initial detection.
-            updateDevices();
-        }
-    }
-
-    private boolean getBluetoothHeadsetProfileProxy() {
-        BluetoothAdapter adapter = BluetoothAdapter.getDefaultAdapter();
-
-        if (adapter == null) {
-            Log.w(AudioModeModule.TAG, "Device doesn't support Bluetooth");
-            return false;
-        }
-
-        // XXX: The profile listener listens for system services of the given
-        // type being available to the application. That is, if our Bluetooth
-        // adapter has the "headset" profile.
-        BluetoothProfile.ServiceListener listener
-            = new BluetoothProfile.ServiceListener() {
-                @Override
-                public void onServiceConnected(
-                        int profile,
-                        BluetoothProfile proxy) {
-                    if (profile == BluetoothProfile.HEADSET) {
-                        headset = (BluetoothHeadset) proxy;
-                        updateDevices();
-                    }
-                }
-
-                @Override
-                public void onServiceDisconnected(int profile) {
-                    // The logic is the same as the logic of onServiceConnected.
-                    onServiceConnected(profile, /* proxy */ null);
-                }
-            };
-
-        return
-            adapter.getProfileProxy(
-                    context,
-                    listener,
-                    BluetoothProfile.HEADSET);
-    }
-
-    /**
-     * Returns the current headset availability.
-     *
-     * @return {@code true} if there is a Bluetooth headset connected;
-     * {@code false}, otherwise.
-     */
-    public boolean isHeadsetAvailable() {
-        return headsetAvailable;
-    }
-
-    private void onBluetoothReceiverReceive(Context context, Intent intent) {
-        final String action = intent.getAction();
-
-        if (action.equals(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED)) {
-            // XXX: This action will be fired when a Bluetooth headset is
-            // connected or disconnected to the system. This is not related to
-            // audio routing.
-            int state = intent.getIntExtra(BluetoothHeadset.EXTRA_STATE, -99);
-
-            switch (state) {
-            case BluetoothHeadset.STATE_CONNECTED:
-            case BluetoothHeadset.STATE_DISCONNECTED:
-                Log.d(
-                        AudioModeModule.TAG,
-                        "BT headset connection state changed: " + state);
-                updateDevices();
-                break;
-            }
-        } else if (action.equals(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED)) {
-            // XXX: This action will be fired when the connection established
-            // with a Bluetooth headset (called a SCO connection) changes state.
-            // When the SCO connection is active we route audio to it.
-            int state
-                = intent.getIntExtra(AudioManager.EXTRA_SCO_AUDIO_STATE, -99);
-
-            switch (state) {
-            case AudioManager.SCO_AUDIO_STATE_CONNECTED:
-            case AudioManager.SCO_AUDIO_STATE_DISCONNECTED:
-                Log.d(
-                        AudioModeModule.TAG,
-                        "BT SCO connection state changed: " + state);
-                updateDevices();
-                break;
-            }
-        }
-    }
-
-    private void registerBluetoothReceiver() {
-        BroadcastReceiver receiver = new BroadcastReceiver() {
-            @Override
-            public void onReceive(Context context, Intent intent) {
-                onBluetoothReceiverReceive(context, intent);
-            }
-        };
-        IntentFilter filter = new IntentFilter();
-
-        filter.addAction(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED);
-        filter.addAction(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED);
-        context.registerReceiver(receiver, filter);
-    }
-
-    /**
-     * Detects if there are new devices connected / disconnected and fires the
-     * {@link AudioModeModule#onAudioDeviceChange()} callback.
-     */
-    private void updateDevices() {
-        mainThreadHandler.post(updateDevicesRunnable);
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/DefaultHardwareBackBtnHandlerImpl.java

@@ -1,65 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.app.Activity;
-
-import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-
-/**
- * Defines the default behavior of {@code JitsiMeetActivity} and
- * {@code JitsiMeetView} upon invoking the back button if no
- * {@code JitsiMeetView} handles the invocation. For example, a
- * {@code JitsiMeetView} may (1) handle the invocation of the back button
- * during a conference by leaving the conference and (2) not handle the
- * invocation when not in a conference.
- */
-public class DefaultHardwareBackBtnHandlerImpl
-    implements DefaultHardwareBackBtnHandler {
-
-    /**
-     * The {@code Activity} to which the default handling of the back button
-     * is being provided by this instance.
-     */
-    private final Activity activity;
-
-    /**
-     * Initializes a new {@code DefaultHardwareBackBtnHandlerImpl} instance to
-     * provide the default handling of the back button to a specific
-     * {@code Activity}.
-     *
-     * @param activity the {@code Activity} to which the new instance is to
-     * provide the default behavior of the back button
-     */
-    public DefaultHardwareBackBtnHandlerImpl(Activity activity) {
-        this.activity = activity;
-    }
-
-    /**
-     * {@inheritDoc}
-     *
-     * Finishes the associated {@code Activity}.
-     */
-    @Override
-    public void invokeDefaultOnBackPressed() {
-        // Technically, we'd like to invoke Activity#onBackPressed().
-        // Practically, it's not possible. Fortunately, the documentation of
-        // Activity#onBackPressed() specifies that "[t]he default implementation
-        // simply finishes the current activity,"
-        activity.finish();
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/ExternalAPIModule.java

@@ -1,172 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.ReadableMap;
-import com.facebook.react.bridge.ReadableMapKeySetIterator;
-
-import org.jitsi.meet.sdk.JitsiMeetView;
-import org.jitsi.meet.sdk.JitsiMeetViewListener;
-
-import java.lang.reflect.InvocationTargetException;
-import java.lang.reflect.Method;
-import java.lang.reflect.Modifier;
-import java.util.HashMap;
-import java.util.Locale;
-import java.util.Map;
-import java.util.regex.Pattern;
-
-/**
- * Module implementing a simple API to enable a proximity sensor-controlled
- * wake lock. When the lock is held, if the proximity sensor detects a nearby
- * object it will dim the screen and disable touch controls. The functionality
- * is used with the conference audio-only mode.
- */
-class ExternalAPIModule extends ReactContextBaseJavaModule {
-    /**
-     * The {@code Method}s of {@code JitsiMeetViewListener} by event name i.e.
-     * redux action types.
-     */
-    private static final Map<String, Method> JITSI_MEET_VIEW_LISTENER_METHODS
-        = new HashMap<>();
-
-    static {
-        // Figure out the mapping between the JitsiMeetViewListener methods
-        // and the events i.e. redux action types.
-        Pattern onPattern = Pattern.compile("^on[A-Z]+");
-        Pattern camelcasePattern = Pattern.compile("([a-z0-9]+)([A-Z0-9]+)");
-
-        for (Method method : JitsiMeetViewListener.class.getDeclaredMethods()) {
-            // * The method must be public (because it is declared by an
-            //   interface).
-            // * The method must be/return void.
-            if (!Modifier.isPublic(method.getModifiers())
-                    || !Void.TYPE.equals(method.getReturnType())) {
-                continue;
-            }
-
-            // * The method name must start with "on" followed by a
-            //   capital/uppercase letter (in agreement with the camelcase
-            //   coding style customary to Java in general and the projects of
-            //   the Jitsi community in particular).
-            String name = method.getName();
-
-            if (!onPattern.matcher(name).find()) {
-                continue;
-            }
-
-            // * The method must accept/have exactly 1 parameter of a type
-            //   assignable from HashMap.
-            Class<?>[] parameterTypes = method.getParameterTypes();
-
-            if (parameterTypes.length != 1
-                    || !parameterTypes[0].isAssignableFrom(HashMap.class)) {
-                continue;
-            }
-
-            // Convert the method name to an event name.
-            name
-                = camelcasePattern.matcher(name.substring(2))
-                    .replaceAll("$1_$2")
-                    .toUpperCase(Locale.ROOT);
-            JITSI_MEET_VIEW_LISTENER_METHODS.put(name, method);
-        }
-    }
-
-    /**
-     * Initializes a new module instance. There shall be a single instance of
-     * this module throughout the lifetime of the application.
-     *
-     * @param reactContext the {@link ReactApplicationContext} where this module
-     * is created.
-     */
-    public ExternalAPIModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-    }
-
-    /**
-     * Gets the name of this module to be used in the React Native bridge.
-     *
-     * @return The name of this module to be used in the React Native bridge.
-     */
-    @Override
-    public String getName() {
-        return "ExternalAPI";
-    }
-
-    /**
-     * Dispatches an event that occurred on JavaScript to the view's listener.
-     *
-     * @param name The name of the event.
-     * @param data The details/specifics of the event to send determined
-     * by/associated with the specified {@code name}.
-     * @param scope
-     */
-    @ReactMethod
-    public void sendEvent(String name, ReadableMap data, String scope) {
-        // The JavaScript App needs to provide uniquely identifying information
-        // to the native ExternalAPI module so that the latter may match the
-        // former to the native JitsiMeetView which hosts it.
-        JitsiMeetView view = JitsiMeetView.findViewByExternalAPIScope(scope);
-
-        if (view == null) {
-            return;
-        }
-
-        JitsiMeetViewListener listener = view.getListener();
-
-        if (listener == null) {
-            return;
-        }
-
-        Method method = JITSI_MEET_VIEW_LISTENER_METHODS.get(name);
-
-        if (method != null) {
-            try {
-                method.invoke(listener, toHashMap(data));
-            } catch (IllegalAccessException | InvocationTargetException e) {
-                throw new RuntimeException(e);
-            }
-        }
-    }
-
-    /**
-     * Initializes a new {@code HashMap} instance with the key-value
-     * associations of a specific {@code ReadableMap}.
-     *
-     * @param readableMap the {@code ReadableMap} specifying the key-value
-     * associations with which the new {@code HashMap} instance is to be
-     * initialized.
-     * @return a new {@code HashMap} instance initialized with the key-value
-     * associations of the specified {@code readableMap}.
-     */
-    private HashMap<String, Object> toHashMap(ReadableMap readableMap) {
-        HashMap<String, Object> hashMap = new HashMap<>();
-
-        for (ReadableMapKeySetIterator i = readableMap.keySetIterator();
-                i.hasNextKey();) {
-            String key = i.nextKey();
-
-            hashMap.put(key, readableMap.getString(key));
-        }
-
-        return hashMap;
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetActivity.java

@@ -1,246 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.content.Intent;
-import android.net.Uri;
-import android.os.Build;
-import android.os.Bundle;
-import android.provider.Settings;
-import android.support.annotation.Nullable;
-import android.support.v7.app.AppCompatActivity;
-
-import java.net.URL;
-
-import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-
-/**
- * Base Activity for applications integrating Jitsi Meet at a higher level. It
- * contains all the required wiring between the {@code JKConferenceView} and
- * the Activity lifecycle methods already implemented.
- *
- * In this activity we use a single {@code JKConferenceView} instance. This
- * instance gives us access to a view which displays the welcome page and the
- * conference itself. All lifetime methods associated with this Activity are
- * hooked to the React Native subsystem via proxy calls through the
- * {@code JKConferenceView} static methods.
- */
-public class JitsiMeetActivity
-    extends AppCompatActivity {
-
-    /**
-     * The request code identifying requests for the permission to draw on top
-     * of other apps. The value must be 16-bit and is arbitrarily chosen here.
-     */
-    private static final int OVERLAY_PERMISSION_REQUEST_CODE
-        = (int) (Math.random() * Short.MAX_VALUE);
-
-    /**
-     * The default behavior of this {@code JitsiMeetActivity} upon invoking the
-     * back button if {@link #view} does not handle the invocation.
-     */
-    private DefaultHardwareBackBtnHandler defaultBackButtonImpl;
-
-    /**
-     * The default base {@code URL} used to join a conference when a partial URL
-     * (e.g. a room name only) is specified. The value is used only while
-     * {@link #view} equals {@code null}.
-     */
-    private URL defaultURL;
-
-    /**
-     * Instance of the {@link JitsiMeetView} which this activity will display.
-     */
-    private JitsiMeetView view;
-
-    /**
-     * Whether the Welcome page is enabled. The value is used only while
-     * {@link #view} equals {@code null}.
-     */
-    private boolean welcomePageEnabled;
-
-    private boolean canRequestOverlayPermission() {
-        return
-            BuildConfig.DEBUG
-                && Build.VERSION.SDK_INT >= Build.VERSION_CODES.M
-                && getApplicationInfo().targetSdkVersion
-                    >= Build.VERSION_CODES.M;
-    }
-
-    /**
-     *
-     * @see JitsiMeetView#getDefaultURL()
-     */
-    public URL getDefaultURL() {
-        return view == null ? defaultURL : view.getDefaultURL();
-    }
-
-    /**
-     *
-     * @see JitsiMeetView#getWelcomePageEnabled()
-     */
-    public boolean getWelcomePageEnabled() {
-        return view == null ? welcomePageEnabled : view.getWelcomePageEnabled();
-    }
-
-    /**
-     * Initializes the {@link #view} of this {@code JitsiMeetActivity} with a
-     * new {@link JitsiMeetView} instance.
-     */
-    private void initializeContentView() {
-        JitsiMeetView view = initializeView();
-
-        if (view != null) {
-            this.view = view;
-            setContentView(this.view);
-        }
-    }
-
-    /**
-     * Initializes a new {@link JitsiMeetView} instance.
-     *
-     * @return a new {@code JitsiMeetView} instance.
-     */
-    protected JitsiMeetView initializeView() {
-        JitsiMeetView view = new JitsiMeetView(this);
-
-        // XXX Before calling JitsiMeetView#loadURL, make sure to call whatever
-        // is documented to need such an order in order to take effect:
-        view.setDefaultURL(defaultURL);
-        view.setWelcomePageEnabled(welcomePageEnabled);
-
-        view.loadURL(null);
-
-        return view;
-    }
-
-    /**
-     * Loads the given URL and displays the conference. If the specified URL is
-     * null, the welcome page is displayed instead.
-     *
-     * @param url The conference URL.
-     */
-    public void loadURL(@Nullable URL url) {
-        view.loadURL(url);
-    }
-
-    @Override
-    protected void onActivityResult(
-            int requestCode,
-            int resultCode,
-            Intent data) {
-        if (requestCode == OVERLAY_PERMISSION_REQUEST_CODE
-                && canRequestOverlayPermission()) {
-            if (Settings.canDrawOverlays(this)) {
-                initializeContentView();
-            }
-        }
-    }
-
-    @Override
-    public void onBackPressed() {
-        if (!JitsiMeetView.onBackPressed()) {
-            // JitsiMeetView didn't handle the invocation of the back button.
-            // Generally, an Activity extender would very likely want to invoke
-            // Activity#onBackPressed(). For the sake of consistency with
-            // JitsiMeetView and within the Jitsi Meet SDK for Android though,
-            // JitsiMeetActivity does what JitsiMeetView would've done if it
-            // were able to handle the invocation.
-            if (defaultBackButtonImpl == null) {
-                super.onBackPressed();
-            } else {
-                defaultBackButtonImpl.invokeDefaultOnBackPressed();
-            }
-        }
-    }
-
-    @Override
-    protected void onCreate(Bundle savedInstanceState) {
-        super.onCreate(savedInstanceState);
-
-        // In Debug builds React needs permission to write over other apps in
-        // order to display the warning and error overlays.
-        if (canRequestOverlayPermission() && !Settings.canDrawOverlays(this)) {
-            Intent intent
-                = new Intent(
-                        Settings.ACTION_MANAGE_OVERLAY_PERMISSION,
-                        Uri.parse("package:" + getPackageName()));
-
-            startActivityForResult(intent, OVERLAY_PERMISSION_REQUEST_CODE);
-            return;
-        }
-
-        initializeContentView();
-    }
-
-    @Override
-    protected void onDestroy() {
-        super.onDestroy();
-
-        if (view != null) {
-            view.dispose();
-            view = null;
-        }
-
-        JitsiMeetView.onHostDestroy(this);
-    }
-
-    @Override
-    public void onNewIntent(Intent intent) {
-        JitsiMeetView.onNewIntent(intent);
-    }
-
-    @Override
-    protected void onPause() {
-        super.onPause();
-
-        JitsiMeetView.onHostPause(this);
-        defaultBackButtonImpl = null;
-    }
-
-    @Override
-    protected void onResume() {
-        super.onResume();
-
-        defaultBackButtonImpl = new DefaultHardwareBackBtnHandlerImpl(this);
-        JitsiMeetView.onHostResume(this, defaultBackButtonImpl);
-    }
-
-    /**
-     *
-     * @see JitsiMeetView#setDefaultURL(URL)
-     */
-    public void setDefaultURL(URL defaultURL) {
-        if (view == null) {
-            this.defaultURL = defaultURL;
-        } else {
-            view.setDefaultURL(defaultURL);
-        }
-    }
-
-    /**
-     *
-     * @see JitsiMeetView#setWelcomePageEnabled(boolean)
-     */
-    public void setWelcomePageEnabled(boolean welcomePageEnabled) {
-        if (view == null) {
-            this.welcomePageEnabled = welcomePageEnabled;
-        } else {
-            view.setWelcomePageEnabled(welcomePageEnabled);
-        }
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetView.java

@@ -1,449 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.app.Activity;
-import android.app.Application;
-import android.content.Context;
-import android.content.Intent;
-import android.net.Uri;
-import android.os.Bundle;
-import android.support.annotation.NonNull;
-import android.support.annotation.Nullable;
-import android.widget.FrameLayout;
-
-import com.facebook.react.ReactInstanceManager;
-import com.facebook.react.ReactRootView;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.common.LifecycleState;
-import com.facebook.react.modules.core.DefaultHardwareBackBtnHandler;
-
-import java.net.URL;
-import java.util.Arrays;
-import java.util.Collections;
-import java.util.List;
-import java.util.Set;
-import java.util.UUID;
-import java.util.WeakHashMap;
-
-public class JitsiMeetView extends FrameLayout {
-    /**
-     * Background color used by {@code JitsiMeetView} and the React Native root
-     * view.
-     */
-    private static final int BACKGROUND_COLOR = 0xFF111111;
-
-    /**
-     * React Native bridge. The instance manager allows embedding applications
-     * to create multiple root views off the same JavaScript bundle.
-     */
-    private static ReactInstanceManager reactInstanceManager;
-
-    private static final Set<JitsiMeetView> views
-        = Collections.newSetFromMap(new WeakHashMap<JitsiMeetView, Boolean>());
-
-    private static List<NativeModule> createNativeModules(
-            ReactApplicationContext reactContext) {
-        return Arrays.<NativeModule>asList(
-            new AndroidSettingsModule(reactContext),
-            new AppInfoModule(reactContext),
-            new AudioModeModule(reactContext),
-            new ExternalAPIModule(reactContext),
-            new ProximityModule(reactContext)
-        );
-    }
-
-    public static JitsiMeetView findViewByExternalAPIScope(
-            String externalAPIScope) {
-        synchronized (views) {
-            for (JitsiMeetView view : views) {
-                if (view.externalAPIScope.equals(externalAPIScope)) {
-                    return view;
-                }
-            }
-        }
-
-        return null;
-    }
-
-    /**
-     * Internal method to initialize the React Native instance manager. We
-     * create a single instance in order to load the JavaScript bundle a single
-     * time. All {@code ReactRootView} instances will be tied to the one and
-     * only {@code ReactInstanceManager}.
-     *
-     * @param application {@code Application} instance which is running.
-     */
-    private static void initReactInstanceManager(Application application) {
-        reactInstanceManager
-            = ReactInstanceManager.builder()
-                .setApplication(application)
-                .setBundleAssetName("index.android.bundle")
-                .setJSMainModulePath("index.android")
-                .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
-                .addPackage(new com.facebook.react.shell.MainReactPackage())
-                .addPackage(new com.oblador.vectoricons.VectorIconsPackage())
-                .addPackage(new com.ocetnik.timer.BackgroundTimerPackage())
-                .addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
-                .addPackage(new com.RNFetchBlob.RNFetchBlobPackage())
-                .addPackage(new com.rnimmersive.RNImmersivePackage())
-                .addPackage(new ReactPackageAdapter() {
-                    @Override
-                    public List<NativeModule> createNativeModules(
-                            ReactApplicationContext reactContext) {
-                        return JitsiMeetView.createNativeModules(reactContext);
-                    }
-                })
-                .setUseDeveloperSupport(BuildConfig.DEBUG)
-                .setInitialLifecycleState(LifecycleState.RESUMED)
-                .build();
-    }
-
-    /**
-     * Loads a specific URL {@code String} in all existing
-     * {@code JitsiMeetView}s.
-     *
-     * @param urlString he URL {@code String} to load in all existing
-     * {@code JitsiMeetView}s.
-     * @return If the specified {@code urlString} was submitted for loading in
-     * at least one {@code JitsiMeetView}, then {@code true}; otherwise,
-     * {@code false}.
-     */
-    private static boolean loadURLStringInViews(String urlString) {
-        synchronized (views) {
-            if (!views.isEmpty()) {
-                for (JitsiMeetView view : views) {
-                    view.loadURLString(urlString);
-                }
-
-                return true;
-            }
-        }
-
-        return false;
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onBackPressed} so we can do the required internal
-     * processing.
-     *
-     * @return {@code true} if the back-press was processed; {@code false},
-     * otherwise. If {@code false}, the application should call the parent's
-     * implementation.
-     */
-    public static boolean onBackPressed() {
-        if (reactInstanceManager == null) {
-            return false;
-        } else {
-            reactInstanceManager.onBackPressed();
-            return true;
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onDestroy} so we can do the required internal
-     * processing.
-     *
-     * @param activity {@code Activity} being destroyed.
-     */
-    public static void onHostDestroy(Activity activity) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostDestroy(activity);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onPause} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being paused.
-     */
-    public static void onHostPause(Activity activity) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostPause(activity);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onResume} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being resumed.
-     */
-    public static void onHostResume(Activity activity) {
-        onHostResume(activity, new DefaultHardwareBackBtnHandlerImpl(activity));
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onResume} so we can do the required internal processing.
-     *
-     * @param activity {@code Activity} being resumed.
-     * @param defaultBackButtonImpl a {@code DefaultHardwareBackBtnHandler} to
-     * handle invoking the back button if no {@code JitsiMeetView} handles it.
-     */
-    public static void onHostResume(
-            Activity activity,
-            DefaultHardwareBackBtnHandler defaultBackButtonImpl) {
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onHostResume(activity, defaultBackButtonImpl);
-        }
-    }
-
-    /**
-     * Activity lifecycle method which should be called from
-     * {@code Activity.onNewIntent} so we can do the required internal
-     * processing. Note that this is only needed if the activity's "launchMode"
-     * was set to "singleTask". This is required for deep linking to work once
-     * the application is already running.
-     *
-     * @param intent {@code Intent} instance which was received.
-     */
-    public static void onNewIntent(Intent intent) {
-        // XXX At least twice we received bug reports about malfunctioning
-        // loadURL in the Jitsi Meet SDK while the Jitsi Meet app seemed to
-        // functioning as expected in our testing. But that was to be expected
-        // because the app does not exercise loadURL. In order to increase the
-        // test coverage of loadURL, channel deep linking through loadURL.
-        Uri uri;
-
-        if (Intent.ACTION_VIEW.equals(intent.getAction())
-                && (uri = intent.getData()) != null
-                && loadURLStringInViews(uri.toString())) {
-            return;
-        }
-
-        if (reactInstanceManager != null) {
-            reactInstanceManager.onNewIntent(intent);
-        }
-    }
-
-    /**
-     * The default base {@code URL} used to join a conference when a partial URL
-     * (e.g. a room name only) is specified to {@link #loadURLString(String)} or
-     * {@link #loadURLObject(Bundle)}.
-     */
-    private URL defaultURL;
-
-    /**
-     * The unique identifier of this {@code JitsiMeetView} within the process
-     * for the purposes of {@link ExternalAPI}. The name scope was inspired by
-     * postis which we use on Web for the similar purposes of the iframe-based
-     * external API.
-     */
-    private final String externalAPIScope;
-
-    /**
-     * {@link JitsiMeetViewListener} instance for reporting events occurring in
-     * Jitsi Meet.
-     */
-    private JitsiMeetViewListener listener;
-
-    /**
-     * React Native root view.
-     */
-    private ReactRootView reactRootView;
-
-    /**
-     * Whether the Welcome page is enabled.
-     */
-    private boolean welcomePageEnabled;
-
-    public JitsiMeetView(@NonNull Context context) {
-        super(context);
-
-        setBackgroundColor(BACKGROUND_COLOR);
-
-        if (reactInstanceManager == null) {
-            initReactInstanceManager(((Activity) context).getApplication());
-        }
-
-        // Hook this JitsiMeetView into ExternalAPI.
-        externalAPIScope = UUID.randomUUID().toString();
-        synchronized (views) {
-            views.add(this);
-        }
-    }
-
-    /**
-     * Releases the React resources (specifically the {@link ReactRootView})
-     * associated with this view.
-     *
-     * This method MUST be called when the Activity holding this view is
-     * destroyed, typically in the {@code onDestroy} method.
-     */
-    public void dispose() {
-        if (reactRootView != null) {
-            removeView(reactRootView);
-            reactRootView.unmountReactApplication();
-            reactRootView = null;
-        }
-    }
-
-    /**
-     * Gets the default base {@code URL} used to join a conference when a
-     * partial URL (e.g. a room name only) is specified to
-     * {@link #loadURLString(String)} or {@link #loadURLObject(Bundle)}. If not
-     * set or if set to {@code null}, the default built in JavaScript is used:
-     * {@link https://meet.jit.si}
-     *
-     * @return The default base {@code URL} or {@code null}.
-     */
-    public URL getDefaultURL() {
-        return defaultURL;
-    }
-
-    /**
-     * Gets the {@link JitsiMeetViewListener} set on this {@code JitsiMeetView}.
-     *
-     * @return The {@code JitsiMeetViewListener} set on this
-     * {@code JitsiMeetView}.
-     */
-    public JitsiMeetViewListener getListener() {
-        return listener;
-    }
-
-    /**
-     * Gets whether the Welcome page is enabled. If {@code true}, the Welcome
-     * page is rendered when this {@code JitsiMeetView} is not at a URL
-     * identifying a Jitsi Meet conference/room.
-     *
-     * @return {@code true} if the Welcome page is enabled; otherwise,
-     * {@code false}.
-     */
-    public boolean getWelcomePageEnabled() {
-        return welcomePageEnabled;
-    }
-
-    /**
-     * Loads a specific {@link URL} which may identify a conference to join. If
-     * the specified {@code URL} is {@code null} and the Welcome page is
-     * enabled, the Welcome page is displayed instead.
-     *
-     * @param url The {@code URL} to load which may identify a conference to
-     * join.
-     */
-    public void loadURL(@Nullable URL url) {
-        loadURLString(url == null ? null : url.toString());
-    }
-
-    /**
-     * Loads a specific URL which may identify a conference to join. The URL is
-     * specified in the form of a {@link Bundle} of properties which (1)
-     * internally are sufficient to construct a URL {@code String} while (2)
-     * abstracting the specifics of constructing the URL away from API
-     * clients/consumers. If the specified URL is {@code null} and the Welcome
-     * page is enabled, the Welcome page is displayed instead.
-     *
-     * @param urlObject The URL to load which may identify a conference to join.
-     */
-    public void loadURLObject(@Nullable Bundle urlObject) {
-        Bundle props = new Bundle();
-
-        // defaultURL
-        if (defaultURL != null) {
-            props.putString("defaultURL", defaultURL.toString());
-        }
-        // externalAPIScope
-        props.putString("externalAPIScope", externalAPIScope);
-        // url
-        if (urlObject != null) {
-            props.putBundle("url", urlObject);
-        }
-        // welcomePageEnabled
-        props.putBoolean("welcomePageEnabled", welcomePageEnabled);
-
-        // XXX The method loadURLObject: is supposed to be imperative i.e.
-        // a second invocation with one and the same URL is expected to join
-        // the respective conference again if the first invocation was followed
-        // by leaving the conference. However, React and, respectively,
-        // appProperties/initialProperties are declarative expressions i.e. one
-        // and the same URL will not trigger componentWillReceiveProps in the
-        // JavaScript source code. The workaround implemented bellow introduces
-        // imperativeness in React Component props by defining a unique value
-        // per loadURLObject: invocation.
-        props.putLong("timestamp", System.currentTimeMillis());
-
-        if (reactRootView == null) {
-            reactRootView = new ReactRootView(getContext());
-            reactRootView.startReactApplication(
-                reactInstanceManager, "App", props);
-            reactRootView.setBackgroundColor(BACKGROUND_COLOR);
-            addView(reactRootView);
-        } else {
-            reactRootView.setAppProperties(props);
-        }
-    }
-
-    /**
-     * Loads a specific URL {@link String} which may identify a conference to
-     * join. If the specified URL {@code String} is {@code null} and the Welcome
-     * page is enabled, the Welcome page is displayed instead.
-     *
-     * @param urlString The URL {@code String} to load which may identify a
-     * conference to join.
-     */
-    public void loadURLString(@Nullable String urlString) {
-        Bundle urlObject;
-
-        if (urlString == null) {
-            urlObject = null;
-        } else {
-            urlObject = new Bundle();
-            urlObject.putString("url", urlString);
-        }
-        loadURLObject(urlObject);
-    }
-
-    /**
-     * Sets the default base {@code URL} used to join a conference when a
-     * partial URL (e.g. a room name only) is specified to
-     * {@link #loadURLString(String)} or {@link #loadURLObject(Bundle)}. Must be
-     * called before {@link #loadURL(URL)} for it to take effect.
-     *
-     * @param defaultURL The {@code URL} to be set as the default base URL.
-     * @see #getDefaultURL()
-     */
-    public void setDefaultURL(URL defaultURL) {
-        this.defaultURL = defaultURL;
-    }
-
-    /**
-     * Sets a specific {@link JitsiMeetViewListener} on this
-     * {@code JitsiMeetView}.
-     *
-     * @param listener The {@code JitsiMeetViewListener} to set on this
-     * {@code JitsiMeetView}.
-     */
-    public void setListener(JitsiMeetViewListener listener) {
-        this.listener = listener;
-    }
-
-    /**
-     * Sets whether the Welcome page is enabled. Must be called before
-     * {@link #loadURL(URL)} for it to take effect.
-     *
-     * @param welcomePageEnabled {@code true} to enable the Welcome page;
-     * otherwise, {@code false}.
-     */
-    public void setWelcomePageEnabled(boolean welcomePageEnabled) {
-        this.welcomePageEnabled = welcomePageEnabled;
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetViewAdapter.java

@@ -1,49 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import java.util.Map;
-
-/**
- * Implements {@link JitsiMeetViewListener} so apps don't have to add stubs for
- * all methods in the interface if they are only interested in some.
- */
-public abstract class JitsiMeetViewAdapter implements JitsiMeetViewListener {
-    @Override
-    public void onConferenceFailed(Map<String, Object> data) {
-    }
-
-    @Override
-    public void onConferenceJoined(Map<String, Object> data) {
-    }
-
-    @Override
-    public void onConferenceLeft(Map<String, Object> data) {
-    }
-
-    @Override
-    public void onConferenceWillJoin(Map<String, Object> data) {
-    }
-
-    @Override
-    public void onConferenceWillLeave(Map<String, Object> data) {
-    }
-
-    @Override
-    public void onLoadConfigError(Map<String, Object> data) {
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/JitsiMeetViewListener.java

@@ -1,71 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import java.util.Map;
-
-/**
- * Interface for listening to events coming from Jitsi Meet.
- */
-public interface JitsiMeetViewListener {
-    /**
-     * Called when joining a conference fails or an ongoing conference is
-     * interrupted due to a failure.
-     *
-     * @param data Map with an "error" key describing the problem, and a "url"
-     * key with the conference URL.
-     */
-    void onConferenceFailed(Map<String, Object> data);
-
-    /**
-     * Called when a conference was joined.
-     *
-     * @param data Map with a "url" key with the conference URL.
-     */
-    void onConferenceJoined(Map<String, Object> data);
-
-    /**
-     * Called when the conference was left, typically after hanging up.
-     *
-     * @param data Map with a "url" key with the conference URL.
-     */
-    void onConferenceLeft(Map<String, Object> data);
-
-    /**
-     * Called before the conference is joined.
-     *
-     * @param data Map with a "url" key with the conference URL.
-     */
-    void onConferenceWillJoin(Map<String, Object> data);
-
-    /**
-     * Called before the conference is left.
-     *
-     * @param data Map with a "url" key with the conference URL.
-     */
-    void onConferenceWillLeave(Map<String, Object> data);
-
-    /**
-     * Called when loading the main configuration file from the Jitsi Meet
-     * deployment fails.
-     *
-     * @param data Map with an "error" key with the error and a "url" key with
-     * the conference URL which necessitated the loading of the configuration
-     * file.
-     */
-    void onLoadConfigError(Map<String, Object> data);
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/ProximityModule.java

@@ -1,118 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import android.content.Context;
-import android.os.PowerManager;
-import android.os.PowerManager.WakeLock;
-
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.bridge.ReactContextBaseJavaModule;
-import com.facebook.react.bridge.ReactMethod;
-import com.facebook.react.bridge.UiThreadUtil;
-
-/**
- * Module implementing a simple API to enable a proximity sensor-controlled
- * wake lock. When the lock is held, if the proximity sensor detects a nearby
- * object it will dim the screen and disable touch controls. The functionality
- * is used with the conference audio-only mode.
- */
-class ProximityModule extends ReactContextBaseJavaModule {
-    /**
-     * The name of {@code ProximityModule} to be used in the React Native
-     * bridge.
-     */
-    private static final String MODULE_NAME = "Proximity";
-
-    /**
-     * This type of wake lock (the one activated by the proximity sensor) has
-     * been available for a while, but the constant was only exported in API
-     * level 21 (Android Marshmallow) so make no assumptions and use its value
-     * directly.
-     *
-     * TODO: Remove when we bump the API level to 21.
-     */
-    private static final int PROXIMITY_SCREEN_OFF_WAKE_LOCK = 32;
-
-    /**
-     * {@link WakeLock} instance.
-     */
-    private final WakeLock wakeLock;
-
-    /**
-     * Initializes a new module instance. There shall be a single instance of
-     * this module throughout the lifetime of the application.
-     *
-     * @param reactContext The {@link ReactApplicationContext} where this module
-     * is created.
-     */
-    public ProximityModule(ReactApplicationContext reactContext) {
-        super(reactContext);
-
-        WakeLock wakeLock;
-        PowerManager powerManager
-            = (PowerManager)
-                reactContext.getSystemService(Context.POWER_SERVICE);
-
-        try {
-            wakeLock
-                = powerManager.newWakeLock(
-                        PROXIMITY_SCREEN_OFF_WAKE_LOCK,
-                        MODULE_NAME);
-        } catch (Throwable ignored) {
-            wakeLock = null;
-        }
-
-        this.wakeLock = wakeLock;
-    }
-
-    /**
-     * Gets the name of this module to be used in the React Native bridge.
-     *
-     * @return The name of this module to be used in the React Native bridge.
-     */
-    @Override
-    public String getName() {
-        return MODULE_NAME;
-    }
-
-    /**
-     * Acquires / releases the proximity sensor wake lock.
-     *
-     * @param enabled {@code true} to enable the proximity sensor; otherwise,
-     * {@code false}.
-     */
-    @ReactMethod
-    public void setEnabled(final boolean enabled) {
-        if (wakeLock == null) {
-            return;
-        }
-
-        UiThreadUtil.runOnUiThread(new Runnable() {
-            @Override
-            public void run() {
-                if (enabled) {
-                    if (!wakeLock.isHeld()) {
-                        wakeLock.acquire();
-                    }
-                } else if (wakeLock.isHeld()) {
-                    wakeLock.release();
-                }
-            }
-        });
-    }
-}

android/sdk/src/main/java/org/jitsi/meet/sdk/ReactPackageAdapter.java

@@ -1,40 +0,0 @@
-/*
- * Copyright @ 2017-present Atlassian Pty Ltd
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-package org.jitsi.meet.sdk;
-
-import com.facebook.react.ReactPackage;
-import com.facebook.react.bridge.JavaScriptModule;
-import com.facebook.react.bridge.NativeModule;
-import com.facebook.react.bridge.ReactApplicationContext;
-import com.facebook.react.uimanager.ViewManager;
-
-import java.util.Collections;
-import java.util.List;
-
-public class ReactPackageAdapter implements ReactPackage {
-    @Override
-    public List<NativeModule> createNativeModules(
-            ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-
-    @Override
-    public List<ViewManager> createViewManagers(
-            ReactApplicationContext reactContext) {
-        return Collections.emptyList();
-    }
-}

android/sdk/src/main/res/values/strings.xml

@@ -1,3 +0,0 @@
-<resources>
-    <string name="app_name">Jitsi Meet SDK</string>
-</resources>

android/settings.gradle

@@ -1,14 +1,6 @@
-rootProject.name = 'jitsi-meet'
+rootProject.name = 'jitsi-meet-react'
 
-include ':app', ':sdk'
-include ':react-native-background-timer'
-project(':react-native-background-timer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-background-timer/android')
-include ':react-native-fetch-blob'
-project(':react-native-fetch-blob').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-fetch-blob/android')
-include ':react-native-immersive'
-project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
-include ':react-native-keep-awake'
-project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':app'
 include ':react-native-vector-icons'
 project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
 include ':react-native-webrtc'

app.js

@@ -1,61 +1,314 @@
+/* global $, config, getRoomName, loggingConfig, JitsiMeetJS */
 /* application specific logic */
+const logger = require("jitsi-meet-logger").getLogger(__filename);
 
-// FIXME: remove once atlaskit work with React 16
-// It seems that @atlaskit/icon is importing PropTypes from React, but it
-// happens through some glyph coffee script template. It could be that more
-// things are broken there (not only the icon).
-import './react/features/base/react/prop-types-polyfill.js';
-
-import 'jquery';
-import 'jquery-contextmenu';
-import 'jquery-ui';
-import 'jQuery-Impromptu';
-import 'autosize';
+import "babel-polyfill";
+import "jquery";
+import "jquery-contextmenu";
+import "jquery-ui";
+import "strophe";
+import "strophe-disco";
+import "strophe-caps";
+import "jQuery-Impromptu";
+import "autosize";
 
 import 'aui';
 import 'aui-experimental';
 import 'aui-css';
 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 API from './modules/API';
-import keyboardshortcut from './modules/keyboardshortcut/keyboardshortcut';
-import remoteControl from './modules/remotecontrol/RemoteControl';
-import settings from './modules/settings/Settings';
-import translation from './modules/translation/translation';
-import UI from './modules/UI/UI';
+import ConferenceUrl from './modules/URL/ConferenceUrl';
+import API from './modules/API/API';
 
-window.APP = {
-    API,
-    conference,
+import UIEvents from './service/UI/UIEvents';
+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:
+ * 'VideoChat', `Room: ${roomName}`, URL. If fail, prints the error and returns
+ * it.
+ */
+function pushHistoryState(roomName, URL) {
+    try {
+        window.history.pushState(
+            'VideoChat', `Room: ${roomName}`, URL
+        );
+    } catch (e) {
+        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.
+ */
+function buildRoomName () {
+    let roomName = getRoomName();
+
+    if(!roomName) {
+        let word = RoomnameGenerator.generateRoomWithoutSeparator();
+        roomName = word.toLowerCase();
+        let historyURL = window.location.href + word;
+        //Trying to push state with current URL + roomName
+        pushHistoryState(word, historyURL);
+    }
+
+    return roomName;
+}
+
+/**
+ * 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',
-    // 'ready', or 'connecting'. We are interested in 'ready' status only which
+    // connect was already executed. status property can be "initialized",
+    // "ready" or "connecting". We are interested in "ready" status only which
     // means that connect was executed but we have to wait for the attach data.
-    // In status 'ready' handler property will be set to a function that will
+    // In status "ready" handler property will be set to a function that will
     // finish the connect process when the attach data or error is received.
     connect: {
-        handler: null,
-        status: 'initialized'
+        status: "initialized",
+        handler: null
     },
-
-    // Used for automated performance tests.
+    // Used for automated performance tests
     connectionTimes: {
-        'index.loaded': window.indexLoadedTime
+        "index.loaded": window.indexLoadedTime
     },
-
-    keyboardshortcut,
-    remoteControl,
+    UI,
     settings,
+    conference,
     translation,
-    UI
+    /**
+     * 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.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);
+        }
+    }
 };
 
-// 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.
-import './react';
+/**
+ * If JWT token data it will be used for local user settings
+ */
+function setTokenData() {
+    let localUser = APP.tokenData.caller;
+    if(localUser) {
+        APP.settings.setEmail((localUser.getEmail() || "").trim(), true);
+        APP.settings.setAvatarUrl((localUser.getAvatarUrl() || "").trim());
+        APP.settings.setDisplayName((localUser.getName() || "").trim(), true);
+    }
+}
+
+function init() {
+    setTokenData();
+    // Initialize the conference URL handler
+    APP.ConferenceUrl = new ConferenceUrl(window.location);
+    // Clean up the URL displayed by the browser
+    replaceHistoryState(APP.ConferenceUrl.getInviteUrl());
+
+    // 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(() => {
+
+            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, language => {
+                APP.translation.setLanguage(language);
+                APP.settings.setLanguage(language);
+            });
+
+            APP.keyboardshortcut.init();
+        }).catch(err => {
+            APP.UI.hideRingOverLay();
+            APP.API.notifyConferenceLeft(APP.conference.roomName);
+            logger.error(err);
+        });
+    }
+}
+
+/**
+ * If we have an HTTP endpoint for getting config.json configured we're going to
+ * read it and override properties from config.js and interfaceConfig.js.
+ * If there is no endpoint we'll just continue with initialization.
+ * Keep in mind that if the endpoint has been configured and we fail to obtain
+ * the config for any reason then the conference won't start and error message
+ * will be displayed to the user.
+ */
+function obtainConfigAndInit() {
+    let roomName = APP.conference.roomName;
+
+    if (config.configLocation) {
+        APP.configFetch.obtainConfig(
+            config.configLocation, roomName,
+            // Get config result callback
+            function(success, error) {
+                if (success) {
+                    var now = APP.connectionTimes["configuration.fetched"] =
+                        window.performance.now();
+                    logger.log("(TIME) configuration fetched:\t", now);
+                    init();
+                } else {
+                    // Show obtain config error,
+                    // pass the error object for report
+                    APP.UI.messageHandler.openReportDialog(
+                        null, "dialog.connectError", error);
+                }
+            });
+    } else {
+        require("./modules/config/BoshAddressChoice").chooseAddress(
+            config, roomName);
+
+        init();
+    }
+}
+
+
+$(document).ready(function () {
+    var now = APP.connectionTimes["document.ready"] = window.performance.now();
+    logger.log("(TIME) document ready:\t", now);
+
+    URLProcessor.setConfigParametersFromUrl();
+
+    APP.init();
+
+    APP.translation.init(settings.getLanguage());
+
+    APP.API.init(APP.tokenData.externalAPISettings);
+
+    obtainConfigAndInit();
+});
+
+$(window).bind('beforeunload', function () {
+    // Stop the LogCollector
+    if (APP.logCollectorStarted) {
+        APP.logCollector.stop();
+        APP.logCollectorStarted = false;
+    }
+    APP.API.dispose();
+});
+
+module.exports = APP;

authError.html

@@ -1,7 +1,7 @@
 <html>
 <head>
-    <link rel="stylesheet" href="../css/all.css"/>
-    <!--#include virtual="/title.html" -->
+    <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>

close.html

@@ -1,7 +1,7 @@
 <html>
 <head>
-    <link rel="stylesheet" href="../css/all.css"/>
-    <!--#include virtual="/title.html" -->
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
     <script><!--#include virtual="/interface_config.js" --></script>
     <script src="close.js"></script>
 </head>
@@ -12,7 +12,7 @@
     </div>
     <div class="hint-msg">
         <p>
-            <span id="hintQuestion">Did you know?</span>
+            <span>Did you know?</span>
             <span class="hint-msg__holder" id="hintMessage"></span>
         </p>
         <div class="happy-software"></div>

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;

close2.html

@@ -1,7 +1,7 @@
 <html>
 <head>
-    <link rel="stylesheet" href="../css/all.css"/>
-    <!--#include virtual="/title.html" -->
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
     <script><!--#include virtual="/interface_config.js" --></script>
     <script src="close.js"></script>
 </head>
@@ -12,7 +12,7 @@
         </div>
         <div class="hint-msg">
             <p>
-                <span id="hintQuestion">Did you know?</span>
+                <span>Did you know?</span>
                 <span class="hint-msg__holder" id="hintMessage"></span>
             </p>
             <div class="happy-software"></div>

config.js

@@ -1,316 +1,90 @@
-/* eslint-disable no-unused-vars, no-var */
-
-var config = {
-    // Configuration
-    //
-
-    // Alternative location for the configuration.
-    // configLocation: './config.json',
-
-    // Custom function which given the URL path should return a room name.
-    // getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
-
-
-    // Connection
-    //
+/* jshint maxlen:false */
 
+var config = { // eslint-disable-line no-unused-vars
+//    configLocation: './config.json', // see ./modules/HttpConfigFetch.js
     hosts: {
-        // XMPP domain.
         domain: 'jitsi-meet.example.com',
-
-        // XMPP MUC domain. FIXME: use XEP-0030 to discover it.
-        muc: 'conference.jitsi-meet.example.com'
-
-        // When using authentication, domain for guest users.
-        // anonymousdomain: 'guest.example.com',
-
-        // Domain for authenticated users. Defaults to <domain>.
-        // authdomain: 'jitsi-meet.example.com',
-
-        // Jirecon recording component domain.
-        // jirecon: 'jirecon.jitsi-meet.example.com',
-
-        // Call control component (Jigasi).
-        // call_control: 'callcontrol.jitsi-meet.example.com',
-
-        // Focus component domain. Defaults to focus.<domain>.
-        // focus: 'focus.jitsi-meet.example.com',
+        //anonymousdomain: 'guest.example.com',
+        //authdomain: 'jitsi-meet.example.com',  // defaults to <domain>
+        muc: 'conference.jitsi-meet.example.com', // FIXME: use XEP-0030
+        //jirecon: 'jirecon.jitsi-meet.example.com',
+        //call_control: 'callcontrol.jitsi-meet.example.com',
+        //focus: 'focus.jitsi-meet.example.com', // defaults to 'focus.jitsi-meet.example.com'
     },
+//  getroomnode: function (path) { return 'someprefixpossiblybasedonpath'; },
+//  useStunTurn: true, // use XEP-0215 to fetch STUN and TURN server
+//  useIPv6: true, // ipv6 support. use at your own risk
+    useNicks: false,
+    bosh: '//jitsi-meet.example.com/http-bind', // FIXME: use xep-0156 for that
+    clientNode: 'http://jitsi.org/jitsimeet', // The name of client node advertised in XEP-0115 'c' stanza
+    //focusUserJid: 'focus@auth.jitsi-meet.example.com', // The real JID of focus participant - can be overridden here
+    //defaultSipNumber: '', // Default SIP number
 
-    // BOSH URL. FIXME: use XEP-0156 to discover it.
-    bosh: '//jitsi-meet.example.com/http-bind',
-
-    // The name of client node advertised in XEP-0115 'c' stanza
-    clientNode: 'http://jitsi.org/jitsimeet',
-
-    // The real JID of focus participant - can be overridden here
-    // focusUserJid: 'focus@auth.jitsi-meet.example.com',
-
-
-    // Testing / experimental features.
-    //
-
-    testing: {
-        // Enables experimental simulcast support on Firefox.
-        enableFirefoxSimulcast: false,
-
-        // P2P test mode disables automatic switching to P2P when there are 2
-        // participants in the conference.
-        p2pTestMode: false
-    },
-
-    // Disables ICE/UDP by filtering out local and remote UDP candidates in
-    // signalling.
-    // webrtcIceUdpDisable: false,
-
-    // Disables ICE/TCP by filtering out local and remote TCP candidates in
-    // signalling.
-    // webrtcIceTcpDisable: false,
-
-
-    // Media
-    //
-
-    // Audio
-
-    // Disable measuring of audio levels.
-    // disableAudioLevels: false,
-
-    // Start the conference in audio only mode (no video is being received nor
-    // sent).
-    // startAudioOnly: false,
-
-    // Every participant after the Nth will start audio muted.
-    // startAudioMuted: 10,
-
-    // Start calls with audio muted. Unlike the option above, this one is only
-    // applied locally. FIXME: having these 2 options is confusing.
-    // startWithAudioMuted: false,
-
-    // Video
-
-    // Sets the preferred resolution (height) for local video. Defaults to 720.
-    // resolution: 720,
-
-    // w3c spec-compliant video constraints to use for video capture. Currently
-    // used by browsers that return true from lib-jitsi-meet's
-    // RTCBrowserType#usesNewGumFlow. The constraints are independency from
-    // this config's resolution value. Defaults to requesting an ideal aspect
-    // ratio of 16:9 with an ideal resolution of 1080p.
-    // constraints: {
-    //     video: {
-    //         aspectRatio: 16 / 9,
-    //         height: {
-    //             ideal: 1080,
-    //             max: 1080,
-    //             min: 240
-    //         }
-    //     }
-    // },
-
-    // Enable / disable simulcast support.
-    // disableSimulcast: false,
-
-    // Suspend sending video if bandwidth estimation is too low. This may cause
-    // problems with audio playback. Disabled until these are fixed.
-    disableSuspendVideo: true,
-
-    // Every participant after the Nth will start video muted.
-    // startVideoMuted: 10,
-
-    // Start calls with video muted. Unlike the option above, this one is only
-    // applied locally. FIXME: having these 2 options is confusing.
-    // startWithVideoMuted: false,
-
-    // If set to true, prefer to use the H.264 video codec (if supported).
-    // Note that it's not recommended to do this because simulcast is not
-    // supported when  using H.264. For 1-to-1 calls this setting is enabled by
-    // default and can be toggled in the p2p section.
-    // preferH264: true,
-
-    // If set to true, disable H.264 video codec by stripping it out of the
-    // SDP.
-    // disableH264: false,
-
-    // Desktop sharing
-
-    // Enable / disable desktop sharing
-    // disableDesktopSharing: false,
-
+    // Desktop sharing method. Can be set to 'ext', 'webrtc' or false to disable.
+    desktopSharingChromeMethod: 'ext',
     // The ID of the jidesha extension for Chrome.
-    desktopSharingChromeExtId: null,
-
-    // Whether desktop sharing should be disabled on Chrome.
-    desktopSharingChromeDisabled: true,
-
+    desktopSharingChromeExtId: 'diibjkoicjeejcmhdnailmkgecihlobk',
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: [ 'screen', 'window', 'tab' ],
-
+    desktopSharingChromeSources: ['screen', 'window', 'tab'],
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
     // The ID of the jidesha extension for Firefox. If null, we assume that no
     // extension is required.
     desktopSharingFirefoxExtId: null,
-
     // Whether desktop sharing should be disabled on Firefox.
-    desktopSharingFirefoxDisabled: false,
-
+    desktopSharingFirefoxDisabled: true,
     // The maximum version of Firefox which requires a jidesha extension.
     // Example: if set to 41, we will require the extension for Firefox versions
     // up to and including 41. On Firefox 42 and higher, we will run without the
     // extension.
     // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: 51,
-
+    desktopSharingFirefoxMaxVersionExtRequired: -1,
     // The URL to the Firefox extension for desktop sharing.
     desktopSharingFirefoxExtensionURL: null,
 
-    // Try to start calls with screen-sharing instead of camera video.
-    // startScreenSharing: false,
+    // Disables ICE/UDP by filtering out local and remote UDP candidates in signalling.
+    webrtcIceUdpDisable: false,
+    // Disables ICE/TCP by filtering out local and remote TCP candidates in signalling.
+    webrtcIceTcpDisable: false,
 
-    // Recording
-
-    // Whether to enable recording or not.
-    // enableRecording: false,
-
-    // Type for recording: one of jibri or jirecon.
-    // recordingType: 'jibri',
-
-    // Misc
-
-    // Default value for the channel "last N" attribute. -1 for unlimited.
-    channelLastN: -1,
-
-    // Disables or enables RTX (RFC 4588) (defaults to false).
-    // disableRtx: false,
-
-    // Use XEP-0215 to fetch STUN and TURN servers.
-    // useStunTurn: true,
-
-    // Enable IPv6 support.
-    // useIPv6: true,
-
-    // Enables / disables a data communication channel with the Videobridge.
-    // Values can be 'datachannel', 'websocket', true (treat it as
-    // 'datachannel'), undefined (treat it as 'datachannel') and false (don't
-    // open any channel).
-    // openBridgeChannel: true,
-
-
-    // UI
-    //
-
-    // Use display name as XMPP nickname.
-    // useNicks: false,
-
-    // Require users to always specify a display name.
-    // requireDisplayName: true,
-
-    // Whether to use a welcome page or not. In case it's false a random room
-    // will be joined when no room is specified.
+    openSctp: true, // Toggle to enable/disable SCTP channels
+    disableStats: false,
+    disableAudioLevels: false,
+    channelLastN: -1, // The default value of the channel attribute last-n.
+    adaptiveLastN: false,
+    //disableAdaptiveSimulcast: false,
+    enableRecording: false,
     enableWelcomePage: true,
-
-    // Enabling the close page will ignore the welcome page redirection when
-    // a call is hangup.
-    // enableClosePage: false,
-
-    // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    // disable1On1Mode: false,
-
-
-    // The minumum value a video's height (or width, whichever is smaller) needs
-    // The minimum value a video's height (or width, whichever is smaller) needs
-    // to be in order to be considered high-definition.
+    //enableClosePage: false, // enabling the close page will ignore the welcome
+                              // page redirection when call is hangup
+    disableSimulcast: false,
+    logStats: false, // Enable logging of PeerConnection stats via the focus
+//    requireDisplayName: true, // Forces the participants that doesn't have display name to enter it when they enter the room.
+//    startAudioMuted: 10, // every participant after the Nth will start audio muted
+//    startVideoMuted: 10, // every participant after the Nth will start video muted
+//    defaultLanguage: "en",
+// To enable sending statistics to callstats.io you should provide Applicaiton ID and Secret.
+//    callStatsID: "", // Application ID for callstats.io API
+//    callStatsSecret: "", // Secret for callstats.io API
+    /*noticeMessage: 'Service update is scheduled for 16th March 2015. ' +
+    'During that time service will not be available. ' +
+    'Apologise for inconvenience.',*/
+    disableThirdPartyRequests: false,
     minHDHeight: 540,
-
-    // Default language for the user interface.
-    // defaultLanguage: 'en',
-
-    // If true all users without a token will be considered guests and all users
+    // If true - all users without token will be considered guests and all users
     // with token will be considered non-guests. Only guests will be allowed to
     // edit their profile.
-    enableUserRolesBasedOnToken: false,
-
-    // Message to show the users. Example: 'The service will be down for
-    // maintenance at 01:00 AM GMT,
-    // noticeMessage: '',
-
-
-    // Stats
-    //
-
-    // Whether to enable stats collection or not.
-    // disableStats: false,
-
-    // To enable sending statistics to callstats.io you must provide the
-    // Application ID and Secret.
-    // callStatsID: '',
-    // callStatsSecret: '',
-
-    // enables callstatsUsername to be reported as statsId and used
-    // by callstats as repoted remote id
-    // enableStatsID: false
-
-    // enables sending participants display name to callstats
-    // enableDisplayNameInStats: false
-
-
-    // Privacy
-    //
-
-    // If third party requests are disabled, no other server will be contacted.
-    // This means avatars will be locally generated and callstats integration
-    // will not function.
-    // disableThirdPartyRequests: false,
-
-
-    // Peer-To-Peer mode: used (if enabled) when there are just 2 participants.
-    //
-
-    p2p: {
-        // Enables peer to peer mode. When enabled the system will try to
-        // establish a direct connection when there are exactly 2 participants
-        // in the room. If that succeeds the conference will stop sending data
-        // through the JVB and use the peer to peer connection instead. When a
-        // 3rd participant joins the conference will be moved back to the JVB
-        // connection.
-        enabled: true,
-
-        // Use XEP-0215 to fetch STUN and TURN servers.
-        // useStunTurn: true,
-
-        // The STUN servers that will be used in the peer to peer connections
-        stunServers: [
-            { urls: 'stun:stun.l.google.com:19302' },
-            { urls: 'stun:stun1.l.google.com:19302' },
-            { urls: 'stun:stun2.l.google.com:19302' }
-        ],
-
-        // If set to true, it will prefer to use H.264 for P2P calls (if H.264
-        // is supported).
-        preferH264: true
-
-        // If set to true, disable H.264 video codec by stripping it out of the
-        // SDP.
-        // disableH264: false,
-
-        // How long we're going to wait, before going back to P2P after the 3rd
-        // participant has left the conference (to filter out page reload).
-        // backToP2PDelay: 5
-    },
-
-
-    // Information about the jitsi-meet instance we are connecting to, including
-    // the user region as seen by the server.
-    //
-
-    deploymentInfo: {
-        // shard: "shard1",
-        // region: "europe",
-        // userRegion: "asia"
-    }
+    enableUserRolesBasedOnToken: false
 };
 
-/* eslint-enable no-unused-vars, no-var */
+// 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'
+};

connection.js

@@ -1,19 +1,11 @@
 /* global APP, JitsiMeetJS, config */
+const logger = require("jitsi-meet-logger").getLogger(__filename);
 
 import AuthHandler from './modules/UI/authentication/AuthHandler';
 import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
 
-import {
-    connectionEstablished,
-    connectionFailed
-} from './react/features/base/connection';
-import {
-    isFatalJitsiConnectionError,
-    JitsiConnectionErrors,
-    JitsiConnectionEvents
-} from './react/features/base/lib-jitsi-meet';
-
-const logger = require('jitsi-meet-logger').getLogger(__filename);
+const ConnectionEvents = JitsiMeetJS.events.connection;
+const ConnectionErrors = JitsiMeetJS.errors.connection;
 
 /**
  * Checks if we have data to use attach instead of connect. If we have the data
@@ -27,39 +19,28 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
  * @param {string} [roomName] the name of the conference.
  */
 function checkForAttachParametersAndConnect(id, password, connection) {
-    if (window.XMPPAttachInfo) {
-        APP.connect.status = 'connecting';
-
+    if(window.XMPPAttachInfo){
+        APP.connect.status = "connecting";
         // When connection optimization is not deployed or enabled the default
         // value will be window.XMPPAttachInfo.status = "error"
         // If the connection optimization is deployed and enabled and there is
         // a failure the value will be window.XMPPAttachInfo.status = "error"
-        if (window.XMPPAttachInfo.status === 'error') {
-            connection.connect({
-                id,
-                password
-            });
-
+        if(window.XMPPAttachInfo.status === "error") {
+            connection.connect({id, password});
             return;
         }
 
-        const attachOptions = window.XMPPAttachInfo.data;
-
-        if (attachOptions) {
+        var attachOptions = window.XMPPAttachInfo.data;
+        if(attachOptions) {
             connection.attach(attachOptions);
             delete window.XMPPAttachInfo.data;
         } else {
-            connection.connect({
-                id,
-                password
-            });
+            connection.connect({id, password});
         }
     } else {
-        APP.connect.status = 'ready';
-        APP.connect.handler
-            = checkForAttachParametersAndConnect.bind(
-                null,
-                id, password, connection);
+        APP.connect.status = "ready";
+        APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
+            id, password, connection);
     }
 }
 
@@ -72,69 +53,40 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * everything is ok, else error.
  */
 function connect(id, password, roomName) {
-    const connectionConfig = Object.assign({}, config);
-    const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
 
-    connectionConfig.bosh += `?room=${roomName}`;
+    let connectionConfig = Object.assign({}, config);
 
-    const connection
-        = new JitsiMeetJS.JitsiConnection(
-            null,
-            jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
-            connectionConfig);
+    connectionConfig.bosh += '?room=' + roomName;
+    let connection
+        = new JitsiMeetJS.JitsiConnection(null, config.token, connectionConfig);
 
-    return new Promise((resolve, reject) => {
+    return new Promise(function (resolve, reject) {
         connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-            handleConnectionEstablished);
+            ConnectionEvents.CONNECTION_ESTABLISHED, handleConnectionEstablished
+        );
         connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            handleConnectionFailed);
-        connection.addEventListener(
-            JitsiConnectionEvents.CONNECTION_FAILED,
-            connectionFailedHandler);
+            ConnectionEvents.CONNECTION_FAILED, handleConnectionFailed
+        );
 
-        /**
-         *
-         */
-        function connectionFailedHandler(error, message, credentials) {
-            APP.store.dispatch(
-                connectionFailed(connection, error, message, credentials));
-
-            if (isFatalJitsiConnectionError(error)) {
-                connection.removeEventListener(
-                    JitsiConnectionEvents.CONNECTION_FAILED,
-                    connectionFailedHandler);
-            }
-        }
-
-        /**
-         *
-         */
         function unsubscribe() {
             connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_ESTABLISHED,
-                handleConnectionEstablished);
+                ConnectionEvents.CONNECTION_ESTABLISHED,
+                handleConnectionEstablished
+            );
             connection.removeEventListener(
-                JitsiConnectionEvents.CONNECTION_FAILED,
-                handleConnectionFailed);
+                ConnectionEvents.CONNECTION_FAILED,
+                handleConnectionFailed
+            );
         }
 
-        /**
-         *
-         */
         function handleConnectionEstablished() {
-            APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }
 
-        /**
-         *
-         */
         function handleConnectionFailed(err) {
             unsubscribe();
-            logger.error('CONNECTION FAILED:', err);
+            logger.error("CONNECTION FAILED:", err);
             reject(err);
         }
 
@@ -155,29 +107,35 @@ function connect(id, password, roomName) {
  *
  * @returns {Promise<JitsiConnection>}
  */
-export function openConnection({ id, password, retry, roomName }) {
-    const usernameOverride
-        = jitsiLocalStorage.getItem('xmpp_username_override');
-    const passwordOverride
-        = jitsiLocalStorage.getItem('xmpp_password_override');
+export function openConnection({id, password, retry, roomName}) {
+
+    let usernameOverride
+        = jitsiLocalStorage.getItem("xmpp_username_override");
+    let passwordOverride
+        = jitsiLocalStorage.getItem("xmpp_password_override");
 
     if (usernameOverride && usernameOverride.length > 0) {
-        id = usernameOverride; // eslint-disable-line no-param-reassign
+        id = usernameOverride;
     }
+
     if (passwordOverride && passwordOverride.length > 0) {
-        password = passwordOverride; // eslint-disable-line no-param-reassign
+        password = passwordOverride;
     }
 
-    return connect(id, password, roomName).catch(err => {
-        if (retry) {
-            const { issuer, jwt } = APP.store.getState()['features/base/jwt'];
-
-            if (err === JitsiConnectionErrors.PASSWORD_REQUIRED
-                    && (!jwt || issuer === 'anonymous')) {
-                return AuthHandler.requestAuth(roomName, connect);
-            }
+    return connect(id, password, roomName).catch(function (err) {
+        if (!retry) {
+            throw err;
         }
 
-        throw err;
+        if (err === ConnectionErrors.PASSWORD_REQUIRED) {
+            // do not retry if token is not valid
+            if (config.token) {
+                throw err;
+            } else {
+                return AuthHandler.requestAuth(roomName, connect);
+            }
+        } else {
+            throw err;
+        }
     });
 }

connection_optimization/.eslintrc.js

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

connection_optimization/do_external_connect.js

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

css/_animations.scss

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

css/_base.scss

@@ -1,32 +1,23 @@
-/**
- * Safari will limit input in input elements to one character when user-select
- * none is applied. Other browsers already support selecting within inputs while
- * user-select is none. As such, disallow user-select except on inputs.
- */
-*:not(input) {
+* {
     -webkit-user-select: none;
     user-select: none;
 }
 
-body {
-    margin: 0px;
-    width: 100%;
-    height: 100%;
+html, body{
+    margin:0px;
+    height:100%;
+    color: $defaultColor;
     font-size: 12px;
     font-weight: 400;
+    background: #000000;
     overflow: hidden;
-    color: $defaultColor;
-    background: $defaultBackground;
-    &.filmstrip-only {
-        background: transparent;
-    }
 }
 
 p {
     margin: 0;
 }
 
-body, input, textarea, keygen, select, button {
+html, body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
 
@@ -41,11 +32,16 @@ body, input, textarea, keygen, select, button {
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
+    color: $inputColor;
     font-size: 1em;
 }
 
 button, select, input[type="button"],
 input[type="reset"], input[type="submit"] {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 4px;
+    padding-right: 4px;
     cursor: pointer;
 }
 
@@ -80,14 +76,15 @@ form {
     display: block;
     position: absolute;
     top: 15;
-    width: $watermarkWidth;
-    height: $watermarkHeight;
+    width: 186px;
+    height: 74px;
     background-size: contain;
     background-repeat: no-repeat;
-    z-index: $zindex2;
+    z-index: 2;
 }
 
 .leftwatermark {
+    display: none;
     left: $defaultToolbarSize;
     margin-left: 10px;
     background-image: url($defaultWatermarkLink);
@@ -95,18 +92,20 @@ form {
 }
 
 .rightwatermark {
+    display: none;
     right: 15;
     background-position: center right;
 }
 
 .poweredby {
+    display: none;
     position: absolute;
     left: 25;
     bottom: 7;
     font-size: 11pt;
     color: rgba(255,255,255,.50);
     text-decoration: none;
-    z-index: $poweredByZ;
+    z-index: 100;
 }
 
 .connected {
@@ -119,6 +118,20 @@ form {
     font-size: 12px;
 }
 
+/**
+* Tooltips
+**/
+.tipsy {
+    z-index: $tooltipsZ;
+    &-inner {
+        background-color: $tooltipBg;
+    }
+
+    &-arrow {
+        border-color: $tooltipBg;
+    }
+}
+
 /**
 * Dialogs fade
 */
@@ -129,29 +142,4 @@ form {
 #inviteLinkRef {
     -webkit-user-select: text;
     user-select: text;
-}
-
-/**
- * Re-style default OS scrollbar.
- */
-::-webkit-scrollbar {
-    background: transparent;
-    width: 7px;
-}
-
-::-webkit-scrollbar-button {
-    display: none;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-track-piece {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, .5);
-    border-radius: 4px;
-}
+}

css/_chat.scss

@@ -31,28 +31,6 @@
     a:active {
         color: black;
     }
-
-    &::-webkit-scrollbar {
-        background: #06a5df;
-        width: 7px;
-    }
-
-    &::-webkit-scrollbar-button {
-        display: none;
-    }
-
-    &::-webkit-scrollbar-track {
-        background: black;
-    }
-
-    &::-webkit-scrollbar-track-piece {
-        background: black;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        background: #06a5df;
-        border-radius: 4px;
-    }
 }
 
 #chat_container.is-conversation-mode #chatconversation {
@@ -234,6 +212,28 @@
     line-height: 30px;
 }
 
+::-webkit-scrollbar {
+    background: #06a5df;
+    width: 7px;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-track {
+    background: black;
+}
+
+::-webkit-scrollbar-track-piece {
+    background: black;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #06a5df;
+    border-radius: 4px;
+}
+
 #usermsg::-webkit-scrollbar-track-piece {
     background: #3a3a3a;
 }

css/_connection-info.scss

@@ -1,6 +1,8 @@
 %connection-info {
+    text-align: left;
     font-size: 12px;
     font-weight: 400;
+    color: $popoverFontColor;
 
     td {
         padding: 2px 0;
@@ -9,14 +11,11 @@
 
 .connection-info
 {
+    float: left;
+    padding: 5px;
+    padding-left: 0;
     @extend %connection-info;
 
-    /**
-     * Apply negative margin to reduce the appearance of padding in AtlasKit
-     * InlineDialog.
-     */
-    margin: -15px;
-
     > table {
         white-space: nowrap;
         @extend %connection-info;
@@ -33,22 +32,12 @@
     &__download
     {
         @extend .connection-info__icon;
-    }
-
-    &__status
-    {
-        font-weight: bold;
+        color: $downloadConnectionIconColor;
     }
 
     &__upload
     {
         @extend .connection-info__icon;
-    }
-
-    .showmore {
-        display: block;
-        margin: 10px auto;
-        text-align: center;
-        width: 90px;
+        color: $uploadConnectionIconColor;
     }
 }

css/_contact_list.scss

@@ -1,7 +1,7 @@
 #contacts_container {
     cursor: default;
 
-    #contacts {
+    > ul#contacts {
         font-size: 12px;
         bottom: 0px;
         margin: 0;
@@ -21,33 +21,30 @@
 }
 
 #contacts {
-    .contact-list-item {
-        align-items: center;
-        border-radius: 3px;
-        color: $baseLight;
-        display: flex;
-        font-size: 14px;
-        height: 36px;
+
+    >li {
+        display: block;
         list-style-type: none;
-        padding: 0 10%;
         text-align: left;
         white-space: nowrap;
+        color: $baseLight;
+        font-size: 16px;
+        padding: 0 10%;
+        height: 27px;
 
         &:hover,
         &:active {
             background: $toolbarSelectBackground;
         }
 
-        .contact-list-item-name {
-            overflow: hidden;
+        > p {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0px;
+            width: 100%;
+            line-height: 1.5em;
             text-overflow: ellipsis;
-        }
-
-        .avatar {
-            cursor: pointer;
-            height: 24px;
-            margin: 0 8px 0 4px;
-            width: 24px;
+            overflow: hidden;
         }
     }
 }
@@ -61,4 +58,4 @@
     border-radius: 20px;
     max-height: 30px;
     max-width: 30px;
-}
+}

css/_device_settings_dialog.scss

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

css/_dial-out.scss

@@ -1,81 +0,0 @@
-/**
- * The dialog content element.
- */
-.dial-out-content {
-    margin-top: 5px;
-
-    /**
-     * Wrap the contents in flex so items can be aligned on the same line.
-     */
-    .form-control {
-        display: flex;
-    }
-
-   /**
-    * The style of the flag icon.
-    */
-    .dial-out-flag-icon {
-        position: absolute;
-        left: 5px;
-        top: 50%;
-        transform: translate(0, -50%);
-    }
-
-    /**
-     * The style of the dial code element.
-     */
-    .dial-out-code {
-        margin-bottom: 0;
-        padding-left: 25px;
-    }
-
-    /**
-     * The dial-out dialog error element.
-     */
-    .dial-out-error {
-        color: $errorColor;
-    }
-
-    /**
-     * The style of the dial input element.
-     */
-    .dial-out-input {
-        display: inline-block;
-        flex: 1;
-        margin-left: 5px;
-    }
-
-    /**
-     * Re-styling the default dropdown inside the dial-out-content.
-     */
-    .dropdown {
-        position: relative;
-        width: 65px;
-    }
-
-    /**
-     * Re-styling the default form-control inside the dial-out-content.
-     */
-    .form-control {
-        margin-bottom: 8px;
-    }
-
-    .dropdown {
-        position: relative;
-
-        input {
-            padding-left: 16px;
-
-            &:read-only {
-                color: inherit;
-            }
-        }
-    }
-
-    .dropdown-trigger-icon {
-        position: absolute;
-        right: 0;
-        top: 50%;
-        transform: translate(0, -50%);
-    }
-}

css/_filmstrip.scss

@@ -11,14 +11,14 @@
     right: 0;
     padding: 10px 5px;
     @extend %align-right;
-    z-index: $filmstripVideosZ;
 
     &__toolbar {
         @include flex();
         flex-direction: column-reverse;
         flex-wrap: nowrap;
         position: relative;
-        width: $filmstripToggleButtonWidth;
+        z-index: 1;                     // Set z-index to make element visible
+        width: $hideFilmstripButtonWidth;
 
         button {
             font-size: 14px;
@@ -48,71 +48,27 @@
     &__videos {
         @extend %align-right;
         position:relative;
+        height:196px;
         padding: 0;
-        /* The filmstrip should not be covered by the left toolbar. */
+        padding-left: 17px;
         bottom: 0;
         width:auto;
+        border: $thumbnailsBorder solid transparent;
+        z-index: 5;
+        transition: bottom 2s;
         overflow: visible !important;
-
-        &#remoteVideos {
-            border: $thumbnailsBorder solid transparent;
-            padding-left: $defaultToolbarSize + 5;
-            transition: bottom 2s;
-        }
-
-        /**
-         * The local video identifier.
-         */
-        &#filmstripLocalVideo {
-            bottom: 32px;
-            display: block;
-
-            /**
-             * The invite button style.
-             */
-            .filmstrip__invite {
-                padding-bottom: 5px;
-                margin-left: 2px;
-            }
-
-            /**
-             * The invite button group style.
-             * TOFIX: use AtlasKit.ButtonGroup if it starts supporting different
-             * flex grow options for the buttons.
-             */
-            .invite-button-group {
-                display: inline-flex;
-                justify-content: space-between;
-                width: 100%;
-
-                & button {
-                    flex-grow: 1;
-                    flex-shrink: 1;
-                    overflow: hidden;
-                }
-
-                & > * {
-                    flex-grow: 0;
-                    flex-shrink: 0;
-                    margin-left: 2px;
-                }
-            }
-        }
+        font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
 
         &.hidden {
             bottom: -196px;
         }
 
-        .remote-videos-container {
-            display: flex;
-        }
-
         .videocontainer {
             display: none;
             position: relative;
             background-size: contain;
             border: $thumbnailVideoBorder solid transparent;
-            border-radius: $borderRadius;
+            border-radius:1px;
             margin: 0 $thumbnailVideoMargin;
 
             &.videoContainerFocused, &:hover {
@@ -120,8 +76,8 @@
             }
 
             /**
-             * Focused video thumbnail.
-             */
+            * Focused video thumbnail.
+            */
             &.videoContainerFocused {
                 transition-duration: 0.5s;
                 -webkit-transition-duration: 0.5s;
@@ -133,76 +89,33 @@
                 0 0 3px $videoThumbnailSelected !important;
             }
 
-            .remotevideomenu > .icon-menu {
+            .remotevideomenu {
                 display: none;
             }
 
-            .presence-label {
-                color: $participantNameColor;
-                font-size: 12px;
-                font-weight: 100;
-                left: 0;
-                margin: 0 auto;
-                overflow: hidden;
-                pointer-events: none;
-                position: absolute;
-                right: 0;
-                text-align: center;
-                text-overflow: ellipsis;
-                top: calc(50% + 30px);
-                white-space: nowrap;
-                width: 100%;
-                z-index: $zindex3;
-            }
-
             /**
-             * Hovered video thumbnail.
-             */
+            * Hovered video thumbnail.
+            */
             &:hover {
                 cursor: hand;
                 border: $thumbnailVideoBorder solid $videoThumbnailHovered;
                 box-shadow: inset 0 0 3px $videoThumbnailHovered,
                 0 0 3px $videoThumbnailHovered;
 
-                .remotevideomenu > .icon-menu {
+                .remotevideomenu {
                     display: inline-block;
                 }
             }
 
-            /* With the TemasysWebRTC plugin <object/> element is used
+            /* With TemasysWebRTC plugin <object/> element is used
             instead of <video/> */
             & > video,
             & > object {
                 cursor: hand;
-                border-radius: $borderRadius;
+                border-radius:1px;
                 object-fit: cover;
                 overflow: hidden;
             }
         }
     }
-
-    /**
-     * Style the filmstrip videos in filmstrip-only mode.
-     */
-    &__videos-filmstripOnly {
-        margin-top: auto;
-        margin-bottom: auto;
-
-        .filmstrip__videos {
-            &#filmstripLocalVideo {
-                bottom: 0px;
-            }
-        }
-    }
-
-    .remote-videos-container {
-        transition: opacity 1s;
-    }
-
-    &.hide-videos {
-        .remote-videos-container {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-}
+}

css/_flag-icon.scss

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

css/_font.scss

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

css/_inlay.scss

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

css/_jitsi_popover.scss

@@ -0,0 +1,47 @@
+.jitsipopover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1010;
+    display: none;
+    max-width: 300px;
+    min-width: 100px;
+    text-align: left;
+    color: $popoverFontColor;
+    background-color: $popoverBg;
+    background-clip: padding-box;
+    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: -$popoverMenuPadding;
+
+    &__menu-padding {
+        height: $popoverMenuPadding;
+        width: 100px;
+        position: absolute;
+        bottom: -$popoverMenuPadding;
+    }
+
+    &__showmore {
+        display: block;
+        text-align: center;
+        width: 90px;
+        margin: 10px 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;
+    }
+}

css/_jquery.contextMenu.scss

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

css/_keyboard-shortcuts.scss

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

css/_login_menu.scss

@@ -1,10 +1,34 @@
 /*Initialize*/
-div.loginmenu {
+ul.loginmenu {
+    font-family: $baseFontFamily;
+    line-height: normal;
+    display:none;
     position: absolute;
     margin: 0;
     padding: 5px;
-    top: 40px;
-    left: 20px;
+    padding-bottom: 7px;
+    top: 45px;
+    left: -5px;
+    background-color: rgba(0,0,0,0.9);
+    border: 1px solid rgba(256, 256, 256, 0.2);
+    border-radius:8px;
+}
+
+ul.loginmenu li {
+    list-style-type: none;
+    padding: 7px;
+    color: #fff;
+    font-size: 11pt;
+    cursor: default;
+    white-space: pre;
+}
+
+ul.loginmenu:after {
+    content: url('../images/dropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: -7px;
+    left: 18px;
 }
 
 a.disabled {
@@ -12,7 +36,23 @@ a.disabled {
     pointer-events: none;
 }
 
+.loginmenuPadding {
+    width: 50px;
+    height: 30px;
+    position: absolute;
+    top: -30px;
+    left: 0px;
+}
+
 .loginmenu.extendedToolbarPopup {
-    top: 20px;
-    left: 40px;
+    left: 55px;
+    top: 0px;
+}
+
+ul.loginmenu.extendedToolbarPopup:after {
+    content: url('../images/leftDropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: 18px;
+    left: -7px;
 }

css/_mixins.scss

@@ -2,52 +2,52 @@
  * Animation mixin.
  */
 @mixin animation($animate...) {
-    $max: length($animate);
-    $animations: '';
+  $max: length($animate);
+  $animations: '';
 
-    @for $i from 1 through $max {
-        $animations: #{$animations + nth($animate, $i)};
+  @for $i from 1 through $max {
+    $animations: #{$animations + nth($animate, $i)};
 
-        @if $i < $max {
-            $animations: #{$animations + ", "};
-        }
+    @if $i < $max {
+      $animations: #{$animations + ", "};
     }
-    -webkit-animation: $animations;
-    -moz-animation:    $animations;
-    -o-animation:      $animations;
-    animation:         $animations;
+  }
+  -webkit-animation: $animations;
+  -moz-animation:    $animations;
+  -o-animation:      $animations;
+  animation:         $animations;
 }
 
 @mixin flex() {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
 }
 
 /**
  * Keyframes mixin.
  */
 @mixin keyframes($animationName) {
-    @-webkit-keyframes #{$animationName} {
-        @content;
-    }
-    @-moz-keyframes #{$animationName} {
-        @content;
-    }
-    @-o-keyframes #{$animationName} {
-        @content;
-    }
-    @keyframes #{$animationName} {
-        @content;
-    }
+  @-webkit-keyframes #{$animationName} {
+    @content;
+  }
+  @-moz-keyframes #{$animationName} {
+    @content;
+  }
+  @-o-keyframes #{$animationName} {
+    @content;
+  }
+  @keyframes #{$animationName} {
+    @content;
+  }
 }
 
 @mixin circle($diameter) {
-    width: $diameter;
-    height: $diameter;
-    border-radius: 50%;
+  width: $diameter;
+  height: $diameter;
+  border-radius: 50%;
 }
 
 /**
@@ -60,10 +60,10 @@
 }
 
 @mixin absoluteAligning() {
-    top: 50%;
-    left: 50%;
-    position: absolute;
-    @include transform(translate(-50%, -50%));
+  top: 50%;
+  left: 50%;
+  position: absolute;
+  @include transform(translate(-50%, -50%));
 }
 
 /**
@@ -75,121 +75,79 @@
 }
 
 @mixin transform($func) {
-    -moz-transform: $func;
-    -ms-transform: $func;
-    -webkit-transform: $func;
-    -o-transform: $func;
-    transform: $func;
+  -moz-transform: $func;
+  -ms-transform: $func;
+  -webkit-transform: $func;
+  -o-transform: $func;
+  transform: $func;
 }
 
 @mixin transition($transition...) {
-    -moz-transition:    $transition;
-    -o-transition:      $transition;
-    -webkit-transition: $transition;
-    transition:         $transition;
+  -moz-transition:    $transition;
+  -o-transition:      $transition;
+  -webkit-transition: $transition;
+  transition:         $transition;
 }
 
 /**
- * Mixin styling a placeholder.
- **/
+* Mixin styling placeholder
+**/
 @mixin placeholder() {
-    $selectors: (
-        "::-webkit-input-placeholder",
-        "::-moz-placeholder",
-        ":-moz-placeholder",
-        ":-ms-input-placeholder"
-    );
+  $selectors: (
+          "::-webkit-input-placeholder",
+          "::-moz-placeholder",
+          ":-moz-placeholder",
+          ":-ms-input-placeholder"
+  );
 
-    @each $selector in $selectors {
-        #{$selector} {
-            @content;
-        }
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
     }
-}
-
-/**
- * Mixin styling a slider track for different browsers.
- **/
-@mixin slider() {
-    $selectors: (
-        "input[type=range]::-webkit-slider-runnable-track",
-        "input[type=range]::-moz-range-track",
-        "input[type=range]::-ms-track"
-    );
-
-    @each $selector in $selectors {
-        #{$selector} {
-            @content;
-        }
   }
 }
 
-/**
- * Mixin styling a slider thumb for different browsers.
- **/
-@mixin slider-thumb() {
-    $selectors: (
-        "input[type=range]::-webkit-slider-thumb",
-        "input[type=range]::-moz-range-thumb",
-        "input[type=range]::-ms-thumb"
-    );
-
-    @each $selector in $selectors {
-        #{$selector} {
-            @content;
-        }
-    }
-}
-
 @mixin box-shadow($h, $y, $blur, $color, $inset: false) {
-    @if $inset {
-        -webkit-box-shadow: inset $h $y $blur $color;
-        -moz-box-shadow: inset $h $y $blur $color;
-        box-shadow: inset $h $y $blur $color;
-    } @else {
-        -webkit-box-shadow: $h $y $blur $color;
-        -moz-box-shadow: $h $y $blur $color;
-        box-shadow: $h $y $blur $color;
-    }
+  @if $inset {
+    -webkit-box-shadow: inset $h $y $blur $color;
+    -moz-box-shadow: inset $h $y $blur $color;
+    box-shadow: inset $h $y $blur $color;
+  } @else {
+    -webkit-box-shadow: $h $y $blur $color;
+    -moz-box-shadow: $h $y $blur $color;
+    box-shadow: $h $y $blur $color;
+  }
 }
 
 @mixin no-box-shadow {
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-    box-shadow: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
 }
 
 @mixin box-sizing($box-model) {
-    -webkit-box-sizing: $box-model; // Safari <= 5
-    -moz-box-sizing: $box-model; // Firefox <= 19
-    box-sizing: $box-model;
+  -webkit-box-sizing: $box-model; // Safari <= 5
+     -moz-box-sizing: $box-model; // Firefox <= 19
+          box-sizing: $box-model;
 }
 
 @mixin border-radius($radius) {
-    -webkit-border-radius: $radius;
-    border-radius: $radius;
-    /* stops bg color from leaking outside the border: */
-    background-clip: padding-box;
+  -webkit-border-radius: $radius;
+  border-radius: $radius;
+  /* stops bg color from leaking outside the border: */
+  background-clip: padding-box;
 }
 
 @mixin opacity($opacity) {
-    opacity: $opacity;
-    $opacity-ie: $opacity * 100;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
-    filter: alpha(opacity=$opacity-ie); //IE8
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
+  filter: alpha(opacity=$opacity-ie); //IE8
 }
 
 @mixin text-truncate {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/**
- * Creates a semi-transparent background with the given color and alpha
- * (opacity) value.
- */
-@mixin transparentBg($color, $alpha) {
-    background-color: rgba(red($color), green($color), blue($color), $alpha);
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

css/_notice.scss

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

css/_popover.scss

@@ -1,33 +1,124 @@
-/**
- * Mousemove padding styles are used to add invisible elements to the popover
- * to allow mouse movement from the popover trigger to the popover itself
- * without triggering a mouseleave event.
- */
-.popover-mousemove-padding-bottom {
-    bottom: -15px;
-    height: 20px;
-    position: absolute;
-    right: 0;
-    width: 100%;
+.popover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1015;
+  display: none;
+  max-width: 300px;
+  min-width: 100px;
+  padding: 1px;
+  text-align: left;
+  color: #333333;
+  background-color: #ffffff;
+  background-clip: padding-box;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  -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;
 }
-.popover-mousemove-padding-right {
-    height: 100%;
-    position: absolute;
-    right: -20;
-    top: 0;
-    width: 40px;
+.popover.top {
+  margin-top: -10px;
 }
-
-/**
- * An invisible element is added to the top of the popover to ensure the mouse
- * stays over the popover when the popover's height is shrunk, which would then
- * normally leave the mouse outside of the popover itself and cause a mouseleave
- * event.
- */
-.popover-mouse-padding-top {
-    height: 30px;
-    position: absolute;
-    right: 0;
-    top: -25px;
-    width: 100%;
+.popover.right {
+  margin-left: 10px;
+}
+.popover.bottom {
+  margin-top: 10px;
+}
+.popover.left {
+  margin-left: -10px;
+}
+.popover-title {
+  margin: 0;
+  padding: 8px 14px;
+  font-size: 11pt;
+  font-weight: normal;
+  line-height: 18px;
+  background-color: #f7f7f7;
+  border-bottom: 1px solid #ebebeb;
+  border-radius: 5px 5px 0 0;
+}
+.popover-content {
+  padding: 9px 14px;
+  font-size: 10pt;
+  white-space:pre-wrap;
+  text-align: center;
+}
+.popover > .arrow,
+.popover > .arrow:after {
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  border-color: transparent;
+  border-style: solid;
+}
+.popover > .arrow {
+  border-width: 11px;
+}
+.popover > .arrow:after {
+  border-width: 10px;
+  content: "";
+}
+.popover.top > .arrow {
+  left: 50%;
+  margin-left: -11px;
+  border-bottom-width: 0;
+  border-top-color: #999999;
+  border-top-color: rgba(0, 0, 0, 0.25);
+  bottom: -11px;
+}
+.popover.top > .arrow:after {
+  content: " ";
+  bottom: 1px;
+  margin-left: -10px;
+  border-bottom-width: 0;
+  border-top-color: #ffffff;
+}
+.popover.right > .arrow {
+  top: 50%;
+  left: -11px;
+  margin-top: -11px;
+  border-left-width: 0;
+  border-right-color: #999999;
+  border-right-color: rgba(0, 0, 0, 0.25);
+}
+.popover.right > .arrow:after {
+  content: " ";
+  left: 1px;
+  bottom: -10px;
+  border-left-width: 0;
+  border-right-color: #ffffff;
+}
+.popover.bottom > .arrow {
+  left: 50%;
+  margin-left: -11px;
+  border-top-width: 0;
+  border-bottom-color: #999999;
+  border-bottom-color: rgba(0, 0, 0, 0.25);
+  top: -11px;
+}
+.popover.bottom > .arrow:after {
+  content: " ";
+  top: 1px;
+  margin-left: -10px;
+  border-top-width: 0;
+  border-bottom-color: #ffffff;
+}
+.popover.left > .arrow {
+  top: 50%;
+  right: -11px;
+  margin-top: -11px;
+  border-right-width: 0;
+  border-left-color: #999999;
+  border-left-color: rgba(0, 0, 0, 0.25);
+}
+.popover.left > .arrow:after {
+  content: " ";
+  right: 1px;
+  border-right-width: 0;
+  border-left-color: #ffffff;
+  bottom: -10px;
 }

css/_popup_menu.scss

@@ -3,32 +3,40 @@
 **/
 
 .popupmenu {
-    text-align: left;
     padding: 0;
-    white-space: nowrap;
+    margin: 2px 0;
+    bottom: 0;
+    width: 100px;
+    height: auto;
+
+    &:first-child {
+        margin-top: 2px;
+    }
 
     &__item {
         list-style-type: none;
+        text-align: left;
         height: 35px;
 
         &:hover {
-            background-color: rgba(9, 30, 66, 0.04);
+            background-color: $popupMenuSelectedItemBackground;
         }
     }
 
     // Link Appearance
-    &__link,
-    &__contents {
+    &__link {
         display: block;
         box-sizing: border-box;
         text-decoration: none;
+        color: #fff;
+        padding: 5px;
         height: 100%;
         font-size: 9pt;
         width: 100%;
-        cursor: pointer;
-        padding: 0 5px;
+        cursor: hand;
 
         &.disabled {
+            color: gray !important;
             pointer-events: none;
         }
     }
@@ -38,39 +46,13 @@
         vertical-align: middle;
     }
 
-    &__link {
-        i {
-            cursor: pointer;
-        }
-    }
-
-    &__contents {
-        display: flex;
-
-        /**
-         * Positioning styles on the slider and its container are used to make
-         * the container fit the popup width, by removing the slider from the
-         * page flow, and then making the slider fit the container.
-         */
-        .popupmenu__slider_container {
-            position: relative;
-            width: 100%;
-
-            .popupmenu__slider {
-                position: absolute;
-                top: 50%;
-                transform: translate(0, -50%);
-                width: 100%;
-            }
-        }
-    }
-
     &__icon {
         vertical-align: middle;
         position: relative;
         display: inline-block;
-        min-width: 20px;
+        width: 20px;
         height: 100%;
+        text-align: center;
 
         > * {
             @include absoluteAligning();
@@ -82,20 +64,6 @@
     }
 }
 
-/**
- * Override reset css styling modifying all lists and set negative margin to
- * reduce the visibility of padding on AtlasKit
- * InlineDialogs.
- */
-ul.popupmenu {
-    margin: -15px;
-}
-
 span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
     display:block !important;
-}
-
-.remote-control-spinner {
-    top: 6px;
-    left: 2px;
-}
+}

css/_recording.scss

@@ -1,3 +1,4 @@
 .recordingSpinner {
+    display: none;
     vertical-align: top;
-}
+}

css/_redirect_page.scss

@@ -1,3 +1,10 @@
+html, body {
+    width: 100%;
+    height:100%;
+    color: $defaultColor;
+    background: $defaultBackground;
+}
+
 .redirectPageMessage {
     width: 30%;
     margin: 20% auto;

css/_side_toolbar_container.scss

@@ -2,7 +2,7 @@
  * Toolbar side panel main container element.
  */
 #sideToolbarContainer {
-    background-color: $sideToolbarContainerBg;
+    background-color: rgba(0,0,0,0.8);
     height: 100%;
     left: $defaultToolbarSize;
     max-width: $sidebarWidth;
@@ -10,7 +10,7 @@
     position: absolute;
     top: 0;
     width: 0;
-    z-index: $sideToolbarContainerZ;
+    z-index: 800;
 
     /**
      * Labels inside the side panel.
@@ -113,12 +113,6 @@
     text-align: center;
 }
 
-#deviceOptionsWrapper {
-    button {
-        float: none;
-    }
-}
-
 /**
  * Profile
  */

css/_toastr.scss

@@ -0,0 +1,107 @@
+/*
+ * Toastr
+ * Copyright 2012-2014 John Papa and Hans Fjällemark.
+ * All Rights Reserved.
+ * Use, reproduction, distribution, and modification of this code is subject to the terms and
+ * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
+ *
+ * Author: John Papa and Hans Fjällemark
+ * Project: https://github.com/CodeSeven/toastr
+ *
+ * Last updated: October 13, 2016
+ */
+
+.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,
+.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 {
+  color: $notificationColor;
+  background: transparent;
+
+  font-size: 15px;
+  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 {
+  @include opacity(1);
+}
+
+
+.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:hover {
+  @include opacity(1);
+}
+
+#toast-container {
+  position: fixed;
+  z-index: $notificationZ;
+}
+
+#toast-container.notification-bottom-right {
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
+  bottom: 135px;
+  right: $hideFilmstripButtonWidth + $videoOffset;
+}
+
+#toast-container * {
+  @include box-sizing(border-box);
+}
+
+#toast-container .toast {
+  width: $notificationWidth;
+  margin: 0 0 8px;
+}

css/_toolbars.scss

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

css/_variables.scss

@@ -4,21 +4,22 @@
  * Style variables
  */
 $baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-$hangupColor: #bf2117;
+$toolbarFontSize: 1.9em;
 $hangupFontSize: 2em;
 
 /**
  * Size variables.
  */
+$defaultToolbarSize: 50px;
 
 // Video layout.
 $thumbnailToolbarHeight: 22px;
-$thumbnailIndicatorBorder: 2px;
-$thumbnailIndicatorSize: $thumbnailToolbarHeight;
+$thumbnailIndicatorBorder: 0;
+$thumbnailIndicatorSize: 3em;
 $thumbnailVideoMargin: 2px;
 $thumbnailsBorder: 2px;
 $thumbnailVideoBorder: 2px;
-$filmstripToggleButtonWidth: 17px;
+$hideFilmstripButtonWidth: 17px;
 
 
 /**
@@ -28,29 +29,28 @@ $defaultColor: #F1F1F1;
 $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
+$tooltipBg: rgba(0,0,0, 0.7);
 
 /**
  * Toolbar
  */
-$alwaysOnTopToolbarFontSize: 1em;
-$alwaysOnTopToolbarSize: 30px;
-$defaultToolbarSize: 50px;
-$defaultFilmStripOnlyToolbarSize: 37px;
-$secToolbarFontSize: 1.9em;
-$secToolbarLineHeight: 45px;
-$toolbarAvatarPadding: 10px;
-$toolbarAvatarSize: 40px;
-$toolbarFontSize: 1.9em;
+$toolbarTitleColor: #FFFFFF;
 $toolbarTitleFontSize: 19px;
+$toolbarBackground: rgba(0, 0, 0, 0.5);
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+$toolbarToggleBackground: #12499C;
+$splitterToolbarButtonMargin: 18px;
 
-/**
+/*
  * Main controls
  * TODO: looks like we don't use it
  */
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
 
-/**
+/*
  * Video layout
  */
 $videoThumbnailHovered: rgba(22, 94, 204, .4);
@@ -64,7 +64,6 @@ $connectionIndicatorBg: #165ecc;
 $audioLevelShadow: rgba(9, 36, 77, 0.9);
 $videoStateIndicatorColor: $defaultColor;
 $videoStateIndicatorBackground: $toolbarBackground;
-$videoStateIndicatorSize: 40px;
 
 /**
  * Feedback Modal
@@ -80,17 +79,23 @@ $rateStarActivity: #165ecc;
 $rateStarSize: 34px;
 
 /**
- * Modals
+ * Notifications
  */
-$modalButtonFontSize: 14px;
-$modalMockAKInputBackground: #fafbfc;
-$modalMockAKInputBorder: 1px solid #f4f5f7;
-$modalTextColor: #333;
+$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: 220px;
 $popoverMenuPadding: 13px;
@@ -99,24 +104,13 @@ $happySoftwareBackground: transparent;
 /**
  * Z-indexes. TODO: Replace this by a function.
  */
-$zindex0: 0;
-$zindex1: 1;
-$zindex2: 2;
-$zindex3: 3;
-$filmstripVideosZ: 5;
-$zindex10: 10;
-$reloadZ: 20;
-$poweredByZ: 100;
-$ringingZ: 300;
-$sideToolbarContainerZ: 300;
-$toolbarZ: 350;
-$tooltipsZ: 401;
-$dropdownMaskZ: 900;
+$tooltipsZ: 901;
+$toolbarZ: 900;
+$overlayZ: 902;
+$notificationZ: 1012;
+$ringingZ: 800;
 $dropdownZ: 901;
-$centeredVideoLabelZ: 1010;
-$popoverZ: 1015;
-$overlayZ: 1016;
-
+$dropdownMaskZ: 900;
 
 /**
  * Font Colors
@@ -132,23 +126,4 @@ $defaultDarkFontColor: #000;
 $inputControlEmColor: #f29424;
 //buttons
 $linkFontColor: #489afe;
-$linkHoverFontColor: #287ade;
-$formPadding: 16px;
-
-/**
- * Unsupported browser
- */
-$primaryUnsupportedBrowserButtonBgColor: #17a0db;
-$unsupportedBrowserButtonBgColor: #ff9a00;
-$unsupportedBrowserTextColor: #4a4a4a;
-$unsupportedBrowserTextSmallFontSize: 17px;
-$unsupportedBrowserTitleColor: #fff;
-$unsupportedBrowserTitleFontSize: 24px;
-$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
-$unsupportedDesktopBrowserTextFontSize: 21px;
-
-/**
- * The size of the default watermark.
- */
-$watermarkWidth: 186px;
-$watermarkHeight: 74px;
+$linkHoverFontColor: #287ade;

css/_vertical_filmstrip_overrides.scss

@@ -1,226 +0,0 @@
-/**
- * Override other styles to support vertical filmstrip mode.
- */
-.vertical-filmstrip {
-    .filmstrip {
-        align-items: flex-end;
-        box-sizing: border-box;
-        display: flex;
-        flex-direction: column-reverse;
-        height: 100%;
-        /**
-         * fixed positioning is necessary for remote menus and tooltips to pop
-         * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
-         * a library called popper which will position its elements fixed if
-         * any parent is also fixed.
-         */
-        position: fixed;
-
-        /**
-         * z-index adjusting is needed because the video state indicator has to
-         * display over the filmstrip when no videos are displayed but still be
-         * clickable but its inline dialogs must display over the video state
-         * indicator when videos are displayed.
-         */
-        z-index: #{$tooltipsZ + 1};
-
-        /**
-         * Hide videos by making them slight to the right.
-         */
-        .filmstrip__videos {
-            right: 0;
-
-            &.hidden {
-                bottom: auto;
-                right: -196px;
-            }
-
-            /**
-             * An id selector is used to match id specificity with existing
-             * filmstrip styles.
-             */
-            &#remoteVideos {
-                /**
-                 * Remove horizontal filmstrip padding used to prevent videos
-                 * from overlapping the left-side toolbar. An id selector is
-                 * used to match id specificity with filmstrip styles.
-                 */
-                padding-left: 0;
-                transition: right 2s;
-            }
-        }
-
-        /**
-         * Re-styles the local Video and invite button to better fit the
-         * vertical filmstrip layout.
-         */
-        #filmstripLocalVideo {
-            bottom: 5px;
-            display: flex;
-            flex-direction: column-reverse;
-            height: auto;
-            justify-content: flex-start;
-
-            .filmstrip__invite {
-                padding-bottom: 0px;
-                padding-top: 5px;
-                z-index: $dropdownZ;
-            }
-        }
-
-        /**
-         * Remove unnecssary padding that is normally used to prevent horizontal
-         * filmstrip from overlapping the left edge of the screen.
-         */
-        #filmstripLocalVideo,
-        #filmstripRemoteVideos {
-            padding: 0;
-        }
-
-        #filmstripRemoteVideos {
-            display: flex;
-            flex: 1;
-            flex-direction: column;
-            height: auto;
-            justify-content: flex-end;
-
-            #filmstripRemoteVideosContainer {
-                flex-direction: column-reverse;
-                overflow-x: hidden;
-            }
-        }
-
-        /**
-         * Rotate the hide filmstrip icon so it points towards the right edge
-         * of the screen.
-         */
-        &__toolbar {
-            transform: rotate(-90deg);
-        }
-
-        /**
-         * Move the remote video menu trigger to the bottom left of the
-         * video thumbnail.
-         */
-        .remotevideomenu,
-        .remote-video-menu-trigger {
-            bottom: 0;
-            left: 0;
-            top: auto;
-            right: auto;
-        }
-
-        .remote-video-menu-trigger {
-            margin-bottom: 7px;
-        }
-
-        #remoteVideos {
-            flex-direction: column;
-            flex-grow: 1;
-        }
-
-        .videocontainer {
-            /**
-             * Move status icons to the bottom right of the thumbnail.
-             */
-            &__toolbar {
-                text-align: right;
-
-                .right {
-                    float: none;
-                    margin: auto;
-                }
-            }
-        }
-    }
-
-    &.filmstrip-only {
-        .filmstrip {
-            flex-direction: row-reverse;
-        }
-        .filmstrip__videos-filmstripOnly {
-            height: 100%;
-        }
-
-        /**
-         * In filmstrip only mode, the toolbar is normally displayed in the
-         * vertical center of the filmstrip strip. In vertical filmstrip mode,
-         * that alignment makes the toolbar appear floating and detached from
-         * the filmstrip. So, instead anchor the toolbar next to the local
-         * video.
-         */
-        .toolbar_filmstrip-only {
-            bottom: 0;
-            top: auto;
-            transform: none;
-        }
-
-    }
-
-    /**
-     * These styles are for the video labels that display on the top right. The
-     * styles adjust the labels' positioning as the filmstrip itself or
-     * filmstrip's remote videos appear and disappear.
-     *
-     * The class with-filmstrip is for when the filmstrip is visible.
-     * The class without-filmstrip is for when the filmstrip has been toggled to
-     * be hidden.
-     * The class opening is for when the filmstrip is transitioning from hidden
-     * to visible.
-     */
-    .video-state-indicator.moveToCorner {
-        transition: right 0.5s;
-
-        &.with-filmstrip {
-            &#recordingLabel {
-                right: 200px;
-            }
-
-            &#videoResolutionLabel {
-                right: 150px;
-            }
-        }
-
-        &.with-filmstrip.opening {
-            transition: 0.9s;
-            transition-timing-function: ease-in-out;
-        }
-
-        &.without-filmstrip {
-            transition: 1.2s ease-in-out;
-            transition-delay: 0.1s;
-        }
-    }
-
-    /**
-     * Apply hardware acceleration to prevent flickering on scroll. The
-     * selectors are specific to icon wrappers to prevent fixed position dialogs
-     * and tooltips from getting a new location context due to translate3d.
-     */
-    .connection-indicator,
-    .remote-video-menu-trigger,
-    .indicator-icon-container {
-        transform: translate3d(0, 0, 0);
-    }
-
-    .indicator-container {
-        float: none;
-    }
-
-    /**
-     * FIXME: disable pointer to allow any elements moved below to still be
-     * clickable. The real fix would to make sure those moved elements are
-     * actually part of the toolbar instead of positioning being faked.
-     */
-    .videocontainer__toolbar {
-        pointer-events: none;
-
-        > div {
-            pointer-events: none;
-        }
-
-        .toolbar-icon {
-            pointer-events: all;
-        }
-    }
-}

css/_videolayout_default.scss

@@ -12,26 +12,15 @@
     overflow: hidden;
 }
 
-.video_blurred_container {
-    height: 100%;
-    filter: blur(40px);
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-}
-
 .videocontainer {
     position: relative;
     text-align: center;
 
     &__background {
         @include topLeft();
-        background-color: black;
-        border-radius: $borderRadius;
         width: 100%;
         height: 100%;
+        background-color: black;
     }
 
     /**
@@ -41,92 +30,43 @@
     &__toptoolbar {
         position: absolute;
         left: 0;
-        pointer-events: none;
-        z-index: $zindex10;
+        z-index: 3;
         width: 100%;
         box-sizing: border-box; // Includes the padding in the 100% width.
-
-        /**
-         * FIXME (lenny): Disabling pointer-events is a pretty big sin that
-         * sidesteps the problems. There are z-index wars occurring within
-         * videocontainer and AtlasKit Tooltips rely on their parent z-indexe
-         * being higher than whatever they need to appear over. So set a higher
-         * z-index for the tooltip containers but make any empty space not block
-         * mouse overs for various mouseover triggers.
-         */
-        pointer-events: none;
-
-        * {
-            pointer-events: auto;
-        }
-
-        .indicator-container {
-            display: inline-block;
-            float: left;
-            pointer-events: all;
-        }
-
-        /**
-         * Need to overwrite the background for the top toolbar dark theme div
-         * wrapper needed before we're able to move all top toolbar indicators
-         * creation to react.
-         */
-        .ckAJgx {
-            background: none;
-        }
     }
 
     &__toolbar {
         bottom: 0;
-        height: $thumbnailToolbarHeight;
         padding: 0 5px 0 5px;
+        height: $thumbnailToolbarHeight;
     }
 
     &__toptoolbar {
-        $toolbarIconMargin: 5px;
+        $toolbarPadding: 5px;
         top: 0;
+        padding: $toolbarPadding;
         padding-bottom: 0;
-        /**
-         * Override text-align center as icons need to be left justified.
-         */
-        text-align: left;
 
-        /**
-         * Intentionally use margin on the icon itself as AtlasKit InlineDialog
-         * positioning depends on the trigger (indicator icon).
-         */
-        .indicator {
-            margin-left: 5px;
-            margin-top: $toolbarIconMargin;
-        }
-
-        .indicator-container:nth-child(1) .indicator {
-            margin-left: $toolbarIconMargin;
-        }
-
-        .indicator-container {
-            display: inline-block;
-            vertical-align: top;
-
-            .popover-trigger {
-                display: inline-block;
-            }
-        }
-
-        .connection-indicator,
-        .indicator {
+        span.indicator {
             position: relative;
             font-size: 8px;
             text-align: center;
             line-height: $thumbnailIndicatorSize;
+            display: none;
             padding: 0;
+            margin-right: em(5, 8);
+            float: left;
             @include circle($thumbnailIndicatorSize);
             box-sizing: border-box;
-            z-index: $zindex3;
+            z-index: 3;
             background: $dominantSpeakerBg;
             color: $thumbnailPictogramColor;
             border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
 
+            &:last-child {
+                margin-right: 0;
+            }
+
             .indicatoricon {
                 @include absoluteAligning();
             }
@@ -138,51 +78,40 @@
                 left: 0;
                 @include transform(translate(0, -50%));
 
-                &_empty,
-                &_lost
+                &_empty
                 {
                     color: #8B8B8B;/*#FFFFFF*/
                     overflow: hidden;
                 }
 
+                &_lost
+                {
+                    color: #8B8B8B;
+                    overflow: visible;
+                }
+
                 &_full
                 {
                     @include topLeft();
                     color: #FFFFFF;/*#15A1ED*/
                     overflow: hidden;
                 }
-
-                &_ninja
-                {
-                    font-size: 1.5em;
-                }
             }
 
-            .icon-gsm-bars {
-                cursor: pointer;
+            .icon-connection,
+            .icon-connection-lost {
                 font-size: 1em;
             }
         }
-
-        .hide-connection-indicator {
-            display: none;
-        }
     }
 
     &__hoverOverlay {
-        background: rgba(0,0,0,.6);
-        border-radius: $borderRadius;
         position: relative;
         width: 100%;
         height: 100%;
         visibility: hidden;
-        z-index: $zindex2;
-    }
-
-    &.audio-only {
-        .videoThumbnailProblemFilter {
-            filter: none;
-        }
+        background: rgba(0,0,0,.6);
+        z-index: 2;
     }
 }
 
@@ -197,10 +126,10 @@
     -o-transform: scale(-1, 1);
 }
 
-#localVideoWrapper video,
-#localVideoWrapper object {
-    border-radius: $borderRadius !important;
+#localVideoWrapper>video,
+#localVideoWrapper>object {
     cursor: hand;
+    border-radius:1px !important;
     object-fit: cover;
 }
 
@@ -211,10 +140,6 @@
     text-align: center;
 }
 
-#largeVideoWrapper {
-    box-shadow: 0 0 20px -2px #444;
-}
-
 #largeVideo,
 #largeVideoWrapper
 {
@@ -223,8 +148,8 @@
 
 #sharedVideo,
 #etherpad,
-#localVideoWrapper video,
-#localVideoWrapper object,
+#localVideoWrapper>video,
+#localVideoWrapper>object,
 #localVideoWrapper,
 #largeVideoWrapper,
 #largeVideoWrapper>video,
@@ -234,7 +159,7 @@
     position: absolute;
     left: 0;
     top: 0;
-    z-index: $zindex1;
+    z-index: 1;
     width: 100%;
     height: 100%;
 }
@@ -244,7 +169,7 @@
 }
 
 #etherpad {
-    z-index: $zindex0;
+    z-index: 0;
 }
 
 /**
@@ -266,7 +191,7 @@
     overflow: hidden;
     white-space: nowrap;
     line-height: $thumbnailToolbarHeight;
-    z-index: $zindex2;
+    z-index: 2;
 }
 
 /**
@@ -286,7 +211,6 @@
 
 .videocontainer .displayname {
     pointer-events: none;
-    padding: 0 3px 0 3px;
 }
 
 .videocontainer .editdisplayname {
@@ -306,7 +230,7 @@
     padding: 3px 5px;
     font-size: 9pt;
     cursor: pointer;
-    z-index: $zindex2;
+    z-index: 2;
 }
 
 /**
@@ -323,6 +247,7 @@
     padding: 0;
     border: 0;
     margin: 0px 5px 0px 0px;
+    float: left;
 }
 
 /**
@@ -335,73 +260,37 @@
 /**
  * Toolbar icons positioned on the right.
  */
-.moderator-icon {
-    display: inline-block;
-
-    &.right {
-        float: right;
-        margin: 0px 0px 0px 5px;
-    }
-
-    .toolbar-icon {
-        margin: 0;
-    }
+.toolbar-icon.right {
+  float: right;
+  margin: 0px 0px 0px 5px;
 }
 
-.raisehandindicator {
+#raisehandindicator {
   background: $raiseHandBg;
 }
 
-.connection-indicator {
-    background: $connectionIndicatorBg;
-
-    &.status-high {
-        background: green;
-    }
-
-    &.status-med {
-        background: #FFD740;
-    }
-
-    &.status-lost {
-        background: gray;
-    }
-
-    &.status-low {
-        background: #BF2117;
-    }
-
-    &.status-other {
-        background: $connectionIndicatorBg;
-    }
+#connectionindicator {
+  background: $connectionIndicatorBg;
 }
 
-.remote-video-menu-trigger,
 .remotevideomenu
 {
     display: inline-block;
     position: absolute;
     top: 0px;
     right: 0;
-    z-index: $zindex2;
+    margin: 7px;
+    z-index: 3;
     width: 18px;
     height: 13px;
     color: #FFF;
-    font-size: 10pt;
-
-    >i{
-        cursor: hand;
-    }
-}
-.remote-video-menu-trigger {
-    margin-top: 7px;
+    font-size: 8pt;
 }
 
 /**
  * Audio indicator on video thumbnails.
  */
-.videocontainer>span.audioindicator,
-.videocontainer>.audioindicator-container {
+.videocontainer>span.audioindicator {
     position: absolute;
     display: inline-block;
     left: 6px;
@@ -409,7 +298,7 @@
     margin-top: -17px;
     width: 6px;
     height: 35px;
-    z-index: $zindex2;
+    z-index: 2;
     border: none;
 
     .audiodot-top,
@@ -452,13 +341,13 @@
     background-clip: padding-box;
     -webkit-border-radius: 5px;
     -webkit-background-clip: padding-box;
-    z-index: $reloadZ; /*The reload button should appear on top of the header!*/
+    z-index: 20; /*The reload button should appear on top of the header!*/
 }
 
 .audiolevel {
     display: inline-block;
     position: absolute;
-    z-index: $zindex0;
+    z-index: 0;
     border-radius:1px;
     pointer-events: none;
 }
@@ -516,7 +405,7 @@
 .noMic {
     position: absolute;
     border-radius: 8px;
-    z-index: $zindex1;
+    z-index: 1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noMic.png");
@@ -528,7 +417,7 @@
 .noVideo {
     position: absolute;
     border-radius: 8px;
-    z-index: $zindex1;
+    z-index: 1;
     width: 100%;
     height: 100%;
     background-image: url("../images/noVideo.png");
@@ -557,20 +446,15 @@
     filter: grayscale(100%);
 }
 
-#remotePresenceMessage,
 #remoteConnectionMessage {
+    display: none;
     position: absolute;
     width: auto;
-    z-index: $zindex2;
+    z-index: 2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
     color: #FFF;
-    left: 50%;
-    transform: translate(-50%, 0);
-}
-#remotePresenceMessage .presence-label,
-#remoteConnectionMessage {
     opacity: .80;
     text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
                     0px 1px 1px rgba(0,0,0,0.3),
@@ -583,18 +467,13 @@
     padding-left: 10px;
     padding-right: 10px;
 }
-#remotePresenceMessage .no-presence,
-#remoteConnectionMessage {
-    display: none;
-}
 
 #localConnectionMessage {
     display: none;
     position: absolute;
-    left: 0;
     width: 100%;
     top:50%;
-    z-index: $zindex2;
+    z-index: 2;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -605,3 +484,44 @@
                     1px 0px 1px rgba(0,0,0,0.3),
                     0px 0px 1px rgba(0,0,0,0.3);
 }
+
+.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 {
+    bottom: 45%;
+    border-radius: 2px;
+    -webkit-transition: all 2s 2s linear;
+    transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
+}
+
+.moveToCorner {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+}
+
+.moveToCorner + .moveToCorner {
+    right: 80px;
+}

css/_welcome_page.scss

@@ -22,7 +22,7 @@
     font-weight: 500;
     font-size: 16px;
     color: #acacac;
-    z-index: $zindex2;
+    z-index: 2;
 }
 
 #disable_welcome:checked + label
@@ -35,7 +35,7 @@
     font-weight: 500;
     font-size: 16px;
     color: #acacac;
-    z-index: $zindex2;
+    z-index: 2;
 }
 
 #enter_room_form {
@@ -50,7 +50,7 @@
     float: left;
 }
 
-.domain-name
+#domain_name
 {
     float: left;
     height: 55px;
@@ -61,51 +61,37 @@
     color: $defaultDarkColor;
 }
 
-.enter-room {
-    &__field {
-        font-size: 15px;
-        border: none;
-        -webkit-appearance: none;
-        width: 228px;
-        height: 55px;
-        line-height: 55px;
-        font-weight: 500;
-        box-shadow: none;
-        float: left;
-        background-color: #FFFFFF;
-        position: relative;
-        z-index: $zindex2;
-    }
+#enter_room_field {
+    font-size: 15px;
+    border: none;
+    -webkit-appearance: none;
+    width: 228px;
+    height: 55px;
+    line-height: 55px;
+    font-weight: 500;
+    box-shadow: none;
+    float: left;
+    background-color: #FFFFFF;
+    position: relative;
+    z-index: 2;
+}
 
-    &__reload {
-        display: block;
-        width: 30px;
-        color: #acacac;
-        font-size: 1.9em;
-        line-height: 55px;
-        z-index: $zindex3;
-        float:  left;
-        cursor: pointer;
-        text-align: center;
-    }
-
-    &__button {
-        width: 73px;
-        height: 45px;
-        background-color: #21B9FC;
-        moz-border-radius: 1px;
-        -webkit-border-radius: 1px;
-        color: #ffffff;
-        font-weight: 600;
-        border: none;
-        margin-top: 5px;
-        font-size: 19px;
-        padding-top: 6px;
-        outline: none;
-        float:left;
-        position: relative;
-        z-index: $zindex2;
-    }
+#enter_room_button {
+    width: 73px;
+    height: 45px;
+    background-color: #21B9FC;
+    moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
+    color: #ffffff;
+    font-weight: 600;
+    border: none;
+    margin-top: 5px;
+    font-size: 19px;
+    padding-top: 6px;
+    outline: none;
+    float:left;
+    position: relative;
+    z-index: 2;
 }
 
 #enter_room_container {
@@ -198,3 +184,16 @@
     line-height: 22px;
     font-weight: 200;
 }
+
+#reload_roomname
+{
+    width: 30px;
+    color: #acacac;
+    font-size: 1.9em;
+    line-height: 55px;
+    z-index: 3;
+    float:  left;
+    cursor: pointer;
+    text-align: center;
+    display: none;
+}

css/components/_button-control.scss

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

css/components/_form-control.scss

@@ -1,5 +1,5 @@
 .form-control {
-    padding: $formPadding 0;
+    padding: 16px 0;
 
     &:first-child {
         padding-top: 0;
@@ -23,6 +23,19 @@
         color: $inputControlEmColor;
     }
 
+    &__hint {
+        margin-top: 0;
+        font-size: $hintFontSize;
+
+        span {
+            vertical-align: middle;
+        }
+
+        &_error {
+            color: $errorColor;
+        }
+    }
+
     &__container {
         position: relative;
         width: 100%;

css/components/_input-control.scss

@@ -3,10 +3,13 @@
     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 {

css/components/_input-slider.scss

@@ -1,41 +0,0 @@
-/**
- * Disable the default webkit styles for range inputs (sliders).
- */
-input[type=range]{
-    -webkit-appearance: none;
-    background: none;
-}
-
-/**
- * Disable the default focus styles for webkit range inputs (sliders).
- */
-input[type=range]:focus {
-    outline: none;
-}
-
-/**
- * Include the mixin for a range input style.
- */
-@include slider {
-    background: $sliderTrackBackground;
-    border: none;
-    border-radius: 3px;
-    cursor: pointer;
-    height: 6px;
-    width: 100%;
-}
-
-/**
- * Include the mixin for a range input thumb style.
- */
-@include slider-thumb {
-    -webkit-appearance: none;
-    background: white;
-    border: 1px solid $sliderThumbBackground;
-    border-radius: 50%;
-    box-shadow: 0px 0px 1px $sliderThumbBackground;
-    cursor: pointer;
-    height: 14px;
-    margin-top: -4px;
-    width: 14px;
-}

css/components/_link.scss

@@ -8,13 +8,4 @@
         text-decoration: underline;
         @include transition(color .1s ease-in);
     }
-}
-
-/**
- * Helper links are links that are meant to open a documentation page or more
- * detailed info.
- */
-.helper-link {
-    @extend .link;
-    font-size: 12px;
 }

css/main.scss

@@ -26,36 +26,33 @@
 
 @import 'font';
 @import 'font-awesome';
-/* Fonts END */
 
-@import 'flag-icon';
+/* Fonts END */
 
 /* Modules BEGIN */
 
-@import 'dial-out';
+@import 'toastr';
 @import 'base';
 @import 'utils';
 @import 'overlay/overlay';
 @import 'inlay';
 @import 'reload_overlay/reload_overlay';
-@import 'modals/desktop-picker/desktop-picker';
-@import 'modals/device-selection/device-selection';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';
-@import 'modals/invite/info';
-@import 'modals/speaker_stats/speaker_stats';
-@import 'modals/video-quality/video-quality';
 @import 'videolayout_default';
 @import 'notice';
 @import 'popup_menu';
 @import 'recording';
 @import 'login_menu';
+@import 'popover';
+@import 'jitsi_popover';
 @import 'contact_list';
 @import 'chat';
 @import 'ringing/ringing';
 @import 'welcome_page';
 @import 'toolbars';
 @import 'side_toolbar_container';
+@import 'device_settings_dialog';
 @import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
@@ -63,17 +60,12 @@
 @import 'components/link';
 @import 'shortcuts/main';
 @import 'components/button-control';
-@import 'components/input-control';
-@import 'components/input-slider';
+@import 'components/_input-control.scss';
 @import "modals/invite/invite";
 @import "connection-info";
 @import 'aui-components/dropdown';
 @import '404';
 @import 'policy';
-@import 'popover';
 @import 'filmstrip';
-@import 'unsupported-browser/main';
-@import 'modals/invite/add-people';
-@import 'vertical_filmstrip_overrides';
 
 /* Modules END */

css/modals/_dialog.scss

@@ -76,39 +76,3 @@
         border-bottom: 1px solid $auiBorderColor;
     }
 }
-
-.modal-dialog-form {
-    color: $modalTextColor;
-    margin-top: 5px !important;
-
-    .input-control {
-        background: $modalMockAKInputBackground;
-        border: $modalMockAKInputBorder;
-        color: inherit;
-    }
-
-    &-error {
-        margin-bottom: 8px;
-    }
-}
-.modal-dialog-footer {
-    font-size: $modalButtonFontSize;
-}
-
-/**
- * Styling inline dialog errors.
- */
-.inline-dialog-error {
-    margin-top: 16px;
-
-    &-text {
-        color: $dialogErrorText;
-        margin-bottom: 8px;
-        text-align: center;
-    }
-
-    &-button {
-        display: block;
-        margin: 16px auto 0 auto;
-    }
-}

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

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

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

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

css/modals/feedback/_feedback.scss

@@ -45,59 +45,83 @@
     animation-timing-function: ease-in-out
 }
 
-.feedback-dialog {
-    .details {
-        margin-top: 20px;
-        padding-left: 60px;
-        padding-right: 60px;
+.feedback.aui-dialog2{
+    .aui-dialog2{
+        &-header {
+            background-color: $feedbackContentBg;
+            border-bottom-color: transparent;
+            padding-top: 30px;
+            h2 {
+                color: $feedbackTextColor;
+                text-align: center;
+            }
+        }
 
-        textarea {
-            min-height: 100px;
+        &-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;
+                margin-top: 10px;
+
+                .star-label {
+                    height: 16px;
+                    font-size: 14px;
+                    color: $rateStarLabelColor;
+                }
+                .star-btn {
+                    display: inline-block;
+                    color: $rateStarDefault;
+                    font-size: $rateStarSize;
+                    position: relative;
+                    cursor: pointer;
+                    outline: none;
+                    text-decoration: none;
+                    @include transition(all .2s ease);
+
+                    &.starHover,
+                    &.active,
+                    &:hover {
+                        color: $rateStarActivity;
+                    };
+
+                }
+            }
+
+            .details {
+                padding-left: 60px;
+                padding-right: 60px;
+                margin-top: 20px;
+                textarea {
+                    min-height: 100px;
+                }
+            }
+        }
+        &-footer {
+            background-color: $feedbackContentBg;
+            border-top-color: transparent;
+
+            .button-control {
+                color: $feedbackCancelFontColor;
+            }
         }
     }
-
-    .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;
-        margin-top: 10px;
-        text-align: center;
-
-        .star-label {
-            color: $rateStarLabelColor;
-            font-size: 14px;
-            height: 16px;
-        }
-
-        .star-btn {
-            color: $rateStarDefault;
-            cursor: pointer;
-            display: inline-block;
-            font-size: $rateStarSize;
-            outline: none;
-            position: relative;
-            text-decoration: none;
-            @include transition(all .2s ease);
-
-            &.active,
-            &:hover,
-            &.starHover {
-                color: $rateStarActivity;
-            };
-
-        }
-    }
-}
+}

css/modals/invite/_add-people.scss

@@ -1,32 +0,0 @@
-/**
- * Styles errors and links in the AddPeopleDialog.
- */
-.modal-dialog-form {
-    .add-people-form-wrap {
-
-        .error {
-            padding-left: 5px;
-
-            a {
-                padding-left: 5px;
-            }
-        }
-    }
-}
-
-/**
- * Styles the loading element in the MultiSelectAutocomplete.
- */
-.autocomplete-loading {
-    justify-content: center;
-    display: flex;
-    min-width: 260px;
-    padding: 20px;
-}
-
-/**
- * Styles errors in the MultiSelectAutocomplete.
- */
-.autocomplete-error {
-    min-width: 260px;
-}

css/modals/invite/_info.scss

@@ -1,60 +0,0 @@
-.info-dialog {
-    cursor: default;
-    display: flex;
-
-    .info-dialog-action-link {
-        display: inline-block;
-
-        a {
-            cursor: pointer;
-        }
-    }
-
-    .info-dialog-action-link:before {
-        color: $linkFontColor;
-        content: '\2022';
-        padding: 0 10px;
-    }
-
-    .info-dialog-action-link:first-child:before {
-        content: '';
-        padding: 0;
-    }
-
-    .info-dialog-action-links {
-        white-space: nowrap;
-    }
-
-    .info-dialog-action-separator {
-        display: inline-block;
-    }
-
-    .info-dialog-copy-element {
-        opacity: 0;
-        pointer-events: none;
-        position: fixed;
-        -webkit-user-select: text;
-        user-select: text;
-    }
-
-    .info-dialog-column {
-        margin-right: 10px;
-    }
-
-    .info-dialog-conference-url {
-        margin: 10px 0;
-        max-width: 250px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .info-dialog-icon {
-        color: #6453C0;
-        font-size: 16px;
-    }
-
-    .info-dialog-title {
-        font-weight: bold;
-    }
-}

css/modals/invite/_invite.scss

@@ -4,93 +4,4 @@
  */
 #inviteDialogRemovePassword {
     cursor: hand;
-}
-
-.invite-dialog {
-    .dial-in-numbers {
-        .dial-in-numbers-conference-id {
-            color: orange;
-            margin-left: 3px;
-        }
-
-        /*
-         * dial-in-numbers-copy styling is needed for the feature of copying
-         * text to the clipboard. The styling keeps the element invisible
-         * to the user but still programmatically selectable for copying.
-         */
-        .dial-in-numbers-copy {
-            opacity: 0;
-            pointer-events: none;
-            position: fixed;
-            -webkit-user-select: text;
-            user-select: text;
-        }
-
-        .is-disabled,
-        .is-loading {
-            .dial-in-numbers-trigger-icon {
-                display: none;
-            }
-        }
-    }
-
-    .form-control {
-        padding: 0;
-
-        &__container {
-            /**
-             * Ensure contents display in a line and vertically centered.
-             */
-            align-items: center;
-
-            button {
-                font-size: $modalButtonFontSize;
-            }
-        }
-
-        &__input-container {
-            flex: 1;
-            margin-right: 10px;
-
-            .dropdown-button-trigger {
-                text-align: left;
-            }
-        }
-    }
-
-    .inviteLink {
-        color: $readOnlyInputColor;
-    }
-
-    .lock-state {
-        display: flex;
-    }
-
-    .password-overview {
-        margin-top: 10px;
-
-        .form-control {
-            margin-top: 10px;
-        }
-
-        .password-overview-status,
-        .remove-password {
-            display: flex;
-            justify-content: space-between;
-        }
-
-        .password-overview-toggle-edit,
-        .remove-password-link {
-            cursor: pointer;
-            text-decoration: none;
-        }
-
-        .remove-password {
-            margin-top: 15px;
-        }
-    }
-
-    .remove-password-current {
-        color: $inputControlEmColor;
-    }
-}
+}

css/modals/speaker_stats/_speaker_stats.scss

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

css/modals/video-quality/_video-quality.scss

@@ -1,173 +0,0 @@
-.video-quality-dialog {
-
-    .hide-warning {
-        height: 0;
-        visibility: hidden;
-    }
-
-    .video-quality-dialog-title {
-        margin-bottom: 10px;
-    }
-
-    .video-quality-dialog-contents {
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        padding: 10px;
-        min-width: 250px;
-
-        .video-quality-dialog-slider-container {
-            width: 100%;
-            text-align: center;
-        }
-
-        .video-quality-dialog-slider {
-            width: calc(100% - 5px);
-
-            @mixin sliderTrackStyles() {
-                height: 15px;
-                border-radius: 10px;
-                background: #0E1624;
-            }
-
-            &::-ms-track {
-                @include sliderTrackStyles();
-            }
-
-            &::-moz-range-track {
-                @include sliderTrackStyles();
-            }
-
-            &::-webkit-slider-runnable-track {
-                @include sliderTrackStyles();
-            }
-
-            @mixin sliderThumbStyles() {
-                top: 50%;
-                border: none;
-                position: relative;
-                opacity: 0;
-            }
-
-            &::-ms-thumb {
-                @include sliderThumbStyles();
-            }
-
-            &::-moz-range-thumb {
-                @include sliderThumbStyles();
-
-            }
-
-            &::-webkit-slider-thumb {
-                @include sliderThumbStyles();
-            }
-        }
-
-        .video-quality-dialog-labels {
-            box-sizing: border-box;
-            display: flex;
-            margin-top: 5px;
-            position: relative;
-            width: 90%;
-        }
-
-        .video-quality-dialog-label-container {
-            position: absolute;
-            text-align: center;
-            transform: translate(-50%, 0%);
-
-            &::before {
-                content: '';
-                border-radius: 50%;
-                left: 0;
-                height: 6px;
-                margin: 0 auto;
-                pointer-events: none;
-                position: absolute;
-                right: 0;
-                top: -16px;
-                width: 6px;
-            }
-        }
-
-        .video-quality-dialog-label-container.active {
-            color: $videoQualityActive;
-
-            &::before {
-                background: $videoQualityActive;
-                height: 12px;
-                top: -19px;
-                width: 12px;
-            }
-        }
-
-        .video-quality-dialog-label-container:first-child {
-            position: relative;
-        }
-
-        .video-quality-dialog-label {
-            display: table-caption;
-            word-spacing: unset;
-        }
-    }
-}
-
-.video-state-indicator {
-    background: $videoStateIndicatorBackground;
-    cursor: default;
-    font-size: 13px;
-    height: $videoStateIndicatorSize;
-    line-height: 20px;
-    text-align: left;
-    min-width: $videoStateIndicatorSize;
-    border-radius: 50%;
-    position: absolute;
-    box-sizing: border-box;
-
-    i {
-        line-height: $videoStateIndicatorSize;
-    }
-
-    /**
-     * Give the label padding so it has more volume and can be easily clicked.
-     */
-    .video-quality-label-status {
-        line-height: $videoStateIndicatorSize;
-        min-width: $videoStateIndicatorSize;
-        text-align: center;
-    }
-}
-
-.centeredVideoLabel.moveToCorner {
-    z-index: $tooltipsZ;
-}
-
-#videoResolutionLabel {
-    z-index: #{$tooltipsZ + 1};
-}
-
-.centeredVideoLabel {
-    bottom: 45%;
-    border-radius: 2px;
-    display: none;
-    padding: 10px;
-    transform: translate(-50%, 0);
-    z-index: $centeredVideoLabelZ;
-
-    &.moveToCorner {
-        bottom: auto;
-        transform: none;
-        -webkit-transition: all 2s 2s linear;
-        transition: all 2s 2s linear;
-    }
-}
-
-.moveToCorner {
-    position: absolute;
-    top: 30px;
-    right: 30px;
-}
-
-.moveToCorner + .moveToCorner {
-    right: 80px;
-}