[RN] Set iOS status bar style to light

It will render as white in dark backgrounds. This is what FaceTime does and what
we already do on Android. The problem with the default look (black text) is
noticeable in audio only mode, since the background is dark.

.buckconfig

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

.editorconfig

@@ -8,3 +8,6 @@ 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,44 @@
+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': {
+        '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,65 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+; Ignore packages in node_modules which we (i.e. the jitsi-meet project) have
+; seen to cause errors and we have chosen not to fix.
+.*/node_modules/babel-core/.*
+.*/node_modules/bower/.*
+.*/node_modules/jsonlint/.*
+.*/node_modules/styled-components/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(3[0-8]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-8]\\|1[0-9]\\|[1-2][0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+
+unsafe.enable_getters_and_setters=true
+
+; 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,2 +1,3 @@
 *.bundle.js -text -diff
+*.pbxproj -text
 lib-jitsi-meet.js -text -diff

.gitignore

@@ -1,11 +1,67 @@
-node_modules
 *.swp
-.idea/
-*.iml
 .*.tmp
 deploy-local.sh
-libs/app.bundle.*
-libs/lib-jitsi-meet*
-libs/external_connect.js
+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

.jshintignore

@@ -1,4 +1,18 @@
-node_modules
-libs
-debian
+# The following do not need to be checked because they do not represent JS
+# source code.
+build/
+debian/
+libs/
+node_modules/
+
+# The following are checked by ESLint with the maximum configuration which
+# supersedes JSHint.
+flow-typed/
+react/
+
+# The following are checked by ESLint with the minimum configuration which does
+# not supersede JSHint but take advantage of advanced language features such as
+# Facebook Flow which are not supported by JSHint.
+modules/translation/translation.js
+
 analytics.js

.watchmanconfig

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

CONTRIBUTING.md

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

ConferenceEvents.js

@@ -0,0 +1,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,24 +1,22 @@
-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 jquery.contextMenu.css
 DEPLOY_DIR = libs
-BROWSERIFY_FLAGS = -d
-OUTPUT_DIR = .
 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: update-deps compile uglify deploy clean
-
-update-deps:
-	$(NPM) update
+all: compile deploy clean
 
 compile:
-	$(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: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local
 
@@ -26,30 +24,34 @@ deploy-init:
 	mkdir -p $(DEPLOY_DIR)
 
 deploy-appbundle:
-	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
-	$(OUTPUT_DIR)/app.bundle.js \
-	$(DEPLOY_DIR)
+	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 \
+		$(OUTPUT_DIR)/analytics.js \
+		$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
-	cp $(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js \
-	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
-	$(DEPLOY_DIR)
+	cp \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
+		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+		$(DEPLOY_DIR)
+
 deploy-css:
-	(cd css; cat $(CSS_FILES)) | $(CLEANCSS) > css/all.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 *.js connection_optimization favicon.ico fonts images index.html libs plugin.*html sounds title.html unsupported_browser.html LICENSE lang source_package/jitsi-meet && \
+	cp -r *.js *.html connection_optimization favicon.ico fonts images libs static sounds LICENSE lang source_package/jitsi-meet && \
 	cp css/all.css source_package/jitsi-meet/css && \
-	cp css/unsupported_browser.css source_package/jitsi-meet/css && \
 	(cd source_package ; tar cjf ../jitsi-meet.tar.bz2 jitsi-meet) && \
 	rm -rf source_package

README.md

@@ -1,5 +1,5 @@
-Jitsi Meet - Secure, Simple and Scalable Video Conferences
-====
+# Jitsi Meet - Secure, Simple and Scalable Video Conferences
+
 Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the session #482 of the VoIP Users Conference.
 
 You can also try it out yourself at https://meet.jit.si .
@@ -12,9 +12,18 @@ 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).
 
-## Building the sources
+## Download
 
-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).
+You can download Debian/Ubuntu binaries:
+* [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianStableRepository))
+* [testing](https://download.jitsi.org/testing/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianTestingRepository))
+* [nightly](https://download.jitsi.org/unstable/) ([instructions](https://jitsi.org/Main/InstallJitsiMeetDebianNightlyRepository))
+
+You can get our mobile versions from here:
+* [Android](https://play.google.com/store/apps/details?id=org.jitsi.meet)
+* [iOS](https://itunes.apple.com/us/app/jitsi-meet/id1165103905)
+
+## Building the sources
 
 On Debian/Ubuntu systems, the required packages can be installed with:
 ```
@@ -28,7 +37,7 @@ To build the Jitsi Meet application, just type
 make
 ```
 
-## Working with the library sources(lib-jitsi-meet).
+## Working with the library sources (lib-jitsi-meet)
 
 By default the library is build from its git repository sources. The default dependency path in package.json is :
 ```json
@@ -66,6 +75,7 @@ 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
@@ -74,6 +84,19 @@ npm unlink lib-jitsi-meet
 npm install
 ```
 
+## Contributing
+
+If you are looking to contribute to Jitsi Meet, first of all, thank you! Please
+see our [guidelines for contributing](CONTRIBUTING.md).
+
+## Embedding in external applications
+
+Jitsi Meet provides a very flexible way of embedding it in external applications by using the [Jitsi Meet API](doc/api.md).
+
+## Mobile app
+Jitsi Meet is also available as a React Native application for Android and iOS.
+Instructions on how to build it can be  found [here](doc/mobile.md).
+
 ## Discuss
 Please use the [Jitsi dev mailing list](http://lists.jitsi.org/pipermail/dev/) to discuss feature requests before opening an issue on Github.
 

analytics.js

@@ -1,5 +1,9 @@
+/* global ga */
+
 (function (ctx) {
   function Analytics() {
+    /* eslint-disable */
+
     /**
      * Google Analytics
      */
@@ -8,11 +12,22 @@
     })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
     ga('create', 'UA-319188-14', 'jit.si');
     ga('send', 'pageview');
+
+    /* eslint-enable */
   }
 
   Analytics.prototype.sendEvent = function (action, data) {
-    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.analyticsHandlers === "undefined")
+    ctx.analyticsHandlers = [];
+  ctx.analyticsHandlers.push(Analytics);
+}(window));

android/app/BUCK

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

android/app/build.gradle

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

android/app/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,60 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    package="org.jitsi.meet"
+    android:versionCode="1"
+    android:versionName="1.0">
+
+    <!-- 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:name="android.hardware.camera" />
+    <uses-feature android:name="android.hardware.camera.autofocus"/>
+
+    <uses-sdk
+        android:minSdkVersion="19"
+        android:targetSdkVersion="23" />
+
+    <application
+      android:allowBackup="true"
+      android:icon="@mipmap/ic_launcher"
+      android:label="@string/app_name"
+      android:name=".MainApplication"
+      android:theme="@style/AppTheme">
+      <activity
+        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
+        android:label="@string/app_name"
+        android:launchMode="singleTask"
+        android:name=".MainActivity"
+        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>
+      <activity
+        android:name="com.facebook.react.devsupport.DevSettingsActivity" />
+    </application>
+</manifest>

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

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

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

@@ -0,0 +1,65 @@
+package org.jitsi.meet;
+
+import android.app.Application;
+
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactNativeHost;
+import com.facebook.react.ReactPackage;
+import com.facebook.soloader.SoLoader;
+
+import java.util.Arrays;
+import java.util.List;
+
+public class MainApplication extends Application implements ReactApplication {
+    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
+        /**
+         * {@inheritDoc}
+         */
+        @Override
+        public boolean getUseDeveloperSupport() {
+            return BuildConfig.DEBUG;
+        }
+
+        /**
+         * {@inheritDoc}
+         */
+        @Override
+        protected List<ReactPackage> getPackages() {
+            return Arrays.<ReactPackage>asList(
+                new com.corbt.keepawake.KCKeepAwakePackage(),
+                new com.facebook.react.shell.MainReactPackage(),
+                new com.oblador.vectoricons.VectorIconsPackage(),
+                new com.ocetnik.timer.BackgroundTimerPackage(),
+                new com.oney.WebRTCModule.WebRTCModulePackage(),
+                new com.rnimmersive.RNImmersivePackage(),
+                new org.jitsi.meet.audiomode.AudioModePackage(),
+                new org.jitsi.meet.proximity.ProximityPackage()
+            );
+        }
+    };
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public ReactNativeHost getReactNativeHost() {
+        return mReactNativeHost;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public void onCreate() {
+        super.onCreate();
+
+        SoLoader.init(this, /* native exopackage */ false);
+
+        if (!getReactNativeHost()
+                .getReactInstanceManager()
+                    .getDevSupportManager()
+                        .getDevSupportEnabled()) {
+            // TODO Auto-generated method stub
+        }
+    }
+}

android/app/src/main/java/org/jitsi/meet/audiomode/AudioModeModule.java

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

android/app/src/main/java/org/jitsi/meet/audiomode/AudioModePackage.java

@@ -0,0 +1,48 @@
+package org.jitsi.meet.audiomode;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Implements {@link ReactPackage} for {@link AudioModeModule}.
+ */
+public class AudioModePackage implements ReactPackage {
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    /**
+     * {@inheritDoc}
+     *
+     * @return List of native modules to be exposed by React Native.
+     */
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new AudioModeModule(reactContext));
+
+        return modules;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<ViewManager> createViewManagers(
+            ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

android/app/src/main/java/org/jitsi/meet/audiomode/BluetoothHeadsetMonitor.java

@@ -0,0 +1,189 @@
+package org.jitsi.meet.audiomode;
+
+import android.bluetooth.BluetoothAdapter;
+import android.bluetooth.BluetoothDevice;
+import android.bluetooth.BluetoothHeadset;
+import android.bluetooth.BluetoothProfile;
+import android.content.BroadcastReceiver;
+import android.content.Context;
+import android.content.Intent;
+import android.content.IntentFilter;
+import android.media.AudioManager;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+/**
+ * Helper class to detect and handle Bluetooth device changes.  It monitors
+ * Bluetooth headsets being connected / disconnected and notifies the module
+ * about device changes when this occurs.
+ */
+public class BluetoothHeadsetMonitor {
+    /**
+     * {@link AudioModeModule} where this monitor reports.
+     */
+    private final AudioModeModule audioModeModule;
+
+    /**
+     * The {@link Context} in which {@link #audioModeModule} executes.
+     */
+    private final Context context;
+
+    /**
+     * Reference to a proxy object which allows us to query connected devices.
+     */
+    private BluetoothHeadset headset;
+
+    /**
+     * Flag indicating if there are any Bluetooth headset devices currently
+     * available.
+     */
+    private boolean headsetAvailable = false;
+
+    /**
+     * {@link Handler} for running all operations on the main thread.
+     */
+    private final Handler mainThreadHandler
+        = new Handler(Looper.getMainLooper());
+
+    /**
+     * Helper for running Bluetooth operations on the main thread.
+     */
+    private final Runnable updateDevicesRunnable
+        = new Runnable() {
+            @Override
+            public void run() {
+                headsetAvailable
+                    = (headset != null)
+                        && !headset.getConnectedDevices().isEmpty();
+                audioModeModule.onAudioDeviceChange();
+            }
+        };
+
+    public BluetoothHeadsetMonitor(
+            AudioModeModule audioModeModule,
+            Context context) {
+        this.audioModeModule = audioModeModule;
+        this.context = context;
+
+        AudioManager audioManager
+            = (AudioManager) context.getSystemService(Context.AUDIO_SERVICE);
+
+        if (!audioManager.isBluetoothScoAvailableOffCall()) {
+            Log.w(AudioModeModule.TAG, "Bluetooth SCO is not available");
+            return;
+        }
+
+        if (getBluetoothHeadsetProfileProxy()) {
+            registerBluetoothReceiver();
+
+            // Initial detection.
+            updateDevices();
+        }
+    }
+
+    private boolean getBluetoothHeadsetProfileProxy() {
+        BluetoothAdapter adapter = BluetoothAdapter.getDefaultAdapter();
+
+        if (adapter == null) {
+            Log.w(AudioModeModule.TAG, "Device doesn't support Bluetooth");
+            return false;
+        }
+
+        // XXX: The profile listener listens for system services of the given
+        // type being available to the application. That is, if our Bluetooth
+        // adapter has the "headset" profile.
+        BluetoothProfile.ServiceListener listener
+            = new BluetoothProfile.ServiceListener() {
+                @Override
+                public void onServiceConnected(
+                        int profile,
+                        BluetoothProfile proxy) {
+                    if (profile == BluetoothProfile.HEADSET) {
+                        headset = (BluetoothHeadset) proxy;
+                        updateDevices();
+                    }
+                }
+
+                @Override
+                public void onServiceDisconnected(int profile) {
+                    // The logic is the same as the logic of onServiceConnected.
+                    onServiceConnected(profile, /* proxy */ null);
+                }
+            };
+
+        return
+            adapter.getProfileProxy(
+                    context,
+                    listener,
+                    BluetoothProfile.HEADSET);
+    }
+
+    /**
+     * Returns the current headset availability.
+     *
+     * @return true if there is a Bluetooth headset connected, false otherwise.
+     */
+    public boolean isHeadsetAvailable() {
+        return headsetAvailable;
+    }
+
+    private void onBluetoothReceiverReceive(Context context, Intent intent) {
+        final String action = intent.getAction();
+
+        if (action.equals(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED)) {
+            // XXX: This action will be fired when a Bluetooth headset is
+            // connected or disconnected to the system. This is not related to
+            // audio routing.
+            int state = intent.getIntExtra(BluetoothHeadset.EXTRA_STATE, -99);
+
+            switch (state) {
+            case BluetoothHeadset.STATE_CONNECTED:
+            case BluetoothHeadset.STATE_DISCONNECTED:
+                Log.d(
+                        AudioModeModule.TAG,
+                        "BT headset connection state changed: " + state);
+                updateDevices();
+                break;
+            }
+        } else if (action.equals(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED)) {
+            // XXX: This action will be fired when the connection established
+            // with a Bluetooth headset (called a SCO connection) changes state.
+            // When the SCO connection is active we route audio to it.
+            int state
+                = intent.getIntExtra(AudioManager.EXTRA_SCO_AUDIO_STATE, -99);
+
+            switch (state) {
+            case AudioManager.SCO_AUDIO_STATE_CONNECTED:
+            case AudioManager.SCO_AUDIO_STATE_DISCONNECTED:
+                Log.d(
+                        AudioModeModule.TAG,
+                        "BT SCO connection state changed: " + state);
+                updateDevices();
+                break;
+            }
+        }
+    }
+
+    private void registerBluetoothReceiver() {
+        BroadcastReceiver receiver = new BroadcastReceiver() {
+            @Override
+            public void onReceive(Context context, Intent intent) {
+                onBluetoothReceiverReceive(context, intent);
+            }
+        };
+        IntentFilter filter = new IntentFilter();
+
+        filter.addAction(AudioManager.ACTION_SCO_AUDIO_STATE_UPDATED);
+        filter.addAction(BluetoothHeadset.ACTION_CONNECTION_STATE_CHANGED);
+        context.registerReceiver(receiver, filter);
+    }
+
+    /**
+     * Detects if there are new devices connected / disconnected and fires the
+     * {@link AudioModeModule#onAudioDeviceChange()} callback.
+     */
+    private void updateDevices() {
+        mainThreadHandler.post(updateDevicesRunnable);
+    }
+}

android/app/src/main/java/org/jitsi/meet/proximity/ProximityModule.java

@@ -0,0 +1,101 @@
+package org.jitsi.meet.proximity;
+
+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.
+ */
+public class ProximityModule extends ReactContextBaseJavaModule {
+    /**
+     * React Native module name.
+     */
+    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/app/src/main/java/org/jitsi/meet/proximity/ProximityPackage.java

@@ -0,0 +1,48 @@
+package org.jitsi.meet.proximity;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.JavaScriptModule;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * Implements {@link ReactPackage} for {@link ProximityModule}.
+ */
+public class ProximityPackage implements ReactPackage {
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<Class<? extends JavaScriptModule>> createJSModules() {
+        return Collections.emptyList();
+    }
+
+    /**
+     * {@inheritDoc}
+     *
+     * @return List of native modules to be exposed by React Native.
+     */
+    @Override
+    public List<NativeModule> createNativeModules(
+            ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+
+        modules.add(new ProximityModule(reactContext));
+
+        return modules;
+    }
+
+    /**
+     * {@inheritDoc}
+     */
+    @Override
+    public List<ViewManager> createViewManagers(
+            ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

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,9 @@
+<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,24 @@
+// Top-level build file where you can add configuration options common to all sub-projects/modules.
+
+buildscript {
+    repositories {
+        jcenter()
+    }
+    dependencies {
+        classpath 'com.android.tools.build:gradle:2.2.3'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+    }
+}

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,5 @@
+distributionBase=GRADLE_USER_HOME
+distributionPath=wrapper/dists
+zipStoreBase=GRADLE_USER_HOME
+zipStorePath=wrapper/dists
+distributionUrl=https\://services.gradle.org/distributions/gradle-2.14.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/settings.gradle

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

app.js

@@ -1,63 +1,27 @@
-/* global $, JitsiMeetJS, config, getRoomName */
 /* application specific logic */
 
-import "babel-polyfill";
 import "jquery";
 import "jquery-contextmenu";
 import "jquery-ui";
 import "strophe";
 import "strophe-disco";
-import "strophe-caps";
-import "tooltip";
-import "popover";
 import "jQuery-Impromptu";
 import "autosize";
-window.toastr = require("toastr");
 
-import URLProcessor from "./modules/config/URLProcessor";
-import RoomnameGenerator from './modules/util/RoomnameGenerator';
+import 'aui';
+import 'aui-experimental';
+import 'aui-css';
+import 'aui-experimental-css';
+
+window.toastr = require("toastr");
 
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
 import API from './modules/API/API';
 
-import UIEvents from './service/UI/UIEvents';
-
-/**
- * Tries to push history state with the following parameters:
- * 'VideoChat', `Room: ${roomName}`, URL. If fail, prints the error and returns
- * it.
- */
-function pushHistoryState(roomName, URL) {
-    try {
-        window.history.pushState(
-            'VideoChat', `Room: ${roomName}`, URL
-        );
-    } catch (e) {
-        console.warn("Push history state failed with parameters:",
-            'VideoChat', `Room: ${roomName}`, URL, e);
-        return e;
-    }
-    return null;
-}
-
-/**
- * Builds and returns the room name.
- */
-function buildRoomName () {
-    let roomName = getRoomName();
-
-    if(!roomName) {
-        let word = RoomnameGenerator.generateRoomWithoutSeparator();
-        roomName = word.toLowerCase();
-        let historyURL = window.location.href + word;
-        //Trying to push state with current URL + roomName
-        pushHistoryState(word, historyURL);
-    }
-
-    return roomName;
-}
+import translation from "./modules/translation/translation";
+import remoteControl from "./modules/remotecontrol/RemoteControl";
 
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
@@ -77,87 +41,34 @@ const APP = {
     UI,
     settings,
     conference,
+    translation,
+    /**
+     * The log collector which captures JS console logs for this app.
+     * @type {LogCollector}
+     */
+    logCollector: null,
+    /**
+     * Indicates if the log collector has been started (it will not be started
+     * if the welcome page is displayed).
+     */
+    logCollectorStarted : false,
+    /**
+     * After the APP has been initialized provides utility methods for dealing
+     * with the conference room URL(address).
+     * @type ConferenceUrl
+     */
+    ConferenceUrl : null,
     connection: null,
     API,
-    init () {
-        this.keyboardshortcut =
-            require("./modules/keyboardshortcut/keyboardshortcut");
-        this.translation = require("./modules/translation/translation");
-        this.configFetch = require("./modules/config/HttpConfigFetch");
-    }
+    remoteControl
 };
 
-function init() {
-    var isUIReady = APP.UI.start();
-    if (isUIReady) {
-        APP.conference.init({roomName: buildRoomName()}).then(function () {
-            APP.UI.initConference();
-
-            APP.UI.addListener(UIEvents.LANG_CHANGED, function (language) {
-                APP.translation.setLanguage(language);
-                APP.settings.setLanguage(language);
-            });
-
-            APP.keyboardshortcut.init();
-        }).catch(function (err) {
-            console.error(err);
-        });
-    }
-}
-
-/**
- * If we have an HTTP endpoint for getting config.json configured we're going to
- * read it and override properties from config.js and interfaceConfig.js.
- * If there is no endpoint we'll just continue with initialization.
- * Keep in mind that if the endpoint has been configured and we fail to obtain
- * the config for any reason then the conference won't start and error message
- * will be displayed to the user.
- */
-function obtainConfigAndInit() {
-    let roomName = APP.conference.roomName;
-
-    if (config.configLocation) {
-        APP.configFetch.obtainConfig(
-            config.configLocation, roomName,
-            // Get config result callback
-            function(success, error) {
-                if (success) {
-                    var now = APP.connectionTimes["configuration.fetched"] =
-                        window.performance.now();
-                    console.log("(TIME) configuration fetched:\t", now);
-                    init();
-                } else {
-                    // Show obtain config error,
-                    // pass the error object for report
-                    APP.UI.messageHandler.openReportDialog(
-                        null, "dialog.connectError", error);
-                }
-            });
-    } else {
-        require("./modules/config/BoshAddressChoice").chooseAddress(
-            config, roomName);
-
-        init();
-    }
-}
-
-
-$(document).ready(function () {
-    var now = APP.connectionTimes["document.ready"] = window.performance.now();
-    console.log("(TIME) document ready:\t", now);
-
-    URLProcessor.setConfigParametersFromUrl();
-    APP.init();
-
-    APP.translation.init(settings.getLanguage());
-
-    APP.API.init();
-
-    obtainConfigAndInit();
-});
-
-$(window).bind('beforeunload', function () {
-    APP.API.dispose();
-});
+// TODO The execution of the mobile app starts from react/index.native.js.
+// Similarly, the execution of the Web app should start from react/index.web.js
+// for the sake of consistency and ease of understanding. Temporarily though
+// because we are at the beginning of introducing React into the Web app, allow
+// the execution of the Web app to start from app.js in order to reduce the
+// complexity of the beginning step.
+require('./react');
 
 module.exports = APP;

config.js

@@ -1,5 +1,6 @@
-/* jshint -W101 */
-var config = {
+/* jshint maxlen:false */
+
+var config = { // eslint-disable-line no-unused-vars
 //    configLocation: './config.json', // see ./modules/HttpConfigFetch.js
     hosts: {
         domain: 'jitsi-meet.example.com',
@@ -19,13 +20,20 @@ var config = {
     //focusUserJid: 'focus@auth.jitsi-meet.example.com', // The real JID of focus participant - can be overridden here
     //defaultSipNumber: '', // Default SIP number
 
-    // Desktop sharing method. Can be set to 'ext', 'webrtc' or false to disable.
-    desktopSharingChromeMethod: 'ext',
+    // The STUN servers that will be used in the peer to peer connections
+    p2pStunServers: [
+        { urls: "stun:stun.l.google.com:19302" },
+        { urls: "stun:stun1.l.google.com:19302" },
+        { urls: "stun:stun2.l.google.com:19302" }
+    ],
+
     // The ID of the jidesha extension for Chrome.
-    desktopSharingChromeExtId: 'diibjkoicjeejcmhdnailmkgecihlobk',
+    desktopSharingChromeExtId: null,
+    // Whether desktop sharing should be disabled on Chrome.
+    desktopSharingChromeDisabled: true,
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: ['screen', 'window'],
+    desktopSharingChromeSources: ['screen', 'window', 'tab'],
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
@@ -39,7 +47,7 @@ var config = {
     // 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,
 
@@ -52,12 +60,11 @@ var config = {
     disableStats: false,
     disableAudioLevels: false,
     channelLastN: -1, // The default value of the channel attribute last-n.
-    adaptiveLastN: false,
-    //disableAdaptiveSimulcast: false,
     enableRecording: false,
     enableWelcomePage: true,
+    //enableClosePage: false, // enabling the close page will ignore the welcome
+                              // page redirection when call is hangup
     disableSimulcast: false,
-    logStats: false, // Enable logging of PeerConnection stats via the focus
 //    requireDisplayName: true, // Forces the participants that doesn't have display name to enter it when they enter the room.
 //    startAudioMuted: 10, // every participant after the Nth will start audio muted
 //    startVideoMuted: 10, // every participant after the Nth will start video muted
@@ -69,5 +76,24 @@ var config = {
     'During that time service will not be available. ' +
     'Apologise for inconvenience.',*/
     disableThirdPartyRequests: false,
-    minHDHeight: 540
+    minHDHeight: 540,
+    // If true - all users without token will be considered guests and all users
+    // with token will be considered non-guests. Only guests will be allowed to
+    // edit their profile.
+    enableUserRolesBasedOnToken: false,
+    // Suspending video might cause problems with audio playback. Disabling until these are fixed.
+    disableSuspendVideo: true,
+    // disables or enables RTX (RFC 4588) (defaults to false).
+    disableRtx: false,
+    // Sets the preferred resolution (height) for local video. Defaults to 360.
+    resolution: 720,
+    // Enables peer to peer mode. When enabled system will try to establish
+    // direct connection given that there are exactly 2 participants in
+    // the room. If that succeeds the conference will stop sending data through
+    // the JVB and use the peer to peer connection instead. When 3rd participant
+    // joins the conference will be moved back to the JVB connection.
+    //enableP2P: true
+    // How long we're going to wait, before going back to P2P after
+    // the 3rd participant has left the conference (to filter out page reload)
+    //backToP2PDelay: 5
 };

connection.js

@@ -1,6 +1,16 @@
 /* global APP, JitsiMeetJS, config */
-//FIXME:
-import LoginDialog from './modules/UI/authentication/LoginDialog';
+const logger = require("jitsi-meet-logger").getLogger(__filename);
+
+import AuthHandler from './modules/UI/authentication/AuthHandler';
+import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
+
+import {
+    connectionEstablished,
+    connectionFailed
+} from './react/features/base/connection';
+import {
+    isFatalJitsiConnectionError
+} from './react/features/base/lib-jitsi-meet';
 
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -65,6 +75,18 @@ function connect(id, password, roomName) {
         connection.addEventListener(
             ConnectionEvents.CONNECTION_FAILED, handleConnectionFailed
         );
+        connection.addEventListener(
+            ConnectionEvents.CONNECTION_FAILED, connectionFailedHandler);
+
+        function connectionFailedHandler(error, errMsg) {
+            APP.store.dispatch(connectionFailed(connection, error, errMsg));
+
+            if (isFatalJitsiConnectionError(error)) {
+                connection.removeEventListener(
+                    ConnectionEvents.CONNECTION_FAILED,
+                    connectionFailedHandler);
+            }
+        }
 
         function unsubscribe() {
             connection.removeEventListener(
@@ -78,13 +100,14 @@ function connect(id, password, roomName) {
         }
 
         function handleConnectionEstablished() {
+            APP.store.dispatch(connectionEstablished(connection));
             unsubscribe();
             resolve(connection);
         }
 
         function handleConnectionFailed(err) {
             unsubscribe();
-            console.error("CONNECTION FAILED:", err);
+            logger.error("CONNECTION FAILED:", err);
             reject(err);
         }
 
@@ -92,33 +115,6 @@ function connect(id, password, roomName) {
     });
 }
 
-/**
- * Show Authentication Dialog and try to connect with new credentials.
- * If failed to connect because of PASSWORD_REQUIRED error
- * then ask for password again.
- * @param {string} [roomName]
- * @returns {Promise<JitsiConnection>}
- */
-function requestAuth(roomName) {
-    return new Promise(function (resolve, reject) {
-        let authDialog = LoginDialog.showAuthDialog(
-            function (id, password) {
-                connect(id, password, roomName).then(function (connection) {
-                    authDialog.close();
-                    resolve(connection);
-                }, function (err) {
-                    if (err === ConnectionErrors.PASSWORD_REQUIRED) {
-                        authDialog.displayError(err);
-                    } else {
-                        authDialog.close();
-                        reject(err);
-                    }
-                });
-            }
-        );
-    });
-}
-
 /**
  * Open JitsiConnection using provided credentials.
  * If retry option is true it will show auth dialog on PASSWORD_REQUIRED error.
@@ -135,9 +131,9 @@ function requestAuth(roomName) {
 export function openConnection({id, password, retry, roomName}) {
 
     let usernameOverride
-        = window.localStorage.getItem("xmpp_username_override");
+        = jitsiLocalStorage.getItem("xmpp_username_override");
     let passwordOverride
-        = window.localStorage.getItem("xmpp_password_override");
+        = jitsiLocalStorage.getItem("xmpp_password_override");
 
     if (usernameOverride && usernameOverride.length > 0) {
         id = usernameOverride;
@@ -157,7 +153,7 @@ export function openConnection({id, password, retry, roomName}) {
             if (config.token) {
                 throw err;
             } else {
-                return requestAuth(roomName);
+                return AuthHandler.requestAuth(roomName, connect);
             }
         } else {
             throw err;

connection_optimization/.eslintrc.js

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

connection_optimization/do_external_connect.js

@@ -1,73 +1,87 @@
-/* global config, getRoomName, getConfigParamsFromUrl */
-/* global createConnectionExternally */
+/* global config,
+          createConnectionExternally,
+          getConfigParamsFromUrl,
+          getRoomName */
+
 /**
- * Implements extrnal connect using createConnectionExtenally function defined
+ * Implements external connect using createConnectionExternally function defined
  * in external_connect.js for Jitsi Meet. Parses the room name and token from
- * the url and executes createConnectionExtenally.
+ * 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.
+ * file as reference only because the implementation is Jitsi Meet-specific.
  *
  * NOTE: For optimal results this file should be included right after
- * exrnal_connect.js.
+ * external_connect.js.
  */
 
+const hashParams = getConfigParamsFromUrl('hash', true);
+const searchParams = getConfigParamsFromUrl('search', true);
+
+// URL params have higher proirity than config params.
+let url
+    = hashParams.hasOwnProperty('config.externalConnectUrl')
+        ? hashParams['config.externalConnectUrl']
+        : config.externalConnectUrl;
+
+if (url && window.createConnectionExternally) {
+    const roomName = getRoomName();
+
+    if (roomName) {
+        url += `?room=${roomName}`;
+
+        const token
+            = hashParams['config.token'] || config.token || searchParams.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();
+}
+
 /**
- * Executes createConnectionExternally function.
+ * Check if connect from connection.js was executed and executes the handler
+ * that is going to finish the connect work.
+ *
+ * @returns {void}
  */
-(function () {
-    var params = getConfigParamsFromUrl();
-    
-    //Url params have higher proirity than config params
-    var url = config.externalConnectUrl;
-    if(params.hasOwnProperty('config.externalConnectUrl'))
-        url = params["config.externalConnectUrl"];
+function checkForConnectHandlerAndConnect() {
+    window.APP
+        && window.APP.connect.status === 'ready'
+        && window.APP.connect.handler();
+}
 
-    /**
-     * Check if connect from connection.js was executed and executes the handler
-     * that is going to finish the connect work.
-     */
-    function checkForConnectHandlerAndConnect() {
+/**
+ * Implements a callback to be invoked if anything goes wrong.
+ *
+ * @param {Error} error - The specifics of what went wrong.
+ * @returns {void}
+ */
+function errorCallback(error) {
+    // The value of error is undefined if external connect is disabled.
+    error && console.warn(error);
 
-        if(window.APP && window.APP.connect.status === "ready") {
-            window.APP.connect.handler();
-        }
-    }
-
-    function error_callback(error){
-        if(error) //error=undefined if external connect is disabled.
-            console.warn(error);
-        // Sets that global variable to be used later by connect method in
-        // connection.js
-        window.XMPPAttachInfo = {
-            status: "error"
-        };
-        checkForConnectHandlerAndConnect();
-    }
-
-    if(!url || !window.createConnectionExternally) {
-        error_callback();
-        return;
-    }
-    var room_name = getRoomName();
-    if(!room_name) {
-        error_callback();
-        return;
-    }
-
-    url += "?room=" + room_name;
-
-    var token = params["config.token"] || config.token;
-    if(token)
-        url += "&token=" + token;
-
-    createConnectionExternally(url, function(connectionInfo) {
-        // Sets that global variable to be used later by connect method in
-        // connection.js
-        window.XMPPAttachInfo = {
-            status: "success",
-            data: connectionInfo
-        };
-        checkForConnectHandlerAndConnect();
-    }, error_callback);
-})();
+    // 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,147 @@
+* {
+    -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;
+    color: $inputColor;
+    font-size: 1em;
+}
+
+button, select, input[type="button"],
+input[type="reset"], input[type="submit"] {
+    height: 32px;
+    line-height: 32px;
+    padding-left: 4px;
+    padding-right: 4px;
+    cursor: pointer;
+}
+
+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: 186px;
+    height: 74px;
+    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;
+}
+
+/**
+* Tooltips
+**/
+.tipsy {
+    z-index: $tooltipsZ;
+    &-inner {
+        background-color: $tooltipBg;
+        max-width: 350px;
+    }
+
+    &-arrow {
+        border-color: $tooltipBg;
+    }
+}
+
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+    visibility: visible;
+}
+
+#inviteLinkRef {
+    -webkit-user-select: text;
+    user-select: text;
+}

css/_chat.scss

@@ -1,10 +1,4 @@
-#chatspace {
-    display: none;
-    background-color: black;
-    border-left: 1px solid #424242;
-}
-
-#chatspace * {
+#chat_container * {
     -webkit-user-select: text;
     user-select: text;
 }
@@ -19,11 +13,27 @@
     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;
+    }
 }
-#chatspace.is-conversation-mode #chatconversation {
+
+#chat_container.is-conversation-mode #chatconversation {
     visibility: visible;
 }
 
@@ -65,7 +75,7 @@
     box-shadow: none;
 }
 
-#chatspace.is-conversation-mode #usermsg {
+#chat_container.is-conversation-mode #usermsg {
     visibility: visible;
 }
 
@@ -80,7 +90,7 @@
     width: 95%;
 }
 
-#chatspace.is-conversation-mode #nickname {
+#chat_container.is-conversation-mode #nickname {
     visibility: hidden;
 }
 
@@ -93,31 +103,23 @@
     color: #a7a7a7;
 }
 
-#unreadMessages {
-    font-size: 8px;
-    position: absolute;
-}
-
-#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;
 }
@@ -131,7 +133,7 @@
 .chatmessage {
     background: #3a3a3a;
     width: 93%;
-    margin-left: 5%;
+    margin-left: 9px;
     margin-right: auto;
     border-radius: 5px;
     border-top-left-radius: 0px;
@@ -178,7 +180,7 @@
     visibility: hidden;
 }
 
-#chatspace.is-conversation-mode #smileysarea {
+#chat_container.is-conversation-mode #smileysarea {
     visibility: visible;
 }
 
