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>

    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
        <img *ngIf="att.type === 'image'" 
            src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />

        <video *ngIf="att.type === 'gifv'" 
            class="media-viewer-canvas__image"  role="application" loop autoplay (click)="blockClick($event)">
            <source src="{{att.url}}" type="video/mp4">
        </video>
        <video *ngIf="att.type === 'video'" 
            class="media-viewer-canvas__image" role="application" loop autoplay controls="controls" (click)="blockClick($event)">
            <source src="{{att.url}}" type="video/mp4">
        </video>
    </div>

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