138 lines
4.9 KiB
HTML
138 lines
4.9 KiB
HTML
<div id="call-container">
|
|
|
|
<div id="pre-join-container" *ngIf="showPrejoin && tokensReceived && participantReady">
|
|
<ov-pre-join (onJoinButtonClicked)="_onJoinButtonClicked()"></ov-pre-join>
|
|
</div>
|
|
|
|
<div id="spinner" *ngIf="!participantReady && !streamPlaying && !error">
|
|
<mat-spinner [diameter]="50"></mat-spinner>
|
|
<span>{{ 'PREJOIN.PREPARING' | translate }}</span>
|
|
</div>
|
|
|
|
<div id="spinner" *ngIf="!participantReady && error">
|
|
<mat-icon class="error-icon">error</mat-icon>
|
|
<span>{{ errorMessage }}</span>
|
|
</div>
|
|
|
|
<div id="session-container" *ngIf="showVideoconference || (!showPrejoin && participantReady && tokensReceived && !error)">
|
|
<ov-session (onSessionCreated)="_onSessionCreated($event)">
|
|
<ng-template #toolbar>
|
|
<ng-container *ngIf="openviduAngularToolbarTemplate">
|
|
<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #panel>
|
|
<ng-container *ngIf="openviduAngularPanelTemplate">
|
|
<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #layout>
|
|
<ng-container *ngIf="openviduAngularLayoutTemplate">
|
|
<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container>
|
|
</ng-container>
|
|
</ng-template>
|
|
</ov-session>
|
|
</div>
|
|
</div>
|
|
|
|
<ng-template #defaultToolbar>
|
|
<ov-toolbar
|
|
id="default-toolbar"
|
|
(onLeaveButtonClicked)="onLeaveButtonClicked()"
|
|
(onCameraButtonClicked)="onCameraButtonClicked()"
|
|
(onMicrophoneButtonClicked)="onMicrophoneButtonClicked()"
|
|
(onScreenshareButtonClicked)="onScreenshareButtonClicked()"
|
|
(onFullscreenButtonClicked)="onFullscreenButtonClicked()"
|
|
(onParticipantsPanelButtonClicked)="onParticipantsPanelButtonClicked()"
|
|
(onChatPanelButtonClicked)="onChatPanelButtonClicked()"
|
|
(onActivitiesPanelButtonClicked)="onActivitiesPanelButtonClicked()"
|
|
(onStartRecordingClicked)="onStartRecordingClicked('toolbar')"
|
|
(onStopRecordingClicked)="onStopRecordingClicked('toolbar')"
|
|
>
|
|
<ng-template #toolbarAdditionalButtons>
|
|
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalButtonsTemplate"></ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #toolbarAdditionalPanelButtons>
|
|
<ng-container *ngTemplateOutlet="openviduAngularToolbarAdditionalPanelButtonsTemplate"></ng-container>
|
|
</ng-template>
|
|
</ov-toolbar>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultPanel>
|
|
<ov-panel id="default-panel">
|
|
<ng-template #chatPanel>
|
|
<ng-container *ngTemplateOutlet="openviduAngularChatPanelTemplate"></ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #participantsPanel>
|
|
<ng-container *ngTemplateOutlet="openviduAngularParticipantsPanelTemplate"></ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #backgroundEffectsPanel>
|
|
<ov-background-effects-panel id="default-background-effects-panel"></ov-background-effects-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #settingsPanel>
|
|
<ov-settings-panel id="default-settings-panel"></ov-settings-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #activitiesPanel>
|
|
<ng-container *ngTemplateOutlet="openviduAngularActivitiesPanelTemplate"></ng-container>
|
|
</ng-template>
|
|
|
|
<ng-template #additionalPanels>
|
|
<ng-container *ngTemplateOutlet="openviduAngularAdditionalPanelsTemplate"></ng-container>
|
|
</ng-template>
|
|
</ov-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultChatPanel>
|
|
<ov-chat-panel id="default-chat-panel"></ov-chat-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultActivitiesPanel>
|
|
<ov-activities-panel
|
|
id="default-activities-panel"
|
|
(onStartRecordingClicked)="onStartRecordingClicked('panel')"
|
|
(onStopRecordingClicked)="onStopRecordingClicked('panel')"
|
|
(onDownloadRecordingClicked)="onDownloadRecordingClicked($event)"
|
|
(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
|
|
(onPlayRecordingClicked)="onPlayRecordingClicked($event)"
|
|
></ov-activities-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultParticipantsPanel>
|
|
<ov-participants-panel id="default-participants-panel">
|
|
<ng-template #participantPanelItem let-participant>
|
|
<ng-container
|
|
*ngTemplateOutlet="openviduAngularParticipantPanelItemTemplate; context: { $implicit: participant }"
|
|
></ng-container>
|
|
</ng-template>
|
|
</ov-participants-panel>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultParticipantPanelItem let-participant>
|
|
<ov-participant-panel-item [participant]="participant" id="default-participant-panel-item">
|
|
<ng-template #participantPanelItemElements>
|
|
<ng-container
|
|
*ngTemplateOutlet="openviduAngularParticipantPanelItemElementsTemplate; context: { $implicit: participant }"
|
|
></ng-container>
|
|
</ng-template>
|
|
</ov-participant-panel-item>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultLayout>
|
|
<ov-layout id="default-layout">
|
|
<ng-template #stream let-stream>
|
|
<ng-container *ngTemplateOutlet="openviduAngularStreamTemplate; context: { $implicit: stream }"> </ng-container>
|
|
</ng-template>
|
|
</ov-layout>
|
|
</ng-template>
|
|
|
|
<ng-template #defaultStream let-stream>
|
|
<ov-stream [stream]="stream" id="default-stream"></ov-stream>
|
|
</ng-template>
|