(feat): use media modal in channel media feeds

src/app/modules/newsfeed/feeds/tiles.component.html

@@ -10,9 +10,11 @@
       [ngClass]="{
         'm-newsfeed-tiles__Tile--is-mature': attachment.shouldBeBlurred(entity)
       }"
-      [routerLink]="['/newsfeed', entity.guid]"
     >
-      <img [src]="getThumbnailSrc(entity$ | async)" />
+      <img
+        [src]="getThumbnailSrc(entity$ | async)"
+        (click)="clickedImage(entity, this)"
+      />
       <i
         *ngIf="attachment.shouldBeBlurred(entity)"
         class="material-icons mature-icon"

src/app/modules/newsfeed/feeds/tiles.component.ts

 import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
 import { AttachmentService } from '../../../services/attachment';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import { OverlayModalService } from '../../../services/ux/overlay-modal';
+import { Router } from '@angular/router';
+import isMobile from '../../../helpers/is-mobile';
+import { FeaturesService } from '../../../services/features.service';
 
 @Component({
   selector: 'm-newsfeed__tiles',
@@ -9,7 +14,12 @@ import { AttachmentService } from '../../../services/attachment';
 export class NewsfeedTilesComponent {
   @Input() entities: any[] = [];
 
-  constructor(public attachment: AttachmentService) {}
+  constructor(
+    public attachment: AttachmentService,
+    private router: Router,
+    private overlayModalService: OverlayModalService,
+    private featuresService: FeaturesService
+  ) {}
 
   getThumbnailSrc(entity: any) {
     let src: string = '';
@@ -37,4 +47,51 @@ export class NewsfeedTilesComponent {
   isUnlisted(entity: any) {
     return entity && (entity.access_id === '0' || entity.access_id === 0);
   }
+
+  clickedImage(entity: any, batchImage) {
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${entity.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
+      return;
+    }
+
+    if (!this.featuresService.has('media-modal')) {
+      this.router.navigate([pageUrl]);
+      return;
+    } else {
+      if (entity.width === '0' || entity.height === '0') {
+        this.setImageDimensions(entity, batchImage);
+      }
+      this.openModal(entity);
+    }
+  }
+
+  // setVideoDimensions($event) {
+  //   this.videoDimensions = $event.dimensions;
+  //   entity.custom_data.dimensions = videoDimensions;
+  // }
+
+  setImageDimensions(entity, imageElement: HTMLImageElement) {
+    const img: HTMLImageElement = imageElement;
+    entity.width = img.naturalWidth;
+    entity.height = img.naturalHeight;
+  }
+
+  openModal(entity) {
+    entity.modal_source_url = this.router.url;
+
+    this.overlayModalService
+      .create(
+        MediaModalComponent,
+        {
+          entity: entity,
+        },
+        {
+          class: 'm-overlayModal--media',
+        }
+      )
+      .present();
+  }
 }