(feat): placeholder media modal

src/app/modules/pro/channel/content-modal/modal.component.html

-hola
+<div class="m-mediaModal mdl-shadow--4dp">
+ <!-- This is the element that goes into fullscreen -->
+ <!-- <div class="m-mediaModal__theater"> -->
+ <!-- Media: image -->
+ <div class="m-mediaModal__theater m-mediaModal__theater--image" *ngIf="entity.subtype === 'image'">
+ <img [src]="entity.thumbnail_src" (load)="inProgress = !inProgress"/>
+ <div class="mdl-spinner mdl-js-spinner is-active" [mdl] *ngIf="inProgress"></div>
+ <div class="m-mediaModal__theaterOverlay">
+ <a class="m-mediaModal__theaterOverlayTitle" [routerLink]="['/media', entity.entity_guid]">{{title}}</a>
+ <div class="m-mediaModal__fullscreenButton"
+ (click)="toggleFullscreen()"
+ (mouseenter)="hovering=true"
+ (mouseleave)="hovering=false"
+ [class.m-mediaModal__fullscreenButton--active]="hovering"
+ >
+ <i *ngIf="!isFullscreen" class="material-icons m-mediaModal__fullscreenIcon--enable">fullscreen</i>
+ <i *ngIf="isFullscreen" class="material-icons m-mediaModal__fullscreenIcon--disable">fullscreen_exit</i>
+ </div>
+ </div>
+ </div>
+ <!-- Media: video -->
+ <div class="m-mediaModal__theater m-mediaModal__theater--video" *ngIf="entity.subtype === 'video'">
+ <m-video
+ width="100%"
+ height="300px"
+ [muted]="false"
+ [poster]="entity.thumbnail_src"
+ [src]="[{ 'res': '360', 'uri': 'api/v1/media/' + entity.guid + '/play', 'type': 'video/mp4' }]"
+ [guid]="entity.guid"
+ [playCount]="entity['play:count']"
+ [torrent]="[{ res: '360', key: entity.guid + '/360.mp4' }]"
+ #player>
+ <video-ads [player]="player" *ngIf="entity.monetized"></video-ads>
+ </m-video>
+ </div>
+ <!-- </div> -->
+ <div class="m-mediaModal__contentWrapper">
+ <!-- Owner block -->
+ <div class="m-mediaModal__ownerBlock m-owner-block">
+ <div class="m-ownerBlockAvatar avatar" [hovercard]="entity.ownerObj.guid">
+ <a [routerLink]="['/', entity.ownerObj.username]">
+ <img [src]="minds.cdn_url + 'icon/' + entity.ownerObj.guid + '/medium/' + getOwnerIconTime()" class="mdl-shadow--2dp"/>
+ </a>
+ </div>
+ <div class="m-ownerBlockBody body">
+ <a class="m-ownerBlock__channelLink" [routerLink]="['/', entity.ownerObj.username]">
+ <strong title={{entity.ownerObj.name}}>{{entity.ownerObj.name}}</strong>
+ <m-channel--badges class="m-channel--badges-entity" [user]="entity.ownerObj" badges="[ 'admin', 'verified' ]"></m-channel--badges>
+ </a>
+ <a *ngIf="entity.containerObj && entity.containerObj.type == 'group'"
+ [routerLink]="['/groups/profile', entity.containerObj.guid]"
+ class="m-ownerBlock__groupLink mdl-color-text--blue-grey-300">
+ <strong>({{entity.containerObj.name}})</strong>
+ </a>
+ <!-- Permalink -->
+ <a [routerLink]="['/newsfeed', entity.guid]" class="permalink m-ownerBlock__permalink" *ngIf="entity.guid && !entity.remind_object">
+ <span class="m-ownerBlock__permalinkDate">{{entity.time_created * 1000 | date:'medium'}}</span>
+ <span *ngIf="entity.edited" class="m-ownerBlock__permalinkFlag m-ownerBlock__permalinkFlag--edited" i18n="@@M__COMMON__EDITED">edited</span>
+ </a>
+ </div>
+ </div>
+ </div>
+</div>

src/app/modules/pro/channel/content-modal/modal.component.scss

