openvidu/openvidu-components-angular/projects/openvidu-angular/src/lib/components/pre-join/pre-join.component.html

<div class="prejoin-toolbar">
	<mat-toolbar id="toolbar">
		<img *ngIf="!isMinimal && showLogo" id="branding-logo" src="assets/images/logo.png" ovLogo />
		<!-- <span>OpenVidu Call</span> -->
		<span class="spacer"></span>

		<ov-lang-selector *ngIf="!isMinimal" (onLangSelectorClicked)="onDeviceSelectorClicked()"></ov-lang-selector>
	</mat-toolbar>
</div>

<div class="container" id="prejoin-container" fxLayout.landscape="row" fxLayout.lt-md="column" fxLayout.md="row" fxLayout.gt-md="row">
	<div fxFlex.lt-sm="50%" fxFlex.lt-md="50%" fxFlex.md="45%" fxFlex.gt-md="45%" fxLayoutAlign="center center" id="layout-container">
		<ov-session [usedInPrejoinPage]="true" class="ov-session">
			<ng-template #panel *ngIf="!isMinimal && showBackgroundEffectsButton">
				<ov-panel>
					<ng-template #backgroundEffectsPanel>
						<ov-background-effects-panel></ov-background-effects-panel>
					</ng-template>
				</ov-panel>
			</ng-template>

			<ng-template #layout>
				<ov-layout>
					<ng-template #stream let-stream>
						<button
							*ngIf="!isMinimal && showBackgroundEffectsButton"
							[disabled]="isVideoMuted"
							matTooltip="{{ 'TOOLBAR.BACKGROUND' | translate }}"
							mat-icon-button
							id="background-effects-btn"
							(click)="toggleBackgroundEffects()"
						>
							<mat-icon>auto_awesome</mat-icon>
						</button>
						<ov-stream [stream]="stream" [displayParticipantName]="false" [settingsButton]="false"></ov-stream>
					</ng-template>
				</ov-layout>
			</ng-template>
		</ov-session>
	</div>
	<div fxFlex.lt-md="50%" fxFlex.md="55%" fxFlex.gt-md="55%" fxLayoutAlign="center center" class="media-panel" *ngIf="localParticipant">
		<div fxLayout="column" fxLayoutGap="10px" class="media-panel-container">
			<div fxLayout.gt-sm="column" fxLayout.lt-md="column" fxLayoutGap="10px" fxFlex="33%">
				<div fxFlex.gt-sm="100%" fxFlex.lt-md="33%" fxLayoutAlign="center center" fxFlexFill class="nickname-container">
					<h4 *ngIf="windowSize >= 960">{{ 'PREJOIN.NICKNAME_SECTION' | translate }}</h4>
					<hr *ngIf="windowSize >= 960" />
					<ov-nickname-input></ov-nickname-input>
				</div>

				<div fxFlex.gt-sm="100%" fxFlex.lt-md="33%" fxLayoutAlign="center center" fxFlexFill class="buttons-container">
					<h4 *ngIf="windowSize >= 960">{{ 'PREJOIN.DEVICE_SECTION' | translate }}</h4>
					<hr *ngIf="windowSize >= 960" />

					<!-- Camera -->
					<ov-video-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-video-devices-select>

					<!-- Microphone -->
					<ov-audio-devices-select (onDeviceSelectorClicked)="onDeviceSelectorClicked()"></ov-audio-devices-select>
				</div>

				<div fxFlex.gt-sm="60%" fxLayout.lt-md="column" fxLayoutAlign="center center" fxFlexFill class="join-btn-container">
					<button mat-flat-button (click)="joinSession()" form="nicknameForm" id="join-button">
						{{ 'PREJOIN.JOIN' | translate }}
					</button>
				</div>
			</div>
		</div>
	</div>
</div>