mirror of https://github.com/OpenVidu/openvidu.git
95 lines
3.1 KiB
HTML
95 lines
3.1 KiB
HTML
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
|
|
<div fxFlex="20%" fxLayoutAlign="start center">
|
|
<div id="img-container">
|
|
<img id="branding-logo" src='assets/images/openvidu_globe.png'/>
|
|
<span id="session-title" *ngIf="session && session.sessionId">{{ session.sessionId }}</span>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="60%" fxFlexOrder="2" fxLayoutAlign="center center" id="media-buttons-container">
|
|
<!-- Microphone button -->
|
|
<button
|
|
id="navMicrophoneButton"
|
|
mat-icon-button
|
|
(click)="toggleMicrophone()"
|
|
[disabled]="isConnectionLost || !hasAudioDevices"
|
|
[class.warn-btn]="!isWebcamAudioActive"
|
|
>
|
|
<mat-icon *ngIf="isWebcamAudioActive" matTooltip="Mute your audio">mic</mat-icon>
|
|
<mat-icon *ngIf="!isWebcamAudioActive" matTooltip="Unmute your audio">mic_off</mat-icon>
|
|
</button>
|
|
|
|
<!-- Camera button -->
|
|
<button
|
|
id="navCameraButton"
|
|
mat-icon-button
|
|
(click)="toggleCamera()"
|
|
[disabled]="isConnectionLost || !hasVideoDevices"
|
|
[class.warn-btn]="!isWebcamVideoActive"
|
|
>
|
|
<mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam">videocam</mat-icon>
|
|
<mat-icon *ngIf="!isWebcamVideoActive" matTooltip="Unmute your cam">videocam_off</mat-icon>
|
|
</button>
|
|
|
|
<!-- Screenshare button -->
|
|
<button
|
|
id="navScreenButton"
|
|
mat-icon-button
|
|
(click)="toggleScreenShare()"
|
|
[disabled]="isConnectionLost"
|
|
[class.active-btn]="isScreenShareActive"
|
|
>
|
|
<mat-icon *ngIf="!isScreenShareActive" matTooltip="Enable screen share">screen_share</mat-icon>
|
|
<mat-icon *ngIf="isScreenShareActive" matTooltip="Disable screen share">screen_share</mat-icon>
|
|
</button>
|
|
|
|
<!-- Fullscreen button -->
|
|
<button mat-icon-button (click)="toggleFullscreen()" [disabled]="isConnectionLost" [class.active-btn]="isFullscreenActive">
|
|
<mat-icon *ngIf="isFullscreenActive" matTooltip="Exit Fullscreen">fullscreen_exit</mat-icon>
|
|
<mat-icon *ngIf="!isFullscreenActive" matTooltip="Fullscreen">fullscreen</mat-icon>
|
|
</button>
|
|
|
|
<!-- Custom toolbar buttons -->
|
|
<ng-content select="[toolbar-btn]"></ng-content>
|
|
|
|
<!-- Leave session button -->
|
|
<button mat-icon-button (click)="leaveSession()" id="leave-btn">
|
|
<mat-icon matTooltip="Leave the session">call_end</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div fxFlex="20%" fxFlexOrder="3" fxLayoutAlign="end center" id="menu-buttons-container">
|
|
<!-- Default participants button -->
|
|
<button
|
|
mat-icon-button
|
|
matTooltip="Show articipants"
|
|
(click)="toggleMenu('participants')"
|
|
[disabled]="isConnectionLost"
|
|
[class.active-btn]="isParticipantsOpened"
|
|
>
|
|
<mat-icon>people</mat-icon>
|
|
</button>
|
|
|
|
<div #customMenuButton>
|
|
<ng-content select="[menu-button]"></ng-content>
|
|
</div>
|
|
|
|
<!-- Default chat button -->
|
|
<button
|
|
mat-icon-button
|
|
*ngIf="!customMenuButton.innerHTML"
|
|
(click)="toggleMenu('chat')"
|
|
[disabled]="isConnectionLost"
|
|
[class.active-btn]="isChatOpened"
|
|
>
|
|
<mat-icon
|
|
matBadge="{{ unreadMessages }}"
|
|
[matBadgeHidden]="unreadMessages === 0"
|
|
matBadgePosition="above before"
|
|
matBadgeSize="small"
|
|
matBadgeColor="accent"
|
|
>
|
|
chat
|
|
</mat-icon>
|
|
</button>
|
|
</div>
|
|
</mat-toolbar>
|