mirror of https://github.com/OpenVidu/openvidu.git
95 lines
4.0 KiB
HTML
95 lines
4.0 KiB
HTML
<div class="container" id="prejoin-container" fxLayout.gt-sm="row" fxLayout.lt-md="column">
|
|
<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">
|
|
<ov-layout>
|
|
<ng-template #stream let-stream>
|
|
<ov-stream [stream]="stream" [displayParticipantName]="false" [settingsButton]="false"></ov-stream>
|
|
</ng-template>
|
|
</ov-layout>
|
|
</div>
|
|
<div fxFlex.gt-sm="35%" fxFlex.lt-md="45%" 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">Set your name</h4>
|
|
<hr *ngIf="windowSize >= 960"/>
|
|
<div id="nickname-input-container">
|
|
<button mat-icon-button disabled>
|
|
<mat-icon>person</mat-icon>
|
|
</button>
|
|
<mat-form-field appearance="standard">
|
|
<mat-label>Nickname</mat-label>
|
|
<input matInput type="text" maxlength="20" [(ngModel)]="nickname" (change)="updateNickname()" autocomplete="off" />
|
|
</mat-form-field>
|
|
</div>
|
|
<!-- <mat-button-toggle-group style="border-radius: 20px">
|
|
<button mat-icon-button class="media-btn">
|
|
<mat-icon matTooltip="Mute your audio">mic</mat-icon>
|
|
</button>
|
|
<mat-button-toggle class="split-button-1 drop-down-button" [matMenuTriggerFor]="dropdownMenuOne">
|
|
<mat-icon>arrow_drop_down</mat-icon>
|
|
</mat-button-toggle>
|
|
</mat-button-toggle-group>
|
|
|
|
<mat-menu #dropdownMenuOne="matMenu">
|
|
<button mat-menu-item>One</button>
|
|
<button mat-menu-item>Two</button>
|
|
<button mat-menu-item>Three</button>
|
|
</mat-menu> -->
|
|
</div>
|
|
|
|
<div fxFlex.gt-sm="100%" fxFlex.lt-md="33%" fxLayoutAlign="center center" fxFlexFill class="buttons-container">
|
|
<h4 *ngIf="windowSize >= 960">Choose your devices</h4>
|
|
<hr *ngIf="windowSize >= 960"/>
|
|
<!-- Camera -->
|
|
<div class="device-container-element">
|
|
<button
|
|
mat-icon-button
|
|
id="camera-button"
|
|
[disabled]="!hasVideoDevices"
|
|
[class.warn-btn]="isVideoMuted"
|
|
(click)="toggleCam()"
|
|
>
|
|
<mat-icon *ngIf="!isVideoMuted" matTooltip="Mute Camera" id="videocam">videocam</mat-icon>
|
|
<mat-icon *ngIf="isVideoMuted" matTooltip="Unmute Camera" id="videocam_off">videocam_off</mat-icon>
|
|
</button>
|
|
<mat-form-field>
|
|
<mat-label>Video devices</mat-label>
|
|
<mat-select [disabled]="isVideoMuted || !hasVideoDevices" [value]="cameraSelected?.device" (selectionChange)="onCameraSelected($event)">
|
|
<mat-option *ngFor="let camera of cameras" [value]="camera.device">
|
|
{{ camera.label }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<!-- Microphone -->
|
|
<div class="device-container-element">
|
|
<button
|
|
mat-icon-button
|
|
id="microhpone-button"
|
|
[disabled]="!hasAudioDevices"
|
|
[class.warn-btn]="isAudioMuted"
|
|
(click)="toggleMic()"
|
|
>
|
|
<mat-icon *ngIf="!isAudioMuted" matTooltip="Mute Audio" id="mic">mic</mat-icon>
|
|
<mat-icon *ngIf="isAudioMuted" matTooltip="Unmute Audio" id="mic_off">mic_off</mat-icon>
|
|
</button>
|
|
<mat-form-field>
|
|
<mat-label>Audio devices</mat-label>
|
|
<mat-select [disabled]="isAudioMuted || !hasAudioDevices" [value]="microphoneSelected?.device" (selectionChange)="onMicrophoneSelected($event)">
|
|
<mat-option *ngFor="let microphone of microphones" [value]="microphone.device">
|
|
{{ microphone.label }}
|
|
</mat-option>
|
|
</mat-select>
|
|
</mat-form-field>
|
|
</div>
|
|
</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">Join session</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|