Flow, coding style

Never show the local participant in the large view unless it's the only
participant.

This fixes 2 issues:

- selecting the local participant when the camera permission wasn't granted
- selecting the other participant when they join a 1-1 call with video muted

.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

.editorconfig

@@ -0,0 +1,13 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[Makefile]
+indent_style = tab

.eslintignore

@@ -0,0 +1,12 @@
+# The build artifacts of the jitsi-meet project.
+build/*
+
+# Third-party source code which we (1) do not want to modify or (2) try to
+# modify as little as possible.
+flow-typed/*
+libs/*
+
+# ESLint will by default ignore its own configuration file. However, there does
+# not seem to be a reason why we will want to risk being inconsistent with our
+# remaining JavaScript source code.
+!.eslintrc.js

.eslintrc.js

@@ -0,0 +1,61 @@
+module.exports = {
+    'env': {
+        'browser': true,
+        'commonjs': true,
+        'es6': true
+    },
+    'extends': [
+        'eslint:recommended',
+        'plugin:flowtype/recommended'
+    ],
+    'globals': {
+        // The globals that (1) are accessed but not defined within many of our
+        // files, (2) are certainly defined, and (3) we would like to use
+        // without explicitly specifying them (using a comment) inside of our
+        // files.
+        '__filename': false
+    },
+    'parser': 'babel-eslint',
+    'parserOptions': {
+        'ecmaFeatures': {
+            'experimentalObjectRestSpread': true
+        },
+        'sourceType': 'module'
+    },
+    'plugins': [
+        'flowtype'
+    ],
+    'rules': {
+        'indent': [
+            'error',
+            4,
+            {
+                'CallExpression': {
+                    arguments: 'off'
+                },
+                'FunctionDeclaration': {
+                    parameters: 2
+                },
+                'FunctionExpression': {
+                    parameters: 2
+                },
+                'MemberExpression': 'off',
+                'SwitchCase': 0
+            }
+        ],
+        '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

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

.gitattributes

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

.gitignore

@@ -1,9 +1,71 @@
-node_modules
 *.swp
-.idea/
-*.iml
 .*.tmp
 deploy-local.sh
-libs/app.bundle.*
+libs/
 all.css
+*css.map
 .remote-sync.json
+.sync-config.cson
+
+# The following are automatically generated by the react-native command line
+# utility (either with the init or upgrade option which pull in the latest
+# template files recommended by Facebook for React Native).
+
+# OSX
+#
+.DS_Store
+
+# Xcode
+#
+build/
+*.pbxuser
+!default.pbxuser
+*.mode1v3
+!default.mode1v3
+*.mode2v3
+!default.mode2v3
+*.perspectivev3
+!default.perspectivev3
+xcuserdata
+*.xccheckout
+*.moved-aside
+DerivedData
+*.hmap
+*.ipa
+*.xcuserstate
+project.xcworkspace
+
+# Android/IntelliJ
+#
+build/
+.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

.jshintignore

@@ -1,8 +0,0 @@
-node_modules
-libs
-debian
-analytics.js
-
-modules/xmpp/strophe.emuc.js
-modules/UI/prezi/Prezi.js
-modules/RTC/adapter.screenshare.js

.jshintrc

@@ -1,19 +0,0 @@
-{
-    // 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.
-}

.watchmanconfig

@@ -0,0 +1 @@
+{}

CONTRIBUTING.md

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

ConferenceEvents.js

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

Makefile

@@ -1,34 +1,59 @@
-NPM = npm
-BROWSERIFY = ./node_modules/.bin/browserify
-UGLIFYJS = ./node_modules/.bin/uglifyjs
-EXORCIST = ./node_modules/.bin/exorcist
+BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css
 DEPLOY_DIR = libs
-BROWSERIFY_FLAGS = -d
+LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
+NODE_SASS = ./node_modules/.bin/node-sass
+NPM = npm
 OUTPUT_DIR = .
+STYLES_BUNDLE = css/all.bundle.css
+STYLES_DESTINATION = css/all.css
+STYLES_MAIN = css/main.scss
+WEBPACK = ./node_modules/.bin/webpack
 
-all: compile uglify deploy clean
+all: compile deploy clean
 
 compile:
-	$(NPM) update && $(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
+	$(WEBPACK) -p
 
 clean:
-	rm -f $(OUTPUT_DIR)/app.bundle.*
+	rm -fr $(BUILD_DIR)
 
-deploy:
-	mkdir -p $(DEPLOY_DIR) && \
-	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map $(DEPLOY_DIR) && \
-	(cd css; cat $(CSS_FILES)) | $(CLEANCSS) > css/all.css && \
+deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local
+
+deploy-init:
+	mkdir -p $(DEPLOY_DIR)
+
+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)
+
+deploy-lib-jitsi-meet:
+	cp \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(DEPLOY_DIR)
+
+deploy-css:
+	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
+	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
+	rm $(STYLES_BUNDLE)
+
+deploy-local:
 	([ ! -x deploy-local.sh ] || ./deploy-local.sh)
 
-uglify:
-	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/app.bundle.js -o $(OUTPUT_DIR)/app.bundle.min.js --source-map $(OUTPUT_DIR)/app.bundle.min.map --in-source-map $(OUTPUT_DIR)/app.bundle.js.map
-
-
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
-	cp -r analytics.js external_api.js favicon.ico fonts images index.html interface_config.js libs plugin.*html sounds title.html unsupported_browser.html LICENSE config.js lang source_package/jitsi-meet && \
+	cp -r *.js *.html connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
 	cp css/all.css source_package/jitsi-meet/css && \
 	(cd source_package ; tar cjf ../jitsi-meet.tar.bz2 jitsi-meet) && \
 	rm -rf source_package

README.md

@@ -1,10 +1,10 @@
-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 .
 
-Jitsi Meet allows for very efficient collaboration. It allows users to stream their desktop or only some windows. It also supports shared document editing with Etherpad and remote presentations with Prezi. 
+Jitsi Meet allows for very efficient collaboration. It allows users to stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
 ## Installation
 
@@ -12,9 +12,23 @@ 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
 
-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). 
+Node.js >= 6 is required.
 
 On Debian/Ubuntu systems, the required packages can be installed with:
 ```
@@ -28,9 +42,66 @@ To build the Jitsi Meet application, just type
 make
 ```
 
-## Discuss
-Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on Github. 
+## 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
+"lib-jitsi-meet": "jitsi/lib-jitsi-meet",
+```
+
+To work with local copy you must change the path to:
+```json
+"lib-jitsi-meet": "file:///Users/name/local-lib-jitsi-meet-copy",
+```
+
+To make the project you must force it to take the sources as 'npm update' will not do it.
+```
+npm install lib-jitsi-meet --force && make
+```
+
+Or if you are making only changes to the library:
+```
+npm install lib-jitsi-meet --force && make deploy-lib-jitsi-meet
+```
+
+Alternative way is to use [npm link](https://docs.npmjs.com/cli/link).
+It allows to link `lib-jitsi-meet` dependency to local source in few steps:
+
+```bash
+cd lib-jitsi-meet
+
+# create global symlink for lib-jitsi-meet package
+npm link
+
+cd ../jitsi-meet
+
+# create symlink from the local node_modules folder to the global lib-jitsi-meet symlink
+npm link lib-jitsi-meet
+```
+
+So now after changes in local `lib-jitsi-meet` repository you can rebuild it with `npm run install` and your `jitsi-meet` repository will use that modified library.
+Note: when using node version 4.x, the make file of jitsi-meet do npm update which will delete the link, no longer the case with version 6.x.
+
+If you do not want to use local repository anymore you should run
+```bash
+cd jitsi-meet
+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).
 
 ## Acknowledgements
 
-Jitsi Meet started out as a sample conferencing application using Jitsi Videobridge. It was originally developed by then ESTOS' developer Philipp Hancke who then contributed it to the community where development continues with joint forces! 
+Jitsi Meet started out as a sample conferencing application using Jitsi Videobridge. It was originally developed by then ESTOS' developer Philipp Hancke who then contributed it to the community where development continues with joint forces!

analytics.js

@@ -1,5 +1,10 @@
+/* global ga */
+/* eslint-disable indent */
+
 (function (ctx) {
   function Analytics() {
+    /* eslint-disable semi */
+
     /**
      * Google Analytics
      */
@@ -8,11 +13,26 @@
     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
     ga('create', 'UA-319188-14', 'jit.si');
     ga('send', 'pageview');
+
+    /* eslint-enable semi */
   }
 
   Analytics.prototype.sendEvent = function (action, data) {
-    ga('send', 'event', 'jit.si', action);
+    // 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 || "";
+
+    ga('send', 'event', 'jit.si',
+        action + '.' + data.browserName, label, value);
   };
 
-  ctx.Analytics = Analytics;
-}(window));
+  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));

android/README.md

