Merge pull request #868 from m-voloshin/ui-redesign-in-progress

Fix for left toolbar (FireFox)

.buckconfig

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

.editorconfig

@@ -8,6 +8,3 @@ indent_size = 4
 indent_style = space
 max_line_length = 80
 trim_trailing_whitespace = true
-
-[Makefile]
-indent_style = tab

.eslintignore

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

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

@@ -1,50 +0,0 @@
-[ignore]
-; We fork some components by platform
-.*/*[.]android.js
-
-; Ignore "BUCK" generated dirs
-<PROJECT_ROOT>/\.buckd/
-
-; Ignore unexpected extra "@providesModule"
-.*/node_modules/.*/node_modules/fbjs/.*
-
-; Ignore duplicate module providers
-; For RN Apps installed via npm, "Libraries" folder is inside
-; "node_modules/react-native" but in the source repo it is in the root
-.*/Libraries/react-native/React.js
-.*/Libraries/react-native/ReactNative.js
-
-; Ignore 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,3 +1,2 @@
 *.bundle.js -text -diff
-*.pbxproj -text
 lib-jitsi-meet.js -text -diff

.gitignore

@@ -1,68 +1,11 @@
+node_modules
 *.swp
+.idea/
+*.iml
 .*.tmp
 deploy-local.sh
 libs/
 all.css
 *css.map
+unsupported_browser.css
 .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,12 +1,4 @@
-# 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/
-
+node_modules
+libs
+debian
 analytics.js

.watchmanconfig

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

404.html

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

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

Makefile

@@ -1,16 +1,20 @@
-BUILD_DIR = build
-CLEANCSS = ./node_modules/.bin/cleancss
-DEPLOY_DIR = libs
-LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
-NODE_SASS = ./node_modules/.bin/node-sass
 NPM = npm
-OUTPUT_DIR = .
+BROWSERIFY = ./node_modules/.bin/browserify
+NODE_SASS = ./node_modules/.bin/node-sass
+UGLIFYJS = ./node_modules/.bin/uglifyjs
+EXORCIST = ./node_modules/.bin/exorcist
+CLEANCSS = ./node_modules/.bin/cleancss
+STYLES_MAIN = css/main.scss
+STYLES_UNSUPPORTED_BROWSER = css/unsupported_browser.scss
 STYLES_BUNDLE = css/all.bundle.css
 STYLES_DESTINATION = css/all.css
-STYLES_MAIN = css/main.scss
-WEBPACK = ./node_modules/.bin/webpack
+DEPLOY_DIR = libs
+BROWSERIFY_FLAGS = -d
+OUTPUT_DIR = .
+LIBJITSIMEET_DIR = node_modules/lib-jitsi-meet/
+IFRAME_API_DIR = ./modules/API/external
 
-all: update-deps compile deploy clean
+all: update-deps compile compile-iframe-api uglify uglify-iframe-api 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
@@ -19,10 +23,13 @@ update-deps:
 	$(NPM) update && $(NPM) install node-sass
 
 compile:
-	$(WEBPACK) -p
+	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e app.js -s APP | $(EXORCIST) $(OUTPUT_DIR)/app.bundle.js.map > $(OUTPUT_DIR)/app.bundle.js
+
+compile-iframe-api:
+	$(BROWSERIFY) $(BROWSERIFY_FLAGS) -e $(IFRAME_API_DIR)/external_api.js -s JitsiMeetExternalAPI | $(EXORCIST) $(OUTPUT_DIR)/external_api.js.map > $(OUTPUT_DIR)/external_api.js
 
 clean:
-	rm -fr $(BUILD_DIR)
+	rm -f $(OUTPUT_DIR)/app.bundle.* $(OUTPUT_DIR)/external_api.*
 
 deploy: deploy-init deploy-appbundle deploy-lib-jitsi-meet deploy-css deploy-local
 
@@ -30,22 +37,23 @@ deploy-init:
 	mkdir -p $(DEPLOY_DIR)
 
 deploy-appbundle:
-	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)
+	cp $(OUTPUT_DIR)/app.bundle.min.js $(OUTPUT_DIR)/app.bundle.min.map \
+	$(OUTPUT_DIR)/app.bundle.js $(OUTPUT_DIR)/app.bundle.js.map \
+	$(OUTPUT_DIR)/external_api.js.map $(OUTPUT_DIR)/external_api.js \
+	$(OUTPUT_DIR)/external_api.min.map $(OUTPUT_DIR)/external_api.min.js \
+	$(OUTPUT_DIR)/analytics.js \
+	$(DEPLOY_DIR)
 
 deploy-lib-jitsi-meet:
-	cp \
-		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
-		$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
-		$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
-		$(DEPLOY_DIR)
+	cp $(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.js \
+	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.min.map \
+	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js \
+	$(LIBJITSIMEET_DIR)/lib-jitsi-meet.js.map \
+	$(LIBJITSIMEET_DIR)/connection_optimization/external_connect.js \
+	$(DEPLOY_DIR)
 
 deploy-css:
+	$(NODE_SASS) css/unsupported_browser.scss css/unsupported_browser.css ; \
 	$(NODE_SASS) $(STYLES_MAIN) $(STYLES_BUNDLE) && \
 	$(CLEANCSS) $(STYLES_BUNDLE) > $(STYLES_DESTINATION) ; \
 	rm $(STYLES_BUNDLE)
@@ -53,9 +61,17 @@ deploy-css:
 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
+
+uglify-iframe-api:
+	$(UGLIFYJS) -p relative $(OUTPUT_DIR)/external_api.js -o $(OUTPUT_DIR)/external_api.min.js --source-map $(OUTPUT_DIR)/external_api.min.map --in-source-map $(OUTPUT_DIR)/external_api.js.map
+
+
 source-package:
 	mkdir -p source_package/jitsi-meet/css && \
 	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,13 +12,6 @@ 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).
@@ -35,7 +28,7 @@ To build the Jitsi Meet application, just type
 make
 ```
 
-## Working with the library sources (lib-jitsi-meet)
+## Working with the library sources(lib-jitsi-meet).
 
 By default the library is build from its git repository sources. The default dependency path in package.json is :
 ```json
@@ -82,14 +75,6 @@ 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,9 +1,5 @@
-/* global ga */
-
 (function (ctx) {
   function Analytics() {
-    /* eslint-disable */
-
     /**
      * Google Analytics
      */
@@ -12,22 +8,16 @@
     })(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) {
+  Analytics.prototype.sendEvent = function (action, data, label, browserName) {
     // 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 || "";
+    var value = Math.round(parseFloat(data));
 
     ga('send', 'event', 'jit.si',
-        action + '.' + data.browserName, label, value);
+        action + '.' + browserName, label ? label : "", value ? value : null);
   };
 
-  if(typeof ctx.analyticsHandlers === "undefined")
-    ctx.analyticsHandlers = [];
-  ctx.analyticsHandlers.push(Analytics);
-}(window));
+  ctx.Analytics = Analytics;
+}(window));

android/app/BUCK

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

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

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

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

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

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

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

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

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

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

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

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

android/build.gradle

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

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

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

@@ -1,164 +0,0 @@
-#!/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

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

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

android/keystores/debug.keystore.properties

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

android/settings.gradle

@@ -1,11 +0,0 @@
-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,3 +1,4 @@
+/* global $, JitsiMeetJS, config, getRoomName */
 /* application specific logic */
 
 import "babel-polyfill";
@@ -6,23 +7,58 @@ import "jquery-contextmenu";
 import "jquery-ui";
 import "strophe";
 import "strophe-disco";
+import "strophe-caps";
+import "tooltip";
+import "popover";
 import "jQuery-Impromptu";
 import "autosize";
-
-import 'aui';
-import 'aui-experimental';
-import 'aui-css';
-import 'aui-experimental-css';
-
 window.toastr = require("toastr");
 
+import URLProcessor from "./modules/config/URLProcessor";
+import RoomnameGenerator from './modules/util/RoomnameGenerator';
+
 import UI from "./modules/UI/UI";
 import settings from "./modules/settings/Settings";
 import conference from './conference';
 import API from './modules/API/API';
 
