Merge pull request #5462 from tsiegleauq/more-jitsi-improvements

Improve Jitsi UI

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
+            <div>
-                type="button"
+                <a
-                mat-button
+                    type="button"
-                color="primary"
+                    mat-icon-button
-                matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
+                    color="primary"
-                target="_blank"
+                    matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
-                (click)="stopJitsi()"
+                    target="_blank"
-                [href]="jitsiMeetUrl"
+                    (click)="stopJitsi()"
-            >
+                    [href]="jitsiMeetUrl"
-                <mat-icon>open_in_new</mat-icon>
+                >
-            </a>
+                    <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"
-            </button>
+                    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(