openvidu/openvidu-testapp/src/app/components/video/video.component.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>
        </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">switch_video</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>
        </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="!!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>