From 737fa7dca5814a6ad6f8308bbbd23aada500e834 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Wed, 16 Sep 2020 14:39:40 -0600
Subject: [PATCH 1/4] Jitsi widget wrapper updates for hangup button

See https://github.com/matrix-org/matrix-react-sdk/pull/5223
---
 src/vector/jitsi/index.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts
index 6e697fee2f..e376a34d66 100644
--- a/src/vector/jitsi/index.ts
+++ b/src/vector/jitsi/index.ts
@@ -40,6 +40,7 @@ let jitsiAuth: string;
 let roomId: string;
 
 let widgetApi: WidgetApi;
+let meetApi: any; // JitsiMeetExternalAPI
 
 (async function() {
     try {
@@ -88,7 +89,13 @@ let widgetApi: WidgetApi;
             } else {
                 enableJoinButton();
             }
+
             // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795)
+
+            widgetApi.on('hangup', () => {
+                console.log("@@ HANGUP");
+                if (meetApi) meetApi.executeCommand('hangup');
+            });
         } else {
             enableJoinButton();
         }
@@ -199,7 +206,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);
@@ -214,5 +221,6 @@ function joinConference() { // event handler bound in HTML
         }
 
         document.getElementById("jitsiContainer").innerHTML = "";
+        meetApi = null;
     });
 }

From 05d5e3f68036757ab0732c530a41da10f8cc9456 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Thu, 17 Sep 2020 14:59:43 -0600
Subject: [PATCH 2/4] Remove debugging

---
 src/vector/jitsi/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts
index e376a34d66..ca32ea7540 100644
--- a/src/vector/jitsi/index.ts
+++ b/src/vector/jitsi/index.ts
@@ -93,7 +93,6 @@ let meetApi: any; // JitsiMeetExternalAPI
             // TODO: register widgetApi listeners for PTT controls (https://github.com/vector-im/riot-web/issues/12795)
 
             widgetApi.on('hangup', () => {
-                console.log("@@ HANGUP");
                 if (meetApi) meetApi.executeCommand('hangup');
             });
         } else {

From a1e6b019d2cd6b9d07b1bb7666fca4af59ac4fa7 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 29 Sep 2020 11:01:26 -0600
Subject: [PATCH 3/4] Give the Jitsi widget an icon to help with discovery

We think users will be expecting to follow a series of icons into their conference, so we'll remind them here of what is going on with a giant icon.

This does not change depending on the call type because the jitsi widget doesn't understand the call type anyways - it's always a video conference.
---
 src/vector/jitsi/index.html |  2 +-
 src/vector/jitsi/index.scss | 22 +++++++++++++++++++++-
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/src/vector/jitsi/index.html b/src/vector/jitsi/index.html
index 1259eb1c4a..38f6d31135 100644
--- a/src/vector/jitsi/index.html
+++ b/src/vector/jitsi/index.html
@@ -9,7 +9,7 @@
 <div id="joinButtonContainer">
     <div class="joinConferenceFloating">
         <div class="joinConferencePrompt">
-            <!-- TODO: i18n -->
+            <span class="icon"><!-- managed by CSS --></span>
             <h2>Jitsi Video Conference</h2>
             <div id="widgetActionContainer">
                 <button type="button" id="joinButton">Join Conference</button>
diff --git a/src/vector/jitsi/index.scss b/src/vector/jitsi/index.scss
index fc33c9d8d0..9b5f4b5b92 100644
--- a/src/vector/jitsi/index.scss
+++ b/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
+    }
+}

From 7ef0702df4e8e498b3cd6f1d2856e02866ca2114 Mon Sep 17 00:00:00 2001
From: Travis Ralston <travpc@gmail.com>
Date: Tue, 29 Sep 2020 11:04:08 -0600
Subject: [PATCH 4/4] re-todo

---
 src/vector/jitsi/index.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/vector/jitsi/index.html b/src/vector/jitsi/index.html
index 38f6d31135..1a05c60277 100644
--- a/src/vector/jitsi/index.html
+++ b/src/vector/jitsi/index.html
@@ -10,6 +10,7 @@
     <div class="joinConferenceFloating">
         <div class="joinConferencePrompt">
             <span class="icon"><!-- managed by CSS --></span>
+            <!-- TODO: i18n -->
             <h2>Jitsi Video Conference</h2>
             <div id="widgetActionContainer">
                 <button type="button" id="joinButton">Join Conference</button>