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

<div id="call-container">
	<div id="user-settings-container" *ngIf="!joinSessionClicked && !closeClicked">
		<ov-user-settings (onJoinClicked)="_onJoinClicked()" (onCloseClicked)="onLeaveSessionClicked()"></ov-user-settings>
	</div>

	<div id="spinner" *ngIf="joinSessionClicked && !isSessionAlive && !error">
		<mat-spinner [diameter]="50"></mat-spinner>
		<span>Joining the room ...</span>
	</div>

	<div id="spinner" *ngIf="joinSessionClicked && !isSessionAlive && error">
		<mat-icon class="error-icon">error</mat-icon>
		<span>{{ errorMessage }}</span>
	</div>

	<div id="session-container" *ngIf="joinSessionClicked && isSessionAlive && !error">
		<ov-session [tokens]="_tokens">
			<ng-content select="[toolbar]" toolbar></ng-content>

			<!-- OPENVIDU PANEL -->
			<span #panelRef panel>
				<!-- Custom panel -->
				<ng-content select="[panel]"></ng-content>
			</span>

			<!-- Default panel if the custom one is not injected -->
			<ov-panel *ngIf="panelRef.childNodes.length === 0" panel>
				<span #chatPanelRef chatPanel>
					<!-- Custom CHAT panel -->
					<ng-content select="[chatPanel]"></ng-content>
				</span>

				<!-- Default CHAT PANEL if the custom one is not injected -->
				<ov-chat-panel *ngIf="chatPanelRef.childNodes.length === 0" chatPanel></ov-chat-panel>

				<span #participantsPanelRef participantsPanel>
					<!-- Custom PARTICIPANTS panel -->
					<ng-content select="[participantsPanel]"></ng-content>
				</span>

				<!-- Default PARTICIPANTS PANEL if the custom one is not injected -->
				<ov-participants-panel *ngIf="participantsPanelRef.childNodes.length === 0" participantsPanel></ov-participants-panel>
			</ov-panel>

			<ng-template #layout>
				<!-- Custom layout -->
				<span #layoutRef layout>
					<ng-content select="[layout]"></ng-content>
				</span>

				<!-- Default layout if custom layout is not injected -->
				<ov-layout *ngIf="layoutRef.childNodes.length === 0" layout>
					<ng-template #stream let-stream>
						<!-- Custom stream component -->
						<ng-container *ngIf="streamTemplate; else defaultStream">
							<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: stream }"> </ng-container>
						</ng-container>

						<!-- Default stream component if custom one is not injected -->
						<ng-template #defaultStream>
							<ov-stream [stream]="stream"></ov-stream>
						</ng-template>
					</ng-template>
				</ov-layout>
			</ng-template>
		</ov-session>
	</div>
</div>