Merge branch 'develop' into travis/widget-api

src/vector/jitsi/index.html

@@ -9,6 +9,7 @@
 <div id="joinButtonContainer">
     <div class="joinConferenceFloating">
         <div class="joinConferencePrompt">
+            <span class="icon"><!-- managed by CSS --></span>
             <!-- TODO: i18n -->
             <h2>Jitsi Video Conference</h2>
             <div id="widgetActionContainer">

src/vector/jitsi/index.scss

@@ -23,10 +23,11 @@ limitations under the License.
     src: url('~matrix-react-sdk/res/fonts/Nunito/Nunito-Regular.ttf') format('truetype');
 }
 
+$fg-color: #edf3ff;
 body {
     font-family: Nunito, Arial, Helvetica, sans-serif;
     background-color: #181b21;
-    color: #edf3ff;
+    color: $fg-color;
 }
 
 body, html {
@@ -73,3 +74,22 @@ body, html {
     background-color: #03b381;
     border: 0;
 }
+
+.icon {
+    $icon-size: 42px;
+    margin-top: -$icon-size; // to visually center the form
+
+    &::before {
+        content: '';
+        background-size: contain;
+        background-color: $fg-color;
+        mask-repeat: no-repeat;
+        mask-position: center;
+        mask-image: url("~matrix-react-sdk/res/img/element-icons/call/video-call.svg");
+        mask-size: $icon-size;
+        display: block;
+        width: $icon-size;
+        height: $icon-size;
+        margin: 0 auto; // center
+    }
+}

src/vector/jitsi/index.ts

@@ -47,6 +47,7 @@ let roomId: string;
 let openIdToken: IOpenIDCredentials;
 
 let widgetApi: WidgetApi;
+let meetApi: any; // JitsiMeetExternalAPI
 
 (async function() {
     try {
@@ -112,7 +113,12 @@ let widgetApi: WidgetApi;
             } else {
                 enableJoinButton();
             }
+
             // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795)
+
+            widgetApi.on('hangup', () => {
+                if (meetApi) meetApi.executeCommand('hangup');
+            });
         } else {
             enableJoinButton();
         }
@@ -210,7 +216,7 @@ function joinConference() { // event handler bound in HTML
         jwt: jwt,
     };
 
-    const meetApi = new JitsiMeetExternalAPI(jitsiDomain, options);
+    meetApi = new JitsiMeetExternalAPI(jitsiDomain, options);
     if (displayName) meetApi.executeCommand("displayName", displayName);
     if (avatarUrl) meetApi.executeCommand("avatarUrl", avatarUrl);
     if (userId) meetApi.executeCommand("email", userId);
@@ -225,5 +231,6 @@ function joinConference() { // event handler bound in HTML
         }
 
         document.getElementById("jitsiContainer").innerHTML = "";
+        meetApi = null;
     });
 }