(feat): Media modal - click video auto opens modal

src/app/modules/media/components/video/players/direct-http.component.html

 <video
  [src]="src"
- (click)="toggle()"
+ (click)="requestMediaModal()"
  [autoplay]="autoplay"
  [poster]="poster"
  [muted]="muted"

src/app/modules/media/components/video/players/direct-http.component.ts

@@ -2,7 +2,9 @@ import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
  ViewChild
 } from '@angular/core';
+import { Router } from '@angular/router';
 import { MindsPlayerInterface } from './player.interface';
+import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
  moduleId: module.id,
@@ -16,6 +18,7 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  @Input() muted: boolean = false;
  @Input() poster: string = '';
  @Input() autoplay: boolean = false;
+ @Input() guid: string;
 
  src: string;
  @Input('src') set _src(src: string) {
@@ -35,13 +38,14 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  @Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onError: EventEmitter<{ player: HTMLVideoElement, e }> = new EventEmitter();
+ @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
 
  loading: boolean = false;
 
  constructor(
- protected cd: ChangeDetectorRef
+ protected cd: ChangeDetectorRef,
+ private router: Router,
  ) { }
-
  protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
  protected _emitPause = () => this.onPause.emit(this.getPlayer());
  protected _emitEnd = () => this.onEnd.emit(this.getPlayer());
@@ -170,4 +174,12 @@ export class MindsVideoDirectHttpPlayer implements OnInit, OnDestroy, MindsPlaye
  this.cd.markForCheck();
  this.cd.detectChanges();
  }
+
+ requestMediaModal() {
+ // Mobile users go to media page instead of modal
+ if (isMobile()) {
+ this.router.navigate([`/media/${this.guid}`]);
+ }
+ this.triggerMediaModal.emit();
+ }
 }

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

 <video
- (click)="toggle()"
+ (click)="requestMediaModal()"
  [poster]="poster"
  [muted]="muted"
  preload="none"

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

@@ -3,10 +3,12 @@ import {
  ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Input, OnDestroy, OnInit, Output,
  ViewChild
 } from '@angular/core';
+import { Router } from '@angular/router';
 import { MindsPlayerInterface } from './player.interface';
 import { WebtorrentService } from '../../../../webtorrent/webtorrent.service';
 import { Client } from '../../../../../services/api/client';
 import base64ToBlob from '../../../../../helpers/base64-to-blob';
+import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
  moduleId: module.id,
@@ -20,6 +22,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  @Input() muted: boolean = false;
  @Input() poster: string = '';
  @Input() autoplay: boolean = false;
+ @Input() guid: string;
 
  src: string;
  @Input('src') set _src(src: string) {
@@ -38,6 +41,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  @Output() onPause: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onEnd: EventEmitter<HTMLVideoElement> = new EventEmitter();
  @Output() onError: EventEmitter<{ player, e }> = new EventEmitter();
+ @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
 
  initialized: boolean = false;
  loading: boolean = false;
@@ -61,6 +65,7 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  protected cd: ChangeDetectorRef,
  protected client: Client,
  protected webtorrent: WebtorrentService,
+ private router: Router,
  ) { }
 
  protected _emitPlay = () => this.onPlay.emit(this.getPlayer());
@@ -353,4 +358,11 @@ export class MindsVideoTorrentPlayer implements OnInit, AfterViewInit, OnDestroy
  this.torrentReady = false;
  }
  }
+ requestMediaModal() {
+ // Mobile users go to media page instead of modal
+ if (isMobile()) {
+ this.router.navigate([`/media/${this.guid}`]);
+ }
+ this.triggerMediaModal.emit();
+ }
 }

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

@@ -5,6 +5,7 @@
  [poster]="poster"
  [muted]="muted"
  [autoplay]="autoplay"
+ [guid]="guid"
  (onPlay)="onPlay()"
  (onPause)="onPause()"
  (onEnd)="onEnd()"
@@ -18,6 +19,7 @@
  [poster]="poster"
  [muted]="muted"
  [autoplay]="autoplay"
+ [guid]="guid"
  (onPlay)="onPlay()"
  (onPause)="onPause()"
  (onEnd)="onEnd()"

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

 import { Component, ElementRef, Input, Output, EventEmitter, ViewChild, ChangeDetectorRef } from '@angular/core';
-import { Router } from '@angular/router';
+// import { Router } from '@angular/router';
 import { MindsVideoProgressBar } from './progress-bar/progress-bar.component';
 import { MindsVideoVolumeSlider } from './volume-slider/volume-slider.component';
 