+.minds-avatar-hovercard {
+ z-index: 9999999;
+}
+
+.m-overlay-modal.m-overlayModal--media {
+ padding:0px;
+ max-width:95%;
+ z-index: 9999998;
+
+}
+
+m-media--modal {
+ // display: block;
+ // position: relative;
+}
+
+.m-mediaModal {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: stretch;
+ max-height: 100%;
+ max-height: 98vh;
+
+
+ .m-mediaModal__theater {
+ flex: 1 1 auto;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ overflow: hidden; // .????
+ @include m-theme(){
+ background-color: rgba(themed($m-black-always), 0.95);
+ }
+
+ &:hover {
+ .m-mediaModal__theaterOverlay{
+ opacity: 1;
+ }
+ }
+
+ img{
+ object-fit: contain;
+ flex: 1;
+ overflow: hidden;
+ }
+ m-video{
+ @include m-theme(){
+ background-color: themed($m-black-always);
+ }
+ video{
+ max-width:100%;
+ height:100%;
+ }
+ }
+
+ .m-mediaModal__theaterOverlay {
+ display: flex;
+ justify-content: space-between;
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 70px;
+ padding: $minds-padding * 2;
+ opacity: 0;
+ transition: opacity 500ms cubic-bezier(.22, 1, .33, 1);
+ box-sizing: border-box;
+ font-size: 24px;
+ @include m-theme(){
+ background: linear-gradient(rgba(themed($m-black-always),0.5), transparent);
+ }
+
+ &:hover {
+ cursor: pointer;
+ }
+
+ .m-mediaModal__theaterOverlayTitle {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ text-decoration: none;
+
+ @include m-theme(){
+ color: themed($m-white-always);
+ }
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+
+ // TODO OJM fullscreen styles e.g. .myClass:not(:fullscreen)
+ .m-mediaModal__fullscreenButton {
+ @include m-theme(){
+ color: themed($m-white-always);
+ }
+ transition: transform 150ms ease;
+
+
+ // .m-tooltip--bubble {
+ // right: 8px;
+ // }
+
+
+ &.m-mediaModal__fullscreenButton--active {
+ .m-mediaModal__fullscreenIcon--enable {
+ transform: scale(1.2);
+ }
+ .m-mediaModal__fullscreenIcon--disable {
+ transform: scale(0.83);
+ }
+ }
+
+ .m-mediaModal__fullscreenIcon--disable {
+ font-size: 28px;
+ }
+ .m-mediaModal__fullscreenIcon--disable {
+ font-size: 34px;
+ }
+ }
+ }
+ }
+
+ // * Content ********************************************
+
+ .m-mediaModal__contentWrapper {
+ // border: 1px solid green;
+ display: flex;
+ flex-direction: column;
+ width: calc(33% - 12px); //1/3rd of screen
+ // width: 300px;
+ min-width: 300px;
+
+ height: 100%;
+ height: 90vh;
+ padding: 16px;
+ font-family: 'Roboto', Helvetica, sans-serif;
+
+ @include m-theme(){
+ background-color: themed($m-white);
+ }
+
+ .m-mediaModal__ownerBlock {
+ padding: 0;
+
+ strong {
+ vertical-align: middle;
+ letter-spacing: 0.25px;
+ text-rendering: optimizeLegibility;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ font-weight: 500;
+ }
+ .m-ownerBlock__channelLink, .m-ownerBlock__groupLink {
+ text-decoration: none;
+ }
+
+ .m-ownerBlock__permalink {
+ font-weight: 500;
+ text-decoration: none;
+ text-transform: uppercase;
+ letter-spacing: .75px;
+ text-rendering: optimizeLegibility;
+ text-overflow: unset;
+ white-space: pre-wrap;
+ line-height: 18px;
+ -webkit-font-smoothing: antialiased;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
+
+ > * {
+ padding-right: 8px;
+ }
+
+ &:hover {
+ .m-ownerBlock__permalinkDate {
+ text-decoration: underline;
+ }
+ }
+
+ .m-ownerBlock__permalinkFlag {
+ text-transform: uppercase;
+ padding: 0 8px 0 0 ;
+ letter-spacing: 0.5px;
+ font-weight: 700;
+ font-size: 11px;
+ line-height: 1;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
+ }
+
+ .m-ownerBlock__permalinkFlag--boosted {
+ display: inline-block;
+ width: auto;
+ vertical-align: middle;
+
+ i {
+ font-size: 18px;
+ position: relative;
+ vertical-align: middle;
+ }
+
+ a {
+ vertical-align: middle;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
+ }
+
+ &.m-ownerBlock__permalinkFlag--onchain {
+ @include m-theme(){
+ color: themed($m-blue);
+ }
+ a {
+ @include m-theme(){
+ color: themed($m-blue);
+ }
+ }
+ }
+ }
+ }
+
+ }
+ .m-mediaModal__actionButtonsWrapper {
+ .m-mediaModal__actionButtonsRow {
+ display: flex;
+ justify-content: space-around;
+ padding-top: 16px;
+ }
+ minds-button-boost {
+ button {
+ margin-top: 8px;
+ }
+ }
+ }
+
+ // * Comments ********************************************
+
+ .m-mediaModal__commentsWrapper {
+ padding-top: $minds-padding;
+ @include m-theme(){
+ border-top: 1px solid themed($m-grey-100);
+ }
+
+ display: block;
+ margin-bottom: 0;
+ flex: 1;
+
+
+
+ m-comments__tree {
+ height: 100%;
+ // height: calc(100vh - 45px);
+ position: relative;
+ padding: 0 0 24px;
+ margin: 0;
+ flex-direction: column;
+ box-sizing: border-box;
+ width: 100%;
+
+
+ m-comments__thread {
+ height: 100%;
+ // height: calc(100vh - 45px);
+ position: relative;
+ margin: 0;
+ flex-direction: column;
+ box-sizing: border-box;
+
+
+ .m-comments__thread {
+ overflow-y: auto;
+ max-height: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+
+ .minds-avatar {
+ width: 36px;
+ height: 36px;
+ margin-left: 0;
+ }
+
+ .m-comment-attachment .item-image {
+ img, minds-video {
+ max-width: 50%;
+ }
+ }
+
+
+ }
+ .minds-comment {
+ padding: 8px 0px;
+
+ .mdl-card__menu {
+ display: none;
+ }
+
+ &:hover .mdl-card__menu {
+ display: block;
+ }
+
+ .m-comment-attachment .m-rich-embed{
+ max-width: 63%;
+ .m-blurb {
+ display: block;
+ }
+ }
+ }
+
+ .minds-comment-post {
+ flex-shrink: 0;
+ }
+
+ .post-preview {
+ width: 63%;
+ height: auto;
+
+ .attachment-preview {
+ height: 140px;
+ object-fit: cover;
+ }
+ }
+
+ .minds-comments-container {
+ overflow-y: visible;
+ height: auto;
+ max-height: none;
+ }
+
+ }
+ }
+ }
+ }
+}

src/app/modules/pro/channel/content-modal/modal.component.ts

 import { Component, Input, OnInit } from '@angular/core';
+import { Session } from "../../../../services/session";
 
 @Component({
  selector: 'm-pro--content-modal',
@@ -6,15 +7,44 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 
 export class ProContentModalComponent implements OnInit {
+ minds = window.Minds;
  entity: any;
+ inProgress: boolean;
+ hovering: boolean;
+ isFullscreen: boolean;
+ title: string;
 
  @Input('entity') set data(data) {
  this.entity = data;
+ this.title = this.entity.message ? this.entity.message : `${this.entity.ownerObj.name}'s post`;
  }
 
- constructor() {
+ constructor(
+ protected session: Session
+ ) {
  }
 
  ngOnInit() {
  }
+
+ toggleFullscreen() {
+
+ }
+
+
+ getOwnerIconTime() {
+
+ const session = this.session.getLoggedInUser();
+
+ if (session && session.guid === this.entity.ownerObj.guid) {
+
+ return session.icontime;
+
+ } else {
+
+ return this.entity.ownerObj.icontime;
+
+ }
+
+ }
 }

src/app/modules/pro/channel/list/list.component.ts

@@ -83,9 +83,9 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
 
  if (this.entities.length >= 9) {
  this.displaySeeMoreTile = true;
- this.entities = this.entities.slice(0,8);
+ this.entities = this.entities.slice(0, 8);
  }
- 
+
  this.detectChanges();
  });
 
@@ -166,6 +166,10 @@ export class ProChannelListComponent implements OnInit, OnDestroy {
  }
 
  openModal(entity: any) {
+ if (entity.subtype !== 'video' && entity.subtype !== 'image') {
+ return;
+ }
+
  this.modalService.create(ProContentModalComponent, entity, {
 
  class: 'm-overlayModal--media'

src/app/modules/pro/pro.module.ts

@@ -19,6 +19,7 @@ import { ProChannelFooterComponent } from './channel/footer/footer.component';
 import { LegacyModule } from "../legacy/legacy.module";
 import { WireModule } from "../wire/wire.module";
 import { ProContentModalComponent } from "./channel/content-modal/modal.component";
+import { VideoModule } from "../media/components/video/video.module";
 
 const routes: Routes = [
  {
@@ -70,6 +71,7 @@ const routes: Routes = [
  NewsfeedModule,
  LegacyModule,
  WireModule,
+ VideoModule,
  ],
  providers: [
  ProService,