(feat): Media modal - show activity message in modal

src/app/common/read-more/read-more.directive.ts

-import { Directive, ElementRef, ContentChild, ChangeDetectorRef } from '@angular/core';
+import { Directive, ElementRef, ContentChild, ChangeDetectorRef, Input } from '@angular/core';
 import { ReadMoreButtonComponent } from './button.component';
 
 @Directive({
@@ -8,28 +8,34 @@ export class ReadMoreDirective {
 
  _element: any;
  realHeight: any;
- maxHeightAllowed: number = 320;
  expandable: boolean = false;
  @ContentChild(ReadMoreButtonComponent, { 'static': false}) button;
+ @Input() maxHeightAllowed: number;
 
  constructor(private element: ElementRef, private cd: ChangeDetectorRef) {
  this._element = element.nativeElement;
  }
 
  ngAfterViewInit() {
- this.realHeight = this._element.clientHeight;
-
- if (this.button && !this.button.content)
- this.button.content = this;
-
- if (this.realHeight > this.maxHeightAllowed) {
- this._element.style.maxHeight = this.maxHeightAllowed + 'px';
- this._element.style.position = 'relative';
- setTimeout(() => {
- this.expandable = true;
- this.detectChanges();
- }, 1);
+ if (!this.maxHeightAllowed) {
+ this.maxHeightAllowed = 320;
  }
+
+ setTimeout(() => {
+ this.realHeight = this._element.clientHeight;
+ if (this.button && !this.button.content) {
+ this.button.content = this;
+ }
+
+ if (this.realHeight > this.maxHeightAllowed) {
+ this._element.style.maxHeight = this.maxHeightAllowed + 'px';
+ this._element.style.position = 'relative';
+ setTimeout(() => {
+ this.expandable = true;
+ this.detectChanges();
+ }, 1);
+ }
+ }, 1);
  }
 
  expand() {

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

@@ -143,21 +143,29 @@
  <a i18n="@@MINDS__CARDS__entity__BOOSTED_LABEL_ONCHAIN" [hidden]="!entity.boosted_onchain" [routerLink]="['/token']">Boosted Onchain</a>
  </div>
  </a>
-
  </div>
  </div>
+ <!-- MESSAGE -->
+ <div class="m-mediaModal__message mdl-card__supporting-text"
+ m-read-more *ngIf="hasMessage"
+ [maxHeightAllowed]="136"
+ >
+ <span class="m-mature-message-content" [innerHtml]="entity.message | tags">
+ </span>
+ <m-read-more--button></m-read-more--button>
+ </div>
  <!-- ACTION BUTTONS -->
  <div class="m-mediaModal__actionButtonsWrapper">
- <div class="m-mediaModal__actionButtonsRow m-action-tabs">
- <m-wire-button *ngIf="session.getLoggedInUser().guid != entity.owner_guid"
- [object]="entity"
- (done)="wireSubmitted($event)"
- ></m-wire-button>
- <minds-button-thumbs-up [object]="entity"></minds-button-thumbs-up>
- <minds-button-thumbs-down [object]="entity"></minds-button-thumbs-down>
- <minds-button-remind [object]="entity"></minds-button-remind>
- </div>
+ <div class="m-mediaModal__actionButtonsRow m-action-tabs">
+ <m-wire-button *ngIf="session.getLoggedInUser().guid != entity.owner_guid"
+ [object]="entity"
+ (done)="wireSubmitted($event)"
+ ></m-wire-button>
+ <minds-button-thumbs-up [object]="entity"></minds-button-thumbs-up>
+ <minds-button-thumbs-down [object]="entity"></minds-button-thumbs-down>
+ <minds-button-remind [object]="entity"></minds-button-remind>
  </div>
+ </div>
 
  <!-- COMMENTS -->
  <div class="m-mediaModal__comments" *ngIf="entity.guid">

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

@@ -489,6 +489,10 @@ m-overlay-modal {
  }
 }
 
+.m-mediaModal__message a {
+ text-decoration: none;
+}
+
 .m-mediaModal__actionButtonsWrapper {
  .m-mediaModal__actionButtonsRow {
  display: flex;

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

@@ -49,6 +49,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  isFullscreen: boolean = false;
  isVideo: boolean = false; // Otherwise it's an image
 
+ aspectRatio: number;
  modalWidth: number;
  stageWidth: number;
  stageHeight: number;
@@ -68,6 +69,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  boosted: boolean = false;
  ownerIconTime: string = '';
  permalinkGuid: string = '';
+ hasMessage: boolean = true;
 
  // Used for backdrop click detection hack
  isOpen: boolean = false;
@@ -98,7 +100,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  ngOnInit() {
  // Prevent dismissal of modal when it's just been opened
- this.isOpenTimeout = setTimeout(() => this.isOpen = true, 50);
+ this.isOpenTimeout = setTimeout(() => this.isOpen = true, 20);
 
  this.boosted = this.entity.boosted || this.entity.p2p_boosted;
 
@@ -111,8 +113,11 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  }
  } else {
  this.title = this.entity.title;
+ this.hasMessage = false;
  }
 
+ this.entity.message = this.hasMessage ? this.title : null;
+
  // Set ownerIconTime
  const session = this.session.getLoggedInUser();
  if (session && session.guid === this.entity.ownerObj.guid) {
@@ -171,7 +176,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  this.thumbnail = this.entity.custom_data.thumbnail_src; // Not currently used
  }
 
- this.entity.aspectRatio = this.entity.width / this.entity.height;
+ this.aspectRatio = this.entity.width / this.entity.height;
  this.calculateDimensions();
 
  // ! TEMP
@@ -282,7 +287,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  if ( widthDiff >= 1 ) {
 
  // What mediaHeight would be if it shrunk proportionally to difference in width
- const mediaHeightPreview = Math.round((this.mediaWidth - widthDiff) / this.entity.aspectRatio);
+ const mediaHeightPreview = Math.round((this.mediaWidth - widthDiff) / this.aspectRatio);
 
  // Shrink media if mediaHeight is still above min
  if (mediaHeightPreview > this.minStageHeight) {
@@ -298,10 +303,10 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  }
 
  scaleHeight() {
- return Math.round(this.mediaWidth / this.entity.aspectRatio);
+ return Math.round(this.mediaWidth / this.aspectRatio);
  }
  scaleWidth() {
- return Math.round(this.mediaHeight * this.entity.aspectRatio);
+ return Math.round(this.mediaHeight * this.aspectRatio);
  }