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

<mat-toolbar id="toolbar" role="heading" fxLayout fxLayoutAlign="center" fxLayoutGap="40px">
	<div fxFlex="20%" fxLayoutAlign="start center" id="info-container" *ngIf="screenSize !== 'xs'">
		<div>
			<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
			<div id="session-info-container" [class.colapsed]="recordingStatus === _recordingStatus.STARTED">
				<span id="session-name" *ngIf="!isMinimal && session && session.sessionId && showSessionName">{{ session.sessionId }}</span>
				<div *ngIf="recordingStatus === _recordingStatus.STARTED" id="recording-tag" class="recording-tag">
					<mat-icon class="blink">radio_button_checked</mat-icon>
					<span class="blink">REC</span>
					<span> | {{ recordingTime | date: 'H:mm:ss' }}</span>
				</div>
			</div>
		</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="{{ 'TOOLBAR.MUTE_AUDIO' | translate }}" id="mic">mic</mat-icon>
			<mat-icon *ngIf="!isAudioActive" matTooltip="{{ 'TOOLBAR.UNMUTE_AUDIO' | translate }}" id="mic_off">mic_off</mat-icon>
		</button>

		<!-- Camera button -->
		<button
			id="camera-btn"
			mat-icon-button
			(click)="toggleCamera()"
			[disabled]="isConnectionLost || !hasVideoDevices || videoMuteChanging"
			[class.warn-btn]="!isWebcamVideoActive"
		>
			<mat-icon *ngIf="isWebcamVideoActive" matTooltip="{{ 'TOOLBAR.MUTE_VIDEO' | translate }}" id="videocam">videocam</mat-icon>
			<mat-icon *ngIf="!isWebcamVideoActive" matTooltip="{{ 'TOOLBAR.UNMUTE_VIDEO' | translate }}" 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="{{ 'TOOLBAR.ENABLE_SCREEN' | translate }}">screen_share</mat-icon>
			<mat-icon *ngIf="isScreenShareActive" matTooltip="{{ 'TOOLBAR.DISABLE_SCREEN' | translate }}">screen_share</mat-icon>
		</button>

		<!-- More options button -->
		<button
			mat-icon-button
			id="more-options-btn"
			*ngIf="!isMinimal && showMoreOptionsButton"
			[matMenuTriggerFor]="menu"
			[disabled]="isConnectionLost"
		>
			<mat-icon matTooltip="{{ 'TOOLBAR.MORE_OPTIONS' | translate }}">more_vert</mat-icon>
		</button>
		<mat-menu #menu="matMenu" id="more-options-menu">
			<!-- Fullscreen button -->
			<button *ngIf="showFullscreenButton" mat-menu-item id="fullscreen-btn" (click)="toggleFullscreen()">
				<mat-icon *ngIf="!isFullscreenActive">fullscreen</mat-icon>
				<span *ngIf="!isFullscreenActive">{{ 'TOOLBAR.FULLSCREEN' | translate }}</span>

				<mat-icon *ngIf="isFullscreenActive">fullscreen_exit</mat-icon>
				<span *ngIf="isFullscreenActive">{{ 'TOOLBAR.EXIT_FULLSCREEN' | translate }}</span>
			</button>

			<!-- Recording button -->
			<button
				*ngIf="!isMinimal && showRecordingButton"
				mat-menu-item
				id="recording-btn"
				[disabled]="
					recordingStatus === _recordingStatus.STARTING || recordingStatus === _recordingStatus.STOPPING || !isSessionCreator
				"
				(click)="toggleRecording()"
			>
				<mat-icon color="warn">radio_button_checked</mat-icon>
				<span *ngIf="recordingStatus === _recordingStatus.STOPPED || recordingStatus === _recordingStatus.STOPPING">
					{{ 'TOOLBAR.START_RECORDING' | translate }}
				</span>
				<span *ngIf="recordingStatus === _recordingStatus.STARTED || recordingStatus === _recordingStatus.STARTING">
					{{ 'TOOLBAR.STOP_RECORDING' | translate }}
				</span>
			</button>

			<!-- Virtual background button -->
			<button
				*ngIf="!isMinimal && showBackgroundEffectsButton"
				[disabled]="!isWebcamVideoActive"
				mat-menu-item
				id="virtual-bg-btn"
				(click)="toggleBackgroundEffects()"
			>
				<mat-icon>auto_awesome</mat-icon>
				<span>{{ 'TOOLBAR.BACKGROUND' | translate }}</span>
			</button>

			<!-- Subtitles button -->
			<button
				*ngIf="!isMinimal && showSubtitlesButton"
				[disabled]="isConnectionLost"
				mat-menu-item
				id="subtitles-btn"
				(click)="toggleSubtitles()"
			>
				<mat-icon>closed_caption</mat-icon>
				<span *ngIf="subtitlesEnabled">{{ 'TOOLBAR.DISABLE_SUBTITLES' | translate }}</span>
				<span *ngIf="!subtitlesEnabled">{{ 'TOOLBAR.ENABLE_SUBTITLES' | translate }}</span>
			</button>

			<mat-divider class="divider" *ngIf="!isMinimal && showSettingsButton"></mat-divider>

			<!-- Settings button -->
			<button *ngIf="!isMinimal && showSettingsButton" mat-menu-item id="toolbar-settings-btn" (click)="toggleSettings()">
				<mat-icon>settings</mat-icon>
				<span>{{ 'TOOLBAR.SETTINGS' | translate }}</span>
			</button>
		</mat-menu>

		<!-- 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="{{ 'TOOLBAR.LEAVE' | translate }}">call_end</mat-icon>
		</button>
	</div>
	<div fxFlex="20%" fxFlexOrder="3" fxLayoutAlign="end center" id="menu-buttons-container">
		<!-- Default activities button -->
		<button
			mat-icon-button
			id="activities-panel-btn"
			*ngIf="!isMinimal && showActivitiesPanelButton"
			matTooltip="{{ 'TOOLBAR.ACTIVITIES' | translate }}"
			(click)="toggleActivitiesPanel()"
			[disabled]="isConnectionLost"
			[class.active-btn]="isActivitiesOpened"
		>
			<mat-icon>category</mat-icon>
		</button>

		<!-- Default participants button -->
		<button
			mat-icon-button
			id="participants-panel-btn"
			*ngIf="!isMinimal && showParticipantsPanelButton"
			matTooltip="{{ 'TOOLBAR.PARTICIPANTS' | translate }}"
			(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="{{ 'TOOLBAR.CHAT' | translate }}"
			(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>