Merge pull request #5462 from tsiegleauq/more-jitsi-improvements
Improve Jitsi UI
This commit is contained in:
Emanuel Schütze
GitHub
commit
9e55cb1480
@ -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>
|
||||
|
||||
@ -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