@@ -0,0 +1,288 @@
+# 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. ```bash
+   ./gradlew :sdk:publish
+   cd ../
+   ```
+
+## 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/build.gradle

@@ -0,0 +1,40 @@
+apply plugin: 'com.android.application'
+
+android {
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    defaultConfig {
+        applicationId 'org.jitsi.meet'
+        versionCode Integer.parseInt("${version}")
+        versionName "1.9.${version}"
+
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+
+        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/**'
+        }
+    }
+    buildTypes {
+        release {
+            minifyEnabled false
+            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
+        }
+    }
+}
+
+dependencies {
+    compile fileTree(dir: 'libs', include: ['*.jar'])
+
+    implementation project(':sdk')
+}

android/app/proguard-rules.pro

@@ -0,0 +1,66 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Disabling obfuscation is useful if you collect stack traces from production crashes
+# (unless you are using a system that supports de-obfuscate the stack traces).
+-dontobfuscate
+
+# React Native
+
+# Keep our interfaces so they can be used by other ProGuard rules.
+# See http://sourceforge.net/p/proguard/bugs/466/
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.DoNotStrip
+-keep,allowobfuscation @interface com.facebook.proguard.annotations.KeepGettersAndSetters
+-keep,allowobfuscation @interface com.facebook.common.internal.DoNotStrip
+
+# Do not strip any method/class that is annotated with @DoNotStrip
+-keep @com.facebook.proguard.annotations.DoNotStrip class *
+-keep @com.facebook.common.internal.DoNotStrip class *
+-keepclassmembers class * {
+    @com.facebook.proguard.annotations.DoNotStrip *;
+    @com.facebook.common.internal.DoNotStrip *;
+}
+
+-keepclassmembers @com.facebook.proguard.annotations.KeepGettersAndSetters class * {
+  void set*(***);
+  *** get*();
+}
+
+-keep class * extends com.facebook.react.bridge.JavaScriptModule { *; }
+-keep class * extends com.facebook.react.bridge.NativeModule { *; }
+-keepclassmembers,includedescriptorclasses class * { native <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.UIProp <fields>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactProp <methods>; }
+-keepclassmembers class *  { @com.facebook.react.uimanager.annotations.ReactPropGroup <methods>; }
+
+-dontwarn com.facebook.react.**
+
+# okhttp
+
+-keepattributes Signature
+-keepattributes *Annotation*
+-keep class okhttp3.** { *; }
+-keep interface okhttp3.** { *; }
+-dontwarn okhttp3.**
+
+# okio
+
+-keep class sun.misc.Unsafe { *; }
+-dontwarn java.nio.file.*
+-dontwarn org.codehaus.mojo.animal_sniffer.IgnoreJRERequirement
+-dontwarn okio.**

android/app/src/main/AndroidManifest.xml

@@ -0,0 +1,38 @@
+<manifest
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.jitsi.meet">
+  <application
+      android:allowBackup="true"
+      android:icon="@mipmap/ic_launcher"
+      android:label="@string/app_name"
+      android:theme="@style/AppTheme">
+    <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>
+</manifest>

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

@@ -0,0 +1,105 @@
+/*
+ * 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/strings.xml

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

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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,157 @@
+// 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-beta7'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files.
+    }
+}
+
+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 {
+    compileSdkVersion = 25
+    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
+            }
+        }
+    }
+}

android/gradle.properties

@@ -0,0 +1,21 @@
+# Project-wide Gradle settings.
+
+# IDE (e.g. Android Studio) users:
+# Gradle settings configured through the IDE *will override*
+# any settings specified in this file.
+
+# For more details on how to configure your build environment visit
+# http://www.gradle.org/docs/current/userguide/build_environment.html
+
+# Specifies the JVM arguments used for the daemon process.
+# The setting is particularly useful for tweaking memory settings.
+# Default value: -Xmx10248m -XX:MaxPermSize=256m
+# org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryError -Dfile.encoding=UTF-8
+
+# When configured, Gradle will run in incubating parallel mode.
+# This option should only be used with decoupled projects. More details, visit
+# http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
+# org.gradle.parallel=true
+
+android.useDeprecatedNdk=true
+version=1

android/gradle/wrapper/gradle-wrapper.properties

@@ -0,0 +1,6 @@
+#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

android/gradlew

@@ -0,0 +1,164 @@
+#!/usr/bin/env bash
+
+##############################################################################
+##
+##  Gradle start up script for UN*X
+##
+##############################################################################
+
+# Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+DEFAULT_JVM_OPTS=""
+
+APP_NAME="Gradle"
+APP_BASE_NAME=`basename "$0"`
+
+# Use the maximum available, or set MAX_FD != -1 to use that value.
+MAX_FD="maximum"
+
+warn ( ) {
+    echo "$*"
+}
+
+die ( ) {
+    echo
+    echo "$*"
+    echo
+    exit 1
+}
+
+# OS specific support (must be 'true' or 'false').
+cygwin=false
+msys=false
+darwin=false
+case "`uname`" in
+  CYGWIN* )
+    cygwin=true
+    ;;
+  Darwin* )
+    darwin=true
+    ;;
+  MINGW* )
+    msys=true
+    ;;
+esac
+
+# For Cygwin, ensure paths are in UNIX format before anything is touched.
+if $cygwin ; then
+    [ -n "$JAVA_HOME" ] && JAVA_HOME=`cygpath --unix "$JAVA_HOME"`
+fi
+
+# Attempt to set APP_HOME
+# Resolve links: $0 may be a link
+PRG="$0"
+# Need this for relative symlinks.
+while [ -h "$PRG" ] ; do
+    ls=`ls -ld "$PRG"`
+    link=`expr "$ls" : '.*-> \(.*\)$'`
+    if expr "$link" : '/.*' > /dev/null; then
+        PRG="$link"
+    else
+        PRG=`dirname "$PRG"`"/$link"
+    fi
+done
+SAVED="`pwd`"
+cd "`dirname \"$PRG\"`/" >&-
+APP_HOME="`pwd -P`"
+cd "$SAVED" >&-
+
+CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+
+# Determine the Java command to use to start the JVM.
+if [ -n "$JAVA_HOME" ] ; then
+    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
+        # IBM's JDK on AIX uses strange locations for the executables
+        JAVACMD="$JAVA_HOME/jre/sh/java"
+    else
+        JAVACMD="$JAVA_HOME/bin/java"
+    fi
+    if [ ! -x "$JAVACMD" ] ; then
+        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+    fi
+else
+    JAVACMD="java"
+    which java >/dev/null 2>&1 || die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+
+Please set the JAVA_HOME variable in your environment to match the
+location of your Java installation."
+fi
+
+# Increase the maximum file descriptors if we can.
+if [ "$cygwin" = "false" -a "$darwin" = "false" ] ; then
+    MAX_FD_LIMIT=`ulimit -H -n`
+    if [ $? -eq 0 ] ; then
+        if [ "$MAX_FD" = "maximum" -o "$MAX_FD" = "max" ] ; then
+            MAX_FD="$MAX_FD_LIMIT"
+        fi
+        ulimit -n $MAX_FD
+        if [ $? -ne 0 ] ; then
+            warn "Could not set maximum file descriptor limit: $MAX_FD"
+        fi
+    else
+        warn "Could not query maximum file descriptor limit: $MAX_FD_LIMIT"
+    fi
+fi
+
+# For Darwin, add options to specify how the application appears in the dock
+if $darwin; then
+    GRADLE_OPTS="$GRADLE_OPTS \"-Xdock:name=$APP_NAME\" \"-Xdock:icon=$APP_HOME/media/gradle.icns\""
+fi
+
+# For Cygwin, switch paths to Windows format before running java
+if $cygwin ; then
+    APP_HOME=`cygpath --path --mixed "$APP_HOME"`
+    CLASSPATH=`cygpath --path --mixed "$CLASSPATH"`
+
+    # We build the pattern for arguments to be converted via cygpath
+    ROOTDIRSRAW=`find -L / -maxdepth 1 -mindepth 1 -type d 2>/dev/null`
+    SEP=""
+    for dir in $ROOTDIRSRAW ; do
+        ROOTDIRS="$ROOTDIRS$SEP$dir"
+        SEP="|"
+    done
+    OURCYGPATTERN="(^($ROOTDIRS))"
+    # Add a user-defined pattern to the cygpath arguments
+    if [ "$GRADLE_CYGPATTERN" != "" ] ; then
+        OURCYGPATTERN="$OURCYGPATTERN|($GRADLE_CYGPATTERN)"
+    fi
+    # Now convert the arguments - kludge to limit ourselves to /bin/sh
+    i=0
+    for arg in "$@" ; do
+        CHECK=`echo "$arg"|egrep -c "$OURCYGPATTERN" -`
+        CHECK2=`echo "$arg"|egrep -c "^-"`                                 ### Determine if an option
+
+        if [ $CHECK -ne 0 ] && [ $CHECK2 -eq 0 ] ; then                    ### Added a condition
+            eval `echo args$i`=`cygpath --path --ignore --mixed "$arg"`
+        else
+            eval `echo args$i`="\"$arg\""
+        fi
+        i=$((i+1))
+    done
+    case $i in
+        (0) set -- ;;
+        (1) set -- "$args0" ;;
+        (2) set -- "$args0" "$args1" ;;
+        (3) set -- "$args0" "$args1" "$args2" ;;
+        (4) set -- "$args0" "$args1" "$args2" "$args3" ;;
+        (5) set -- "$args0" "$args1" "$args2" "$args3" "$args4" ;;
+        (6) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" ;;
+        (7) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" ;;
+        (8) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" ;;
+        (9) set -- "$args0" "$args1" "$args2" "$args3" "$args4" "$args5" "$args6" "$args7" "$args8" ;;
+    esac
+fi
+
+# Split up the JVM_OPTS And GRADLE_OPTS values into an array, following the shell quoting and substitution rules
+function splitJvmOpts() {
+    JVM_OPTS=("$@")
+}
+eval splitJvmOpts $DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS
+JVM_OPTS[${#JVM_OPTS[*]}]="-Dorg.gradle.appname=$APP_BASE_NAME"
+
+exec "$JAVACMD" "${JVM_OPTS[@]}" -classpath "$CLASSPATH" org.gradle.wrapper.GradleWrapperMain "$@"

android/gradlew.bat

@@ -0,0 +1,90 @@
+@if "%DEBUG%" == "" @echo off
+@rem ##########################################################################
+@rem
+@rem  Gradle startup script for Windows
+@rem
+@rem ##########################################################################
+
+@rem Set local scope for the variables with windows NT shell
+if "%OS%"=="Windows_NT" setlocal
+
+@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
+set DEFAULT_JVM_OPTS=
+
+set DIRNAME=%~dp0
+if "%DIRNAME%" == "" set DIRNAME=.
+set APP_BASE_NAME=%~n0
+set APP_HOME=%DIRNAME%
+
+@rem Find java.exe
+if defined JAVA_HOME goto findJavaFromJavaHome
+
+set JAVA_EXE=java.exe
+%JAVA_EXE% -version >NUL 2>&1
+if "%ERRORLEVEL%" == "0" goto init
+
+echo.
+echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:findJavaFromJavaHome
+set JAVA_HOME=%JAVA_HOME:"=%
+set JAVA_EXE=%JAVA_HOME%/bin/java.exe
+
+if exist "%JAVA_EXE%" goto init
+
+echo.
+echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME%
+echo.
+echo Please set the JAVA_HOME variable in your environment to match the
+echo location of your Java installation.
+
+goto fail
+
+:init
+@rem Get command-line arguments, handling Windowz variants
+
+if not "%OS%" == "Windows_NT" goto win9xME_args
+if "%@eval[2+2]" == "4" goto 4NT_args
+
+:win9xME_args
+@rem Slurp the command line arguments.
+set CMD_LINE_ARGS=
+set _SKIP=2
+
+:win9xME_args_slurp
+if "x%~1" == "x" goto execute
+
+set CMD_LINE_ARGS=%*
+goto execute
+
+:4NT_args
+@rem Get arguments from the 4NT Shell from JP Software
+set CMD_LINE_ARGS=%$
+
+:execute
+@rem Setup the command line
+
+set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+
+@rem Execute Gradle
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %CMD_LINE_ARGS%
+
+:end
+@rem End local scope for the variables with windows NT shell
+if "%ERRORLEVEL%"=="0" goto mainEnd
+
+:fail
+rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
+rem the _cmd.exe /c_ return code!
+if  not "" == "%GRADLE_EXIT_CONSOLE%" exit 1
+exit /b 1
+
+:mainEnd
+if "%OS%"=="Windows_NT" endlocal
+
+:omega

android/keystores/BUCK

@@ -0,0 +1,8 @@
+keystore(
+  name = 'debug',
+  store = 'debug.keystore',
+  properties = 'debug.keystore.properties',
+  visibility = [
+    'PUBLIC',
+  ],
+)

android/keystores/debug.keystore.properties

@@ -0,0 +1,4 @@
+key.store=debug.keystore
+key.alias=androiddebugkey
+key.store.password=android
+key.alias.password=android

android/sdk/build.gradle

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,25 @@
+# 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

@@ -0,0 +1,29 @@
+<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

@@ -0,0 +1,39 @@
+/**
+ * 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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,349 @@
+/*
+ * 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

@@ -0,0 +1,205 @@
+/*
+ * 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

@@ -0,0 +1,65 @@
+/*
+ * 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

@@ -0,0 +1,172 @@
+/*
+ * 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

@@ -0,0 +1,246 @@
+/*
+ * 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

@@ -0,0 +1,437 @@
+/*
+ * 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")
+                .setJSMainModuleName("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);
+
+        // TODO: ReactRootView#setAppProperties is only available on React
+        // Native 0.45, so destroy the current root view and create a new one.
+        dispose();
+
+        reactRootView = new ReactRootView(getContext());
+        reactRootView.startReactApplication(reactInstanceManager, "App", props);
+        reactRootView.setBackgroundColor(BACKGROUND_COLOR);
+        addView(reactRootView);
+    }
+
+    /**
+     * 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

@@ -0,0 +1,49 @@
+/*
+ * 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

@@ -0,0 +1,71 @@
+/*
+ * 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

@@ -0,0 +1,118 @@
+/*
+ * 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

@@ -0,0 +1,45 @@
+/*
+ * 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<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    @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

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

android/settings.gradle

@@ -0,0 +1,15 @@
+rootProject.name = 'jitsi-meet'
+
+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 ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')
+include ':react-native-webrtc'
+project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')

app.js

@@ -1,106 +1,57 @@
-/* jshint -W117 */
 /* application specific logic */
 
-require("jquery");
-require("jquery-ui");
-require("strophe");
-require("strophe-disco");
-require("strophe-caps");
-require("tooltip");
-require("popover");
-window.toastr = require("toastr");
-require("jQuery-Impromptu");
-require("autosize");
+import 'jquery';
+import 'jquery-contextmenu';
+import 'jquery-ui';
+import 'strophe';
+import 'strophe-disco';
+import 'jQuery-Impromptu';
+import 'autosize';
 
-var APP =
-{
-    init: function () {
-        this.UI = require("./modules/UI/UI");
-        this.API = require("./modules/API/API");
-        this.connectionquality =
-            require("./modules/connectionquality/connectionquality");
-        this.statistics = require("./modules/statistics/statistics");
-        this.RTC = require("./modules/RTC/RTC");
-        this.desktopsharing =
-            require("./modules/desktopsharing/desktopsharing");
-        this.xmpp = require("./modules/xmpp/xmpp");
-        this.keyboardshortcut =
-            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
-        this.settings = require("./modules/settings/Settings");
-        //this.DTMF = require("./modules/DTMF/DTMF");
-        this.members = require("./modules/members/MemberList");
-        this.configFetch = require("./modules/config/HttpConfigFetch");
-    }
+import 'aui';
+import 'aui-experimental';
+import 'aui-css';
+import 'aui-experimental-css';
+
+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';
+
+window.APP = {
+    API,
+    conference,
+
+    // 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
+    // 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
+    // finish the connect process when the attach data or error is received.
+    connect: {
+        handler: null,
+        status: 'initialized'
+    },
+
+    // Used for automated performance tests.
+    connectionTimes: {
+        'index.loaded': window.indexLoadedTime
+    },
+
+    keyboardshortcut,
+    remoteControl,
+    settings,
+    translation,
+    UI
 };
 
-function init() {
-
-    APP.desktopsharing.init();
-    APP.RTC.start();
-    APP.xmpp.start();
-    APP.statistics.start();
-    APP.connectionquality.init();
-    APP.keyboardshortcut.init();
-    APP.members.start();
-}
-
-/**
- * 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() {
-    var roomName = APP.UI.getRoomNode();
-
-    if (config.configLocation) {
-        APP.configFetch.obtainConfig(
-            config.configLocation, roomName,
-            // Get config result callback
-            function(success, error) {
-                if (success) {
-                    console.log("(TIME) configuration fetched:\t",
-                                window.performance.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 () {
-    console.log("(TIME) document ready:\t", window.performance.now());
-
-    var URLProcessor = require("./modules/config/URLProcessor");
-    URLProcessor.setConfigParametersFromUrl();
-    APP.init();
-
-    APP.translation.init();
-
-    if(APP.API.isEnabled())
-        APP.API.init();
-
-    APP.UI.start(obtainConfigAndInit);
-
-});
-
-$(window).bind('beforeunload', function () {
-    if(APP.API.isEnabled())
-        APP.API.dispose();
-});
-
-module.exports = APP;
-
+// 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';

config.js

@@ -1,72 +1,278 @@
-/* jshint -W101 */
-var config = {
-//    configLocation: './config.json', // see ./modules/HttpConfigFetch.js
-    hosts: {
-        domain: '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
-        bridge: 'jitsi-videobridge.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
+var config = { // eslint-disable-line no-unused-vars
+    // 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
+    //
+
+    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',
+    },
+
+    // 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,
+
+    // 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,
+
+    // 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: 'diibjkoicjeejcmhdnailmkgecihlobk',
+    desktopSharingChromeExtId: null,
+
+    // Whether desktop sharing should be disabled on Chrome.
+    desktopSharingChromeDisabled: true,
+
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: ['screen', 'window'],
+    desktopSharingChromeSources: ['screen', 'window', 'tab'],
+
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
     // 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: true,
+    desktopSharingFirefoxDisabled: false,
+
     // The maximum version of Firefox which requires a jidesha extension.
     // Example: if set to 41, we will require the extension for Firefox versions
     // up to and including 41. On Firefox 42 and higher, we will run without the
     // extension.
     // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: -1,
+    desktopSharingFirefoxMaxVersionExtRequired: 51,
+
     // The URL to the Firefox extension for desktop sharing.
     desktopSharingFirefoxExtensionURL: null,
 
-    // 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,
+    // Try to start calls with screen-sharing instead of camera video.
+    //startScreenSharing: false,
 
-    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,
-    adaptiveSimulcast: false,
-    enableRecording: 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.
     enableWelcomePage: true,
-    enableSimulcast: false, // blocks FF support
-    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.'*/
+
+    // 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 minimum value a video's height (or width, whichever is smaller) needs
+    // to be in order to be considered high-definition.
+    minHDHeight: 540,
+
+    // Default language for the user interface.
+    //defaultLanguage: 'en',
+
+    // If true all users without a 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: '',
+
+
+    // 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
+
+        // 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"
+    }
 };

connection.js

@@ -0,0 +1,160 @@
+/* global APP, JitsiMeetJS, config */
+
+import AuthHandler from './modules/UI/authentication/AuthHandler';
+import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
+
+import {
+    connectionEstablished,
+    connectionFailed
+} from './react/features/base/connection';
+import {
+    isFatalJitsiConnectionError
+} from './react/features/base/lib-jitsi-meet';
+
+const ConnectionEvents = JitsiMeetJS.events.connection;
+const ConnectionErrors = JitsiMeetJS.errors.connection;
+const logger = require("jitsi-meet-logger").getLogger(__filename);
+
+/**
+ * Checks if we have data to use attach instead of connect. If we have the data
+ * executes attach otherwise check if we have to wait for the data. If we have
+ * to wait for the attach data we are setting handler to APP.connect.handler
+ * which is going to be called when the attach data is received otherwise
+ * executes connect.
+ *
+ * @param {string} [id] user id
+ * @param {string} [password] password
+ * @param {string} [roomName] the name of the conference.
+ */
+function checkForAttachParametersAndConnect(id, password, connection) {
+    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});
+            return;
+        }
+
+        var attachOptions = window.XMPPAttachInfo.data;
+        if(attachOptions) {
+            connection.attach(attachOptions);
+            delete window.XMPPAttachInfo.data;
+        } else {
+            connection.connect({id, password});
+        }
+    } else {
+        APP.connect.status = "ready";
+        APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
+            id, password, connection);
+    }
+}
+
+/**
+ * Try to open connection using provided credentials.
+ * @param {string} [id]
+ * @param {string} [password]
+ * @param {string} [roomName]
+ * @returns {Promise<JitsiConnection>} connection if
+ * everything is ok, else error.
+ */
+function connect(id, password, roomName) {
+    const connectionConfig = Object.assign({}, config);
+    const { issuer, jwt } = APP.store.getState()['features/jwt'];
+
+    connectionConfig.bosh += '?room=' + roomName;
+
+    let connection
+        = new JitsiMeetJS.JitsiConnection(
+            null,
+            jwt && issuer && issuer !== 'anonymous' ? jwt : undefined,
+            connectionConfig);
+
+    return new Promise(function (resolve, reject) {
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_ESTABLISHED,
+            handleConnectionEstablished);
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED,
+            handleConnectionFailed);
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED,
+            connectionFailedHandler);
+
+        function connectionFailedHandler(error, message, credentials) {
+            APP.store.dispatch(
+                connectionFailed(connection, error, message, credentials));
+
+            if (isFatalJitsiConnectionError(error)) {
+                connection.removeEventListener(
+                    ConnectionEvents.CONNECTION_FAILED,
+                    connectionFailedHandler);
+            }
+        }
+
+        function unsubscribe() {
+            connection.removeEventListener(
+                ConnectionEvents.CONNECTION_ESTABLISHED,
+                handleConnectionEstablished);
+            connection.removeEventListener(
+                ConnectionEvents.CONNECTION_FAILED,
+                handleConnectionFailed);
+        }
+
+        function handleConnectionEstablished() {
+            APP.store.dispatch(connectionEstablished(connection));
+            unsubscribe();
+            resolve(connection);
+        }
+
+        function handleConnectionFailed(err) {
+            unsubscribe();
+            logger.error("CONNECTION FAILED:", err);
+            reject(err);
+        }
+
+        checkForAttachParametersAndConnect(id, password, connection);
+    });
+}
+
+/**
+ * Open JitsiConnection using provided credentials.
+ * If retry option is true it will show auth dialog on PASSWORD_REQUIRED error.
+ *
+ * @param {object} options
+ * @param {string} [options.id]
+ * @param {string} [options.password]
+ * @param {string} [options.roomName]
+ * @param {boolean} [retry] if we should show auth dialog
+ * on PASSWORD_REQUIRED error.
+ *
+ * @returns {Promise<JitsiConnection>}
+ */
+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;
+    }
+    if (passwordOverride && passwordOverride.length > 0) {
+        password = passwordOverride;
+    }
+
+    return connect(id, password, roomName).catch(err => {
+        if (retry) {
+            const { issuer, jwt } = APP.store.getState()['features/jwt'];
+
+            if (err === ConnectionErrors.PASSWORD_REQUIRED
+                    && (!jwt || issuer === 'anonymous')) {
+                return AuthHandler.requestAuth(roomName, connect);
+            }
+        }
+
+        throw err;
+    });
+}

