feat(loadScript): Use the function from js-utils

Do not take legacy property into account if there's non-legacy value.

.flowconfig

@@ -18,6 +18,7 @@
 
 ; 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/@atlaskit/.*/*.js.flow
 .*/node_modules/@atlassian
 .*/node_modules/bower/lib/node_modules/bower-json/test/.*
 .*/node_modules/immutable/dist/immutable.js.flow

CONTRIBUTING.md

@@ -21,7 +21,7 @@ license agreement as either a [corporation](https://jitsi.org/ccla) or an
 in the agreement, unfortunately, we cannot accept your contribution.
 
 ## Creating Pull Requests
-- Make sure your code passes the linter rules beforehand. The linter is exeuted
+- Make sure your code passes the linter rules beforehand. The linter is executed
   automatically when committing code.
 - Perform **one** logical change per pull request.
 - Maintain a clean list of commits, squash them if necessary.

README.md

@@ -90,6 +90,19 @@ cd jitsi-meet
 npm unlink lib-jitsi-meet
 npm install
 ```
+## Running with webpack-dev-server for development   
+
+Use it at the CLI, type
+```
+node_modules/.bin/webpack-dev-server
+```
+
+By default the backend deployment used is `beta.meet.jit.si`, you can point the Jitsi-Meet app at a different backend by using a proxy server. To do this set the WEBPACK_DEV_SERVER_PROXY_TARGET variable, type 
+```
+WEBPACK_DEV_SERVER_PROXY_TARGET=https://your-example-server.com node_modules/.bin/webpack-dev-server
+```
+
+The app should be running at https://localhost:8080/
 
 ## Contributing
 

android/README.md

@@ -43,16 +43,6 @@ Add the Maven repository
 `https://github.com/jitsi/jitsi-maven-repository/raw/master/releases` and the
 dependency `org.jitsi.react:jitsi-meet-sdk:1.9.0` into your `build.gradle`.
 
-Add Java 1.8 compatibility support to your project by adding the following lines
-into your `build.gradle` file:
-
-```
-compileOptions {
-    sourceCompatibility JavaVersion.VERSION_1_8
-    targetCompatibility JavaVersion.VERSION_1_8
-}
-```
-
 ## API
 
 Jitsi Meet SDK is an Android library which embodies the whole Jitsi Meet
@@ -412,6 +402,7 @@ rules file:
 # WebRTC
 
 -keep class org.webrtc.** { *; }
+-dontwarn org.chromium.build.BuildHooksAndroid
 
 # Jisti Meet SDK
 

android/app/build.gradle

@@ -31,10 +31,6 @@ android {
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
         }
     }