-import translation from "./modules/translation/translation";
-import remoteControl from "./modules/remotecontrol/RemoteControl";
+import UIEvents from './service/UI/UIEvents';
+import getTokenData from "./modules/TokenData/TokenData";
+
+/**
+ * Tries to push history state with the following parameters:
+ * 'VideoChat', `Room: ${roomName}`, URL. If fail, prints the error and returns
+ * it.
+ */
+function pushHistoryState(roomName, URL) {
+    try {
+        window.history.pushState(
+            'VideoChat', `Room: ${roomName}`, URL
+        );
+    } catch (e) {
+        console.warn("Push history state failed with parameters:",
+            'VideoChat', `Room: ${roomName}`, URL, e);
+        return e;
+    }
+    return null;
+}
+
+/**
+ * Builds and returns the room name.
+ */
+function buildRoomName () {
+    let roomName = getRoomName();
+
+    if(!roomName) {
+        let word = RoomnameGenerator.generateRoomWithoutSeparator();
+        roomName = word.toLowerCase();
+        let historyURL = window.location.href + word;
+        //Trying to push state with current URL + roomName
+        pushHistoryState(word, historyURL);
+    }
+
+    return roomName;
+}
 
 const APP = {
     // Used by do_external_connect.js if we receive the attach data after
@@ -42,34 +78,103 @@ const APP = {
     UI,
     settings,
     conference,
-    translation,
-    /**
-     * The log collector which captures JS console logs for this app.
-     * @type {LogCollector}
-     */
-    logCollector: null,
-    /**
-     * Indicates if the log collector has been started (it will not be started
-     * if the welcome page is displayed).
-     */
-    logCollectorStarted : false,
-    /**
-     * After the APP has been initialized provides utility methods for dealing
-     * with the conference room URL(address).
-     * @type ConferenceUrl
-     */
-    ConferenceUrl : null,
     connection: null,
     API,
-    remoteControl
+    init () {
+        this.keyboardshortcut =
+            require("./modules/keyboardshortcut/keyboardshortcut");
+        this.translation = require("./modules/translation/translation");
+        this.configFetch = require("./modules/config/HttpConfigFetch");
+        this.tokenData = getTokenData();
+    }
 };
 
-// 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');
+/**
+ * If JWT token data it will be used for local user settings
+ */
+function setTokenData() {
+    let localUser = APP.tokenData.caller;
+    if(localUser) {
+        APP.settings.setEmail((localUser.getEmail() || "").trim(), true);
+        APP.settings.setAvatarUrl((localUser.getAvatarUrl() || "").trim());
+        APP.settings.setDisplayName((localUser.getName() || "").trim(), true);
+    }
+}
+
+function init() {
+    setTokenData();
+    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) {
+            APP.UI.hideRingOverLay();
+            APP.API.notifyConferenceLeft(APP.conference.roomName);
+            console.error(err);
+        });
+    }
+}
+
+/**
+ * If we have an HTTP endpoint for getting config.json configured we're going to
+ * read it and override properties from config.js and interfaceConfig.js.
+ * If there is no endpoint we'll just continue with initialization.
+ * Keep in mind that if the endpoint has been configured and we fail to obtain
+ * the config for any reason then the conference won't start and error message
+ * will be displayed to the user.
+ */
+function obtainConfigAndInit() {
+    let roomName = APP.conference.roomName;
+
+    if (config.configLocation) {
+        APP.configFetch.obtainConfig(
+            config.configLocation, roomName,
+            // Get config result callback
+            function(success, error) {
+                if (success) {
+                    var now = APP.connectionTimes["configuration.fetched"] =
+                        window.performance.now();
+                    console.log("(TIME) configuration fetched:\t", now);
+                    init();
+                } else {
+                    // Show obtain config error,
+                    // pass the error object for report
+                    APP.UI.messageHandler.openReportDialog(
+                        null, "dialog.connectError", error);
+                }
+            });
+    } else {
+        require("./modules/config/BoshAddressChoice").chooseAddress(
+            config, roomName);
+
+        init();
+    }
+}
+
+
+$(document).ready(function () {
+    var now = APP.connectionTimes["document.ready"] = window.performance.now();
+    console.log("(TIME) document ready:\t", now);
+
+    URLProcessor.setConfigParametersFromUrl();
+    APP.init();
+
+    APP.translation.init(settings.getLanguage());
+
+    APP.API.init(APP.tokenData.externalAPISettings);
+
+    obtainConfigAndInit();
+});
+
+$(window).bind('beforeunload', function () {
+    APP.API.dispose();
+});
 
 module.exports = APP;

authError.html

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

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

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