@@ -210,24 +212,24 @@
     line-height: 30px;
 }
 
-::-webkit-scrollbar {
+:not(.default-scrollbar)::-webkit-scrollbar {
     background: #06a5df;
     width: 7px;
 }
 
-::-webkit-scrollbar-button {
+:not(.default-scrollbar)::-webkit-scrollbar-button {
     display: none;
 }
 
-::-webkit-scrollbar-track {
+:not(.default-scrollbar)::-webkit-scrollbar-track {
     background: black;
 }
 
-::-webkit-scrollbar-track-piece {
+:not(.default-scrollbar)::-webkit-scrollbar-track-piece {
     background: black;
 }
 
-::-webkit-scrollbar-thumb {
+:not(.default-scrollbar)::-webkit-scrollbar-thumb {
     background: #06a5df;
     border-radius: 4px;
 }
@@ -235,19 +237,3 @@
 #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,43 @@
+%connection-info {
+    text-align: left;
+    font-size: 12px;
+    font-weight: 400;
+    color: $popoverFontColor;
+
+    td {
+        padding: 2px 0;
+    }
+}
+
+.connection-info
+{
+    float: left;
+    padding: 5px;
+    padding-left: 0;
+    @extend %connection-info;
+
+    > table {
+        white-space: nowrap;
+        @extend %connection-info;
+    }
+
+    td:nth-child(n-1) {
+        padding-left: 5px;
+    }
+
+    &__icon {
+        margin-right: 2px;
+    }
+
+    &__download
+    {
+        @extend .connection-info__icon;
+        color: $downloadConnectionIconColor;
+    }
+
+    &__upload
+    {
+        @extend .connection-info__icon;
+        color: $uploadConnectionIconColor;
+    }
+}

css/_contact_list.scss

@@ -0,0 +1,61 @@
+#contacts_container {
+    cursor: default;
+
+    > ul#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 {
+
+    >li {
+        display: block;
+        list-style-type: none;
+        text-align: left;
+        white-space: nowrap;
+        color: $baseLight;
+        font-size: 16px;
+        padding: 0 10%;
+        height: 27px;
+
+        &:hover,
+        &:active {
+            background: $toolbarSelectBackground;
+        }
+
+        > p {
+            display: inline-block;
+            vertical-align: middle;
+            margin: 0px;
+            width: 100%;
+            line-height: 1.5em;
+            text-overflow: ellipsis;
+            overflow: hidden;
+        }
+    }
+}
+
+
+.avatar {
+    padding: 0px;
+    margin-right: 10px;
+    vertical-align: middle;
+    font-size: 22pt;
+    border-radius: 20px;
+    max-height: 30px;
+    max-width: 30px;
+}

css/_filmstrip.scss

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

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

@@ -16,108 +16,129 @@
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
-    line-height: 0.75em;
+    line-height: 1.22em;
     font-size: 1.22em;
+    cursor: default;
 
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-contactList:before {
-    content: "\e615";
+.icon-mic-camera-combined:before {
+  content: "\e903";
+}
+.icon-feedback:before {
+  content: "\e91d";
+}
+.icon-toggle-filmstrip:before {
+  content: "\e91c";
 }
 .icon-avatar:before {
-    content: "\e616";
+  content: "\e901";
 }
-.icon-callRetro:before {
-    content: "\e611";
-}
-.icon-callModern:before {
-    content: "\e612";
-}
-.icon-recDisable:before {
-    content: "\e613";
-}
-.icon-recEnable:before {
-    content: "\e614";
-}
-.icon-authenticate:before {
-    content: "\e1ae";
-}
-.icon-kick1:before {
-    content: "\e60f";
-}
-.icon-kick:before {
-    content: "\e610";
-}
-.icon-share-desktop:before {
-	content: "\e602";
-}
-.icon-chat-simple:before {
-	content: "\e606";
-}
-.icon-full-screen:before {
-	content: "\e60d";
-}
-.icon-exit-full-screen:before {
-	content: "\e60e";
-}
-.icon-link:before {
-	content: "\e600";
+.icon-hangup:before {
+  content: "\e905";
 }
 .icon-chat:before {
-	content: "\e601";
+  content: "\e906";
 }
-.icon-presentation:before {
-	content: "\e603";
+.icon-download:before {
+  content: "\e902";
 }
-.icon-security:before {
-	content: "\e604";
+.icon-dialpad:before {
+  content: "\e61c";
+}
+.icon-edit:before {
+  content: "\e907";
 }
 .icon-share-doc:before {
-	content: "\e605";
+  content: "\e908";
 }
 .icon-telephone:before {
-    content: "\e611";
+  content: "\e909";
+}
+.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: "\e607";
+  content: "\e90e";
 }
-.icon-camera:before {
-	content: "\e608";
-}
-.icon-camera-disabled:before {
-	content: "\e609";
-}
-.icon-mic-disabled:before {
-	content: "\e60a";
+.icon-reload:before {
+  content: "\e90f";
 }
 .icon-microphone:before {
-	content: "\e60b";
+  content: "\e910";
 }
-
-.icon-hangup:before {
-    content: "\e617";
+.icon-mic-empty:before {
+  content: "\e911";
 }
-
-.icon-reload:before {
-    content: "\e618";
+.icon-mic-disabled:before {
+  content: "\e912";
 }
-
-.icon-filmstrip:before {
-    content: "\e619";
+.icon-raised-hand:before {
+  content: "\e91e";
 }
-
-.icon-connection:before {
-    line-height: normal;
-    content: "\e61a";
+.icon-contactList:before {
+  content: "\e91b";
+}
+.icon-link:before {
+  content: "\e913";
+}
+.icon-shared-video:before {
+  content: "\e914";
 }
-
 .icon-settings:before {
-    content: "\e61b";
+  content: "\e915";
 }
-
-.icon-dialPad:before {
-    content: "\e61c";
+.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-connection-lost:before {
+  content: "\e900";
+}
+.icon-connection:before {
+  content: "\e61a";
+}
+.icon-recDisable:before {
+  content: "\e613";
+}
+.icon-recEnable:before {
+  content: "\e614";
+}
+.icon-presentation:before {
+  content: "\e603";
+}

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

css/_jitsi_popover.scss

@@ -0,0 +1,47 @@
+.jitsipopover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: $jitsipopoverZ;
+    display: none;
+    max-width: 300px;
+    min-width: 100px;
+    text-align: left;
+    color: $popoverFontColor;
+    background-color: $popoverBg;
+    background-clip: padding-box;
+    border-radius: $borderRadius;
+    /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
+    /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
+    white-space: normal;
+    margin-top: -$popoverMenuPadding;
+
+    &__menu-padding {
+        height: $popoverMenuPadding;
+        width: 100px;
+        position: absolute;
+        bottom: -$popoverMenuPadding;
+    }
+
+    &__showmore {
+        display: block;
+        text-align: center;
+        width: 90px;
+        margin: 10px auto;
+    }
+
+    > .arrow {
+        position: absolute;
+        display: block;
+        left: 50%;
+        bottom: -5px;
+        margin-left: -5px;
+        width: 0;
+        height: 0;
+        border-color: transparent;
+        border-top-color: $popoverBg;
+        border-style: solid;
+        border-width: 5px;
+        border-bottom-width: 0;
+    }
+}

css/_jquery-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

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

css/_keyboard-shortcuts.scss

@@ -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

@@ -2,7 +2,7 @@
   position: absolute;
   top: 0;
   left: 0;
-  z-index: 1010;
+  z-index: $popoverZ;
   display: none;
   max-width: 300px;
   min-width: 100px;
@@ -121,4 +121,4 @@
   border-right-width: 0;
   border-left-color: #ffffff;
   bottom: -10px;
-}
+}

css/_popup_menu.scss

@@ -0,0 +1,79 @@
+/**
+* Initialize
+**/
+
+.popupmenu {
+    padding: 0;
+    margin: 2px 0;
+    bottom: 0;
+    height: auto;
+
+    &:first-child {
+        margin-top: 2px;
+    }
+
+    &__item {
+        list-style-type: none;
+        text-align: left;
+        height: 35px;
+
+        &:hover {
+            background-color: $popupMenuSelectedItemBackground;
+        }
+    }
+
+    // Link Appearance
+    &__link,
+    &__contents {
+        display: block;
+        box-sizing: border-box;
+        text-decoration: none;
+        color: #fff;
+        padding: 5px;
+        height: 100%;
+        font-size: 9pt;
+        width: 100%;
+        cursor: hand;
+
+        &.disabled {
+            color: gray !important;
+            pointer-events: none;
+        }
+    }
+
+    &__text,
+    &__slider {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &__slider {
+        width: 50px;
+    }
+
+    &__icon {
+        vertical-align: middle;
+        position: relative;
+        display: inline-block;
+        width: 20px;
+        height: 100%;
+        text-align: center;
+
+        > * {
+            @include absoluteAligning();
+        }
+    }
+
+    .icon-kick {
+        font-size: 8pt;
+    }
+}
+
+span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
+    display:block !important;
+}
+
+.remote-control-spinner {
+    top: 6px;
+    left: 2px;
+}

css/_recording.scss

@@ -0,0 +1,4 @@
+.recordingSpinner {
+    display: none;
+    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: rgba(0,0,0,0.8);
+    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/_toastr.scss

@@ -0,0 +1,107 @@
+/*
+ * Toastr
+ * Copyright 2012-2014 John Papa and Hans Fjällemark.
+ * All Rights Reserved.
+ * Use, reproduction, distribution, and modification of this code is subject to the terms and
+ * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
+ *
+ * Author: John Papa and Hans Fjällemark
+ * Project: https://github.com/CodeSeven/toastr
+ *
+ * Last updated: October 13, 2016
+ */
+
+.toast-title,
+.toast-message .nickname {
+  font-weight: bold;
+  margin: 0 0 3px;
+  @include text-truncate;
+}
+
+.toast-message {
+  -ms-word-wrap: break-word;
+  word-wrap: break-word;
+}
+
+.toast-message a,
+.toast-message label,
+.toast-message .connected,
+.toast-message .disconnected {
+  color: $notificationLinkColor;
+  text-decoration: none;
+}
+
+.toast-message a:hover {
+  text-decoration: underline;
+}
+
+.toast-message br {
+  display: none;
+}
+
+// close button
+.toast-close-button {
+  color: $notificationColor;
+  background: transparent;
+
+  font-size: 15px;
+  line-height: 1.2;
+
+  height: 20px;
+  width: 20px;
+  padding: 0;
+  border: 0;
+  margin: -6px -10px 0 0;
+  float: right;
+
+  cursor: pointer;
+  @include opacity(0.4);
+  /* Additional properties for button version
+  iOS requires the button element instead of an anchor tag.
+  If you want the anchor version, it requires `href="#"`. */
+  -webkit-appearance: none;
+}
+
+.toast-close-button:hover,
+.toast-close-button:focus {
+  @include opacity(1);
+}
+
+
+.toast {
+  color: $notificationColor;
+  background-color: $notificationBackground;
+
+  font-size: $notificationFontSize;
+
+  padding: $notificationPadding;
+  border: 1px solid lighten($notificationBackground, 10%);
+
+  @include border-radius($notificationBorderRadius);
+  @include box-shadow(1px, 1px, 2px, rgba(0,0,0,0.3));
+  @include opacity($notificationOpacity);
+}
+
+.toast:hover {
+  @include opacity(1);
+}
+
+#toast-container {
+  position: fixed;
+  z-index: $notificationZ;
+}
+
+#toast-container.notification-bottom-right {
+  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
+  bottom: 135px;
+  right: $filmstripToggleButtonWidth + $videoOffset;
+}
+
+#toast-container * {
+  @include box-sizing(border-box);
+}
+
+#toast-container .toast {
+  width: $notificationWidth;
+  margin: 0 0 8px;
+}

css/_toolbars.scss

@@ -0,0 +1,356 @@
+/**
+ * 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 button styles.
+  */
+.button {
+    color: #FFFFFF;
+    cursor: pointer;
+    z-index: $zindex1;
+    display: inline-block;
+    font-size: $toolbarFontSize !important;
+    height: 50px;
+    line-height: 50px !important;
+    position: relative;
+    text-align: center;
+    top:0px;
+    vertical-align: middle;
+    width: 50px;
+
+    &_hangup {
+        color: $hangupColor;
+        font-size: $hangupFontSize !important;
+    }
+
+    &[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;
+        }
+    }
+}
+
+.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 {
+    background-color: $toolbarBackground;
+    height: 100%;
+    pointer-events: auto;
+    position: relative;
+    z-index: $toolbarZ;
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    &__splitter {
+        background: $splitterColor;
+        display: inline-block;
+        height: 50%;
+        margin: 0 $splitterToolbarButtonMargin;
+        vertical-align: middle;
+        width: 1px;
+    }
+
+    /**
+     * Primary toolbar styles.
+     */
+    &_primary {
+        position: absolute;
+        left: 50%;
+        top: 30px;
+        display: inline-block;
+        width: auto;
+        height: $defaultToolbarSize;
+        border-radius: 3px;
+        opacity: 0;
+
+        @include transform(translateX(-50%));
+
+        .button:first-child {
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        }
+        .button:last-child {
+            border-bottom-right-radius: 3px;
+            border-top-right-radius: 3px;
+        }
+    }
+
+    &_primary a.button:last-child::after {
+        content: none;
+    }
+
+    /**
+     * Secondary toolbar styles.
+     */
+    &_secondary {
+        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: 10px;
+        top: 0;
+        transform: translateX(-100%);
+        width: $defaultToolbarSize;
+        -webkit-transform: translateX(-100%);
+
+        .button.toggled:not(.icon-raised-hand) {
+            background: $toolbarSelectBackground;
+            cursor: pointer;
+            text-decoration: none;
+
+            &.unclickable {
+                cursor: default;
+
+                &:hover, &:active, &.selected {
+                    background: none;
+                    cursor: default;
+                }
+            }
+        }
+    }
+
+    /**
+     * Styles the toolbar in filmstrip-only mode.
+     */
+    &_filmstrip-only {
+        border-radius: 3px;
+        bottom: 0;
+        display: inline-block;
+        height: auto;
+        position: absolute;
+        right: 0;
+        width: $defaultToolbarSize;
+
+        .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;
+    }
+}
+
+.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);
+    }
+}
+
+a.button>#avatar {
+    border-radius: 50%;
+    padding-bottom: 10px;
+    padding-top: 10px;
+    width: 30px;
+}
+
+#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,161 @@
+@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;
+$tooltipBg: rgba(0,0,0, 0.7);
+
+/**
+ * Toolbar
+ */
+$defaultToolbarSize: 50px;
+$splitterToolbarButtonMargin: 18px;
+$toolbarBackground: rgba(0, 0, 0, 0.5);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+$toolbarFontSize: 1.9em;
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
+$toolbarToggleBackground: #12499C;
+
+/**
+ * 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;
+$modalTextColor: #333;
+
+/**
+ * Notifications
+ */
+$notificationFontSize: 13px;
+$notificationColor: #FFFFFF;
+$notificationBackground: $tooltipBg;
+$notificationTitleColor: $notificationColor;
+$notificationMessageColor: $notificationColor;
+$notificationLinkColor: $notificationColor;
+$notificationOpacity: 0.9;
+$notificationPadding: 15px 20px;
+$notificationBorderRadius: 4px;
+$notificationWidth: 215px;
+
+/**
+ * Misc.
+ */
+$borderRadius: 4px;
+$defaultWatermarkLink: '../images/watermark.png';
+$sidebarWidth: 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: 400;
+$tooltipsZ: 401;
+$dropdownMaskZ: 900;
+$dropdownZ: 901;
+$overlayZ: 902;
+$jitsipopoverZ: 1010;
+$centeredVideoLabelZ: 1011;
+$notificationZ: 1012;
+$popoverZ: 1015;
+
+
+/**
+ * Font Colors
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+
+/**
+ * Forms
+ */
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+/**
+ * Unsupported browser
+ */
+$primaryUnsupportedBrowserButtonBgColor: #17a0db;
+$unsupportedBrowserButtonBgColor: #ff9a00;
+$unsupportedBrowserTextColor: #4a4a4a;
+$unsupportedBrowserTextSmallFontSize: 17px;
+$unsupportedBrowserTitleColor: #fff;
+$unsupportedBrowserTitleFontSize: 24px;
+$unsupportedDesktopBrowserTextColor: rgba(255, 255, 255, 0.7);
+$unsupportedDesktopBrowserTextFontSize: 21px;

css/_videolayout_default.scss

@@ -0,0 +1,531 @@
+#videoconference_page {
+    min-height: 100%;
+}
+
+#videospace {
+    display: block;
+    min-height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    overflow: hidden;
+}
+
+.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;
+        z-index: $zindex3;
+        width: 100%;
+        box-sizing: border-box; // Includes the padding in the 100% width.
+    }
+
+    &__toolbar {
+        bottom: 0;
+        padding: 0 5px 0 5px;
+        height: $thumbnailToolbarHeight;
+    }
+
+    &__toptoolbar {
+        $toolbarPadding: 5px;
+        top: 0;
+        padding: $toolbarPadding;
+        padding-bottom: 0;
+
+        span.indicator {
+            position: relative;
+            font-size: 8px;
+            text-align: center;
+            line-height: $thumbnailIndicatorSize;
+            display: none;
+            padding: 0;
+            margin-right: em(5, 8);
+            float: left;
+            @include circle($thumbnailIndicatorSize);
+            box-sizing: border-box;
+            z-index: $zindex3;
+            background: $dominantSpeakerBg;
+            color: $thumbnailPictogramColor;
+            border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            .indicatoricon {
+                @include absoluteAligning();
+            }
+
+            .connection {
+                position: relative;
+                display: inline-block;
+                margin: 0 auto;
+                left: 0;
+                @include transform(translate(0, -50%));
+
+                &_empty
+                {
+                    color: #8B8B8B;/*#FFFFFF*/
+                    overflow: hidden;
+                }
+
+                &_lost
+                {
+                    color: #8B8B8B;
+                    overflow: visible;
+                }
+
+                &_full
+                {
+                    @include topLeft();
+                    color: #FFFFFF;/*#15A1ED*/
+                    overflow: hidden;
+                }
+            }
+
+            .icon-connection,
+            .icon-connection-lost {
+                font-size: 1em;
+            }
+        }
+    }
+
+    &__hoverOverlay {
+        background: rgba(0,0,0,.6);
+        border-radius: $borderRadius;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        z-index: $zindex2;
+    }
+}
+
+#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;
+}
+
+#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;
+    float: left;
+}
+
+/**
+ * Toolbar icon internal i elements (font icons).
+ */
+.toolbar-icon>i {
+    line-height: $thumbnailToolbarHeight;
+}
+
+/**
+ * Toolbar icons positioned on the right.
+ */
+.toolbar-icon.right {
+  float: right;
+  margin: 0px 0px 0px 5px;
+}
+
+#raisehandindicator {
+  background: $raiseHandBg;
+}
+
+#connectionindicator {
+  background: $connectionIndicatorBg;
+}
+
+.remotevideomenu
+{
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    right: 0;
+    margin: 7px;
+    z-index: $zindex3;
+    width: 18px;
+    height: 13px;
+    color: #FFF;
+    font-size: 8pt;
+}
+
+/**
+ * Audio indicator on video thumbnails.
+ */
+.videocontainer>span.audioindicator {
+    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%);
+}
+
+#remoteConnectionMessage {
+    display: none;
+    position: absolute;
+    width: auto;
+    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);
+
+    background: rgba(0,0,0,.5);
+    border-radius: 5px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#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);
+}
+
+.video-state-indicator {
+    background: $videoStateIndicatorBackground;
+    color: $videoStateIndicatorColor;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    min-width: 40px;
+    height: 40px;
+    padding: 10px 5px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+}
+
+#videoResolutionLabel,
+.centeredVideoLabel {
+    display: none;
+    z-index: $centeredVideoLabelZ;
+}
+
+.centeredVideoLabel {
+    bottom: 45%;
+    border-radius: 2px;
+    -webkit-transition: all 2s 2s linear;
+    transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
+}
+
+.moveToCorner {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+}
+
+.moveToCorner + .moveToCorner {
+    right: 80px;
+}

