package-lock.json

@@ -14973,6 +14973,11 @@
       "integrity": "sha512-8YOJEHtxpySA3fFDyCRxA+UUV+fA+rTWnuWvylOK/NCjhY+b4ocCtmu8TtsWb+mYeU+GCHf/S66KZF/AsteKHg==",
       "dev": true
     },
+    "qrcodejs2": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/qrcodejs2/-/qrcodejs2-0.0.2.tgz",
+      "integrity": "sha1-Rlr+Xjnxn6zsuTLBH3oYYQkUauE="
+    },
     "qs": {
       "version": "6.5.2",
       "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.2.tgz",

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "preinstall": "git config core.hooksPath .githooks",
+    "preinstall": "git config core.hooksPath .git/hooks/",
     "prebuild": "gulp build.sass",
     "build": "ng build --prod",
     "prebuild-dev": "gulp build.sass --deploy-url=http://localhost/en",
@@ -43,6 +43,7 @@
     "material-design-lite": "~1.3.0",
     "medium-editor": "^5.23.2",
     "plotly.js": "^1.47.4",
+    "qrcodejs2": "0.0.2",
     "rxjs": "~6.5.2",
     "socket.io-client": "^2.2.0",
     "textarea-caret": "^3.1.0",
@@ -66,6 +67,7 @@
     "gulp-minify-css": "^1.1.6",
     "gulp-sass": "^4.0.2",
     "gulp-template": "^5.0.0",
+    "husky": "^3.0.4",
     "jasmine-core": "~2.99.0",
     "jasmine-spec-reporter": "~4.2.1",
     "jasmine-ts-async": "^1.0.0",
@@ -76,9 +78,15 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "karma-mocha-reporter": "^2.2.5",
     "prettier": "1.18.2",
+    "pretty-quick": "^1.11.1",
     "protractor": "~5.4.2",
     "ts-node": "~7.0.0",
     "tslint": "~5.12.0",
     "typescript": "~3.4.5"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": ".githooks/pre-commit && pretty-quick --staged --bail --pattern '**/*.*(ts|html|scss)'"    
+    }
   }
 }

src/app/app.component.scss

@@ -98,6 +98,18 @@ m-app {
     width: 300px;
   }
 
