From 719d1d1cf1ba8f04237712c4eec6c12643f693e3 Mon Sep 17 00:00:00 2001
From: Sean <sean.f.t.engelhardt@gmail.com>
Date: Fri, 10 Jul 2020 14:51:16 +0200
Subject: [PATCH] Improve Jitsi UI

Some slight jitsi/stream look and feel improvements

The "closed door" now has a tooltip "add yourseld to los to enter
conference"
Use "keyboard_hide" to indicate minimize/hide
Hide the potentially obsolete quick controls when the full jitsi dialog
is open
Use the "voice_chat" icon to indicate showing the full jitsi dialog
Remove "hangup" "raise hand" and "help" from the jitsi iframe
Add hangup and leave to the jitsi dialog in replacement of hangup in the
iFrame
The "enter live conference" icon is now highlighted by a fade animation
---
 .../components/jitsi/jitsi.component.html     | 91 +++++++++++++------
 .../components/jitsi/jitsi.component.scss     | 30 ++++++
 .../jitsi/jitsi.component.scss-theme.scss     |  2 +-
 .../components/jitsi/jitsi.component.ts       | 37 ++++++--
 4 files changed, 124 insertions(+), 36 deletions(-)

diff --git a/client/src/app/shared/components/jitsi/jitsi.component.html b/client/src/app/shared/components/jitsi/jitsi.component.html
index b4a1f51cb..869a1df36 100644
--- a/client/src/app/shared/components/jitsi/jitsi.component.html
+++ b/client/src/app/shared/components/jitsi/jitsi.component.html
@@ -3,34 +3,54 @@
     <mat-card class="jitsi-fake-dialog">
         <div class="jitsi-iframe-wrapper" #jitsi></div>
         <div class="jitsi-dialog-actions">
-            <a
-                type="button"
-                mat-button
-                color="primary"
-                matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
-                target="_blank"
-                (click)="stopJitsi()"
-                [href]="jitsiMeetUrl"
-            >
-                <mat-icon>open_in_new</mat-icon>
-            </a>
+            <div>
+                <a
+                    type="button"
+                    mat-icon-button
+                    color="primary"
+                    matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
+                    target="_blank"
+                    (click)="stopJitsi()"
+                    [href]="jitsiMeetUrl"
+                >
+                    <mat-icon>open_in_new</mat-icon>
+                </a>
+            </div>
 
-            <button type="button" mat-button color="primary" (click)="hideJitsiDialog()">
-                <span>{{ 'Minimize' | translate }}</span>
-                <mat-icon>fullscreen_exit</mat-icon>
-            </button>
+            <div>
+                <button
+                    class="dialog-hangup"
+                    type="button"
+                    mat-button
+                    color="warn"
+                    (click)="!!videoStreamUrl ? viewStream() : stopJitsi()"
+                >
+                    <os-icon-container icon="{{ !!videoStreamUrl ? 'meeting_room' : 'call_end' }}">
+                        <span *ngIf="videoStreamUrl">
+                            {{ 'Exit conference' | translate }}
+                        </span>
+                        <span *ngIf="!videoStreamUrl">
+                            {{ 'Hangup' | translate }}
+                        </span>
+                    </os-icon-container>
+                </button>
+            </div>
+
+            <div>
+                <button class="dialog-hide" type="button" mat-button color="primary" (click)="hideJitsiDialog()">
+                    <os-icon-container icon="keyboard_hide">
+                        <span>{{ 'Minimize' | translate }}</span>
+                    </os-icon-container>
+                </button>
+            </div>
         </div>
     </mat-card>
 </div>
 
 <div class="jitsi-integration" *ngIf="enableJitsi || (videoStreamUrl && canSeeLiveStream)">
     <!-- Audio-Conference-bar -->
-    <div
-        class="jitsi-bar"
-    >
-        <span
-            class="control-icon-wrapper apply-theme"
-        >
+    <div class="jitsi-bar">
+        <span class="control-icon-wrapper apply-theme">
             <ng-container *ngIf="currentState == state.jitsi">
                 <!-- Exit jitsi -->
                 <button
@@ -39,7 +59,7 @@
                     color="accent"
                     (click)="viewStream()"
                     matTooltip="{{ 'Exit live conference and continue livestream' | translate }}"
-                    *ngIf="videoStreamUrl && canSeeLiveStream"
+                    *ngIf="videoStreamUrl && canSeeLiveStream && !isJitsiDialogOpen"
                 >
                     <mat-icon color="warn">
                         meeting_room
@@ -50,7 +70,7 @@
                 <button
                     class="indicator quick-icon"
                     mat-mini-fab
-                    *ngIf="isJoined"
+                    *ngIf="isJoined && !isJitsiDialogOpen"
                     (click)="toggleMute()"
                     matTooltip="{{ 'Mute / Unmute' | translate }}"
                 >
@@ -65,15 +85,28 @@
                 <!-- Enter conference from stream -->
                 <button
                     *ngIf="enableJitsi && isAccessPermitted"
-                    class="indicator quick-icon"
+                    class="quick-icon indicator"
                     mat-mini-fab
                     (click)="enterConversation()"
                     matTooltip="{{ 'Enter live conference' | translate }}"
                 >
