mirror of https://github.com/OpenVidu/openvidu.git
110 lines
3.7 KiB
HTML
110 lines
3.7 KiB
HTML
<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
|
|
<div fxFlex="20%" fxLayoutAlign="start center" id="info-container">
|
|
<div >
|
|
<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
|
|
<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
|
|
</div>
|
|
</div>
|
|
<div fxFlex="60%" fxFlexOrder="2" fxLayoutAlign="center center" id="media-buttons-container">
|
|
<!-- Microphone button -->
|
|
<button
|
|
id="mic-btn"
|
|
mat-icon-button
|
|
(click)="toggleMicrophone()"
|
|
[disabled]="isConnectionLost || !hasAudioDevices"
|
|
[class.warn-btn]="!isAudioActive"
|
|
>
|
|
<mat-icon *ngIf="isAudioActive" matTooltip="Mute your audio" id="mic">mic</mat-icon>
|
|
<mat-icon *ngIf="!isAudioActive" matTooltip="Unmute your audio" id="mic_off">mic_off</mat-icon>
|
|
</button>
|
|
|
|
<!-- Camera button -->
|
|
<button
|
|
id="camera-btn"
|
|
mat-icon-button
|
|
(click)="toggleCamera()"
|
|
[disabled]="isConnectionLost || !hasVideoDevices"
|
|
[class.warn-btn]="!isWebcamVideoActive"
|
|
>
|
|
<mat-icon *ngIf="isWebcamVideoActive" matTooltip="Mute your cam" id="videocam">videocam</mat-icon>
|
|
<mat-icon *ngIf="!isWebcamVideoActive" matTooltip="Unmute your cam" id="videocam_off">videocam_off</mat-icon>
|
|
</button>
|
|
|
|
<!-- Screenshare button -->
|
|
<button
|
|
mat-icon-button
|
|
*ngIf="!isMinimal && showScreenshareButton"
|
|
id="screenshare-btn"
|
|
(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
|
|
id="fullscreen-btn"
|
|
*ngIf="!isMinimal && showFullscreenButton"
|
|
(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>
|
|
|
|
<!-- External additional buttons -->
|
|
<ng-container *ngIf="toolbarAdditionalButtonsTemplate">
|
|
<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate"></ng-container>
|
|
</ng-container>
|
|
|
|
<!-- Leave session button -->
|
|
<button mat-icon-button *ngIf="showLeaveButton" (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
|
|
id="participants-panel-btn"
|
|
*ngIf="!isMinimal && showParticipantsPanelButton"
|
|
matTooltip="Participants"
|
|
(click)="toggleParticipantsPanel()"
|
|
[disabled]="isConnectionLost"
|
|
[class.active-btn]="isParticipantsOpened"
|
|
>
|
|
<mat-icon>people</mat-icon>
|
|
</button>
|
|
|
|
<!-- Default chat button -->
|
|
<button
|
|
mat-icon-button
|
|
id="chat-panel-btn"
|
|
*ngIf="!isMinimal && showChatPanelButton"
|
|
matTooltip="Chat"
|
|
(click)="toggleChatPanel()"
|
|
[disabled]="isConnectionLost"
|
|
[class.active-btn]="isChatOpened"
|
|
>
|
|
<mat-icon
|
|
matBadge="{{ unreadMessages }}"
|
|
[matBadgeHidden]="unreadMessages === 0"
|
|
matBadgePosition="above before"
|
|
matBadgeSize="small"
|
|
matBadgeColor="accent"
|
|
>
|
|
chat
|
|
</mat-icon>
|
|
</button>
|
|
|
|
<!-- External additional panel buttons -->
|
|
<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
|
|
<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
|
|
</ng-container>
|
|
</div>
|
|
</mat-toolbar>
|