css/_welcome_page.scss

@@ -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,10 +33,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;
 }
 
 #enter_room_form {
@@ -53,48 +50,62 @@
     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: 1px;
-    -webkit-border-radius: 1px;
-    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,62 @@
+.form-control {
+    padding: 16px 0;
+
+    &:first-child {
+        padding-top: 0;
+    }
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+    &__text {
+        margin: 8px 0;
+        font-size: 1em
+    }
+
+    &__label {
+        font-size: 1em;
+        font-weight: $labelFontWeight;
+    }
+
+    &__em {
+        color: $inputControlEmColor;
+    }
+
+    &__hint {
+        margin-top: 0;
+        font-size: $hintFontSize;
+
+        span {
+            vertical-align: middle;
+        }
+
+        &_error {
+            color: $errorColor;
+        }
+    }
+
+    &__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,32 @@
+.input-control {
+    @include transition(all .2s ease-in);
+    display: inline-block;
+    width: 100%;
+    padding: 5px 7px;
+    color: $inputColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    background-color: $inputBackground;
+    margin-bottom: 8px;
+
+    &:last-child {
+        margin-bottom: inherit;
+    }
+
+    &::selection {
+        background-color: $defaultDarkSelectionColor;
+    }
+
+
+    &.error {
+        color: $errorColor;
+        border-color: $errorColor;
+    }
+}
+
+@include placeholder {
+    color: $placeHolderColor;
+}

css/components/_input-slider.scss

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

css/components/_link.scss

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

css/contact_list.css

@@ -1,54 +0,0 @@
-#contactlist {
-    display: none;
-    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;
-    max-height: 30px;
-    max-width: 30px;
-}
-
-#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;
-}

