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

<div
	*ngIf="this._stream"
	class="OT_widget-container 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'" 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="Settings" 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">Zoom out</span>
				<span *ngIf="videoSizeIcon === videoSizeIconEnum.BIG">Zoom in</span>
			</button>
			<button mat-menu-item id="volumeButton" *ngIf="!this._stream.local" (click)="toggleSound()">
				<mat-icon *ngIf="!_stream.participant.isMutedForcibly">volume_up</mat-icon>
				<span *ngIf="!_stream.participant.isMutedForcibly">Mute sound</span>

				<mat-icon *ngIf="_stream.participant.isMutedForcibly">volume_off</mat-icon>
				<span *ngIf="_stream.participant.isMutedForcibly">Unmute sound</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>Replace screen</span>
			</button>
		</mat-menu>
	</div>
</div>