@@ -1,22 +0,0 @@
-<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,6 +1,5 @@
-/* jshint maxlen:false */
-
-var config = { // eslint-disable-line no-unused-vars
+/* jshint -W101 */
+var config = {
 //    configLocation: './config.json', // see ./modules/HttpConfigFetch.js
     hosts: {
         domain: 'jitsi-meet.example.com',
@@ -20,13 +19,13 @@ var config = { // eslint-disable-line no-unused-vars
     //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: null,
-    // Whether desktop sharing should be disabled on Chrome.
-    desktopSharingChromeDisabled: true,
+    desktopSharingChromeExtId: 'diibjkoicjeejcmhdnailmkgecihlobk',
     // The media sources to use when using screen sharing with the Chrome
     // extension.
-    desktopSharingChromeSources: ['screen', 'window', 'tab'],
+    desktopSharingChromeSources: ['screen', 'window'],
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
@@ -57,8 +56,6 @@ var config = { // eslint-disable-line no-unused-vars
     //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.
@@ -76,9 +73,5 @@ var config = { // eslint-disable-line no-unused-vars
     // 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
+    enableUserRolesBasedOnToken: false
 };

connection.js

@@ -1,8 +1,5 @@
 /* global APP, JitsiMeetJS, config */
-const logger = require("jitsi-meet-logger").getLogger(__filename);
-
 import AuthHandler from './modules/UI/authentication/AuthHandler';
-import jitsiLocalStorage from './modules/util/JitsiLocalStorage';
 
 const ConnectionEvents = JitsiMeetJS.events.connection;
 const ConnectionErrors = JitsiMeetJS.errors.connection;
@@ -86,7 +83,7 @@ function connect(id, password, roomName) {
 
         function handleConnectionFailed(err) {
             unsubscribe();
-            logger.error("CONNECTION FAILED:", err);
+            console.error("CONNECTION FAILED:", err);
             reject(err);
         }
 
@@ -110,9 +107,9 @@ function connect(id, password, roomName) {
 export function openConnection({id, password, retry, roomName}) {
 
     let usernameOverride
-        = jitsiLocalStorage.getItem("xmpp_username_override");
+        = window.localStorage.getItem("xmpp_username_override");
     let passwordOverride
-        = jitsiLocalStorage.getItem("xmpp_password_override");
+        = window.localStorage.getItem("xmpp_password_override");
 
     if (usernameOverride && usernameOverride.length > 0) {
         id = usernameOverride;

css/404.scss

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

css/_animations.scss

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

@@ -13,10 +13,6 @@ html, body{
     overflow: hidden;
 }
 
-p {
-    margin: 0;
-}
-
 html, body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }
@@ -29,11 +25,40 @@ html, body, input, textarea, keygen, select, button {
     color: #636363;
 }
 
+input[type='text'], input[type='password'], textarea {
+    -webkit-user-select: text;
+    user-select: text;
+    display: inline-block;
+    padding: 5px;
+    color: $defaultDarkColor;
+    border-radius: $borderRadius;
+    line-height: 32px;
+    height: 32px;
+    text-align: left;
+    border:1px solid $inputBorderColor;
+    outline: none; /* removes the default outline */
+    resize: none; /* prevents the user-resizing, adjust to taste */
+}
+
+textarea {
+    overflow: hidden;
+    word-wrap: break-word;
+    resize: horizontal;
+}
+
+button.no-icon {
+    padding: 0 1em;
+}
+
 button, input, select, textarea {
     margin: 0;
     vertical-align: baseline;
-    color: $inputColor;
-    font-size: 1em;
+    color: $defaultDarkColor;
+    background: $inputLightBackground;
+    font-size: 12px;
+    border: none;
+    box-shadow: none;
+    outline: none;
 }
 
 button, select, input[type="button"],
@@ -45,26 +70,10 @@ input[type="reset"], input[type="submit"] {
     cursor: pointer;
 }
 
-textarea {
-    overflow: hidden;
-    word-wrap: break-word;
-    resize: none;
-    line-height: 1.5em;
-}
-
-input[type='text'], input[type='password'], textarea {
-    outline: none; /* removes the default outline */
-    resize: none; /* prevents the user-resizing, adjust to taste */
-}
-
 button {
     color: #FFF;
-    background-color: $buttonBackground;
+    background-color: $buttonBackground !important;
     border-radius: $borderRadius;
-
-    &.no-icon {
-        padding: 0 1em;
-    }
 }
 
 button,
@@ -72,6 +81,24 @@ form {
     display: block;
 }
 
+#downloadlog {
+    display: none;
+    position: absolute;
+    bottom: 5;
+    left: 5;
+    overflow: visible;
+    color: rgba(255,255,255,.50);
+}
+
+.active {
+    background-color: #00ccff;
+}
+
+.glow
+{
+    text-shadow: 0px 0px 30px #06a5df, 0px 0px 10px #06a5df, 0px 0px 5px #06a5df,0px 0px 3px #06a5df;
+}
+
 .watermark {
     display: block;
     position: absolute;
@@ -84,6 +111,7 @@ form {
 }
 
 .leftwatermark {
+    display: none;
     left: $defaultToolbarSize;
     margin-left: 10px;
     background-image: url($defaultWatermarkLink);
@@ -91,11 +119,13 @@ form {
 }
 
 .rightwatermark {
+    display: none;
     right: 15;
     background-position: center right;
 }
 
 .poweredby {
+    display: none;
     position: absolute;
     left: 25;
     bottom: 7;
@@ -116,27 +146,33 @@ form {
 }
 
 /**
-* Tooltips
-**/
-.tipsy {
-    z-index: $tooltipsZ;
-    &-inner {
-        background-color: $tooltipBg;
-    }
-
-    &-arrow {
-        border-color: $tooltipBg;
-    }
+ * Hides an element.
+ */
+.hide {
+    display: none !important;
 }
 
 /**
-* Dialogs fade
-*/
-.aui-blanket {
-    visibility: visible;
+ * Shows an element.
+ */
+.show {
+    display: block !important;
 }
 
-#inviteLinkRef {
-    -webkit-user-select: text;
-    user-select: text;
+/**
+ * Shows an inline element.
+ */
+.show-inline {
+    display: inline-block !important;
 }
+
+/**
+ * Shows a flex element.
+ */
+.show-flex {
+    display: -webkit-box !important;
+    display: -moz-box !important;
+    display: -ms-flexbox !important;
+    display: -webkit-flex !important;
+    display: flex !important;
+}

css/_chat.scss

@@ -13,7 +13,8 @@
     font-size: 10pt;
     width: 100%;
     height: 90%;
-    overflow: auto;
+    overflow-y: scroll;
+    overflow-x: hidden;
     word-wrap: break-word;
 
     a:link {
@@ -103,14 +104,15 @@
     color: #a7a7a7;
 }
 
+#unreadMessages {
+    font-size: 8px;
+    position: absolute;
+}
+
 #chat_container .username {
     float: left;
     padding-left: 5px;
     font-weight: bold;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    width: 95%;
-    overflow: hidden;
 }
 
 #chat_container .timestamp {
@@ -133,7 +135,7 @@
 .chatmessage {
     background: #3a3a3a;
     width: 93%;
-    margin-left: 9px;
+    margin-left: 5%;
     margin-right: auto;
     border-radius: 5px;
     border-top-left-radius: 0px;
@@ -236,4 +238,4 @@
 
 #usermsg::-webkit-scrollbar-track-piece {
     background: #3a3a3a;
-}
+}

css/_connection-info.scss

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

@@ -2,35 +2,31 @@
     cursor: default;
 
     > ul#contacts {
-        font-size: 12px;
+        position: absolute;
+        top: 31px;
         bottom: 0px;
-        margin: 0;
-        margin-top: 12px;
-        padding: 0px;
         width: 100%;
+        margin: 0px;
+        padding: 0px;
+        overflow-y: scroll;
+        overflow-x: hidden;
     }
 
     .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;
+        color: #FFF;
+        font-size: 10pt;
+        padding: 7px 10px;
+        margin: 2px;
 
         &:hover,
         &:active {
@@ -41,10 +37,6 @@
             display: inline-block;
             vertical-align: middle;
             margin: 0px;
-            width: 100%;
-            line-height: 1.5em;
-            text-overflow: ellipsis;
-            overflow: hidden;
         }
     }
 }

css/_feedback.scss

@@ -0,0 +1,107 @@
+@-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 {
+    -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
+}
+
+.text-center {
+    text-align: center;
+}
+
+.feedbackDetails textarea {
+    resize: vertical;
+    min-height: 100px;
+}
+
+.feedback-rating {
+    line-height: 1.2;
+    padding: 20px 0;
+
+    h2 {
+        font-weight: 400;
+        font-size: 24px;
+        line-height: 1.2;
+        padding: auto;
+        margin: auto;
+        border: none;
+    }
+
+    p {
+        margin-top: 10px;
+        margin-left: 0px;
+        margin-bottom: 0px;
+        margin-right: 0px;
+    }
+
+    .star-label {
+        font-size: 16px;
+        color: $rateStarLabelColor;
+    }
+
+    .star-btn {
+        color: $rateStarDefault;
+        font-size: 36px;
+        position: relative;
+        cursor: pointer;
+        outline: none;
+        text-decoration: none;
+        @include transition(all .2s ease);
+
+        &.starHover,
+        &.active,
+        &:hover {
+            color: $rateStarActivity;
+
+            .fa {
+                top: -6px;
+            }
+        };
+
+        &.rated:hover .fa {
+            top: 0;
+        }
+
+        .fa {
+            position: relative;
+        }
+    }
+}

css/_filmstrip.scss

@@ -1,124 +0,0 @@
-%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,6 +255,9 @@
 .fa-road:before {
   content: "\f018";
 }
+.fa-download:before {
+  content: "\f019";
+}
 .fa-arrow-circle-o-down:before {
   content: "\f01a";
 }
@@ -839,6 +842,9 @@
 .fa-exchange:before {
   content: "\f0ec";
 }
+.fa-cloud-download:before {
+  content: "\f0ed";
+}
 .fa-cloud-upload:before {
   content: "\f0ee";
 }

css/_font.scss

@@ -16,18 +16,14 @@
     font-weight: normal;
     font-variant: normal;
     text-transform: none;
-    line-height: 1.22em;
+    line-height: 0.75em;
     font-size: 1.22em;
-    cursor: default;
 
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-mic-camera-combined:before {
-  content: "\e903";
-}
 .icon-feedback:before {
   content: "\e91d";
 }
@@ -37,6 +33,9 @@
 .icon-avatar:before {
   content: "\e901";
 }
+.icon-autorenew:before {
+  content: "\e903";
+}
 .icon-hangup:before {
   content: "\e905";
 }
@@ -58,12 +57,6 @@
 .icon-kick:before {
   content: "\e904";
 }
-.icon-menu-up:before {
-  content: "\e91f";
-}
-.icon-menu-down:before {
-  content: "\e920";
-}
 .icon-full-screen:before {
   content: "\e90b";
 }
@@ -91,9 +84,6 @@
 .icon-mic-disabled:before {
   content: "\e912";
 }
-.icon-raised-hand:before {
-  content: "\e91e";
-}
 .icon-contactList:before {
   content: "\e91b";
 }
@@ -109,9 +99,6 @@
 .icon-star:before {
   content: "\e916";
 }
-.icon-switch-camera:before {
-  content: "\e921";
-}
 .icon-share-desktop:before {
   content: "\e917";
 }

css/_functions.scss

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

css/_inlay.scss

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

@@ -6,42 +6,100 @@
     display: none;
     max-width: 300px;
     min-width: 100px;
+    padding: 1px;
     text-align: left;
-    color: $popoverFontColor;
-    background-color: $popoverBg;
+    color: #333333;
+    background-color: #ffffff;
     background-clip: padding-box;
-    border-radius: $borderRadius;
+    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: -$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;
-    }
+    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: -35px;
+}
+
+.jitsipopover_green
+{
+    color: #4abd04;
+}
+
+.jitsipopover_orange
+{
+    color: #ffa800;
+}
+
+.jitsipopover_blue
+{
+    color: #21B9FC;
+}
+
+.jitsipopover_showmore
+{
+    background-color: #21B9FC;
+    color: #ffffff;
+    cursor: pointer;
+    border-radius: 3px;
+    text-align: center;
+    width: 90px;
+    height: 16px;
+    padding-top: 4px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin: 15px auto 0px auto;
 }

css/_jquery-impromptu.scss

@@ -9,8 +9,7 @@
 }
 div.jqi{ 
 	width: 400px;
-	position: absolute;
-    color: #3a3a3a;
+	position: absolute; 
 	background-color: #ffffff; 
 	font-size: 11px; 
 	text-align: left; 

css/_jquery.contextMenu.scss

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

css/_login_menu.scss

@@ -31,6 +31,24 @@ ul.loginmenu:after {
     left: 18px;
 }
 
+li a.authButton{
+    background-color: #06a5df;
+    padding-top: 3px;
+    padding-bottom: 3px;
+    padding-left: 29px;
+    padding-right: 29px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+span.authentication:hover ul.loginmenu, ul.loginmenu:hover {
+    display:block !important;
+}
+
+span.authentication {
+    position: relative;
+}
+
 a.disabled {
     color: gray !important;
     pointer-events: none;
@@ -55,4 +73,4 @@ ul.loginmenu.extendedToolbarPopup:after {
     position: absolute;
     top: 18px;
     left: -7px;
-}
+}

css/_mixins.scss

@@ -18,14 +18,6 @@
   animation:         $animations;
 }
 
-@mixin flex() {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
 /**
  * Keyframes mixin.
  */
@@ -45,117 +37,29 @@
 }
 
 @mixin circle($diameter) {
-  width: $diameter;
-  height: $diameter;
-  border-radius: 50%;
+    width: $diameter;
+    height: $diameter;
+    border-radius: 50%;
 }
 
-/**
-* Absolute position the element at the top left corner
-**/
-@mixin topLeft() {
+@mixin absoluteAligning($sizeX, $sizeY) {
+    top: 50%;
+    left: 50%;
     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;
+    @include transform(translate(-#{$sizeX / 2}, -#{$sizeY / 2}))
 }
 
 @mixin transform($func) {
-  -moz-transform: $func;
-  -ms-transform: $func;
-  -webkit-transform: $func;
-  -o-transform: $func;
-  transform: $func;
+    -moz-transform: $func;
+    -ms-transform: $func;
+    -webkit-transform: $func;
+    -o-transform: $func;
+    transform: $func;
 }
 
 @mixin transition($transition...) {
-  -moz-transition:    $transition;
-  -o-transition:      $transition;
-  -webkit-transition: $transition;
-  transition:         $transition;
+    -moz-transition:    $transition;
+    -o-transition:      $transition;
+    -webkit-transition: $transition;
+    transition:         $transition;
 }
-
-/**
-* Mixin styling 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,6 +19,11 @@
     width: 100%;
 }
 
+.jqibuttons button {
+    margin-right: 5px;
+    float:right;
+}
+
 button.jqidefaultbutton #inviteLinkRef {
     color: #2c8ad2;
 }

css/_policy.scss

@@ -1,15 +0,0 @@
-.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/_popup_menu.scss

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

css/_recording.scss

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

css/_redirect_page.scss

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

@@ -0,0 +1,114 @@
+/**
+ * Toolbar side panel main container element.
+ */
+#sideToolbarContainer {
+    display: inline-block;
+    position:absolute;
+    top: 0px;
+    left: $defaultToolbarSize;
+    width: 0%;
+    height: 100%;
+    max-width: 200px;
+    background-color: rgba(0,0,0,0.8);
+    z-index: 800;
+    overflow: hidden;
+
+    /**
+     * Labels inside the side panel.
+     */
+    label {
+        color: $defaultSemiDarkColor;
+    }
+
+    /**
+     * Form elements and blocks.
+     */
+    input, label, select, button, a, .sideToolbarBlock {
+        display: inline-block;
+        margin-top: 15px;
+        margin-left: 10%;
+        width: 80%;
+    }
+
+    /**
+     * Specify colors for edit elements.
+     */
+    select, input[type="button"], input[type="text"],
+    input[type="reset"], input[type="submit"] {
+        color: $defaultColor;
+        background: $inputBackground;
+        border: none;
+    }
+
+    /**
+     * Specify styling of elements inside a block.
+     */
+    .sideToolbarBlock {
+        input, label, button, a, select {
+            margin-top: 5px;
+            margin-left: 0;
+            width: 100%;
+        }
+
+        .startMutedLabel,
+        .followMeLabel {
+            display: inline;
+            margin-top: 0;
+        }
+    }
+
+    /**
+     * Inner container, for example contact list, settings or profile.
+     */
+    .sideToolbarContainer__inner {
+        display: none;
+        width: 200px;
+        color: #FFF;
+
+        /**
+         * Titles and subtitles of inner containers.
+         */
+        > div.title,
+          div.subTitle {
+            color: $defaultColor !important;
+            text-align: left;
+            margin: 10px 0px 10px 0px;
+            padding: 5px 10px 5px 10px;
+        }
+
+        /**
+         * Main title size.
+         */
+        > div.title {
+            font-size: 16px;
+        }
+
+        /**
+         * Subtitle specific properties.
+         */
+        > div.subTitle {
+            font-size: 12px;
+            background: $inputSemiBackground !important;
+            margin-top: 20px !important;
+            margin-bottom: 8px !important;
+        }
+
+        /**
+         * First element after a title.
+         */
+        .first {
+            margin-top: 0px !important;
+        }
+    }
+}
+
+#device_settings {
+    width : auto !important;
+    text-align: center;
+}
+
+#startAudioMuted,
+#startVideoMuted,
+#followMeCheckBox {
+    width: 13px !important;
+}

css/_side_toolbar_container.scss

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

@@ -7,101 +7,206 @@
  *
  * Author: John Papa and Hans Fjällemark
  * Project: https://github.com/CodeSeven/toastr
- *
- * Last updated: October 13, 2016
  */
-
-.toast-title,
-.toast-message .nickname {
+.toast-title {
   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 label {
+  color: #ffffff;
+}
+
+.toast-message .nickname {
+  font-weight: bold;
 }
 
 .toast-message a:hover {
-  text-decoration: underline;
+  color: #cccccc;
+  text-decoration: none;
 }
 
-.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;
+  position: relative;
+  right: -0.3em;
+  top: -0.3em;
   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;
+  font-size: 15px;
+  height: 15px;
+  width: 15px;
+  font-weight: bold;
+  color: #ffffff;
+  background: transparent !important;
+  -webkit-text-shadow: 0 1px 0 #ffffff;
+  text-shadow: 0 1px 0 #ffffff;
+  opacity: 0.8;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  filter: alpha(opacity=80);
 }
 
 .toast-close-button:hover,
 .toast-close-button:focus {
-  @include opacity(1);
+  color: #ffffff;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 1;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  filter: alpha(opacity=100);
 }
-
-
-.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);
+/*Additional properties for button version
+ iOS requires the button element instead of an anchor tag.
+ If you want the anchor version, it requires `href="#"`.*/
+button.toast-close-button {
+  padding: 0;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  -webkit-appearance: none;
 }
-
-.toast:hover {
-  @include opacity(1);
+.toast-top-full-width {
+  top: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-bottom-full-width {
+  bottom: 0;
+  right: 0;
+  width: 100%;
+}
+.toast-top-left {
+  top: 12px;
+  left: 12px;
+}
+.toast-top-right {
+  top: 12px;
+  right: 12px;
+}
+.toast-bottom-right {
+  right: 12px;
+  bottom: 12px;
+}
+.toast-bottom-left {
+  bottom: 12px;
+  left: 12px;
 }
-
 #toast-container {
   position: fixed;
-  z-index: $notificationZ;
+  z-index: 1012;
+  /*overrides*/
+
+}
+#toast-container * {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+#toast-container > div {
+  margin: 0 0 6px;
+  padding: 15px 15px 15px 15px;
+  width: 300px;
+  -moz-border-radius: 3px 3px 3px 3px;
+  -webkit-border-radius: 3px 3px 3px 3px;
+  border-radius: 3px 3px 3px 3px;
+  background-position: 15px center;
+  background-repeat: no-repeat;
+  -moz-box-shadow: 0 0 12px #999999;
+  -webkit-box-shadow: 0 0 12px #999999;
+  box-shadow: 0 0 12px #999999;
+  color: #ffffff;
+  opacity: 0.8;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+  filter: alpha(opacity=80);
+}
+#toast-container > :hover {
+  -moz-box-shadow: 0 0 12px #000000;
+  -webkit-box-shadow: 0 0 12px #000000;
+  box-shadow: 0 0 12px #000000;
+  opacity: 1;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
+  filter: alpha(opacity=100);
+  cursor: pointer;
+}
+#toast-container .toast-info,
+#toast-container .toast-success,
+#toast-container .toast-error,
+#toast-container .toast-warning
+{
+  padding: 10px 10px 10px 10px !important;
+}
+
+#toast-container.toast-top-full-width > div,
+#toast-container.toast-bottom-full-width > div {
+  width: 100%;
+  margin: auto;
+}
+.toast {
+  background-color: #030303;
+}
+.toast-success {
+  background-color: #51a351;
+}
+.toast-error {
+  background-color: #bd362f;
+}
+.toast-info {
+  background-color: #2f96b4;
+}
+.toast-warning {
+  background-color: #f89406;
+}
+/*Responsive Design*/
+@media all and (max-width: 240px) {
+  #toast-container > div {
+    padding: 8px 8px 8px 8px;
+    width: 11em;
+  }
+  #toast-container .toast-close-button {
+    right: -0.2em;
+    top: -0.2em;
+  }
+}
+@media all and (min-width: 241px) and (max-width: 480px) {
+  #toast-container > div {
+    padding: 8px 8px 8px 8px;
+    width: 18em;
+  }
+  #toast-container .toast-close-button {
+    right: -0.2em;
+    top: -0.2em;
+  }
+}
+@media all and (min-width: 481px) and (max-width: 768px) {
+  #toast-container > div {
+    padding: 15px 15px 15px 15px;
+    width: 25em;
+  }
 }
 
 #toast-container.notification-bottom-right {