css/jitsi_popover.css

@@ -1,105 +0,0 @@
-.jitsipopover {
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1010;
-    display: none;
-    max-width: 300px;
-    min-width: 100px;
-    padding: 1px;
-    text-align: left;
-    color: #333333;
-    background-color: #ffffff;
-    background-clip: padding-box;
-    border: 1px solid #cccccc;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-    border-radius: 6px;
-    /*-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);*/
-    /*box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);*/
-    white-space: normal;
-    margin-top: -10px;
-    margin-bottom: 35px;
-}
-
-.jitsipopover.black
-{
-    background-color: rgba(0,0,0,0.8);
-    color: #ffffff;
-}
-
-.jitsipopover-content {
-    padding: 9px 14px;
-    font-size: 10pt;
-    white-space:pre-wrap;
-    text-align: center;
-}
-
-.jitsipopover > .arrow,
-.jitsipopover > .arrow:after {
-    position: absolute;
-    display: block;
-    width: 0;
-    height: 0;
-    border-color: transparent;
-    border-style: solid;
-}
-
-.jitsipopover > .arrow {
-    border-width: 11px;
-    left: 50%;
-    margin-left: -11px;
-    border-bottom-width: 0;
-    border-top-color: #999999;
-    border-top-color: rgba(0, 0, 0, 0.25);
-    bottom: -11px;
-}
-.jitsipopover > .arrow:after {
-    border-width: 10px;
-    content: " ";
-    bottom: 1px;
-    margin-left: -10px;
-    border-bottom-width: 0;
-    border-top-color: #ffffff;
-}
-
-.jitsipopover.black > .arrow:after
-{
-    border-top-color: rgba(0, 0, 0, 0.8);
-}
-
-.jitsiPopupmenuPadding {
-    height: 35px;
-    width: 100px;
-    position: absolute;
-    bottom: -35;
-}
-
-.jitsipopover_green
-{
-    color: #4abd04;
-}
-
-.jitsipopover_orange
-{
-    color: #ffa800;
-}
-
-.jitsipopover_blue
-{
-    color: #06a5df;
-}
-
-.jitsipopover_showmore
-{
-    background-color: #06a5df;
-    color: #ffffff;
-    cursor: pointer;
-    border-radius: 3px;
-    text-align: center;
-    width: 90px;
-    height: 16px;
-    padding-top: 4px;
-    padding-left: 10px;
-    padding-right: 10px;
-    margin: 15px auto 0px auto;
-}