connection_optimization/.eslintrc.js

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

connection_optimization/do_external_connect.js

@@ -0,0 +1,82 @@
+/* global config, createConnectionExternally */
+
+import getRoomName from '../react/features/base/config/getRoomName';
+import parseURLParams from '../react/features/base/config/parseURLParams';
+
+/**
+ * Implements external connect using createConnectionExternally function defined
+ * in external_connect.js for Jitsi Meet. Parses the room name and JSON Web
+ * Token (JWT) from the URL and executes createConnectionExternally.
+ *
+ * NOTE: If you are using lib-jitsi-meet without Jitsi Meet, you should use this
+ * file as reference only because the implementation is Jitsi Meet-specific.
+ *
+ * NOTE: For optimal results this file should be included right after
+ * external_connect.js.
+ */
+
+if (typeof createConnectionExternally === 'function') {
+    // URL params have higher proirity than config params.
+    let url
+        = parseURLParams(window.location, true, 'hash')[
+                'config.externalConnectUrl']
+            || config.externalConnectUrl;
+    let roomName;
+
+    if (url && (roomName = getRoomName())) {
+        url += `?room=${roomName}`;
+
+        const token = parseURLParams(window.location, true, 'search').jwt;
+
+        if (token) {
+            url += `&token=${token}`;
+        }
+
+        createConnectionExternally(
+            url,
+            connectionInfo => {
+                // Sets that global variable to be used later by connect method
+                // in connection.js.
+                window.XMPPAttachInfo = {
+                    status: 'success',
+                    data: connectionInfo
+                };
+                checkForConnectHandlerAndConnect();
+            },
+            errorCallback);
+    } else {
+        errorCallback();
+    }
+} else {
+    errorCallback();
+}
+
+/**
+ * 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();
+}
+
+/**
+ * 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);
+
+    // Sets that global variable to be used later by connect method in
+    // connection.js.
+    window.XMPPAttachInfo = {
+        status: 'error'
+    };
+    checkForConnectHandlerAndConnect();
+}

css/404.scss

@@ -0,0 +1,14 @@
+.error_page {
+    width: 60%;
+    margin: 20% auto;
+    text-align: center;
+
+    h2 {
+        font-size: 36px;
+    }
+
+    &__message {
+        font-size: 24px;
+        margin-top: 20px;
+    }
+}

css/_animations.scss

@@ -0,0 +1,69 @@
+/**
+* Project animations
+**/
+
+/**
+ *   Slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+    0% { transform: translateX(-100%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-100%); }
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+/**
+ *   Slide in / out animation for main toolbar.
+ */
+
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+/**
+ *   Slide in animation for extended toolbar (inner) panel.
+ */
+
+// FIX: Can't use percentage because of breaking animation when width is changed
+// (100% of 0 is also zero) Extracted this to config variable.
+@include keyframes(slideInExt) {
+    from { left: -$sidebarWidth; }
+    to   { left: 0; }
+}
+
+@include keyframes(slideOutExt) {
+    from { left: 0; }
+    to   { left: -$sidebarWidth; }
+}
+
+/**
+*   Slide in animation for extended toolbar container
+**/
+
+@include keyframes(slideOutExtContainer) {
+    from { width: $sidebarWidth; }
+    to { width: 0; }
+}
+
+@include keyframes(slideInExtContainer) {
+    from { width: 0; }
+    to { width: $sidebarWidth; }
+}

