auto-load all media in lightbox

src/app/components/media-viewer/media-viewer.component.html

@@ -3,21 +3,29 @@
         <fa-icon [icon]="faTimes"></fa-icon>
     </button>
 
-    <button class="media-viewer-canvas__previous media-viewer-canvas__button" title="previous" (click)="previous($event)" *ngIf="previousAvailable">
+    <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">
+    <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)"/>
+    <div *ngFor="let att of attachments" class="media-viewer-canvas__attachement" [ngClass]="{ 'collapsed': currentIndex !== att.index }">
-    <video class="media-viewer-canvas__image" *ngIf="gifvUrl" role="application" loop autoplay (click)="blockClick($event)">
+        <img *ngIf="att.type === 'image'" 
-        <source src="{{ gifvUrl }}" type="video/mp4">
+            src="{{att.url}}" class="media-viewer-canvas__image" (click)="blockClick($event)" />
-    </video>
+
-    <video class="media-viewer-canvas__image" *ngIf="videoUrl" role="application" loop controls="controls" (click)="blockClick($event)">
+        <video *ngIf="att.type === 'gifv'" 
-        <source src="{{ videoUrl }}" type="video/mp4">
+            class="media-viewer-canvas__image"  role="application" loop autoplay (click)="blockClick($event)">
-    </video>
+            <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>

src/app/components/media-viewer/media-viewer.component.scss

@@ -7,7 +7,7 @@
     background-color: rgba(0, 0, 0, 0.8);
     overflow: hidden;
     position: relative;
-
+    
     &__button {
         @include clearButton;
         padding: 5px;
@@ -60,6 +60,11 @@
         padding: 10px;
     }
 
+    &__attachement {
+        max-width: 100%;
+        height: 100vh;    
+    }
+
     &__image {
         @media screen and (min-width: $screen-break) {
             max-width: 85%;
@@ -72,6 +77,8 @@
         margin-top: 50vh;
         margin-left: 50vw;
         transform: translate(-50%, -50%);
+
+        visibility: visible;
     }
 
     &__iframe {
@@ -80,4 +87,8 @@
         max-height: 600px;
         max-width: 950px;
     }
-}
+}
+
+.collapsed {
+    height: 0;
+}

src/app/components/media-viewer/media-viewer.component.ts

@@ -18,26 +18,30 @@ export class MediaViewerComponent implements OnInit {
     faAngleLeft = faAngleLeft;
     faAngleRight = faAngleRight;
 
-    imageUrl: string;
+    attachments: AttachmentsWrapper[] = [];
-    gifvUrl: string;
-    videoUrl: string;
     html: SafeHtml;
 
     previousAvailable: boolean;
     nextAvailable: boolean;
-    private currentIndex: number;
+    currentIndex: number;
 
     @Input('openedMediaEvent')
     set openedMediaEvent(value: OpenMediaEvent) {
         this._mediaEvent = value;
 
+        this.attachments.length = 0;
+
         if (value.iframe) {
             this.html = value.iframe;
             this.autoplayIframe();
         } else {
-            const attachment = value.attachments[value.selectedIndex];
+
+            for(let i = 0; i < value.attachments.length; i++){
+                let att = value.attachments[i];
+                this.attachments.push(new AttachmentsWrapper(att, i));
+            }
+
             this.currentIndex = value.selectedIndex;
-            this.loadAttachment(attachment);
             this.setBrowsing();
         }
     }
@@ -52,7 +56,7 @@ export class MediaViewerComponent implements OnInit {
     handleKeyboardEvent(event: KeyboardEvent) {
         event.stopPropagation();
         event.preventDefault();
-        
+
         if (event.key === 'ArrowRight') {
             this.next(event);
         } else if (event.key === 'ArrowLeft') {
@@ -65,24 +69,10 @@ export class MediaViewerComponent implements OnInit {
     ngOnInit() {
     }
 
-    private loadAttachment(attachment: Attachment) {
-        if (attachment.type === 'image') {
-            this.imageUrl = attachment.url;
-        } else if (attachment.type === 'gifv') {
-            this.gifvUrl = attachment.url;
-        } else if (attachment.type === 'video') {
-            this.videoUrl = attachment.url;
-        }
-    }
-
     private setBrowsing() {
         var index = this.currentIndex;
-        var attachments = this.openedMediaEvent.attachments;
 
-        console.log(`index ${index}`);
+        if (index < this.attachments.length - 1) {
-        console.log(`attachments.length ${attachments.length}`);
-
-        if (index < attachments.length - 1) {
             this.nextAvailable = true;
         } else {
             this.nextAvailable = false;
@@ -120,7 +110,6 @@ export class MediaViewerComponent implements OnInit {
         if (this.currentIndex <= 0) return false;
 
         this.currentIndex--;
-        this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
         this.setBrowsing();
 
         return false;
@@ -131,9 +120,34 @@ export class MediaViewerComponent implements OnInit {
         if (this.currentIndex >= this.openedMediaEvent.attachments.length - 1) return false;
 
         this.currentIndex++;
-        this.imageUrl = this.openedMediaEvent.attachments[this.currentIndex].url;
         this.setBrowsing();
 
         return false;
     }
 }
+
+class AttachmentsWrapper implements Attachment {
+    constructor(attachment: Attachment, index: number) {
+        this.id = attachment.id;
+        this.type = attachment.type;
+        this.url = attachment.url;
+        this.remote_url = attachment.remote_url;
+        this.preview_url = attachment.preview_url;
+        this.text_url = attachment.text_url;
+        this.meta = attachment.meta;
+        this.description = attachment.description;
+
+        this.index = index;
+    }
+
+    id: string;
+    type: "image" | "video" | "gifv";
+    url: string;
+    remote_url: string;
+    preview_url: string;
+    text_url: string;
+    meta: any;
+    description: string;  
+    
+    index: number;
+}