css/login_menu.css

@@ -1,58 +0,0 @@
-/*Initialize*/
-ul.loginmenu {
-    font-family:'Helvetica Neue', Helvetica, sans-serif;
-    display:none;
-    position: absolute;
-    margin: 0;
-    padding: 5px;
-    padding-bottom: 7px;
-    top: 45px;
-    left: -5px;
-    background-color: rgba(0,0,0,0.9);
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius:8px;
-}
-
-ul.loginmenu li {
-    list-style-type: none;
-    padding: 7px;
-    color: #fff;
-    font-size: 11pt;
-    cursor: default;
-    white-space: pre;
-}
-
-ul.loginmenu:after {
-    content: url('../images/dropdownPointer.png');
-    display: block;
-    position: absolute;
-    top: -7px;
-    left: 18px;
-}
-
-li a.authButton{
-    background-color: #06a5df;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 29px;
-    padding-right: 29px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
-    display:block !important;
-}
-
-a.disabled {
-    color: gray !important;
-    pointer-events: none;
-}
-
-.loginmenuPadding {
-    width: 50px;
-    height: 30px;
-    position: absolute;
-    top: -30px;
-    left: 0px;
-}

css/main.css

@@ -1,388 +0,0 @@
-* {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
-html, body{
-    margin:0px;
-    height:100%;
-    color: #424242;
-    font-family:'Helvetica Neue', Helvetica, sans-serif;
-    font-weight: 400;
-    background: #000000;
-    overflow: hidden;
-}
-
-.right-panel {
-    display:none;
-    position:absolute;
-    float: right;
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    width: 0px;
-    max-width: 200px;
-    overflow: hidden;
-    /* background-color:#dfebf1;*/
-    background-color:#FFFFFF;
-    border-left:1px solid #424242;
-    z-index: 5;
-}
-
-#nowebrtc {
-    display:none;
-}
-
-.toolbar_span {
-    display: inline-block;
-    position: relative;
-}
-
-#toolbar a.button:last-child::after {
-    content: none;
-}
-
-.button {
-    display: inline-block;
-    position: relative;
-    color: #FFFFFF;
-    top:0px;
-    padding-top: 10px;
-    width: 38px;
-    height: 28px;
-    cursor: pointer;
-    text-align: center;
-    text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.6);
-    z-index: 1;
-    font-size: 1.22em !important;
-    vertical-align: middle;
-}
-
-.button[disabled] {
-    opacity: 0.5;
-}
-
-.toolbar_span>span {
-    display: inline-block;
-    position: absolute;
-    font-size: 7pt;
-    color: #ffffff;
-    text-align:center;
-    cursor: pointer;
-}
-
-#toolbar_button_chat, #chatBottomButton, #contactListButton, #numberOfParticipants {
-    -webkit-transition: all .5s ease-in-out;
-       -moz-transition: all .5s ease-in-out;
-            transition: all .5s ease-in-out;
-}
-/*#ffde00*/
-#toolbar_button_chat.active, #contactListButton.glowing, #chatBottomButton.glowing {
-    -webkit-text-shadow:    -1px 0 10px #00ccff,
-                            0 1px 10px #00ccff,
-                            1px 0 10px #00ccff,
-                            0 -1px 10px #00ccff;
-    -moz-text-shadow:   1px 0 10px #00ccff,
-                        0 1px 10px #00ccff,
-                        1px 0 10px #00ccff,
-                        0 -1px 10px #00ccff;
-    text-shadow:    -1px 0 10px #00ccff,
-                    0 1px 10px #00ccff,
-                    1px 0 10px #00ccff,
-                    0 -1px 10px #00ccff;
-}
-
-#toolbar_button_hangup {
-    color: #ff0000;
-    font-size: 1.4em;
-}
-
-#numberOfParticipants {
-    position: absolute;
-    top: 0px;
-    right: -1px;
-    color: white;
-    width: 13px;
-    height: 13px;
-    line-height: 13px;
-    font-weight: bold;
-    border-radius: 1px;
-    font-size: 11px;
-    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
-}
-
-#contactListButton.active #numberOfParticipants {
-    color: #00ccff;
-}
-
-#toolbar {
-    display:inline-block;
-    position:relative;
-    top:5px;
-    margin-left:auto;
-    margin-right:auto;
-    height:38px;
-    width:auto;
-    background-color: rgba(0,0,0,0.5);
-    border-radius: 1px;
-    pointer-events: auto;
-}
-
-#toolbar_button_record {
-    -webkit-transition: all .5s ease-in-out;
-    -moz-transition: all .5s ease-in-out;
-    transition: all .5s ease-in-out;
-}
-
-a.button:hover,
-a.bottomToolbarButton:hover {
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 1px;
-    -webkit-border-radius: 1px;
-}
-
-.no-fa-video-camera, .fa-microphone-slash {
-    color: #636363;
-}
-
-.bottom_button_separator {
-    display: inline-block;
-    position: relative;
-    left: 5px;
-    width: 20px;
-    height: 1px;
-    background: #373737;
-}
-
-input[type='text'], input[type='password'], textarea {
-    -webkit-user-select: text;
-    user-select: text;
-    display: inline-block;
-    font-size: 14px;
-    padding: 5px;
-    background: #f3f3f3;
-    border-radius: 3px;
-    font-weight: 100;
-    line-height: 20px;
-    height: 40px;
-    color: #333;
-    text-align: left;
-    border:1px solid #ACD8F0;
-    outline: none; /* removes the default outline */
-    resize: none; /* prevents the user-resizing, adjust to taste */
-}
-
-input[type='text'], input[type='password'], textarea:focus {
-    box-shadow: inset 0 0 3px 2px #ACD8F0; /* provides a more style-able
-                                         replacement to the outline */
-}
-
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: horizontal;
-}
-
-button.no-icon {
-    padding: 0 1em;
-}
-
-button {
-    border: none;
-    height: 35px;
-    padding: 0 1em 0 2em;
-    position: relative;
-    border-radius: 1px;
-    font-weight: bold;
-    color: #fff;
-    line-height: 35px;
-    background: #2c8ad2;
-}
-
-button, input, select, textarea {
-    margin: 0;
-    vertical-align: baseline;
-}
-
-button, input[type="button"], input[type="reset"], input[type="submit"] {
-    cursor: pointer;
-    -webkit-appearance: button;
-}
-
-form {
-    display: block;
-}
-
-#downloadlog {
-    position: absolute;
-    bottom: 5;
-    left: 5;
-    overflow: visible;
-    color: rgba(255,255,255,.50);
-}
-
-#feedbackButton {
-    position: absolute;
-    bottom: 60;
-    left: 60;
-    overflow: visible;
-    color: rgba(255,255,255,.50);
-}
-
-#feedbackButtonDiv {
-    display: none;
-    position: absolute;
-    background-color: rgba(0,0,0,.50);
-    border-radius: 50%;
-    width: 100px;
-    height: 100px;
-    bottom: -50px;
-    left: -50px;
-    z-index: 100;
-    overflow: hidden;
-    transition: all 2s ease-in-out;
-}
-
-#feedbackButtonDiv.hidden {
-    bottom: -246px;
-}
-
-div.feedbackButton:hover {
-    transform: scale(1.3);
-}
-
-#bottomToolbar {
-    display:block;
-    position: absolute;
-    right: 0;
-    margin-right: 5px;
-    bottom: 40px;
-    width: 29px;
-    border-radius: 1px;
-    color: #FFF;
-    background: rgba(0,0,0,0.5);
-    z-index: 6; /*+1 from #remoteVideos*/
-}
-
-.bottomToolbarButton {
-    display: inline-block;
-    position: relative;
-    color: #FFFFFF;
-    top: 0;
-    padding-top: 6px;
-    margin: 2px;
-    width: 25px;
-    height: 20px;
-    cursor: pointer;
-    font-size: 10pt;
-    text-align: center;
-    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
-    z-index: 1;
-}
-
-.active {
-    background-color: #00ccff;
-}
-
-.bottomToolbar_span>span {
-    display: inline-block;
-    position: absolute;
-    font-size: 7pt;
-    color: #ffffff;
-    text-align: center;
-    cursor: pointer;
-}
-
-.glow
-{
-    text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
-}
-
-.watermark {
-    display: block;
-    position: absolute;
-    top: 15;
-    width: 186px;
-    height: 74px;
-    background-size: contain;
-    background-repeat: no-repeat;
-    z-index: 2;
-}
-
-.leftwatermark {
-    display: none;
-    left: 15;
-    background-image:url(../images/watermark.png);
-    background-position: center left;
-}
-
-.rightwatermark {
-    display: none;
-    right: 15;
-    background-position: center right;
-}
-
-.poweredby {
-    display: none;
-    position: absolute;
-    left: 25;
-    bottom: 7;
-    font-size: 11pt;
-    color: rgba(255,255,255,.50);
-    text-decoration: none;
-    z-index: 100;
-}
-
-#toast-container.notification-bottom-right {
-    bottom: 140px;
-    right: 5px;
-}
-
-#toast-container.notification-bottom-right-center {
-    right: 205px;
-}
-
-#toast-container .toast-info {
-    -webkit-box-shadow: none;
-    box-shadow: none;
-}
-
-.toast-close-button {
-    right: -7px;
-    top: -19px;
-}
-
-#toast-container .toast-info {
-    background-color: black;
-    border: 1px solid #3a3a3a;
-    width: 220px;
-    padding: 10px 10px 10px 50px;
-}
-
-.connected {
-    color: forestgreen;
-    font-size: 12px;
-}
-
-.disconnected {
-    color: darkred;
-    font-size: 12px;
-}
-
-.lastN {
-    color: #a3a3a3;
-    font-size: 12px;
-}
-
-.toast-close-button:hover,
-.toast-close-button:focus {
-    color: #ffffff;
-    opacity: 1;
-    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
-    filter: alpha(opacity=100);
-}
-
-.toast-message .nickname {
-    font-weight: bold;
-}