-  $videoOffset: 2 * ($thumbnailVideoMargin + $thumbnailsBorder) + $thumbnailVideoBorder;
-  bottom: 135px;
-  right: $hideFilmstripButtonWidth + $videoOffset;
+  bottom: 140px;
+  right: 5px;
 }
 
-#toast-container * {
-  @include box-sizing(border-box);
+#toast-container.notification-bottom-right-center {
+  right: 205px;
 }
 
-#toast-container .toast {
-  width: $notificationWidth;
-  margin: 0 0 8px;
+#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;
 }

css/_toolbars.scss

@@ -1,21 +1,9 @@
 .toolbar {
-    background-color: $toolbarBackground;
+    background-color: rgba(0,0,0,0.5);
     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{
@@ -28,7 +16,8 @@
     z-index: $toolbarZ;
     pointer-events: none;
     min-height: 100px;
-    opacity: 0;
+    transform: translateY(-100%);
+    -webkit-transform: translateY(-100%);
 }
 
 #subject {
@@ -53,14 +42,16 @@
     margin-left: auto;
     margin-right: auto;
     width: auto;
-    border-radius: 3px;
-    .button:first-child {
-        border-bottom-left-radius: 3px;
-        border-top-left-radius: 3px;
+    border-radius: 4px;
+
+    .first {
+        border-bottom-left-radius: 4px;
+        border-top-left-radius: 4px;
     }
-    .button:last-child {
-        border-bottom-right-radius: 3px;
-        border-top-right-radius: 3px;
+
+    .last {
+        border-bottom-right-radius: 4px;
+        border-top-right-radius: 4px;
     }
 }
 
@@ -72,10 +63,9 @@
     display: flex;
     width: $defaultToolbarSize;
     height: 100%;
-    top: 0;
-    left: 0;
+    top: 0px;
+    left: 0px;
     padding-top: 10px;
-    box-sizing: border-box;
     flex-direction: column;
     flex-wrap: nowrap;
     justify-content: flex-start;
@@ -93,6 +83,14 @@
     display: none;
 }
 
+#numberOfParticipants {
+  position: absolute;
+  top: 5px;
+  line-height: 13px;
+  font-weight: bold;
+  font-size: 11px;
+}
+
 #mainToolbar a.button:last-child::after {
     content: none;
 }