css/_base.scss

@@ -0,0 +1,157 @@
+/**
+ * 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%;
+    font-size: 12px;
+    font-weight: 400;
+    overflow: hidden;
+    color: $defaultColor;
+    background: $defaultBackground;
+    &.filmstrip-only {
+        background: transparent;
+    }
+}
+
+p {
+    margin: 0;
+}
+
+body, input, textarea, keygen, select, button {
+    font-family: $baseFontFamily !important;
+}
+
+#nowebrtc {
+    display:none;
+}
+
+.no-fa-video-camera, .fa-microphone-slash {
+    color: #636363;
+}
+
+button, input, select, textarea {
+    margin: 0;
+    vertical-align: baseline;
+    font-size: 1em;
+}
+
+button, select, input[type="button"],
+input[type="reset"], input[type="submit"] {
+    cursor: pointer;
+}
+
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: none;
+    line-height: 1.5em;
+}
+
+input[type='text'], input[type='password'], textarea {
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
+button {
+    color: #FFF;
+    background-color: $buttonBackground;
+    border-radius: $borderRadius;
+
+    &.no-icon {
+        padding: 0 1em;
+    }
+}
+
+button,
+form {
+    display: block;
+}
+
+.watermark {
+    display: block;
+    position: absolute;
+    top: 15;
+    width: $watermarkWidth;
+    height: $watermarkHeight;
+    background-size: contain;
+    background-repeat: no-repeat;
+    z-index: $zindex2;
+}
+
+.leftwatermark {
+    left: $defaultToolbarSize;
+    margin-left: 10px;
+    background-image: url($defaultWatermarkLink);
+    background-position: center left;
+}
+
+.rightwatermark {
+    right: 15;
+    background-position: center right;
+}
+
+.poweredby {
+    position: absolute;
+    left: 25;
+    bottom: 7;
+    font-size: 11pt;
+    color: rgba(255,255,255,.50);
+    text-decoration: none;
+    z-index: $poweredByZ;
+}
+
+.connected {
+    color: #21B9FC;
+    font-size: 12px;
+}
+
+.lastN, .disconnected {
+    color: #a3a3a3;
+    font-size: 12px;
+}
+
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+    visibility: visible;
+}
+
+#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

@@ -1,9 +1,4 @@
-#chatspace {
-    background-color: black;
-    border-left: 1px solid #424242;
-}
-
-#chatspace * {
+#chat_container * {
     -webkit-user-select: text;
     user-select: text;
 }
@@ -18,9 +13,50 @@
     font-size: 10pt;
     width: 100%;
     height: 90%;
-    overflow-y: scroll;
-    overflow-x: hidden;
+    overflow: auto;
     word-wrap: break-word;
+
+    a:link {
+        color: rgb(184, 184, 184);
+    }
+
+    a:visited {
+        color: white;
+    }
+
+    a:hover {
+        color: rgb(213, 213, 213);
+    }
+
+    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 {
+    visibility: visible;
 }
 
 .localuser {
@@ -61,6 +97,10 @@
     box-shadow: none;
 }
 
+#chat_container.is-conversation-mode #usermsg {
+    visibility: visible;
+}
+
 #nickname {
     position: absolute;
     text-align: center;
@@ -72,6 +112,10 @@
     width: 95%;
 }
 
+#chat_container.is-conversation-mode #nickname {
+    visibility: hidden;
+}
+
 #nickinput {
     margin-top: 20px;
     font-size: 14px;
@@ -81,33 +125,23 @@
     color: #a7a7a7;
 }
 
-#unreadMessages {
-    font-size: 8px;
-    position: absolute;
-    left: 46%;
-    top: 27%
-}
-
-#bottomUnreadMessages {
-    top: 5px;
-    left: 10px;
-    position: absolute;
-    font-size: 8px;
-}
-
-#chatspace .username {
+#chat_container .username {
     float: left;
     padding-left: 5px;
     font-weight: bold;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    width: 95%;
+    overflow: hidden;
 }
 
-#chatspace .timestamp {
+#chat_container .timestamp {
     float: right;
     padding-right: 5px;
     font-size: 11px;
 }
 
-#chatspace .usermessage {
+#chat_container .usermessage {
     padding-top: 20px;
     padding-left: 5px;
 }
@@ -121,7 +155,7 @@
 .chatmessage {
     background: #3a3a3a;
     width: 93%;
-    margin-left: 5%;
+    margin-left: 9px;
     margin-right: auto;
     border-radius: 5px;
     border-top-left-radius: 0px;
@@ -168,6 +202,10 @@
     visibility: hidden;
 }
 
+#chat_container.is-conversation-mode #smileysarea {
+    visibility: visible;
+}
+
 #smileysContainer {
     display: none;
     position: absolute;
@@ -196,44 +234,6 @@
     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;
 }
-
-a:link {
-    color: rgb(184, 184, 184);
-}
-
-a:visited {
-    color: white;
-}
-
-a:hover {
-    color: rgb(213, 213, 213);
-}
-
-a:active {
-    color: black;
-}

css/_connection-info.scss

@@ -0,0 +1,57 @@
+%connection-info {
+    font-size: 12px;
+    font-weight: 400;
+    color: $modalTextColor;
+
+    td {
+        padding: 2px 0;
+    }
+}
+
+.connection-info
+{
+    @extend %connection-info;
+
+    /**
+     * Apply negative margin to reduce the appearance of padding in AtlasKit
+     * InlineDialog.
+     */
+    margin: -15px;
+
+    > table {
+        white-space: nowrap;
+        @extend %connection-info;
+    }
+
+    td:nth-child(n-1) {
+        padding-left: 5px;
+    }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+        color: $downloadConnectionIconColor;
+    }
+
+    &__status
+    {
+        font-weight: bold;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+        color: $uploadConnectionIconColor;
+    }
+
+    .showmore {
+        display: block;
+        margin: 10px auto;
+        text-align: center;
+        width: 90px;
+    }
+}

css/_contact_list.scss

@@ -0,0 +1,64 @@
+#contacts_container {
+    cursor: default;
+
+    #contacts {
+        font-size: 12px;
+        bottom: 0px;
+        margin: 0;
+        margin-top: 12px;
+        padding: 0px;
+        width: 100%;
+    }
+
+    .clickable {
+        cursor: pointer;
+    }
+
+    .icon-security,
+    .icon-security-locked {
+        font-size: 16px;
+    }
+}
+
+#contacts {
+    .contact-list-item {
+        align-items: center;
+        border-radius: 3px;
+        color: $baseLight;
+        display: flex;
+        font-size: 14px;
+        height: 36px;
+        list-style-type: none;
+        padding: 0 10%;
+        text-align: left;
+        white-space: nowrap;
+
+        &:hover,
+        &:active {
+            background: $toolbarSelectBackground;
+        }
+
+        .contact-list-item-name {
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .avatar {
+            cursor: pointer;
+            height: 24px;
+            margin: 0 8px 0 4px;
+            width: 24px;
+        }
+    }
+}
+
+
+.avatar {
+    padding: 0px;
+    margin-right: 10px;
+    vertical-align: middle;
+    font-size: 22pt;
+    border-radius: 20px;
+    max-height: 30px;
+    max-width: 30px;
+}

css/_dial-out.scss

