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

@@ -1,13 +1,15 @@
 # Jitsi Meet - Secure, Simple and Scalable Video Conferences
 
-Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](#security) and scalable video conferences. You can see [Jitsi Meet in action](http://youtu.be/7vFUVClsNh0) here at the session #482 of the VoIP Users Conference.
+Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](#security) and scalable video conferences. You can see Jitsi Meet in action [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).
 
-You can also try it out yourself at https://meet.jit.si .
+The Jitsi Meet client runs in your browser, without the need for installing anything on your computer. You can also try it out yourself at https://meet.jit.si .
 
 Jitsi Meet allows for very efficient collaboration. It allows users to stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
 ## Installation
 
+On the client side, no installation is necessary. You just point your browser to the URL of your deployment. This section is about installing the Jitsi Meet suite on your server and hosting your own conferencing service.
+
 Installing Jitsi Meet is quite a simple experience. For Debian-based systems, we recommend following the [quick-install](https://github.com/jitsi/jitsi-meet/blob/master/doc/quick-install.md) document, which uses the package system.
 
 For other systems, or if you wish to install all components manually, see the [detailed manual installation instructions](https://github.com/jitsi/jitsi-meet/blob/master/doc/manual-install.md).
@@ -88,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';
@@ -2645,6 +2654,7 @@ export default {
      */
     hangup(requestFeedback = false) {
         eventEmitter.emit(JitsiMeetConferenceEvents.BEFORE_HANGUP);
+        APP.UI.removeLocalMedia();
 
         let requestFeedbackPromise;
 

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,
@@ -245,8 +231,11 @@ var config = {
     // Stats
     //
 
-    // Whether to enable stats collection or not.
-    // disableStats: false,
+    // Whether to enable stats collection or not in the TraceablePeerConnection.
+    // This can be useful for debugging purposes (post-processing/analysis of
+    // the webrtc stats) as it is done in the jitsi-meet-torture bandwidth
+    // estimation tests.
+    // gatherStats: false,
 
     // To enable sending statistics to callstats.io you must provide the
     // Application ID and Secret.
@@ -330,7 +319,6 @@ var config = {
         // userRegion: "asia"
     }
 
-
     // List of undocumented settings used in jitsi-meet
     /**
      alwaysVisibleToolbar
@@ -350,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/invite/_info.scss

@@ -59,11 +59,17 @@
         max-width: 250px;
         overflow: hidden;
         text-overflow: ellipsis;
+        user-select: text;
         white-space: nowrap;
     }
 
     .info-dialog-dial-in {
         white-space: nowrap;
+
+        .conference-id,
+        .phone-number {
+            user-select: text;
+        }
     }
 
     .info-dialog-icon {
@@ -101,6 +107,10 @@
         padding-left: 0;
     }
 
+    .info-password-local {
+        user-select: text;
+    }
+
     .conference-id {
         margin-left: 5px;
     }

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

@@ -28,6 +28,7 @@ import {
     participantPresenceChanged,
     showParticipantJoinedNotification
 } from '../../react/features/base/participants';
+import { destroyLocalTracks } from '../../react/features/base/tracks';
 import { openDisplayNamePrompt } from '../../react/features/display-name';
 import {
     setNotificationsEnabled,
@@ -376,16 +377,6 @@ UI.start = function() {
     document.title = interfaceConfig.APP_NAME;
 };
 
-/**
- * Invokes cleanup of large video so it stops running polling tasks and stops
- * displaying.
- *
- * @returns {void}
- */
-UI.resetLargeVideo = () => {
-    VideoLayout.resetLargeVideo();
-};
-
 /**
  * Setup some UI event listeners.
  */
@@ -512,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);
 
@@ -538,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);
 };
 
@@ -1058,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.
@@ -1292,6 +1263,18 @@ UI.setLocalRemoteControlActiveChanged = function() {
     VideoLayout.setLocalRemoteControlActiveChanged();
 };
 
+/**
+ * Remove media tracks and UI elements so the user no longer sees media in the
+ * UI. The intent is to provide a feeling that the meeting has ended.
+ *
+ * @returns {void}
+ */
+UI.removeLocalMedia = function() {
+    APP.store.dispatch(destroyLocalTracks());
+    VideoLayout.resetLargeVideo();
+    $('#videospace').hide();
+};
+
 // TODO: Export every function separately. For now there is no point of doing
 // this because we are importing everything.
 export default UI;

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/shared_video/SharedVideo.js

@@ -282,6 +282,7 @@ export default class SharedVideoManager {
 
             thumb.setDisplayName('YouTube');
             VideoLayout.addRemoteVideoContainer(self.url, thumb);
+            VideoLayout.resizeThumbnails(false, true);
 
             const iframe = player.getIframe();
 

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/LargeVideoManager.js

@@ -129,8 +129,6 @@ export default class LargeVideoManager {
             this._onVideoResolutionUpdate);
 
         this.removePresenceLabel();
-
-        this.$container.remove();
     }
 
     /**

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",
@@ -39,12 +41,12 @@
     "i18next-xhr-backend": "1.4.2",
     "jQuery-Impromptu": "github:trentrichardson/jQuery-Impromptu#v6.0.0",
     "jitsi-meet-logger": "github:jitsi/jitsi-meet-logger#6fff754a77a56ab52499f3559105a15886942a1e",
-    "jquery": "2.1.4",
+    "jquery": "3.3.1",
     "jquery-contextmenu": "2.4.5",
     "jquery-i18next": "1.2.0",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#0dcc8a04915c4fdb6aecabf1b036df58e7fe02fc",
+    "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/conference/middleware.js

@@ -17,9 +17,10 @@ import {
 } from '../participants';
 import { MiddlewareRegistry } from '../redux';
 import UIEvents from '../../../../service/UI/UIEvents';
-import { TRACK_ADDED, TRACK_REMOVED, destroyLocalTracks } from '../tracks';
+import { TRACK_ADDED, TRACK_REMOVED } from '../tracks';
 
 import {
+    conferenceLeft,
     createConference,
     setAudioOnly,
     setLastN,
@@ -32,8 +33,10 @@ import {
     DATA_CHANNEL_OPENED,
     SET_AUDIO_ONLY,
     SET_LASTN,
-    SET_RECEIVE_VIDEO_QUALITY
+    SET_RECEIVE_VIDEO_QUALITY,
+    SET_ROOM
 } from './actionTypes';
+import { JITSI_CONFERENCE_URL_KEY } from './constants';
 import {
     _addLocalTracksToConference,
     _handleParticipantError,
@@ -77,6 +80,9 @@ MiddlewareRegistry.register(store => next => action => {
     case SET_RECEIVE_VIDEO_QUALITY:
         return _setReceiveVideoQuality(store, next, action);
 
+    case SET_ROOM:
+        return _setRoom(store, next, action);
+
     case TRACK_ADDED:
     case TRACK_REMOVED:
         return _trackAddedOrRemoved(store, next, action);
@@ -144,11 +150,6 @@ function _conferenceFailedOrLeft({ dispatch, getState }, next, action) {
         dispatch(setAudioOnly(true));
     }
 
-    if (typeof APP === 'object') {
-        dispatch(destroyLocalTracks());
-        APP.UI.resetLargeVideo();
-    }
-
     return result;
 }
 
@@ -335,6 +336,62 @@ function _setReceiveVideoQuality({ dispatch, getState }, next, action) {
     return next(action);
 }
 
+/**
+ * Notifies the feature {@code base/conference} that the redix action
+ * {@link SET_ROOM} is being dispatched within a specific redux store.
+ *
+ * @param {Store} store - The redux store in which the specified action is being
+ * dispatched.
+ * @param {Dispatch} next - The redux dispatch function to dispatch the
+ * specified action to the specified store.
+ * @param {Action} action - The redux action {@code SET_ROOM} which is being
+ * dispatched in the specified store.
+ * @private
+ * @returns {Object} The value returned by {@code next(action)}.
+ */
+function _setRoom({ dispatch, getState }, next, action) {
+    const result = next(action);
+
+    // By the time SET_ROOM is dispatched, base/connection's locationURL and
+    // base/conference's leaving should be the only conference-related sources
+    // of truth.
+    const state = getState();
+    const {
+        leaving,
+        ...stateFeaturesBaseConference
+    } = state['features/base/conference'];
+    const { locationURL } = state['features/base/connection'];
+    const dispatchConferenceLeft = new Set();
+
+    // Figure out which of the JitsiConferences referenced by base/conference
+    // have not dispatched or are not likely to dispatch CONFERENCE_FAILED and
+    // CONFERENCE_LEFT.
+
+    // eslint-disable-next-line guard-for-in
+    for (const p in stateFeaturesBaseConference) {
+        const v = stateFeaturesBaseConference[p];
+
+        // Does the value of the base/conference's property look like a
+        // JitsiConference?
+        if (v && typeof v === 'object') {
+            const url = v[JITSI_CONFERENCE_URL_KEY];
+
+            if (url && v !== leaving && url !== locationURL) {
+                dispatchConferenceLeft.add(v);
+            }
+        }
+    }
+
+    // Dispatch CONFERENCE_LEFT for the JitsiConferences referenced by
+    // base/conference which have not dispatched or are not likely to dispatch
+    // CONFERENCE_FAILED or CONFERENCE_LEFT.
+    for (const conference of dispatchConferenceLeft) {
+        dispatch(conferenceLeft(conference));
+    }
+
+    return result;
+}
+
 /**
  * Synchronizes local tracks from state with local tracks in JitsiConference
  * instance.

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

@@ -64,6 +64,7 @@ const WHITELISTED_KEYS = [
     'failICE',
     'firefox_fake_device',
     'forceJVB121Ratio',
+    'gatherStats',
     'hiddenDomain',
     'hosts',
     'iAmRecorder',
@@ -178,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;
@@ -211,6 +212,8 @@ export function overrideConfigJSON(
     }
 }
 
+/* eslint-enable max-params, no-shadow */
+
 /**
  * Whitelist only config.js, skips this for others configs
  * (interfaceConfig, loggingConfig).
@@ -219,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') {
@@ -231,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 = {});
@@ -283,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/connection/actions.native.js

@@ -3,7 +3,7 @@
 import _ from 'lodash';
 import type { Dispatch } from 'redux';
 
-import { conferenceWillLeave } from '../conference';
+import { conferenceLeft, conferenceWillLeave } from '../conference';
 import JitsiMeetJS, { JitsiConnectionEvents } from '../lib-jitsi-meet';
 import { parseStandardURIString } from '../util';
 
@@ -281,7 +281,16 @@ export function disconnect() {
             // intention to leave the conference.
             dispatch(conferenceWillLeave(conference_));
 
-            promise = conference_.leave();
+            promise
+                = conference_.leave()
+                    .catch(() => {
+                        // The library lib-jitsi-meet failed to make the
+                        // JitsiConference leave. Which may be because
+                        // JitsiConference thinks it has already left.
+                        // Regardless of the failure reason, continue in
+                        // jitsi-meet as if the leave has succeeded.
+                        dispatch(conferenceLeft(conference_));
+                    });
         } else {
             promise = Promise.resolve();
         }

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/jwt/middleware.js

@@ -77,10 +77,10 @@ function _maybeSetCalleeInfoVisible({ dispatch, getState }, next, action) {
     const result = next(action);
 
     const state = getState();
-    const stateFeaturesJWT = state['features/base/jwt'];
+    const stateFeaturesBaseJWT = state['features/base/jwt'];
     let calleeInfoVisible;
 
-    if (stateFeaturesJWT.callee) {
+    if (stateFeaturesBaseJWT.callee) {
         const { conference, leaving, room } = state['features/base/conference'];
 
         // XXX The CalleeInfo is to be displayed/visible as soon as possible
@@ -112,7 +112,7 @@ function _maybeSetCalleeInfoVisible({ dispatch, getState }, next, action) {
                 // However, the CallDialog is not to be displayed/visible again
                 // after all remote participants leave.
                 if (calleeInfoVisible
-                        && stateFeaturesJWT.calleeInfoVisible === false) {
+                        && stateFeaturesBaseJWT.calleeInfoVisible === false) {
                     calleeInfoVisible = false;
                 }
                 break;

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/lib-jitsi-meet/native/polyfills-browser.js

@@ -149,6 +149,38 @@ function _visitNode(node, callback) {
             document.cookie = '';
         }
 
+        // document.implementation
+        //
+        // Required by:
+        // - jQuery
+        if (typeof document.implementation === 'undefined') {
+            document.implementation = {};
+        }
+
+        // document.implementation.createHTMLDocument
+        //
+        // Required by:
+        // - jQuery
+        if (typeof document.implementation.createHTMLDocument === 'undefined') {
+            document.implementation.createHTMLDocument = function(title = '') {
+                const htmlDocument
+                    = new DOMParser().parseFromString(
+                        `<html>
+                            <head><title>${title}</title></head>
+                            <body></body>
+                        </html>`,
+                        'text/xml');
+
+                Object.defineProperty(htmlDocument, 'body', {
+                    get() {
+                        return htmlDocument.getElementsByTagName('body')[0];
+                    }
+                });
+
+                return htmlDocument;
+            };
+        }
+
         // Element.querySelector
         //
         // Required by:
@@ -372,6 +404,6 @@ function _visitNode(node, callback) {
     global.clearTimeout = BackgroundTimer.clearTimeout.bind(BackgroundTimer);
     global.clearInterval = BackgroundTimer.clearInterval.bind(BackgroundTimer);
     global.setInterval = BackgroundTimer.setInterval.bind(BackgroundTimer);
-    global.setTimeout = BackgroundTimer.setTimeout.bind(BackgroundTimer);
+    global.setTimeout = (fn, ms = 0) => BackgroundTimer.setTimeout(fn, ms);
 
 })(global || window || this); // eslint-disable-line no-invalid-this

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';