-    compileOptions {
-        sourceCompatibility JavaVersion.VERSION_1_8
-        targetCompatibility JavaVersion.VERSION_1_8
-    }
 }
 
 dependencies {

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

@@ -23,6 +23,8 @@ import org.jitsi.meet.sdk.JitsiMeetActivity;
 import org.jitsi.meet.sdk.JitsiMeetView;
 import org.jitsi.meet.sdk.JitsiMeetViewListener;
 
+import com.calendarevents.CalendarEventsPackage;
+
 import java.util.Map;
 
 /**
@@ -103,4 +105,10 @@ public class MainActivity extends JitsiMeetActivity {
 
         super.onCreate(savedInstanceState);
     }
+
+    @Override
+  public void onRequestPermissionsResult(int requestCode, String[] permissions, int[] grantResults) {
+      CalendarEventsPackage.onRequestPermissionsResult(requestCode, permissions, grantResults);
+      super.onRequestPermissionsResult(requestCode, permissions, grantResults);
+  }
 }

android/sdk/build.gradle

@@ -29,8 +29,10 @@ dependencies {
     compile project(':react-native-immersive')
     compile project(':react-native-keep-awake')
     compile project(':react-native-locale-detector')
+    compile project(':react-native-sound')
     compile project(':react-native-vector-icons')
     compile project(':react-native-webrtc')
+    compile project(':react-native-calendar-events')
 }
 
 // Build process helpers

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

@@ -25,6 +25,7 @@ import android.os.Build;
 import android.os.Bundle;
 import android.support.annotation.NonNull;
 import android.support.annotation.Nullable;
+import android.util.Log;
 import android.widget.FrameLayout;
 
 import com.facebook.react.ReactInstanceManager;
@@ -53,6 +54,12 @@ public class JitsiMeetView extends FrameLayout {
      */
     private static final int BACKGROUND_COLOR = 0xFF111111;
 
+    /**
+     * The {@link Log} tag which identifies the source of the log messages of
+     * {@code JitsiMeetView}.
+     */
+    private final static String TAG = JitsiMeetView.class.getSimpleName();
+
     /**
      * React Native bridge. The instance manager allows embedding applications
      * to create multiple root views off the same JavaScript bundle.
@@ -107,6 +114,7 @@ public class JitsiMeetView extends FrameLayout {
                 .setApplication(application)
                 .setBundleAssetName("index.android.bundle")
                 .setJSMainModulePath("index.android")
+                .addPackage(new com.calendarevents.CalendarEventsPackage())
                 .addPackage(new com.corbt.keepawake.KCKeepAwakePackage())
                 .addPackage(new com.facebook.react.shell.MainReactPackage())
                 .addPackage(new com.i18n.reactnativei18n.ReactNativeI18n())
@@ -115,6 +123,7 @@ public class JitsiMeetView extends FrameLayout {
                 .addPackage(new com.oney.WebRTCModule.WebRTCModulePackage())
                 .addPackage(new com.RNFetchBlob.RNFetchBlobPackage())
                 .addPackage(new com.rnimmersive.RNImmersivePackage())
+                .addPackage(new com.zmxv.RNSound.RNSoundPackage())
                 .addPackage(new ReactPackageAdapter() {
                     @Override
                     public List<NativeModule> createNativeModules(
@@ -266,13 +275,15 @@ public class JitsiMeetView extends FrameLayout {
      * @param params {@code WritableMap} optional ancillary data for the event.
      */
     private static void sendEvent(
-            String eventName, @Nullable WritableMap params) {
+            String eventName,
+            @Nullable WritableMap params) {
         if (reactInstanceManager != null) {
             ReactContext reactContext
                 = reactInstanceManager.getCurrentReactContext();
             if (reactContext != null) {
                 reactContext
-                    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
+                    .getJSModule(
+                        DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                     .emit(eventName, params);
             }
         }
@@ -498,10 +509,29 @@ public class JitsiMeetView extends FrameLayout {
         super.onWindowFocusChanged(hasFocus);
 
         // https://github.com/mockingbot/react-native-immersive#restore-immersive-state
+
+        // FIXME The singleton pattern employed by RNImmersiveModule is not
+        // advisable because a react-native mobule is consumable only after its
+        // BaseJavaModule#initialize() has completed and here we have no
+        // knowledge of whether the precondition is really met.
         RNImmersiveModule immersive = RNImmersiveModule.getInstance();
 
         if (hasFocus && immersive != null) {
-            immersive.emitImmersiveStateChangeEvent();
+            try {
+                immersive.emitImmersiveStateChangeEvent();
+            } catch (RuntimeException re) {
+                // FIXME I don't know how to check myself whether
+                // BaseJavaModule#initialize() has been invoked and thus
+                // RNImmersiveModule is consumable. A safe workaround is to
+                // swallow the failure because the whole full-screen/immersive
+                // functionality is brittle anyway, akin to the icing on the
+                // cake, and has been working without onWindowFocusChanged for a
+                // very long time.
+                Log.e(
+                    TAG,
+                    "RNImmersiveModule#emitImmersiveStateChangeEvent() failed!",
+                    re);
+            }
         }
     }
 

android/settings.gradle

@@ -11,7 +11,11 @@ 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-locale-detector'
 project(':react-native-locale-detector').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-locale-detector/android')
+include ':react-native-sound'
+project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/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')
+include ':react-native-calendar-events'
+project(':react-native-calendar-events').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-calendar-events/android')

conference.js

@@ -1709,12 +1709,6 @@ export default {
                 }
             );
 
-            return;
-        } else if (error.name === JitsiTrackErrors.FIREFOX_EXTENSION_NEEDED) {
-            APP.UI.showExtensionRequiredDialog(
-                config.desktopSharingFirefoxExtensionURL
-            );
-
             return;
         }
 
@@ -1727,8 +1721,23 @@ export default {
         let titleKey;
 
         if (error.name === JitsiTrackErrors.PERMISSION_DENIED) {
-            descriptionKey = 'dialog.screenSharingPermissionDeniedError';
-            titleKey = 'dialog.screenSharingFailedToInstallTitle';
+
+            // in FF the only option for user is to deny access temporary or
+            // permanently and we only receive permission_denied
+            // we always show some info cause in case of permanently, no info
+            // shown will be bad experience
+            //
+            // TODO: detect interval between requesting permissions and received
+            // error, this way we can detect user interaction which will have
+            // longer delay
+            if (JitsiMeetJS.util.browser.isFirefox()) {
+                descriptionKey
+                    = 'dialog.screenSharingFirefoxPermissionDeniedError';
+                titleKey = 'dialog.screenSharingFirefoxPermissionDeniedTitle';
+            } else {
+                descriptionKey = 'dialog.screenSharingPermissionDeniedError';
+                titleKey = 'dialog.screenSharingFailedToInstallTitle';
+            }
         } else {
             descriptionKey = 'dialog.screenSharingFailedToInstall';
             titleKey = 'dialog.screenSharingFailedToInstallTitle';

config.js

@@ -150,23 +150,9 @@ var config = {
     // Required version of Chrome extension
     desktopSharingChromeMinExtVersion: '0.1',
 
-    // The ID of the jidesha extension for Firefox. If null, we assume that no
-    // extension is required.
-    desktopSharingFirefoxExtId: null,
-
     // Whether desktop sharing should be disabled on Firefox.
     desktopSharingFirefoxDisabled: false,
 
-    // The maximum version of Firefox which requires a jidesha extension.
-    // Example: if set to 41, we will require the extension for Firefox versions
-    // up to and including 41. On Firefox 42 and higher, we will run without the
-    // extension.
-    // If set to -1, an extension will be required for all versions of Firefox.
-    desktopSharingFirefoxMaxVersionExtRequired: 51,
-
-    // The URL to the Firefox extension for desktop sharing.
-    desktopSharingFirefoxExtensionURL: null,
-
     // Optional desktop sharing frame rate options. Default value: min:5, max:5.
     // desktopSharingFrameRate: {
     //     min: 5,
@@ -333,7 +319,6 @@ var config = {
         // userRegion: "asia"
     }
 
-
     // List of undocumented settings used in jitsi-meet
     /**
      alwaysVisibleToolbar
@@ -353,6 +338,7 @@ var config = {
      etherpad_base
      externalConnectUrl
      firefox_fake_device
+     googleApiApplicationClientID
      iAmRecorder
      iAmSipGateway
      peopleSearchQueryTypes

css/_aui_reset.scss

@@ -135,7 +135,6 @@ h3 {
   margin: 30px 0 0 0;
 }
 h4 {
-  color: #333;
   font-size: 16px;
   font-weight: bold;
   line-height: 1.25;

css/_dial-out.scss

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

css/_filmstrip.scss

@@ -64,7 +64,7 @@
          * The local video identifier.
          */
         &#filmstripLocalVideo {
-            bottom: 32px;
+            align-self: flex-end;
             display: block;
 
             /**

css/_flag-icon.scss

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

css/_font.scss

@@ -36,9 +36,15 @@
 .icon-navigate_before:before {
   content: "\e408";
 }
+.icon-navigate_next:before {
+  content: "\e409";
+}
 .icon-public:before {
     content: "\e80b";
 }
+.icon-restore:before {
+  content: "\e8b3";
+}
 .icon-timer:before {
     content: "\e425";
 }

css/_recording.scss

@@ -1,3 +1,81 @@
 .recordingSpinner {
     vertical-align: top;
 }
+
+.live-stream-dialog {
+    /**
+     * Set font-size to be consistent with Atlaskit FieldText.
+     */
+    font-size: 14px;
+
+    .broadcast-dropdown,
+    .broadcast-dropdown-trigger {
+        text-align: left;
+    }
+
+    .form-footer {
+        text-align: right;
+    }
+
+    .live-stream-cta {
+        a {
+            cursor: pointer;
+        }
+    }
+
+    .google-api {
+        margin-top: 10px;
+        min-height: 36px;
+        text-align: center;
+        width: 100%;
+    }
+
+    /**
+     * The Google sign in button must follow Google's design guidelines.
+     * See: https://developers.google.com/identity/branding-guidelines
+     */
+    .google-sign-in {
+        background-color: #4285f4;
+        border-radius: 2px;
+        cursor: pointer;
+        display: inline-flex;
+        font-family: Roboto, arial, sans-serif;
+        font-size: 14px;
+        padding: 1px;
+
+        .google-cta {
+            color: white;
+            display: inline-block;
+            /**
+             * Hack the line height for vertical centering of text.
+             */
+            line-height: 32px;
+            margin: 0 15px;
+        }
+
+        .google-logo {
+            background-color: white;
+            border-radius: 2px;
+            display: inline-block;
+            padding: 8px;
+            height: 18px;
+            width: 18px;
+        }
+    }
+
+    .google-panel {
+        align-items: center;
+        border-bottom: 2px solid rgba(0, 0, 0, 0.3);
+        display: flex;
+        flex-direction: column;
+        padding-bottom: 10px;
+    }
+
+    .stream-key-form {
+        .helper-link {
+            display: inline-block;
+            cursor: pointer;
+            margin-top: 5px;
+        }
+    }
+}

css/_vertical_filmstrip_overrides.scss

@@ -72,6 +72,7 @@
          * vertical filmstrip layout.
          */
         #filmstripLocalVideo {
+            align-self: initial;
             bottom: 5px;
             display: flex;
             flex-direction: column-reverse;

css/main.scss

@@ -28,11 +28,8 @@
 @import 'font-awesome';
 /* Fonts END */
 
-@import 'flag-icon';
-
 /* Modules BEGIN */
 
-@import 'dial-out';
 @import 'aui_reset';
 @import 'base';
 @import 'utils';

css/modals/_dialog.scss

@@ -101,7 +101,7 @@
             }
 
             &-content {
-                background-color: $auiDialogContentBg;
+                background-color: $auiDialogBg;
                 box-sizing: border-box;
                 color: $auiDialogColor;
                 font-size: em(14, 12);
@@ -126,6 +126,11 @@
         }
     }
 
+    .input-control {
+        background-color: $auiDialogContentBg;
+        color: $auiDialogColor;
+    }
+
     .form-control:not(:last-child) {
         border-bottom: 1px solid $auiBorderColor;
     }
@@ -138,7 +143,6 @@
 }
 
 .modal-dialog-form {
-    color: $modalTextColor;
     margin-top: 5px !important;
 
     .input-control {
@@ -150,6 +154,14 @@
     &-error {
         margin-bottom: 8px;
     }
+
+    /**
+     * Override Atlaskit dropdown styling when in a modal because the dropdown
+     * backgrounds clash with the modal backgrounds.
+     */
+    .htclLc[data-role=droplistContent] {
+        border: 1px solid #455166;
+    }
 }
 .modal-dialog-footer {
     font-size: $modalButtonFontSize;

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

@@ -36,13 +36,12 @@
 }
 
 .desktop-picker-source {
-    color: $defaultDarkFontColor;
     margin-top: 10px;
     text-align: center;
 
     &.is-selected {
         .desktop-source-preview-image-container {
-            background: rgba(0, 0, 0, 0.1);
+            background: rgba(255,255,255,0.3);
             border-radius: $borderRadius;
         }
     }

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

@@ -1,6 +1,4 @@
 .device-selection {
-    color: $feedbackInputTextColor;
-
     .device-selectors {
         font-size: 14px;
 
@@ -22,19 +20,15 @@
 
         /* device-selector-trigger stylings attempt to mimic AtlasKit button */
         .device-selector-trigger {
-            background-color: rgba(9, 30, 66, 0.04);
-            border-radius: 3px;
-            color: #505f79;
+            background-color: #0E1624;
+            border: 1px solid #455166;
+            border-radius: 5px;
             display: flex;
             height: 2.3em;
             justify-content: space-between;
             line-height: 2.3em;
             overflow: hidden;
             padding: 0 8px;
-
-            &:hover {
-                background-color: rgba(9,30,66,.08);
-            }
         }
         .device-selector-trigger-disabled {
             .device-selector-trigger {
@@ -108,19 +102,21 @@
     .audio-output-preview {
         font-size: 14px;
         margin-top: 10px;
+
         a {
+            color: 4C9AFF;
             cursor: pointer;
             text-decoration: none;
         }
     }
 
     .audio-input-preview {
-        background: #f4f5f7;
+        background: #7b7b7b;
         border-radius: 5px;
         height: 6px;
 
         .audio-input-preview-level {
-            background: #0052cc;
+            background: #4C9AFF;
             border-radius: 5px;
             height: 100%;
             -webkit-transition: width .1s ease-in-out;

css/modals/invite/_add-people.scss

@@ -11,17 +11,11 @@
                 padding-left: 5px;
             }
         }
-    }
-}
 
-/**
- * Styles the loading element in the MultiSelectAutocomplete.
- */
-.autocomplete-loading {
-    justify-content: center;
-    display: flex;
-    min-width: 260px;
-    padding: 20px;
+        .add-telephone-icon {
+            transform: scaleX(-1);
+        }
+    }
 }
 
 /**

css/modals/speaker_stats/_speaker_stats.scss

@@ -42,10 +42,6 @@
         width: 55%;
     }
 
-    .speaker-stats-item:nth-child(even) {
-        background: whitesmoke;
-    }
-
     .speaker-stats-item__name,
     .speaker-stats-item__time {
         overflow: hidden;

css/themes/_light.scss

@@ -14,11 +14,11 @@ $sliderThumbBackground: #3572b0;
 /**
 * Buttons
 */
-$buttonBackground: #f5f5f5;
-$buttonHoverBackground: #e9e9e9;
-$buttonBorder: #ccc;
-$buttonHoverBorder: #999;
-$buttonColor: #333;
+$buttonBackground: #44A5FF;
+$buttonHoverBackground: #2c4062;
+$buttonBorder: transparent;
+$buttonHoverBorder: transparent;
+$buttonColor: #eceef1;
 
 $buttonLightBackground: #f5f5f5;
 $buttonLightHoverBackground: #e9e9e9;
@@ -47,10 +47,10 @@ $reloadProgressBarBg: #0074E0;
 /**
  * Dialog colors
  **/
-$auiDialogColor: #333;
-$auiDialogBg: #f5f5f5;
-$auiDialogContentBg: $baseLight;
-$auiBorderColor: #ccc;
+$auiDialogColor: #eceef1;
+$auiDialogBg: #253858;
+$auiDialogContentBg: #344563;
+$auiBorderColor: #253858;
 $dialogTitleFontWeight: 400;
 $dialogErrorText: #344563;
 
@@ -58,7 +58,7 @@ $dialogErrorText: #344563;
 * Inlay colors
 **/
 $inlayColorBg: lighten($defaultBackground, 20%);
-$inlayBorderColor: lighten($auiDialogContentBg, 10%);
+$inlayBorderColor: lighten($baseLight, 10%);
 $inlayIconBg: #000;
 $inlayIconColor: #fff;
 $inlayFilmstripOnlyColor: #474747;

css/unsupported-browser/_no-mobile-app.scss

@@ -5,7 +5,7 @@
     width: auto;
 
     &__title {
-        border-bottom: 1px solid $auiBorderColor;
+        border-bottom: 1px solid $inlayBorderColor;
         color: $unsupportedBrowserTitleColor;
         font-weight: 400;
         letter-spacing: 0.5px;

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

@@ -2,7 +2,6 @@
     background-color: #fff;
     height: 100vh;
     overflow: auto;
-    padding: 35px 0;
     position: relative;
     width: 100vw;
 
@@ -14,7 +13,7 @@
         color: $unsupportedBrowserTextColor;
         margin: auto;
         max-width: 40em;
-        padding-bottom: 40px;
+        padding: 35px 0 40px 0;
         text-align: center;
         width: 75%;
 

debian/jitsi-meet-prosody.postinst

@@ -125,8 +125,11 @@ case "$1" in
             # echo for using all default values
             echo | prosodyctl cert generate $JICOFO_AUTH_DOMAIN
 
-            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.key /etc/prosody/certs/$JICOFO_AUTH_DOMAIN.key
-            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt /etc/prosody/certs/$JICOFO_AUTH_DOMAIN.crt
+            AUTH_KEY_FILE="/etc/prosody/certs/$JICOFO_AUTH_DOMAIN.key"
+            AUTH_CRT_FILE="/etc/prosody/certs/$JICOFO_AUTH_DOMAIN.crt"
+
+            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.key $AUTH_KEY_FILE
+            ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt $AUTH_CRT_FILE
             ln -sf /var/lib/prosody/$JICOFO_AUTH_DOMAIN.crt /usr/local/share/ca-certificates/$JICOFO_AUTH_DOMAIN.crt
 
             update-ca-certificates

fonts/jitsi.svg

@@ -12,6 +12,7 @@
 <glyph unicode="&#xe1aa;" glyph-name="bluetooth" d="M550 328l-80 82v-162zM470 776v-162l80 82zM670 696l-184-184 184-184-244-242h-42v324l-196-196-60 60 238 238-238 238 60 60 196-196v324h42zM834 738c40-64 62-142 62-222 0-84-24-160-66-226l-50 50c26 52 42 110 42 172s-16 120-42 172zM608 512l98 98c12-30 20-64 20-98s-8-70-20-100z" />
 <glyph unicode="&#xe310;" glyph-name="headset" d="M512 982c212 0 384-172 384-384v-300c0-70-58-128-128-128h-128v342h170v86c0 166-132 298-298 298s-298-132-298-298v-86h170v-342h-128c-70 0-128 58-128 128v300c0 212 172 384 384 384z" />
 <glyph unicode="&#xe408;" glyph-name="navigate_before" d="M658 708l-196-196 196-196-60-60-256 256 256 256z" />
+<glyph unicode="&#xe409;" glyph-name="navigate_next" d="M426 768l256-256-256-256-60 60 196 196-196 196z" />
 <glyph unicode="&#xe425;" glyph-name="timer" d="M512 170c166 0 298 134 298 300s-132 298-298 298-298-132-298-298 132-300 298-300zM812 708c52-66 84-148 84-238 0-212-172-384-384-384s-384 172-384 384 172 384 384 384c90 0 174-34 240-86l60 62c22-18 42-38 60-60zM470 426v256h84v-256h-84zM640 982v-86h-256v86h256z" />
 <glyph unicode="&#xe5c4;" glyph-name="arrow_back" d="M854 554v-84h-520l238-240-60-60-342 342 342 342 60-60-238-240h520z" />
 <glyph unicode="&#xe5d2;" glyph-name="menu" d="M128 768h768v-86h-768v86zM128 470v84h768v-84h-768zM128 256v86h768v-86h-768z" />
@@ -22,6 +23,7 @@
 <glyph unicode="&#xe616;" glyph-name="event_note" d="M598 426v-84h-300v84h300zM810 214v468h-596v-468h596zM810 896c46 0 86-40 86-86v-596c0-46-40-86-86-86h-596c-48 0-86 40-86 86v596c0 46 38 86 86 86h42v86h86v-86h340v86h86v-86h42zM726 598v-86h-428v86h428z" />
 <glyph unicode="&#xe61d;" glyph-name="phone-talk" d="M640 512c0 70-58 128-128 128v86c118 0 214-96 214-214h-86zM810 512c0 166-132 298-298 298v86c212 0 384-172 384-384h-86zM854 362c24 0 42-18 42-42v-150c0-24-18-42-42-42-400 0-726 326-726 726 0 24 18 42 42 42h150c24 0 42-18 42-42 0-54 8-104 24-152 4-14 2-32-10-44l-94-94c62-122 162-220 282-282l94 94c12 12 30 14 44 10 48-16 98-24 152-24z" />
 <glyph unicode="&#xe80b;" glyph-name="public" d="M764 282c56 60 90 142 90 230 0 142-88 266-214 316v-18c0-46-40-84-86-84h-84v-86c0-24-20-42-44-42h-84v-86h256c24 0 42-18 42-42v-128h42c38 0 70-26 82-60zM470 174v82c-46 0-86 40-86 86v42l-204 204c-6-24-10-50-10-76 0-174 132-318 300-338zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
+<glyph unicode="&#xe8b3;" glyph-name="restore" d="M512 682h64v-180l150-90-32-52-182 110v212zM554 896c212 0 384-172 384-384s-172-384-384-384c-106 0-200 42-270 112l60 62c54-54 128-88 210-88 166 0 300 132 300 298s-134 298-300 298-298-132-298-298h128l-172-172-4 6-166 166h128c0 212 172 384 384 384z" />
 <glyph unicode="&#xe901;" glyph-name="avatar" d="M512 204c106 0 200 56 256 138-2 84-172 132-256 132-86 0-254-48-256-132 56-82 150-138 256-138zM512 810c-70 0-128-58-128-128s58-128 128-128 128 58 128 128-58 128-128 128zM512 938c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 <glyph unicode="&#xe902;" glyph-name="download" d="M726 470h-128v170h-172v-170h-128l214-214zM826 596c110-8 198-100 198-212 0-118-96-214-214-214h-554c-142 0-256 114-256 256 0 132 100 240 228 254 54 102 160 174 284 174 156 0 284-110 314-258z" />
 <glyph unicode="&#xe903;" glyph-name="mic-camera-combined" d="M756.704 628.138l267.296 202.213v-635.075l-267.296 202.213v-191.923c0-12.085-11.296-21.863-25.216-21.863h-706.272c-13.92 0-25.216 9.777-25.216 21.863v612.25c0 12.085 11.296 21.863 25.216 21.863h706.272c13.92 0 25.216-9.777 25.216-21.863v-189.679zM371.338 376.228c47.817 0 86.529 40.232 86.529 89.811v184.835c0 49.651-38.713 89.883-86.529 89.883-47.788 0-86.515-40.232-86.515-89.883v-184.835c0-49.579 38.756-89.811 86.515-89.811v0zM356.754 314.070v-32.78h33.718v33.412c73.858 9.606 131.235 73.73 131.235 151.351v88.232h-30.636v-88.232c0-67.57-53.696-122.534-119.734-122.534-66.024 0-119.691 54.964-119.691 122.534v88.232h-30.636v-88.232c0-79.215 59.674-144.502 135.744-151.969v-0.014z" />

fonts/selection.json

@@ -1,6 +1,60 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "restore"
+        ],
+        "defaultCode": 59571,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "history, restore",
+        "id": 385,
+        "order": 930,
+        "prevSize": 24,
+        "code": 59571,
+        "name": "restore"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 385
+    },
+    {
+      "icon": {
+        "paths": [
+          "M426 256l256 256-256 256-60-60 196-196-196-196z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_next"
+        ],
+        "defaultCode": 58377,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_right, navigate_next",
+        "id": 153,
+        "order": 927,
+        "prevSize": 24,
+        "code": 58377,
+        "name": "navigate_next"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -24,9 +78,9 @@
         "code": 58834,
         "name": "menu"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 489
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -53,7 +107,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -80,7 +134,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -107,7 +161,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -134,7 +188,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -154,14 +208,14 @@
       "properties": {
         "ligatures": "timer",
         "id": 760,
-        "order": 916,
+        "order": 928,
         "prevSize": 24,
         "code": 58405,
         "name": "timer"
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -188,7 +242,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -215,7 +269,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -242,7 +296,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -269,7 +323,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -298,7 +352,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 11
     },
     {
       "icon": {
@@ -325,7 +379,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 12
     },
     {
       "icon": {
@@ -352,7 +406,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 13
     },
     {
       "icon": {
@@ -381,7 +435,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -410,7 +464,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -439,7 +493,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -468,7 +522,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -497,7 +551,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -523,7 +577,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -549,7 +603,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -575,7 +629,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -601,7 +655,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -627,7 +681,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -653,7 +707,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -679,7 +733,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -705,7 +759,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -731,7 +785,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -757,7 +811,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -783,7 +837,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -809,7 +863,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -835,7 +889,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -861,7 +915,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -887,7 +941,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -913,7 +967,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -939,7 +993,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -965,7 +1019,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -991,7 +1045,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -1017,7 +1071,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -1043,7 +1097,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 39
     },
     {
       "icon": {
@@ -1069,7 +1123,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 40
     },
     {
       "icon": {
@@ -1095,7 +1149,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 41
     },
     {
       "icon": {
@@ -1121,7 +1175,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 42
     },
     {
       "icon": {
@@ -1147,7 +1201,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 43
     },
     {
       "icon": {
@@ -1173,7 +1227,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 44
     },
     {
       "icon": {
@@ -1199,7 +1253,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 45
     },
     {
       "icon": {
@@ -1225,7 +1279,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 46
     },
     {
       "icon": {
@@ -1251,7 +1305,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 47
     },
     {
       "icon": {
@@ -1280,7 +1334,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 48
     },
     {
       "icon": {
@@ -1310,7 +1364,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 49
     },
     {
       "icon": {
@@ -1340,7 +1394,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 50
     },
     {
       "icon": {
@@ -1366,7 +1420,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 51
     },
     {
       "icon": {
@@ -1392,7 +1446,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 52
     },
     {
       "icon": {
@@ -1418,7 +1472,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 53
     }
   ],
   "height": 1024,

images/countries/au.svg

@@ -1,9 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g stroke-width="1pt">
-    <path fill="#006" d="M0 0h640v480H0z"/>
-    <path d="M0 0v27.95L307.037 250h38.647v-27.95L38.647 0H0zm345.684 0v27.95L38.647 250H0v-27.95L307.037 0h38.647z" fill="#fff"/>
-    <path d="M144.035 0v250h57.614V0h-57.615zM0 83.333v83.333h345.684V83.333H0z" fill="#fff"/>
-    <path d="M0 100v50h345.684v-50H0zM155.558 0v250h34.568V0h-34.568zM0 250l115.228-83.334h25.765L25.765 250H0zM0 0l115.228 83.333H89.463L0 18.633V0zm204.69 83.333L319.92 0h25.764L230.456 83.333H204.69zM345.685 250l-115.228-83.334h25.765l89.464 64.7V250z" fill="#c00"/>
-    <path d="M299.762 392.523l-43.653 3.795 6.013 43.406-30.187-31.764-30.186 31.764 6.014-43.406-43.653-3.795 37.68-22.364-24.244-36.495 40.97 15.514 13.42-41.713 13.42 41.712 40.97-15.515-24.242 36.494m224.444 62.372l-10.537-15.854 17.81 6.742 5.824-18.125 5.825 18.126 17.807-6.742-10.537 15.854 16.37 9.718-18.965 1.65 2.616 18.85-13.116-13.793-13.117 13.794 2.616-18.85-18.964-1.65m16.368-291.815l-10.537-15.856 17.81 6.742 5.824-18.122 5.825 18.12 17.807-6.74-10.537 15.855 16.37 9.717-18.965 1.65 2.616 18.85-13.116-13.793-13.117 13.794 2.616-18.85-18.964-1.65m-89.418 104.883l-10.537-15.853 17.808 6.742 5.825-18.125 5.825 18.125 17.808-6.742-10.536 15.853 16.37 9.72-18.965 1.65 2.615 18.85-13.117-13.795-13.117 13.795 2.617-18.85-18.964-1.65m216.212-37.929l-10.558-15.854 17.822 6.742 5.782-18.125 5.854 18.125 17.772-6.742-10.508 15.854 16.362 9.718-18.97 1.65 2.608 18.85-13.118-13.793-13.117 13.793 2.61-18.85-18.936-1.65m-22.251 73.394l-10.367 6.425 2.914-11.84-9.316-7.863 12.165-.896 4.605-11.29 4.606 11.29 12.165.897-9.317 7.863 2.912 11.84" fill-rule="evenodd" fill="#fff"/>
-  </g>
-</svg>

images/countries/ca.svg

@@ -1,6 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g transform="translate(74.118) scale(.9375)">
-    <path fill="#fff" d="M81.137 0h362.276v512H81.137z"/>
-    <path fill="#bf0a30" d="M-100 0H81.138v512H-100zm543.413 0H624.55v512H443.414zM135.31 247.41l-14.067 4.808 65.456 57.446c4.95 14.764-1.72 19.116-5.97 26.86l71.06-9.02-1.85 71.512 14.718-.423-3.21-70.918 71.13 8.432c-4.402-9.297-8.32-14.233-4.247-29.098l65.414-54.426-11.447-4.144c-9.36-7.222 4.044-34.784 6.066-52.178 0 0-38.195 13.135-40.698 6.262l-9.727-18.685-34.747 38.17c-3.796.91-5.413-.6-6.304-3.808l16.053-79.766-25.42 14.297c-2.128.91-4.256.125-5.658-2.355l-24.45-49.06-25.21 50.95c-1.9 1.826-3.803 2.037-5.382.796l-24.204-13.578 14.53 79.143c-1.156 3.14-3.924 4.025-7.18 2.324l-33.216-37.737c-4.345 6.962-7.29 18.336-13.033 20.885-5.744 2.387-24.98-4.823-37.873-7.637 4.404 15.895 18.176 42.302 9.46 50.957z"/>
-  </g>
-</svg>

images/countries/de.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <path fill="#ffce00" d="M0 320h640v160.002H0z"/>
-  <path d="M0 0h640v160H0z"/>
-  <path fill="#d00" d="M0 160h640v160H0z"/>
-</svg>

images/countries/fr.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" stroke-width="1pt">
-    <path fill="#fff" d="M0 0h640v480H0z"/>
-    <path fill="#00267f" d="M0 0h213.337v480H0z"/>
-    <path fill="#f31830" d="M426.662 0H640v480H426.662z"/>
-  </g>
-</svg>

images/countries/gb.svg

@@ -1,15 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <defs>
-    <clipPath id="a">
-      <path fill-opacity=".67" d="M-85.333 0h682.67v512h-682.67z"/>
-    </clipPath>
-  </defs>
-  <g clip-path="url(#a)" transform="translate(80) scale(.94)">
-    <g stroke-width="1pt">
-      <path fill="#006" d="M-256 0H768.02v512.01H-256z"/>
-      <path d="M-256 0v57.244l909.535 454.768H768.02V454.77L-141.515 0H-256zM768.02 0v57.243L-141.515 512.01H-256v-57.243L653.535 0H768.02z" fill="#fff"/>
-      <path d="M170.675 0v512.01h170.67V0h-170.67zM-256 170.67v170.67H768.02V170.67H-256z" fill="#fff"/>
-      <path d="M-256 204.804v102.402H768.02V204.804H-256zM204.81 0v512.01h102.4V0h-102.4zM-256 512.01L85.34 341.34h76.324l-341.34 170.67H-256zM-256 0L85.34 170.67H9.016L-256 38.164V0zm606.356 170.67L691.696 0h76.324L426.68 170.67h-76.324zM768.02 512.01L426.68 341.34h76.324L768.02 473.848v38.162z" fill="#c00"/>
-    </g>
-  </g>
-</svg>

images/countries/us.svg

@@ -1,18 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="480" width="640" viewBox="0 0 640 480">
-  <g fill-rule="evenodd" transform="scale(.9375)">
-    <g stroke-width="1pt">
-      <path d="M0 0h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#bd3d44"/>
-      <path d="M0 39.385h972.81V78.77H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0zm0 78.77h972.81v39.385H0z" fill="#fff"/>
-    </g>
-    <path fill="#192f5d" d="M0 0h389.12v275.69H0z"/>
-    <g fill="#fff">
-      <path d="M32.427 11.8l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 39.37l3.54 10.896h11.458L70.583 57l3.542 10.897-9.27-6.734-9.269 6.734L59.126 57l-9.269-6.734h11.458zm64.852 0l3.54 10.896h11.457L135.435 57l3.54 10.897-9.268-6.734-9.27 6.734L123.978 57l-9.27-6.734h11.458zm64.855 0l3.54 10.896h11.458L200.29 57l3.541 10.897-9.27-6.734-9.268 6.734L188.833 57l-9.269-6.734h11.457zm64.855 0l3.54 10.896h11.458L265.145 57l3.541 10.897-9.269-6.734-9.27 6.734L253.69 57l-9.27-6.734h11.458zm64.852 0l3.54 10.896h11.457L329.997 57l3.54 10.897-9.268-6.734-9.27 6.734L318.54 57l-9.27-6.734h11.458zM32.427 66.939l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 94.508l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zM32.427 122.078l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 149.647l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
-      <g>
-        <path d="M32.427 177.217l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458zM64.855 204.786l3.54 10.897h11.458l-9.27 6.734 3.542 10.897-9.27-6.734-9.269 6.734 3.54-10.897-9.269-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.27-6.734-9.268 6.734 3.54-10.897-9.269-6.734h11.457zm64.855 0l3.54 10.897h11.458l-9.27 6.734 3.541 10.897-9.269-6.734-9.27 6.734 3.542-10.897-9.27-6.734h11.458zm64.852 0l3.54 10.897h11.457l-9.269 6.734 3.54 10.897-9.268-6.734-9.27 6.734 3.541-10.897-9.27-6.734h11.458z"/>
-      </g>
-      <g>
-        <path d="M32.427 232.356l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.853 0l3.541 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735H93.74zm64.856 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.269 6.734 3.54-10.896-9.269-6.735h11.458zm64.852 0l3.54 10.896h11.457l-9.269 6.735 3.54 10.896-9.268-6.734-9.27 6.734 3.541-10.896-9.27-6.735h11.458zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.27-6.734-9.268 6.734 3.54-10.896-9.269-6.735h11.457zm64.855 0l3.54 10.896h11.458l-9.27 6.735 3.541 10.896-9.269-6.734-9.27 6.734 3.542-10.896-9.27-6.735h11.458z"/>
-      </g>
-    </g>
-  </g>
-</svg>

images/googleLogo.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="18px" height="18px" viewBox="0 0 48 48" class="abcRioButtonSvg">
+  <g>
+    <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"></path>
+    <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"></path>
+    <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"></path>
+    <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"></path>
+    <path fill="none" d="M0 0h48v48H0z"></path>
+  </g>
+</svg>

ios/Podfile

@@ -28,7 +28,10 @@ target 'JitsiMeet' do
   pod 'react-native-locale-detector',
     :path => '../node_modules/react-native-locale-detector'
   pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
+  pod 'RNSound', :path => '../node_modules/react-native-sound'
   pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
+  pod 'react-native-calendar-events',
+    :path => '../node_modules/react-native-calendar-events'
 end
 
 post_install do |installer|

ios/Podfile.lock

@@ -3,6 +3,8 @@ PODS:
     - React/Core (= 0.51.0)
   - react-native-background-timer (2.0.0):
     - React
+  - react-native-calendar-events (1.4.3):
+    - React
   - react-native-fetch-blob (0.10.6):
     - React/Core
   - react-native-keep-awake (2.0.6):
@@ -41,12 +43,18 @@ PODS:
     - React/Core
     - React/fishhook
     - React/RCTBlob
+  - RNSound (0.10.4):
+    - React/Core
+    - RNSound/Core (= 0.10.4)
+  - RNSound/Core (0.10.4):
+    - React/Core
   - RNVectorIcons (4.4.2):
     - React
   - yoga (0.51.0.React)
 
 DEPENDENCIES:
   - react-native-background-timer (from `../node_modules/react-native-background-timer`)
+  - react-native-calendar-events (from `../node_modules/react-native-calendar-events`)
   - react-native-fetch-blob (from `../node_modules/react-native-fetch-blob`)
   - react-native-keep-awake (from `../node_modules/react-native-keep-awake`)
   - react-native-locale-detector (from `../node_modules/react-native-locale-detector`)
@@ -61,6 +69,7 @@ DEPENDENCIES:
   - React/RCTNetwork (from `../node_modules/react-native`)
   - React/RCTText (from `../node_modules/react-native`)
   - React/RCTWebSocket (from `../node_modules/react-native`)
+  - RNSound (from `../node_modules/react-native-sound`)
   - RNVectorIcons (from `../node_modules/react-native-vector-icons`)
   - yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -69,6 +78,8 @@ EXTERNAL SOURCES:
     :path: ../node_modules/react-native
   react-native-background-timer:
     :path: ../node_modules/react-native-background-timer
+  react-native-calendar-events:
+    :path: ../node_modules/react-native-calendar-events
   react-native-fetch-blob:
     :path: ../node_modules/react-native-fetch-blob
   react-native-keep-awake:
@@ -77,6 +88,8 @@ EXTERNAL SOURCES:
     :path: ../node_modules/react-native-locale-detector
   react-native-webrtc:
     :path: ../node_modules/react-native-webrtc
+  RNSound:
+    :path: ../node_modules/react-native-sound
   RNVectorIcons:
     :path: ../node_modules/react-native-vector-icons
   yoga:
@@ -85,13 +98,15 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   React: 541ba768b9855e10cdc76f55427a5cd0653ca806
   react-native-background-timer: 63dcbf37dbcf294b5c6c071afcdc661fa06a7594
+  react-native-calendar-events: fe6fbc8ed337a7423c98f2c9012b25f20444de09
   react-native-fetch-blob: 63394b1d7b0781547b3e4463b3195790177b1222
   react-native-keep-awake: 0de4bd66de0c23178107dce0c2fcc3354b2a8e94
   react-native-locale-detector: d1b2c6fe5abb56e3a1efb6c2d6f308c05c4251f1
   react-native-webrtc: bc044ca9530fc802e7533f247aa08fe1b6bf8dc5
+  RNSound: d0818fe2435254fe30540fae48a429c5ffb72e09
   RNVectorIcons: c0dbfbf6068fefa240c37b0f71bd03b45dddac44
   yoga: 17521bbb0dd54a47c0b3ac43253e78cdac7488e0
 
-PODFILE CHECKSUM: fabd6b6c27f8e1849f0668db3f403bf536ac8903
+PODFILE CHECKSUM: 4a5a310403b99b9c2d619e0b18da89bf0fe5858c
 
 COCOAPODS: 1.4.0

ios/app/src/Info.plist

@@ -55,12 +55,14 @@
 			</dict>
 		</dict>
 	</dict>
+        <key>NSCalendarsUsageDescription</key>
+        <string>See your scheduled conferences in the app.</string>
 	<key>NSCameraUsageDescription</key>
 	<string>Participate in conferences with video.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
 	<key>NSMicrophoneUsageDescription</key>
-	<string>Participate in conferences with audio.</string>
+	<string>Participate in conferences with voice.</string>
 	<key>UIBackgroundModes</key>
 	<array>
 		<string>audio</string>

ios/example-pip-app/example-pip-app.xcodeproj/project.pbxproj

@@ -0,0 +1,416 @@
+// !$*UTF8*$!
+{
+	archiveVersion = 1;
+	classes = {
+	};
+	objectVersion = 48;
+	objects = {
+
+/* Begin PBXBuildFile section */
+		C6245F57205044120040BE68 /* JitsiMeet.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C6F99C4F204DE79F0001F710 /* JitsiMeet.framework */; };
+		C6245F58205044150040BE68 /* WebRTC.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = C6A34247204DF18000E062DD /* WebRTC.framework */; };
+		C6A34249204DF18000E062DD /* WebRTC.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = C6A34247204DF18000E062DD /* WebRTC.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+		C6F99C3B204DE6BE0001F710 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6F99C3A204DE6BE0001F710 /* AppDelegate.swift */; };
+		C6F99C3D204DE6BE0001F710 /* ViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6F99C3C204DE6BE0001F710 /* ViewController.swift */; };
+		C6F99C40204DE6BE0001F710 /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = C6F99C3E204DE6BE0001F710 /* Main.storyboard */; };
+		C6F99C42204DE6BE0001F710 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = C6F99C41204DE6BE0001F710 /* Assets.xcassets */; };
+		C6F99C45204DE6BE0001F710 /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = C6F99C43204DE6BE0001F710 /* LaunchScreen.storyboard */; };
+		C6F99C60204DEDC10001F710 /* JitsiMeet.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = C6F99C4F204DE79F0001F710 /* JitsiMeet.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
+/* End PBXBuildFile section */
+
+/* Begin PBXCopyFilesBuildPhase section */
+		C6F99C61204DEDC20001F710 /* Embed Frameworks */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "";
+			dstSubfolderSpec = 10;
+			files = (
+				C6F99C60204DEDC10001F710 /* JitsiMeet.framework in Embed Frameworks */,
+				C6A34249204DF18000E062DD /* WebRTC.framework in Embed Frameworks */,
+			);
+			name = "Embed Frameworks";
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
+/* Begin PBXFileReference section */
+		C6A34247204DF18000E062DD /* WebRTC.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = WebRTC.framework; path = "../../node_modules/react-native-webrtc/ios/WebRTC.framework"; sourceTree = "<group>"; };
+		C6F99C37204DE6BE0001F710 /* example-pip-app.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example-pip-app.app; sourceTree = BUILT_PRODUCTS_DIR; };
+		C6F99C3A204DE6BE0001F710 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = "<group>"; };
+		C6F99C3C204DE6BE0001F710 /* ViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ViewController.swift; sourceTree = "<group>"; };
+		C6F99C3F204DE6BE0001F710 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = "<group>"; };
+		C6F99C41204DE6BE0001F710 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
+		C6F99C44204DE6BE0001F710 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = "<group>"; };
+		C6F99C46204DE6BE0001F710 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		C6F99C4F204DE79F0001F710 /* JitsiMeet.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; path = JitsiMeet.framework; sourceTree = BUILT_PRODUCTS_DIR; };
+/* End PBXFileReference section */
+
+/* Begin PBXFrameworksBuildPhase section */
+		C6F99C34204DE6BE0001F710 /* Frameworks */ = {
+			isa = PBXFrameworksBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				C6245F57205044120040BE68 /* JitsiMeet.framework in Frameworks */,
+				C6245F58205044150040BE68 /* WebRTC.framework in Frameworks */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXFrameworksBuildPhase section */
+
+/* Begin PBXGroup section */
+		C6F99C2E204DE6BE0001F710 = {
+			isa = PBXGroup;
+			children = (
+				C6F99C4D204DE79F0001F710 /* Frameworks */,
+				C6F99C38204DE6BE0001F710 /* Products */,
+				C6F99C4C204DE7230001F710 /* src */,
+			);
+			sourceTree = "<group>";
+		};
+		C6F99C38204DE6BE0001F710 /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				C6F99C37204DE6BE0001F710 /* example-pip-app.app */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
+		C6F99C4C204DE7230001F710 /* src */ = {
+			isa = PBXGroup;
+			children = (
+				C6F99C3A204DE6BE0001F710 /* AppDelegate.swift */,
+				C6F99C3C204DE6BE0001F710 /* ViewController.swift */,
+				C6F99C3E204DE6BE0001F710 /* Main.storyboard */,
+				C6F99C41204DE6BE0001F710 /* Assets.xcassets */,
+				C6F99C43204DE6BE0001F710 /* LaunchScreen.storyboard */,
+				C6F99C46204DE6BE0001F710 /* Info.plist */,
+			);
+			path = src;
+			sourceTree = "<group>";
+		};
+		C6F99C4D204DE79F0001F710 /* Frameworks */ = {
+			isa = PBXGroup;
+			children = (
+				C6F99C4F204DE79F0001F710 /* JitsiMeet.framework */,
+				C6A34247204DF18000E062DD /* WebRTC.framework */,
+			);
+			name = Frameworks;
+			sourceTree = "<group>";
+		};
+/* End PBXGroup section */
+
+/* Begin PBXNativeTarget section */
+		C6F99C36204DE6BE0001F710 /* example-pip-app */ = {
+			isa = PBXNativeTarget;
+			buildConfigurationList = C6F99C49204DE6BE0001F710 /* Build configuration list for PBXNativeTarget "example-pip-app" */;
+			buildPhases = (
+				C6A3424A204DF91D00E062DD /* Run Adjust ATS for loading JS bundle */,
+				C6F99C62204DEFFE0001F710 /* Run React Packager */,
+				C6F99C33204DE6BE0001F710 /* Sources */,
+				C6F99C34204DE6BE0001F710 /* Frameworks */,
+				C6F99C35204DE6BE0001F710 /* Resources */,
+				C6F99C61204DEDC20001F710 /* Embed Frameworks */,
+				C6A3426E20503ECC00E062DD /* Adjust embedded framework architectures */,
+			);
+			buildRules = (
+			);
+			dependencies = (
+			);
+			name = example-pip-app;
+			productName = example-pip-app;
+			productReference = C6F99C37204DE6BE0001F710 /* example-pip-app.app */;
+			productType = "com.apple.product-type.application";
+		};
+/* End PBXNativeTarget section */
+
+/* Begin PBXProject section */
+		C6F99C2F204DE6BE0001F710 /* Project object */ = {
+			isa = PBXProject;
+			attributes = {
+				LastSwiftUpdateCheck = 0920;
+				LastUpgradeCheck = 0920;
+				ORGANIZATIONNAME = "Atlassian Inc";
+				TargetAttributes = {
+					C6F99C36204DE6BE0001F710 = {
+						CreatedOnToolsVersion = 9.2;
+						ProvisioningStyle = Automatic;
+						SystemCapabilities = {
+							com.apple.BackgroundModes = {
+								enabled = 1;
+							};
+						};
+					};
+				};
+			};
+			buildConfigurationList = C6F99C32204DE6BE0001F710 /* Build configuration list for PBXProject "example-pip-app" */;
+			compatibilityVersion = "Xcode 8.0";
+			developmentRegion = en;
+			hasScannedForEncodings = 0;
+			knownRegions = (
+				en,
+				Base,
+			);
+			mainGroup = C6F99C2E204DE6BE0001F710;
+			productRefGroup = C6F99C38204DE6BE0001F710 /* Products */;
+			projectDirPath = "";
+			projectRoot = "";
+			targets = (
+				C6F99C36204DE6BE0001F710 /* example-pip-app */,
+			);
+		};
+/* End PBXProject section */
+
+/* Begin PBXResourcesBuildPhase section */
+		C6F99C35204DE6BE0001F710 /* Resources */ = {
+			isa = PBXResourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				C6F99C45204DE6BE0001F710 /* LaunchScreen.storyboard in Resources */,
+				C6F99C42204DE6BE0001F710 /* Assets.xcassets in Resources */,
+				C6F99C40204DE6BE0001F710 /* Main.storyboard in Resources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXResourcesBuildPhase section */
+
+/* Begin PBXShellScriptBuildPhase section */
+		C6A3424A204DF91D00E062DD /* Run Adjust ATS for loading JS bundle */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run Adjust ATS for loading JS bundle";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "../scripts/fixup-ats.sh";
+		};
+		C6A3426E20503ECC00E062DD /* Adjust embedded framework architectures */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Adjust embedded framework architectures";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "../scripts/fixup-frameworks.sh";
+		};
+		C6F99C62204DEFFE0001F710 /* Run React Packager */ = {
+			isa = PBXShellScriptBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+			);
+			inputPaths = (
+			);
+			name = "Run React Packager";
+			outputPaths = (
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+			shellPath = /bin/sh;
+			shellScript = "../scripts/run-packager.sh";
+		};
+/* End PBXShellScriptBuildPhase section */
+
+/* Begin PBXSourcesBuildPhase section */
+		C6F99C33204DE6BE0001F710 /* Sources */ = {
+			isa = PBXSourcesBuildPhase;
+			buildActionMask = 2147483647;
+			files = (
+				C6F99C3D204DE6BE0001F710 /* ViewController.swift in Sources */,
+				C6F99C3B204DE6BE0001F710 /* AppDelegate.swift in Sources */,
+			);
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXSourcesBuildPhase section */
+
+/* Begin PBXVariantGroup section */
+		C6F99C3E204DE6BE0001F710 /* Main.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				C6F99C3F204DE6BE0001F710 /* Base */,
+			);
+			name = Main.storyboard;
+			sourceTree = "<group>";
+		};
+		C6F99C43204DE6BE0001F710 /* LaunchScreen.storyboard */ = {
+			isa = PBXVariantGroup;
+			children = (
+				C6F99C44204DE6BE0001F710 /* Base */,
+			);
+			name = LaunchScreen.storyboard;
+			sourceTree = "<group>";
+		};
+/* End PBXVariantGroup section */
+
+/* Begin XCBuildConfiguration section */
+		C6F99C47204DE6BE0001F710 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = dwarf;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				ENABLE_TESTABILITY = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_DYNAMIC_NO_PIC = NO;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_OPTIMIZATION_LEVEL = 0;
+				GCC_PREPROCESSOR_DEFINITIONS = (
+					"DEBUG=1",
+					"$(inherited)",
+				);
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.2;
+				MTL_ENABLE_DEBUG_INFO = YES;
+				ONLY_ACTIVE_ARCH = YES;
+				SDKROOT = iphoneos;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+			};
+			name = Debug;
+		};
+		C6F99C48204DE6BE0001F710 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ALWAYS_SEARCH_USER_PATHS = NO;
+				CLANG_ANALYZER_NONNULL = YES;
+				CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE;
+				CLANG_CXX_LANGUAGE_STANDARD = "gnu++14";
+				CLANG_CXX_LIBRARY = "libc++";
+				CLANG_ENABLE_MODULES = YES;
+				CLANG_ENABLE_OBJC_ARC = YES;
+				CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES;
+				CLANG_WARN_BOOL_CONVERSION = YES;
+				CLANG_WARN_COMMA = YES;
+				CLANG_WARN_CONSTANT_CONVERSION = YES;
+				CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR;
+				CLANG_WARN_DOCUMENTATION_COMMENTS = YES;
+				CLANG_WARN_EMPTY_BODY = YES;
+				CLANG_WARN_ENUM_CONVERSION = YES;
+				CLANG_WARN_INFINITE_RECURSION = YES;
+				CLANG_WARN_INT_CONVERSION = YES;
+				CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES;
+				CLANG_WARN_OBJC_LITERAL_CONVERSION = YES;
+				CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR;
+				CLANG_WARN_RANGE_LOOP_ANALYSIS = YES;
+				CLANG_WARN_STRICT_PROTOTYPES = YES;
+				CLANG_WARN_SUSPICIOUS_MOVE = YES;
+				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
+				CLANG_WARN_UNREACHABLE_CODE = YES;
+				CLANG_WARN__DUPLICATE_METHOD_MATCH = YES;
+				CODE_SIGN_IDENTITY = "iPhone Developer";
+				COPY_PHASE_STRIP = NO;
+				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
+				ENABLE_NS_ASSERTIONS = NO;
+				ENABLE_STRICT_OBJC_MSGSEND = YES;
+				GCC_C_LANGUAGE_STANDARD = gnu11;
+				GCC_NO_COMMON_BLOCKS = YES;
+				GCC_WARN_64_TO_32_BIT_CONVERSION = YES;
+				GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR;
+				GCC_WARN_UNDECLARED_SELECTOR = YES;
+				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
+				GCC_WARN_UNUSED_FUNCTION = YES;
+				GCC_WARN_UNUSED_VARIABLE = YES;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.2;
+				MTL_ENABLE_DEBUG_INFO = NO;
+				SDKROOT = iphoneos;
+				SWIFT_OPTIMIZATION_LEVEL = "-Owholemodule";
+				VALIDATE_PRODUCT = YES;
+			};
+			name = Release;
+		};
+		C6F99C4A204DE6BE0001F710 /* Debug */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				FRAMEWORK_SEARCH_PATHS = "../../node_modules/react-native-webrtc/ios";
+				INFOPLIST_FILE = src/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.3;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				PRODUCT_BUNDLE_IDENTIFIER = com.jitsi.example-pip-app;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_VERSION = 4.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Debug;
+		};
+		C6F99C4B204DE6BE0001F710 /* Release */ = {
+			isa = XCBuildConfiguration;
+			buildSettings = {
+				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
+				CODE_SIGN_STYLE = Automatic;
+				FRAMEWORK_SEARCH_PATHS = "../../node_modules/react-native-webrtc/ios";
+				INFOPLIST_FILE = src/Info.plist;
+				IPHONEOS_DEPLOYMENT_TARGET = 10.3;
+				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
+				PRODUCT_BUNDLE_IDENTIFIER = com.jitsi.example-pip-app;
+				PRODUCT_NAME = "$(TARGET_NAME)";
+				SWIFT_VERSION = 4.0;
+				TARGETED_DEVICE_FAMILY = "1,2";
+			};
+			name = Release;
+		};
+/* End XCBuildConfiguration section */
+
+/* Begin XCConfigurationList section */
+		C6F99C32204DE6BE0001F710 /* Build configuration list for PBXProject "example-pip-app" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				C6F99C47204DE6BE0001F710 /* Debug */,
+				C6F99C48204DE6BE0001F710 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+		C6F99C49204DE6BE0001F710 /* Build configuration list for PBXNativeTarget "example-pip-app" */ = {
+			isa = XCConfigurationList;
+			buildConfigurations = (
+				C6F99C4A204DE6BE0001F710 /* Debug */,
+				C6F99C4B204DE6BE0001F710 /* Release */,
+			);
+			defaultConfigurationIsVisible = 0;
+			defaultConfigurationName = Release;
+		};
+/* End XCConfigurationList section */
+	};
+	rootObject = C6F99C2F204DE6BE0001F710 /* Project object */;
+}

ios/example-pip-app/src/AppDelegate.swift

@@ -0,0 +1,41 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import JitsiMeet
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+
+    var window: UIWindow?
+    
+    func application(_ application: UIApplication,
+                     didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey : Any]? = nil) -> Bool {
+        guard let launchOptions = launchOptions else { return false }
+        return JitsiMeetView.application(application, didFinishLaunchingWithOptions: launchOptions)
+    }
+    
+    // MARK: - Linking delegate methods
+    
+    func application(_ application: UIApplication,
+                     continue userActivity: NSUserActivity,
+                     restorationHandler: @escaping ([Any]?) -> Void) -> Bool {
+        return JitsiMeetView.application(application, continue: userActivity, restorationHandler: restorationHandler)
+    }
+    
+    func application(_ application: UIApplication, open url: URL, sourceApplication: String?, annotation: Any) -> Bool {
+        return JitsiMeetView.application(application, open: url, sourceApplication: sourceApplication, annotation: annotation)
+    }
+}

ios/example-pip-app/src/Assets.xcassets/AppIcon.appiconset/Contents.json

@@ -0,0 +1,98 @@
+{
+  "images" : [
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "20x20",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "29x29",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "40x40",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "iphone",
+      "size" : "60x60",
+      "scale" : "3x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "20x20",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "29x29",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "29x29",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "40x40",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "40x40",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "76x76",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "76x76",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ipad",
+      "size" : "83.5x83.5",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "ios-marketing",
+      "size" : "1024x1024",
+      "scale" : "1x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

ios/example-pip-app/src/Base.lproj/LaunchScreen.storyboard

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13122.16" systemVersion="17A277" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+    <dependencies>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13104.12"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="53" y="375"/>
+        </scene>
+    </scenes>
+</document>

ios/example-pip-app/src/Base.lproj/Main.storyboard

@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="13771" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
+    <device id="retina4_7" orientation="portrait">
+        <adaptation id="fullscreen"/>
+    </device>
+    <dependencies>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="13772"/>
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="tne-QT-ifu">
+            <objects>
+                <viewController id="BYZ-38-t0r" customClass="ViewController" customModule="example-pip-app" customModuleProvider="target" sceneMemberID="viewController">
+                    <view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
+                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="QxY-C8-fwD">
+                                <rect key="frame" x="116" y="324.5" width="143" height="38"/>
+                                <fontDescription key="fontDescription" type="system" pointSize="21"/>
+                                <state key="normal" title="Open Jitsi Meet"/>
+                                <connections>
+                                    <action selector="openJitsiMeetWithSender:" destination="BYZ-38-t0r" eventType="touchUpInside" id="79C-XR-05w"/>
+                                </connections>
+                            </button>
+                        </subviews>
+                        <color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
+                        <constraints>
+                            <constraint firstItem="QxY-C8-fwD" firstAttribute="centerX" secondItem="6Tk-OE-BBY" secondAttribute="centerX" id="6a6-l1-7Ct"/>
+                            <constraint firstItem="QxY-C8-fwD" firstAttribute="centerY" secondItem="6Tk-OE-BBY" secondAttribute="centerY" id="Hfg-TH-0g2"/>
+                        </constraints>
+                        <viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
+                    </view>
+                    <connections>
+                        <outlet property="videoButton" destination="QxY-C8-fwD" id="Zwa-Hx-Zub"/>
+                    </connections>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="32.799999999999997" y="658.92053973013503"/>
+        </scene>
+    </scenes>
+</document>

ios/example-pip-app/src/Info.plist

@@ -0,0 +1,62 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>CFBundleDevelopmentRegion</key>
+	<string>$(DEVELOPMENT_LANGUAGE)</string>
+	<key>CFBundleExecutable</key>
+	<string>$(EXECUTABLE_NAME)</string>
+	<key>CFBundleIdentifier</key>
+	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
+	<key>CFBundleInfoDictionaryVersion</key>
+	<string>6.0</string>
+	<key>CFBundleName</key>
+	<string>$(PRODUCT_NAME)</string>
+	<key>CFBundlePackageType</key>
+	<string>APPL</string>
+	<key>CFBundleShortVersionString</key>
+	<string>1.0</string>
+	<key>CFBundleVersion</key>
+	<string>1</string>
+	<key>LSRequiresIPhoneOS</key>
+	<true/>
+	<key>UIBackgroundModes</key>
+	<array>
+		<string>audio</string>
+	</array>
+	<key>UILaunchStoryboardName</key>
+	<string>LaunchScreen</string>
+	<key>UIMainStoryboardFile</key>
+	<string>Main</string>
+	<key>UIRequiredDeviceCapabilities</key>
+	<array>
+		<string>armv7</string>
+	</array>
+	<key>UISupportedInterfaceOrientations</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+	<key>NSAppTransportSecurity</key>
+	<dict>
+		<key>NSExceptionDomains</key>
+		<dict>
+			<key>localhost</key>
+			<dict>
+				<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
+				<true/>
+			</dict>
+		</dict>
+		<key>NSAllowsArbitraryLoads</key>
+		<true/>
+	</dict>
+	<key>UISupportedInterfaceOrientations~ipad</key>
+	<array>
+		<string>UIInterfaceOrientationPortrait</string>
+		<string>UIInterfaceOrientationPortraitUpsideDown</string>
+		<string>UIInterfaceOrientationLandscapeLeft</string>
+		<string>UIInterfaceOrientationLandscapeRight</string>
+	</array>
+</dict>
+</plist>

ios/example-pip-app/src/ViewController.swift

@@ -0,0 +1,39 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import UIKit
+import JitsiMeet
+
+class ViewController: UIViewController {
+
+    @IBOutlet weak var videoButton: UIButton?
+    
+    private var jitsiMeetCoordinator: JitsiMeetPresentationCoordinator?
+    
+    override func viewDidLoad() {
+        super.viewDidLoad()
+    }
+    
+    // MARK: - Actions
+    
+    @IBAction func openJitsiMeet(sender: Any?) {
+        let jitsiMeetCoordinator = JitsiMeetPresentationCoordinator()
+        self.jitsiMeetCoordinator = jitsiMeetCoordinator
+        jitsiMeetCoordinator.jitsiMeetView().welcomePageEnabled = true
+        jitsiMeetCoordinator.jitsiMeetView().load(nil)
+        jitsiMeetCoordinator.show()
+    }
+}

ios/jitsi-meet.xcworkspace/contents.xcworkspacedata

@@ -1,6 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Workspace
    version = "1.0">
+   <FileRef
+      location = "group:example-pip-app/example-pip-app.xcodeproj">
+   </FileRef>
    <FileRef
       location = "group:app/app.xcodeproj">
    </FileRef>

ios/sdk/sdk.xcodeproj/project.pbxproj

@@ -27,6 +27,13 @@
 		0BCA496C1EC4BBF900B793EE /* jitsi.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 0BCA496B1EC4BBF900B793EE /* jitsi.ttf */; };
 		0BD906EA1EC0C00300C8C18E /* JitsiMeet.h in Headers */ = {isa = PBXBuildFile; fileRef = 0BD906E81EC0C00300C8C18E /* JitsiMeet.h */; settings = {ATTRIBUTES = (Public, ); }; };
 		0F65EECE1D95DA94561BB47E /* libPods-JitsiMeet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 03F2ADC957FF109849B7FCA1 /* libPods-JitsiMeet.a */; };
+		C6245F5D2053091D0040BE68 /* image-resize@2x.png in Resources */ = {isa = PBXBuildFile; fileRef = C6245F5B2053091D0040BE68 /* image-resize@2x.png */; };
+		C6245F5E2053091D0040BE68 /* image-resize@3x.png in Resources */ = {isa = PBXBuildFile; fileRef = C6245F5C2053091D0040BE68 /* image-resize@3x.png */; };
+		C6A3425F204EF76800E062DD /* PiPWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6A3425C204EF76800E062DD /* PiPWindow.swift */; };
+		C6A34260204EF76800E062DD /* JitsiMeetPresentationCoordinator.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6A3425D204EF76800E062DD /* JitsiMeetPresentationCoordinator.swift */; };
+		C6A34261204EF76800E062DD /* DragGestureController.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6A3425E204EF76800E062DD /* DragGestureController.swift */; };
+		C6A3426D204F1C3300E062DD /* JitsiMeetViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = C6A3426C204F1C3300E062DD /* JitsiMeetViewController.swift */; };
+		C6F99C15204DB63E0001F710 /* JitsiMeetView+Private.h in Headers */ = {isa = PBXBuildFile; fileRef = C6F99C13204DB63D0001F710 /* JitsiMeetView+Private.h */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXFileReference section */
@@ -55,6 +62,13 @@
 		0BD906E91EC0C00300C8C18E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		98E09B5C73D9036B4ED252FC /* Pods-JitsiMeet.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JitsiMeet.debug.xcconfig"; path = "../Pods/Target Support Files/Pods-JitsiMeet/Pods-JitsiMeet.debug.xcconfig"; sourceTree = "<group>"; };
 		9C77CA3CC919B081F1A52982 /* Pods-JitsiMeet.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JitsiMeet.release.xcconfig"; path = "../Pods/Target Support Files/Pods-JitsiMeet/Pods-JitsiMeet.release.xcconfig"; sourceTree = "<group>"; };
+		C6245F5B2053091D0040BE68 /* image-resize@2x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "image-resize@2x.png"; path = "src/picture-in-picture/image-resize@2x.png"; sourceTree = "<group>"; };
+		C6245F5C2053091D0040BE68 /* image-resize@3x.png */ = {isa = PBXFileReference; lastKnownFileType = image.png; name = "image-resize@3x.png"; path = "src/picture-in-picture/image-resize@3x.png"; sourceTree = "<group>"; };
+		C6A3425C204EF76800E062DD /* PiPWindow.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = PiPWindow.swift; sourceTree = "<group>"; };
+		C6A3425D204EF76800E062DD /* JitsiMeetPresentationCoordinator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = JitsiMeetPresentationCoordinator.swift; sourceTree = "<group>"; };
+		C6A3425E204EF76800E062DD /* DragGestureController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DragGestureController.swift; sourceTree = "<group>"; };
+		C6A3426C204F1C3300E062DD /* JitsiMeetViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = JitsiMeetViewController.swift; sourceTree = "<group>"; };
+		C6F99C13204DB63D0001F710 /* JitsiMeetView+Private.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = "JitsiMeetView+Private.h"; sourceTree = "<group>"; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -76,6 +90,8 @@
 			isa = PBXGroup;
 			children = (
 				0BC4B8681F8C01E100CE8B21 /* CallKitIcon.png */,
+				C6245F5B2053091D0040BE68 /* image-resize@2x.png */,
+				C6245F5C2053091D0040BE68 /* image-resize@3x.png */,
 				0BCA496B1EC4BBF900B793EE /* jitsi.ttf */,
 			);
 			name = Resources;
@@ -103,6 +119,7 @@
 		0BD906E71EC0C00300C8C18E /* src */ = {
 			isa = PBXGroup;
 			children = (
+				C6A3426B204F127900E062DD /* picture-in-picture */,
 				0BCA495C1EC4B6C600B793EE /* AudioMode.m */,
 				0BB9AD7C1F60356D001C08DB /* AppInfo.m */,
 				0BB9AD7A1F5EC8F4001C08DB /* CallKit.m */,
@@ -112,6 +129,7 @@
 				0BD906E81EC0C00300C8C18E /* JitsiMeet.h */,
 				0B412F161EDEC65D00B1A0A6 /* JitsiMeetView.h */,
 				0B412F171EDEC65D00B1A0A6 /* JitsiMeetView.m */,
+				C6F99C13204DB63D0001F710 /* JitsiMeetView+Private.h */,
 				0B412F1B1EDEC80100B1A0A6 /* JitsiMeetViewDelegate.h */,
 				0B44A0181F902126009D1D64 /* MPVolumeViewManager.m */,
 				0B93EF7C1EC9DDCD0030D24D /* RCTBridgeWrapper.h */,
@@ -143,6 +161,17 @@
 			name = Pods;
 			sourceTree = "<group>";
 		};
+		C6A3426B204F127900E062DD /* picture-in-picture */ = {
+			isa = PBXGroup;
+			children = (
+				C6A3425E204EF76800E062DD /* DragGestureController.swift */,
+				C6A3425D204EF76800E062DD /* JitsiMeetPresentationCoordinator.swift */,
+				C6A3426C204F1C3300E062DD /* JitsiMeetViewController.swift */,
+				C6A3425C204EF76800E062DD /* PiPWindow.swift */,
+			);
+			path = "picture-in-picture";
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXHeadersBuildPhase section */
@@ -150,6 +179,7 @@
 			isa = PBXHeadersBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
+				C6F99C15204DB63E0001F710 /* JitsiMeetView+Private.h in Headers */,
 				0B412F181EDEC65D00B1A0A6 /* JitsiMeetView.h in Headers */,
 				0B93EF7E1EC9DDCD0030D24D /* RCTBridgeWrapper.h in Headers */,
 				0B412F221EDEF6EA00B1A0A6 /* JitsiMeetViewDelegate.h in Headers */,
@@ -192,6 +222,7 @@
 				TargetAttributes = {
 					0BD906E41EC0C00300C8C18E = {
 						CreatedOnToolsVersion = 8.3.2;
+						LastSwiftMigration = 0920;
 						ProvisioningStyle = Automatic;
 					};
 				};
@@ -219,7 +250,9 @@
 			buildActionMask = 2147483647;
 			files = (
 				0BCA496C1EC4BBF900B793EE /* jitsi.ttf in Resources */,
+				C6245F5D2053091D0040BE68 /* image-resize@2x.png in Resources */,
 				0BC4B8691F8C03A700CE8B21 /* CallKitIcon.png in Resources */,
+				C6245F5E2053091D0040BE68 /* image-resize@3x.png in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -304,14 +337,18 @@
 			buildActionMask = 2147483647;
 			files = (
 				0BB9AD7B1F5EC8F4001C08DB /* CallKit.m in Sources */,
+				C6A34260204EF76800E062DD /* JitsiMeetPresentationCoordinator.swift in Sources */,
 				0BB9AD7D1F60356D001C08DB /* AppInfo.m in Sources */,
 				0B93EF7F1EC9DDCD0030D24D /* RCTBridgeWrapper.m in Sources */,
 				0BA13D311EE83FF8007BEF7F /* ExternalAPI.m in Sources */,
 				0BCA49601EC4B6C600B793EE /* POSIX.m in Sources */,
 				0B7C2CFD200F51D60060D076 /* LaunchOptions.m in Sources */,
+				C6A3426D204F1C3300E062DD /* JitsiMeetViewController.swift in Sources */,
+				C6A3425F204EF76800E062DD /* PiPWindow.swift in Sources */,
 				0BCA495F1EC4B6C600B793EE /* AudioMode.m in Sources */,
 				0B44A0191F902126009D1D64 /* MPVolumeViewManager.m in Sources */,
 				0BCA49611EC4B6C600B793EE /* Proximity.m in Sources */,
+				C6A34261204EF76800E062DD /* DragGestureController.swift in Sources */,
 				0B412F191EDEC65D00B1A0A6 /* JitsiMeetView.m in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
@@ -435,6 +472,8 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 98E09B5C73D9036B4ED252FC /* Pods-JitsiMeet.debug.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = NO;
+				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "";
 				DEFINES_MODULE = YES;
@@ -450,6 +489,9 @@
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SKIP_INSTALL = YES;
+				SWIFT_OBJC_BRIDGING_HEADER = "";
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 3.0;
 			};
 			name = Debug;
 		};
@@ -457,6 +499,8 @@
 			isa = XCBuildConfiguration;
 			baseConfigurationReference = 9C77CA3CC919B081F1A52982 /* Pods-JitsiMeet.release.xcconfig */;
 			buildSettings = {
+				ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = NO;
+				CLANG_ENABLE_MODULES = YES;
 				CODE_SIGN_IDENTITY = "";
 				"CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "";
 				DEFINES_MODULE = YES;
@@ -472,6 +516,8 @@
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
 				SKIP_INSTALL = YES;
+				SWIFT_OBJC_BRIDGING_HEADER = "";
+				SWIFT_VERSION = 3.0;
 			};
 			name = Release;
 		};

ios/sdk/src/picture-in-picture/DragGestureController.swift

@@ -0,0 +1,125 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+final class DragGestureController {
+    
+    var insets: UIEdgeInsets = UIEdgeInsets.zero
+    
+    private var frameBeforeDragging: CGRect = CGRect.zero
+    private weak var view: UIView?
+    private lazy var panGesture: UIPanGestureRecognizer = {
+        return UIPanGestureRecognizer(target: self,
+                                      action: #selector(handlePan(gesture:)))
+    }()
+    
+    func startDragListener(inView view: UIView) {
+        self.view = view
+        view.addGestureRecognizer(panGesture)
+        panGesture.isEnabled = true
+    }
+    
+    func stopDragListener() {
+        panGesture.isEnabled = false
+        view?.removeGestureRecognizer(panGesture)
+        view = nil
+    }
+    
+    @objc private func handlePan(gesture: UIPanGestureRecognizer) {
+        guard let view = self.view else { return }
+        
+        let translation = gesture.translation(in: view.superview)
+        let velocity = gesture.velocity(in: view.superview)
+        var frame = frameBeforeDragging
+        
+        switch gesture.state {
+        case .began:
+            frameBeforeDragging = view.frame
+            
+        case .changed:
+            frame.origin.x = floor(frame.origin.x + translation.x)
+            frame.origin.y = floor(frame.origin.y + translation.y)
+            view.frame = frame
+            
+        case .ended:
+            let currentPos = view.frame.origin
+            let finalPos = calculateFinalPosition()
+            
+            let distance = CGPoint(x: currentPos.x - finalPos.x,
+                                   y: currentPos.y - finalPos.y)
+            let distanceMagnitude = magnitude(vector: distance)
+            let velocityMagnitude = magnitude(vector: velocity)
+            let animationDuration = 0.5
+            let initialSpringVelocity =
+                velocityMagnitude / distanceMagnitude / CGFloat(animationDuration)
+            
+            frame.origin = CGPoint(x: finalPos.x, y: finalPos.y)
+            
+            UIView.animate(withDuration: animationDuration,
+                           delay: 0,
+                           usingSpringWithDamping: 0.9,
+                           initialSpringVelocity: initialSpringVelocity,
+                           options: .curveLinear,
+                           animations: {
+                            view.frame = frame
+            }, completion: nil)
+            
+        default:
+            break
+        }
+    }
+    
+    private func calculateFinalPosition() -> CGPoint {
+        guard
+            let view = self.view,
+            let bounds = view.superview?.frame
+            else { return CGPoint.zero }
+        
+        let currentSize = view.frame.size
+        let adjustedBounds = UIEdgeInsetsInsetRect(bounds, insets)
+        let threshold: CGFloat = 20.0
+        let velocity = panGesture.velocity(in: view.superview)
+        let location = panGesture.location(in: view.superview)
+        
+        let goLeft: Bool
+        if fabs(velocity.x) > threshold {
+            goLeft = velocity.x < -threshold
+        } else {
+            goLeft = location.x < bounds.midX
+        }
+        
+        let goUp: Bool
+        if fabs(velocity.y) > threshold {
+            goUp = velocity.y < -threshold
+        } else {
+            goUp = location.y < bounds.midY
+        }
+        
+        let finalPosX: CGFloat =
+            goLeft
+                ? adjustedBounds.origin.x
+                : bounds.size.width - insets.right  - currentSize.width
+        let finalPosY: CGFloat =
+            goUp
+                ? adjustedBounds.origin.y
+                : bounds.size.height - insets.bottom - currentSize.height
+        
+        return CGPoint(x: finalPosX, y: finalPosY)
+    }
+    
+    private func magnitude(vector: CGPoint) -> CGFloat {
+        return sqrt(pow(vector.x, 2) + pow(vector.y, 2))
+    }
+}

ios/sdk/src/picture-in-picture/JitsiMeetPresentationCoordinator.swift

@@ -0,0 +1,97 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Foundation
+
+/// Coordinates the presentation of JitsiMeetViewController inside of
+/// an external window that can be resized and dragged with custom PiP mode
+open class JitsiMeetPresentationCoordinator: NSObject {
+    
+    fileprivate let meetViewController: JitsiMeetViewController
+    fileprivate let meetWindow: PiPWindow
+    
+    public init(meetViewController: JitsiMeetViewController? = nil,
+                meetWindow: PiPWindow? = nil) {
+        self.meetViewController = meetViewController ?? JitsiMeetViewController()
+        self.meetWindow = meetWindow ?? PiPWindow(frame: UIScreen.main.bounds)
+        
+        super.init()
+        
+        configureMeetWindow()
+        configureMeetViewController()
+    }
+    
+    public func jitsiMeetView() -> JitsiMeetView {
+        return meetViewController.jitsiMeetView
+    }
+    
+    open func show(completion: CompletionAction? = nil) {
+        meetWindow.show(completion: completion)
+    }
+    
+    open func hide(completion: CompletionAction? = nil) {
+        meetWindow.hide(completion: completion)
+    }
+    
+    open func cleanUp() {
+        // TODO: more clean up work on this
+        
+        meetWindow.isHidden = true
+        meetWindow.stopDragGesture()
+    }
+    
+    deinit {
+        cleanUp()
+    }
+    
+    // MARK: - helpers
+    
+    private func configureMeetViewController() {
+        meetViewController.jitsiMeetView.pictureInPictureEnabled = true
+        meetViewController.delegate = self
+    }
+    
+    private func configureMeetWindow() {
+        meetWindow.backgroundColor = .clear
+        meetWindow.windowLevel = UIWindowLevelStatusBar + 100
+        meetWindow.rootViewController = self.meetViewController
+    }
+}
+
+extension JitsiMeetPresentationCoordinator: JitsiMeetViewControllerDelegate {
+    
+    open func performPresentationUpdate(to: JitsiMeetPresentationUpdate) {
+        switch to {
+        case .enterPictureInPicture:
+            meetWindow.enterPictureInPicture()
+        case .traitChange:
+            // resize to full screen if rotation happens
+            if meetWindow.isInPiP {
+                meetWindow.exitPictureInPicture()
+            }
+        }
+    }
+    
+    open func conferenceStarted() {
+        if meetWindow.isHidden {
+            meetWindow.show()
+        }
+    }
+    
+    open func conferenceEnded(didFail: Bool) {
+        cleanUp()
+    }
+}

ios/sdk/src/picture-in-picture/JitsiMeetViewController.swift

@@ -0,0 +1,107 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+public enum JitsiMeetPresentationUpdate {
+    
+    /// The conference wants to enter Picture-in-Picture
+    case enterPictureInPicture
+    
+    /// A system traitCollectionChange (usually screen rotation)
+    case traitChange
+}
+
+public protocol JitsiMeetViewControllerDelegate: class {
+    
+    /// Notifies a change of the conference presentation style.
+    ///
+    /// - Parameter to: The presentation state that will be changed to
+    func performPresentationUpdate(to: JitsiMeetPresentationUpdate)
+    
+    /// The conference started
+    func conferenceStarted()
+    
+    /// The conference ended
+    ///
+    /// - Parameter didFail: The reason of ending the conference
+    func conferenceEnded(didFail: Bool)
+}
+
+/// Wrapper ViewController of a JitsiMeetView
+///
+/// Is suggested to override this class and implement some customization
+/// on how to handle the JitsiMeetView delegate events
+open class JitsiMeetViewController: UIViewController {
+    
+    open weak var delegate: JitsiMeetViewControllerDelegate?
+    
+    private(set) var jitsiMeetView: JitsiMeetView = JitsiMeetView()
+    
+    override open func loadView() {
+        super.loadView()
+        self.view = jitsiMeetView
+    }
+    
+    open override func viewDidLoad() {
+        super.viewDidLoad()
+        
+        jitsiMeetView.delegate = self
+    }
+    
+    open override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
+        delegate?.performPresentationUpdate(to: .traitChange)
+    }
+}
+
+extension JitsiMeetViewController: JitsiMeetViewDelegate {
+    
+    open func conferenceWillJoin(_ data: [AnyHashable : Any]!) {
+        // do something
+    }
+    
+    open func conferenceJoined(_ data: [AnyHashable : Any]!) {
+        DispatchQueue.main.async {
+            self.delegate?.conferenceStarted()
+        }
+    }
+    
+    open func conferenceWillLeave(_ data: [AnyHashable : Any]!) {
+        // do something
+    }
+    
+    open func conferenceLeft(_ data: [AnyHashable : Any]!) {
+        DispatchQueue.main.async {
+            self.delegate?.conferenceEnded(didFail: false)
+        }
+    }
+    
+    open func conferenceFailed(_ data: [AnyHashable : Any]!) {
+        DispatchQueue.main.async {
+            self.delegate?.conferenceEnded(didFail: true)
+        }
+    }
+    
+    open func loadConfigError(_ data: [AnyHashable : Any]!) {
+        DispatchQueue.main.async {
+            self.delegate?.conferenceEnded(didFail: true)
+        }
+    }
+    
+    open func enterPicture(inPicture data: [AnyHashable : Any]!) {
+        DispatchQueue.main.async {
+           self.delegate?.performPresentationUpdate(to: .enterPictureInPicture)
+        }
+    }
+}

ios/sdk/src/picture-in-picture/PiPWindow.swift

@@ -0,0 +1,189 @@
+/*
+ * Copyright @ 2017-present Atlassian Pty Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/// Alias defining a completion closure that returns a Bool
+public typealias CompletionAction = (Bool) -> Void
+
+/// A window that allows its root view controller to be presented
+/// in full screen or in a custom Picture in Picture mode
+open class PiPWindow: UIWindow {
+    
+    /// Limits the boundries of root view position on screen when minimized
+    public var dragBoundInsets: UIEdgeInsets = UIEdgeInsets(top: 25,
+                                                            left: 5,
+                                                            bottom: 5,
+                                                            right: 5) {
+        didSet {
+            dragController.insets = dragBoundInsets
+        }
+    }
+    
+    /// The size ratio for root view controller view when in PiP mode
+    public var pipSizeRatio: CGFloat = 0.333
+    
+    /// The PiP state of this contents of the window
+    private(set) var isInPiP: Bool = false
+    
+    private let dragController: DragGestureController = DragGestureController()
+    
+    /// Used when in PiP mode to enable/disable exit PiP UI
+    private var tapGestureRecognizer: UITapGestureRecognizer?
+    private var exitPiPButton: UIButton?
+    
+    /// Help out to bubble up the gesture detection outside of the rootVC frame
+    open override func point(inside point: CGPoint,
+                             with event: UIEvent?) -> Bool {
+        guard let vc = rootViewController else {
+            return super.point(inside: point, with: event)
+        }
+        return vc.view.frame.contains(point)
+    }
+    
+    /// animate in the window
+    open func show(completion: CompletionAction? = nil) {
+        if self.isHidden || self.alpha < 1 {
+            self.isHidden = false
+            self.alpha = 0
+            
+            animateTransition(animations: {
+                self.alpha = 1
+            }, completion: completion)
+        }
+    }
+    
+    /// animate out the window
+    open func hide(completion: CompletionAction? = nil) {
+        if !self.isHidden || self.alpha > 0 {
+            animateTransition(animations: {
+                self.alpha = 1
+            }, completion: completion)
+        }
+    }
+    
+    /// Resize the root view to PiP mode
+    open func enterPictureInPicture() {
+        guard let view = rootViewController?.view else { return }
+        isInPiP = true
+        animateRootViewChange()
+        dragController.startDragListener(inView: view)
+        dragController.insets = dragBoundInsets
+        
+        // add single tap gesture recognition for displaying exit PiP UI
+        let exitSelector = #selector(toggleExitPiP)
+        let tapGestureRecognizer = UITapGestureRecognizer(target: self,
+                                                          action: exitSelector)
+        self.tapGestureRecognizer = tapGestureRecognizer
+        view.addGestureRecognizer(tapGestureRecognizer)
+    }
+    
+    /// Resize the root view to full screen
+    open func exitPictureInPicture() {
+        isInPiP = false
+        animateRootViewChange()
+        dragController.stopDragListener()
+        
+        // hide PiP UI
+        exitPiPButton?.removeFromSuperview()
+        exitPiPButton = nil
+        
+        // remove gesture
+        let exitSelector = #selector(toggleExitPiP)
+        tapGestureRecognizer?.removeTarget(self, action: exitSelector)
+        tapGestureRecognizer = nil
+    }
+    
+    /// Stop the dragging gesture of the root view
+    public func stopDragGesture() {
+        dragController.stopDragListener()
+    }
+    
+    /// Customize the presentation of exit pip button
+    open func configureExitPiPButton(target: Any,
+                                     action: Selector) -> UIButton {
+        let buttonImage = UIImage.init(named: "image-resize",
+                                       in: Bundle(for: type(of: self)),
+                                       compatibleWith: nil)
+        let button = UIButton(type: .custom)
+        let size: CGSize = CGSize(width: 44, height: 44)
+        button.setImage(buttonImage, for: .normal)
+        button.backgroundColor = .gray
+        button.layer.cornerRadius = size.width / 2
+        button.frame = CGRect(origin: CGPoint.zero, size: size)
+        if let view = rootViewController?.view {
+            button.center = view.convert(view.center, from:view.superview)
+        }
+        button.addTarget(target, action: action, for: .touchUpInside)
+        return button
+    }
+    
+    // MARK: - Manage presentation switching
+    
+    private func animateRootViewChange() {
+        UIView.animate(withDuration: 0.25) {
+            self.rootViewController?.view.frame = self.changeRootViewRect()
+            self.rootViewController?.view.setNeedsLayout()
+        }
+    }
+    
+    private func changeRootViewRect() -> CGRect {
+        guard isInPiP else {
+            return self.bounds
+        }
+        
+        // resize to suggested ratio and position to the bottom right
+        let adjustedBounds = UIEdgeInsetsInsetRect(self.bounds, dragBoundInsets)
+        let size = CGSize(width: bounds.size.width * pipSizeRatio,
+                          height: bounds.size.height * pipSizeRatio)
+        let x: CGFloat = adjustedBounds.maxX - size.width
+        let y: CGFloat = adjustedBounds.maxY - size.height
+        return CGRect(x: x, y: y, width: size.width, height: size.height)
+    }
+    
+    // MARK: - Exit PiP
+    
+    @objc private func toggleExitPiP() {
+        guard let view = rootViewController?.view else { return }
+        
+        if exitPiPButton == nil {
+            // show button
+            let exitSelector = #selector(exitPictureInPicture)
+            let button = configureExitPiPButton(target: self,
+                                                action: exitSelector)
+            view.addSubview(button)
+            exitPiPButton = button
+            
+        } else {
+            // hide button
+            exitPiPButton?.removeFromSuperview()
+            exitPiPButton = nil
+        }
+    }
+    
+    @objc private func exitPiP() {
+        exitPictureInPicture()
+    }
+    
+    // MARK: - Animation transition
+    
+    private func animateTransition(animations: @escaping () -> Void,
+                                   completion: CompletionAction?) {
+        UIView.animate(withDuration: 0.1,
+                       delay: 0,
+                       options: .beginFromCurrentState,
+                       animations: animations,
+                       completion: completion)
+    }
+}

lang/languages-hu.json

@@ -0,0 +1,20 @@
+{
+    "en": "",
+    "bg": "",
+    "de": "",
+    "es": "",
+    "fr": "",
+    "hy": "",
+    "it": "",
+    "oc": "",
+    "pl": "",
+    "ptBR": "",
+    "ru": "",
+    "sk": "",
+    "sl": "",
+    "sv": "",
+    "tr": "",
+    "zhCN": "",
+    "nb": "",
+    "eo": ""
+}

lang/main-hu.json

@@ -0,0 +1,502 @@
+{
+    "contactlist": "",
+    "contactlist_plural": "",
+    "passwordSetRemotely": "",
+    "poweredby": "",
+    "inviteUrlDefaultMsg": "",
+    "me": "",
+    "speaker": "",
+    "raisedHand": "",
+    "defaultNickname": "",
+    "defaultLink": "",
+    "audioDevices": {
+        "bluetooth": "",
+        "headphones": "",
+        "phone": "",
+        "speaker": ""
+    },
+    "audioOnly": {
+        "audioOnly": "",
+        "featureToggleDisabled": ""
+    },
+    "userMedia": {
+        "react-nativeGrantPermissions": "",
+        "chromeGrantPermissions": "",
+        "androidGrantPermissions": "",
+        "firefoxGrantPermissions": "",
+        "operaGrantPermissions": "",
+        "iexplorerGrantPermissions": "",
+        "safariGrantPermissions": "",
+        "nwjsGrantPermissions": "",
+        "edgeGrantPermissions": ""
+    },
+    "keyboardShortcuts": {
+        "keyboardShortcuts": "",
+        "raiseHand": "",
+        "pushToTalk": "",
+        "toggleScreensharing": "",
+        "toggleFilmstrip": "",
+        "toggleShortcuts": "",
+        "focusLocal": "",
+        "focusRemote": "",
+        "toggleChat": "",
+        "mute": "",
+        "fullScreen": "",
+        "videoMute": "",
+        "showSpeakerStats": ""
+    },
+    "welcomepage": {
+        "disable": "",
+        "feature1": {
+            "content": "",
+            "title": ""
+        },
+        "feature2": {
+            "content": "",
+            "title": ""
+        },
+        "feature3": {
+            "content": "",
+            "title": ""
+        },
+        "feature4": {
+            "content": "",
+            "title": ""
+        },
+        "feature5": {
+            "content": "",
+            "title": ""
+        },
+        "feature6": {
+            "content": "",
+            "title": ""
+        },
+        "feature7": {
+            "content": "",
+            "title": ""
+        },
+        "feature8": {
+            "content": "",
+            "title": ""
+        },
+        "go": "",
+        "join": "",
+        "privacy": "",
+        "roomname": "",
+        "roomnamePlaceHolder": "",
+        "sendFeedback": "",
+        "terms": ""
+    },
+    "startupoverlay": {
+        "policyText": "",
+        "title": ""
+    },
+    "suspendedoverlay": {
+        "title": "",
+        "text": "",
+        "rejoinKeyTitle": ""
+    },
+    "toolbar": {
+        "addPeople": "",
+        "audioonly": "",
+        "mute": "",
+        "videomute": "",
+        "authenticate": "",
+        "lock": "",
+        "invite": "",
+        "chat": "",
+        "etherpad": "",
+        "sharedvideo": "",
+        "sharescreen": "",
+        "fullscreen": "",
+        "sip": "",
+        "Settings": "",
+        "hangup": "",
+        "login": "",
+        "logout": "",
+        "dialpad": "",
+        "sharedVideoMutedPopup": "",
+        "micMutedPopup": "",
+        "talkWhileMutedPopup": "",
+        "unableToUnmutePopup": "",
+        "cameraDisabled": "",
+        "micDisabled": "",
+        "filmstrip": "",
+        "profile": "",
+        "raiseHand": ""
+    },
+    "unsupportedBrowser": {
+        "appNotInstalled": "",
+        "downloadApp": "",
+        "openApp": ""
+    },
+    "bottomtoolbar": {
+        "chat": "",
+        "filmstrip": "",
+        "contactlist": ""
+    },
+    "chat": {
+        "nickname": {
+            "title": "",
+            "popover": ""
+        },
+        "messagebox": ""
+    },
+    "settings": {
+        "title": "",
+        "update": "",
+        "name": "",
+        "startAudioMuted": "",
+        "startVideoMuted": "",
+        "selectCamera": "",
+        "selectMic": "",
+        "selectAudioOutput": "",
+        "followMe": "",
+        "noDevice": "",
+        "cameraAndMic": "",
+        "moderator": "",
+        "password": "",
+        "audioVideo": ""
+    },
+    "profile": {
+        "title": "",
+        "setDisplayNameLabel": "",
+        "setEmailLabel": "",
+        "setEmailInput": ""
+    },
+    "videothumbnail": {
+        "moderator": "",
+        "videomute": "",
+        "mute": "",
+        "kick": "",
+        "muted": "",
+        "domute": "",
+        "flip": "",
+        "remoteControl": ""
+    },
+    "connectionindicator": {
+        "header": "",
+        "bitrate": "",
+        "packetloss": "",
+        "resolution": "",
+        "framerate": "",
+        "less": "",
+        "more": "",
+        "address": "",
+        "remoteport": "",
+        "remoteport_plural": "",
+        "localport": "",
+        "localport_plural": "",
+        "localaddress": "",
+        "localaddress_plural": "",
+        "remoteaddress": "",
+        "remoteaddress_plural": "",
+        "transport": "",
+        "transport_plural": "",
+        "bandwidth": "",
+        "na": "",
+        "turn": "",
+        "quality": {
+            "good": "",
+            "inactive": "",
+            "lost": "",
+            "nonoptimal": "",
+            "poor": ""
+        },
+        "status": ""
+    },
+    "notify": {
+        "disconnected": "",
+        "moderator": "",
+        "connectedOneMember": "",
+        "connectedTwoMembers": "",
+        "connectedThreePlusMembers": "",
+        "somebody": "",
+        "me": "",
+        "focus": "",
+        "focusFail": "",
+        "grantedTo": "",
+        "grantedToUnknown": "",
+        "muted": "",
+        "mutedTitle": "",
+        "raisedHand": ""
+    },
+    "dialog": {
+        "add": "",
+        "allow": "",
+        "kickMessage": "",
+        "popupErrorTitle": "",
+        "popupError": "",
+        "passwordErrorTitle": "",
+        "passwordError": "",
+        "passwordError2": "",
+        "connectError": "",
+        "connectErrorWithMsg": "",
+        "incorrectPassword": "",
+        "connecting": "",
+        "copy": "",
+        "contactSupport": "",
+        "error": "",
+        "createPassword": "",
+        "detectext": "",
+        "failedpermissions": "",
+        "conferenceReloadTitle": "",
+        "conferenceReloadMsg": "",
+        "conferenceDisconnectTitle": "",
+        "conferenceDisconnectMsg": "",
+        "dismiss": "",
+        "rejoinNow": "",
+        "maxUsersLimitReachedTitle": "",
+        "maxUsersLimitReached": "",
+        "lockTitle": "",
+        "lockMessage": "",
+        "warning": "",
+        "passwordNotSupportedTitle": "",
+        "passwordNotSupported": "",
+        "internalErrorTitle": "",
+        "internalError": "",
+        "unableToSwitch": "",
+        "SLDFailure": "",
+        "SRDFailure": "",
+        "oops": "",
+        "currentPassword": "",
+        "passwordLabel": "",
+        "defaultError": "",
+        "passwordRequired": "",
+        "Ok": "",
+        "done": "",
+        "Remove": "",
+        "removePassword": "",
+        "shareVideoTitle": "",
+        "shareVideoLinkError": "",
+        "removeSharedVideoTitle": "",
+        "removeSharedVideoMsg": "",
+        "alreadySharedVideoMsg": "",
+        "alreadySharedVideoTitle": "",
+        "WaitingForHost": "",
+        "WaitForHostMsg": "",
+        "IamHost": "",
+        "Cancel": "",
+        "Submit": "",
+        "retry": "",
+        "logoutTitle": "",
+        "logoutQuestion": "",
+        "sessTerminated": "",
+        "hungUp": "",
+        "joinAgain": "",
+        "Share": "",
+        "Save": "",
+        "recording": "",
+        "recordingToken": "",
+        "passwordCheck": "",
+        "passwordMsg": "",
+        "shareLink": "",
+        "yourPassword": "",
+        "Back": "",
+        "serviceUnavailable": "",
+        "gracefulShutdown": "",
+        "Yes": "",
+        "reservationError": "",
+        "reservationErrorMsg": "",
+        "password": "",
+        "userPassword": "",
+        "token": "",
+        "tokenAuthFailedTitle": "",
+        "tokenAuthFailed": "",
+        "displayNameRequired": "",
+        "enterDisplayName": "",
+        "extensionRequired": "",
+        "firefoxExtensionPrompt": "",
+        "feedbackHelp": "",
+        "feedbackQuestion": "",
+        "thankYou": "",
+        "sorryFeedback": "",
+        "liveStreaming": "",
+        "streamKey": "",
+        "startLiveStreaming": "",
+        "stopStreamingWarning": "",
+        "stopRecordingWarning": "",
+        "stopLiveStreaming": "",
+        "stopRecording": "",
+        "doNotShowMessageAgain": "",
+        "permissionDenied": "",
+        "screenSharingFailedToInstall": "",
+        "screenSharingFailedToInstallTitle": "",
+        "screenSharingPermissionDeniedError": "",
+        "cameraUnsupportedResolutionError": "",
+        "cameraUnknownError": "",
+        "cameraPermissionDeniedError": "",
+        "cameraNotFoundError": "",
+        "cameraConstraintFailedError": "",
+        "micUnknownError": "",
+        "micPermissionDeniedError": "",
+        "micNotFoundError": "",
+        "micConstraintFailedError": "",
+        "micNotSendingDataTitle": "",
+        "micNotSendingData": "",
+        "cameraNotSendingDataTitle": "",
+        "cameraNotSendingData": "",
+        "goToStore": "",
+        "externalInstallationTitle": "",
+        "externalInstallationMsg": "",
+        "inlineInstallationMsg": "",
+        "inlineInstallExtension": "",
+        "muteParticipantTitle": "",
+        "muteParticipantBody": "",
+        "muteParticipantButton": "",
+        "remoteControlTitle": "",
+        "remoteControlRequestMessage": "",
+        "remoteControlShareScreenWarning": "",
+        "remoteControlDeniedMessage": "",
+        "remoteControlAllowedMessage": "",
+        "remoteControlErrorMessage": "",
+        "startRemoteControlErrorMessage": "",
+        "remoteControlStopMessage": "",
+        "close": "",
+        "shareYourScreen": "",
+        "yourEntireScreen": "",
+        "applicationWindow": ""
+    },
+    "email": {
+        "sharedKey": "",
+        "subject": "",
+        "body": "",
+        "and": ""
+    },
+    "connection": {
+        "ERROR": "",
+        "CONNECTING": "",
+        "RECONNECTING": "",
+        "CONNFAIL": "",
+        "AUTHENTICATING": "",
+        "AUTHFAIL": "",
+        "CONNECTED": "",
+        "DISCONNECTED": "",
+        "DISCONNECTING": "",
+        "ATTACHED": ""
+    },
+    "recording": {
+        "busy": "",
+        "busyTitle": "",
+        "buttonTooltip": "",
+        "error": "",
+        "failedToStart": "",
+        "off": "",
+        "on": "",
+        "pending": "",
+        "serviceName": "",
+        "unavailable": "",
+        "unavailableTitle": ""
+    },
+    "liveStreaming": {
+        "busy": "",
+        "busyTitle": "",
+        "buttonTooltip": "",
+        "error": "",
+        "failedToStart": "",
+        "off": "",
+        "on": "",
+        "pending": "",
+        "serviceName": "",
+        "streamIdRequired": "",
+        "streamIdHelp": "",
+        "unavailableTitle": ""
+    },
+    "videoSIPGW": {
+        "busy": "",
+        "busyTitle": "",
+        "errorInvite": "",
+        "errorInviteTitle": "",
+        "errorAlreadyInvited": "",
+        "errorInviteFailedTitle": "",
+        "errorInviteFailed": "",
+        "pending": "",
+        "serviceName": "",
+        "unavailableTitle": ""
+    },
+    "speakerStats": {
+        "hours": "",
+        "minutes": "",
+        "name": "",
+        "seconds": "",
+        "speakerStats": "",
+        "speakerTime": ""
+    },
+    "deviceSelection": {
+        "deviceSettings": "",
+        "noPermission": "",
+        "previewUnavailable": "",
+        "selectADevice": "",
+        "testAudio": ""
+    },
+    "invite": {
+        "addPassword": "",
+        "callNumber": "",
+        "enterID": "",
+        "howToDialIn": "",
+        "hidePassword": "",
+        "inviteTo": "",
+        "invitedYouTo": "",
+        "invitePeople": "",
+        "locked": "",
+        "showPassword": "",
+        "unlocked": ""
+    },
+    "videoStatus": {
+        "callQuality": "",
+        "hd": "",
+        "highDefinition": "",
+        "labelTooltipVideo": "",
+        "labelTooltipAudioOnly": "",
+        "ld": "",
+        "lowDefinition": "",
+        "onlyAudioAvailable": "",
+        "onlyAudioSupported": "",
+        "p2pEnabled": "",
+        "p2pVideoQualityDescription": "",
+        "recHighDefinitionOnly": "",
+        "sd": "",
+        "standardDefinition": "",
+        "qualityButtonTip": ""
+    },
+    "dialOut": {
+        "dial": "",
+        "dialOut": "",
+        "statusMessage": "",
+        "enterPhone": "",
+        "phoneNotAllowed": ""
+    },
+    "addPeople": {
+        "add": "",
+        "noResults": "",
+        "searchPlaceholder": "",
+        "title": "",
+        "failedToAdd": ""
+    },
+    "inlineDialogFailure": {
+        "msg": "",
+        "retry": "",
+        "support": "",
+        "supportMsg": ""
+    },
+    "deviceError": {
+        "cameraError": "",
+        "microphoneError": "",
+        "cameraPermission": "",
+        "microphonePermission": ""
+    },
+    "feedback": {
+        "average": "",
+        "bad": "",
+        "good": "",
+        "rateExperience": "",
+        "veryBad": "",
+        "veryGood": ""
+    },
+    "info": {
+        "copy": "",
+        "invite": "",
+        "title": "",
+        "tooltip": ""
+    }
+}

lang/main.json

@@ -51,6 +51,7 @@
             "audio": "Voice",
             "video": "Video"
         },
+        "calendar": "Calendar",
         "go": "GO",
         "join": "JOIN",
         "privacy": "Privacy",
@@ -277,15 +278,13 @@
         "tokenAuthFailed": "Sorry, you're not allowed to join this call.",
         "displayNameRequired": "Display name is required",
         "enterDisplayName": "Please enter your display name",
-        "extensionRequired": "Extension required:",
-        "firefoxExtensionPrompt": "You need to install a Firefox extension in order to use screen sharing. Please try again after you <a href='__url__'>get it from here</a>!",
         "feedbackHelp": "Your feedback will help us to improve our video experience.",
         "feedbackQuestion": "Tell us about your call!",
         "thankYou": "Thank you for using __appName__!",
         "sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",
         "liveStreaming": "Live Streaming",
-        "streamKey": "Stream name/key",
-        "startLiveStreaming": "Start live streaming",
+        "streamKey": "Live stream key",
+        "startLiveStreaming": "Go live now",
         "stopStreamingWarning": "Are you sure you would like to stop the live streaming?",
         "stopRecordingWarning": "Are you sure you would like to stop the recording?",
         "stopLiveStreaming": "Stop live streaming",
@@ -294,6 +293,8 @@
         "permissionDenied": "Permission Denied",
         "screenSharingFailedToInstall": "Oops! Your screen sharing extension failed to install.",
         "screenSharingFailedToInstallTitle": "Screen sharing extension failed to install",
+        "screenSharingFirefoxPermissionDeniedError": "Something went wrong while we were trying to share your screen. Please make sure that you have given us permission to do so. ",
+        "screenSharingFirefoxPermissionDeniedTitle": "Oops! We weren’t able to start screen sharing!",
         "screenSharingPermissionDeniedError": "Oops! Something went wrong with your screen sharing extension permissions. Please reload and try again.",
         "cameraUnsupportedResolutionError": "Your camera does not support required video resolution.",
         "cameraUnknownError": "Cannot use camera for an unknown reason.",
@@ -395,14 +396,21 @@
         "busy": "We're working on freeing streaming resources. Please try again in a few minutes.",
         "busyTitle": "All streamers are currently busy",
         "buttonTooltip": "Start / Stop Live Stream",
+        "changeSignIn": "Switch accounts.",
+        "choose": "Choose a live stream",
+        "chooseCTA": "Choose a streaming option. You're currently logged in as __email__.",
+        "enterStreamKey": "Enter your YouTube live stream key here.",
         "error": "Live Streaming failed. Please try again.",
+        "errorAPI": "An error occurred while accessing your YouTube broadcasts. Please try logging in again.",
         "failedToStart": "Live Streaming failed to start",
         "off": "Live Streaming stopped",
         "on": "Live Streaming",
         "pending": "Starting Live Stream...",
         "serviceName": "Live Streaming service",
-        "streamIdRequired": "Please fill in the stream id in order to launch the Live Streaming.",
-        "streamIdHelp": "Where do I find this?",
+        "signIn": "Sign in with Google",
+        "signInCTA": "Sign in or enter your live stream key from YouTube.",
+        "start": "Start a livestream",
+        "streamIdHelp": "What's this?",
         "unavailableTitle": "Live Streaming unavailable"
     },
     "videoSIPGW":
@@ -452,17 +460,24 @@
         "qualityButtonTip": "Change received video quality"
     },
     "dialOut": {
-        "dial": "Dial",
-        "dialOut": "Call a number",
-        "statusMessage": "is now __status__",
-        "enterPhone": "Enter phone number",
-        "phoneNotAllowed": "Oh, we don't support that destination yet! Sorry!"
+        "statusMessage": "is now __status__"
     },
     "addPeople": {
         "add": "Add",
+        "countryNotSupported": "We do not support this destination yet.",
+        "countryReminder": "Calling outside the US? Please make sure you start with the country code!",
+        "disabled": "You can't invite people.",
+        "invite": "Invite",
+        "loading": "Searching for people and phone numbers",
+        "loadingNumber": "Validating phone number",
+        "loadingPeople": "Searching for people to invite",
         "noResults": "No matching search results",
-        "searchPlaceholder": "Search for people and rooms to add",
-        "title": "Add people to your call",
+        "noValidNumbers": "Please enter a phone number",
+        "searchNumbers": "Enter a phone number to invite",
+        "searchPeople": "Enter a name to invite",
+        "searchPeopleAndNumbers": "Enter a name or phone number to invite",
+        "telephone": "Telephone: __number__",
+        "title": "Invite people to your meeting",
         "failedToAdd": "Failed to add members"
     },
     "inlineDialogFailure": {
@@ -495,11 +510,13 @@
         "dialInConferenceID": "PIN: __conferenceID__#",
         "dialInNotSupported": "Sorry, dialing in is currently not suppported.",
         "genericError": "Whoops, something went wrong.",
-        "invitePhone": "To join by phone, dial __number__ and enter this PIN: __pin__#",
+        "invitePhone": "To join by phone, dial __number__ and enter this PIN: __conferenceID__#",
         "invitePhoneAlternatives": "To view more phone numbers, click this link: __url__",
         "inviteURL": "To join the video meeting, click this link: __url__",
         "moreNumbers": "More numbers",
+        "noNumbers": "No dial-in numbers.",
         "noPassword": "None",
+        "noRoom": "No room was specified to dial-in into.",
         "numbers": "Dial-in Numbers",
         "password": "Password:",
         "title": "Call info",
@@ -517,5 +534,16 @@
         "serverURL": "Server URL",
         "startWithAudioMuted": "Start with audio muted",
         "startWithVideoMuted": "Start with video muted"
+    },
+    "calendarSync": {
+        "later": "Later",
+        "next": "Upcoming",
+        "nextMeeting": "next meeting",
+        "now": "Now"
+    },
+    "recentList": {
+        "today": "Today",
+        "yesterday": "Yesterday",
+        "earlier": "Earlier"
     }
 }

modules/UI/UI.js

@@ -503,11 +503,6 @@ UI.addUser = function(user) {
         APP.store.dispatch(showParticipantJoinedNotification(displayName));
     }
 
-    if (!config.startAudioMuted
-        || config.startAudioMuted > APP.conference.membersCount) {
-        UIUtil.playSoundNotification('userJoined');
-    }
-
     // Add Peer's container
     VideoLayout.addParticipantContainer(user);
 
@@ -529,11 +524,6 @@ UI.removeUser = function(id, displayName) {
     messageHandler.participantNotification(
         displayName, 'notify.somebody', 'disconnected', 'notify.disconnected');
 
-    if (!config.startAudioMuted
-            || config.startAudioMuted > APP.conference.membersCount) {
-        UIUtil.playSoundNotification('userLeft');
-    }
-
     VideoLayout.removeParticipantContainer(id);
 };
 
@@ -1049,16 +1039,6 @@ UI.getLargeVideo = function() {
  */
 UI.isPinned = userId => VideoLayout.getPinnedId() === userId;
 
-/**
- * Shows dialog with a link to FF extension.
- */
-UI.showExtensionRequiredDialog = function(url) {
-    messageHandler.openMessageDialog(
-        'dialog.extensionRequired',
-        '[html]dialog.firefoxExtensionPrompt',
-        { url });
-};
-
 /**
  * Shows "Please go to chrome webstore to install the desktop sharing extension"
  * 2 button dialog with buttons - cancel and go to web store.

modules/UI/recording/Recording.js

@@ -20,6 +20,7 @@ import UIEvents from '../../../service/UI/UIEvents';
 import UIUtil from '../util/UIUtil';
 import VideoLayout from '../videolayout/VideoLayout';
 
+import { openDialog } from '../../../react/features/base/dialog';
 import {
     JitsiRecordingStatus
 } from '../../../react/features/base/lib-jitsi-meet';
@@ -31,6 +32,8 @@ import {
 import { setToolboxEnabled } from '../../../react/features/toolbox';
 import { setNotificationsEnabled } from '../../../react/features/notifications';
 import {
+    StartLiveStreamDialog,
+    StopLiveStreamDialog,
     hideRecordingLabel,
     updateRecordingState
 } from '../../../react/features/recording';
@@ -102,91 +105,11 @@ function _isRecordingButtonEnabled() {
  * @returns {Promise}
  */
 function _requestLiveStreamId() {
-    const cancelButton
-        = APP.translation.generateTranslationHTML('dialog.Cancel');
-    const backButton = APP.translation.generateTranslationHTML('dialog.Back');
-    const startStreamingButton
-        = APP.translation.generateTranslationHTML('dialog.startLiveStreaming');
-    const streamIdRequired
-        = APP.translation.generateTranslationHTML(
-            'liveStreaming.streamIdRequired');
-    const streamIdHelp
-        = APP.translation.generateTranslationHTML(
-            'liveStreaming.streamIdHelp');
-
-    return new Promise((resolve, reject) => {
-        dialog = APP.UI.messageHandler.openDialogWithStates({
-            state0: {
-                titleKey: 'dialog.liveStreaming',
-                html:
-                    `<input  class="input-control"
-                    name="streamId" type="text"
-                    data-i18n="[placeholder]dialog.streamKey"
-                    autofocus><div style="text-align: right">
-                    <a class="helper-link" target="_new"
-                    href="${interfaceConfig.LIVE_STREAMING_HELP_LINK}">${
-    streamIdHelp
-}</a></div>`,
-                persistent: false,
-                buttons: [
-                    { title: cancelButton,
-                        value: false },
-                    { title: startStreamingButton,
-                        value: true }
-                ],
-                focus: ':input:first',
-                defaultButton: 1,
-                submit(e, v, m, f) { // eslint-disable-line max-params
-                    e.preventDefault();
-
-                    if (v) {
-                        if (f.streamId && f.streamId.length > 0) {
-                            resolve(UIUtil.escapeHtml(f.streamId));
-                            dialog.close();
-
-                            return;
-                        }
-                        dialog.goToState('state1');
-
-                        return false;
-
-                    }
-                    reject(APP.UI.messageHandler.CANCEL);
-                    dialog.close();
-
-                    return false;
-
-                }
-            },
-
-            state1: {
-                titleKey: 'dialog.liveStreaming',
-                html: streamIdRequired,
-                persistent: false,
-                buttons: [
-                    { title: cancelButton,
-                        value: false },
-                    { title: backButton,
-                        value: true }
-                ],
-                focus: ':input:first',
-                defaultButton: 1,
-                submit(e, v) {
-                    e.preventDefault();
-                    if (v === 0) {
-                        reject(APP.UI.messageHandler.CANCEL);
-                        dialog.close();
-                    } else {
-                        dialog.goToState('state0');
-                    }
-                }
-            }
-        }, {
-            close() {
-                dialog = null;
-            }
-        });
-    });
+    return new Promise((resolve, reject) =>
+        APP.store.dispatch(openDialog(StartLiveStreamDialog, {
+            onCancel: reject,
+            onSubmit: resolve
+        })));
 }
 
 /**
@@ -232,25 +155,20 @@ function _requestRecordingToken() {
  * @private
  */
 function _showStopRecordingPrompt(recordingType) {
-    let title;
-    let message;
-    let buttonKey;
-
     if (recordingType === 'jibri') {
-        title = 'dialog.liveStreaming';
-        message = 'dialog.stopStreamingWarning';
-        buttonKey = 'dialog.stopLiveStreaming';
-    } else {
-        title = 'dialog.recording';
-        message = 'dialog.stopRecordingWarning';
-        buttonKey = 'dialog.stopRecording';
+        return new Promise((resolve, reject) => {
+            APP.store.dispatch(openDialog(StopLiveStreamDialog, {
+                onCancel: reject,
+                onSubmit: resolve
+            }));
+        });
     }
 
     return new Promise((resolve, reject) => {
         dialog = APP.UI.messageHandler.openTwoButtonDialog({
-            titleKey: title,
-            msgKey: message,
-            leftButtonKey: buttonKey,
+            titleKey: 'dialog.recording',
+            msgKey: 'dialog.stopRecordingWarning',
+            leftButtonKey: 'dialog.stopRecording',
             submitFunction: (e, v) => (v ? resolve : reject)(),
             closeFunction: () => {
                 dialog = null;

modules/UI/side_pannels/chat/Chat.js

@@ -25,8 +25,6 @@ const htmlStr = `
         </div>
 
         <div id="chatconversation"></div>
-        <audio id="chatNotification" src="sounds/incomingMessage.wav"
-            preload="auto"></audio>
         <textarea id="usermsg" autofocus
             data-i18n="[placeholder]chat.messagebox"></textarea>
         <div id="smileysarea">
@@ -285,7 +283,6 @@ const Chat = {
 
             if (!Chat.isVisible()) {
                 unreadMessages++;
-                UIUtil.playSoundNotification('chatNotification');
                 updateVisualNotification();
             }
         }

modules/UI/util/UIUtil.js

@@ -66,15 +66,6 @@ const UIUtil = {
         return el.clientHeight + 1;
     },
 
-    /**
-     * Plays the sound given by id.
-     *
-     * @param id the identifier of the audio element.
-     */
-    playSoundNotification(id) {
-        document.getElementById(id).play();
-    },
-
     /**
      * Escapes the given text.
      */

modules/UI/videolayout/VideoContainer.js

@@ -687,7 +687,11 @@ export class VideoContainer extends LargeContainer {
      * @returns {void}
      */
     _updateBackground() {
-        if (browser.isFirefox() || browser.isTemasysPluginUsed()) {
+        // Do not the background display on browsers that might experience
+        // performance issues from the presence of the background.
+        if (browser.isFirefox()
+                || browser.isSafariWithWebrtc()
+                || browser.isTemasysPluginUsed()) {
             return;
         }
 

package.json

@@ -20,16 +20,18 @@
     "@atlaskit/dropdown-menu": "3.10.2",
     "@atlaskit/droplist": "4.11.1",
     "@atlaskit/field-text": "4.0.1",
+    "@atlaskit/field-text-area": "1.2.0",
     "@atlaskit/flag": "6.1.0",
     "@atlaskit/icon": "10.0.0",
     "@atlaskit/inline-dialog": "5.0.2",
     "@atlaskit/inline-message": "3.0.1",
+    "@atlaskit/layer-manager": "2.8.0",
     "@atlaskit/lozenge": "3.4.2",
-    "@atlaskit/modal-dialog": "2.6.0",
+    "@atlaskit/modal-dialog": "3.4.0",
     "@atlaskit/multi-select": "7.1.3",
     "@atlaskit/spinner": "4.0.0",
     "@atlaskit/tabs": "4.0.1",
-    "@atlaskit/theme": "2.2.0",
+    "@atlaskit/theme": "2.4.0",
     "@atlaskit/tooltip": "6.0.0",
     "autosize": "1.18.13",
     "es6-iterator": "2.0.3",
@@ -44,7 +46,7 @@
     "jquery-i18next": "1.2.0",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#d5389ace55686b96f1526c32fda26faf0d9a672f",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#0503ec4d3f175b154b1c6fd7037520ce0768fa58",
     "lodash": "4.17.4",
     "moment": "2.19.4",
     "nuclear-js": "1.4.0",
@@ -55,6 +57,7 @@
     "react-i18next": "4.8.0",
     "react-native": "0.51.0",
     "react-native-background-timer": "2.0.0",
+    "react-native-calendar-events": "1.4.3",
     "react-native-callstats": "3.27.0",
     "react-native-fetch-blob": "0.10.8",
     "react-native-img-cache": "1.5.2",
@@ -62,14 +65,15 @@
     "react-native-keep-awake": "2.0.6",
     "react-native-locale-detector": "github:jitsi/react-native-locale-detector#cc76092fc4335488a28a9529c8b50afae2c3ecdc",
     "react-native-prompt": "1.0.0",
+    "react-native-sound": "0.10.4",
     "react-native-vector-icons": "4.4.2",
-    "react-native-webrtc": "github:jitsi/react-native-webrtc#806435b41fa152a8239ebeb7d002d1c6e979be86",
+    "react-native-webrtc": "github:jitsi/react-native-webrtc#626818af40384356617f70366133317b6a475171",
     "react-redux": "5.0.6",
     "redux": "3.7.2",
     "redux-thunk": "2.2.0",
     "strophe.js": "github:jitsi/strophejs#1.2.14-1",
     "strophejs-plugin-disco": "0.0.2",
-    "styled-components": "1.3.0",
+    "styled-components": "1.4.6",
     "url-polyfill": "github:github/url-polyfill#39734186de44612bc5a16eb25f5407adcc5b2e7c",
     "uuid": "3.1.0",
     "xmldom": "0.1.27"
@@ -99,7 +103,7 @@
     "precommit-hook": "3.0.0",
     "string-replace-loader": "1.3.0",
     "style-loader": "0.19.0",
-    "uglifyjs-webpack-plugin": "1.1.2",
+    "uglifyjs-webpack-plugin": "1.2.2",
     "whatwg-fetch": "2.0.3",
     "webpack": "3.9.1",
     "webpack-dev-server": "2.9.5"

react/features/app/components/AbstractApp.js

@@ -15,6 +15,7 @@ import {
 import '../../base/profile';
 import { Fragment, RouteRegistry } from '../../base/react';
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
+import { SoundCollection } from '../../base/sounds';
 import { PersistenceRegistry } from '../../base/storage';
 import { toURLString } from '../../base/util';
 import { OverlayContainer } from '../../overlay';
@@ -274,6 +275,7 @@ export class AbstractApp extends Component {
                     <Provider store = { this._getStore() }>
                         <Fragment>
                             { this._createElement(component) }
+                            <SoundCollection />
                             <OverlayContainer />
                         </Fragment>
                     </Provider>
@@ -501,7 +503,7 @@ export class AbstractApp extends Component {
     /**
      * Navigates this {@code AbstractApp} to (i.e. opens) a specific URL.
      *
-     * @param {string|Object} url - The URL to navigate this {@code AbstractApp}
+     * @param {Object|string} url - The URL to navigate this {@code AbstractApp}
      * to (i.e. the URL to open).
      * @protected
      * @returns {void}

react/features/app/components/App.web.js

@@ -3,6 +3,7 @@ import React from 'react';
 
 import '../../base/responsive-ui';
 import { getLocationContextRoot } from '../../base/util';
+import '../../chat';
 import '../../room-lock';
 
 import { AbstractApp } from './AbstractApp';

react/features/base/config/actions.js

@@ -1,10 +1,13 @@
-/* @flow */
+// @flow
+
+import type { Dispatch } from 'redux';
 
 import {
     CONFIG_WILL_LOAD,
     LOAD_CONFIG_ERROR,
     SET_CONFIG
 } from './actionTypes';
+import { setConfigFromURLParams } from './functions';
 
 /**
  * Signals that the configuration for a specific locationURL will be loaded now.
@@ -51,14 +54,36 @@ export function loadConfigError(error: Error, locationURL: string | URL) {
  *
  * @param {Object} config - The configuration to be represented by the feature
  * base/config.
- * @returns {{
- *     type: SET_CONFIG,
- *     config: Object
- * }}
+ * @returns {Function}
  */
 export function setConfig(config: Object = {}) {
-    return {
-        type: SET_CONFIG,
-        config
+    return (dispatch: Dispatch<*>, getState: Function) => {
+        const { locationURL } = getState()['features/base/connection'];
+
+        // Now that the loading of the config was successful override the values
+        // with the parameters passed in the hash part of the location URI.
+        // TODO We're still in the middle ground between old Web with config,
+        // interfaceConfig, and loggingConfig used via global variables and new
+        // Web and mobile reading the respective values from the redux store.
+        // On React Native there's no interfaceConfig at all yet and
+        // loggingConfig is not loaded but there's a default value in the redux
+        // store.
+        // Only the config will be overridden on React Native, as the other
+        // globals will be undefined here. It's intentional - we do not care to
+        // override those configs yet.
+        locationURL
+            && setConfigFromURLParams(
+
+                // On Web the config also comes from the window.config global,
+                // but it is resolved in the loadConfig procedure.
+                config,
+                window.interfaceConfig,
+                window.loggingConfig,
+                locationURL);
+
+        dispatch({
+            type: SET_CONFIG,
+            config
+        });
     };
 }

react/features/base/config/functions.js

@@ -179,7 +179,7 @@ export function obtainConfig(
  * @returns {void}
  */
 export function overrideConfigJSON(
-        config: Object, interfaceConfig: Object, loggingConfig: Object,
+        config: ?Object, interfaceConfig: ?Object, loggingConfig: ?Object,
         json: Object) {
     for (const configName of Object.keys(json)) {
         let configObj;
@@ -212,6 +212,8 @@ export function overrideConfigJSON(
     }
 }
 
+/* eslint-enable max-params, no-shadow */
+
 /**
  * Whitelist only config.js, skips this for others configs
  * (interfaceConfig, loggingConfig).
@@ -220,9 +222,9 @@ export function overrideConfigJSON(
  * @param {string} configName - The config name, one of config,
  * interfaceConfig, loggingConfig.
  * @param {Object} configJSON - The object with keys and values to override.
+ * @private
  * @returns {Object} - The result object only with the keys
  * that are whitelisted.
- * @private
  */
 function _getWhitelistedJSON(configName, configJSON) {
     if (configName !== 'config') {
@@ -232,40 +234,48 @@ function _getWhitelistedJSON(configName, configJSON) {
     return _.pick(configJSON, WHITELISTED_KEYS);
 }
 
-/* eslint-enable max-params, no-shadow */
+/* eslint-disable max-params */
 
 /**
- * Converts 'URL_PARAMS' to JSON object.
- * We have:
- * {
- *      "config.disableAudioLevels": false,
- *      "config.channelLastN": -1,
- *      "interfaceConfig.APP_NAME": "Jitsi Meet"
- * }.
- * We want to have:
- * {
- *      "config": {
- *          "disableAudioLevels": false,
- *          "channelLastN": -1
- *      },
- *      interfaceConfig: {
- *          "APP_NAME": "Jitsi Meet"
- *      }
- * }.
+ * Inspects the hash part of the location URI and overrides values specified
+ * there in the corresponding config objects given as the arguments. The syntax
+ * is: {@code https://server.com/room#config.debug=true
+ * &interfaceConfig.showButton=false&loggingConfig.something=1}.
  *
+ * In the hash part each parameter will be parsed to JSON and then the root
+ * object will be matched with the corresponding config object given as the
+ * argument to this function.
+ *
+ * @param {Object} config - This is the general config.
+ * @param {Object} interfaceConfig - This is the interface config.
+ * @param {Object} loggingConfig - The logging config.
+ * @param {URI} location - The new location to which the app is navigating to.
  * @returns {void}
  */
-export function setConfigFromURLParams() {
-    const params = parseURLParams(window.location);
-
-    const { config, interfaceConfig, loggingConfig } = window;
+export function setConfigFromURLParams(
+        config: ?Object,
+        interfaceConfig: ?Object,
+        loggingConfig: ?Object,
+        location: Object) {
+    const params = parseURLParams(location);
     const json = {};
 
-    // TODO We're still in the middle ground between old Web with config,
-    // interfaceConfig, and loggingConfig used via global variables and new Web
-    // and mobile reading the respective values from the redux store. On React
-    // Native there's no interfaceConfig at all yet and loggingConfig is not
-    // loaded but there's a default value in the redux store.
+    // At this point we have:
+    // params = {
+    //     "config.disableAudioLevels": false,
+    //     "config.channelLastN": -1,
+    //     "interfaceConfig.APP_NAME": "Jitsi Meet"
+    // }
+    // We want to have:
+    // json = {
+    //     config: {
+    //         "disableAudioLevels": false,
+    //         "channelLastN": -1
+    //     },
+    //     interfaceConfig: {
+    //         "APP_NAME": "Jitsi Meet"
+    //     }
+    // }
     config && (json.config = {});
     interfaceConfig && (json.interfaceConfig = {});
     loggingConfig && (json.loggingConfig = {});
@@ -284,3 +294,5 @@ export function setConfigFromURLParams() {
 
     overrideConfigJSON(config, interfaceConfig, loggingConfig, json);
 }
+
+/* eslint-enable max-params */

react/features/base/config/index.js

@@ -2,4 +2,5 @@ export * from './actions';
 export * from './actionTypes';
 export * from './functions';
 
+import './middleware';
 import './reducer';

react/features/base/config/middleware.js

@@ -0,0 +1,52 @@
+// @flow
+
+import { MiddlewareRegistry } from '../redux';
+
+import { SET_CONFIG } from './actionTypes';
+
+/**
+ * The middleware of the feature {@code base/config}.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    switch (action.type) {
+    case SET_CONFIG:
+        return _setConfig(store, next, action);
+    }
+
+    return next(action);
+});
+
+/**
+ * Notifies the feature {@code base/config} that the {@link SET_CONFIG} redux
+ * action is being {@code dispatch}ed in a specific redux store.
+ *
+ * @param {Store} store - The redux store in which the specified {@code action}
+ * is being dispatched.
+ * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the
+ * specified {@code action} in the specified {@code store}.
+ * @param {Action} action - The redux action which is being {@code dispatch}ed
+ * in the specified {@code store}.
+ * @private
+ * @returns {*} The return value of {@code next(action)}.
+ */
+function _setConfig({ getState }, next, action) {
+    // The reducer is doing some alterations to the config passed in the action,
+    // so make sure it's the final state by waiting for the action to be
+    // reduced.
+    const result = next(action);
+
+    // FIXME On Web we rely on the global 'config' variable which gets altered
+    // multiple times, before it makes it to the reducer. At some point it may
+    // not be the global variable which is being modified anymore due to
+    // different merge methods being used along the way. The global variable
+    // must be synchronized with the final state resolved by the reducer.
+    if (typeof window.config !== 'undefined') {
+        window.config = getState()['features/base/config'];
+    }
+
+    return result;
+}

react/features/base/config/reducer.js

@@ -157,7 +157,7 @@ function _translateLegacyConfig(oldValue: Object) {
 
     /* eslint-enable indent */
 
-        if (oldKey in newValue) {
+        if (oldKey in newValue && !(newKey in newValue.p2p)) {
             const v = newValue[oldKey];
 
             // Do not modify oldValue.

react/features/base/dialog/components/StatelessDialog.web.js

@@ -1,9 +1,10 @@
 // @flow
 
 import Button, { ButtonGroup } from '@atlaskit/button';
-import ModalDialog from '@atlaskit/modal-dialog';
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
+import { withContextFromProps } from '@atlaskit/layer-manager';
+import Modal, { ModalFooter } from '@atlaskit/modal-dialog';
 import _ from 'lodash';
+import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
 import { translate } from '../../i18n';
@@ -30,6 +31,8 @@ const OK_BUTTON_ID = 'modal-dialog-ok-button';
 type Props = {
     ...DialogProps,
 
+    i18n: Object,
+
     /**
      * Disables dismissing the dialog when the blanket is clicked. Enabled
      * by default.
@@ -57,10 +60,26 @@ type Props = {
     width: string
 };
 
+/**
+ * ContexTypes is used as a workaround for Atlaskit's modal being displayed
+ * outside of the normal App hierarchy, thereby losing context. ContextType
+ * is responsible for taking its props and passing them into children.
+ *
+ * @type {ReactElement}
+ */
+const ContextProvider = withContextFromProps({
+    i18n: PropTypes.object
+});
+
 /**
  * Web dialog that uses atlaskit modal-dialog to display dialogs.
  */
 class StatelessDialog extends Component<Props> {
+    /**
+     * The functional component to be used for rendering the modal footer.
+     */
+    _Footer: ?Function
+
     _dialogElement: ?HTMLElement;
 
     /**
@@ -78,30 +97,24 @@ class StatelessDialog extends Component<Props> {
         this._onKeyDown = this._onKeyDown.bind(this);
         this._onSubmit = this._onSubmit.bind(this);
         this._setDialogElement = this._setDialogElement.bind(this);
+
+        this._Footer = this._createFooterConstructor(props);
     }
 
     /**
-     * React Component method that executes once component is mounted.
+     * React Component method that executes before the component is updated.
      *
      * @inheritdoc
-     */
-    componentDidMount() {
-        this._updateButtonFocus();
-    }
-
-    /**
-     * React Component method that executes once component is updated.
-     *
-     * @param {Object} prevProps - The previous properties, before the update.
+     * @param {Object} nextProps - The next properties, before the update.
      * @returns {void}
      */
-    componentDidUpdate(prevProps) {
-        // if there is an update in any of the buttons enable/disable props
-        // update the focus if needed
-        if (prevProps.okDisabled !== this.props.okDisabled
-                || prevProps.cancelDisabled !== this.props.cancelDisabled
-                || prevProps.submitDisabled !== this.props.submitDisabled) {
-            this._updateButtonFocus();
+    componentWillUpdate(nextProps) {
+        // If button states have changed, update the Footer constructor function
+        // so buttons of the proper state are rendered.
+        if (nextProps.okDisabled !== this.props.okDisabled
+                || nextProps.cancelDisabled !== this.props.cancelDisabled
+                || nextProps.submitDisabled !== this.props.submitDisabled) {
+            this._Footer = this._createFooterConstructor(nextProps);
         }
     }
 
@@ -112,36 +125,86 @@ class StatelessDialog extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        return (
+        const {
+            children,
+            t /* The following fixes a flow error: */ = _.identity,
+            titleString,
+            titleKey,
+            width
+        } = this.props;
 
-            /**
-             * Enabled light theme for dialogs until all in-dialog components
-             * support dark theme.
-             */
-            <AtlasKitThemeProvider mode = 'light'>
-                <div
-                    onKeyDown = { this._onKeyDown }
-                    ref = { this._setDialogElement }>
-                    <ModalDialog
-                        footer = { this._renderFooter() }
-                        header = { this._renderHeader() }
-                        isOpen = { true }
-                        onDialogDismissed = { this._onDialogDismissed }
-                        width = { this.props.width || 'medium' }>
-                        <div>
-                            <form
-                                className = 'modal-dialog-form'
-                                id = 'modal-dialog-form'
-                                onSubmit = { this._onSubmit }>
-                                { this.props.children }
-                            </form>
-                        </div>
-                    </ModalDialog>
-                </div>
-            </AtlasKitThemeProvider>
+        return (
+            <Modal
+                autoFocus = { true }
+                footer = { this._Footer }
+                heading = { titleString || t(titleKey) }
+                i18n = { this.props.i18n }
+                onClose = { this._onDialogDismissed }
+                onDialogDismissed = { this._onDialogDismissed }
+                shouldCloseOnEscapePress = { true }
+                width = { width || 'medium' }>
+                {
+
+                    /**
+                     * Wrapping the contents of {@link Modal} with
+                     * {@link ContextProvider} is a workaround for the
+                     * i18n context becoming undefined as modal gets rendered
+                     * outside of the normal react app context.
+                     */
+                }
+                <ContextProvider i18n = { this.props.i18n }>
+                    <div
+                        onKeyDown = { this._onKeyDown }
+                        ref = { this._setDialogElement }>
+                        <form
+                            className = 'modal-dialog-form'
+                            id = 'modal-dialog-form'
+                            onSubmit = { this._onSubmit }>
+                            { children }
+                        </form>
+                    </div>
+                </ContextProvider>
+            </Modal>
         );
     }
 
+    _onCancel: () => Function;
+
+    /**
+     * Returns a functional component to be used for the modal footer.
+     *
+     * @param {Object} options - The configuration for how the buttons in the
+     * footer should display. Essentially {@code StatelessDialog} props should
+     * be passed in.
+     * @private
+     * @returns {ReactElement}
+     */
+    _createFooterConstructor(options) {
+        // Filter out falsy (null) values because {@code ButtonGroup} will error
+        // if passed in anything but buttons with valid type props.
+        const buttons = [
+            this._renderOKButton(options),
+            this._renderCancelButton(options)
+        ].filter(Boolean);
+
+        return function Footer(modalFooterProps) {
+            return (
+                <ModalFooter showKeyline = { modalFooterProps.showKeyline } >
+                    {
+
+                        /**
+                         * Atlaskit has this empty span (JustifySim) so...
+                         */
+                    }
+                    <span />
+                    <ButtonGroup>
+                        { buttons }
+                    </ButtonGroup>
+                </ModalFooter>
+            );
+        };
+    }
+
     _onCancel: () => void;
 
     /**
@@ -188,11 +251,19 @@ class StatelessDialog extends Component<Props> {
     /**
      * Renders Cancel button.
      *
+     * @param {Object} options - The configuration for the Cancel button.
+     * @param {boolean} options.cancelDisabled - True if the cancel button
+     * should not be rendered.
+     * @param {string} options.cancelTitleKey - The translation key to use as
+     * text on the button.
+     * @param {boolean} options.isModal - True if the cancel button should not
+     * be rendered.
      * @private
-     * @returns {*} The Cancel button if enabled and dialog is not modal.
+     * @returns {ReactElement|null} The Cancel button if enabled and dialog is
+     * not modal.
      */
-    _renderCancelButton() {
-        if (this.props.cancelDisabled || this.props.isModal) {
+    _renderCancelButton(options = {}) {
+        if (options.cancelDisabled || options.isModal) {
             return null;
         }
 
@@ -207,62 +278,26 @@ class StatelessDialog extends Component<Props> {
                 key = 'cancel'
                 onClick = { this._onCancel }
                 type = 'button'>
-                { t(this.props.cancelTitleKey || 'dialog.Cancel') }
+                { t(options.cancelTitleKey || 'dialog.Cancel') }
             </Button>
         );
     }
 
-    /**
-     * Renders component in dialog footer.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderFooter() {
-        // Filter out falsy (null) values because {@code ButtonGroup} will error
-        // if passed in anything but buttons with valid type props.
-        const buttons = [
-            this._renderCancelButton(),
-            this._renderOKButton()
-        ].filter(Boolean);
-
-        return (
-            <footer className = 'modal-dialog-footer'>
-                <ButtonGroup>
-                    { buttons }
-                </ButtonGroup>
-            </footer>
-        );
-    }
-
-    /**
-     * Renders component in dialog header.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderHeader() {
-        const {
-            t /* The following fixes a flow error: */ = _.identity
-        } = this.props;
-
-        return (
-            <header>
-                <h3>
-                    { this.props.titleString || t(this.props.titleKey) }
-                </h3>
-            </header>
-        );
-    }
-
     /**
      * Renders OK button.
      *
+     * @param {Object} options - The configuration for the OK button.
+     * @param {boolean} options.okDisabled - True if the button should display
+     * as disabled and clicking should have no effect.
+     * @param {string} options.okTitleKey - The translation key to use as text
+     * on the button.
+     * @param {boolean} options.submitDisabled - True if the button should not
+     * be rendered.
      * @private
-     * @returns {*} The OK button if enabled.
+     * @returns {ReactElement|null} The OK button if enabled.
      */
-    _renderOKButton() {
-        if (this.props.submitDisabled) {
+    _renderOKButton(options = {}) {
+        if (options.submitDisabled) {
             return null;
         }
 
@@ -275,11 +310,11 @@ class StatelessDialog extends Component<Props> {
                 appearance = 'primary'
                 form = 'modal-dialog-form'
                 id = { OK_BUTTON_ID }
-                isDisabled = { this.props.okDisabled }
+                isDisabled = { options.okDisabled }
                 key = 'submit'
                 onClick = { this._onSubmit }
                 type = 'button'>
-                { t(this.props.okTitleKey || 'dialog.Ok') }
+                { t(options.okTitleKey || 'dialog.Ok') }
             </Button>
         );
     }
@@ -327,40 +362,6 @@ class StatelessDialog extends Component<Props> {
             }
         }
     }
-
-    /**
-     * Updates focused button, if we have a reference to the dialog element.
-     * Focus on available button if there is no focus already.
-     *
-     * @private
-     * @returns {void}
-     */
-    _updateButtonFocus() {
-        const dialogElement = this._dialogElement;
-
-        if (dialogElement) {
-
-            // if we have a focused element inside the dialog, skip changing
-            // the focus
-            if (dialogElement.contains(document.activeElement)) {
-                return;
-            }
-
-            let buttonToFocus;
-
-            if (this.props.submitDisabled) {
-                buttonToFocus
-                    = dialogElement.querySelector(`[id=${CANCEL_BUTTON_ID}]`);
-            } else if (!this.props.okDisabled) {
-                buttonToFocus
-                    = dialogElement.querySelector(`[id=${OK_BUTTON_ID}]`);
-            }
-
-            if (buttonToFocus) {
-                buttonToFocus.focus();
-            }
-        }
-    }
 }
 
 export default translate(StatelessDialog);

react/features/base/font-icons/jitsi.json

@@ -1,6 +1,60 @@
 {
   "IcoMoonType": "selection",
   "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M512 342h64v180l150 90-32 52-182-110v-212zM554 128c212 0 384 172 384 384s-172 384-384 384c-106 0-200-42-270-112l60-62c54 54 128 88 210 88 166 0 300-132 300-298s-134-298-300-298-298 132-298 298h128l-172 172-4-6-166-166h128c0-212 172-384 384-384z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "restore"
+        ],
+        "defaultCode": 59571,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "history, restore",
+        "id": 385,
+        "order": 930,
+        "prevSize": 24,
+        "code": 59571,
+        "name": "restore"
+      },
+      "setIdx": 0,
+      "setId": 2,
+      "iconIdx": 385
+    },
+    {
+      "icon": {
+        "paths": [
+          "M426 256l256 256-256 256-60-60 196-196-196-196z"
+        ],
+        "attrs": [],
+        "isMulticolor": false,
+        "isMulticolor2": false,
+        "tags": [
+          "navigate_next"
+        ],
+        "defaultCode": 58377,
+        "grid": 24
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "chevron_right, navigate_next",
+        "id": 153,
+        "order": 927,
+        "prevSize": 24,
+        "code": 58377,
+        "name": "navigate_next"
+      },
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 0
+    },
     {
       "icon": {
         "paths": [
@@ -24,9 +78,9 @@
         "code": 58834,
         "name": "menu"
       },
-      "setIdx": 0,
-      "setId": 2,
-      "iconIdx": 489
+      "setIdx": 1,
+      "setId": 1,
+      "iconIdx": 1
     },
     {
       "icon": {
@@ -53,7 +107,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 0
+      "iconIdx": 2
     },
     {
       "icon": {
@@ -80,7 +134,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 1
+      "iconIdx": 3
     },
     {
       "icon": {
@@ -107,7 +161,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 2
+      "iconIdx": 4
     },
     {
       "icon": {
@@ -134,7 +188,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 3
+      "iconIdx": 5
     },
     {
       "icon": {
@@ -154,14 +208,14 @@
       "properties": {
         "ligatures": "timer",
         "id": 760,
-        "order": 916,
+        "order": 928,
         "prevSize": 24,
         "code": 58405,
         "name": "timer"
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 4
+      "iconIdx": 6
     },
     {
       "icon": {
@@ -188,7 +242,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 5
+      "iconIdx": 7
     },
     {
       "icon": {
@@ -215,7 +269,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 6
+      "iconIdx": 8
     },
     {
       "icon": {
@@ -242,7 +296,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 7
+      "iconIdx": 9
     },
     {
       "icon": {
@@ -269,7 +323,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 8
+      "iconIdx": 10
     },
     {
       "icon": {
@@ -298,7 +352,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 9
+      "iconIdx": 11
     },
     {
       "icon": {
@@ -325,7 +379,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 10
+      "iconIdx": 12
     },
     {
       "icon": {
@@ -352,7 +406,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 11
+      "iconIdx": 13
     },
     {
       "icon": {
@@ -381,7 +435,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 12
+      "iconIdx": 14
     },
     {
       "icon": {
@@ -410,7 +464,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 13
+      "iconIdx": 15
     },
     {
       "icon": {
@@ -439,7 +493,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 14
+      "iconIdx": 16
     },
     {
       "icon": {
@@ -468,7 +522,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 15
+      "iconIdx": 17
     },
     {
       "icon": {
@@ -497,7 +551,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 16
+      "iconIdx": 18
     },
     {
       "icon": {
@@ -523,7 +577,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 17
+      "iconIdx": 19
     },
     {
       "icon": {
@@ -549,7 +603,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 18
+      "iconIdx": 20
     },
     {
       "icon": {
@@ -575,7 +629,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 19
+      "iconIdx": 21
     },
     {
       "icon": {
@@ -601,7 +655,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 20
+      "iconIdx": 22
     },
     {
       "icon": {
@@ -627,7 +681,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 21
+      "iconIdx": 23
     },
     {
       "icon": {
@@ -653,7 +707,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 22
+      "iconIdx": 24
     },
     {
       "icon": {
@@ -679,7 +733,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 23
+      "iconIdx": 25
     },
     {
       "icon": {
@@ -705,7 +759,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 24
+      "iconIdx": 26
     },
     {
       "icon": {
@@ -731,7 +785,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 25
+      "iconIdx": 27
     },
     {
       "icon": {
@@ -757,7 +811,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 26
+      "iconIdx": 28
     },
     {
       "icon": {
@@ -783,7 +837,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 27
+      "iconIdx": 29
     },
     {
       "icon": {
@@ -809,7 +863,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 28
+      "iconIdx": 30
     },
     {
       "icon": {
@@ -835,7 +889,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 29
+      "iconIdx": 31
     },
     {
       "icon": {
@@ -861,7 +915,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 30
+      "iconIdx": 32
     },
     {
       "icon": {
@@ -887,7 +941,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 31
+      "iconIdx": 33
     },
     {
       "icon": {
@@ -913,7 +967,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 32
+      "iconIdx": 34
     },
     {
       "icon": {
@@ -939,7 +993,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 33
+      "iconIdx": 35
     },
     {
       "icon": {
@@ -965,7 +1019,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 34
+      "iconIdx": 36
     },
     {
       "icon": {
@@ -991,7 +1045,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 35
+      "iconIdx": 37
     },
     {
       "icon": {
@@ -1017,7 +1071,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 36
+      "iconIdx": 38
     },
     {
       "icon": {
@@ -1043,7 +1097,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 37
+      "iconIdx": 39
     },
     {
       "icon": {
@@ -1069,7 +1123,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 38
+      "iconIdx": 40
     },
     {
       "icon": {
@@ -1095,7 +1149,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 39
+      "iconIdx": 41
     },
     {
       "icon": {
@@ -1121,7 +1175,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 40
+      "iconIdx": 42
     },
     {
       "icon": {
@@ -1147,7 +1201,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 41
+      "iconIdx": 43
     },
     {
       "icon": {
@@ -1173,7 +1227,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 42
+      "iconIdx": 44
     },
     {
       "icon": {
@@ -1199,7 +1253,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 43
+      "iconIdx": 45
     },
     {
       "icon": {
@@ -1225,7 +1279,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 44
+      "iconIdx": 46
     },
     {
       "icon": {
@@ -1251,7 +1305,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 45
+      "iconIdx": 47
     },
     {
       "icon": {
@@ -1280,7 +1334,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 46
+      "iconIdx": 48
     },
     {
       "icon": {
@@ -1310,7 +1364,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 47
+      "iconIdx": 49
     },
     {
       "icon": {
@@ -1340,7 +1394,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 48
+      "iconIdx": 50
     },
     {
       "icon": {
@@ -1366,7 +1420,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 49
+      "iconIdx": 51
     },
     {
       "icon": {
@@ -1392,7 +1446,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 50
+      "iconIdx": 52
     },
     {
       "icon": {
@@ -1418,7 +1472,7 @@
       },
       "setIdx": 1,
       "setId": 1,
-      "iconIdx": 51
+      "iconIdx": 53
     }
   ],
   "height": 1024,

react/features/base/i18n/dateUtil.js

@@ -0,0 +1,82 @@
+// @flow
+
+import moment from 'moment';
+
+import i18next from './i18next';
+
+// MomentJS uses static language bundle loading, so in order to support dynamic
+// language selection in the app we need to load all bundles that we support in
+// the app.
+require('moment/locale/bg');
+require('moment/locale/de');
+require('moment/locale/eo');
+require('moment/locale/es');
+require('moment/locale/fr');
+require('moment/locale/hy-am');
+require('moment/locale/it');
+require('moment/locale/nb');
+
+// OC is not available. Please submit OC translation to the MomentJS project.
+
+require('moment/locale/pl');
+require('moment/locale/pt');
+require('moment/locale/pt-br');
+require('moment/locale/ru');
+require('moment/locale/sk');
+require('moment/locale/sl');
+require('moment/locale/sv');
+require('moment/locale/tr');
+require('moment/locale/zh-cn');
+
+/**
+ * Returns a localized date formatter initialized with a specific {@code Date}
+ * or timestamp ({@code number}).
+ *
+ * @private
+ * @param {Date | number} dateOrTimeStamp - The date or unix timestamp (ms)
+ * to format.
+ * @returns {Object}
+ */
+export function getLocalizedDateFormatter(dateOrTimeStamp: Date | number) {
+    return moment(dateOrTimeStamp).locale(_getSupportedLocale());
+}
+
+/**
+ * Returns a localized duration formatter initialized with a
+ * specific duration ({@code number}).
+ *
+ * @private
+ * @param {number} duration - The duration (ms)
+ * to format.
+ * @returns {Object}
+ */
+export function getLocalizedDurationFormatter(duration: number) {
+    return moment.duration(duration).locale(_getSupportedLocale());
+}
+
+/**
+ * A lenient locale matcher to match language and dialect if possible.
+ *
+ * @private
+ * @returns {string}
+ */
+function _getSupportedLocale() {
+    const i18nLocale = i18next.language;
+    let supportedLocale;
+
+    if (i18nLocale) {
+        const localeRegexp = new RegExp('^([a-z]{2,2})(-)*([a-z]{2,2})*$');
+        const localeResult = localeRegexp.exec(i18nLocale.toLowerCase());
+
+        if (localeResult) {
+            const currentLocaleRegexp
+                = new RegExp(
+                    `^${localeResult[1]}(-)*${`(${localeResult[3]})*` || ''}`);
+
+            supportedLocale
+                = moment.locales().find(lang => currentLocaleRegexp.exec(lang));
+        }
+    }
+
+    return supportedLocale || 'en';
+}

react/features/base/i18n/index.js

@@ -1,4 +1,4 @@
-
+export * from './dateUtil';
 export * from './functions';
 
 // TODO Eventually (e.g. when the non-React Web app is rewritten into React), it

react/features/base/jwt/components/CalleeInfo.js

@@ -254,7 +254,7 @@ class CalleeInfo extends Component<Props, State> {
         if (this.state.renderAudio && this.state.ringing) {
             return (
                 <Audio
-                    ref = { this._setAudio }
+                    setRef = { this._setAudio }
                     src = './sounds/ring.ogg' />
             );
         }

react/features/base/lib-jitsi-meet/functions.js

@@ -1,6 +1,5 @@
 // @flow
 
-import { setConfigFromURLParams } from '../config';
 import { toState } from '../redux';
 import { loadScript } from '../util';
 
@@ -12,7 +11,7 @@ const JitsiConferenceErrors = JitsiMeetJS.errors.conference;
 const JitsiConnectionErrors = JitsiMeetJS.errors.connection;
 
 /**
- * Creates a JitsiLocalTrack model from the given device id.
+ * Creates a {@link JitsiLocalTrack} model from the given device id.
  *
  * @param {string} type - The media type of track being created. Expected values
  * are "video" or "audio".
@@ -107,9 +106,9 @@ export function isFatalJitsiConnectionError(error: Object | string) {
  * Loads config.js from a specific remote server.
  *
  * @param {string} url - The URL to load.
- * @param {number} [timeout] - The timeout for the configuration to be loaded,
- * in milliseconds. If not specified, a default value deamed appropriate for the
- * purpsoe is used.
+ * @param {number} [timeout] - The timeout in milliseconds for the {@code url}
+ * to load. If not specified, a default value deemed appropriate for the purpose
+ * is used.
  * @returns {Promise<Object>}
  */
 export function loadConfig(
@@ -145,14 +144,5 @@ export function loadConfig(
         promise = Promise.resolve(window.config);
     }
 
-    // FIXME It's neither here nor there at the time of this writing where
-    // config, interfaceConfig, and loggingConfig should be overwritten by URL
-    // params.
-    promise = promise.then(value => {
-        setConfigFromURLParams();
-
-        return value;
-    });
-
     return promise;
 }

react/features/base/lib-jitsi-meet/native/RTCPeerConnection.js

@@ -161,7 +161,6 @@ function _makePromiseAware(
         afterCallbacks: number) {
     return function(...args) {
         return new Promise((resolve, reject) => {
-
             if (args.length <= beforeCallbacks + afterCallbacks) {
                 args.splice(beforeCallbacks, 0, resolve, reject);
             }

react/features/base/media/components/AbstractAudio.js

@@ -1,116 +1,121 @@
 // @flow
 
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import { Component } from 'react';
+
+/**
+ * Describes audio element interface used in the base/media feature for audio
+ * playback.
+ */
+export type AudioElement = {
+    pause: () => void,
+    play: () => void,
+    setSinkId?: string => void
+};
+
+/**
+ * {@code AbstractAudio} component's property types.
+ */
+type Props = {
+
+    /**
+     * A callback which will be called with {@code AbstractAudio} instance once
+     * the audio element is loaded.
+     */
+    setRef?: ?AudioElement => void,
+
+    /**
+     * The URL of a media resource to use in the element.
+     *
+     * NOTE on react-native sound files are imported through 'require' and then
+     * passed as the 'src' parameter which means their type will be 'any'.
+     *
+     * @type {Object | string}
+     */
+    src: Object | string,
+    stream: Object
+}
 
 /**
  * The React {@link Component} which is similar to Web's
  * {@code HTMLAudioElement}.
  */
-export default class AbstractAudio extends Component<*> {
+export default class AbstractAudio extends Component<Props> {
     /**
-     * The (reference to the) {@link ReactElement} which actually implements
-     * this {@code AbstractAudio}.
+     * The {@link AudioElement} instance which implements the audio playback
+     * functionality.
      */
-    _ref: ?Object;
-
-    _setRef: Function;
-
-    /**
-     * {@code AbstractAudio} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * The URL of a media resource to use in the element.
-         *
-         * @type {string}
-         */
-        src: PropTypes.string,
-        stream: PropTypes.object
-    };
+    _audioElementImpl: ?AudioElement;
 
     /**
      * Initializes a new {@code AbstractAudio} instance.
      *
-     * @param {Object} props - The read-only properties with which the new
+     * @param {Props} props - The read-only properties with which the new
      * instance is to be initialized.
      */
-    constructor(props: Object) {
+    constructor(props: Props) {
         super(props);
 
-        // Bind event handlers so they are only bound once for every instance.
-        this._setRef = this._setRef.bind(this);
+        // Bind event handlers so they are only bound once per instance.
+        this.setAudioElementImpl = this.setAudioElementImpl.bind(this);
     }
 
+    pause: () => void;
+
     /**
      * Attempts to pause the playback of the media.
      *
      * @public
      * @returns {void}
      */
-    pause() {
-        this._ref && typeof this._ref.pause === 'function' && this._ref.pause();
+    pause(): void {
+        this._audioElementImpl && this._audioElementImpl.pause();
     }
 
+    play: () => void;
+
     /**
      * Attempts to being the playback of the media.
      *
      * @public
      * @returns {void}
      */
-    play() {
-        this._ref && typeof this._ref.play === 'function' && this._ref.play();
+    play(): void {
+        this._audioElementImpl && this._audioElementImpl.play();
     }
 
+    setAudioElementImpl: ?AudioElement => void;
+
     /**
-     * Renders this {@code AbstractAudio} as a React {@link Component} of a
-     * specific type.
+     * Set the (reference to the) {@link AudioElement} object which implements
+     * the audio playback functionality.
      *
-     * @param {string|ReactClass} type - The type of the React {@code Component}
-     * which is to be rendered.
-     * @param {Object|undefined} props - The read-only React {@code Component}
-     * properties, if any, to render. If {@code undefined}, the props of this
-     * instance will be rendered.
+     * @param {AudioElement} element - The {@link AudioElement} instance
+     * which implements the audio playback functionality.
      * @protected
-     * @returns {ReactElement}
-     */
-    _render(type, props) {
-        const {
-            children,
-
-            /* eslint-disable no-unused-vars */
-
-            // The following properties are consumed by React itself so they are
-            // to not be propagated.
-            ref,
-
-            /* eslint-enable no-unused-vars */
-
-            ...filteredProps
-        } = props || this.props;
-
-        return (
-            React.createElement(
-                type,
-                {
-                    ...filteredProps,
-                    ref: this._setRef
-                },
-                children));
-    }
-
-    /**
-     * Set the (reference to the) {@link ReactElement} which actually implements
-     * this {@code AbstractAudio}.
-     *
-     * @param {Object} ref - The (reference to the) {@code ReactElement} which
-     * actually implements this {@code AbstractAudio}.
-     * @private
      * @returns {void}
      */
-    _setRef(ref) {
-        this._ref = ref;
+    setAudioElementImpl(element: ?AudioElement): void {
+        this._audioElementImpl = element;
+
+        // setRef
+        const { setRef } = this.props;
+
+        // $FlowFixMe
+        typeof setRef === 'function' && setRef(element ? this : null);
+    }
+
+    setSinkId: string => void;
+
+    /**
+     * Sets the sink ID (output device ID) on the underlying audio element.
+     * NOTE: Currently, implemented only on Web.
+     *
+     * @param {string} sinkId - The sink ID (output device ID).
+     * @returns {void}
+     */
+    setSinkId(sinkId: string): void {
+        this._audioElementImpl
+            && typeof this._audioElementImpl.setSinkId === 'function'
+            && this._audioElementImpl.setSinkId(sinkId);
     }
 }

react/features/base/media/components/native/Audio.js

@@ -1,19 +1,66 @@
 /* @flow */
 
+import Sound from 'react-native-sound';
+
 import AbstractAudio from '../AbstractAudio';
 
+const logger = require('jitsi-meet-logger').getLogger(__filename);
+
 /**
  * The React Native/mobile {@link Component} which is similar to Web's
  * {@code HTMLAudioElement} and wraps around react-native-webrtc's
  * {@link RTCView}.
  */
 export default class Audio extends AbstractAudio {
+
     /**
-     * {@code Audio} component's property types.
-     *
-     * @static
+     * Reference to 'react-native-sound} {@link Sound} instance.
      */
-    static propTypes = AbstractAudio.propTypes;
+    _sound: Sound
+
+    /**
+     * A callback passed to the 'react-native-sound''s {@link Sound} instance,
+     * called when loading sound is finished.
+     *
+     * @param {Object} error - The error object passed by
+     * the 'react-native-sound' library.
+     * @returns {void}
+     * @private
+     */
+    _soundLoadedCallback(error) {
+        if (error) {
+            logger.error('Failed to load sound', error);
+        } else {
+            this.setAudioElementImpl(this._sound);
+        }
+    }
+
+    /**
+     * Will load the sound, after the component did mount.
+     *
+     * @returns {void}
+     */
+    componentDidMount() {
+        this._sound
+            = this.props.src
+                ? new Sound(
+                    this.props.src,
+                    this._soundLoadedCallback.bind(this))
+                : null;
+    }
+
+    /**
+     * Will dispose sound resources (if any) when component is about to unmount.
+     *
+     * @returns {void}
+     */
+    componentWillUnmount() {
+        if (this._sound) {
+            this.setAudioElementImpl(null);
+            this._sound.release();
+            this._sound = null;
+        }
+    }
 
     /**
      * Implements React's {@link Component#render()}.

react/features/base/media/components/web/Audio.js

@@ -1,6 +1,9 @@
-/* @flow */
+// @flow
+
+import React from 'react';
 
 import AbstractAudio from '../AbstractAudio';
+import type { AudioElement } from '../AbstractAudio';
 
 /**
  * The React/Web {@link Component} which is similar to and wraps around
@@ -8,11 +11,28 @@ import AbstractAudio from '../AbstractAudio';
  */
 export default class Audio extends AbstractAudio {
     /**
-     * {@code Audio} component's property types.
-     *
-     * @static
+     * Set to <code>true</code> when the whole file is loaded.
      */
-    static propTypes = AbstractAudio.propTypes;
+    _audioFileLoaded: boolean;
+
+    /**
+     * Reference to the HTML audio element, stored until the file is ready.
+     */
+    _ref: ?AudioElement;
+
+    /**
+     * Creates new <code>Audio</code> element instance with given props.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: Object) {
+        super(props);
+
+        // Bind event handlers so they are only bound once for every instance.
+        this._onCanPlayThrough = this._onCanPlayThrough.bind(this);
+        this._setRef = this._setRef.bind(this);
+    }
 
     /**
      * Implements React's {@link Component#render()}.
@@ -21,6 +41,67 @@ export default class Audio extends AbstractAudio {
      * @returns {ReactElement}
      */
     render() {
-        return super._render('audio');
+        return (
+            <audio
+                onCanPlayThrough = { this._onCanPlayThrough }
+                preload = 'auto'
+
+                // $FlowFixMe
+                ref = { this._setRef }
+                src = { this.props.src } />
+        );
+    }
+
+    /**
+     * If audio element reference has been set and the file has been
+     * loaded then {@link setAudioElementImpl} will be called to eventually add
+     * the audio to the Redux store.
+     *
+     * @private
+     * @returns {void}
+     */
+    _maybeSetAudioElementImpl() {
+        if (this._ref && this._audioFileLoaded) {
+            this.setAudioElementImpl(this._ref);
+        }
+    }
+
+    _onCanPlayThrough: () => void;
+
+    /**
+     * Called when 'canplaythrough' event is triggered on the audio element,
+     * which means that the whole file has been loaded.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onCanPlayThrough() {
+        this._audioFileLoaded = true;
+        this._maybeSetAudioElementImpl();
+    }
+
+    _setRef: (?AudioElement) => void;
+
+    /**
+     * Sets the reference to the HTML audio element.
+     *
+     * @param {HTMLAudioElement} audioElement - The HTML audio element instance.
+     * @private
+     * @returns {void}
+     */
+    _setRef(audioElement: ?AudioElement) {
+        this._ref = audioElement;
+
+        if (audioElement) {
+            this._maybeSetAudioElementImpl();
+        } else {
+            // AbstractAudioElement is supposed to trigger "removeAudio" only if
+            // it was previously added, so it's safe to just call it.
+            this.setAudioElementImpl(null);
+
+            // Reset the loaded flag, as the audio element is being removed from
+            // the DOM tree.
+            this._audioFileLoaded = false;
+        }
     }
 }

react/features/base/participants/constants.js

@@ -28,6 +28,20 @@ export const LOCAL_PARTICIPANT_DEFAULT_ID = 'local';
  */
 export const MAX_DISPLAY_NAME_LENGTH = 50;
 
+/**
+ * The identifier of the sound to be played when new remote participant joins
+ * the room.
+ * @type {string}
+ */
+export const PARTICIPANT_JOINED_SOUND_ID = 'PARTICIPANT_JOINED_SOUND';
+
+/**
+ * The identifier of the sound to be played when remote participant leaves
+ * the room.
+ * @type {string}
+ */
+export const PARTICIPANT_LEFT_SOUND_ID = 'PARTICIPANT_LEFT_SOUND';
+
 /**
  * The set of possible XMPP MUC roles for conference participants.
  *

react/features/base/participants/middleware.js

@@ -2,11 +2,13 @@
 
 import UIEvents from '../../../../service/UI/UIEvents';
 
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../../app';
 import {
     CONFERENCE_JOINED,
     CONFERENCE_LEFT
 } from '../conference';
 import { MiddlewareRegistry } from '../redux';
+import { playSound, registerSound, unregisterSound } from '../sounds';
 
 import { localParticipantIdChanged } from './actions';
 import {
@@ -14,13 +16,23 @@ import {
     MUTE_REMOTE_PARTICIPANT,
     PARTICIPANT_DISPLAY_NAME_CHANGED,
     PARTICIPANT_JOINED,
+    PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED
 } from './actionTypes';
-import { LOCAL_PARTICIPANT_DEFAULT_ID } from './constants';
+import {
+    LOCAL_PARTICIPANT_DEFAULT_ID,
+    PARTICIPANT_JOINED_SOUND_ID,
+    PARTICIPANT_LEFT_SOUND_ID
+} from './constants';
 import {
     getAvatarURLByParticipantId,
-    getLocalParticipant
+    getLocalParticipant,
+    getParticipantCount
 } from './functions';
+import {
+    PARTICIPANT_JOINED_SRC,
+    PARTICIPANT_LEFT_SRC
+} from './sounds';
 
 declare var APP: Object;
 
@@ -34,7 +46,18 @@ declare var APP: Object;
 MiddlewareRegistry.register(store => next => action => {
     const { conference } = store.getState()['features/base/conference'];
 
+    if (action.type === PARTICIPANT_JOINED
+        || action.type === PARTICIPANT_LEFT) {
+        _maybePlaySounds(store, action);
+    }
+
     switch (action.type) {
+    case APP_WILL_MOUNT:
+        _registerSounds(store);
+        break;
+    case APP_WILL_UNMOUNT:
+        _unregisterSounds(store);
+        break;
     case CONFERENCE_JOINED:
         store.dispatch(localParticipantIdChanged(action.conference.myUserId()));
         break;
@@ -100,3 +123,59 @@ MiddlewareRegistry.register(store => next => action => {
 
     return next(action);
 });
+
+/**
+ * Plays sounds when participants join/leave conference.
+ *
+ * @param {Store} store - The Redux store.
+ * @param {Action} action - The Redux action. Should be either
+ * {@link PARTICIPANT_JOINED} or {@link PARTICIPANT_LEFT}.
+ * @private
+ * @returns {void}
+ */
+function _maybePlaySounds({ getState, dispatch }, action) {
+    const state = getState();
+    const { startAudioMuted } = state['features/base/config'];
+
+    // We're not playing sounds for local participant
+    // nor when the user is joining past the "startAudioMuted" limit.
+    // The intention there was to not play user joined notification in big
+    // conferences where 100th person is joining.
+    if (!action.participant.local
+        && (!startAudioMuted
+            || getParticipantCount(state) < startAudioMuted)) {
+        if (action.type === PARTICIPANT_JOINED) {
+            dispatch(playSound(PARTICIPANT_JOINED_SOUND_ID));
+        } else if (action.type === PARTICIPANT_LEFT) {
+            dispatch(playSound(PARTICIPANT_LEFT_SOUND_ID));
+        }
+    }
+}
+
+/**
+ * Registers sounds related with the participants feature.
+ *
+ * @param {Store} store - The Redux store.
+ * @private
+ * @returns {void}
+ */
+function _registerSounds({ dispatch }) {
+    dispatch(
+        registerSound(PARTICIPANT_JOINED_SOUND_ID, PARTICIPANT_JOINED_SRC));
+    dispatch(
+        registerSound(PARTICIPANT_LEFT_SOUND_ID, PARTICIPANT_LEFT_SRC));
+}
+
+/**
+ * Unregisters sounds related with the participants feature.
+ *
+ * @param {Store} store - The Redux store.
+ * @private
+ * @returns {void}
+ */
+function _unregisterSounds({ dispatch }) {
+    dispatch(
+        unregisterSound(PARTICIPANT_JOINED_SOUND_ID, PARTICIPANT_JOINED_SRC));
+    dispatch(
+        unregisterSound(PARTICIPANT_LEFT_SOUND_ID, PARTICIPANT_LEFT_SRC));
+}

react/features/base/participants/sounds.native.js

@@ -0,0 +1,13 @@
+/**
+ * Points to the sound file which will be played when new participant joins
+ * the conference.
+ */
+export const PARTICIPANT_JOINED_SRC
+    = require('../../../../sounds/joined.wav');
+
+/**
+ * Points to the sound file which will be played when any participant leaves
+ * the conference.
+ */
+export const PARTICIPANT_LEFT_SRC
+    = require('../../../../sounds/left.wav');

react/features/base/participants/sounds.web.js

@@ -0,0 +1,11 @@
+/**
+ * Points to the sound file which will be played when new participant joins
+ * the conference.
+ */
+export const PARTICIPANT_JOINED_SRC = 'sounds/joined.wav';
+
+/**
+ * Points to the sound file which will be played when any participant leaves
+ * the conference.
+ */
+export const PARTICIPANT_LEFT_SRC = 'sounds/left.wav';

react/features/base/react/components/native/NavigateSectionList.js

@@ -0,0 +1,295 @@
+// @flow
+import React, { Component } from 'react';
+import {
+    SafeAreaView,
+    SectionList,
+    Text,
+    TouchableHighlight,
+    View
+} from 'react-native';
+
+import styles, { UNDERLAY_COLOR } from './styles';
+
+type Props = {
+
+    /**
+     * Indicates if the list is disabled or not.
+     */
+    disabled: boolean,
+
+    /**
+     * Function to be invoked when an item is pressed. The item's URL is passed.
+     */
+    onPress: Function,
+
+    /**
+     * Function to be invoked when pull-to-refresh is performed.
+     */
+    onRefresh: Function,
+
+    /**
+     * Sections to be rendered in the following format:
+     *
+     * [
+     *   {
+     *     title: string,               <- section title
+     *     key: string,                 <- unique key for the section
+     *     data: [                      <- Array of items in the section
+     *       {
+     *         colorBase: string,       <- the color base of the avatar
+     *         title: string,           <- item title
+     *         url: string,             <- item url
+     *         lines: Array<string>     <- additional lines to be rendered
+     *       }
+     *     ]
+     *   }
+     * ]
+     */
+    sections: Array<Object>
+}
+
+/**
+ * Implements a general section list to display items that have a URL
+ * property and navigates to (probably) meetings, such as the recent list
+ * or the meeting list components.
+ */
+export default class NavigateSectionList extends Component<Props> {
+    /**
+     * Constructor of the NavigateSectionList component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: Props) {
+        super(props);
+
+        this._getAvatarColor = this._getAvatarColor.bind(this);
+        this._getItemKey = this._getItemKey.bind(this);
+        this._onPress = this._onPress.bind(this);
+        this._onRefresh = this._onRefresh.bind(this);
+        this._renderItem = this._renderItem.bind(this);
+        this._renderItemLine = this._renderItemLine.bind(this);
+        this._renderItemLines = this._renderItemLines.bind(this);
+        this._renderSection = this._renderSection.bind(this);
+    }
+
+    /**
+     * Implements React's Component.render function.
+     * Note: we don't use the refreshing value yet, because refreshing of these
+     * lists is super quick, no need to complicate the code - yet.
+     *
+     * @inheritdoc
+     */
+    render() {
+        const { sections } = this.props;
+
+        return (
+            <SafeAreaView
+                style = { styles.container } >
+                <SectionList
+                    keyExtractor = { this._getItemKey }
+                    onRefresh = { this._onRefresh }
+                    refreshing = { false }
+                    renderItem = { this._renderItem }
+                    renderSectionHeader = { this._renderSection }
+                    sections = { sections }
+                    style = { styles.list } />
+            </SafeAreaView>
+        );
+    }
+
+    /**
+     * Creates an empty section object.
+     *
+     * @private
+     * @param {string} title - The title of the section.
+     * @param {string} key - The key of the section. It must be unique.
+     * @returns {Object}
+     */
+    static createSection(title, key) {
+        return {
+            data: [],
+            key,
+            title
+        };
+    }
+
+    _getAvatarColor: string => Object
+
+    /**
+     * Returns a style (color) based on the string that determines the
+     * color of the avatar.
+     *
+     * @param {string} colorBase - The string that is the base of the color.
+     * @private
+     * @returns {Object}
+     */
+    _getAvatarColor(colorBase) {
+        if (!colorBase) {
+            return null;
+        }
+
+        let nameHash = 0;
+
+        for (let i = 0; i < colorBase.length; i++) {
+            nameHash += colorBase.codePointAt(i);
+        }
+
+        return styles[`avatarColor${(nameHash % 5) + 1}`];
+    }
+
+    _getItemKey: (Object, number) => string;
+
+    /**
+     * Generates a unique id to every item.
+     *
+     * @private
+     * @param {Object} item - The item.
+     * @param {number} index - The item index.
+     * @returns {string}
+     */
+    _getItemKey(item, index) {
+        return `${index}-${item.key}`;
+    }
+
+    _onPress: string => Function
+
+    /**
+     * Returns a function that is used in the onPress callback of the items.
+     *
+     * @private
+     * @param {string} url - The URL of the item to navigate to.
+     * @returns {Function}
+     */
+    _onPress(url) {
+        return () => {
+            const { disabled, onPress } = this.props;
+
+            !disabled && url && typeof onPress === 'function' && onPress(url);
+        };
+    }
+
+    _onRefresh: () => void
+
+    /**
+     * Invokes the onRefresh callback if present.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onRefresh() {
+        const { onRefresh } = this.props;
+
+        if (typeof onRefresh === 'function') {
+            onRefresh();
+        }
+    }
+
+    _renderItem: Object => Object;
+
+    /**
+     * Renders a single item in the list.
+     *
+     * @private
+     * @param {Object} listItem - The item to render.
+     * @returns {Component}
+     */
+    _renderItem(listItem) {
+        const { item } = listItem;
+
+        return (
+            <TouchableHighlight
+                onPress = { this._onPress(item.url) }
+                underlayColor = { UNDERLAY_COLOR }>
+                <View style = { styles.listItem }>
+                    <View style = { styles.avatarContainer } >
+                        <View
+                            style = { [
+                                styles.avatar,
+                                this._getAvatarColor(item.colorBase)
+                            ] } >
+                            <Text style = { styles.avatarContent }>
+                                { item.title.substr(0, 1).toUpperCase() }
+                            </Text>
+                        </View>
+                    </View>
+                    <View style = { styles.listItemDetails }>
+                        <Text
+                            numberOfLines = { 1 }
+                            style = { [
+                                styles.listItemText,
+                                styles.listItemTitle
+                            ] }>
+                            { item.title }
+                        </Text>
+                        {
+                            this._renderItemLines(item.lines)
+                        }
+                    </View>
+                </View>
+            </TouchableHighlight>
+        );
+    }
+
+    _renderItemLine: (string, number) => React$Node;
+
+    /**
+     * Renders a single line from the additional lines.
+     *
+     * @private
+     * @param {string} line - The line text.
+     * @param {number} index - The index of the line.
+     * @returns {React$Node}
+     */
+    _renderItemLine(line, index) {
+        if (!line) {
+            return null;
+        }
+
+        return (
+            <Text
+                key = { index }
+                numberOfLines = { 1 }
+                style = { styles.listItemText }>
+                { line }
+            </Text>
+        );
+    }
+
+    _renderItemLines: (Array<string>) => Array<React$Node>;
+
+    /**
+     * Renders the additional item lines, if any.
+     *
+     * @private
+     * @param {Array<string>} lines - The lines to render.
+     * @returns {Array<React$Node>}
+     */
+    _renderItemLines(lines) {
+        if (lines && lines.length) {
+            return lines.map((line, index) =>
+                this._renderItemLine(line, index)
+            );
+        }
+
+        return null;
+    }
+
+    _renderSection: Object => Object
+
+    /**
+     * Renders a section title.
+     *
+     * @private
+     * @param {Object} section - The section being rendered.
+     * @returns {React$Node}
+     */
+    _renderSection(section) {
+        return (
+            <View style = { styles.listSection }>
+                <Text style = { styles.listSectionText }>
+                    { section.section.title }
+                </Text>
+            </View>
+        );
+    }
+}

react/features/base/react/components/native/index.js

@@ -1,5 +1,6 @@
 export { default as Container } from './Container';
 export { default as Header } from './Header';
+export { default as NavigateSectionList } from './NavigateSectionList';
 export { default as Link } from './Link';
 export { default as LoadingIndicator } from './LoadingIndicator';
 export { default as SideBar } from './SideBar';

react/features/base/react/components/native/styles.js

@@ -4,20 +4,20 @@ import {
     createStyleSheet
 } from '../../../styles';
 
+const AVATAR_OPACITY = 0.4;
+const AVATAR_SIZE = 65;
 const HEADER_COLOR = ColorPalette.blue;
 
 // Header height is from iOS guidelines. Also, this looks good.
 const HEADER_HEIGHT = 44;
+const OVERLAY_FONT_COLOR = 'rgba(255, 255, 255, 0.6)';
 
 export const HEADER_PADDING = BoxModel.padding;
 export const STATUSBAR_COLOR = ColorPalette.blueHighlight;
 export const SIDEBAR_WIDTH = 250;
+export const UNDERLAY_COLOR = 'rgba(255, 255, 255, 0.2)';
 
-/**
- * The styles of the generic React {@code Components} of the app.
- */
-export default createStyleSheet({
-
+const HEADER_STYLES = {
     /**
      * Platform specific header button (e.g. back, menu...etc).
      */
@@ -68,8 +68,124 @@ export default createStyleSheet({
         height: HEADER_HEIGHT,
         justifyContent: 'flex-start',
         padding: HEADER_PADDING
+    }
+};
+
+const SECTION_LIST_STYLES = {
+    /**
+     * The style of the actual avatar.
+     */
+    avatar: {
+        alignItems: 'center',
+        backgroundColor: `rgba(23, 160, 219, ${AVATAR_OPACITY})`,
+        borderRadius: AVATAR_SIZE,
+        height: AVATAR_SIZE,
+        justifyContent: 'center',
+        width: AVATAR_SIZE
     },
 
+    /**
+     * List of styles of the avatar of a remote meeting (not the default
+     * server). The number of colors are limited because they should match
+     * nicely.
+     */
+    avatarColor1: {
+        backgroundColor: `rgba(232, 105, 156, ${AVATAR_OPACITY})`
+    },
+
+    avatarColor2: {
+        backgroundColor: `rgba(255, 198, 115, ${AVATAR_OPACITY})`
+    },
+
+    avatarColor3: {
+        backgroundColor: `rgba(128, 128, 255, ${AVATAR_OPACITY})`
+    },
+
+    avatarColor4: {
+        backgroundColor: `rgba(105, 232, 194, ${AVATAR_OPACITY})`
+    },
+
+    avatarColor5: {
+        backgroundColor: `rgba(234, 255, 128, ${AVATAR_OPACITY})`
+    },
+
+    /**
+     * The style of the avatar container that makes the avatar rounded.
+     */
+    avatarContainer: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        padding: 5
+    },
+
+    /**
+     * Simple {@code Text} content of the avatar (the actual initials).
+     */
+    avatarContent: {
+        backgroundColor: 'rgba(0, 0, 0, 0)',
+        color: OVERLAY_FONT_COLOR,
+        fontSize: 32,
+        fontWeight: '100',
+        textAlign: 'center'
+    },
+
+    /**
+     * The top level container style of the list.
+     */
+    container: {
+        flex: 1
+    },
+
+    list: {
+        flex: 1,
+        flexDirection: 'column'
+    },
+
+    listItem: {
+        alignItems: 'center',
+        flex: 1,
+        flexDirection: 'row',
+        paddingVertical: 5
+    },
+
+    listItemDetails: {
+        flex: 1,
+        flexDirection: 'column',
+        overflow: 'hidden',
+        paddingHorizontal: 5
+    },
+
+    listItemText: {
+        color: OVERLAY_FONT_COLOR,
+        fontSize: 14
+    },
+
+    listItemTitle: {
+        fontWeight: 'bold',
+        fontSize: 16
+    },
+
+    listSection: {
+        alignItems: 'center',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        flex: 1,
+        flexDirection: 'row',
+        padding: 5
+    },
+
+    listSectionText: {
+        color: OVERLAY_FONT_COLOR,
+        fontSize: 14,
+        fontWeight: 'normal'
+    },
+
+    touchableView: {
+        flexDirection: 'row'
+    }
+};
+
+const SIDEBAR_STYLES = {
     /**
      * The topmost container of the side bar.
      */
@@ -105,4 +221,14 @@ export default createStyleSheet({
     sideMenuShadowTouchable: {
         flex: 1
     }
+};
+
+/**
+ * The styles of the React {@code Components} of the generic components
+ * in the app.
+ */
+export default createStyleSheet({
+    ...HEADER_STYLES,
+    ...SECTION_LIST_STYLES,
+    ...SIDEBAR_STYLES
 });

react/features/base/react/components/web/MultiSelectAutocomplete.js

@@ -1,6 +1,5 @@
 import { MultiSelectStateless } from '@atlaskit/multi-select';
 import AKInlineDialog from '@atlaskit/inline-dialog';
-import Spinner from '@atlaskit/spinner';
 import _debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -28,11 +27,22 @@ class MultiSelectAutocomplete extends Component {
          */
         isDisabled: PropTypes.bool,
 
+        /**
+         * Text to display while a query is executing.
+         */
+        loadingMessage: PropTypes.string,
+
         /**
          * The text to show when no matches are found.
          */
         noMatchesFound: PropTypes.string,
 
+        /**
+         * The function called immediately before a selection has been actually
+         * selected. Provides an opportunity to do any formatting.
+         */
+        onItemSelected: PropTypes.func,
+
         /**
          * The function called when the selection changes.
          */
@@ -113,14 +123,14 @@ class MultiSelectAutocomplete extends Component {
     }
 
     /**
-     * Clears the selected items.
+     * Sets the items to display as selected.
      *
+     * @param {Array<Object>} selectedItems - The list of items to display as
+     * having been selected.
      * @returns {void}
      */
-    clear() {
-        this.setState({
-            selectedItems: []
-        });
+    setSelectedItems(selectedItems = []) {
+        this.setState({ selectedItems });
     }
 
     /**
@@ -140,8 +150,10 @@ class MultiSelectAutocomplete extends Component {
                 <MultiSelectStateless
                     filterValue = { this.state.filterValue }
                     isDisabled = { isDisabled }
+                    isLoading = { this.state.loading }
                     isOpen = { this.state.isOpen }
                     items = { this.state.items }
+                    loadingMessage = { this.props.loadingMessage }
                     noMatchesFound = { noMatchesFound }
                     onFilterChange = { this._onFilterChange }
                     onRemoved = { this._onSelectionChange }
@@ -150,7 +162,6 @@ class MultiSelectAutocomplete extends Component {
                     selectedItems = { this.state.selectedItems }
                     shouldFitContainer = { shouldFitContainer }
                     shouldFocus = { shouldFocus } />
-                { this._renderLoadingIndicator() }
                 { this._renderError() }
             </div>
         );
@@ -169,7 +180,8 @@ class MultiSelectAutocomplete extends Component {
             error: this.state.error && Boolean(filterValue),
             filterValue,
             isOpen: Boolean(this.state.items.length) && Boolean(filterValue),
-            items: filterValue ? this.state.items : []
+            items: filterValue ? this.state.items : [],
+            loading: Boolean(filterValue)
         });
         if (filterValue) {
             this._sendQuery(filterValue);
@@ -201,7 +213,7 @@ class MultiSelectAutocomplete extends Component {
         if (existing) {
             selectedItems = selectedItems.filter(k => k !== existing);
         } else {
-            selectedItems.push(item);
+            selectedItems.push(this.props.onItemSelected(item));
         }
         this.setState({
             isOpen: false,
@@ -236,33 +248,6 @@ class MultiSelectAutocomplete extends Component {
         );
     }
 
-    /**
-     * Renders the loading indicator.
-     *
-     * @returns {ReactElement|null}
-     */
-    _renderLoadingIndicator() {
-        if (!(this.state.loading
-            && !this.state.items.length
-            && this.state.filterValue.length)) {
-            return null;
-        }
-
-        const content = ( // eslint-disable-line no-extra-parens
-            <div className = 'autocomplete-loading'>
-                <Spinner
-                    isCompleting = { false }
-                    size = 'medium' />
-            </div>
-        );
-
-        return (
-            <AKInlineDialog
-                content = { content }
-                isOpen = { true } />
-        );
-    }
-
     /**
      * Sends a query to the resourceClient.
      *
@@ -275,7 +260,6 @@ class MultiSelectAutocomplete extends Component {
         }
 
         this.setState({
-            loading: true,
             error: false
         });
 
@@ -288,7 +272,6 @@ class MultiSelectAutocomplete extends Component {
             .then(results => {
                 if (this.state.filterValue !== filterValue) {
                     this.setState({
-                        loading: false,
                         error: false
                     });
 

react/features/base/sounds/actionTypes.js

@@ -0,0 +1,54 @@
+/**
+ * The type of a feature/internal/protected (redux) action to add an audio
+ * element to the sounds collection state.
+ *
+ * {
+ *     type: _ADD_AUDIO_ELEMENT,
+ *     ref: AudioElement,
+ *     soundId: string
+ * }
+ */
+export const _ADD_AUDIO_ELEMENT = Symbol('_ADD_AUDIO_ELEMENT');
+
+/**
+ * The type of feature/internal/protected (redux) action to remove an audio
+ * element for given sound identifier from the sounds collection state.
+ *
+ * {
+ *     type: _REMOVE_AUDIO_ELEMENT,
+ *     soundId: string
+ * }
+ */
+export const _REMOVE_AUDIO_ELEMENT = Symbol('_REMOVE_AUDIO_ELEMENT');
+
+/**
+ * The type of (redux) action to play a sound from the sounds collection.
+ *
+ * {
+ *     type: PLAY_SOUND,
+ *     soundId: string
+ * }
+ */
+export const PLAY_SOUND = Symbol('PLAY_SOUND');
+
+/**
+ * The type of (redux) action to register a new sound with the sounds
+ * collection.
+ *
+ * {
+ *     type: REGISTER_SOUND,
+ *     soundId: string
+ * }
+ */
+export const REGISTER_SOUND = Symbol('REGISTER_SOUND');
+
+/**
+ * The type of (redux) action to unregister an existing sound from the sounds
+ * collection.
+ *
+ * {
+ *     type: UNREGISTER_SOUND,
+ *     soundId: string
+ * }
+ */
+export const UNREGISTER_SOUND = Symbol('UNREGISTER_SOUND');

react/features/base/sounds/actions.js

@@ -0,0 +1,118 @@
+// @flow
+
+import type { AudioElement } from '../media';
+
+import {
+    _ADD_AUDIO_ELEMENT,
+    _REMOVE_AUDIO_ELEMENT,
+    PLAY_SOUND,
+    REGISTER_SOUND,
+    UNREGISTER_SOUND
+} from './actionTypes';
+
+/**
+ * Adds {@link AudioElement} instance to the base/sounds feature state for the
+ * {@link Sound} instance identified by the given id. After this action the
+ * sound can be played by dispatching the {@link PLAY_SOUND} action.
+ *
+ * @param {string} soundId - The sound identifier for which the audio element
+ * will be stored.
+ * @param {AudioElement} audioElement - The audio element which implements the
+ * audio playback functionality and which is backed by the sound resource
+ * corresponding to the {@link Sound} with the given id.
+ * @protected
+ * @returns {{
+ *     type: PLAY_SOUND,
+ *     audioElement: AudioElement,
+ *     soundId: string
+ * }}
+ */
+export function _addAudioElement(soundId: string, audioElement: AudioElement) {
+    return {
+        type: _ADD_AUDIO_ELEMENT,
+        audioElement,
+        soundId
+    };
+}
+
+/**
+ * The opposite of {@link _addAudioElement} which removes {@link AudioElement}
+ * for given sound from base/sounds state. It means that the audio resource has
+ * been disposed and the sound can no longer be played.
+ *
+ * @param {string} soundId - The {@link Sound} instance identifier for which the
+ * audio element is being removed.
+ * @protected
+ * @returns {{
+ *     type: _REMOVE_AUDIO_ELEMENT,
+ *     soundId: string
+ * }}
+ */
+export function _removeAudioElement(soundId: string) {
+    return {
+        type: _REMOVE_AUDIO_ELEMENT,
+        soundId
+    };
+}
+
+/**
+ * Starts playback of the sound identified by the given sound id. The action
+ * will have effect only if the audio resource has been loaded already.
+ *
+ * @param {string} soundId - The id of the sound to be played (the same one
+ * which was used in {@link registerSound} to register the sound).
+ * @returns {{
+ *     type: PLAY_SOUND,
+ *     soundId: string
+ * }}
+ */
+export function playSound(soundId: string): Object {
+    return {
+        type: PLAY_SOUND,
+        soundId
+    };
+}
+
+/**
+ * Registers a new sound for given id and a source object which can be either a
+ * path or a raw object depending on the platform (native vs web). It will make
+ * the {@link SoundCollection} render extra HTMLAudioElement which will make it
+ * available for playback through the {@link playSound} action.
+ *
+ * @param {string} soundId - The global identifier which identify the sound
+ * created for given source object.
+ * @param {Object|string} src - Either path to an audio file or a raw object
+ * which specifies the audio resource that will be associated with the given
+ * {@code soundId}.
+ * @returns {{
+ *     type: REGISTER_SOUND,
+ *     soundId: string,
+ *     src: (Object | string)
+ * }}
+ */
+export function registerSound(soundId: string, src: Object | string): Object {
+    return {
+        type: REGISTER_SOUND,
+        soundId,
+        src
+    };
+}
+
+/**
+ * Unregister the sound identified by the given id. It will make the
+ * {@link SoundCollection} component stop rendering the corresponding
+ * {@code HTMLAudioElement} which then should result in the audio resource
+ * disposal.
+ *
+ * @param {string} soundId - The identifier of the {@link Sound} to be removed.
+ * @returns {{
+ *     type: UNREGISTER_SOUND,
+ *     soundId: string
+ * }}
+ */
+export function unregisterSound(soundId: string): Object {
+    return {
+        type: UNREGISTER_SOUND,
+        soundId
+    };
+}

react/features/base/sounds/components/SoundCollection.js

@@ -0,0 +1,160 @@
+// @flow
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { Audio } from '../../media';
+import type { AudioElement } from '../../media';
+import { Fragment } from '../../react';
+
+import { _addAudioElement, _removeAudioElement } from '../actions';
+import type { Sound } from '../reducer';
+
+/**
+ * {@link SoundCollection}'s properties.
+ */
+type Props = {
+
+    /**
+     * Dispatches {@link _ADD_AUDIO_ELEMENT} Redux action which will store the
+     * {@link AudioElement} for a sound in the Redux store.
+     */
+    _addAudioElement: Function,
+
+    /**
+     * Dispatches {@link _REMOVE_AUDIO_ELEMENT} Redux action which will remove
+     * the sound's {@link AudioElement} from the Redux store.
+     */
+    _removeAudioElement: Function,
+
+    /**
+     * It's the 'base/sounds' reducer's state mapped to a property. It's used to
+     * render audio elements for every registered sound.
+     */
+    _sounds: Map<string, Sound>
+}
+
+/**
+ * Collections of all global sounds used by the app for playing audio
+ * notifications in response to various events. It renders <code>Audio</code>
+ * element for each sound registered in the base/sounds feature. When the audio
+ * resource is loaded it will emit add/remove audio element actions which will
+ * attach the element to the corresponding {@link Sound} instance in the Redux
+ * state. When that happens the sound can be played using the {@link playSound}
+ * action.
+ */
+class SoundCollection extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        let key = 0;
+        const sounds = [];
+
+        for (const [ soundId, sound ] of this.props._sounds.entries()) {
+            sounds.push(
+                React.createElement(
+                    Audio, {
+                        key,
+                        setRef: this._setRef.bind(this, soundId),
+                        src: sound.src
+                    }));
+            key += 1;
+        }
+
+        return (
+            <Fragment>
+                {
+                    sounds
+                }
+            </Fragment>
+        );
+    }
+
+    /**
+     * Set the (reference to the) {@link AudioElement} object which implements
+     * the audio playback functionality.
+     *
+     * @param {string} soundId - The sound Id for the audio element for which
+     * the callback is being executed.
+     * @param {AudioElement} element - The {@link AudioElement} instance
+     * which implements the audio playback functionality.
+     * @protected
+     * @returns {void}
+     */
+    _setRef(soundId: string, element: ?AudioElement) {
+        if (element) {
+            this.props._addAudioElement(soundId, element);
+        } else {
+            this.props._removeAudioElement(soundId);
+        }
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to {@code SoundCollection}'s props.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     _sounds: Map<string, Sound>
+ * }}
+ */
+function _mapStateToProps(state) {
+    return {
+        _sounds: state['features/base/sounds']
+    };
+}
+
+/**
+ * Maps dispatching of some actions to React component props.
+ *
+ * @param {Function} dispatch - Redux action dispatcher.
+ * @private
+ * @returns {{
+ *     _addAudioElement: void,
+ *     _removeAudioElement: void
+ * }}
+ */
+export function _mapDispatchToProps(dispatch: Function) {
+    return {
+        /**
+         * Dispatches action to store the {@link AudioElement} for
+         * a {@link Sound} identified by given <tt>soundId</tt> in the Redux
+         * store, so that the playback can be controlled through the Redux
+         * actions.
+         *
+         * @param {string} soundId - A global identifier which will be used to
+         * identify the {@link Sound} instance for which an audio element will
+         * be added.
+         * @param {AudioElement} audioElement - The {@link AudioElement}
+         * instance that will be stored in the Redux state of the base/sounds
+         * feature, as part of the {@link Sound} object. At that point the sound
+         * will be ready for playback.
+         * @private
+         * @returns {void}
+         */
+        _addAudioElement(soundId: string, audioElement: AudioElement) {
+            dispatch(_addAudioElement(soundId, audioElement));
+        },
+
+        /**
+         * Dispatches action to remove {@link AudioElement} from the Redux
+         * store for specific {@link Sound}, because it is no longer part of
+         * the DOM tree and the audio resource will be released.
+         *
+         * @param {string} soundId - The id of the {@link Sound} instance for
+         * which an {@link AudioElement} will be removed from the Redux store.
+         * @private
+         * @returns {void}
+         */
+        _removeAudioElement(soundId: string) {
+            dispatch(_removeAudioElement(soundId));
+        }
+    };
+}
+
+export default connect(_mapStateToProps, _mapDispatchToProps)(SoundCollection);

react/features/base/sounds/components/index.js

@@ -0,0 +1 @@
+export { default as SoundCollection } from './SoundCollection';

react/features/base/sounds/index.js

@@ -0,0 +1,6 @@
+export * from './actions';
+export * from './actionTypes';
+export * from './components';
+
+import './middleware';
+import './reducer';