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>