(feat): Media modal - add feature flag

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

@@ -27,6 +27,7 @@ import { ActivityAnalyticsOnViewService } from "./activity-analytics-on-view.ser
 import { NewsfeedService } from "../../../../newsfeed/services/newsfeed.service";
 import { ClientMetaService } from "../../../../../common/services/client-meta.service";
 import { AutocompleteSuggestionsService } from "../../../../suggestions/services/autocomplete-suggestions.service";
+import { FeaturesService } from '../../../../../services/features.service';
 import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
@@ -119,6 +120,7 @@ export class Activity implements OnInit {
  protected activityAnalyticsOnViewService: ActivityAnalyticsOnViewService,
  protected newsfeedService: NewsfeedService,
  protected clientMetaService: ClientMetaService,
+ protected featuresService: FeaturesService,
  public suggestions: AutocompleteSuggestionsService,
  @SkipSelf() injector: Injector,
  elementRef: ElementRef,
@@ -448,25 +450,29 @@ export class Activity implements OnInit {
  }
 
  showMediaModal() {
- // Mobile (not tablet) users go to media page instead of modal
- if (isMobile() && Math.min(screen.width, screen.height) < 768) {
- this.router.navigate([`/media/${this.activity.entity_guid}`]);
- }
+ 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) {
+ this.router.navigate([`/media/${this.activity.entity_guid}`]);
+ }
 
- if (this.activity.custom_type === 'video') {
- this.activity.custom_data.dimensions = this.videoDimensions;
- } else { // Image
- // Set image dimensions if they're not already there
- if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
- this.setImageDimensions();
+ if (this.activity.custom_type === 'video') {
+ this.activity.custom_data.dimensions = this.videoDimensions;
+ } else { // Image
+ // Set image dimensions if they're not already there
+ if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
+ this.setImageDimensions();
+ }
  }
- }
 
- this.activity.modal_source_url = this.router.url;
+  this.activity.modal_source_url = this.router.url;
 
- this.overlayModal.create(MediaModalComponent, this.activity, {
- class: 'm-overlayModal--media'
- }).present();
+ this.overlayModal.create(MediaModalComponent, this.activity, {
+ class: 'm-overlayModal--media'
+ }).present();
+ } else {
+ this.router.navigate([`/media/${this.activity.entity_guid}`]);
+ }
  }
 
  detectChanges() {

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

@@ -16,7 +16,7 @@ import { Session } from '../../../../../services/session';
 import { AttachmentService } from '../../../../../services/attachment';
 import { OverlayModalService } from '../../../../../services/ux/overlay-modal';
 import { MediaModalComponent } from '../../../../media/modal/modal.component';
-
+import { FeaturesService } from '../../../../../services/features.service';
 import isMobile from '../../../../../helpers/is-mobile';
 
 @Component({
@@ -60,6 +60,7 @@ export class Remind {
  private changeDetectorRef: ChangeDetectorRef,
  private overlayModal: OverlayModalService,
  private router: Router,
+ protected featuresService: FeaturesService,
  ) {
  this.hideTabs = true;
  }
@@ -159,24 +160,28 @@ export class Remind {
  }
 
  showMediaModal() {
- // Mobile (not tablet) users go to media page instead of modal
- if (isMobile() && Math.min(screen.width, screen.height) < 768) {
- this.router.navigate([`/media/${this.activity.entity_guid}`]);
- }
+ 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) {
+ this.router.navigate([`/media/${this.activity.entity_guid}`]);
+ }
 
- if (this.activity.custom_type === 'video') {
- this.activity.custom_data.dimensions = this.videoDimensions;
- } else { // Image
- // Set image dimensions if they're not already there
- if (!this.activity.custom_data[0].width || !this.activity.custom_data[0].height ) {
- this.setImageDimensions();
+ if (this.activity.custom_type === 'video') {
+ this.activity.custom_data.dimensions = this.videoDimensions;
+ } else { // Image
+ // Set image dimensions if they're not already there
+ if (this.activity.custom_data[0].width === '0' || this.activity.custom_data[0].height === '0') {
+ this.setImageDimensions();
+ }
  }
- }
 
- this.activity.modal_source_url = this.router.url;
+  this.activity.modal_source_url = this.router.url;
 
- this.overlayModal.create(MediaModalComponent, this.activity, {
- class: 'm-overlayModal--media'
- }).present();
+ this.overlayModal.create(MediaModalComponent, this.activity, {
+ class: 'm-overlayModal--media'
+ }).present();
+ } else {
+ this.router.navigate([`/media/${this.activity.entity_guid}`]);
+ }
  }
 }

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

@@ -150,7 +150,7 @@
  m-read-more *ngIf="hasMessage"
  [maxHeightAllowed]="136"
  >
- <span class="m-mature-message-content" [innerHtml]="entity.message | tags">
+ <span class="m-mature-message-content" [innerHtml]="message | tags">
  </span>
  <m-read-more--button></m-read-more--button>
  </div>

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

@@ -70,6 +70,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  ownerIconTime: string = '';
  permalinkGuid: string = '';
  hasMessage: boolean = true;
+ message: string = '';
 
  // Used for backdrop click detection hack
  isOpen: boolean = false;
@@ -105,18 +106,18 @@ export class MediaModalComponent implements OnInit, OnDestroy {
  this.boosted = this.entity.boosted || this.entity.p2p_boosted;
 
  // Set title
- if ( !this.entity.title ) {
- if ( !this.entity.message ) {
+ if (!this.entity.title) {
+ if (!this.entity.message) {
  this.title = `${this.entity.ownerObj.name}'s post`;
+ this.hasMessage = false;
  } else {
  this.title = this.entity.message;
  }
  } else {
  this.title = this.entity.title;
- this.hasMessage = false;
  }
 
- this.entity.message = this.hasMessage ? this.title : null;
+ this.message = this.hasMessage ? this.title : null;
 
  // Set ownerIconTime
  const session = this.session.getLoggedInUser();
@@ -178,10 +179,6 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  this.aspectRatio = this.entity.width / this.entity.height;
  this.calculateDimensions();
-
- // ! TEMP
-
- console.log(this.entity);
  }
 
  // Re-calculate height/width when window resizes
@@ -409,7 +406,7 @@ export class MediaModalComponent implements OnInit, OnDestroy {
 
  // * TABLETS ONLY: SHOW OVERLAY & VIDEO CONTROLS * -------------------------------------------
 
- // Briefly display title overlay and video controls for 3 secs when finished loading and stage touch
+ // Briefly display title overlay and video controls when finished loading and stage touch
  showOverlays() {
  this.onMouseEnterStage();