+  .m-page__goBack {
+    display: flex;
+    align-items: center;
+    font-size: 13px;
+    font-weight: bold;
+    text-decoration: none;
+    margin-bottom: 8px;
+    @include m-theme() {
+      color: themed($m-grey-600);
+    }
+  }
+
   .m-page--sidebar--navigation--item {
     cursor: pointer;
     display: block;

src/app/app.component.ts

@@ -17,6 +17,7 @@ import { BlockListService } from './common/services/block-list.service';
 import { FeaturesService } from './services/features.service';
 import { ThemeService } from './common/services/theme.service';
 import { BannedService } from './modules/report/banned/banned.service';
+import { DiagnosticsService } from './services/diagnostics.service';
 
 @Component({
   moduleId: module.id,
@@ -50,12 +51,16 @@ export class Minds {
     public blockListService: BlockListService,
     public featuresService: FeaturesService,
     public themeService: ThemeService,
-    private bannedService: BannedService
+    private bannedService: BannedService,
+    private diagnostics: DiagnosticsService
   ) {
     this.name = 'Minds';
   }
 
   async ngOnInit() {
+    this.diagnostics.setUser(this.minds.user);
+    this.diagnostics.listen(); // Listen for user changes
+
     this.notificationService.getNotifications();
 
     this.session.isLoggedIn(async is => {

src/app/common/api/client.service.ts

 import { Cookie } from '../../services/cookie';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { environment } from '../../../environments/environment';
 
 /**
  * API Class
@@ -68,6 +69,7 @@ export class MindsHttpClient {
 
     const headers = new HttpHeaders({
       'X-XSRF-TOKEN': XSRF_TOKEN,
+      'X-VERSION': environment.version,
     });
 
     return Object.assign(options, {

src/app/common/common.module.ts

@@ -32,6 +32,7 @@ import {
 import { Scheduler } from './components/scheduler/scheduler';
 import { Modal } from './components/modal/modal.component';
 import { MindsRichEmbed } from './components/rich-embed/rich-embed';
+import { QRCodeComponent } from './components/qr-code/qr-code.component';
 
 import { MDL_DIRECTIVES } from './directives/material';
 import { AutoGrow } from './directives/autogrow';
@@ -136,6 +137,7 @@ import { ShareModalComponent } from '../modules/modals/share/share';
     MindsRichEmbed,
     TagcloudComponent,
     DropdownComponent,
+    QRCodeComponent,
 
     AutoGrow,
     InlineAutoGrow,
@@ -220,6 +222,7 @@ import { ShareModalComponent } from '../modules/modals/share/share';
     MindsRichEmbed,
     TagcloudComponent,
     DropdownComponent,
+    QRCodeComponent,
 
     AutoGrow,
     InlineAutoGrow,

src/app/common/components/components.scss

@@ -66,3 +66,40 @@ minds-button-thumbs-down {
     }
   }
 }
+
+.m-selector {
+  position: relative;
+
+  select {
+    padding: 8px 16px;
+    max-width: 100%;
+    appearance: none;
+    display: block;
+    width: 100%;
+    font-family: 'Roboto', Helvetica, sans-serif;
+    font-size: 13px;
+    cursor: pointer;
+    font-weight: 600;
+    @include m-theme() {
+      border: 1px solid themed($m-grey-100);
+    }
+  }
+
+  &::before {
+    content: '\25bc';
+    position: absolute;
+    pointer-events: none;
+    top: 0;
+    bottom: 1px;
+    padding-top: 0.7em;
+    line-height: 1;
+    right: 0;
+    width: 2em;
+    text-align: center;
+    transform: scale(0.84, 0.42);
+    filter: progid:DXImageTransform.Microsoft.Matrix(M11=.84, M12=0, M21=0, M22=.42, SizingMethod='auto expand');
+    @include m-theme() {
+      color: themed($m-grey-500);
+    }
+  }
+}

src/app/common/components/qr-code/qr-code.component.ts

+import { Component, Input, ElementRef } from '@angular/core';
+
+declare var require: any;
+let QRCode: any;
+
+@Component({
+  selector: 'm-qr-code',
+  template: '',
+})
+export class QRCodeComponent {
+  qrcode;
+  @Input() data: string = '';
+
+  constructor(public el: ElementRef) {}
+
+  ngOnInit() {
+    if (!QRCode) {
+      QRCode = require('qrcodejs2');
+    }
+    this.qrcode = new QRCode(this.el.nativeElement, {
+      colorDark: '#000',
+      colorLight: '#FFF',
+      correctLevel: QRCode.CorrectLevel['M'],
+      height: 300,
+      text: this.data || ' ',
+      useSVG: true,
+      width: 300,
+    });
+  }
+}

src/app/modules/blogs/card/card.ts

@@ -6,7 +6,6 @@ import { ACCESS } from '../../../services/list-options';
 @Component({
   moduleId: module.id,
   selector: 'minds-card-blog',
-
   inputs: ['_blog : object'],
   templateUrl: 'card.html',
 })

src/app/modules/comments/card/comment.component.html

@@ -136,7 +136,7 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
@@ -169,7 +169,7 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
@@ -193,6 +193,9 @@
             [torrent]="[
               { res: '360', key: comment.custom_data.guid + '/360.mp4' }
             ]"
+            [shouldPlayInModal]="true"
+            (videoMetadataLoaded)="setVideoDimensions($event)"
+            (mediaModalRequested)="openModal()"
           >
           </m-video>
         </div>
@@ -218,22 +221,21 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
-          <a
-            target="_blank"
-            [routerLink]="['/media', comment.attachment_guid]"
-            *ngIf="comment.attachment_guid"
-          >
+          <a *ngIf="comment.attachment_guid">
             <img
               [src]="comment.custom_data[0].src"
-              class="mdl-shadow--2dp"
               (error)="
                 comment.custom_data[0].src =
                   minds.cdn_assets_url + 'assets/logos/medium.png'
               "
+              *ngIf="comment.custom_data"
+              class="mdl-shadow--2dp"
+              (click)="clickedImage()"
+              #batchImage
             />
           </a>
 

src/app/modules/comments/card/comment.component.ts

@@ -8,6 +8,8 @@ import {
   ChangeDetectionStrategy,
   OnChanges,
   Input,
+  ViewChild,
+  ElementRef,
 } from '@angular/core';
 
 import { Session } from '../../../services/session';
@@ -21,6 +23,11 @@ import { CommentsListComponent } from '../list/list.component';
 import { TimeDiffService } from '../../../services/timediff.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { FeaturesService } from '../../../services/features.service';
+import { MindsVideoComponent } from '../../media/components/video/video.component';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import isMobile from '../../../helpers/is-mobile';
 
 @Component({
   moduleId: module.id,
@@ -73,6 +80,11 @@ export class CommentComponent implements OnChanges {
   translationInProgress: boolean;
   translateToggle: boolean = false;
   commentAge$: Observable<number>;
+
+  videoDimensions: Array<any> = null;
+  @ViewChild('player', { static: false }) player: MindsVideoComponent;
+  @ViewChild('batchImage', { static: false }) batchImage: ElementRef;
+
   @Input() canEdit: boolean = false;
 
   @Output() onReply = new EventEmitter();
@@ -84,7 +96,9 @@ export class CommentComponent implements OnChanges {
     public translationService: TranslationService,
     private overlayModal: OverlayModalService,
     private cd: ChangeDetectorRef,
-    private timeDiffService: TimeDiffService
+    private router: Router,
+    private timeDiffService: TimeDiffService,
+    protected featuresService: FeaturesService
   ) {}
 
   ngOnInit() {
@@ -300,4 +314,50 @@ export class CommentComponent implements OnChanges {
       this.cd.detectChanges();
     }
   }
+
+  // * ATTACHMENT MEDIA MODAL  * ---------------------------------------------------------------------
+
+  setVideoDimensions($event) {
+    this.videoDimensions = $event.dimensions;
+    this.comment.custom_data.dimensions = this.videoDimensions;
+  }
+
+  setImageDimensions() {
+    const img: HTMLImageElement = this.batchImage.nativeElement;
+    this.comment.custom_data[0].width = img.naturalWidth;
+    this.comment.custom_data[0].height = img.naturalHeight;
+  }
+
+  clickedImage() {
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${this.comment.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
+      return;
+    }
+
+    if (!this.featuresService.has('media-modal')) {
+      this.router.navigate([pageUrl]);
+      return;
+    } else {
+      if (
+        this.comment.custom_data[0].width === '0' ||
+        this.comment.custom_data[0].height === '0'
+      ) {
+        this.setImageDimensions();
+      }
+      this.openModal();
+    }
+  }
+
+  openModal() {
+    this.comment.modal_source_url = this.router.url;
+
+    this.overlayModal
+      .create(MediaModalComponent, this.comment, {
+        class: 'm-overlayModal--media',
+      })
+      .present();
+  }
 }

src/app/modules/comments/comment/comment.component.html

@@ -138,7 +138,7 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
@@ -171,7 +171,7 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
@@ -196,6 +196,9 @@
             [torrent]="[
               { res: '360', key: comment.custom_data.guid + '/360.mp4' }
             ]"
+            [shouldPlayInModal]="true"
+            (videoMetadataLoaded)="setVideoDimensions($event)"
+            (mediaModalRequested)="openModal()"
           >
           </m-video>
         </div>
@@ -221,22 +224,21 @@
                 >explicit</i
               >
               <span i18n="@@M__COMMON__CONFIRM_18"
-                >Click to confirm your are 18+</span
+                >Click to confirm you are 18+</span
               >
             </span>
           </div>
-          <a
-            target="_blank"
-            [routerLink]="['/media', comment.attachment_guid]"
-            *ngIf="comment.attachment_guid"
-          >
+          <a *ngIf="comment.attachment_guid">
             <img
               [src]="comment.custom_data[0].src"
-              class="mdl-shadow--2dp"
               (error)="
                 comment.custom_data[0].src =
                   minds.cdn_assets_url + 'assets/logos/medium.png'
               "
+              *ngIf="comment.custom_data"
+              class="mdl-shadow--2dp"
+              (click)="clickedImage()"
+              #batchImage
             />
           </a>
 

src/app/modules/comments/comment/comment.component.ts

@@ -8,6 +8,7 @@ import {
   ChangeDetectionStrategy,
   OnChanges,
   Input,
+  ViewChild,
   ElementRef,
 } from '@angular/core';
 
@@ -22,6 +23,11 @@ import { CommentsListComponent } from '../list/list.component';
 import { TimeDiffService } from '../../../services/timediff.service';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
+import { Router } from '@angular/router';
+import { FeaturesService } from '../../../services/features.service';
+import { MindsVideoComponent } from '../../media/components/video/video.component';
+import { MediaModalComponent } from '../../media/modal/modal.component';
+import isMobile from '../../../helpers/is-mobile';
 
 @Component({
   selector: 'm-comment',
@@ -71,6 +77,11 @@ export class CommentComponentV2 implements OnChanges {
   translationInProgress: boolean;
   translateToggle: boolean = false;
   commentAge$: Observable<number>;
+
+  videoDimensions: Array<any> = null;
+  @ViewChild('player', { static: false }) player: MindsVideoComponent;
+  @ViewChild('batchImage', { static: false }) batchImage: ElementRef;
+
   @Input() canEdit: boolean = false;
   @Input() canDelete: boolean = false;
   @Input() hideToolbar: boolean = false;
@@ -85,7 +96,9 @@ export class CommentComponentV2 implements OnChanges {
     private overlayModal: OverlayModalService,
     private cd: ChangeDetectorRef,
     private timeDiffService: TimeDiffService,
-    private el: ElementRef
+    private el: ElementRef,
+    private router: Router,
+    protected featuresService: FeaturesService
   ) {}
 
   ngOnInit() {
@@ -310,4 +323,50 @@ export class CommentComponentV2 implements OnChanges {
       this.cd.detectChanges();
     }
   }
+
+  // * ATTACHMENT MEDIA MODAL  * ---------------------------------------------------------------------
+
+  setVideoDimensions($event) {
+    this.videoDimensions = $event.dimensions;
+    this.comment.custom_data.dimensions = this.videoDimensions;
+  }
+
+  setImageDimensions() {
+    const img: HTMLImageElement = this.batchImage.nativeElement;
+    this.comment.custom_data[0].width = img.naturalWidth;
+    this.comment.custom_data[0].height = img.naturalHeight;
+  }
+
+  clickedImage() {
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${this.comment.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
+      return;
+    }
+
+    if (!this.featuresService.has('media-modal')) {
+      this.router.navigate([pageUrl]);
+      return;
+    } else {
+      if (
+        this.comment.custom_data[0].width === '0' ||
+        this.comment.custom_data[0].height === '0'
+      ) {
+        this.setImageDimensions();
+      }
+      this.openModal();
+    }
+  }
+
+  openModal() {
+    this.comment.modal_source_url = this.router.url;
+
+    this.overlayModal
+      .create(MediaModalComponent, this.comment, {
+        class: 'm-overlayModal--media',
+      })
+      .present();
+  }
 }

src/app/modules/jobs/marketing/marketing.component.html

@@ -52,6 +52,15 @@
                 View (PDF)
               </a>
             </li>
+            <li>
+              Site Admin -
+              <a
+                href="https://cdn-assets.minds.com/jobs/admin.pdf"
+                target="_blank"
+              >
+                View (PDF)
+              </a>
+            </li>
           </ul>
         </div>
         <div

src/app/modules/legacy/components/buttons/buttons.scss

@@ -71,24 +71,23 @@ minds-button-remind {
 
 .minds-boost-button {
   font-size: 12px;
+  font-weight: 400;
   height: auto;
   min-height: 0;
   line-height: 18px;
-  text-transform: capitalize;
+  text-transform: uppercase;
   align-self: center;
   padding: 3px 0;
-  min-width: 62px;
+  min-width: 72px;
   width: auto;
   margin: -3px 0;
   display: block;
-  @include m-theme() {
-    background-color: themed($m-blue) !important;
-  }
+  flex: 0 !important;
 
-  &:hover {
-    @include m-theme() {
-      background-color: rgba(themed($m-blue-dark), 0.9) !important;
-    }
+  span {
+    min-width: 72px;
+    text-align: center;
+    vertical-align: middle;
   }
 }
 

src/app/modules/legacy/components/cards/activity/activity.component.scss

 .tabs .m-wire-button {
-  transform: scale(0.8) translateY(-4px);
+  //  transform: scale(0.8) translateY(-4px);
+  margin: -3px 0;
 }
 .m-pin-button {
   overflow: visible;
@@ -94,9 +95,9 @@ minds-activity {
     padding-left: 8px;
     margin: auto;
 
-    padding: 3px 0 3px 8px;
+    padding: 2px 0 2px 8px;
     font-size: 14px;
-    line-height: 9px;
+    line-height: 8px;
     border-radius: 3px;
     vertical-align: middle;
     display: flex;
@@ -124,7 +125,7 @@ minds-activity {
   }
 
   .m-activity--metrics-metric {
-    font-size: 10px;
+    font-size: 9px;
     display: inline-block;
     vertical-align: middle;
 

src/app/modules/legacy/components/cards/activity/activity.html

@@ -210,9 +210,7 @@
           i18n-title="@@M__COMMON__MATURE_CONTENT"
           >explicit</i
         >
-        <span i18n="@@M__COMMON__CONFIRM_18"
-          >Click to confirm your are 18+</span
-        >
+        <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
       </span>
     </div>
     <minds-rich-embed [src]="activity" [maxheight]="480"></minds-rich-embed>
@@ -283,9 +281,7 @@
           i18n-title="@@M__COMMON__MATURE_CONTENT"
           >explicit</i
         >
-        <span i18n="@@M__COMMON__CONFIRM_18"
-          >Click to confirm your are 18+</span
-        >
+        <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
       </span>
     </div>
 
@@ -298,9 +294,9 @@
       [guid]="activity.custom_data.guid"
       [playCount]="activity['play:count']"
       [torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
-      [isActivity]="true"
+      [shouldPlayInModal]="true"
       (videoMetadataLoaded)="setVideoDimensions($event)"
-      (mediaModalRequested)="clickedVideo()"
+      (mediaModalRequested)="openModal()"
       #player
     >
       <video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
@@ -321,9 +317,7 @@
           i18n-title="@@M__COMMON__MATURE_CONTENT"
           >explicit</i
         >
-        <span i18n="@@M__COMMON__CONFIRM_18"
-          >Click to confirm your are 18+</span
-        >
+        <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
       </span>
     </div>
 
@@ -349,9 +343,7 @@
           i18n-title="@@M__COMMON__MATURE_CONTENT"
           >explicit</i
         >
-        <span i18n="@@M__COMMON__CONFIRM_18"
-          >Click to confirm your are 18+</span
-        >
+        <span i18n="@@M__COMMON__CONFIRM_18">Click to confirm you are 18+</span>
       </span>
     </div>
     <a class="m-activity--image-link">
@@ -400,28 +392,28 @@
   <minds-button-thumbs-up [object]="activity"></minds-button-thumbs-up>
   <minds-button-thumbs-down [object]="activity"></minds-button-thumbs-down>
   <m-wire-button
-    *ngIf="session.getLoggedInUser().guid != (activity.remind_object ? activity.remind_object.owner_guid : activity.owner_guid)"
-    [object]="activity.remind_object ? activity.remind_object : activity"
+    *ngIf="session.getLoggedInUser().guid != activity.owner_guid"
+    [object]="activity"
     (done)="wireSubmitted($event)"
   ></m-wire-button>
+  <button
+    class="m-btn m-btn--action m-btn--slim minds-boost-button"
+    *ngIf="session.getLoggedInUser().guid == activity.owner_guid"
+    id="boost-actions"
+    (click)="showBoost()"
+  >
+    <span i18n="verb|@@M__ACTION__BOOST">Boost</span>
+  </button>
   <minds-button-comment
     [object]="activity"
     (click)="openComments()"
   ></minds-button-comment>
   <minds-button-remind [object]="activity"></minds-button-remind>
-  <a
-    class="mdl-button mdl-color-text--white mdl-button--colored minds-boost-button"
-    *ngIf="session.getLoggedInUser().guid == activity.owner_guid"
-    id="boost-actions"
-    (click)="showBoost()"
-  >
-    <ng-container i18n="verb|@@M__ACTION__BOOST">Boost</ng-container>
-  </a>
 </div>
+
 <!-- Activity metrics -->
 <div
-  class="impressions-tag m-activity--metrics"
-  [class.m-activity--metrics-wire]="!session.getLoggedInUser() || session.getLoggedInUser().guid != activity.owner_guid"
+  class="impressions-tag m-activity--metrics m-activity--metrics-wire"
   *ngIf="!activity.hide_impressions && !hideTabs"
 >
   <div class="m-activity--metrics-inner m-border">

src/app/modules/legacy/components/cards/activity/activity.ts

@@ -502,6 +502,7 @@ export class Activity implements OnInit {
 
   setVideoDimensions($event) {
     this.videoDimensions = $event.dimensions;
+    this.activity.custom_data.dimensions = this.videoDimensions;
   }
 
   setImageDimensions() {
@@ -511,18 +512,18 @@ export class Activity implements OnInit {
   }
 
   clickedImage() {
-    // Check if is mobile (not tablet)
-    if (isMobile() && Math.min(screen.width, screen.height) < 768) {
-      this.goToMediaPage();
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${this.activity.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
       return;
     }
 
     if (!this.featuresService.has('media-modal')) {
-      // Non-canary
-      this.goToMediaPage();
+      this.router.navigate([pageUrl]);
       return;
     } else {
-      // Canary
       if (
         this.activity.custom_data[0].width === '0' ||
         this.activity.custom_data[0].height === '0'
@@ -533,13 +534,6 @@ export class Activity implements OnInit {
     }
   }
 
-  clickedVideo() {
-    // Already filtered out mobile users/non-canary in video.component.ts
-    // So this is just applicable to desktop/tablet in canary and should always show modal
-    this.activity.custom_data.dimensions = this.videoDimensions;
-    this.openModal();
-  }
-
   openModal() {
     this.activity.modal_source_url = this.router.url;
 
@@ -550,10 +544,6 @@ export class Activity implements OnInit {
       .present();
   }
 
-  goToMediaPage() {
-    this.router.navigate([`/media/${this.activity.entity_guid}`]);
-  }
-
   detectChanges() {
     this.cd.markForCheck();
     this.cd.detectChanges();

src/app/modules/legacy/components/cards/remind/remind.ts

@@ -166,6 +166,7 @@ export class Remind {
 
   setVideoDimensions($event) {
     this.videoDimensions = $event.dimensions;
+    this.activity.custom_data.dimensions = this.videoDimensions;
   }
 
   setImageDimensions() {
@@ -175,14 +176,15 @@ export class Remind {
   }
 
   clickedImage() {
-    // Check if is mobile (not tablet)
-    if (isMobile() && Math.min(screen.width, screen.height) < 768) {
-      this.goToMediaPage();
+    const isNotTablet = Math.min(screen.width, screen.height) < 768;
+    const pageUrl = `/media/${this.activity.entity_guid}`;
+
+    if (isMobile() && isNotTablet) {
+      this.router.navigate([pageUrl]);
     }
 
     if (!this.featuresService.has('media-modal')) {
-      // Non-canary
-      this.goToMediaPage();
+      this.router.navigate([pageUrl]);
     } else {
       // Canary
       if (
@@ -195,13 +197,6 @@ export class Remind {
     }
   }
 
-  clickedVideo() {
-    // Already filtered out mobile users/non-canary in video.component.ts
-    // So this is just applicable to desktop/tablet in canary and should always show modal
-    this.activity.custom_data.dimensions = this.videoDimensions;
-    this.openModal();
-  }
-
   openModal() {
     this.activity.modal_source_url = this.router.url;
 
@@ -211,8 +206,4 @@ export class Remind {
       })
       .present();
   }
-
-  goToMediaPage() {
-    this.router.navigate([`/media/${this.activity.entity_guid}`]);
-  }
 }

src/app/modules/media/components/video/video.component.spec.ts

@@ -214,7 +214,7 @@ describe('MindsVideo', () => {
     // video.src = 'thisisavideo.mp4';
     const video = new HTMLVideoElementMock();
     comp.playerRef.getPlayer = () => <any>video;
-    comp.isActivity = false;
+    comp.shouldPlayInModal = false;
     comp.showControls = true;
 
     fixture.detectChanges(); // re-render