@@ -0,0 +1,81 @@
+/**
+ * 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

@@ -0,0 +1,212 @@
+%align-right {
+    @include flex();
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.filmstrip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 10px 5px;
+    @extend %align-right;
+    z-index: $filmstripVideosZ;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        width: $filmstripToggleButtonWidth;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        padding: 0;
+        /* The filmstrip should not be covered by the left toolbar. */
+        bottom: 0;
+        width:auto;
+        transition: bottom 2s;
+        overflow: visible !important;
+
+        &#remoteVideos {
+            border: $thumbnailsBorder solid transparent;
+            padding-left: $defaultToolbarSize + 5;
+        }
+
+        /**
+         * The local video identifier.
+         */
+        &#filmstripLocalVideo {
+            bottom: 32px;
+            flex-direction: column;
+
+            /**
+             * 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 {
+                    background: $toolbarBackground;
+                    flex-grow: 1;
+                    flex-shrink: 1;
+                    overflow: hidden;
+                }
+
+                & > * {
+                    color: $toolbarButtonColor;
+                    flex-grow: 0;
+                    flex-shrink: 0;
+                    margin-left: 2px;
+                }
+
+                /**
+                 * Making sure any svg-s in an invite button group will be
+                 * colored the way we want.
+                 */
+                & path {
+                    fill: $toolbarButtonColor;
+                }
+            }
+        }
+
+        &.hidden {
+            bottom: -196px;
+        }
+
+        .remote-videos-container {
+            display: flex;
+        }
+
+        .videocontainer {
+            display: none;
+            position: relative;
+            background-size: contain;
+            border: $thumbnailVideoBorder solid transparent;
+            border-radius: $borderRadius;
+            margin: 0 $thumbnailVideoMargin;
+
+            &.videoContainerFocused, &:hover {
+                cursor: hand;
+            }
+
+            /**
+             * Focused video thumbnail.
+             */
+            &.videoContainerFocused {
+                transition-duration: 0.5s;
+                -webkit-transition-duration: 0.5s;
+                -webkit-animation-name: greyPulse;
+                -webkit-animation-duration: 2s;
+                -webkit-animation-iteration-count: 1;
+                border: $thumbnailVideoBorder solid $videoThumbnailSelected !important;
+                box-shadow: inset 0 0 3px $videoThumbnailSelected,
+                0 0 3px $videoThumbnailSelected !important;
+            }
+
+            .remotevideomenu > .icon-menu {
+                display: none;
+            }
+
+            .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.
+             */
+            &:hover {
+                cursor: hand;
+                border: $thumbnailVideoBorder solid $videoThumbnailHovered;
+                box-shadow: inset 0 0 3px $videoThumbnailHovered,
+                0 0 3px $videoThumbnailHovered;
+
+                .remotevideomenu > .icon-menu {
+                    display: inline-block;
+                }
+            }
+
+            /* With the TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius: $borderRadius;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+
+    /**
+     * Style the filmstrip videos in filmstrip-only mode.
+     */
+    &__videos-filmstripOnly {
+        margin-top: auto;
+        margin-bottom: auto;
+    }
+
+    .remote-videos-container {
+        transition: opacity 1s;
+    }
+
+    &.hide-videos {
+        .remote-videos-container {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+}

css/_flag-icon.scss

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

css/_font-awesome.scss

@@ -255,9 +255,6 @@
 .fa-road:before {
   content: "\f018";
 }
-.fa-download:before {
-  content: "\f019";
-}
 .fa-arrow-circle-o-down:before {
   content: "\f01a";
 }
@@ -842,9 +839,6 @@
 .fa-exchange:before {
   content: "\f0ec";
 }
-.fa-cloud-download:before {
-  content: "\f0ed";
-}
 .fa-cloud-upload:before {
   content: "\f0ee";
 }

css/_font.scss

@@ -0,0 +1,159 @@
+@font-face {
+    font-family: 'jitsi';
+    src:url('../fonts/jitsi.eot?94d075');
+    src:url('../fonts/jitsi.eot?#iefix94d075') format('embedded-opentype'),
+        url('../fonts/jitsi.woff?94d075') format('woff'),
+        url('../fonts/jitsi.ttf?94d075') format('truetype'),
+        url('../fonts/jitsi.svg?94d075#jitsi') format('svg');
+    font-weight: normal;
+    font-style: normal;
+}
+
+[class^="icon-"], [class*=" icon-"] {
+    font-family: 'jitsi';
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1.22em;
+    font-size: 1.22em;
+    cursor: default;
+
+    /* Better Font Rendering =========== */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-thumb-menu:before {
+    content: "\e5d4";
+}
+.icon-mic-camera-combined:before {
+    content: "\e903";
+}
+.icon-feedback:before {
+    content: "\e91d";
+}
+.icon-toggle-filmstrip:before {
+    content: "\e91c";
+}
+.icon-avatar:before {
+    content: "\e901";
+}
+.icon-hangup:before {
+    content: "\e905";
+}
+.icon-chat:before {
+    content: "\e906";
+}
+.icon-download:before {
+    content: "\e902";
+}
+.icon-edit:before {
+    content: "\e907";
+}
+.icon-share-doc:before {
+    content: "\e908";
+}
+.icon-kick:before {
+    content: "\e904";
+}
+.icon-menu-up:before {
+    content: "\e91f";
+}
+.icon-menu-down:before {
+    content: "\e920";
+}
+.icon-full-screen:before {
+    content: "\e90b";
+}
+.icon-exit-full-screen:before {
+    content: "\e90c";
+}
+.icon-star-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";
+}
+.icon-star:before {
+    content: "\e916";
+}
+.icon-switch-camera:before {
+    content: "\e921";
+}
+.icon-share-desktop:before {
+    content: "\e917";
+}
+.icon-camera:before {
+    content: "\e918";
+}
+.icon-camera-disabled:before {
+    content: "\e919";
+}
+.icon-volume:before {
+    content: "\e91a";
+}
+.icon-recDisable:before {
+    content: "\e613";
+}
+.icon-recEnable:before {
+    content: "\e614";
+}
+.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";
+}

css/_functions.scss

@@ -0,0 +1,6 @@
+/* Functions */
+
+/* Pixels to Ems function */
+@function em($value, $base: 16) {
+    @return #{$value / $base}em;
+}

css/_inlay.scss

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

css/_jquery-impromptu.scss

@@ -9,7 +9,8 @@
 }
 div.jqi{ 
 	width: 400px;
-	position: absolute; 
+	position: absolute;
+    color: #3a3a3a;
 	background-color: #ffffff; 
 	font-size: 11px; 
 	text-align: left; 
@@ -55,7 +56,7 @@ div.jqi .jqibuttons{
 div.jqi .jqibuttons button{ 
 	margin: 0;
 	padding: 5px 20px;
-	background-color: transparent;
+	background-color: transparent !important;
 	font-weight: normal; 
 	border: none;
 	border-left: solid 1px #e4e4e4; 

css/_jquery.contextMenu.scss

@@ -0,0 +1,206 @@
+@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
+ */
+@font-face {
+  font-family: "context-menu-icons";
+  font-style: normal; 
+  font-weight: normal;
+
+  src: url("font/context-menu-icons.eot?2qmzf");
+  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype");
+}
+
+.context-menu-icon:before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 28px; 
+  font-family: "context-menu-icons";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  color: #2980b9;
+  text-align: center;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.context-menu-icon-add:before {
+  content: "";
+}
+
+.context-menu-icon-copy:before {
+  content: "";
+}
+
+.context-menu-icon-cut:before {
+  content: "";
+}
+
+.context-menu-icon-delete:before {
+  content: "";
+}
+
+.context-menu-icon-edit:before {
+  content: "";
+}
+
+.context-menu-icon-paste:before {
+  content: "";
+}
+
+.context-menu-icon-quit:before {
+  content: "";
+}
+
+.context-menu-icon.context-menu-hover:before {
+  color: #fff;
+}
+
+.context-menu-list {
+  position: absolute; 
+  display: inline-block;
+  min-width: 180px;
+  max-width: 360px;
+  padding: 4px 0;
+  margin: 5px;
+  font-family: inherit;
+  font-size: inherit;
+  list-style-type: none;
+  background: #fff;
+  border: 1px solid #bebebe;
+  border-radius: $borderRadius;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+}
+
+.context-menu-item {
+  position: relative;
+  padding: 3px 28px;
+  color: #2f2f2f;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; 
+  background-color: #fff;
+}
+
+.context-menu-separator {
+  padding: 0; 
+  margin: 5px 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.context-menu-item > label > input,
+.context-menu-item > label > textarea {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.context-menu-item.context-menu-hover {
+  color: #fff;
+  cursor: pointer; 
+  background-color: #2980b9;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262; 
+  background-color: #fff;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262;
+}
+
+.context-menu-input.context-menu-hover,
+.context-menu-item.context-menu-disabled.context-menu-hover {
+  cursor: default; 
+  background-color: #eee;
+}
+
+.context-menu-submenu:after {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  z-index: $zindex1;
+  width: 0;
+  height: 0;
+  content: '';
+  border-color: transparent transparent transparent #2f2f2f;
+  border-style: solid;
+  border-width: 4px 0 4px 4px;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+/**
+ * Inputs
+ */
+.context-menu-item.context-menu-input {
+  padding: 5px 10px;
+}
+
+/* vertically align inside labels */
+.context-menu-input > label > * {
+  vertical-align: top;
+}
+
+/* position checkboxes and radios as icons */
+.context-menu-input > label > input[type="checkbox"],
+.context-menu-input > label > input[type="radio"] {
+  position: relative;
+  top: 3px;
+}
+
+.context-menu-input > label,
+.context-menu-input > label > input[type="text"],
+.context-menu-input > label > textarea,
+.context-menu-input > label > select {
+  display: block;
+  width: 100%; 
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.context-menu-input > label > textarea {
+  height: 100px;
+}
+
+.context-menu-item > .context-menu-list {
+  top: 5px; 
+  /* re-positioned by js */
+  right: -5px;
+  display: none;
+}
+
+.context-menu-item.context-menu-visible > .context-menu-list {
+  display: block;
+}
+
+.context-menu-accesskey {
+  text-decoration: underline;
+}

css/_keyboard-shortcuts.scss

@@ -0,0 +1,25 @@
+#keyboard-shortcuts {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: $defaultToolbarSize;
+    overflow: hidden;
+    padding: 20px;
+    margin-left: 10px;
+    z-index: $zindex10;
+    border-radius: $borderRadius;
+    background-attachment: scroll;
+    background-size: auto auto;
+    color: rgba(255, 255, 255, .8);
+    background-color: rgba(0, 0, 0, .8);
+}
+
+#keyboard-shortcuts .item-action {
+    color: #209EFF;
+    font-size: 14pt;
+    padding-right: 5px;
+}
+
+#keyboard-shortcuts-list {
+    list-style-type: none;
+}

css/_login_menu.scss

@@ -0,0 +1,18 @@
+/*Initialize*/
+div.loginmenu {
+    position: absolute;
+    margin: 0;
+    padding: 5px;
+    top: 40px;
+    left: 20px;
+}
+
+a.disabled {
+    color: gray !important;
+    pointer-events: none;
+}
+
+.loginmenu.extendedToolbarPopup {
+    top: 20px;
+    left: 40px;
+}

css/_mixins.scss

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

css/_modaldialog.scss

@@ -19,11 +19,6 @@
     width: 100%;
 }
 
-.jqibuttons button {
-    margin-right: 5px;
-    float:right;
-}
-
 button.jqidefaultbutton #inviteLinkRef {
     color: #2c8ad2;
 }

css/_notice.scss

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

css/_policy.scss

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

css/_popover.scss

@@ -0,0 +1,33 @@
+/**
+ * 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-mousemove-padding-right {
+    height: 100%;
+    position: absolute;
+    right: -20;
+    top: 0;
+    width: 40px;
+}
+
+/**
+ * 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%;
+}

css/_popup_menu.scss

@@ -0,0 +1,103 @@
+/**
+* Initialize
+**/
+
+.popupmenu {
+    text-align: left;
+    padding: 0;
+    white-space: nowrap;
+
+    &__item {
+        list-style-type: none;
+        height: 35px;
+
+        &:hover {
+            background-color: rgba(9, 30, 66, 0.04);
+        }
+    }
+
+    // Link Appearance
+    &__link,
+    &__contents {
+        color: $modalTextColor;
+        display: block;
+        box-sizing: border-box;
+        text-decoration: none;
+        height: 100%;
+        font-size: 9pt;
+        width: 100%;
+        cursor: pointer;
+        padding: 0 5px;
+
+        &.disabled {
+            color: gray !important;
+            pointer-events: none;
+        }
+    }
+
+    &__text {
+        display: inline-block;
+        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;
+        height: 100%;
+
+        > * {
+            @include absoluteAligning();
+        }
+    }
+
+    .icon-kick {
+        font-size: 8pt;
+    }
+}
+
+/**
+ * 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

@@ -0,0 +1,3 @@
+.recordingSpinner {
+    vertical-align: top;
+}

css/_redirect_page.scss

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

css/_side_toolbar_container.scss

@@ -0,0 +1,146 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    background-color: $sideToolbarContainerBg;
+    height: 100%;
+    left: $defaultToolbarSize;
+    max-width: $sidebarWidth;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: $sideToolbarContainerZ;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $baseLight;
+    }
+
+    /**
+     * Form elements and blocks.
+     */
+    input, select, a,
+    .sideToolbarBlock, .form-control, .button-control {
+        display: block;
+        margin-top: 15px;
+        margin-left: 10%;
+        width: 80%;
+    }
+
+    /**
+     * Specify styling of elements inside a block.
+     */
+    .sideToolbarBlock {
+        input, button, a, select {
+            margin-left: 0;
+            margin-top: 5px;
+            width: 100%;
+        }
+        input[type='checkbox'] {
+            display: inline;
+            width: auto !important;
+            > label {
+                margin-top: 5px;
+                width: 80%;
+            }
+        }
+    }
+
+    /**
+     * Inner container, for example contact list, settings or profile.
+     */
+    .sideToolbarContainer__inner {
+        display: none;
+        height: 100%;
+        width: $sidebarWidth;
+        position: absolute;
+        box-sizing: border-box;
+        color: #FFF;
+
+        .input-control {
+            border: 0;
+        }
+
+        /**
+         * Titles and subtitles of inner containers.
+         */
+        div.title, div.subTitle {
+            margin: 24px 0 11px;
+        }
+
+        /**
+         * Main title size.
+         */
+        div.title {
+            color: $toolbarTitleColor;
+            text-align: center;
+            font-size: $toolbarTitleFontSize;
+        }
+
+        /**
+         * Subtitle specific properties.
+         */
+        div.subTitle {
+            color: $defaultSideBarFontColor !important;
+            font-size: 11px;
+            font-weight: 500;
+            margin-left: 10%;
+            text-align: left;
+        }
+
+        /**
+         * First element after a title.
+         */
+        .first {
+            margin-top: 0 !important;
+        }
+
+        /**
+         * Buttons in the side toolbar container.
+         */
+        .button-control {
+            margin: 9px 0;
+            width: 100%;
+        }
+    }
+}
+
+#device_settings {
+    width : auto !important;
+    text-align: center;
+}
+
+#deviceOptionsWrapper {
+    button {
+        float: none;
+    }
+}
+
+/**
+ * Profile
+ */
+.auth_container {
+    ul {
+        padding: 0;
+
+        li {
+            list-style-type: none;
+
+            a.authButton {
+                width: 160px;
+                margin: 10px 20px;
+                padding: 3px 29px;
+                box-sizing: border-box;
+                background-color: #06a5df;
+                border-radius: 4px;
+                cursor: pointer;
+                color: $defaultColor;
+                text-decoration: none;
+                text-align: center;
+            }
+        }
+    }
+}

