mirror of https://github.com/OpenVidu/openvidu.git
70 lines
2.8 KiB
HTML
70 lines
2.8 KiB
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.gt-sm="row" fxLayout.lt-md="column">
|
|
<div fxFlex.gt-sm="65%" fxFlex.lt-md="55%" fxLayoutAlign="center center" id="layout-container">
|
|
<ov-session [usedInPrejoinPage]="true">
|
|
<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.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">{{ '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>
|