css/main.scss

@@ -0,0 +1,75 @@
+/* Functions BEGIN */
+
+@import 'functions';
+
+/* Functions END */
+
+/* Variables BEGIN */
+
+@import 'variables';
+
+/* Variables END */
+
+/* Mixins BEGIN */
+
+@import "mixins";
+
+/* Mixins END */
+
+/* Animations BEGIN */
+
+@import "animations";
+
+/* Animations END */
+
+/* Fonts BEGIN */
+
+@import 'font';
+@import 'font-awesome';
+
+/* Fonts END */
+
+/* Modules BEGIN */
+
+@import 'toastr';
+@import 'base';
+@import 'utils';
+@import 'overlay/overlay';
+@import 'inlay';
+@import 'reload_overlay/reload_overlay';
+@import 'modals/desktop-picker/desktop-picker';
+@import 'modals/device-selection/device-selection';
+@import 'modals/dialog';
+@import 'modals/feedback/feedback';
+@import 'modals/speaker_stats/speaker_stats';
+@import 'videolayout_default';
+@import 'notice';
+@import 'popup_menu';
+@import 'recording';
+@import 'login_menu';
+@import 'popover';
+@import 'jitsi_popover';
+@import 'contact_list';
+@import 'chat';
+@import 'ringing/ringing';
+@import 'welcome_page';
+@import 'toolbars';
+@import 'side_toolbar_container';
+@import 'jquery.contextMenu';
+@import 'keyboard-shortcuts';
+@import 'redirect_page';
+@import 'components/form-control';
+@import 'components/link';
+@import 'shortcuts/main';
+@import 'components/button-control';
+@import 'components/input-control';
+@import 'components/input-slider';
+@import "modals/invite/invite";
+@import "connection-info";
+@import 'aui-components/dropdown';
+@import '404';
+@import 'policy';
+@import 'filmstrip';
+@import 'unsupported-browser/main';
+
+/* Modules END */

