openvidu/openvidu-components-angular/projects/openvidu-angular/src/lib/components/toolbar/toolbar.component.html

<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="10px">
	<div fxFlex="20%" fxLayoutAlign="start center">
		<div id="img-container">
			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
			<span id="session-title" *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="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
			mat-icon-button
			*ngIf="!isMinimal && showScreenshareButton"
			id="navScreenButton"
			(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
			*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
			*ngIf="!isMinimal && showParticipantsPanelButton"
			matTooltip="Show articipants"
			(click)="toggleParticipantsPanel()"
			[disabled]="isConnectionLost"
			[class.active-btn]="isParticipantsOpened"
		>
			<mat-icon>people</mat-icon>
		</button>

		<!-- Default chat button -->
		<button
			mat-icon-button
			*ngIf="!isMinimal && showChatPanelButton"
			(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>
	</div>
</mat-toolbar>