Skip to content
Commits on Source (2)
......@@ -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();
}
......
......@@ -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();
}
......
......@@ -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>
......
......@@ -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;
......
......@@ -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();
......
......@@ -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;
}
}
......
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 {
......