angular-openvidu/src/lib/openvidu-hangouts/openvidu-hangouts.component.html

Simple, robust, OpenVidu room videochat component for Angular

<opv-template
	#openviduApi="openviduApi"
	[wsUrl]="wsUrl"
	[sessionId]="sessionId"
	[participantId]="participantId"
	
	(updateMainSpeaker)="handleOnUpdateMainSpeaker($event)"
	
	(serverConnected)="handleOnServerConnected()"
	(errorServer)="handleOnErrorServer($event)"
	(roomConnected)="handleOnRoomConnected($event)"
	(errorRoom)="handleOnErrorRoom($event)"
	(cameraAccessChange)="handleOnCameraAccessChange($event)"
	
	(participantJoined)="handleOnParticipantJoined($event)"
	(participantLeft)="handleOnParticipantLeft($event)"
	
	(streamAdded)="handleOnStreamAdded($event)"
	(streamRemoved)="handleOnStreamRemoved($event)"
	
	(errorMedia)="handleOnErrorMedia($event)"
	(leaveRoom)="handleOnLeaveRoom()"
	(newMessage)="handleOnNewMessage($event)"
	(customNotification)="handleOnCustomNotification($event)">
	
	<div #main class="openvidu-hangouts">

		<!-- Messages to user -->
		<div class="message-screen" *ngIf="userMessage && !session">
			{{userMessage}}
		</div>

		<!-- VIDEO CHAT -->
		<div class="wrapper" *ngIf="session">

			<!-- TOOLBAR -->
			<div class="toolbar">
				<mat-toolbar color="primary">
					<span>{{sessionId}}</span>
					<span class="example-spacer"></span>

					<ng-container *ngFor="let option of toolbarOptions">
						<button mat-icon-button *ngIf="option.icon !== null" (click)="option.onClick !== null && option.onClick()" matTooltip="{{(option.label) ? option.label : ''}}" matTooltipPosition="below">
							<mat-icon>{{option.icon}}</mat-icon>
						</button>
					</ng-container>
					
					<!-- Settings -->
					<!--<button mat-icon-button (click)="openSettings()" *ngIf="!isFullscreen" matTooltip="{{_intl.settingsLabel}}" matTooltipPosition="below">
						<mat-icon>settings</mat-icon>
					</button>-->
					
					<!-- For fullscreen -->
					<button mat-icon-button (click)="toggleFullscreen()" *ngIf="!isFullscreen" matTooltip="{{_intl.fullscreenLabel}}" matTooltipPosition="below">
						<mat-icon>fullscreen</mat-icon>
					</button>
					<button mat-icon-button (click)="toggleFullscreen()" *ngIf="isFullscreen" matTooltip="{{_intl.exitFullscreenLabel}}" matTooltipPosition="below">
						<mat-icon>clear</mat-icon>
					</button>
				</mat-toolbar>
			</div>

			<!-- CHAT -->
			<mat-sidenav-container>
				<mat-sidenav #sidenav mode="side" (open-start)="onSidenavOpenStart()" (close-start)="onSidenavCloseStart()">
					<div class="messages">
						<ul>
							<li *ngFor="let message of chatMessages">
								<div>
									<span>{{(message.username == participantId) ? 'You' : message.username}}</span>
									{{message.message}}
								</div>
								<span class="date">{{message.date | date: 'H:m'}}</span>
							</li>
						</ul>
					</div>
					<div class="bottom" (submit)="sendMessage(messageInput.value);" accept-charset="UTF-8">
						<button mat-fab class="close-chat transparent-button" (click)="toggleChat()"><mat-icon>arrow_back</mat-icon></button>
						<form>
							<mat-form-field color="primary" floatPlaceholder="never">
								<input matInput #messageInput placeholder="Send a message">
							</mat-form-field>
							<button #sendMessageButton mat-fab type="submit" class="send-message transparent-button" [disabled]="messageInput.value.length == 0" [class.enabled]="messageInput.value.length > 0"><mat-icon>send</mat-icon></button>
						</form>
					</div>
				</mat-sidenav>

				<!-- MAIN VIDEO -->
				<div class="main-video">
					<div class="message" *ngIf="streams.length == 1">You are alone in this room :(</div>
					<opv-stream-hangouts class="main-stream" *ngIf="mainStream != null && mainStream.getWrStream() != null" [stream]="mainStream"></opv-stream-hangouts>
					<div class="name-placeholder" *ngIf="mainStream == null || mainStream.getWrStream() == null">
						<div *ngIf="mainStream != null">{{JSON.parse(mainStream.getParticipant().data).username.charAt(0)}}</div>
						<div *ngIf="mainStream == null && participantId != null">{{participantId.charAt(0)}}</div>
					</div>
				</div>

				<!-- BUTTONS & OTHERS VIDEOS -->
				<div class="bottom-bar">
					<div class="buttons">
						<button mat-fab class="toggle-mic" [ngClass]="{'disabled': !openviduApi.micEnabled}" (click)="toggleMic()">
							<mat-icon>mic</mat-icon>
							<mat-icon class="disabled-icon">mic_off</mat-icon>
						</button>
						<button mat-fab class="close-session" (click)="leaveRoom()">
							<mat-icon>call_end</mat-icon>
						</button>
						<button mat-fab class="toggle-camera" [ngClass]="{'disabled': !openviduApi.camEnabled}" (click)="toggleCamera()">
							<mat-icon>videocam</mat-icon>
							<mat-icon class="disabled-icon">videocam_off</mat-icon>
						</button>
					</div>
					<div class="streams" *ngIf="streams.length > 1">
						<opv-stream-hangouts class="stream side-stream" [stream]="myCamera" [ngClass]="{'hide-video': (myCamera === mainStream)}">

						</opv-stream-hangouts>
						<ng-container *ngFor="let s of streams">
							<opv-stream-hangouts class="stream side-stream square"
								*ngIf="(s !== myCamera)"
								[stream]="s"
								[ngClass]="{'hide-video': (s === mainStream), 'mic-off': micOffParticipants.indexOf(s.getParticipant()) >= 0, 'cam-off': camOffParticipants.indexOf(s.getParticipant()) >= 0}">

							</opv-stream-hangouts>
						</ng-container>
					</div>
				</div>

				<button mat-fab class="toggle-chat" (click)="toggleChat()" [@chatButtonAnimation]="chatButtonState">
					<mat-icon>chat</mat-icon>
				</button>
			</mat-sidenav-container>

		</div>
	</div>
</opv-template>