css/_toolbars.scss

@@ -0,0 +1,396 @@
+/**
+ * Round badge.
+ */
+.badge-round {
+    background-color: $toolbarBadgeBackground;
+    border-radius: 50%;
+    box-sizing: border-box;
+    color: $toolbarBadgeColor;
+    // Do not inherit the font-family from the toolbar button, because it's an
+    // icon style.
+    font-family: $baseFontFamily;
+    font-size: 9px;
+    font-weight: 700;
+    line-height: 13px;
+    min-width: 13px;
+    overflow: hidden;
+    text-align: center;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+}
+
+.toolbar-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 {
+    color: $modalTextColor;
+    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;
+
+        &_hangup {
+            color: $hangupColor;
+            font-size: $hangupFontSize;
+        }
+
+        &[disabled] {
+            opacity: 0.5;
+        }
+
+        &:hover, &:active {
+            cursor: pointer;
+            text-decoration: none;
+        }
+
+        &:not(.toggled) {
+            &:hover, &:active {
+                // sum opacity with background layer should give us 0.8
+                background: $toolbarSelectBackground;
+            }
+        }
+
+        &.toggled {
+            background: $toolbarToggleBackground;
+
+            &.icon-camera {
+                @extend .icon-camera-disabled;
+            }
+
+            &.icon-full-screen {
+                @extend .icon-exit-full-screen;
+            }
+
+            &.icon-microphone {
+                @extend .icon-mic-disabled;
+            }
+        }
+
+        &.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:first-child {
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+        }
+        .button:last-child {
+            border-bottom-right-radius: 3px;
+            border-bottom-left-radius: 3px;
+        }
+    }
+
+    /**
+     * Toolbar specific round badge.
+     */
+    .badge-round {
+        bottom: 9px;
+        position: absolute;
+        right: 9px;
+    }
+}
+
+.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;
+}
+
+/**
+ * START of slide in animation for extended toolbar.
+ */
+@include keyframes(slideInX) {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(0%); }
+}
+
+.slideInX {
+  @include animation('slideInX .5s forwards');
+}
+
+@include keyframes(slideOutX) {
+  0% { transform: translateX(0%); }
+  100% { transform: translateX(-100%); }
+}
+
+.slideOutX {
+  @include animation('slideOutX .5s forwards');
+}
+
+@include keyframes(slideInExtX) {
+    0% { transform: translateX(-500%); }
+    100% { transform: translateX(0%); }
+}
+
+.slideInExtX {
+  @include animation('slideInExtX .5s forwards');
+}
+
+@include keyframes(slideOutExtX) {
+    0% { transform: translateX(0%); }
+    100% { transform: translateX(-500%); }
+}
+
+.slideOutExtX {
+  @include animation('slideOutExtX .5s forwards');
+}
+
+/**
+ * END of slide out animation for extended toolbar.
+ */
+
+/**
+ * START of slide in / out animation for main toolbar.
+ */
+@include keyframes(slideInY) {
+    100% { transform: translateY(0%); }
+}
+
+.slideInY {
+  @include animation('slideInY .5s forwards');
+}
+
+@include keyframes(slideOutY) {
+    0% { transform: translateY(0%); }
+    100% { transform: translateY(-100%); }
+}
+
+.slideOutY {
+    @include animation('slideOutY .5s forwards');
+}
+/**
+ * END of slide in / out animation for main toolbar.
+ */
+
+/**
+ * START of slide in animation for extended toolbar panel.
+ */
+@include keyframes(slideInExt) {
+    from { width: 0px; }
+    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+}
+
+.slideInExt {
+    @include animation("slideInExt .5s forwards");
+}
+
+@include keyframes(slideOutExt) {
+  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+  to   { width: 0px; }
+}
+
+.slideOutExt {
+  @include animation("slideOutExt .5s forwards");
+}
+
+/**
+ * START of fade in animation for main toolbar
+ */
+.fadeIn {
+    opacity: 1;
+
+    @include transition(all .3s ease-in);
+}
+
+.fadeOut {
+    opacity: 0;
+
+    @include transition(all .3s ease-out);
+}

css/_utils.scss

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

css/_variables.scss

@@ -0,0 +1,153 @@
+@import "themes/light";
+
+/**
+ * Style variables
+ */
+$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$hangupColor: #bf2117;
+$hangupFontSize: 2em;
+
+/**
+ * Size variables.
+ */
+
+// Video layout.
+$thumbnailToolbarHeight: 22px;
+$thumbnailIndicatorBorder: 2px;
+$thumbnailIndicatorSize: $thumbnailToolbarHeight;
+$thumbnailVideoMargin: 2px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$filmstripToggleButtonWidth: 17px;
+
+
+/**
+ * Color variables.
+ */
+$defaultColor: #F1F1F1;
+$defaultSideBarFontColor: #44A5FF;
+$defaultSemiDarkColor: #ACACAC;
+$defaultDarkColor: #2b3d5c;
+
+/**
+ * Toolbar
+ */
+$alwaysOnTopToolbarFontSize: 1em;
+$alwaysOnTopToolbarSize: 30px;
+$defaultToolbarSize: 50px;
+$defaultFilmStripOnlyToolbarSize: 37px;
+$secToolbarFontSize: 1.9em;
+$secToolbarLineHeight: 45px;
+$toolbarAvatarPadding: 10px;
+$toolbarAvatarSize: 40px;
+$toolbarFontSize: 1.9em;
+$toolbarTitleFontSize: 19px;
+
+/**
+ * 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);
+$videoThumbnailSelected: #165ECC;
+$participantNameColor: #fff;
+$thumbnailPictogramColor: #fff;
+$dominantSpeakerBg: #165ecc;
+$raiseHandBg: #D6D61E;
+$audioLevelBg: #44A5FF;
+$connectionIndicatorBg: #165ecc;
+$audioLevelShadow: rgba(9, 36, 77, 0.9);
+$videoStateIndicatorColor: $defaultColor;
+$videoStateIndicatorBackground: $toolbarBackground;
+
+/**
+ * Feedback Modal
+ */
+$feedbackContentBg: #fff;
+$feedbackInputBg: #fff;
+$feedbackTextColor: #000;
+$feedbackInputTextColor: #333;
+$feedbackInputPlaceholderColor: #777;
+$rateStarLabelColor: #333;
+$rateStarDefault: #ccc;
+$rateStarActivity: #165ecc;
+$rateStarSize: 34px;
+
+/**
+ * Modals
+ */
+$modalButtonFontSize: 14px;
+$modalMockAKInputBackground: #fafbfc;
+$modalMockAKInputBorder: 1px solid #f4f5f7;
+$modalTextColor: #333;
+
+/**
+ * Misc.
+ */
+$borderRadius: 4px;
+$defaultWatermarkLink: '../images/watermark.png';
+$sidebarWidth: 220px;
+$popoverMenuPadding: 13px;
+$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;
+$dropdownZ: 901;
+$centeredVideoLabelZ: 1010;
+$popoverZ: 1015;
+$overlayZ: 1016;
+
+
+/**
+ * Font Colors
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+
+/**
+ * Forms
+ */
+//inputs
+$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;

