Merge pull request #1308 from jitsi/ss_resize_remote

Fix for the size of remote desktop sharing videos

.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,50 @@
+[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/.*
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+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-7]\\|[1-2][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(3[0-7]\\|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
+
+[version]
+^0.37.0

.gitattributes

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

.gitignore

@@ -1,10 +1,68 @@
-node_modules
 *.swp
-.idea/
-*.iml
 .*.tmp
 deploy-local.sh
-libs/app.bundle.*
-libs/lib-jitsi-meet*
+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/
+android/app/libs
+*.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,12 @@
-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 which supersedes JSHint.
+flow-typed/
+react/
+
 analytics.js

.watchmanconfig

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

404.html

@@ -0,0 +1,12 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+</head>
+<body>
+    <div class="error_page">
+        <h2>404 Not Found</h2>
+        <p class="error_page__message">You can create new conversation <a class="link" href="/">here</a></p>
+    </div>
+</body>
+</html>

ConferenceEvents.js

@@ -0,0 +1,4 @@
+/**
+ * Notifies interested parties that hangup procedure will start.
+ */
+export const BEFORE_HANGUP = "conference.before_hangup";

Makefile

@@ -1,24 +1,28 @@
-NPM = npm
-BROWSERIFY = ./node_modules/.bin/browserify
-UGLIFYJS = ./node_modules/.bin/uglifyjs
-EXORCIST = ./node_modules/.bin/exorcist
+BUILD_DIR = build
 CLEANCSS = ./node_modules/.bin/cleancss
-CSS_FILES = font.css toastr.css main.css videolayout_default.css font-awesome.css jquery-impromptu.css modaldialog.css notice.css popup_menu.css login_menu.css popover.css jitsi_popover.css contact_list.css chat.css welcome_page.css settingsmenu.css feedback.css
 DEPLOY_DIR = libs
-BROWSERIFY_FLAGS = -d
-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
+all: update-deps compile deploy clean
 
+# FIXME: there is a problem with node-sass not correctly installed (compiled)
+# a quick fix to make sure it is installed on every update
+# the problem appears on linux and not on macosx
 update-deps:
-	$(NPM) update
+	$(NPM) update && $(NPM) install node-sass
 
 compile:
-	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
+	$(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,27 +30,32 @@ deploy-init:
 	mkdir -p $(DEPLOY_DIR)
 
 deploy-appbundle:
-	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
-	$(DEPLOY_DIR)
+	cp \
+		$(BUILD_DIR)/app.bundle.min.js \
+		$(BUILD_DIR)/app.bundle.min.map \
+		$(BUILD_DIR)/external_api.min.js \
+		$(BUILD_DIR)/external_api.min.map \
+		$(OUTPUT_DIR)/analytics.js \
+		$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
-	cp $(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
-	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map $(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 analytics.js external_api.js favicon.ico fonts images index.html interface_config.js libs plugin.*html sounds title.html unsupported_browser.html LICENSE config.js lang source_package/jitsi-meet && \
+	cp -r *.js *.html connection_optimization favicon.ico fonts images libs 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,6 +12,13 @@ Installing Jitsi Meet is quite a simple experience. For Debian-based systems, we
 
 For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://github.com/jitsi/jitsi-meet/blob/master/doc/manual-install.md).
 
+## Download
+
+You can download Debian/Ubuntu binaries:
+* [stable](https://download.jitsi.org/stable/) ([instructions](https://jitsi.org/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))
+
 ## Building the sources
 
 Jitsi Meet uses [Browserify](http://browserify.org). If you want to make changes in the code you need to [install Browserify](http://browserify.org/#install). Browserify requires [nodejs](http://nodejs.org).
@@ -28,7 +35,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 +73,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 +82,14 @@ npm unlink lib-jitsi-meet
 npm install
 ```
 
+## 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,158 @@
+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.2.${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-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,58 @@
+<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-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">
+        <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,63 @@
+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.oney.WebRTCModule.WebRTCModulePackage(),
+                new com.rnimmersive.RNImmersivePackage(),
+                new org.jitsi.meet.audiomode.AudioModePackage()
+            );
+        }
+    };
+
+    /**
+     * {@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/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:1.3.1'
+
+        // NOTE: Do not place your application dependencies here; they belong
+        // in the individual module build.gradle files
+    }
+}
+
+allprojects {
+    repositories {
+        mavenLocal()
+        jcenter()
+        maven {
+            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
+            url "$rootDir/../node_modules/react-native/android"
+        }
+    }
+}

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.4-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,11 @@
+rootProject.name = 'jitsi-meet-react'
+
+include ':app'
+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,143 +1,75 @@
-/* global $, JitsiMeetJS, config */
 /* 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';
-
-
-function buildRoomName () {
-    let path = window.location.pathname;
-    let roomName;
-
-    // determinde the room node from the url
-    // TODO: just the roomnode or the whole bare jid?
-    if (config.getroomnode && typeof config.getroomnode === 'function') {
-        // custom function might be responsible for doing the pushstate
-        roomName = config.getroomnode(path);
-    } else {
-        /* fall back to default strategy
-         * this is making assumptions about how the URL->room mapping happens.
-         * It currently assumes deployment at root, with a rewrite like the
-         * following one (for nginx):
-         location ~ ^/([a-zA-Z0-9]+)$ {
-         rewrite ^/(.*)$ / break;
-         }
-        */
-        if (path.length > 1) {
-            roomName = path.substr(1).toLowerCase();
-        } else {
-            let word = RoomnameGenerator.generateRoomWithoutSeparator();
-            roomName = word.toLowerCase();
-            window.history.pushState(
-                'VideoChat', `Room: ${word}`, window.location.pathname + word
-            );
-        }
-    }
-
-    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
+    // connect was already executed. status property can be "initialized",
+    // "ready" or "connecting". We are interested in "ready" status only which
+    // means that connect was executed but we have to wait for the attach data.
+    // In status "ready" handler property will be set to a function that will
+    // finish the connect process when the attach data or error is received.
+    connect: {
+        status: "initialized",
+        handler: null
+    },
+    // Used for automated performance tests
+    connectionTimes: {
+        "index.loaded": window.indexLoadedTime
+    },
     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) {
-                    console.log("(TIME) configuration fetched:\t",
-                                window.performance.now());
-                    init();
-                } else {
-                    // Show obtain config error,
-                    // pass the error object for report
-                    APP.UI.messageHandler.openReportDialog(
-                        null, "dialog.connectError", error);
-                }
-            });
-    } else {
-        require("./modules/config/BoshAddressChoice").chooseAddress(
-            config, roomName);
-
-        init();
-    }
-}
-
-
-$(document).ready(function () {
-    console.log("(TIME) document ready:\t", window.performance.now());
-
-    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;

authError.html

@@ -0,0 +1,9 @@
+<html>
+<head>
+    <link rel="stylesheet" href="css/all.css"/>
+    <!--#include virtual="title.html" -->
+</head>
+<body>
+    <div class="redirectPageMessage">Sorry! You are not allowed to be here :(</div>
+</body>
+</html>

close.html

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

close.js

@@ -0,0 +1,59 @@
+/* global interfaceConfig */
+//list of tips
+var hints = [
+    "You can pin participants by clicking on their thumbnails.",// jshint ignore:line
+    "You can tell others you have something to say by using the \"Raise Hand\" feature",// jshint ignore:line
+    "You can learn about key shortcuts by pressing Shift+?",// jshint ignore:line
+    "You can learn more about the state of everyone's connection by hovering on the bars in their thumbnail",// jshint ignore:line
+    "You can hide all thumbnails by using the button in the bottom right corner"// jshint ignore:line
+];
+
+/**
+ * Get a random hint meessage from hint array.
+ *
+ * @return {string} the hint message.
+ */
+function getHint(){
+    var l = hints.length - 1;
+    var n = Math.round(Math.random() * l);
+
+    return hints[n];
+}
+
+/**
+ * Inserts text message
+ * into DOM element
+ *
+ * @param id {string} element identificator
+ * @param msg {string} text message
+ */
+// eslint-disable-next-line no-unused-vars
+function insertTextMsg(id, msg){
+    var el = document.getElementById(id);
+
+    if (el)
+        el.innerHTML = msg;
+}
+
+/**
+ * Sets the hint and thanks messages. Will be executed on load event.
+ */
+function onLoad() {
+    //Works only for close2.html because close.html doesn't have this element.
+    insertTextMsg('thanksMessage',
+        'Thank you for using ' + interfaceConfig.APP_NAME);
+
+    // If there is a setting show a special message only for the guests
+    if (interfaceConfig.CLOSE_PAGE_GUEST_HINT) {
+        if ( window.sessionStorage.getItem('guest') === 'true' ) {
+            var element = document.getElementById('hintQuestion');
+            element.classList.add('hide');
+            insertTextMsg('hintMessage', interfaceConfig.CLOSE_PAGE_GUEST_HINT);
+            return;
+        }
+    }
+
+    insertTextMsg('hintMessage', getHint());
+}
+
+window.onload = onLoad;

close2.html

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

config.js

@@ -1,12 +1,12 @@
-/* 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',
         //anonymousdomain: 'guest.example.com',
         //authdomain: 'jitsi-meet.example.com',  // defaults to <domain>
         muc: 'conference.jitsi-meet.example.com', // FIXME: use XEP-0030
-        bridge: 'jitsi-videobridge.jitsi-meet.example.com', // FIXME: use XEP-0030
         //jirecon: 'jirecon.jitsi-meet.example.com',
         //call_control: 'callcontrol.jitsi-meet.example.com',
         //focus: 'focus.jitsi-meet.example.com', // defaults to 'focus.jitsi-meet.example.com'
@@ -20,13 +20,13 @@ 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 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',
 
@@ -54,9 +54,11 @@ var config = {
     disableAudioLevels: false,
     channelLastN: -1, // The default value of the channel attribute last-n.
     adaptiveLastN: false,
-    adaptiveSimulcast: 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.
@@ -70,5 +72,13 @@ 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).
+    disableRtx: true
 };

connection.js

@@ -1,10 +1,49 @@
 /* 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';
 
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
 
+/**
+ * Checks if we have data to use attach instead of connect. If we have the data
+ * executes attach otherwise check if we have to wait for the data. If we have
+ * to wait for the attach data we are setting handler to APP.connect.handler
+ * which is going to be called when the attach data is received otherwise
+ * executes connect.
+ *
+ * @param {string} [id] user id
+ * @param {string} [password] password
+ * @param {string} [roomName] the name of the conference.
+ */
+function checkForAttachParametersAndConnect(id, password, connection) {
+    if(window.XMPPAttachInfo){
+        APP.connect.status = "connecting";
+        // When connection optimization is not deployed or enabled the default
+        // value will be window.XMPPAttachInfo.status = "error"
+        // If the connection optimization is deployed and enabled and there is
+        // a failure the value will be window.XMPPAttachInfo.status = "error"
+        if(window.XMPPAttachInfo.status === "error") {
+            connection.connect({id, password});
+            return;
+        }
+
+        var attachOptions = window.XMPPAttachInfo.data;
+        if(attachOptions) {
+            connection.attach(attachOptions);
+            delete window.XMPPAttachInfo.data;
+        } else {
+            connection.connect({id, password});
+        }
+    } else {
+        APP.connect.status = "ready";
+        APP.connect.handler = checkForAttachParametersAndConnect.bind(null,
+            id, password, connection);
+    }
+}
+
 /**
  * Try to open connection using provided credentials.
  * @param {string} [id]
@@ -15,10 +54,11 @@ const ConnectionErrors = JitsiMeetJS.errors.connection;
  */
 function connect(id, password, roomName) {
 
-    let connectionConfig = config;
+    let connectionConfig = Object.assign({}, config);
 
     connectionConfig.bosh += '?room=' + roomName;
-    let connection = new JitsiMeetJS.JitsiConnection(null, null, config);
+    let connection
+        = new JitsiMeetJS.JitsiConnection(null, config.token, connectionConfig);
 
     return new Promise(function (resolve, reject) {
         connection.addEventListener(
@@ -46,37 +86,11 @@ function connect(id, password, roomName) {
 
         function handleConnectionFailed(err) {
             unsubscribe();
-            console.error("CONNECTION FAILED:", err);
+            logger.error("CONNECTION FAILED:", err);
             reject(err);
         }
 
-        connection.connect({id, password});
-    });
-}
-
-/**
- * Show Authentication Dialog and try to connect with new credentials.
- * If failed to connect because of PASSWORD_REQUIRED error
- * then ask for password again.
- * @returns {Promise<JitsiConnection>}
- */
-function requestAuth() {
-    return new Promise(function (resolve, reject) {
-        let authDialog = LoginDialog.showAuthDialog(
-            function (id, password) {
-                connect(id, password).then(function (connection) {
-                    authDialog.close();
-                    resolve(connection);
-                }, function (err) {
-                    if (err === ConnectionErrors.PASSWORD_REQUIRED) {
-                        authDialog.displayError(err);
-                    } else {
-                        authDialog.close();
-                        reject(err);
-                    }
-                });
-            }
-        );
+        checkForAttachParametersAndConnect(id, password, connection);
     });
 }
 
@@ -94,6 +108,20 @@ function requestAuth() {
  * @returns {Promise<JitsiConnection>}
  */
 export function openConnection({id, password, retry, roomName}) {
+
+    let usernameOverride
+        = jitsiLocalStorage.getItem("xmpp_username_override");
+    let passwordOverride
+        = jitsiLocalStorage.getItem("xmpp_password_override");
+
+    if (usernameOverride && usernameOverride.length > 0) {
+        id = usernameOverride;
+    }
+
+    if (passwordOverride && passwordOverride.length > 0) {
+        password = passwordOverride;
+    }
+
     return connect(id, password, roomName).catch(function (err) {
         if (!retry) {
             throw err;
@@ -104,7 +132,7 @@ export function openConnection({id, password, retry, roomName}) {
             if (config.token) {
                 throw err;
             } else {
-                return requestAuth();
+                return AuthHandler.requestAuth(roomName, connect);
             }
         } else {
             throw err;

connection_optimization/do_external_connect.js

@@ -0,0 +1,75 @@
+/* global config, getRoomName, getConfigParamsFromUrl */
+/* global createConnectionExternally */
+/**
+ * Implements extrnal connect using createConnectionExtenally function defined
+ * in external_connect.js for Jitsi Meet. Parses the room name and token from
+ * the url and executes createConnectionExtenally.
+ *
+ * NOTE: If you are using lib-jitsi-meet without Jitsi Meet you should use this
+ * file as reference only because the implementation is Jitsi Meet specific.
+ *
+ * NOTE: For optimal results this file should be included right after
+ * exrnal_connect.js.
+ */
+
+/**
+ * Executes createConnectionExternally function.
+ */
+(function () {
+    var hashParams = getConfigParamsFromUrl("hash", true);
+    var searchParams = getConfigParamsFromUrl("search", true);
+
+    //Url params have higher proirity than config params
+    var url = config.externalConnectUrl;
+    if(hashParams.hasOwnProperty('config.externalConnectUrl'))
+        url = hashParams["config.externalConnectUrl"];
+
+    /**
+     * Check if connect from connection.js was executed and executes the handler
+     * that is going to finish the connect work.
+     */
+    function checkForConnectHandlerAndConnect() {
+
+        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 = hashParams["config.token"] || config.token ||
+        searchParams.jwt;
+    if(token)
+        url += "&token=" + token;
+
+    createConnectionExternally(url, function(connectionInfo) {
+        // Sets that global variable to be used later by connect method in
+        // connection.js
+        window.XMPPAttachInfo = {
+            status: "success",
+            data: connectionInfo
+        };
+        checkForConnectHandlerAndConnect();
+    }, error_callback);
+})();

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

css/_base.scss

@@ -0,0 +1,142 @@
+* {
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+html, body{
+    margin:0px;
+    height:100%;
+    color: $defaultColor;
+    font-size: 12px;
+    font-weight: 400;
+    background: #000000;
+    overflow: hidden;
+}
+
+p {
+    margin: 0;
+}
+
+html, 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: 2;
+}
+
+.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: 100;
+}
+
+.connected {
+    color: #21B9FC;
+    font-size: 12px;
+}
+
+.lastN, .disconnected {
+    color: #a3a3a3;
+    font-size: 12px;
+}
+
+/**
+* Tooltips
+**/
+.tipsy {
+    z-index: $tooltipsZ;
+    &-inner {
+        background-color: $tooltipBg;
+    }
+
+    &-arrow {
+        border-color: $tooltipBg;
+    }
+}
+
+/**
+* Dialogs fade
+*/
+.aui-blanket {
+    visibility: visible;
+}
+
+#inviteLinkRef {
+    -webkit-user-select: text;
+    user-select: text;
+}

css/_chat.scss

@@ -1,9 +1,4 @@
-#chatspace {
-    background-color: black;
-    border-left: 1px solid #424242;
-}
-
-#chatspace * {
+#chat_container * {
     -webkit-user-select: text;
     user-select: text;
 }
@@ -18,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;
 }
 
@@ -64,7 +75,7 @@
     box-shadow: none;
 }
 
-#chatspace.is-conversation-mode #usermsg {
+#chat_container.is-conversation-mode #usermsg {
     visibility: visible;
 }
 
@@ -79,7 +90,7 @@
     width: 95%;
 }
 
-#chatspace.is-conversation-mode #nickname {
+#chat_container.is-conversation-mode #nickname {
     visibility: hidden;
 }
 
@@ -92,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;
 }
@@ -130,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;
@@ -177,7 +180,7 @@
     visibility: hidden;
 }
 
-#chatspace.is-conversation-mode #smileysarea {
+#chat_container.is-conversation-mode #smileysarea {
     visibility: visible;
 }
 
@@ -234,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/_device_settings_dialog.scss

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

css/_filmstrip.scss

@@ -0,0 +1,124 @@
+%align-right {
+    @include flex();
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+}
+
+.filmstrip {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 10px 5px;
+    @extend %align-right;
+
+    &__toolbar {
+        @include flex();
+        flex-direction: column-reverse;
+        flex-wrap: nowrap;
+        position: relative;
+        z-index: 1;                     // Set z-index to make element visible
+        width: $hideFilmstripButtonWidth;
+
+        button {
+            font-size: 14px;
+            line-height: 1.2;
+            text-align: center;
+            background: transparent;
+            opacity: 0.7;
+            height: auto;
+            width: 100%;
+            padding: 0;
+            margin: 0;
+            border: none;
+            outline: none;
+
+            -webkit-appearance: none;
+
+            &:hover {
+                opacity: 1;
+            }
+
+            i {
+                cursor: pointer;
+            }
+        }
+    }
+
+    &__videos {
+        @extend %align-right;
+        position:relative;
+        height:196px;
+        padding: 0;
+        /*The filmstrip should not be covered by the left toolbar*/
+        padding-left: $defaultToolbarSize + 5;
+        bottom: 0;
+        width:auto;
+        border: $thumbnailsBorder solid transparent;
+        z-index: 5;
+        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 TemasysWebRTC plugin <object/> element is used
+            instead of <video/> */
+            & > video,
+            & > object {
+                cursor: hand;
+                border-radius: $borderRadius;
+                object-fit: cover;
+                overflow: hidden;
+            }
+        }
+    }
+}

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,126 @@
     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-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,33 @@
+.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;
+    }
+
+    &__button {
+        float: none !important;
+    }
+}

css/_jitsi_popover.scss

@@ -0,0 +1,47 @@
+.jitsipopover {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1010;
+    display: none;
+    max-width: 300px;
+    min-width: 100px;
+    text-align: left;
+    color: $popoverFontColor;
+    background-color: $popoverBg;
+    background-clip: padding-box;
+    border-radius: $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

@@ -0,0 +1,206 @@
+@charset "UTF-8";
+/*!
+ * jQuery contextMenu - Plugin for simple contextMenu handling
+ *
+ * Version: v2.1.1
+ *
+ * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
+ * Web: http://swisnl.github.io/jQuery-contextMenu/
+ *
+ * Copyright (c) 2011-2016 SWIS BV and contributors
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *
+ * Date: 2016-02-28T09:53:18.890Z
+ */
+@font-face {
+  font-family: "context-menu-icons";
+  font-style: normal; 
+  font-weight: normal;
+
+  src: url("font/context-menu-icons.eot?2qmzf");
+  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype");
+}
+
+.context-menu-icon:before {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 28px; 
+  font-family: "context-menu-icons";
+  font-size: 16px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  color: #2980b9;
+  text-align: center;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.context-menu-icon-add:before {
+  content: "";
+}
+
+.context-menu-icon-copy:before {
+  content: "";
+}
+
+.context-menu-icon-cut:before {
+  content: "";
+}
+
+.context-menu-icon-delete:before {
+  content: "";
+}
+
+.context-menu-icon-edit:before {
+  content: "";
+}
+
+.context-menu-icon-paste:before {
+  content: "";
+}
+
+.context-menu-icon-quit:before {
+  content: "";
+}
+
+.context-menu-icon.context-menu-hover:before {
+  color: #fff;
+}
+
+.context-menu-list {
+  position: absolute; 
+  display: inline-block;
+  min-width: 180px;
+  max-width: 360px;
+  padding: 4px 0;
+  margin: 5px;
+  font-family: inherit;
+  font-size: inherit;
+  list-style-type: none;
+  background: #fff;
+  border: 1px solid #bebebe;
+  border-radius: $borderRadius;
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
+}
+
+.context-menu-item {
+  position: relative;
+  padding: 3px 28px;
+  color: #2f2f2f;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none; 
+  background-color: #fff;
+}
+
+.context-menu-separator {
+  padding: 0; 
+  margin: 5px 0;
+  border-bottom: 1px solid #e6e6e6;
+}
+
+.context-menu-item > label > input,
+.context-menu-item > label > textarea {
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.context-menu-item.context-menu-hover {
+  color: #fff;
+  cursor: pointer; 
+  background-color: #2980b9;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262; 
+  background-color: #fff;
+}
+
+.context-menu-item.context-menu-disabled {
+  color: #626262;
+}
+
+.context-menu-input.context-menu-hover,
+.context-menu-item.context-menu-disabled.context-menu-hover {
+  cursor: default; 
+  background-color: #eee;
+}
+
+.context-menu-submenu:after {
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  z-index: 1; 
+  width: 0;
+  height: 0;
+  content: '';
+  border-color: transparent transparent transparent #2f2f2f;
+  border-style: solid;
+  border-width: 4px 0 4px 4px;
+  -webkit-transform: translateY(-50%);
+      -ms-transform: translateY(-50%);
+       -o-transform: translateY(-50%);
+          transform: translateY(-50%);
+}
+
+/**
+ * Inputs
+ */
+.context-menu-item.context-menu-input {
+  padding: 5px 10px;
+}
+
+/* vertically align inside labels */
+.context-menu-input > label > * {
+  vertical-align: top;
+}
+
+/* position checkboxes and radios as icons */
+.context-menu-input > label > input[type="checkbox"],
+.context-menu-input > label > input[type="radio"] {
+  position: relative;
+  top: 3px;
+}
+
+.context-menu-input > label,
+.context-menu-input > label > input[type="text"],
+.context-menu-input > label > textarea,
+.context-menu-input > label > select {
+  display: block;
+  width: 100%; 
+  -webkit-box-sizing: border-box;
+     -moz-box-sizing: border-box;
+          box-sizing: border-box;
+}
+
+.context-menu-input > label > textarea {
+  height: 100px;
+}
+
+.context-menu-item > .context-menu-list {
+  top: 5px; 
+  /* re-positioned by js */
+  right: -5px;
+  display: none;
+}
+
+.context-menu-item.context-menu-visible > .context-menu-list {
+  display: block;
+}
+
+.context-menu-accesskey {
+  text-decoration: underline;
+}

css/_keyboard-shortcuts.scss

@@ -0,0 +1,25 @@
+#keyboard-shortcuts {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+    left: $defaultToolbarSize;
+    overflow: hidden;
+    padding: 20px;
+    margin-left: 10px;
+    z-index: 10;
+    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

@@ -1,5 +1,7 @@
 /*Initialize*/
 ul.loginmenu {
+    font-family: $baseFontFamily;
+    line-height: normal;
     display:none;
     position: absolute;
     margin: 0;
@@ -15,12 +17,10 @@ ul.loginmenu {
 ul.loginmenu li {
     list-style-type: none;
     padding: 7px;
-}
-
-ul.loginmenu li.identity {
     color: #fff;
     font-size: 11pt;
     cursor: default;
+    white-space: pre;
 }
 
 ul.loginmenu:after {
@@ -31,22 +31,6 @@ ul.loginmenu:after {
     left: 18px;
 }
 
-li a.authButton{
-    background-color: #06a5df;
-    padding-top: 3px;
-    padding-bottom: 3px;
-    padding-left: 29px;
-    padding-right: 29px;
-    border-radius: 4px;
-    color: #fff;
-    font-size: 11pt;
-    cursor: pointer;
-}
-
-span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
-    display:block !important;
-}
-
 a.disabled {
     color: gray !important;
     pointer-events: none;
@@ -58,4 +42,17 @@ a.disabled {
     position: absolute;
     top: -30px;
     left: 0px;
+}
+
+.loginmenu.extendedToolbarPopup {
+    left: 55px;
+    top: 0px;
+}
+
+ul.loginmenu.extendedToolbarPopup:after {
+    content: url('../images/leftDropdownPointer.png');
+    display: block;
+    position: absolute;
+    top: 18px;
+    left: -7px;
 }

css/_mixins.scss

@@ -0,0 +1,161 @@
+/**
+ * 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 placeholder
+**/
+@mixin placeholder() {
+  $selectors: (
+          "::-webkit-input-placeholder",
+          "::-moz-placeholder",
+          ":-moz-placeholder",
+          ":-ms-input-placeholder"
+  );
+
+  @each $selector in $selectors {
+    #{$selector} {
+      @content;
+    }
+  }
+}
+
+@mixin box-shadow($h, $y, $blur, $color, $inset: false) {
+  @if $inset {
+    -webkit-box-shadow: inset $h $y $blur $color;
+    -moz-box-shadow: inset $h $y $blur $color;
+    box-shadow: inset $h $y $blur $color;
+  } @else {
+    -webkit-box-shadow: $h $y $blur $color;
+    -moz-box-shadow: $h $y $blur $color;
+    box-shadow: $h $y $blur $color;
+  }
+}
+
+@mixin no-box-shadow {
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+
+@mixin box-sizing($box-model) {
+  -webkit-box-sizing: $box-model; // Safari <= 5
+     -moz-box-sizing: $box-model; // Firefox <= 19
+          box-sizing: $box-model;
+}
+
+@mixin border-radius($radius) {
+  -webkit-border-radius: $radius;
+  border-radius: $radius;
+  /* stops bg color from leaking outside the border: */
+  background-clip: padding-box;
+}
+
+@mixin opacity($opacity) {
+  opacity: $opacity;
+  $opacity-ie: $opacity * 100;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=$opacity-ie);
+  filter: alpha(opacity=$opacity-ie); //IE8
+}
+
+@mixin text-truncate {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/**
+ * 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/_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: 1015;
   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,73 @@
+/**
+* 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 {
+        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 {
+        display: inline-block;
+        vertical-align: middle;
+    }
+
+    &__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,41 @@
+html, body {
+    width: 100%;
+    height:100%;
+    color: $defaultColor;
+    background: $defaultBackground;
+}
+
+.redirectPageMessage {
+    width: 30%;
+    margin: 20% auto;
+    text-align: center;
+    font-size: 24px;
+
+    .thanks-msg {
+        border-bottom: 1px solid $selectBg;
+        padding-left: 30px;
+        padding-right: 30px;
+        p {
+            margin: 30px auto;
+            font-size: 24px;
+            line-height: 24px;
+        }
+    }
+    .hint-msg{
+        p {
+            margin: 26px auto;
+            font-weight: 600;
+            font-size: 16px;
+            line-height: 18px;
+            .hint-msg__holder{
+                font-weight: 200;
+            }
+        }
+        .happy-software{
+            width: 120px;
+            height: 86px;
+            margin: 0 auto;
+            background: $happySoftwareBackground;
+        }
+    }
+}

css/_side_toolbar_container.scss

@@ -0,0 +1,140 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    background-color: rgba(0,0,0,0.8);
+    height: 100%;
+    left: $defaultToolbarSize;
+    max-width: $sidebarWidth;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 0;
+    z-index: 800;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $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;
+}
+
+/**
+ * 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: $hideFilmstripButtonWidth + $videoOffset;
+}
+
+#toast-container * {
+  @include box-sizing(border-box);
+}
+
+#toast-container .toast {
+  width: $notificationWidth;
+  margin: 0 0 8px;
+}

css/_toolbars.scss

@@ -0,0 +1,280 @@
+.toolbar {
+    background-color: $toolbarBackground;
+    position: relative;
+    z-index: $toolbarZ;
+    height: 100%;
+    pointer-events: auto;
+
+    /**
+     * Splitter button in the toolbar.
+     */
+    &__splitter {
+        display: inline-block;
+        vertical-align: middle;
+        width: 1px;
+        height: 50%;
+        margin: 0 $splitterToolbarButtonMargin;
+        background: $splitterColor;
+    }
+}
+
+#mainToolbarContainer{
+    display: block;
+    position: absolute;
+    text-align: center;
+    top:0;
+    left:0;
+    right:0;
+    z-index: $toolbarZ;
+    pointer-events: none;
+    min-height: 100px;
+    opacity: 0;
+}
+
+#subject {
+    position: relative;
+    z-index: 3;
+    width: auto;
+    padding: 5px;
+    margin-left: 40%;
+    margin-right: 40%;
+    text-align: center;
+    background: linear-gradient(to bottom, rgba(255,255,255,.85) , rgba(255,255,255,.35));
+    box-shadow: 0 0 2px #000000, 0 0 10px #000000;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+}
+
+#mainToolbar {
+    height: $defaultToolbarSize;
+    display: inline-block;
+    position: relative;
+    top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    width: auto;
+    border-radius: 3px;
+    .button:first-child {
+        border-bottom-left-radius: 3px;
+        border-top-left-radius: 3px;
+    }
+    .button:last-child {
+        border-bottom-right-radius: 3px;
+        border-top-right-radius: 3px;
+    }
+}
+
+#extendedToolbar {
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-box;
+    display: -webkit-flex;
+    display: flex;
+    width: $defaultToolbarSize;
+    height: 100%;
+    top: 0;
+    left: 0;
+    padding-top: 10px;
+    box-sizing: border-box;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    transform: translateX(-100%);
+    -webkit-transform: translateX(-100%);
+}
+
+#toolbar_button_hangup {
+    color: #BF2117;
+    font-size: $hangupFontSize !important;
+}
+
+#toolbar_button_etherpad {
+    display: none;
+}
+
+#mainToolbar a.button:last-child::after {
+    content: none;
+}
+
+.button {
+    display: inline-block;
+    position: relative;
+    color: #FFFFFF;
+    top:0px;
+    width: 50px;
+    height: 50px;
+    cursor: pointer;
+    text-align: center;
+    z-index: 1;
+    font-size: $toolbarFontSize !important;
+    line-height: 50px !important;
+    vertical-align: middle;
+}
+
+.button[disabled] {
+    opacity: 0.5;
+}
+
+.button.unclickable {
+    cursor: default;
+}
+
+.button.toggled {
+    background: $toolbarToggleBackground !important;
+}
+
+a.button.unclickable:hover,
+a.button.unclickable:active,
+a.button.unclickable.selected{
+    cursor: default;
+    background: none;
+}
+
+a.button:hover,
+a.button:active,
+a.button.selected {
+    cursor: pointer;
+    text-decoration: none;
+    // sum opacity with background layer should give us 0.8
+    background: $toolbarSelectBackground;
+}
+
+a.button>#avatar {
+    width: 30px;
+    border-radius: 50%;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+#feedbackButton {
+    margin-top: auto;
+}
+
+/**
+ * Round badge.
+ */
+.badge-round {
+    background-color: $toolbarBadgeBackground;
+    color: $toolbarBadgeColor;
+    font-size: 9px;
+    line-height: 13px;
+    font-weight: 700;
+    text-align: center;
+    border-radius: 50%;
+    min-width: 13px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
+    vertical-align: middle;
+    // Do not inherit the font-family from the toolbar button, because it's an
+    // icon style.
+    font-family: $baseFontFamily;
+}
+
+/**
+ * Toolbar specific round badge.
+ */
+.toolbar .badge-round {
+    position: absolute;
+    right: 9px;
+    bottom: 9px;
+}
+
+/**
+ * START of slide in animation for extended toolbar.
+ */
+@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 {
+    @include animation('fadeIn .3s linear .2s forwards');
+}
+
+.fadeOut {
+    @include animation('fadeOut .5s linear forwards');
+}

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,136 @@
+@import "themes/light";
+
+/**
+ * Style variables
+ */
+$baseFontFamily: 'open_sanslight', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+$toolbarFontSize: 1.9em;
+$hangupFontSize: 2em;
+
+/**
+ * Size variables.
+ */
+$defaultToolbarSize: 50px;
+
+// Video layout.
+$thumbnailToolbarHeight: 22px;
+$thumbnailIndicatorBorder: 2px;
+$thumbnailIndicatorSize: $thumbnailToolbarHeight;
+$thumbnailVideoMargin: 5px;
+$thumbnailsBorder: 2px;
+$thumbnailVideoBorder: 2px;
+$hideFilmstripButtonWidth: 17px;
+
+
+/**
+ * Color variables.
+ */
+$defaultColor: #F1F1F1;
+$defaultSideBarFontColor: #44A5FF;
+$defaultSemiDarkColor: #ACACAC;
+$defaultDarkColor: #2b3d5c;
+$tooltipBg: rgba(0,0,0, 0.7);
+
+/**
+ * Toolbar
+ */
+$toolbarTitleColor: #FFFFFF;
+$toolbarTitleFontSize: 19px;
+$toolbarBackground: rgba(0, 0, 0, 0.5);
+$toolbarSelectBackground: rgba(0, 0, 0, .6);
+$toolbarBadgeBackground: #165ECC;
+$toolbarBadgeColor: #FFFFFF;
+$toolbarToggleBackground: #12499C;
+$splitterToolbarButtonMargin: 18px;
+
+/**
+ * Main controls
+ * TODO: looks like we don't use it
+ */
+$inputSemiBackground: rgba(132, 132, 132, .8);
+$inputLightBackground: #EBEBEB;
+
+/**
+ * Video layout
+ */
+$videoThumbnailHovered: rgba(22, 94, 204, .4);
+$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;
+
+/**
+ * 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.
+ */
+$tooltipsZ: 901;
+$toolbarZ: 900;
+$overlayZ: 902;
+$notificationZ: 1012;
+$ringingZ: 800;
+$dropdownZ: 901;
+$dropdownMaskZ: 900;
+
+/**
+ * Font Colors
+ */
+$defaultFontColor: #777;
+$defaultLightFontColor: #F1F1F1;
+$defaultDarkFontColor: #000;
+
+/**
+ * Forms
+ */
+//inputs
+$inputControlEmColor: #f29424;
+//buttons
+$linkFontColor: #489afe;
+$linkHoverFontColor: #287ade;
+
+/**
+ * Landing
+ */
+$primaryUnsupportedBrowserButtonBgColor: #17a0db;
+$unsupportedBrowserButtonBgColor: #ff9a00;
+$unsupportedBrowserTextColor: #4a4a4a;

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: 3;
+        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: 3;
+            background: $dominantSpeakerBg;
+            color: $thumbnailPictogramColor;
+            border: $thumbnailIndicatorBorder solid $thumbnailPictogramColor;
+
+            &:last-child {
+                margin-right: 0;
+            }
+
+            .indicatoricon {
+                @include absoluteAligning();
+            }
+
+            .connection {
+                position: relative;
+                display: inline-block;
+                margin: 0 auto;
+                left: 0;
+                @include transform(translate(0, -50%));
+
+                &_empty
+                {
+                    color: #8B8B8B;/*#FFFFFF*/
+                    overflow: hidden;
+                }
+
+                &_lost
+                {
+                    color: #8B8B8B;
+                    overflow: visible;
+                }
+
+                &_full
+                {
+                    @include topLeft();
+                    color: #FFFFFF;/*#15A1ED*/
+                    overflow: hidden;
+                }
+            }
+
+            .icon-connection,
+            .icon-connection-lost {
+                font-size: 1em;
+            }
+        }
+    }
+
+    &__hoverOverlay {
+        background: rgba(0,0,0,.6);
+        border-radius: $borderRadius;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        visibility: hidden;
+        z-index: 2;
+    }
+}
+
+#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: 1;
+    width: 100%;
+    height: 100%;
+}
+
+#etherpad {
+    text-align: center;
+}
+
+#etherpad {
+    z-index: 0;
+}
+
+/**
+ * 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: 2;
+}
+
+/**
+ * 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: 2;
+}
+
+/**
+ * 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: 3;
+    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: 2;
+    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: 20; /*The reload button should appear on top of the header!*/
+}
+
+.audiolevel {
+    display: inline-block;
+    position: absolute;
+    z-index: 0;
+    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: 1;
+    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: 1;
+    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: 2;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+
+    background: rgba(0,0,0,.5);
+    border-radius: 5px;
+    padding: 5px;
+    padding-left: 10px;
+    padding-right: 10px;
+}
+
+#localConnectionMessage {
+    display: none;
+    position: absolute;
+    left: 0;
+    width: 100%;
+    top:50%;
+    z-index: 2;
+    font-weight: 600;
+    font-size: 14px;
+    text-align: center;
+    color: #FFF;
+    opacity: .80;
+    text-shadow:    0px 0px 1px rgba(0,0,0,0.3),
+                    0px 1px 1px rgba(0,0,0,0.3),
+                    1px 0px 1px rgba(0,0,0,0.3),
+                    0px 0px 1px rgba(0,0,0,0.3);
+}
+
+.video-state-indicator {
+    background: $videoStateIndicatorBackground;
+    color: $videoStateIndicatorColor;
+    font-size: 13px;
+    line-height: 20px;
+    text-align: center;
+    min-width: 40px;
+    height: 40px;
+    padding: 10px 5px;
+    border-radius: 50%;
+    position: absolute;
+    box-sizing: border-box;
+}
+
+#videoResolutionLabel,
+.centeredVideoLabel {
+    display: none;
+    z-index: 1011;
+}
+
+.centeredVideoLabel {
+    bottom: 45%;
+    border-radius: 2px;
+    -webkit-transition: all 2s 2s linear;
+    transition: all 2s 2s linear;
+
+    &.moveToCorner {
+        bottom: auto;
+    }
+}
+
+.moveToCorner {
+    position: absolute;
+    top: 30px;
+    right: 30px;
+}
+
+.moveToCorner + .moveToCorner {
+    right: 80px;
+}

css/_welcome_page.scss

@@ -1,4 +1,3 @@
-
 #disable_welcome {
     display:none;
 }
@@ -21,7 +20,6 @@
     -moz-user-select: none;
     background-repeat: no-repeat;
     font-weight: 500;
-    font-family: Helvetica;
     font-size: 16px;
     color: #acacac;
     z-index: 2;
@@ -35,7 +33,6 @@
     -moz-user-select: none;
     background-repeat: no-repeat;
     font-weight: 500;
-    font-family: Helvetica;
     font-size: 16px;
     color: #acacac;
     z-index: 2;
@@ -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: 2;
+    }
 
-#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: 3;
+        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: 2;
+    }
 }
 
 #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,89 @@
+.button-control {
+    box-sizing: border-box;
+    display: inline-block;
+    border: 1px solid $buttonBorder;
+    vertical-align: baseline;
+    height: 30px;
+    min-width: 60px;
+    padding: 4px 10px;
+    margin: 0;
+    line-height: 1.5em;
+    outline: none;
+    background-color: transparent;
+    float: right;
+    font-size: 14px;
+    margin-left: 10px;
+    color: $buttonColor;
+    font-weight: $buttonFontWeight;
+    @include transition(background-color .1s ease-out);
+
+    &[disabled] {
+        color: #666;
+        cursor: default;
+    }
+
+    &_full-width {
+        margin: 0;
+        width: 100%;
+    }
+
+    &:hover {
+        border: 1px solid $buttonHoverBorder;
+        background-color: $buttonHoverBackground;
+        @include transition(background-color .1s ease-in);
+    }
+
+    &:active {
+        @include box-shadow(0, 0, 1px, $buttonShadowColor, true);
+    }
+
+    &_light {
+        color: $defaultDarkColor;
+        background-color: $buttonLightBackground;
+        border: 1px solid $buttonLightBorder;
+
+        &:hover {
+            border: 1px solid $buttonLightHoverBorder;
+            background-color: $buttonLightHoverBackground;
+        }
+    }
+
+    &_link {
+        color: $buttonLinkColor;
+        background-color: $buttonLinkBackground;
+
+        &:hover {
+            background-color: $buttonLinkBackground;
+        }
+    }
+
+    &_primary {
+        background-color: $primaryButtonBackground;
+        border: 1px solid $primaryButtonBackground;
+        color: $primaryButtonColor !important;
+        font-weight: $primaryButtonFontWeight;
+
+        &:hover {
+            border: 1px solid $primaryButtonHoverBackground;
+            background-color: $primaryButtonHoverBackground;
+        }
+
+        &[disabled] {
+            color: $primaryButtonColor;
+        }
+    }
+
+    &_close {
+        color: $defaultFontColor;
+    }
+    &_submit {
+        color: $linkFontColor;
+        &:hover {
+            color: $linkHoverFontColor;
+        }
+    }
+
+    &_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/_link.scss

@@ -0,0 +1,11 @@
+.link {
+    cursor: pointer;
+    color: $linkFontColor;
+    @include transition(color .1s ease-out);
+
+    &:hover {
+        color: $linkHoverFontColor;
+        text-decoration: underline;
+        @include transition(color .1s ease-in);
+    }
+}

css/contact_list.css

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

@@ -1,404 +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: #4E4E4E;
-    overflow: hidden;
-}
-
-.right-panel {
-    display:none;
-    position:absolute;
-    float: right;
-    top: 0px;
-    bottom: 0px;
-    right: 0px;
-    width: 20%;
-    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;
-}
-
-.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;
-}
-/*#ffde00*/
-#toolbar_button_record.active {
-    -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;
-}
-
-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;
-}
-
-.header_button_separator {
-    display: inline-block;
-    position:relative;
-    top: 5px;
-    width: 1px;
-    height: 20px;
-    background: #373737;
-}
-
-.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);
-}
-
-div.feedbackButton {
-    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;
-}
-
-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 {
-    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,73 @@
+/* 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/dialog';
+@import 'modals/feedback/feedback';
+@import 'videolayout_default';
+@import 'notice';
+@import 'popup_menu';
+@import 'recording';
+@import 'login_menu';
+@import 'popover';
+@import 'jitsi_popover';
+@import 'contact_list';
+@import 'chat';
+@import 'ringing/ringing';
+@import 'welcome_page';
+@import 'toolbars';
+@import 'side_toolbar_container';
+@import 'device_settings_dialog';
+@import 'jquery.contextMenu';
+@import 'keyboard-shortcuts';
+@import 'redirect_page';
+@import 'components/form-control';
+@import 'components/link';
+@import 'shortcuts/main';
+@import 'components/button-control';
+@import 'components/_input-control.scss';
+@import "modals/invite/invite";
+@import "connection-info";
+@import 'aui-components/dropdown';
+@import '404';
+@import 'policy';
+@import 'filmstrip';
+@import 'unsupported-browser/unsupported-desktop-browser';
+@import 'unsupported-browser/unsupported-mobile-browser';
+
+/* Modules END */

css/modals/_dialog.scss

@@ -0,0 +1,78 @@
+.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;
+    }
+}

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/overlay/_overlay.scss

@@ -0,0 +1,36 @@
+.overlay {
+    &__container,
+    &__container-light {
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: fixed;
+        z-index: $overlayZ;
+        background: $defaultBackground;
+    }
+
+    &__container-light {
+        @include transparentBg($defaultBackground, 0.7);
+    }
+
+    &__content {
+        position: absolute;
+        margin: 0 auto;
+        height: 100%;
+        width: 56%;
+        left: 50%;
+        @include transform(translateX(-50%));
+
+        &_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;
-}

css/reload_overlay/_reload_overlay.scss

@@ -0,0 +1,16 @@
+.reload_overlay_title {
+    display: block;
+    font-size: 16px;
+    line-height: 20px;
+}
+
+.reload_overlay_msg {
+    display: block;
+    font-size: 12px;
+    line-height: 30px;
+}
+
+#reloadProgressBar {
+    width: 180px;
+    margin: 5px auto;
+}

css/ringing/_ringing.scss

@@ -0,0 +1,41 @@
+.ringing {
+    display: block;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: $ringingZ;
+    background: linear-gradient(transparent, #000);
+    opacity: 0.8;
+
+    &.solidBG {
+        background: $defaultBackground;
+        opacity: 1;
+    }
+
+    &__content {
+        position: absolute;
+        width: 400px;
+        height: 250px;
+        left: 50%;
+        top: 50%;
+        margin-left: -200px;
+        margin-top: -125px;
+        font-weight: 400;
+        font-size: 14px;
+        text-align: center;
+    }
+
+    &__avatar {
+        width: 100px;
+        height: 100px;
+        border-radius: 50%;
+    }
+
+    &__caller-info {
+        .mention {
+            color: #333;
+        }
+    }
+}