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">
<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()">
<span>{{ 'Minimize' | translate }}</span>
<mat-icon>fullscreen_exit</mat-icon>
<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>
@ -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>

View File

@ -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 {

View File

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

View File

@ -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(