@@ -120,10 +118,6 @@
     cursor: default;
 }
 
-.button.toggled {
-    background: $toolbarToggleBackground !important;
-}
-
 a.button.unclickable:hover,
 a.button.unclickable:active,
 a.button.unclickable.selected{
@@ -135,7 +129,6 @@ 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;
 }
@@ -151,36 +144,6 @@ a.button>#avatar {
     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.
  */
@@ -252,7 +215,7 @@ a.button>#avatar {
  */
 @include keyframes(slideInExt) {
     from { width: 0px; }
-    to   { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+    to   { width: 200px; } // TO FIX: Make this value a percentage.
 }
 
 .slideInExt {
@@ -260,7 +223,7 @@ a.button>#avatar {
 }
 
 @include keyframes(slideOutExt) {
-  from { width: $sidebarWidth; } // TO FIX: Make this value a percentage.
+  from { width: 200px; } // TO FIX: Make this value a percentage.
   to   { width: 0px; }
 }
 
@@ -269,12 +232,5 @@ a.button>#avatar {
 }
 
 /**
- * START of fade in animation for main toolbar
+ * END of slide in animation for extended toolbar panel.
  */
-.fadeIn {
-    @include animation('fadeIn .3s linear .2s forwards');
-}
-
-.fadeOut {
-    @include animation('fadeOut .5s linear forwards');
-}

css/_unsupported_browser.scss

@@ -0,0 +1,136 @@
+body {
+    width:100%;
+    height:100%;
+    background-color: white;
+    color: #424242;
+    font-family: $baseFontFamily;
+    font-size: 28px;
+    margin:0;
+    padding:0;
+}
+#wrap{
+    display: block;
+    position: absolute;
+    width:500px;
+    height: 565px;
+    overflow:hidden;
+    text-align: center;
+    margin: auto;
+    top: 0; left: 0; bottom: 0; right: 0;
+}
+.firefox{
+    font-size: 11pt;
+    color: #c8c8c8;
+    width: 468px;
+    text-align: center;
+    margin: 30px auto 0px auto;
+    padding-left: 15px;
+}
+#text{
+    display:inline-block;
+    font-size: 28px;
+    /* width: 568px; */
+    vertical-align:middle;
+    padding-top: 25px;
+}
+
+a {
+    color: #087dba;
+    text-decoration:none;
+}
+
+.browser {
+    width: 138px;
+    height: 163px;
+    margin-top: 5px;
+    background-color: #e8e8e8;
+    border: 1px solid #cfcfcf;
+    border-radius: 10px;
+}
+
+.browser_wrapper
+{
+    width: 138px;
+    /* height: 188px; */
+    vertical-align: middle;
+    color: #929391;
+    font-size: 20px;
+    float: left;
+    margin-left: 15px;
+    margin-top: 5px;
+}
+
+.browser_text
+{
+    height: 2em;
+}
+.supported_browsers
+{
+    margin: 0px auto 0px auto;
+    /* width: 660px; */
+}
+
+.clear
+{
+    clear: both;
+}
+
+.button
+{
+    background-color: #62c82a;
+    border: 1px solid #3c8117;
+    border-radius: 10px;
+    color: #FFFFFF;
+    font-size: 12px;
+    text-align: center;
+    width: 115px;
+    height: 26px;
+    padding-top: 13px;
+    margin: 15px auto 0px auto;
+}
+
+.logo
+{
+    margin: 20px auto 0px auto;
+}
+
+#chrome_logo
+{
+    width: 78px;
+    height: 78px;
+    background-image: url('../images/chrome.png');
+}
+#chromium_logo
+{
+    width: 77px;
+    height: 78px;
+    background-image: url('../images/chromium.png');
+}
+#firefox_logo
+{
+    width: 86px;
+    height: 80px;
+    background-image: url('../images/firefox.png');
+}
+
+#opera_logo
+{
+    width: 73px;
+    height: 78px;
+    background-image: url('../images/opera.png');
+}
+
+#safari_logo
+{
+    width: 78px;
+    height: 79px;
+    background-image: url('../images/safari.png');
+}
+
+#ie_logo
+{
+    width: 80px;
+    height: 78px;
+    background-image: url('../images/ie.png');
+}
+

css/_utils.scss

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

@@ -1,5 +1,3 @@
-@import "themes/light";
-
 /**
  * Style variables
  */
@@ -12,125 +10,40 @@ $hangupFontSize: 2em;
  */
 $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);
+$defaultDarkColor: #4F4F4F;
+$defaultBackground: #474747;
 $toolbarSelectBackground: rgba(0, 0, 0, .6);
-$toolbarBadgeBackground: #165ECC;
-$toolbarBadgeColor: #FFFFFF;
-$toolbarToggleBackground: #12499C;
-$splitterToolbarButtonMargin: 18px;
-
-/**
- * Main controls
- * TODO: looks like we don't use it
- */
+$inputBackground: rgba(132, 132, 132, .5);
 $inputSemiBackground: rgba(132, 132, 132, .8);
 $inputLightBackground: #EBEBEB;
+$inputBorderColor: #EBEBEB;
+$buttonBackground: #44A5FF;
 
-/**
- * Video layout
- */
-$videoThumbnailHovered: rgba(22, 94, 204, .4);
-$videoThumbnailSelected: #165ECC;
-$participantNameColor: #fff;
+$connectionIndicatorBg: #bf2117;
 $thumbnailPictogramColor: #fff;
 $dominantSpeakerBg: #165ecc;
-$raiseHandBg: #D6D61E;
-$audioLevelBg: #44A5FF;
-$connectionIndicatorBg: #165ecc;
-$audioLevelShadow: rgba(9, 36, 77, 0.9);
-$videoStateIndicatorColor: $defaultColor;
-$videoStateIndicatorBackground: $toolbarBackground;
+$raiseHandBg: #6c64a6;
+$participantNameColor: #fff;
+$bodyBg: #091e42;
+$bodyBgLight: #06a5df;
 
