Fix texts

css/_inlay.scss

@@ -0,0 +1,29 @@
+.inlay {
+    margin-top: 14%;
+    @include border-radius(3px);
+    padding: 40px 38px 44px;
+    color: #fff;
+    background: lighten($defaultBackground, 20%);
+    text-align: center;
+
+    &__title {
+        margin: 12px 0;
+        padding-bottom: 17px;
+        color: $popoverFontColor;
+        font-size: 21px;
+        letter-spacing: 0.3px;
+        border-bottom: 1px solid $auiBorderColor;
+    }
+
+    &__text {
+        color: $popoverFontColor;
+        display: block;
+        margin-top: 22px;
+        font-size: 16px;
+    }
+
+    &__icon {
+        margin: 0 10px;
+        font-size: 50px;
+    }
+}

css/main.scss

@@ -38,6 +38,7 @@
 @import 'toastr';
 @import 'base';
 @import 'overlay/overlay';
+@import 'inlay';
 @import 'reload_overlay/reload_overlay';
 @import 'modals/dialog';
 @import 'modals/feedback/feedback';

css/overlay/_overlay.scss

@@ -26,35 +26,6 @@
     &__policy {
         position: absolute;
         bottom: 24px;
-    }
+        width: 100%;
-}
-
-.inlay {
-    margin-top: 14%;
-    @include border-radius(3px);
-    padding: 40px 38px 44px;
-    color: #fff;
-    background: lighten($defaultBackground, 20%);
-    text-align: center;
-
-    &__title {
-        margin: 12px 0;
-        padding-bottom: 17px;
-        color: $popoverFontColor;
-        font-size: 21px;
-        letter-spacing: 0.3px;
-        border-bottom: 1px solid $auiBorderColor;
-    }
-
-    &__text {
-        color: $popoverFontColor;
-        display: block;
-        margin-top: 22px;
-        font-size: 16px;
-    }
-
-    &__icon {
-        margin: 0 10px;
-        font-size: 50px;
     }
 }

interface_config.js

@@ -57,5 +57,6 @@ var interfaceConfig = { // eslint-disable-line no-unused-vars
     // disables the ringing sound when the RingOverlay is shown.
     DISABLE_RINGING: false,
     AUDIO_LEVEL_PRIMARY_COLOR: "rgba(255,255,255,0.4)",
-    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)"
+    AUDIO_LEVEL_SECONDARY_COLOR: "rgba(255,255,255,0.2)",
+    POLICY_LOGO: null
 };

lang/main.json

@@ -75,6 +75,10 @@
             "content": "Learn about your users through easy integration with Piwik, Google Analytics, and other usage monitoring and statistics systems."
         }
     },
+    "startupoverlay": {
+        "policyText": " ",
+        "title": "Jitsi Meet needs to use your microphone and camera."
+    },
     "toolbar": {
         "mute": "Mute / Unmute",
         "videomute": "Start / stop camera",

modules/UI/gum_overlay/UserMediaPermissionsGuidanceOverlay.js

@@ -22,32 +22,31 @@ class GUMOverlayImpl extends Overlay {
      * @inheritDoc
      */
     _buildOverlayContent() {
-    // `<span data-i18n='[html]userMedia.${this.browser}GrantPermissions'
+        let textKey = `userMedia.${this.browser}GrantPermissions`;
-    // class='inlay__text'></span>`
+        let titleKey = 'startupoverlay.title';
-        let title = 'HipChat Video needs to use your microphone and camera.';
+        let policyTextKey = 'startupoverlay.policyText';
-        let text;
+        let policyLogo = '';
-        text = 'Select "Allow" when your browser asks for these permissions.';
+        let policyLogoSrc = interfaceConfig.POLICY_LOGO;
-        let content = (
+        if (policyLogoSrc) {
-            `<div class="inlay">
+            policyLogo += (
-                <span class="inlay__icon icon-microphone"></span>
+                `<div class="policy__logo">
-                <span class="inlay__icon icon-camera"></span>
+                    <img src="${policyLogoSrc}"/>
-                <h3 class="inlay__title">${title}</h3>
-                <span class='inlay__text'>${text}</span>
-            </div>`
-        );
-
-        if (interfaceConfig.HAS_POLICY) {
-            content += (
-                `<div class="policy overlay__policy">
-                    <p class="policy__text" data-i18n="policyText"></p>
-                    <div class="policy__logo">
-                        <img src=""/>
-                    </div>
                 </div>`
             );
         }
 
-        return content;
+        return (
+            `<div class="inlay">
+                <span class="inlay__icon icon-microphone"></span>
+                <span class="inlay__icon icon-camera"></span>
+                <h3 class="inlay__title" data-i18n="${titleKey}"></h3>
+                <span class='inlay__text'data-i18n='[html]${textKey}'></span>
+            </div>
+            <div class="policy overlay__policy">
+                <p class="policy__text" data-i18n="[html]${policyTextKey}"></p>
+                ${policyLogo}
+            </div>`
+        );
     }
 }