@@ -8,7 +8,7 @@ import { ScrollService } from '../../../../services/ux/scroll';
 import { MindsPlayerInterface } from './players/player.interface';
 import { WebtorrentService } from '../../../webtorrent/webtorrent.service';
 import { SOURCE_CANDIDATE_PICK_ZIGZAG, SourceCandidates } from './source-candidates';
-import isMobile from '../../../../helpers/is-mobile';
+// import isMobile from '../../../../helpers/is-mobile';
 
 @Component({
  selector: 'm-video',
@@ -26,7 +26,7 @@ export class MindsVideoComponent {
  @Input() poster: string = '';
 
  @Output('finished') finished: EventEmitter<any> = new EventEmitter();
- @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
+ // @Output() triggerMediaModal: EventEmitter<any> = new EventEmitter();
 
  @ViewChild('progressBar', { static: false }) progressBar: MindsVideoProgressBar;
  @ViewChild('volumeSlider', { static: false }) volumeSlider: MindsVideoVolumeSlider;
@@ -73,7 +73,7 @@ export class MindsVideoComponent {
  public client: Client,
  protected webtorrent: WebtorrentService,
  protected cd: ChangeDetectorRef,
- private router: Router,
+ // private router: Router,
  ) { }
 
  ngOnInit() {
@@ -327,18 +327,15 @@ export class MindsVideoComponent {
  }
  }
 
- requestMediaModal() {
- // TODO OJM
- // this should be triggered on play
-
- // this.playerRef.pause(); //no need anymore
- // Mobile users go to media page instead of modal
- if (isMobile()) {
- this.router.navigate([`/media/${this.guid}`]);
- }
+ // requestMediaModal() {
+ // // this.playerRef.pause(); //no need anymore
+ // // Mobile users go to media page instead of modal
+ // if (isMobile()) {
+ // this.router.navigate([`/media/${this.guid}`]);
+ // }
 
- this.triggerMediaModal.emit();
- }
+ //  this.triggerMediaModal.emit();
+ // }
 
  detectChanges() {
  this.cd.markForCheck();

src/app/modules/media/modal/modal.component.html

@@ -27,7 +27,7 @@
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  >
- <img [src]="entity.thumbnail"
+ <img [src]="thumbnail"
  (load)="inProgress = !inProgress"
 
  [style.height]="entity.height + 'px'"
@@ -62,7 +62,7 @@
  <div class="m-mediaModal__overlayTitleWrapper">
  <!-- TITLE -->
  <span class="m-mediaModal__overlayTitle m-mediaModal__overlayTitle--notFullscreen" *ngIf="!isFullscreen">
- <a [routerLink]="['/media', entity.entity_guid]">{{entity.title}}</a>
+ <a [routerLink]="['/media', entity.entity_guid]">{{title}}</a>
  </span>
  <!-- TITLE: FULLSCREEN -->
  <span class="m-mediaModal__overlayTitle m-mediaModal__overlayTitle--fullscreen" *ngIf="isFullscreen">
@@ -71,7 +71,7 @@
  <span title={{entity.ownerObj.name}}>{{entity.ownerObj.name}}</span>
  </a>
  <div class="m-mediaModal__overlayTitleSeparator"></div>
- <a [routerLink]="['/media', entity.entity_guid]">{{entity.title}}</a>
+ <a [routerLink]="['/media', entity.entity_guid]">{{title}}</a>
  </span>
  </div>
  <!-- FULLSCREEN BUTTON -->

src/app/modules/media/modal/modal.component.ts

@@ -48,6 +48,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  maxHeight: number;
  minStageHeight: number;
 
+ title: string = '';
+ thumbnail: string = '';
+ boosted: boolean = false;
+
  isOpen: boolean = false; // Used for backdrop click detection hack
  isOpenTimeout: any = null; // Used for backdrop click detection hack
 
@@ -74,16 +78,16 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  // this.isTablet = isMobileOrTablet() && !isMobile();
 
- this.entity.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
- this.entity.boosted = this.entity.boosted || this.entity.p2p_boosted;
+ this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
+ this.boosted = this.entity.boosted || this.entity.p2p_boosted;
 
  // Set title
  if ( !this.entity.title ) {
  if ( !this.entity.message ) {
  // ? is there ever a case where there is a message but no title?
- this.entity.title = `${this.entity.ownerObj.name}'s post`;
+ this.title = `${this.entity.ownerObj.name}'s post`;
  } else {
- this.entity.title = this.entity.message;
+ this.title = this.entity.message;
  }
  }