-/**
- * 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;
+$rateStarActivity: #f6c342;
+$rateStarLabelColor: #333;
 
 /**
  * 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;
+$overlayZ: 800;

css/_videolayout_default.scss

@@ -1,10 +1,5 @@
-#videoconference_page {
-    min-height: 100%;
-}
-
 #videospace {
     display: block;
-    min-height: 100%;
     position: absolute;
     top: 0px;
     left: 0px;
@@ -12,115 +7,98 @@
     overflow: hidden;
 }
 
+#remoteVideos {
+    display: -webkit-box;
+    display: -moz-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+
+    position:absolute;
+    text-align:right;
+    height:196px;
+    padding: 10px 10px 10px 10px;
+    bottom: 0;
+    left: 0;
+    right: 0px;
+    width:auto;
+    border:1px solid transparent;
+    z-index: 5;
+    transition: bottom 2s;
+    overflow: visible !important;
+    font-size: 0pt; /*!!!Removes the gap between the local video container and the remote videos.*/
+}
+
+#remotevideos.hidden {
+    bottom: -196px;
+}
+
 .videocontainer {
     position: relative;
     text-align: center;
+}
 
-    &__background {
-        @include topLeft();
-        background-color: black;
-        border-radius: $borderRadius;
-        width: 100%;
-        height: 100%;
-    }
+#remoteVideos .videocontainer {
+    display: none;
+    position: relative;
+    background-color: black;
+    background-size: contain;
+    border-radius:1px;
+    margin: 0 5px;
+    border: 1px solid #212425;
+}
 
-    /**
-     * 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.
-    }
+.videocontainer__toolbar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 100%;
+    height: 25px;
+    max-height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+}
 
-    &__toolbar {
-        bottom: 0;
-        padding: 0 5px 0 5px;
-        height: $thumbnailToolbarHeight;
-    }
+#remoteVideos .videocontainer.videoContainerFocused {
+    cursor: hand;
+    transition-duration: 0.5s;
+    -webkit-transition-duration: 0.5s;
+    -webkit-animation-name: greyPulse;
+    -webkit-animation-duration: 2s;
+    -webkit-animation-iteration-count: 1;
+}
 
-    &__toptoolbar {
-        $toolbarPadding: 5px;
-        top: 0;
-        padding: $toolbarPadding;
-        padding-bottom: 0;
+#remoteVideos .videocontainer:hover {
+    border: 1px solid #c1c1c1;
+}
 
-        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;
+#remoteVideos .videocontainer.videoContainerFocused {
+    //box-shadow: inset 0 0 28px #006d91;
+    border: 1px solid #006d91;
+}
 
-            &: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;
-    }
+#remoteVideos .videocontainer.videoContainerFocused:hover {
+    //box-shadow: inset 0 0 5px #c1c1c1, 0 0 10px #c1c1c1, inset 0 0 60px #006d91;
+    border: 1px solid #c1c1c1;
 }
 
 #localVideoWrapper {
     display:inline-block;
 }
 
+/* With TemasysWebRTC plugin <object/> element is used
+   instead of <video/> */
+#remoteVideos .videocontainer>video,
+#remoteVideos .videocontainer>object {
+    cursor: hand;
+    border-radius:1px;
+    object-fit: cover;
+    overflow: hidden;
+}
+
 .flipVideoX {
     transform: scale(-1, 1);
     -moz-transform: scale(-1, 1);
@@ -130,8 +108,8 @@
 
 #localVideoWrapper>video,
 #localVideoWrapper>object {
-    border-radius: $borderRadius !important;
     cursor: hand;
+    border-radius:1px !important;
     object-fit: cover;
 }
 
@@ -148,6 +126,7 @@
     object-fit: cover;
 }
 
+#presentation,
 #sharedVideo,
 #etherpad,
 #localVideoWrapper>video,
@@ -166,7 +145,8 @@
     height: 100%;
 }
 
-#etherpad {
+#etherpad,
+#presentation {
     text-align: center;
 }
 
@@ -174,32 +154,48 @@
     z-index: 0;
 }
 
-/**
- * Positions video thumbnail display name and editor.
- */
-.videocontainer .displayname,
-.videocontainer .editdisplayname {
+#remoteVideos .videocontainer>span.focusindicator,
+#remoteVideos .videocontainer>div.remotevideomenu {
+    position: absolute;
+    color: #FFFFFF;
+    bottom: 0;
+    right: 0;
+    padding: 5px 0px;
+    width: 25px;
+    font-size: 9pt;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    border: 0px;
+    z-index: 2;
+    text-align: center;
+}
+
+#remoteVideos .videocontainer>span.focusindicator {
+    display: inline-block;
+}
+
+#remoteVideos .videocontainer>div.remotevideomenu {
+    display: block;
+}
+
+.videocontainer>span.displayname,
+.videocontainer>input.displayname {
     display: inline-block;
     position: absolute;
-    left: 10%;
-    width: 80%;
-    top: 50%;
-    @include transform(translateY(-40%));
+    bottom: 4px;
+    left: 25%;
     color: $participantNameColor;
     text-align: center;
     text-overflow: ellipsis;
+    width: 50%;
     font-size: 12px;
     font-weight: 100;
+    letter-spacing: 1px;
     overflow: hidden;
     white-space: nowrap;
-    line-height: $thumbnailToolbarHeight;
     z-index: 2;
 }
 
-/**
- * Positions video thumbnail display name editor.
- */
-.videocontainer .editdisplayname {
+.videocontainer>input.displayname {
     outline: none;
     border: none;
     background: none;
@@ -207,16 +203,89 @@
     padding: 0;
 }
 
-#localVideoContainer .displayname:hover {
+.videocontainer>span.status {
+    display: inline-block;
+    position: absolute;
+    color: #FFFFFF;
+    background: rgba(0,0,0,.7);
+    text-align: center;
+    text-overflow: ellipsis;
+    width: 70%;
+    height: 15%;
+    left: 15%;
+    bottom: 2%;
+    padding: 5px;
+    font-size: 10pt;
+    overflow: hidden;
+    white-space: nowrap;
+    z-index: 2;
+    border-radius:3px;
+}
+
+.connectionindicator
+{
+    display: inline-block;
+    position: absolute;
+    top: 7px;
+    right: 0;
+    padding: 0px 5px;
+    z-index: 3;
+    width: 18px;
+    height: 13px;
+}
+
+.connection.connection_empty
+{
+    color: #8B8B8B;/*#FFFFFF*/
+    overflow: hidden;
+}
+
+.connection.connection_full
+{
+    color: #FFFFFF;/*#15A1ED*/
+    overflow: hidden;
+}
+
+.connection
+{
+    position: absolute;
+    left: 0px;
+    top: 3px;
+    font-size: 7.5px;
+    border: 0px;
+    width: 18px;
+    height: 13px;
+}
+
+.connection_info
+{
+    float: left;
+    padding-bottom: 5px;
+}
+
+.connection_info > table
+{
+    white-space: nowrap;
+}
+
+.connection_info, .connection_info > table
+{
+    text-align: left;
+    font-size: 11px;
+    color: #ffffff;
+}
+
+#localVideoContainer>span.status:hover,
+#localVideoContainer>span.displayname:hover {
     cursor: text;
 }
 