css/_vertical_filmstrip_overrides.scss

@@ -0,0 +1,221 @@
+/**
+ * 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;
+            transition: right 2s;
+
+            &.hidden {
+                bottom: auto;
+                right: -196px;
+            }
+
+            /**
+             * 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.
+             */
+            &#remoteVideos {
+                padding-left: 0;
+            }
+        }
+
+        /**
+         * Re-styles the local Video and invite button to better fit the
+         * vertical filmstrip layout.
+         */
+        #filmstripLocalVideo {
+            bottom: 5px;
+            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

@@ -0,0 +1,598 @@
+#videoconference_page {
+    min-height: 100%;
+}
+
+#videospace {
+    display: block;
+    min-height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    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%;
+    }
+
+    /**
+     * The toolbar of the video thumbnail.
+     */
+    &__toolbar,
+    &__toptoolbar {
+        position: absolute;
+        left: 0;
+        pointer-events: none;
+        z-index: $zindex10;
+        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;
+        }
+    }
+
+    &__toolbar {
+        bottom: 0;
+        height: $thumbnailToolbarHeight;
+        padding: 0 5px 0 5px;
+    }
+
+    &__toptoolbar {
+        $toolbarIconMargin: 5px;
+        top: 0;
+        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 {
+            position: relative;
+            font-size: 8px;
+            text-align: center;
+            line-height: $thumbnailIndicatorSize;
+            padding: 0;
+            @include circle($thumbnailIndicatorSize);
+            box-sizing: border-box;
+            z-index: $zindex3;
+            background: $dominantSpeakerBg;
+            color: $thumbnailPictogramColor;
+            border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+
+            .indicatoricon {
+                @include absoluteAligning();
+            }
+
+            .connection {
+                position: relative;
+                display: inline-block;
+                margin: 0 auto;
+                left: 0;
+                @include transform(translate(0, -50%));
+
+                &_empty,
+                &_lost
+                {
+                    color: #8B8B8B;/*#FFFFFF*/
+                    overflow: hidden;
+                }
+
+                &_full
+                {
+                    @include topLeft();
+                    color: #FFFFFF;/*#15A1ED*/
+                    overflow: hidden;
+                }
+
+                &_ninja
+                {
+                    font-size: 1.5em;
+                }
+            }
+
+            .icon-gsm-bars {
+                cursor: pointer;
+                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;
+        }
+    }
+}
+
+#localVideoWrapper {
+    display:inline-block;
+}
+
+.flipVideoX {
+    transform: scale(-1, 1);
+    -moz-transform: scale(-1, 1);
+    -webkit-transform: scale(-1, 1);
+    -o-transform: scale(-1, 1);
+}
+
+#localVideoWrapper video,
+#localVideoWrapper object {
+    border-radius: $borderRadius !important;
+    cursor: hand;
+    object-fit: cover;
+}
+
+#largeVideo,
+#largeVideoWrapper,
+#largeVideoContainer {
+    overflow: hidden;
+    text-align: center;
+}
+
+#largeVideoWrapper {
+    box-shadow: 0 0 20px -2px #444;
+}
+
+#largeVideo,
+#largeVideoWrapper
+{
+    object-fit: cover;
+}
+
+#sharedVideo,
+#etherpad,
+#localVideoWrapper video,
+#localVideoWrapper object,
+#localVideoWrapper,
+#largeVideoWrapper,
+#largeVideoWrapper>video,
+#largeVideoWrapper>object,
+.videocontainer>video,
+.videocontainer>object {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: $zindex1;
+    width: 100%;
+    height: 100%;
+}
+
+#etherpad {
+    text-align: center;
+}
+
+#etherpad {
+    z-index: $zindex0;
+}
+
+/**
+ * Positions video thumbnail display name and editor.
+ */
+.videocontainer .displayname,
+.videocontainer .editdisplayname {
+    display: inline-block;
+    position: absolute;
+    left: 10%;
+    width: 80%;
+    top: 50%;
+    @include transform(translateY(-40%));
+    color: $participantNameColor;
+    text-align: center;
+    text-overflow: ellipsis;
+    font-size: 12px;
+    font-weight: 100;
+    overflow: hidden;
+    white-space: nowrap;
+    line-height: $thumbnailToolbarHeight;
+    z-index: $zindex2;
+}
+
+/**
+ * Positions video thumbnail display name editor.
+ */
+.videocontainer .editdisplayname {
+    outline: none;
+    border: none;
+    background: none;
+    box-shadow: none;
+    padding: 0;
+}
+
+#localVideoContainer .displayname:hover {
+    cursor: text;
+}
+
+.videocontainer .displayname {
+    pointer-events: none;
+    padding: 0 3px 0 3px;
+}
+
+.videocontainer .editdisplayname {
+    height: auto;
+}
+
+#localDisplayName {
+    pointer-events: auto !important;
+}
+
+.videocontainer>a.displayname {
+    display: inline-block;
+    position: absolute;
+    color: #FFFFFF;
+    bottom: 0;
+    right: 0;
+    padding: 3px 5px;
+    font-size: 9pt;
+    cursor: pointer;
+    z-index: $zindex2;
+}
+
+/**
+ * Video thumbnail toolbar icon.
+ */
+.videocontainer .toolbar-icon {
+    font-size: 8pt;
+    text-align: center;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    color: #FFFFFF;
+    width: 12px;
+    line-height: $thumbnailToolbarHeight;
+    height: $thumbnailToolbarHeight;
+    padding: 0;
+    border: 0;
+    margin: 0px 5px 0px 0px;
+}
+
+/**
+ * Toolbar icon internal i elements (font icons).
+ */
+.toolbar-icon>i {
+    line-height: $thumbnailToolbarHeight;
+}
+
+/**
+ * Toolbar icons positioned on the right.
+ */
+.moderator-icon {
+    display: inline-block;
+
+    &.right {
+        float: right;
+        margin: 0px 0px 0px 5px;
+    }
+
+    .toolbar-icon {
+        margin: 0;
+    }
+}
+
+.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;
+    }
+}
+
+.remote-video-menu-trigger,
+.remotevideomenu
+{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0;
+    z-index: $zindex2;
+    width: 18px;
+    height: 13px;
+    color: #FFF;
+    font-size: 10pt;
+
+    >i{
+        cursor: hand;
+    }
+}
+.remote-video-menu-trigger {
+    margin-top: 7px;
+}
+
+/**
+ * Audio indicator on video thumbnails.
+ */
+.videocontainer>span.audioindicator,
+.videocontainer>.audioindicator-container {
+    position: absolute;
+    display: inline-block;
+    left: 6px;
+    top: 50%;
+    margin-top: -17px;
+    width: 6px;
+    height: 35px;
+    z-index: $zindex2;
+    border: none;
+
+    .audiodot-top,
+    .audiodot-bottom,
+    .audiodot-middle {
+        opacity: 0;
+        display: inline-block;
+        @include circle(5px);
+        background: $audioLevelShadow;
+        margin: 1px 0 1px 0;
+        transition: opacity .25s ease-in-out;
+        -moz-transition: opacity .25s ease-in-out;
+    }
+
+    span.audiodot-top::after,
+    span.audiodot-bottom::after,
+    span.audiodot-middle::after {
+        content: "";
+        display: inline-block;
+        width: 5px;
+        height: 5px;
+        border-radius: 50%;
+        -webkit-filter: blur(0.5px);
+        filter: blur(0.5px);
+        background: $audioLevelBg;
+    }
+}
+
+#reloadPresentation {
+    display: none;
+    position: absolute;
+    color: #FFFFFF;
+    top: 0;
+    right:0;
+    padding: 10px 10px;
+    font-size: 11pt;
+    cursor: pointer;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 5px;
+    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!*/
+}
+
+.audiolevel {
+    display: inline-block;
+    position: absolute;
+    z-index: $zindex0;
+    border-radius:1px;
+    pointer-events: none;
+}
+
+#dominantSpeaker {
+    visibility: hidden;
+    width: 300px;
+    height: 300px;
+    margin: auto;
+    position: relative;
+}
+
+#mixedstream {
+    display:none !important;
+}
+
+#dominantSpeakerAvatar,
+.dynamic-shadow {
+    width: 200px;
+    height: 200px;
+}
+
+#dominantSpeakerAvatar {
+    top: 50px;
+    margin: auto;
+    position: relative;
+    border-radius: 100px;
+    visibility: inherit;
+    background-color: #000000;
+}
+
+.dynamic-shadow {
+    border-radius: 50%;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -100px 0 0 -100px;
+    transition: box-shadow 0.3s ease;
+}
+
+.userAvatar {
+    @include maxSize(60px);
+    @include absoluteAligning();
+    border-radius: 50%;
+    height: 50%;
+    width: auto;
+}
+
+.sharedVideoAvatar {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+}
+
+.noMic {
+    position: absolute;
+    border-radius: 8px;
+    z-index: $zindex1;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/noMic.png");
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.noVideo {
+    position: absolute;
+    border-radius: 8px;
+    z-index: $zindex1;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/noVideo.png");
+    background-color: #000;
+    background-repeat: no-repeat;
+    background-position: center;
+}
+
+.videoMessageFilter {
+    -webkit-filter: grayscale(.5) opacity(0.8);
+    filter: grayscale(.5) opacity(0.8);
+}
+
+.remoteVideoProblemFilter {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+.videoProblemFilter {
+    -webkit-filter: blur(10px) grayscale(.5) opacity(0.8);
+    filter: blur(10px) grayscale(.5) opacity(0.8);
+}
+
+.videoThumbnailProblemFilter {
+    -webkit-filter: grayscale(100%);
+    filter: grayscale(100%);
+}
+
+#remotePresenceMessage,
+#remoteConnectionMessage {
+    position: absolute;
+    width: auto;
+    z-index: $zindex2;
+    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),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+
+    background: rgba(0,0,0,.5);
+    border-radius: 5px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+#remotePresenceMessage .no-presence,
+#remoteConnectionMessage {
+    display: none;
+}
+
+#localConnectionMessage {
+    display: none;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top:50%;
+    z-index: $zindex2;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+}

