mirror of https://github.com/OpenVidu/openvidu.git
100 lines
8.2 KiB
HTML
100 lines
8.2 KiB
HTML
<div>
|
|
<app-ov-video [streamManager]="streamManager" [poster]="videoPoster" [attrstyle]="'width: 120px; height: 90px'" class="{{videoClasses}}"></app-ov-video>
|
|
<div *ngIf="!streamManager.remote && showButtons" class="data-node">
|
|
<div class="top-div">
|
|
<button class="video-btn events-btn bottom-left-rounded" title="Publisher events" (click)="openPublisherEventsDialog()">
|
|
<mat-icon aria-label="Publisher events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
|
|
</button>
|
|
<button class="video-btn other-operations-btn" *ngIf="!this.unpublished" title="Other operations" (click)="otherOperations()">
|
|
<mat-icon aria-label="Other operations" class="mat-icon material-icons" role="img" aria-hidden="true">settings</mat-icon>
|
|
</button>
|
|
<button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
|
|
<mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
|
|
</button>
|
|
<button *ngIf="OV.session.connection.connectionId"
|
|
class="video-btn bottom-left-rounded ice-config-button-{{OV.session.connection.connectionId}}"
|
|
title="Ice Server configuration" (click)="getConfiguredIceServer()">
|
|
<mat-icon aria-label="Ice Server configuration" class="mat-icon material-icons" role="img" aria-hidden="true">storage</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="bottom-div">
|
|
<button class="video-btn pub-btn" title="Publish/Unpublish" (click)="pubUnpub()">
|
|
<mat-icon aria-label="Publish or unpublish" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="streamManager.stream.hasVideo && !this.unpublished" class="video-btn pub-video-btn" title="Publish/Unpublish Video"
|
|
(click)="pubUnpubVideo()">
|
|
<mat-icon aria-label="Publish or unpublish video" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubVideoIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="streamManager.stream.hasAudio && !this.unpublished" class="video-btn pub-audio-btn" title="Publish/Unpublish Audio"
|
|
(click)="pubUnpubAudio()">
|
|
<mat-icon aria-label="Publish or unpublish audio" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubAudioIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="!this.unpublished" class="video-btn change-publisher-btn" title="Change publisher" (click)="changePub()">
|
|
<mat-icon aria-label="Change publisher" class="mat-icon material-icons" role="img" aria-hidden="true">cameraswitch</mat-icon>
|
|
</button>
|
|
<button *ngIf="!this.unpublished" class="video-btn replace-track-btn" title="Replace track" (click)="replaceTrack()">
|
|
<mat-icon aria-label="Replace track" class="mat-icon material-icons" role="img" aria-hidden="true">switch_video</mat-icon>
|
|
</button>
|
|
<button *ngIf="!this.unpublished" class="video-btn reconnect-publisher-btn" title="Reconnect publisher" (click)="reconnect()">
|
|
<mat-icon aria-label="Reconnect publisher" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</mat-icon>
|
|
</button>
|
|
<button *ngIf="!this.unpublished" class="video-btn rec-btn publisher-rec-btn" title="Record" (click)="record()">
|
|
<mat-icon aria-label="Start/Stop local recording" class="mat-icon material-icons" role="img" aria-hidden="true">
|
|
{{recordIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="!!pauseRecordIcon" class="video-btn rec-btn publisher-rec-btn publisher-rec-pause-btn" title="Pause/Resume"
|
|
(click)="pauseRecord()">
|
|
<mat-icon aria-label="Pause/Resume local recording" class="mat-icon material-icons" role="img" aria-hidden="true">
|
|
{{pauseRecordIcon}}</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div *ngIf="streamManager.remote && showButtons" class="data-node">
|
|
<div class="top-div">
|
|
<p class="name bottom-right-rounded">{{streamManager.stream.connection.data}}</p>
|
|
<button *ngIf="subbed" class="video-btn events-btn bottom-left-rounded" title="Subscriber events" (click)="openSubscriberEventsDialog()">
|
|
<mat-icon aria-label="Subscriber events" class="mat-icon material-icons" role="img" aria-hidden="true">notifications</mat-icon>
|
|
</button>
|
|
<button class="video-btn other-operations-btn" title="Other operations" (click)="otherOperations()">
|
|
<mat-icon aria-label="Other operations" class="mat-icon material-icons" role="img" aria-hidden="true">settings</mat-icon>
|
|
</button>
|
|
<button class="video-btn stats-button bottom-left-rounded" title="Peer Connection Stats" (click)="showCodecUsed()">
|
|
<mat-icon aria-label="Peer Connection Stats" class="mat-icon material-icons" role="img" aria-hidden="true">info</mat-icon>
|
|
</button>
|
|
<button *ngIf="OV.session.connection.connectionId"
|
|
class="video-btn bottom-left-rounded ice-config-button-{{OV.session.connection.connectionId}}"
|
|
title="Ice Server configuration" (click)="getConfiguredIceServer()">
|
|
<mat-icon aria-label="Ice Server configuration" class="mat-icon material-icons" role="img" aria-hidden="true">storage</mat-icon>
|
|
</button>
|
|
</div>
|
|
<div class="bottom-div">
|
|
<button class="video-btn sub-btn" title="Subscribe/Unsubscribe" (click)="subUnsub()">
|
|
<mat-icon aria-label="Subscribe or unsubscribe" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="streamManager.stream.hasVideo && !!pubSubVideoIcon" class="video-btn sub-video-btn" title="Subscribe/Unsubscribe Video"
|
|
(click)="subUnsubVideo()">
|
|
<mat-icon aria-label="Subscribe or unsubscribe video" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubVideoIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="streamManager.stream.hasAudio && !!pubSubAudioIcon" class="video-btn sub-audio-btn" title="Subscribe/Unsubscribe Audio"
|
|
(click)="subUnsubAudio()">
|
|
<mat-icon aria-label="Subscribe or unsubscribe audio" class="mat-icon material-icons" role="img" aria-hidden="true">{{pubSubAudioIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="!!pubSubVideoIcon" class="video-btn reconnect-subscriber-btn" title="Reconnect subscriber" (click)="reconnect()">
|
|
<mat-icon aria-label="Reconnect subscriber" class="mat-icon material-icons" role="img" aria-hidden="true">refresh</mat-icon>
|
|
</button>
|
|
<button *ngIf="OV.session.capabilities.forceUnpublish" class="video-btn force-unpub-btn" title="Force Unpublish" (click)="forceUnpublish()">
|
|
<mat-icon aria-label="Force unpublish" class="mat-icon material-icons" role="img" aria-hidden="true">voice_over_off</mat-icon>
|
|
</button>
|
|
<button *ngIf="OV.session.capabilities.forceDisconnect" class="video-btn force-disconnect-btn" title="Force Disconnect" (click)="forceDisconnect()">
|
|
<mat-icon aria-label="Force disconnect" class="mat-icon material-icons" role="img" aria-hidden="true">clear</mat-icon>
|
|
</button>
|
|
<button *ngIf="!!recordIcon" class="video-btn rec-btn" title="Record" (click)="record()">
|
|
<mat-icon aria-label="Start/Stop recording" class="mat-icon material-icons" role="img" aria-hidden="true">{{recordIcon}}</mat-icon>
|
|
</button>
|
|
<button *ngIf="!!pauseRecordIcon" class="video-btn rec-btn rec-pause-btn" title="Pause/Resume" (click)="pauseRecord()">
|
|
<mat-icon aria-label="Pause/Resume recording" class="mat-icon material-icons" role="img" aria-hidden="true">{{pauseRecordIcon}}</mat-icon>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|