css/modals/_dialog.scss

@@ -0,0 +1,85 @@
+.dialog {
+    visibility: visible;
+    height: auto;
+
+    h1, h2, h3, h4, h5, h6 {
+        color: $auiDialogColor;
+    }
+
+    .aui {
+
+        &-icon {
+            color: $auiDialogColor;
+
+            &-small {
+                width: 14px;
+                height: 14px;
+            }
+        }
+
+        &-iconfont-close-dialog {
+            cursor: pointer;
+            right: 20px;
+            position: absolute;
+            top: -49px;
+        }
+
+        &-dialog2 {
+            &-header, &-footer {
+                background-color: $auiDialogBg;
+                border: none;
+            }
+
+            &-header {
+                height: em(58, 12);
+                border-bottom: 1px solid $auiBorderColor;
+
+                h2 {
+                    font-size: em(20, 12);
+                    font-weight: $dialogTitleFontWeight;
+                    color: $auiDialogColor;
+                }
+
+                &-main {
+                    padding-right: 0;
+                }
+            }
+
+            &-footer {
+                border-top: 1px solid $auiBorderColor;
+            }
+
+            &-content {
+                font-size: em(14, 12);
+                min-height: 0;
+                background-color: $auiDialogContentBg;
+                color: $auiDialogColor;
+
+                p,span, h3 {
+                    font-weight: $labelFontWeight;
+                }
+
+                &:last-child {
+                    border-bottom-right-radius: 5px;
+                    border-bottom-left-radius: 5px;
+                }
+
+                &:first-child {
+                    border-top-right-radius: 5px;
+                    border-top-left-radius: 5px;
+                }
+            }
+        }
+    }
+
+    .form-control:not(:last-child) {
+        border-bottom: 1px solid $auiBorderColor;
+    }
+}
+
+.modal-dialog-form {
+    color: $modalTextColor;
+}
+.modal-dialog-footer {
+    font-size: $modalButtonFontSize;
+}

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

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

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

