(feat): media modal shouldn't take whole screen space

(fix): bunch of fixes to media modal

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

-import {
- Component,
- OnInit,
- OnDestroy,
- Input,
- HostListener,
- ViewChild,
-} from '@angular/core';
+import { Component, HostListener, Input, OnDestroy, OnInit, ViewChild, } from '@angular/core';
 import { Location } from '@angular/common';
-import { Router, Event, NavigationStart } from '@angular/router';
-import {
- trigger,
- state,
- style,
- animate,
- transition,
-} from '@angular/animations';
+import { Event, NavigationStart, Router } from '@angular/router';
+import { animate, state, style, transition, trigger, } from '@angular/animations';
 import { Subscription } from 'rxjs';
 import { Session } from '../../../services/session';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
@@ -129,14 +116,20 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  this.entity.message ||
  this.entity.title ||
  `${this.entity.ownerObj.name}'s post`;
+
  this.entity.guid = this.entity.entity_guid || this.entity.guid;
  this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
+
  switch (this.entity.custom_type) {
  case 'video':
  this.contentType = 'video';
+ this.entity.width = this.entity.custom_data.width;
+ this.entity.height = this.entity.custom_data.height;
  break;
  case 'batch':
  this.contentType = 'image';
+ this.entity.width = this.entity.custom_data[0].width;
+ this.entity.height = this.entity.custom_data[0].height;
  }
  break;
  case 'object':
@@ -144,15 +137,16 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  case 'video':
  this.contentType = 'video';
  this.title = this.entity.title;