-.videocontainer .displayname {
+.videocontainer>span.status,
+.videocontainer>span.displayname {
     pointer-events: none;
-    padding: 0 3px 0 3px;
 }
 
-.videocontainer .editdisplayname {
+.videocontainer>input.displayname {
     height: auto;
 }
 
@@ -224,6 +293,7 @@
     pointer-events: auto !important;
 }
 
+.videocontainer>a.status,
 .videocontainer>a.displayname {
     display: inline-block;
     position: absolute;
@@ -236,98 +306,59 @@
     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
-{
+.videocontainer>span.audioMuted {
     display: inline-block;
+    position: absolute;
+    color: #FFFFFF;
+    bottom: 0;
+    left: 0;
+    padding: 8px 5px;
+    width: 25px;
+    font-size: 8pt;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    border: 0px;
+    z-index: 3;
+    text-align: center;
+}
+
+.videocontainer>span.videoMuted {
+    display: inline-block;
+    position: absolute;
+    color: #FFFFFF;
+    bottom: 0;
+    padding: 8px 5px;
+    width: 25px;
+    font-size: 8pt;
+    text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
+    border: 0px;
+    z-index: 3;
+}
+
+.videocontainer>span.indicator {
+
     position: absolute;
     top: 0px;
-    right: 0;
-    margin: 7px;
+    left: 0px;
+    @include circle(23px);
+    box-sizing: border-box;
     z-index: 3;
-    width: 18px;
-    height: 13px;
-    color: #FFF;
-    font-size: 8pt;
+    text-align: center;
+    background: $dominantSpeakerBg;
+    margin: 7px;
+    display: inline-block;
+
+    color: $thumbnailPictogramColor;
+    font-size: 11pt;
+    border: 2px solid $thumbnailPictogramColor;
 }
 
-/**
- * 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;
+.videocontainer>#raisehandindicator {
+    background: $raiseHandBg;
+}
 
-    .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;
-    }
+#indicatoricon {
+    font-size: 12px;
+    padding-top: 3px;
 }
 
 #reloadPresentation {
@@ -360,43 +391,37 @@
     width: 300px;
     height: 300px;
     margin: auto;
+    overflow: hidden;
     position: relative;
 }
 
+#dominantSpeakerAudioLevel {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    z-index: 2;
+    visibility: inherit;
+}
+
 #mixedstream {
     display:none !important;
 }
 
-#dominantSpeakerAvatar,
-.dynamic-shadow {
+#dominantSpeakerAvatar {
     width: 200px;
     height: 200px;
-}
-
-#dominantSpeakerAvatar {
     top: 50px;
     margin: auto;
     position: relative;
     border-radius: 100px;
+    z-index: 3;
     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;
+    @include circle(60px);
+    @include absoluteAligning(60px, 60px);
 }
 
 .sharedVideoAvatar {
@@ -434,50 +459,17 @@
     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 {
+#videoConnectionMessage {
     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;
+    z-index: 1011;
     font-weight: 600;
     font-size: 14px;
     text-align: center;
@@ -489,43 +481,46 @@
                     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 {
+#videoResolutionLabel {
     display: none;
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    background: rgba(0,0,0,.5);
+    padding: 10px;
+    color: rgba(255,255,255,.5);
     z-index: 1011;
 }
 
 .centeredVideoLabel {
+    display: none;
+    position: absolute;
     bottom: 45%;
+    top: auto;
+    right: auto;
+    left: auto;
+    line-height: 28px;
+    height: 28px;
+    width: auto;
+    padding: 5px;
+    margin-right: auto;
+    margin-left: auto;
+    background: rgba(0,0,0,.5);
+    color: #FFF;
+    z-index: 1011;
     border-radius: 2px;
     -webkit-transition: all 2s 2s linear;
     transition: all 2s 2s linear;
-
-    &.moveToCorner {
-        bottom: auto;
-    }
 }
 
 .moveToCorner {
-    position: absolute;
-    top: 30px;
-    right: 30px;
+    top: 5px;
+    right: 50px; /*leave free space for the HD label*/
+    margin-right: 0px;
+    margin-left: auto;
+    background: rgba(0,0,0,.3);
+    color: rgba(255,255,255,.5);
 }
 
-.moveToCorner + .moveToCorner {
-    right: 80px;
-}
+.hidden {
+}

css/_welcome_page.scss

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

css/aui-components/dropdown.scss

@@ -1,68 +0,0 @@
-.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/chat/_chat.scss

@@ -0,0 +1,12 @@
+.chat {
+    &__nickname {
+        position: absolute;
+        top: 100px;
+        left: 5px;
+        right: 5px;
+    }
+
+    &__input {
+        
+    }
+}

css/chat/_main.scss

@@ -0,0 +1,222 @@
+@import 'chat';
+
+#chatspace {
+    * {
+        -webkit-user-select: text;
+        user-select: text;
+    }
+
+    display: none;
+    background-color: black;
+    border-left: 1px solid #424242;
+
+    &.is-conversation-mode {
+        #chatconversation {
+            visibility: visible;
+        }
+
+        #usermsg {
+            visibility: visible;
+        }
+
+        #nickname {
+            visibility: hidden;
+        }
+
+        #smileysarea {
+            visibility: visible;
+        }
+    }
+
+    .username {
+        float: left;
+        padding-left: 5px;
+        font-weight: bold;
+    }
+
+    .timestamp {
+        float: right;
+        padding-right: 5px;
+        font-size: 11px;
+    }
+
+    .usermessage {
+        padding-top: 20px;
+        padding-left: 5px;
+    }
+}
+
+#chatconversation {
+    visibility: hidden;
+    position: relative;
+    top: 5px;
+    padding: 5px;
+    text-align: left;
+    line-height: 20px;
+    font-size: 10pt;
+    width: 100%;
+    height: 90%;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    word-wrap: break-word;
+}
+
+.localuser {
+    color: #087dba;
+}
+
+.errorMessage {
+    color: red;
+}
+
+.remoteuser {
+    color: white;
+}
+
+#usermsg {
+    visibility:hidden;
+    position: absolute;
+    bottom: 0px;
+    right: 0px;
+    width: 83%;
+    height: 30px;
+    padding: 5px 5px 5px 0px;
+    max-height:150px;
+    min-height:35px;
+    border: 0px none;
+    background: #3a3a3a;
+    color: #a7a7a7;
+    box-shadow: none;
+    border-radius:0;
+    font-size: 10pt;
+    line-height: 30px;
+    overflow: hidden;
+    resize: none;
+
+    &:hover {
+        border: 0px none;
+        box-shadow: none;
+    }
+
+    &::-webkit-scrollbar-track-piece {
+        background: #3a3a3a;
+    }
+
+    &::-webkit-input-placeholder {
+        line-height: 30px;
+    }
+}
+
+#unreadMessages {
+    font-size: 8px;
+    position: absolute;
+}
+
+#bottomUnreadMessages {
+    top: 5px;
+    left: 10px;
+    position: absolute;
+    font-size: 8px;
+}
+
+.chatArrow {
+    position: absolute;
+    height: 15px;
+    left: 5px;
+}
+
+.chatmessage {
+    background: #3a3a3a;
+    width: 93%;
+    margin-left: 5%;
+    margin-right: auto;
+    border-radius: 5px;
+    border-top-left-radius: 0px;
+    margin-top: 3px;
+    left: 5px;
+    color: #a7a7a7;
+    overflow: hidden;
+    padding-bottom: 3px;
+}
+
+.smiley {
+    height: 26px;
+}
+
+#smileys {
+    position: absolute;
+    bottom: 7px;
+    right: 5px;
+    background: white;
+    border-radius: 50px;
+    height: 26px;
+    margin: auto;
+    cursor: pointer;
+
+    img {
+        width: 22px;
+        padding: 2px;
+    }
+}
+
+#smileysarea {
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    width: 17%;
+    min-width: 31px;
+    height: 40px;
+    padding: 0px;
+    max-height: 150px;
+    min-height: 35px;
+    border: 0px none;
+    background: #3a3a3a;
+    overflow: hidden;
+    visibility: hidden;
+}
+
+#smileysContainer {
+    display: none;
+    position: absolute;
+    background: #3a3a3a;
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    width: 100%;
+    bottom: 10%;
+
+    .smiley {
+        padding: 7px;
+    }
+}
+
+.smileyContainer {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+
+    &:hover {
+        background: #3e3e3e;
+    }
+}
+
+::-webkit-scrollbar {
+    background: #06a5df;
+    width: 7px;
+}
+
+::-webkit-scrollbar-button {
+    display: none;
+}
+
+::-webkit-scrollbar-track {
+    background: black;
+}
+
+::-webkit-scrollbar-track-piece {
+    background: black;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #06a5df;
+    border-radius: 4px;
+}

css/components/_button-control.scss

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

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

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

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

css/main.scss

@@ -1,26 +1,14 @@
-/* Functions BEGIN */
-
-@import 'functions';
-
-/* Functions END */
-
 /* Variables BEGIN */
 
 @import 'variables';
 
-/* Variables END */
-
 /* Mixins BEGIN */
 
 @import "mixins";
 
 /* Mixins END */
 
-/* Animations BEGIN */
-
-@import "animations";
-
-/* Animations END */
+/* Variables END */
 
 /* Fonts BEGIN */
 
@@ -33,13 +21,10 @@
 
 @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 'jquery-impromptu';
+@import 'modaldialog';
 @import 'notice';
 @import 'popup_menu';
 @import 'recording';
@@ -53,21 +38,8 @@
 @import 'toolbars';
 @import 'side_toolbar_container';
 @import 'device_settings_dialog';
+@import 'feedback';
 @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 */
+/* Modules END */

css/modals/_dialog.scss

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

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

