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

client/src/app/shared/components/jitsi/jitsi.component.html

@@ -3,9 +3,10 @@
     <mat-card class="jitsi-fake-dialog">
         <div class="jitsi-iframe-wrapper" #jitsi></div>
         <div class="jitsi-dialog-actions">
+            <div>
                 <a
                     type="button"
-                mat-button
+                    mat-icon-button
                     color="primary"
                     matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
                     target="_blank"
@@ -14,23 +15,42 @@
                 >
                     <mat-icon>open_in_new</mat-icon>
                 </a>
+            </div>
 
-            <button type="button" mat-button color="primary" (click)="hideJitsiDialog()">
+            <div>
-                <span>{{ 'Minimize' | translate }}</span>
+                <button
-                <mat-icon>fullscreen_exit</mat-icon>
+                    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
+    <div class="jitsi-bar">
-        class="jitsi-bar"
+        <span class="control-icon-wrapper apply-theme">
-    >
-        <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>

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 {

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);
 

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 (
+        return !this.restricted || this.canManageSpeaker || this.isOnCurrentLos;
-            !this.restricted ||
-            this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers) ||
-            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(