css/_welcome_page.scss

@@ -1,4 +1,3 @@
-
 #disable_welcome {
     display:none;
 }
@@ -21,10 +20,9 @@
     -moz-user-select: none;
     background-repeat: no-repeat;
     font-weight: 500;
-    font-family: Helvetica;
     font-size: 16px;
     color: #acacac;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 #disable_welcome:checked + label
@@ -35,66 +33,79 @@
     -moz-user-select: none;
     background-repeat: no-repeat;
     font-weight: 500;
-    font-family: Helvetica;
     font-size: 16px;
     color: #acacac;
-    z-index: 2;
+    z-index: $zindex2;
 }
 
 #enter_room_form {
-    border-radius: 10px;
+    border-radius: 1px;
     background-color: #FFFFFF;
     border: none;
-    -moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
+    -moz-border-radius: 1px;
+    -webkit-border-radius: 1px;
     -webkit-appearance: none;
     height: 55px;
     box-shadow: none;
     float: left;
 }
 
-#domain_name
+.domain-name
 {
     float: left;
-    padding: 20px 0px 10px 20px;
+    height: 55px;
+    line-height: 55px;
     font-size: 18px;
     font-weight: 500;
-    font-family: Helvetica;
+    padding-left: 20px;
+    color: $defaultDarkColor;
 }
 
-#enter_room_field {
-    font-size: 15px;
-    padding: 15px 0px 10px 10px;
-    border: none;
-    -webkit-appearance: none;
-    width: 228px;
-    height: 55px;
-    font-weight: 500;
-    font-family: Helvetica;
-    box-shadow: none;
-    float: left;
-    background-color: #FFFFFF;
-    position: relative;
-    z-index: 2;
-}
+.enter-room {
+    &__field {
+        font-size: 15px;
+        border: none;
+        -webkit-appearance: none;
+        width: 228px;
+        height: 55px;
+        line-height: 55px;
+        font-weight: 500;
+        box-shadow: none;
+        float: left;
+        background-color: #FFFFFF;
+        position: relative;
+        z-index: $zindex2;
+    }
 
-#enter_room_button {
-    width: 73px;
-    height: 45px;
-    background-color: #16a8fe;
-    moz-border-radius: 10px;
-    -webkit-border-radius: 10px;
-    color: #ffffff;
-    font-weight: 600;
-    border: none;
-    margin-top: 5px;
-    font-size: 19px;
-    font-family: Helvetica;
-    padding-top: 6px;
-    outline: none;
-    float:left;
-    position: relative;
-    z-index: 2;
+    &__reload {
+        display: block;
+        width: 30px;
+        color: #acacac;
+        font-size: 1.9em;
+        line-height: 55px;
+        z-index: $zindex3;
+        float:  left;
+        cursor: pointer;
+        text-align: center;
+    }
+
+    &__button {
+        width: 73px;
+        height: 45px;
+        background-color: #21B9FC;
+        moz-border-radius: 1px;
+        -webkit-border-radius: 1px;
+        color: #ffffff;
+        font-weight: 600;
+        border: none;
+        margin-top: 5px;
+        font-size: 19px;
+        padding-top: 6px;
+        outline: none;
+        float:left;
+        position: relative;
+        z-index: $zindex2;
+    }
 }
 
 #enter_room_container {
@@ -136,7 +147,6 @@
     width: 885px;
     height: 100px;
     color: #ffffff;
-    font-family: Helvetica;
     font-size: 24px;
     text-align: center;
     margin: 0px auto 0px auto;
@@ -171,7 +181,6 @@
     background-repeat: no-repeat;
     width: 169px;
     height: 169px;
-    font-family: Helvetica;
     color: #ffffff;
     font-size: 22px;
     /*font-weight: bold;*/
@@ -183,23 +192,9 @@
 .feature_description
 {
     width: 190px;
-    font-family: Helvetica;
     color: #ffffff;
     font-size: 16px;
     padding-top: 30px;
     line-height: 22px;
     font-weight: 200;
 }
-
-#reload_roomname
-{
-    width: 30px;
-    height: 19px;
-    color: #acacac;
-    margin-top: 22px;
-    z-index: 3;
-    float:  left;
-    cursor: pointer;
-    text-align: center;
-    display: none;
-}

css/aui-components/dropdown.scss

@@ -0,0 +1,68 @@
+.select2-container.aui-select2-container {
+    background-color: transparent !important;
+    margin-top: 2px;
+
+    a.select2-choice {
+        height: 28px !important;
+        line-height: 18px !important;
+        width: 100% !important;
+        background-color: $selectBg !important;
+        border-color: $selectBg !important;
+        color: $selectFontColor !important;
+        text-shadow: none !important;
+        font-size: 12px !important;
+        margin: 0 auto !important;
+
+        &:after {
+            border-top-color: $selectFontColor;
+        }
+    }
+
+    &.select2-dropdown-open{
+        a.select2-choice {
+            background-color: $selectActiveBg !important;
+            border-color: $selectActiveBg !important;
+        }
+    }
+}
+
+.select2-drop.aui-select2-drop.aui-style-default {
+    z-index: $dropdownZ;
+    background-color: $selectActiveBg;
+    border-color: $selectActiveBg;
+
+    .select2-results{
+        background-color: $selectActiveBg;
+        border-color: $selectActiveBg;
+
+        &::-webkit-scrollbar {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track-piece {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: $selectActiveItemBg;
+        }
+
+        .select2-result{
+            &.select2-highlighted{
+                background-color: $selectActiveItemBg;
+            }
+
+            .select2-result-label{
+                font-size: 12px;
+                color: $selectFontColor !important;
+                line-height: 20px;
+            }
+        }
+
+    }
+}
+
+.select2-drop-mask {
+    z-index: $dropdownMaskZ;
+}

css/components/_button-control.scss

@@ -0,0 +1,101 @@
+.button-control {
+    box-sizing: border-box;
+    display: inline-block;
+    border: 1px solid $buttonBorder;
+    vertical-align: baseline;
+    height: 30px;
+    min-width: 60px;
+    padding: 4px 10px;
+    margin: 0;
+    line-height: 1.5em;
+    outline: none;
+    background-color: transparent;
+    float: right;
+    font-size: 14px;
+    margin-left: 10px;
+    color: $buttonColor;
+    font-weight: $buttonFontWeight;
+    @include transition(background-color .1s ease-out);
+
+    &[disabled] {
+        color: #666;
+        cursor: default;
+    }
+
+    &_full-width {
+        margin: 0;
+        width: 100%;
+    }
+
+    &:hover {
+        border: 1px solid $buttonHoverBorder;
+        background-color: $buttonHoverBackground;
+        @include transition(background-color .1s ease-in);
+    }
+
+    &:active {
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
+    }
+
+    &_light {
+        color: $defaultDarkColor;
+        background-color: $buttonLightBackground;
+        border: 1px solid $buttonLightBorder;
+
+        &:hover {
+            border: 1px solid $buttonLightHoverBorder;
+            background-color: $buttonLightHoverBackground;
+        }
+    }
+
+    &_link {
+        color: $buttonLinkColor;
+        background-color: $buttonLinkBackground;
+
+        &:hover {
+            background-color: $buttonLinkBackground;
+        }
+    }
+
+    &_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;
+        color: $primaryButtonColor !important;
+        font-weight: $primaryButtonFontWeight;
+
+        &:hover {
+            border: 1px solid $primaryButtonHoverBackground;
+            background-color: $primaryButtonHoverBackground;
+        }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
+    }
+
+    &_close {
+        color: $defaultFontColor;
+    }
+    &_submit {
+        color: $linkFontColor;
+        &:hover {
+            color: $linkHoverFontColor;
+        }
+    }
+
+    &_center {
+        float: none !important;
+    }
+}

css/components/_form-control.scss

@@ -0,0 +1,49 @@
+.form-control {
+    padding: $formPadding 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+    &__text {
+        margin: 8px 0;
+        font-size: 1em
+    }
+
+    &__label {
+        font-size: 1em;
+        font-weight: $labelFontWeight;
+    }
+
+    &__em {
+        color: $inputControlEmColor;
+    }
+
+    &__container {
+        position: relative;
+        width: 100%;
+        margin-top: 5px;
+        margin-bottom: 5px;
+        @include flex();
+
+        .button-control {
+            margin: 1px 0 1px 10px;
+        }
+    }
+
+    &__right {
+        position: absolute;
+        right: 0;
+    }
+}
+
+/**
+ * Set a specific color for read only style.
+ */
+input:read-only {
+    color: $readOnlyInputColor;
+}

css/components/_input-control.scss

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

css/components/_input-slider.scss

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

css/components/_link.scss

@@ -0,0 +1,20 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}
+
+/**
+ * Helper links are links that are meant to open a documentation page or more
+ * detailed info.
+ */
+.helper-link {
+    @extend .link;
+    font-size: 12px;
+}

css/contact_list.css

@@ -1,51 +0,0 @@
-#contactlist {
-    background-color: black;
-    cursor: default;
-}
-
-#contactlist>div.title {
-    text-align: left;
-    padding: 7px 10px;
-    margin: 2px;
-    color: #00ccff;
-    font-size: 11pt;
-    border-bottom: 1px solid #676767;
-}
-
-#contactlist>ul#contacts {
-    position: absolute;
-    top: 31px;
-    bottom: 0px;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-    overflow-y: scroll;
-    overflow-x: hidden;
-}
-
-#contacts>li {
-    list-style-type: none;
-    text-align: left;
-    color: #FFF;
-    font-size: 10pt;
-    padding: 7px 10px;
-    margin: 2px;
-}
-
-#contacts>li>p {
-    display: inline-block;
-    vertical-align: middle;
-    margin: 0px;
-}
-
-.avatar {
-    padding: 0px;
-    margin-right: 10px;
-    vertical-align: middle;
-    font-size: 22pt;
-    border-radius: 20px;
-}
-
-#contactlist .clickable {
-    cursor: pointer;
-}

css/feedback.css

@@ -1,48 +0,0 @@
-/**
- * The feedback window inner div css.
- */
-.feedback {
-    width: 450px;
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-    text-align: center;
-    font-size: 22px;
-}
-
-/**
- * Style of the thank you text inside the feedback window.
- */
-.feedbackTitle {
-    font-size: 22px;
-    color: #087dba;
-}
-
-/**
- * Stars div css.
- */
-#stars {
-    font-size: 30px;
-}
-
-/**
- * Star css.
- */
-#stars>a {
-    padding-right: 4px;
-}
-
-/**
- * Mouse over a star.
- */
-.starHover {
-    color: #087dba;
-}
-
-/**
- * Detailed feedback section text area style.
- */
-.feedbackDetails textarea {
-    resize: vertical;
-    min-height: 100px;
-}