src/app/modules/hashtags/sidebar-selector/sidebar-selector.component.scss

@@ -218,7 +218,7 @@ m-hashtags--sidebar-selector {
     width: 48px;
     z-index: 1;
     @include m-theme(){
-      background: linear-gradient(to right, rgba(themed($m-white-always), 0) 0%, rgba(themed($m-body-bg), 1) 50%);
+      background: linear-gradient(to right, rgba(themed($m-white), 0) 0%, rgba(themed($m-body-bg), 1) 50%);
     }
 
     .m-hashtagsSidebarSelectorCompactListOverflow__Arrow {

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

@@ -175,7 +175,7 @@
           [torrent]="[{ res: '360', key: activity.custom_data.guid + '/360.mp4' }]"
           [isActivity]="true"
           (videoMetadataLoaded)="setVideoDimensions($event)"
-          (mediaModalRequested)="showMediaModal()"
+          (mediaModalRequested)="clickedVideo()"
           #player>
           <video-ads [player]="player" *ngIf="activity.monetized"></video-ads>
       </m-video>
@@ -212,7 +212,7 @@
         style="width:100%"
         (error)="activity.custom_data[0].src = minds.cdn_assets_url + 'assets/logos/placeholder-bulb.jpg'"
         *ngIf="activity.custom_data"
-        (click)="showMediaModal()"
+        (click)="clickedImage()"
         #batchImage
       >
     </a>

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

@@ -449,34 +449,45 @@ export class Activity implements OnInit {
     this.activity.custom_data[0].height = img.naturalHeight;
   }
 
-  showMediaModal() {
-    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) {
-        this.router.navigate([`/media/${this.activity.entity_guid}`]);
-      }
-
-      if (this.activity.custom_type === 'video') {
-        this.activity.custom_data.dimensions = this.videoDimensions;
-      } else { // Image
-        // Set image dimensions if they're not already there
-        if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
-          this.setImageDimensions();
-        }
-      }
-
-      this.activity.modal_source_url = this.router.url;
+  clickedImage() {
+    // Check if is mobile (not tablet)
+    if (isMobile() && Math.min(screen.width, screen.height) < 768) {
+      this.goToMediaPage();
+      return;
+    }
 
-      this.overlayModal.create(MediaModalComponent, this.activity, {
-        class: 'm-overlayModal--media'
-      }).present();
+    if (!this.featuresService.has('media-modal')) {
+      // Non-canary
+      this.goToMediaPage();
+      return;
     } else {
-      if (this.activity.custom_type !== 'video'){
-        this.router.navigate([`/media/${this.activity.entity_guid}`]);
+      // Canary
+      if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
+        this.setImageDimensions();
       }
+      this.openModal();
     }
   }
 
+  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;
+
+    this.overlayModal.create(MediaModalComponent, this.activity, {
+      class: 'm-overlayModal--media'
+    }).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

@@ -159,31 +159,40 @@ export class Remind {
     this.activity.custom_data[0].height = img.naturalHeight;
   }
 
-  showMediaModal() {
-    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) {
-        this.router.navigate([`/media/${this.activity.entity_guid}`]);
-      }
-
-      if (this.activity.custom_type === 'video') {
-        this.activity.custom_data.dimensions = this.videoDimensions;
-      } else { // Image
-        // Set image dimensions if they're not already there
-        if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
-          this.setImageDimensions();
-        }
-      }
-
-      this.activity.modal_source_url = this.router.url;
+  clickedImage() {
+    // Check if is mobile (not tablet)
+    if (isMobile() && Math.min(screen.width, screen.height) < 768) {
+      this.goToMediaPage();
+    }
 
-      this.overlayModal.create(MediaModalComponent, this.activity, {
-        class: 'm-overlayModal--media'
-      }).present();
+    if (!this.featuresService.has('media-modal')) {
+      // Non-canary
+      this.goToMediaPage();
     } else {
-      if (this.activity.custom_type !== 'video') {
-        this.router.navigate([`/media/${this.activity.entity_guid}`]);
+      // Canary
+      if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
+        this.setImageDimensions();
       }
+      this.openModal();
     }
   }
+
+  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;
+
+    this.overlayModal.create(MediaModalComponent, this.activity, {
+      class: 'm-overlayModal--media'
+    }).present();
+  }
+
+  goToMediaPage() {
+    this.router.navigate([`/media/${this.activity.entity_guid}`]);
+  }
 }

