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

@@ -479,7 +479,7 @@ export class Activity implements OnInit {
  openModal() {
  this.activity.modal_source_url = this.router.url;
 
- this.overlayModal.create(MediaModalComponent, this.activity, {
+ this.overlayModal.create(MediaModalComponent, { entity: this.activity }, {
  class: 'm-overlayModal--media'
  }).present();
  }

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

@@ -187,7 +187,7 @@ export class Remind {
  openModal() {
  this.activity.modal_source_url = this.router.url;
 
- this.overlayModal.create(MediaModalComponent, this.activity, {
+ this.overlayModal.create(MediaModalComponent, { entity: this.activity }, {
  class: 'm-overlayModal--media'
  }).present();
  }

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

@@ -21,9 +21,34 @@
 
  <!-- MEDIA STAGE -->
  <div class="m-mediaModal__stage">
+
+ <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--blog"
+ *ngIf="entityType === 'blog'"
+ [style.width]="mediaWidth + 'px'"
+ [style.height]="mediaHeight + 'px'"
+ >
+ <!-- [@slowFadeAnimation]="isLoading ? 'out' : 'in'" -->
+
+ <minds-banner [src]="entity.thumbnail_src" [object]="entity" *ngIf="entity.header_bg"></minds-banner>
+ <div class="mdl-grid" style="max-width:740px">
+ <div class="mdl-grid" style="width:100%">
+ <div class="mdl-cell mdl-cell--12-col">
+ <h1 class="m-blog--title">{{entity.title}}</h1>
+ </div>
+ </div>
+
+ <div style="width:100%; padding:8px; position:relative;">
+ <div class="mdl-cell mdl-cell--12-col minds-blog-body"
+ [innerHtml]="entity.description | safe"
+ [hidden]="!entity.description"
+ ></div>
+ </div>
+ </div>
+ </div>
+
  <!-- MEDIA: IMAGE -->
  <div class="m-mediaModal__mediaWrapper m-mediaModal__mediaWrapper--image"
- *ngIf="!isVideo"
+ *ngIf="!isVideo && entityType === 'image'"
  [style.width]="mediaWidth + 'px'"
  [style.height]="mediaHeight + 'px'"
  [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
@@ -55,6 +80,7 @@
  [torrent]="[{ res: '360', key: entity.custom_data.guid + '/360.mp4' }]"
  (videoCanPlayThrough)="isLoaded()"
  [@slowFadeAnimation]="isLoading ? 'out' : 'in'"
+ #player
  >
  <video-ads [player]="player" *ngIf="entity.monetized"></video-ads>
  </m-video>

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

@@ -100,6 +100,48 @@ m-overlay-modal {
  }
 }
 
+.m-mediaModal__mediaWrapper--blog {
+ line-height: initial;
+ overflow-y: auto;
+ text-align: left;
+
+ @include m-theme() {
+ color: themed($m-white-always);
+ }
+
+ h1.m-blog--title {
+ font-weight: 600;
+ font-size: 42px;
+ letter-spacing: 1.5px;
+ font-family: 'Roboto', Helvetica, sans-serif;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ text-align: left;
+ }
+
+ p {
+ @include m-theme() {
+ color: themed($m-white-always);
+ }
+ }
+
+ .minds-blog-body img {
+ @media screen and (max-width: 891px) {
+ width: 100vw;
+ }
+ max-width: initial;
+ height: auto;
+ width: 80%;
+ margin: 0 -100px;
+ }
+
+ .m-blog--image--caption {
+ @include m-theme() {
+ color: themed($m-white-always);
+ }
+ }
+}
+
 .m-mediaModal__stage {
  display: flex;
  align-items:center;

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

@@ -9,6 +9,11 @@ import { AnalyticsService } from '../../../services/analytics';
 import { MindsVideoComponent } from '../components/video/video.component';
 import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
 
+export type MediaModalParams = {
+ redirectUrl?: string,
+ entity: any,
+};
+
 @Component({
  selector: 'm-media--modal',
  templateUrl: 'modal.component.html',
@@ -40,14 +45,17 @@ import isMobileOrTablet from '../../../helpers/is-mobile-or-tablet';
 
 export class MediaModalComponent implements OnInit, OnDestroy {
  minds = window.Minds;
+
  entity: any = {};
+ redirectUrl: string;
  isLoading: boolean = true;
  navigatedAway: boolean = false;
  fullscreenHovering: boolean = false; // Used for fullscreen button transformation
 
  isTablet: boolean = false;
  isFullscreen: boolean = false;
- isVideo: boolean = false; // Otherwise it's an image
+ isVideo: boolean = false;
+ entityType: string;
 
  aspectRatio: number;
  modalWidth: number;
@@ -83,8 +91,9 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  routerSubscription: Subscription;
 
- @Input('entity') set data(entity) {
- this.entity = entity;
+ @Input('entity') set data(params: MediaModalParams) {
+ this.entity = params.entity;
+ this.redirectUrl = params.redirectUrl || null;
  this.entityWidth = 0;
  this.entityHeight = 0;
  }
@@ -139,13 +148,24 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  this.isTablet = isMobileOrTablet() && Math.min(screen.width, screen.height) >= 768;
 
  this.isVideo = this.entity.custom_type === 'video';
+ this.entityType = this.entity.custom_type || this.getEntityType(this.entity);
 
- this.analyticsService.send('pageview', {url: `/media/${this.entity.entity_guid}?ismodal=true`});
+ if (this.entityType === 'blog') {
+ this.isLoaded();
+ }
+
+ this.analyticsService.send('pageview', { url: `/media/${this.entity.entity_guid}?ismodal=true` });
 
  // * LOCATION & ROUTING * -----------------------------------------------------------------------------------
  // Change the url to point to media page so user can easily share link
  // (but don't actually redirect)
- this.location.replaceState(`/media/${this.entity.entity_guid}`);
+ if (this.redirectUrl) {
+ this.location.replaceState(this.redirectUrl);
+ } else if (this.entityType === 'blog') {
+ this.location.replaceState(`/blog/${this.entity.slug}-${this.entity.guid}`);
+ } else {
+ this.location.replaceState(`/media/${this.entity.entity_guid}`);
+ }
 
  // When user clicks a link from inside the modal
  this.routerSubscription = this.router.events.subscribe((event: Event) => {
@@ -167,11 +187,15 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  // * DIMENSION CALCULATIONS * ---------------------------------------------------------------------
 
- if (!this.isVideo) {
+ if (!this.isVideo && this.entityType === 'image') {
  // Image
  this.entityWidth = this.entity.custom_data[0].width;
  this.entityHeight = this.entity.custom_data[0].height;
  this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
+ } else if(this.entityType === 'blog') {
+ this.entityWidth = this.entity.custom_data[0].dimensions.width;
+ this.entityHeight = this.entity.custom_data[0].dimensions.height;
+ this.thumbnail = `${this.minds.cdn_url}fs/v1/thumbnail/${this.entity.entity_guid}/xlarge`;
  } else {
  this.entityWidth = this.entity.custom_data.dimensions.width;
  this.entityHeight = this.entity.custom_data.dimensions.height;
@@ -434,6 +458,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  }
  }
 
+ getEntityType(entity: any) {
+ return entity.type === 'object' ? `${entity.type}:${entity.subtype}` : entity.type;
+ }
+
  ngOnDestroy() {
  if (this.routerSubscription) {
  this.routerSubscription.unsubscribe();

src/app/modules/pro/channel/channel.service.ts

@@ -5,7 +5,6 @@ import { Client } from '../../../services/api/client';
 import { EntitiesService } from '../../../common/services/entities.service';
 import normalizeUrn from '../../../helpers/normalize-urn';
 import { OverlayModalService } from '../../../services/ux/overlay-modal';
-import { BlogView } from "../../blogs/view/view";
 import { Session } from '../../../services/session';
 import { ActivatedRoute } from '@angular/router';
 
@@ -180,9 +179,6 @@ export class ProChannelService {
  case 'group':
  window.open(`${window.Minds.site_url}groups/profile/${entity.guid}`, '_blank');
  break;
- case 'object:blog':
- modalServiceContext.create(BlogView, entity).present();
- break;
  }
  }
 

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

 import { ChangeDetectionStrategy, Component, ElementRef, HostListener, Input, ViewChild } from '@angular/core';
-import { MediaModalComponent } from "../../../../media/modal/modal.component";
+import { MediaModalComponent, MediaModalParams } from "../../../../media/modal/modal.component";
 import { FeaturesService } from "../../../../../services/features.service";
 import { OverlayModalService } from "../../../../../services/ux/overlay-modal";
 import { Router } from "@angular/router";
@@ -61,10 +61,8 @@ export class ProTileComponent {
  switch (this.getType(this.entity)) {
  case 'object:image':
  case 'object:video':
- this.showMediaModal();
- break;
  case 'object:blog':
- this.channelService.open(this.entity, this.modalService);
+ this.showMediaModal();
  break;
  }
  }
@@ -88,7 +86,13 @@ export class ProTileComponent {
 
  activity.modal_source_url = this.router.url;
 
- this.modalService.create(MediaModalComponent, activity, {
+ const params: MediaModalParams = { entity: activity };
+
+ if (window.Minds.pro && this.getType(this.entity) === 'object:blog') {
+ params.redirectUrl = `/blog/${this.entity.slug}-${this.entity.guid}`;
+ }
+
+ this.modalService.create(MediaModalComponent, params, {
  class: 'm-overlayModal--media'
  }).present();
  } else {