Sengi-Windows-MacOS-Linux/src/app/components/media-viewer/media-viewer.component.html

<div class="media-viewer-canvas" (click)="close()">
    <button class="media-viewer-canvas__close media-viewer-canvas__button" title="close">
        <fa-icon [icon]="faTimes"></fa-icon>
    </button>

    <button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous" (click)="previous($event)" *ngIf="previousAvailable">
        <fa-icon [icon]="faAngleLeft"></fa-icon>
    </button>

    <button class="media-viewer-canvas__next media-viewer-canvas__button" title="next" (click)="next($event)"  *ngIf="nextAvailable">
        <fa-icon [icon]="faAngleRight"></fa-icon>
    </button>
    
    <img class="media-viewer-canvas__image" *ngIf="imageUrl" src="{{imageUrl}}" (click)="blockClick($event)"/>
    <video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="blockClick($event)">
        <source src="{{ gifvUrl }}" type="video/mp4">
    </video>
    <video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
        <source src="{{ videoUrl }}" type="video/mp4">
    </video>

    <div #video *ngIf="html" class="media-viewer-canvas__image media-viewer-canvas__iframe" [innerHTML]="html">
    </div>
</div>