+ this.entity.entity_guid = this.entity.guid;
  break;
  case 'image':
  this.contentType = 'image';
  this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.guid}/xlarge`;
+ this.entity.entity_guid = this.entity.guid;
  break;
  case 'blog':
  this.contentType = 'blog';
  this.title = this.entity.title;
- this.entity.guid = this.entity.guid;
  this.entity.entity_guid = this.entity.guid;
  }
  break;
@@ -221,16 +215,14 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  switch (this.contentType) {
  case 'video':
- this.entityWidth = this.entity.custom_data.dimensions.width;
- this.entityHeight = this.entity.custom_data.dimensions.height;
- break;
  case 'image':
- this.entityWidth = this.entity.custom_data[0].width;
- this.entityHeight = this.entity.custom_data[0].height;
+ this.entityWidth = this.entity.width;
+ this.entityHeight = this.entity.height;
  break;
  case 'blog':
- this.entityWidth = window.innerWidth;
- this.entityHeight = window.innerHeight;
+ this.entityWidth = window.innerWidth * 0.6;
+ this.entityHeight = window.innerHeight * 0.6;
+ break;
  }
 
  this.aspectRatio = this.entityWidth / this.entityHeight;
@@ -248,11 +240,11 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  if (this.contentType === 'blog') {
  this.mediaHeight = Math.max(
  this.minStageHeight,
- window.innerHeight - this.padding * 2
+ window.innerHeight * 0.9 - this.padding * 2
  );
  this.mediaWidth = Math.max(
  this.minStageWidth,
- window.innerWidth - this.contentWidth - this.padding * 2
+ window.innerWidth * 0.9 - this.contentWidth - this.padding * 2
  );
  this.stageHeight = this.mediaHeight;
  this.stageWidth = this.mediaWidth;
@@ -395,6 +387,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  scaleHeight() {
  return Math.round(this.mediaWidth / this.aspectRatio);
  }
+
  scaleWidth() {
  return Math.round(this.mediaHeight * this.aspectRatio);
  }

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

@@ -17,6 +17,7 @@
  [torrent]="[{ res: '360', key: entity.guid + '/360.mp4' }]"
  (videoMetadataLoaded)="setVideoDimensions($event)"
  (mediaModalRequested)="tileClicked()"
+ [shouldPlayInModal]="true"
  #player
  ></m-video>
 

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

@@ -12,7 +12,6 @@ import {
 import { FeaturesService } from '../../../../../services/features.service';
 import { OverlayModalService } from '../../../../../services/ux/overlay-modal';
 import { Router } from '@angular/router';
-import toMockActivity from '../../util/mock-activity';
 import { ProChannelService } from '../../channel.service';
 import isMobile from '../../../../../helpers/is-mobile';
 
@@ -25,14 +24,15 @@ export class ProTileComponent {
  @Input() entity: any;
  @ViewChild('img', { static: false }) img: ElementRef;
 
- videoDimensions: Array<any> = null;
+ videoDimensions: any = null;
 
  constructor(
  protected featuresService: FeaturesService,
  protected channelService: ProChannelService,
  protected modalService: OverlayModalService,
  protected router: Router
- ) {}
+ ) {
+ }
 
  getType(entity: any) {
  return entity.type === 'object'
@@ -82,6 +82,9 @@ export class ProTileComponent {
 
  goToEntityPage(entity: any) {
  switch (this.getType(entity)) {
+ case 'activity':
+ this.router.navigate([`/newsfeed/${entity.guid}`]);
+ break;
  case 'object:image':
  case 'object:video':
  this.router.navigate([`/media/${entity.guid}`]);
@@ -96,31 +99,36 @@ export class ProTileComponent {
  }
  }
 
+ getEntityType(entity: any) {
+ return entity.type === 'object'
+ ? `${entity.type}:${entity.subtype}`
+ : entity.type;
+ }
+
  showMediaModal() {
- const activity = toMockActivity(
- this.entity,
- this.entity.subtype === 'video' ? this.videoDimensions : null
- );
+ const isNotTablet = Math.min(screen.width, screen.height) < 768;
+
  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) {
+ if (isMobile() && isNotTablet) {
  this.goToEntityPage(this.entity);
  return;
  }
 
- if (activity.custom_type === 'video') {
- activity.custom_data.dimensions = this.videoDimensions;
- } else if (activity.custom_type === 'image') {
+ if (this.getEntityType(this.entity) === 'object:video') {
+ this.entity.width = this.videoDimensions.width;
+ this.entity.height = this.videoDimensions.height;
+ } else if (this.getEntityType(this.entity) === 'object:image') {
  // Image
  // Set image dimensions if they're not already there
  const img: HTMLImageElement = this.img.nativeElement;
- activity.custom_data[0].width = img.naturalWidth;
- activity.custom_data[0].height = img.naturalHeight;
+ this.entity.width = img.naturalWidth;
+ this.entity.height = img.naturalHeight;
  }
 
- activity.modal_source_url = this.router.url;
+ this.entity.modal_source_url = this.router.url;
 
- const params: MediaModalParams = { entity: activity };
+ const params: MediaModalParams = { entity: this.entity };
 
  if (window.Minds.pro && this.getType(this.entity) === 'object:blog') {
  params.redirectUrl = `/blog/${this.entity.slug}-${this.entity.guid}`;
@@ -132,7 +140,7 @@ export class ProTileComponent {
  })
  .present();
  } else {
- this.router.navigate([`/media/${activity.entity_guid}`]);
+ this.goToEntityPage(this.entity);
  }
  }
 }

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, dimensions?: any) {
- let obj = {
- ...entity,
- entity_guid: entity.guid,
- custom_type: entity.subtype,
- };
-
- if (entity.subtype === 'video') {
- obj.custom_data = {
- ...entity,
- dimensions: dimensions,
- };
- } else if (entity.subtype === 'blog') {
- obj.custom_data = [
- {
- ...entity,
- dimensions: {
- width: document.documentElement.clientWidth,
- height: document.documentElement.clientHeight,
- },
- },
- ];
- } else {
- obj.custom_data = [
- {
- ...entity,
- width: 0,
- height: 0,
- },
- ];
- }
-
- return obj;
-}
-
-class Translate {
- execute(entity: any) {}
-}
-
-class ImageTranslate extends Translate {
- execute(entity: any) {
- return {};
- }
-}