src/app/modules/pro/channel/channel.service.ts

@@ -8,7 +8,6 @@ import { OverlayModalService } from '../../../services/ux/overlay-modal';
 import { BlogView } from "../../blogs/view/view";
 import { Session } from '../../../services/session';
 import { ActivatedRoute } from '@angular/router';
-import { MediaModalComponent } from "../../media/modal/modal.component";
 
 export type RouterLinkToType =
  'home'

src/app/modules/pro/channel/tiles/media/tile.component.ts

-import { Component, Input } from '@angular/core';
-import isMobile from "../../../../../helpers/is-mobile";
+import { Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { MediaModalComponent } from "../../../../media/modal/modal.component";
 import { FeaturesService } from "../../../../../services/features.service";
 import { OverlayModalService } from "../../../../../services/ux/overlay-modal";
 import { Router } from "@angular/router";
+import toMockActivity from "../../util/mock-activity";
 
 @Component({
  selector: 'm-pro--channel-tile',
  template: `
- <img [src]="entity.thumbnail_src" *ngIf="getType(entity) === 'object:image'; else videoBlock">
+ <img
+ [src]="entity.thumbnail_src"
+ (click)="showMediaModal()"
+ *ngIf="getType(entity) === 'object:image'; else videoBlock"
+ #img
+ >
 
  <ng-template #videoBlock>
  <m-video
@@ -35,6 +40,7 @@ import { Router } from "@angular/router";
 
 export class ProTileComponent {
  @Input() entity: any;
+ @ViewChild('img', { static: false }) img: ElementRef;
 
  videoDimensions: Array<any> = null;
 
@@ -78,7 +84,7 @@ export class ProTileComponent {
  }
 
  showMediaModal() {
- const activity = this.asActivity(this.entity);
+ const activity = toMockActivity(this.entity);
  if (this.featuresService.has('media-modal')) {
  // Mobile (not tablet) users go to media page instead of modal
  // if (isMobile() && Math.min(screen.width, screen.height) < 768) {
@@ -89,11 +95,9 @@ export class ProTileComponent {
  activity.custom_data.dimensions = this.videoDimensions;
  } else { // Image
  // Set image dimensions if they're not already there
- if (activity.custom_data[0].width === '0' || activity.custom_data[0].height === '0') {
- // const img: HTMLImageElement = this.batchImage.nativeElement;
- // this.activity.custom_data[0].width = img.naturalWidth;
- // this.activity.custom_data[0].height = img.naturalHeight;
- }
+ const img: HTMLImageElement = this.img.nativeElement;
+ activity.custom_data[0].width = img.naturalWidth;
+ activity.custom_data[0].height = img.naturalHeight;
  }
 
  activity.modal_source_url = this.router.url;
@@ -106,32 +110,4 @@ export class ProTileComponent {
  }
  }
 
- /**
- * generates an activity from an image or video
- * @param entity
- */
- private asActivity(entity: any) {
- let obj = {
- ...entity,
- entity_guid: entity.guid,
- custom_type: entity.subtype,
- };
-
- console.warn('entity', entity);
- if (entity.subtype === 'video') {
- obj.custom_data = {
- ...entity,
- dimensions: this.videoDimensions
- };
- } else {
- obj.custom_data = [{
- ...entity,
- width: 0,
- height: 0
- }];
- }
-
- return obj;
- }
-
 }

src/app/modules/pro/channel/util/mock-activity.ts

+/**
+ * generates an activity from an image or video
+ * @param entity
+ */
+export default function toMockActivity(entity: any) {
+ let obj = {
+ ...entity,
+ entity_guid: entity.guid,
+ custom_type: entity.subtype,
+ };
+
+ if (entity.subtype === 'video') {
+ obj.custom_data = {
+ ...entity,
+ dimensions: this.videoDimensions
+ };
+ } else {
+ obj.custom_data = [{
+ ...entity,
+ width: 0,
+ height: 0
+ }];
+ }
+
+ return obj;
+}