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

<div
	*ngIf="this._stream"
	class="OV_stream no-size"
	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
	#streamContainer
>
	<div *ngIf="!isMinimal && showNickname" id="nickname-container" class="nickname" [class.fullscreen]="isFullscreen">
		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
			<span id="nickname" *ngIf="this._stream.type === 'CAMERA'">{{ this._stream.participant.nickname }}</span>
			<span id="nickname" *ngIf="this._stream.type === 'SCREEN'">{{ this._stream.participant.nickname }}_SCREEN</span>
		</div>
		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="nickname-input-container">
			<input
				matInput
				#nicknameInput
				autocomplete="off"
				maxlength="20"
				[(ngModel)]="this.nickname"
				(keypress)="updateNickname($event)"
				(focusout)="updateNickname($event)"
			/>
		</div>
	</div>

	<div
		*ngIf="!isMinimal && showAudioDetection && _stream.type === 'CAMERA' && _stream.streamManager?.stream?.audioActive"
		id="audio-wave-container"
	>
		<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
	</div>

	<ov-avatar-profile
		*ngIf="!_stream.streamManager?.stream?.videoActive && _stream.type === 'CAMERA'"
		[name]="_stream.participant.nickname"
		[color]="_stream.participant.colorProfile"
	></ov-avatar-profile>

	<ov-video
		(dblclick)="toggleVideoEnlarged()"
		[streamManager]="_stream.streamManager"
		[mutedSound]="_stream?.participant?.isMutedForcibly"
	></ov-video>

	<div class="status-icons">
		<button mat-icon-button id="statusMic" *ngIf="!this._stream.streamManager?.stream?.audioActive" disabled>
			<mat-icon>mic_off</mat-icon>
		</button>
	</div>

	<div *ngIf="!isMinimal && showSettingsButton" id="settings-container" class="videoButtons">
		<button mat-icon-button (click)="toggleVideoMenu($event)" matTooltip="{{ 'STREAM.SETTINGS' | translate }}" aria-label="Video settings menu">
			<mat-icon>more_vert</mat-icon>
		</button>
		<span [matMenuTriggerFor]="menu"></span>
		<mat-menu #menu="matMenu" yPosition="above" xPosition="before">
			<button mat-menu-item id="videoZoomButton" (click)="toggleVideoEnlarged()">
				<mat-icon>{{ this.videoSizeIcon }}</mat-icon>
				<span *ngIf="videoSizeIcon === videoSizeIconEnum.NORMAL">{{ 'STREAM.ZOOM_OUT' | translate }}</span>
				<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">{{ 'STREAM.ZOOM_IN' | translate }}</span>
			</button>
			<button mat-menu-item id="volumeButton" *ngIf="!this._stream.local" (click)="toggleMuteForcibly()">
				<mat-icon *ngIf="!_stream.participant.isMutedForcibly">volume_up</mat-icon>
				<span *ngIf="!_stream.participant.isMutedForcibly">{{ 'STREAM.MUTE_SOUND' | translate }}</span>

				<mat-icon *ngIf="_stream.participant.isMutedForcibly">volume_off</mat-icon>
				<span *ngIf="_stream.participant.isMutedForcibly">{{ 'STREAM.UNMUTE_SOUND' | translate }}</span>
			</button>
			<!-- <button mat-menu-item *ngIf="this._stream.streamManager?.stream?.videoActive" id="fullscreenButton" (click)="toggleFullscreen()">
				<mat-icon *ngIf="!isFullscreenEnabled">fullscreen</mat-icon>
				<span *ngIf="!isFullscreenEnabled">Fullscreen</span>

				<mat-icon *ngIf="isFullscreenEnabled">fullscreen_exit</mat-icon>
				<span *ngIf="isFullscreenEnabled">Exit fullscreen</span>
			</button> -->

			<button
				mat-menu-item
				(click)="replaceScreenTrack()"
				id="changeScreenButton"
				*ngIf="!this._stream.streamManager?.remote && this._stream.streamManager?.stream?.typeOfVideo === videoTypeEnum.SCREEN"
			>
				<mat-icon>picture_in_picture</mat-icon>
				<span>{{ 'STREAM.REPLACE_SCREEN' | translate }}</span>
			</button>
		</mat-menu>
	</div>
</div>