src/app/modules/media/components/video/video.component.html

@@ -12,7 +12,7 @@
     (onError)="onError()"
     (onCanPlayThrough)="onCanPlayThrough()"
     (onLoadedMetadata)="loadedMetadata()"
-    (click)="isModal ? toggle() : requestMediaModal()"
+    (click)="clickedVideo()"
     #player
   ></m-video--direct-http-player>
 
@@ -29,14 +29,14 @@
     (onError)="onError()"
     (onCanPlayThrough)="onCanPlayThrough()"
     (onLoadedMetadata)="loadedMetadata()"
-    (click)="isModal ? toggle() : requestMediaModal()"
+    (click)="clickedVideo()"
     #player
   ></m-video--torrent-player>
 
   <ng-container *ngIf="playerRef">
     <i *ngIf="(!playerRef.isPlaying() && !playerRef.isLoading()) || (isActivity && metadataLoaded && !playerRef.isPlaying())"
       class="material-icons minds-video-play-icon"
-      (click)="isModal ? toggle() : requestMediaModal()"
+      (click)="clickedVideo()"
     >play_circle_outline</i>
     <ng-content></ng-content>
 
@@ -97,7 +97,7 @@
         (select)="selectedQuality($event)"
       ></m-video--quality-selector>
 
-      <i *ngIf="!isModal" class="material-icons" (click)="playerRef.requestFullScreen()">tv</i>
+      <i *ngIf="!isModal && !isActivity" class="material-icons" (click)="toggleFullscreen($event)">tv</i>
     </div>
 
     <div class="m-video--torrent-info" *ngIf="torrentInfo && current.type === 'torrent'">

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

@@ -86,6 +86,7 @@ export class MindsVideoComponent implements OnDestroy {
   metadataLoaded: boolean = false;
   canPlayThrough: boolean = false;
   isFullscreen: boolean = false;
+  isMobile: boolean = false;
 
   current: { type: 'torrent' | 'direct-http', src: string };
   protected candidates: SourceCandidates = new SourceCandidates();
@@ -105,7 +106,7 @@ export class MindsVideoComponent implements OnDestroy {
     protected webtorrent: WebtorrentService,
     protected cd: ChangeDetectorRef,
     protected featuresService: FeaturesService,
-    private router: Router,
+    private router: Router
   ) { }
 
   ngOnInit() {
@@ -397,27 +398,23 @@ export class MindsVideoComponent implements OnDestroy {
     this.toggle();
   }
 
-  requestMediaModal() {
+  clickedVideo() {
     if (!this.metadataLoaded) {
       return;
     }
 
-    let isMediaPage = false;
-    if (!this.isModal && !this.isActivity) {
-      isMediaPage = true;
-    }
-
-    if (this.isModal || (!isMediaPage && !this.featuresService.has('media-modal'))) {
+    if (isMobile() && Math.min(screen.width, screen.height) < 768) {
+      this.isMobile = true;
       this.toggle();
       return;
     }
 
-    //  Mobile (not tablet) users go to media page instead of modal
-    if (isMobile() && !isMediaPage && Math.min(screen.width, screen.height) < 768) {
-      this.router.navigate([`/media/${this.guid}`]);
+    if (this.isActivity && this.featuresService.has('media-modal')){
+      this.mediaModalRequested.emit();
+      return;
     }
 
-    this.mediaModalRequested.emit();
+    this.toggle();
   }
 
   detectChanges() {
@@ -442,9 +439,10 @@ export class MindsVideoComponent implements OnDestroy {
     }
   }
 
-  toggleFullscreen() {
+  toggleFullscreen($event) {
+    // This will only work on the main video on a media page (not comment attachments)
+    // TODO: make this work on pages with more than one m-video (i.e. feeds)
     const elem = document.querySelector('m-video');
-    // this.fullscreenHovering = false;
 
     // If fullscreen is not already enabled
     if ( !document['fullscreenElement'] &&

src/app/modules/media/view/views/theatre.component.ts

@@ -42,7 +42,6 @@ import { MindsVideoComponent } from '../../components/video/video.component';
         [torrent]="[{ res: '720', key: object.guid + '/720.mp4' }, { res: '360', key: object.guid + '/360.mp4' }]"
         [log]="object.guid"
         [playCount]="false"
-        (click)="togglePlay($event)"
         #player>
         <video-ads [player]="player" *ngIf="object.monetized"></video-ads>