diff --git a/src/vector/jitsi/index.html b/src/vector/jitsi/index.html index 1259eb1c4..1a05c6027 100644 --- a/src/vector/jitsi/index.html +++ b/src/vector/jitsi/index.html @@ -9,6 +9,7 @@
+

Jitsi Video Conference

diff --git a/src/vector/jitsi/index.scss b/src/vector/jitsi/index.scss index fc33c9d8d..9b5f4b5b9 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 + } +} diff --git a/src/vector/jitsi/index.ts b/src/vector/jitsi/index.ts index b60715344..cf7b02373 100644 --- a/src/vector/jitsi/index.ts +++ b/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; }); }