-                    <mat-icon color="primary">meeting_room</mat-icon>
+                    <mat-icon
+                        color="primary"
+                        [ngClass]="{
+                            'enter-meeting-room': !canManageSpeaker
+                        }"
+                    >
+                        meeting_room
+                    </mat-icon>
                 </button>
 
-                <mat-icon *ngIf="enableJitsi && !isAccessPermitted" class="indicator">no_meeting_room</mat-icon>
+                <mat-icon
+                    *ngIf="enableJitsi && !isAccessPermitted"
+                    class="indicator"
+                    matTooltip="{{ 'Add yourself to the current list of speakers to join the conference' | translate }}"
+                >
+                    no_meeting_room
+                </mat-icon>
             </ng-container>
         </span>
 
@@ -88,7 +121,7 @@
             <!-- open-window button -->
             <button class="toggle-list-button" mat-button (click)="toggleShowJitsi()">
                 <ng-container *ngIf="currentState == state.jitsi">
-                    <div class="ellipsis-overflow"> {{ 'Live conference' | translate }}</div>
+                    <div class="ellipsis-overflow">{{ 'Live conference' | translate }}</div>
                     <div class="one-line">
                         &nbsp;
                         <span *ngIf="currentDominantSpeaker">
@@ -213,10 +246,10 @@
                                 color="accent"
                                 (click)="toggleConferenceDialog()"
                                 [disabled]="!isJitsiActive"
-                                matTooltip="{{ 'Maximize / minimize Jitsi window' | translate }}"
+                                matTooltip="{{ 'Show/Hide video conference' | translate }}"
                             >
                                 <mat-icon>
-                                    {{ isJitsiDialogOpen ? 'fullscreen_exit' : 'fullscreen' }}
+                                    {{ isJitsiDialogOpen ? 'keyboard_hide' : 'voice_chat' }}
                                 </mat-icon>
                             </button>
                         </div>
diff --git a/client/src/app/shared/components/jitsi/jitsi.component.scss b/client/src/app/shared/components/jitsi/jitsi.component.scss
index 4a5ce3a90..b2d1f89f4 100644
--- a/client/src/app/shared/components/jitsi/jitsi.component.scss
+++ b/client/src/app/shared/components/jitsi/jitsi.component.scss
@@ -20,6 +20,20 @@
         .jitsi-dialog-actions {
             display: flex;
             justify-content: space-between;
+
+            div {
+                min-width: 33%;
+                display: flex;
+            }
+
+            .dialog-hangup {
+                margin-left: auto;
+                margin-right: auto;
+            }
+
+            .dialog-hide {
+                margin-left: auto;
+            }
         }
     }
 }
@@ -59,6 +73,22 @@
                 text-align: center;
                 margin: auto $wrapper-padding auto 0;
             }
+
+            /**
+             * appear animation
+             */
+            @keyframes fade-in-out {
+                from {
+                    opacity: 100%;
+                }
+                to {
+                    opacity: 25%;
+                }
+            }
+
+            .enter-meeting-room {
+                animation: fade-in-out 1s linear infinite alternate;
+            }
         }
 
         .stream-width-wrapper {
diff --git a/client/src/app/shared/components/jitsi/jitsi.component.scss-theme.scss b/client/src/app/shared/components/jitsi/jitsi.component.scss-theme.scss
index 0132a0439..9cd3bea97 100644
--- a/client/src/app/shared/components/jitsi/jitsi.component.scss-theme.scss
+++ b/client/src/app/shared/components/jitsi/jitsi.component.scss-theme.scss
@@ -3,7 +3,7 @@
 @mixin os-jitsi-theme($theme) {
     $primary: map-get($theme, primary);
     $accent: map-get($theme, accent);
-    $warn: map-get($theme, accent);
+    $warn: map-get($theme, warn);
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
diff --git a/client/src/app/shared/components/jitsi/jitsi.component.ts b/client/src/app/shared/components/jitsi/jitsi.component.ts
index 6c653f92a..762923373 100644
--- a/client/src/app/shared/components/jitsi/jitsi.component.ts
+++ b/client/src/app/shared/components/jitsi/jitsi.component.ts
@@ -120,12 +120,12 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
 
     private isOnCurrentLos: boolean;
 
+    public get canManageSpeaker(): boolean {
+        return this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers);
+    }
+
     public get isAccessPermitted(): boolean {
-        return (
-            !this.restricted ||
-            this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers) ||
-            this.isOnCurrentLos
-        );
+        return !this.restricted || this.canManageSpeaker || this.isOnCurrentLos;
     }
 
     public get jitsiMeetUrl(): string {
@@ -160,7 +160,32 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
         DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
         DISABLE_PRESENCE_STATUS: true,
         TOOLBAR_ALWAYS_VISIBLE: true,
-        TOOLBAR_TIMEOUT: 10000000
+        TOOLBAR_TIMEOUT: 10000000,
+        TOOLBAR_BUTTONS: [
+            'microphone',
+            'camera',
+            'desktop',
+            'fullscreen',
+            'fodeviceselection',
+            'profile',
+            'chat',
+            'recording',
+            'livestreaming',
+            'etherpad',
+            'sharedvideo',
+            'settings',
+            'videoquality',
+            'filmstrip',
+            'invite',
+            'feedback',
+            'stats',
+            'shortcuts',
+            'tileview',
+            'download',
+            'help',
+            'mute-everyone',
+            'security'
+        ]
     };
 
     public constructor(