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
parent
a7703a5557
commit
719d1d1cf1
@ -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>
|
||||
|
||||
@ -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">
|
||||
|
||||
<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>
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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);
|
||||
|
||||
|
||||
@ -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(
|
||||
|
||||
Loading…
Reference in New Issue
Block a user