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

<div
	*ngIf="this._stream"
	class="OT_widget-container"
	[id]="'container-' + this._stream.streamManager?.stream?.streamId"
	#streamContainer
>
	<div class="nickname" [class.fullscreen]="isFullscreen">
		<div (click)="toggleNicknameForm()" class="nicknameContainer" selected *ngIf="!toggleNickname">
			<span id="nickname">{{ this._stream.nickname }}</span>
			<span *ngIf="_stream.local || (_stream.streamManager && !_stream.streamManager?.remote)"> (edit)</span>
		</div>
		<div *ngIf="toggleNickname && !this._stream.streamManager?.remote" [class.fullscreen]="isFullscreen" id="dialogNickname">
			<form id="nicknameForm">
				<mat-form-field color="primary">
					<input
						matInput
						#nicknameInput
						placeholder="Nick: {{ this._stream.nickname }}"
						[formControl]="nicknameFormControl"
						[errorStateMatcher]="matcher"
						(keypress)="eventKeyPress($event)"
						autocomplete="off"
						(focusout)="toggleNicknameForm()"
					/>
					<mat-error *ngIf="nicknameFormControl.hasError('required')"> Nickname is <strong>required</strong> </mat-error>
					<mat-error *ngIf="nicknameFormControl.hasError('maxlength')"> Nickname is <strong>too long!</strong> </mat-error>
				</mat-form-field>
			</form>
		</div>
		<!-- Custom network quality element -->
		<ng-content select="[network-quality]"></ng-content>
	</div>

	<div id="audio-wave-container">
		<ov-audio-wave [streamManager]="_stream.streamManager"></ov-audio-wave>
	</div>

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


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

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

	<div class="videoButtons">

		<!-- Custom stream notifications -->
		<ng-container *ngIf="notificationTemplate">
			<ng-container *ngTemplateOutlet="notificationTemplate; context: { stream: _stream }"></ng-container>
		</ng-container>

		<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.streamManager?.remote" (click)="toggleSound()">
				<mat-icon *ngIf="!mutedSound">volume_up</mat-icon>
				<span *ngIf="!mutedSound">Mute sound</span>

				<mat-icon *ngIf="mutedSound">volume_off</mat-icon>
				<span *ngIf="mutedSound">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>