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
This commit is contained in:
Sean 2020-07-10 14:51:16 +02:00
parent a7703a5557
commit 719d1d1cf1
4 changed files with 124 additions and 36 deletions

View File

@ -3,9 +3,10 @@
<mat-card class="jitsi-fake-dialog"> <mat-card class="jitsi-fake-dialog">
<div class="jitsi-iframe-wrapper" #jitsi></div> <div class="jitsi-iframe-wrapper" #jitsi></div>
<div class="jitsi-dialog-actions"> <div class="jitsi-dialog-actions">
<div>
<a <a
type="button" type="button"
mat-button mat-icon-button
color="primary" color="primary"
matTooltip="{{ 'Open Jitsi in new tab' | translate }}" matTooltip="{{ 'Open Jitsi in new tab' | translate }}"
target="_blank" target="_blank"
@ -14,23 +15,42 @@
> >
<mat-icon>open_in_new</mat-icon> <mat-icon>open_in_new</mat-icon>
</a> </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> </button>
</div> </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> </mat-card>
</div> </div>
<div class="jitsi-integration" *ngIf="enableJitsi || (videoStreamUrl && canSeeLiveStream)"> <div class="jitsi-integration" *ngIf="enableJitsi || (videoStreamUrl && canSeeLiveStream)">
<!-- Audio-Conference-bar --> <!-- 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"> <ng-container *ngIf="currentState == state.jitsi">
<!-- Exit jitsi --> <!-- Exit jitsi -->
<button <button
@ -39,7 +59,7 @@
color="accent" color="accent"
(click)="viewStream()" (click)="viewStream()"
matTooltip="{{ 'Exit live conference and continue livestream' | translate }}" matTooltip="{{ 'Exit live conference and continue livestream' | translate }}"
*ngIf="videoStreamUrl && canSeeLiveStream" *ngIf="videoStreamUrl && canSeeLiveStream && !isJitsiDialogOpen"
> >
<mat-icon color="warn"> <mat-icon color="warn">
meeting_room meeting_room
@ -50,7 +70,7 @@
<button <button
class="indicator quick-icon" class="indicator quick-icon"
mat-mini-fab mat-mini-fab
*ngIf="isJoined" *ngIf="isJoined && !isJitsiDialogOpen"
(click)="toggleMute()" (click)="toggleMute()"
matTooltip="{{ 'Mute / Unmute' | translate }}" matTooltip="{{ 'Mute / Unmute' | translate }}"
> >
@ -65,15 +85,28 @@
<!-- Enter conference from stream --> <!-- Enter conference from stream -->
<button <button
*ngIf="enableJitsi && isAccessPermitted" *ngIf="enableJitsi && isAccessPermitted"
class="indicator quick-icon" class="quick-icon indicator"
mat-mini-fab mat-mini-fab
(click)="enterConversation()" (click)="enterConversation()"
matTooltip="{{ 'Enter live conference' | translate }}" 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> </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> </ng-container>
</span> </span>
@ -88,7 +121,7 @@
<!-- open-window button --> <!-- open-window button -->
<button class="toggle-list-button" mat-button (click)="toggleShowJitsi()"> <button class="toggle-list-button" mat-button (click)="toggleShowJitsi()">
<ng-container *ngIf="currentState == state.jitsi"> <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"> <div class="one-line">
&nbsp; &nbsp;
<span *ngIf="currentDominantSpeaker"> <span *ngIf="currentDominantSpeaker">
@ -213,10 +246,10 @@
color="accent" color="accent"
(click)="toggleConferenceDialog()" (click)="toggleConferenceDialog()"
[disabled]="!isJitsiActive" [disabled]="!isJitsiActive"
matTooltip="{{ 'Maximize / minimize Jitsi window' | translate }}" matTooltip="{{ 'Show/Hide video conference' | translate }}"
> >
<mat-icon> <mat-icon>
{{ isJitsiDialogOpen ? 'fullscreen_exit' : 'fullscreen' }} {{ isJitsiDialogOpen ? 'keyboard_hide' : 'voice_chat' }}
</mat-icon> </mat-icon>
</button> </button>
</div> </div>

View File

@ -20,6 +20,20 @@
.jitsi-dialog-actions { .jitsi-dialog-actions {
display: flex; display: flex;
justify-content: space-between; 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; text-align: center;
margin: auto $wrapper-padding auto 0; 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 { .stream-width-wrapper {

View File

@ -3,7 +3,7 @@
@mixin os-jitsi-theme($theme) { @mixin os-jitsi-theme($theme) {
$primary: map-get($theme, primary); $primary: map-get($theme, primary);
$accent: map-get($theme, accent); $accent: map-get($theme, accent);
$warn: map-get($theme, accent); $warn: map-get($theme, warn);
$foreground: map-get($theme, foreground); $foreground: map-get($theme, foreground);
$background: map-get($theme, background); $background: map-get($theme, background);

View File

@ -120,12 +120,12 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
private isOnCurrentLos: boolean; private isOnCurrentLos: boolean;
public get canManageSpeaker(): boolean {
return this.operator.hasPerms(this.permission.agendaCanManageListOfSpeakers);
}
public get isAccessPermitted(): boolean { 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 { public get jitsiMeetUrl(): string {
@ -160,7 +160,32 @@ export class JitsiComponent extends BaseViewComponent implements OnInit, OnDestr
DISABLE_JOIN_LEAVE_NOTIFICATIONS: true, DISABLE_JOIN_LEAVE_NOTIFICATIONS: true,
DISABLE_PRESENCE_STATUS: true, DISABLE_PRESENCE_STATUS: true,
TOOLBAR_ALWAYS_VISIBLE: 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( public constructor(