@@ -1,7 +0,0 @@
-/*
- * 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/nickname/_nickname.scss

@@ -0,0 +1,15 @@
+.nickname {
+    text-align: center;
+    color: #9d9d9d;
+    font-size: 18px;
+    width: 95%;
+
+    &__input {
+       margin-top: 20px;
+       font-size: 14px;
+       background: #3a3a3a;
+       box-shadow: inset 0 0 3px 2px #a7a7a7;
+       border: 1px solid #a7a7a7;
+       color: #a7a7a7;
+    }
+}

css/overlay/_overlay.scss

@@ -1,36 +1,48 @@
 .overlay {
-    &__container,
-    &__container-light {
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        position: fixed;
-        z-index: $overlayZ;
-        background: $defaultBackground;
-    }
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: $overlayZ;
+    background: #21B9FC; /* Old browsers */
+    opacity: 0.75;
+    display: block;
+}
 
-    &__container-light {
-        @include transparentBg($defaultBackground, 0.7);
-    }
+.overlay_transparent {
+    background: rgba(22, 185, 252, .9);
+}
 
-    &__content {
-        position: absolute;
-        margin: 0 auto;
-        height: 100%;
-        width: 56%;
-        left: 50%;
-        @include transform(translateX(-50%));
+.overlay_container {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    z-index: $overlayZ;
+}
 
-        &_bottom {
-            position: absolute;
-            bottom: 0;
-        }
-    }
+.overlay_content {
+    color: #fff;
+    font-weight: normal;
+    font-size: 20px;
+    text-align: center;
+    width: 400px;
+    height: 250px;
+    top: 50%;
+    left: 50%;
+    position:absolute;
+    margin-top: -125px;
+    margin-left: -200px;
+}
 
-    &__policy {
-        position: absolute;
-        bottom: 24px;
-        width: 100%;
-    }
-}
+
+.overlay_text_small {
+    font-size: 18px;
+}
+
+.overlay_icon {
+    position: relative;
+    z-index: 1013;
+    float: none;
+    font-size: 100px;
+}

css/reload_overlay/_reload_overlay.scss

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

@@ -5,15 +5,10 @@
     width: 100%;
     height: 100%;
     position: fixed;
-    z-index: $ringingZ;
+    z-index: $overlayZ;
     background: linear-gradient(transparent, #000);
     opacity: 0.8;
 
-    &.solidBG {
-        background: $defaultBackground;
-        opacity: 1;
-    }
-
     &__content {
         position: absolute;
         width: 400px;
@@ -38,4 +33,4 @@
             color: #333;
         }
     }
-}
+}

css/shortcuts/_main.scss

@@ -1,4 +0,0 @@
-/* Import shortcuts blocks */
-
-@import 'regular-key';
-@import 'shortcuts-list';

css/shortcuts/_regular-key.scss

@@ -1,11 +0,0 @@
-.regular-key {
-    display: table-cell;
-    width: 25px;
-    height: 20px;
-    padding: 0;
-    text-align: center;
-    vertical-align: middle;
-    font-family: $baseFontFamily;
-    color: $defaultDarkColor;
-    font-size: 12px;
-}

css/shortcuts/_shortcuts-list.scss

@@ -1,12 +0,0 @@
-.shortcuts-list {
-    padding: 0;
-
-    &__description {
-        margin-left: em(16, 14);
-        vertical-align: top;
-    }
-
-    &__item {
-        margin-bottom: em(7, 14);
-    }
-}

css/themes/_light.scss

@@ -1,95 +0,0 @@
-/**
- * Base
- */
-$baseLight: #FFFFFF;
-
-/**
-* Controls
-*/
-$controlBackground: $baseLight;
-$controlColor: #333333;
-
-/**
-* Buttons
-*/
-$buttonBackground: #f5f5f5;
-$buttonHoverBackground: #e9e9e9;
-$buttonBorder: #ccc;
-$buttonHoverBorder: #999;
-$buttonColor: #333;
-
-$buttonLightBackground: #f5f5f5;
-$buttonLightHoverBackground: #e9e9e9;
-$buttonLightBorder: #ccc;
-$buttonLightHoverBorder: #999;
-
-$buttonLinkBackground: transparent;
-$buttonLinkColor: #0090e8;
-
-$primaryButtonBackground: #3572b0;
-$primaryButtonHoverBackground: #2a67a5;
-$primaryButtonColor: $baseLight;
-$primaryButtonFontWeight: 400;
-
-$buttonShadowColor: #192d4f;
-
-/**
-* Color variables
-**/
-$defaultBackground: #474747;
-
-/**
-* Connection indicator
-**/
-$downloadConnectionIconColor: #4abd04;
-$uploadConnectionIconColor: #ffa800;
-
-/**
- * Dialog colors
- **/
-$auiDialogColor: #333;
-$auiDialogBg: #f5f5f5;
-$auiDialogContentBg: $baseLight;
-$auiBorderColor: #ccc;
-$dialogTitleFontWeight: 400;
-
-/**
-* Inlay colors
-**/
-$inlayColorBg: lighten($defaultBackground, 20%);
-$inlayBorderColor: lighten($auiDialogContentBg, 10%);
-
-// Main controls
-$inputBackground: $controlBackground;
-$inputBorderColor: #ccc;
-$inputColor: $controlColor;
-$placeHolderColor: #a7a7a7;
-$readOnlyInputColor: #a7a7a7;
-$defaultDarkSelectionColor: #ccc;
-$buttonFontWeight: 400;
-$labelFontWeight: 400;
-$hintFontSize: em(13, 14);
-$linkFontColor: #3572b0;
-$linkHoverFontColor: darken(#3572b0, 10%);
-$dropdownColor: #333;
-$errorColor: #c61600;
-
-// Feedback colors
-$feedbackCancelFontColor: #333;
-
-// Popover colors
-$popoverBg: #000;
-$popoverFontColor: #ffffff;
-$popupMenuSelectedItemBackground: rgba(256, 256, 256, .2);
-
-// Toolbar
-$splitterColor: #ccc;
-
-/**
- * Forms
- */
-//dropdown
-$selectFontColor: $controlColor;
-$selectBg: $controlBackground;
-$selectActiveBg: darken($controlBackground, 5%);
-$selectActiveItemBg: darken($controlBackground, 20%);

css/unsupported-browser/_unsupported-desktop-browser.scss

@@ -1,132 +0,0 @@
-.supported-browser {
-    color: #929391;
-    display: inline-block;
-    font-size: 20px;
-    margin: 1em 7px;
-    vertical-align: middle;
-    width: 138px;
-
-    &__button {
-        background-color: #62c82a;
-        border: 1px solid #3c8117;
-        border-radius: 10px;
-        color: #FFFFFF;
-        font-size: 12px;
-        height: 26px;
-        margin: 15px auto 0px auto;
-        padding-top: 13px;
-        text-align: center;
-        width: 115px;
-    }
-
-    &__link {
-        color: #087dba;
-        text-decoration: none;
-
-        &:hover {
-            text-decoration: none;
-        }
-
-        &:active {
-            text-decoration: none;
-        }
-
-        &:focus {
-            text-decoration: none;
-        }
-    }
-
-    &-list
-    {
-        margin: 0 auto;
-    }
-
-    &__logo {
-        margin: 20px auto 0px auto;
-
-        &_chrome {
-            background-image: url('../../images/chrome.png');
-            height: 78px;
-            width: 78px;
-        }
-
-        &_chromium {
-            background-image: url('../../images/chromium.png');
-            height: 78px;
-            width: 77px;
-        }
-
-        &_firefox {
-            background-image: url('../../images/firefox.png');
-            height: 80px;
-            width: 86px;
-        }
-
-        &_opera {
-            background-image: url('../../images/opera.png');
-            height: 78px;
-            width: 73px;
-        }
-
-        &_ie {
-            background-image: url('../../images/ie.png');
-            height: 78px;
-            width: 80px;
-        }
-
-        &_safari {
-            background-image: url('../../images/safari.png');
-            height: 79px;
-            width: 78px;
-        }
-    }
-
-    &__text
-    {
-        line-height: 1.2em;
-
-        &_small {
-            font-size: small;
-        }
-    }
-
-    &__tile {
-        background-color: #e8e8e8;
-        border: 1px solid #cfcfcf;
-        border-radius: 10px;
-        height: 163px;
-        margin-top: 5px;
-        width: 138px;
-    }
-}
-
-.unsupported-desktop-browser {
-    display: block;
-    height: 565px;
-    margin: auto;
-    overflow:hidden;
-    position: absolute;
-    text-align: center;
-    top: 0; left: 0; bottom: 0; right: 0;
-    width:500px;
-
-    &__page {
-        display:inline-block;
-        font-size: 28px;
-        padding-top: 25px;
-        vertical-align:middle;
-    }
-
-    &__title {
-        margin: 0 auto;
-        width: 20em;
-    }
-
-    &-wrapper {
-        background: #fff;
-        display: block;
-        height: 100%;
-        position: absolute;
-        width: 100%;
-    }
-}