Adds suspend overlay.

css/_inlay.scss

@@ -7,7 +7,7 @@
     text-align: center;
 
     &__title {
-        margin: 12px 0;
+        margin: 17px 0;
         padding-bottom: 17px;
         color: $popoverFontColor;
         font-size: 21px;
@@ -26,4 +26,8 @@
         margin: 0 10px;
         font-size: 50px;
     }
+
+    &__button {
+        float: none !important;
+    }
 }

lang/main.json

@@ -79,6 +79,10 @@
         "policyText": " ",
         "title": "__app__ needs to use your microphone and camera."
     },
+    "suspendedoverlay": {
+        "title": "Your video call was interrupted, because this computer went to sleep.",
+        "rejoinKeyTitle": "Rejoin"
+    },
     "toolbar": {
         "mute": "Mute / Unmute",
         "videomute": "Start / Stop camera",

modules/UI/UI.js

@@ -16,6 +16,7 @@ import GumPermissionsOverlay
     from './gum_overlay/UserMediaPermissionsGuidanceOverlay';
 
 import PageReloadOverlay from './reload_overlay/PageReloadOverlay';
+import SuspendedOverlay from './suspended_overlay/SuspendedOverlay';
 import VideoLayout from "./videolayout/VideoLayout";
 import FilmStrip from "./videolayout/FilmStrip";
 import SettingsMenu from "./side_pannels/settings/SettingsMenu";
@@ -1399,12 +1400,14 @@ UI.hideRingOverLay = function () {
 
 /**
  * Indicates if any the "top" overlays are currently visible. The check includes
- * the call overlay, GUM permissions overlay and a page reload overlay.
+ * the call overlay, suspended overlay, GUM permissions overlay
+ * and a page reload overlay.
  *
  * @returns {*|boolean} {true} if the overlay is visible, {false} otherwise
  */
 UI.isOverlayVisible = function () {
     return RingOverlay.isVisible()
+        || SuspendedOverlay.isVisible()
         || PageReloadOverlay.isVisible()
         || GumPermissionsOverlay.isVisible();
 };
@@ -1427,6 +1430,13 @@ UI.showUserMediaPermissionsGuidanceOverlay = function (browser) {
     GumPermissionsOverlay.show(browser);
 };
 
+/**
+ * Shows suspended overlay with a button to rejoin conference.
+ */
+UI.showSuspendedOverlay = function () {
+    SuspendedOverlay.show();
+};
+
 /**
  * Hides browser-specific overlay with guidance how to proceed with gUM prompt.
  */

modules/UI/suspended_overlay/SuspendedOverlay.js

@@ -0,0 +1,63 @@
+/* global $, APP */
+
+import Overlay from '../overlay/Overlay';
+
+/**
+ * An overlay dialog which is shown when a suspended event is detected.
+ */
+class SuspendedOverlayImpl extends Overlay{
+    /**
+     * Creates new <tt>SuspendedOverlayImpl</tt>
+     */
+    constructor() {
+        super();
+
+        $(document).on('click', '#rejoin', () => {
+            APP.ConferenceUrl.reload();
+        });
+    }
+    /**
+     * Constructs overlay body with the message and a button to rejoin.
+     * @override
+     */
+    _buildOverlayContent() {
+        return (
+        `<div class="inlay">
+            <span class="inlay__icon icon-microphone"></span>
+            <span class="inlay__icon icon-camera"></span>
+            <h3 class="inlay__title" data-i18n="suspendedoverlay.title"></h3>
+            <button id="rejoin" 
+                 data-i18n="suspendedoverlay.rejoinKeyTitle" 
+                 class="inlay__button button-control button-control_primary">
+            </button>
+        </div>`);
+    }
+}
+
+/**
+ * Holds the page suspended overlay instance.
+ *
+ * {@type SuspendedOverlayImpl}
+ */
+let overlay;
+
+export default {
+    /**
+     * Checks whether the page suspended overlay has been displayed.
+     * @return {boolean} <tt>true</tt> if the page suspended overlay is
+     * currently visible or <tt>false</tt> otherwise.
+     */
+    isVisible() {
+        return overlay && overlay.isVisible();
+    },
+    /**
+     * Shows the page suspended overlay.
+     */
+    show() {
+
+        if (!overlay) {
+            overlay = new SuspendedOverlayImpl();
+        }
+        overlay.show();
+    }
+};