@@ -0,0 +1,105 @@
+.device-selection {
+    color: $feedbackInputTextColor;
+
+    .device-selectors {
+        font-size: 14px;
+
+        /* ensure all child components do not exceed parent width */
+        button,
+        div {
+            max-width: 100%;
+        }
+
+        > div {
+            display: block;
+            margin-bottom: 10px;
+        }
+
+        > div:last-child {
+            margin-bottom: 5px;
+        }
+
+        .device-selector-icon {
+            color: inherit;
+            font-size: 20px;
+        }
+    }
+
+    .device-selection-column {
+        box-sizing: border-box;
+        display: inline-block;
+        vertical-align: top;
+
+        &.column-selectors {
+            margin-left: 15px;
+            width: 45%;
+        }
+
+        &.column-video {
+            width: 50%;
+        }
+    }
+
+    .device-selection-video-container {
+        /* TOFIX: to be removed when we move out from muted preview */
+        background: black;
+        border-radius: 3px;
+        /* TOFIX-END */
+        height: 160px;
+        margin-bottom: 5px;
+
+        .video-input-preview {
+            margin-top: 2px;
+            position: relative;
+
+            > video {
+                border-radius: 3px;
+            }
+
+            .video-input-preview-muted {
+                color: $participantNameColor;
+                display: none;
+                left: 0;
+                position: absolute;
+                right: 0;
+                text-align: center;
+                top: 50%;
+            }
+
+            &.video-muted .video-input-preview-muted {
+                display: block;
+            }
+
+            .video-input-preview-display {
+                height: 100%;
+                overflow: hidden;
+                width: 100%;
+            }
+        }
+    }
+
+    .audio-output-preview {
+        font-size: 14px;
+        margin-top: 10px;
+        a {
+            cursor: pointer;
+            text-decoration: none;
+        }
+    }
+
+    .audio-input-preview {
+        background: #f4f5f7;
+        border-radius: 5px;
+        height: 6px;
+
+        .audio-input-preview-level {
+            background: #0052cc;
+            border-radius: 5px;
+            height: 100%;
+            -webkit-transition: width .1s ease-in-out;
+            -moz-transition: width .1s ease-in-out;
+            -o-transition: width .1s ease-in-out;
+            transition: width .1s ease-in-out;
+        }
+    }
+}

css/modals/feedback/_feedback.scss

@@ -0,0 +1,127 @@
+@-webkit-keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+@keyframes shake-rotate {
+    0% {
+        -webkit-transform:scale(1) rotate(0deg);
+        transform:scale(1) rotate(0deg)
+    }
+
+    50% {
+        -webkit-transform:scale(.8) rotate(-5deg);
+        transform:scale(.8) rotate(-5deg)
+    }
+
+    to {
+        -webkit-transform:scale(1) rotate(3deg);
+        transform:scale(1) rotate(3deg)
+    }
+}
+
+.shake-rotate {
+    display: inline-block;
+
+    -webkit-animation-duration: .4s;
+    animation-duration: .4s;
+    -webkit-animation-iteration-count: infinite;
+    animation-iteration-count: infinite;
+    -webkit-animation-name: shake-rotate;
+    animation-name: shake-rotate;
+    -webkit-animation-timing-function: ease-in-out;
+    animation-timing-function: ease-in-out
+}
+
+.feedback.aui-dialog2{
+    .aui-dialog2{
+        &-header {
+            background-color: $feedbackContentBg;
+            border-bottom-color: transparent;
+            padding-top: 30px;
+            h2 {
+                color: $feedbackTextColor;
+                text-align: center;
+            }
+        }
+
+        &-content {
+            background-color: $feedbackContentBg;
+            text-align: center;
+            padding: 10px 40px 20px 40px;
+
+            .input-control {
+                background-color: $feedbackInputBg;
+                color: $feedbackInputTextColor;
+
+                &::-webkit-input-placeholder {
+                    color: $feedbackInputPlaceholderColor;
+                }
+                &::-moz-placeholder {  /* Firefox 19+ */
+                    color: $feedbackInputPlaceholderColor;
+                }
+                &:-ms-input-placeholder {
+                    color: $feedbackInputPlaceholderColor;
+                }
+            }
+
+            .rating {
+                line-height: 1.2;
+                text-align: center;
+                margin-top: 10px;
+
+                .star-label {
+                    height: 16px;
+                    font-size: 14px;
+                    color: $rateStarLabelColor;
+                }
+                .star-btn {
+                    display: inline-block;
+                    color: $rateStarDefault;
+                    font-size: $rateStarSize;
+                    position: relative;
+                    cursor: pointer;
+                    outline: none;
+                    text-decoration: none;
+                    @include transition(all .2s ease);
+
+                    &.starHover,
+                    &.active,
+                    &:hover {
+                        color: $rateStarActivity;
+                    };
+
+                }
+            }
+
+            .details {
+                padding-left: 60px;
+                padding-right: 60px;
+                margin-top: 20px;
+                textarea {
+                    min-height: 100px;
+                }
+            }
+        }
+        &-footer {
+            background-color: $feedbackContentBg;
+            border-top-color: transparent;
+
+            .button-control {
+                color: $feedbackCancelFontColor;
+            }
+        }
+    }
+}

css/modals/invite/_invite.scss

@@ -0,0 +1,7 @@
+/*
+ * Sets the default cursor the remove password link. The link doesn't use
+ * the href attribute, so we need to set the  cursor manually.
+ */
+#inviteDialogRemovePassword {
+    cursor: hand;
+}

css/modals/speaker_stats/_speaker_stats.scss

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

css/notice.css

@@ -1,11 +0,0 @@
-#notice {
-    position: relative;
-    z-index: 3;
-    margin-top: 6px;
-}
-#noticeText {
-    background-color: #000000;
-    color: white;
-    padding: 3px;
-    border-radius: 5px;
-}

css/overlay/_overlay.scss

@@ -0,0 +1,47 @@
+.overlay {
+    &__container,
+    &__container-light {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: $overlayZ;
+        background: $defaultBackground;
+        &.filmstrip-only {
+            @include transparentBg($filmstripOnlyOverlayBg, 0.8);
+        }
+    }
+
+    &__container-light {
+        @include transparentBg($defaultBackground, 0.7);
+        &.filmstrip-only {
+            @include transparentBg($filmstripOnlyOverlayBg, 0.2);
+        }
+    }
+
+    &__content {
+        position: absolute;
+        margin: 0 auto;
+        height: 100%;
+        width: 56%;
+        left: 50%;
+        @include transform(translateX(-50%));
+        &.filmstrip-only {
+            left: 0px;
+            width: 100%;
+            @include transform(none);
+        }
+
+        &_bottom {
+            position: absolute;
+            bottom: 0;
+        }
+    }
+
+    &__policy {
+        position: absolute;
+        bottom: 24px;
+        width: 100%;
+    }
+}

css/popup_menu.css

@@ -1,72 +0,0 @@
-/*Initialize*/
-ul.popupmenu {
-    display:none;
-    position: absolute;
-    padding:10px;
-    margin: 0;
-    bottom: 0;
-    margin-bottom: 35px;
-    padding-bottom:  10px;
-    padding-top: 10px;
-    right: 10px;
-    left: -5px;
-    width: 100px;
-    background-color: rgba(0,0,0,0.9);
-    border: 1px solid rgba(256, 256, 256, 0.2);
-    border-radius:3px;
-}
-
-ul.popupmenu:after {
-    content: url('../images/popupPointer.png');
-    display: block;
-    position: absolute;
-    bottom: -8px;
-    left: 11px;
-}
-
-ul.popupmenu li {
-    list-style-type: none;
-    text-align: left;
-}
-
-ul.popupmenu li:hover {
-    background-color: rgba(256, 256, 256, .2);
-    border-radius:3px;
-}
-
-/*Link Appearance*/
-ul.popupmenu li a {
-    text-decoration: none;
-    color: #fff;
-    padding: 5px;
-    display: inline-block;
-    font-size: 9pt;
-}
-
-ul.popupmenu li a i.icon-kick {
-    font-size: 8pt;
-}
-
-ul.popupmenu li a span {
-    display: inline-block;
-    width: 20px;
-    height: 16px;
-    text-align: center;
-}
-
-span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
-    display:block !important;
-}
-
-a.disabled {
-    color: gray !important;
-    pointer-events: none;
-}
-
-.popupmenuPadding {
-    height: 35px;
-    width: 100px;
-    position: absolute;
-    bottom: -35;
-    left: 0px;
-}