Merge branch 'feat/media-quotes-5645' into 'master'

Media quotes #5645

See merge request minds/front!2006

Author: markharding

src/app/modules/composer/components/toolbar/toolbar.component.html

@@ -22,7 +22,7 @@
     (onSelect)="onAttachmentSelect($event)"
     accept="image/*,video/*,video/mp4,video/x-m4v"
     data-cy="upload-button"
-    *ngIf="!(remind$ | async)"
+    *ngIf="fileUploadVisible$ | async"
     #fileUploadComponent
   >
     <m-icon

src/app/modules/composer/components/toolbar/toolbar.component.spec.ts

@@ -10,6 +10,11 @@ import { ScheduleComponent } from '../popup/schedule/schedule.component';
 import { ToasterService } from '../../../../common/services/toaster.service';
 import { ButtonComponent } from '../../../../common/components/button/button.component';
 import { BehaviorSubject } from 'rxjs';
+import { MediaQuotesExperimentService } from '../../../experiments/sub-services/media-quotes-experiment.service';
+
+export let mediaQuotesExperimentServiceMock = new (function() {
+  this.isActive = jasmine.createSpy('isActive').and.returnValue(true);
+})();
 
 describe('Composer Toolbar', () => {
   let comp: ToolbarComponent;
@@ -36,20 +41,24 @@ describe('Composer Toolbar', () => {
 
   const size$ = new BehaviorSubject<ComposerSize>('full');
 
+  const remind$ = new BehaviorSubject(null);
+
   const composerServiceMock: any = MockService(ComposerService, {
     has: [
       'attachment$',
       'isEditing$',
       'monetization$',
       'size$',
       'attachmentError$',
+      'remind$',
     ],
     props: {
       attachment$: { get: () => attachment$ },
       isEditing$: { get: () => isEditing$ },
       monetization$: { get: () => monetization$ },
       size$: { get: () => size$ },
       attachmentError$: { get: () => attachmentError$ },
+      remind$: { get: () => remind$ },
     },
   });
 
@@ -92,6 +101,10 @@ describe('Composer Toolbar', () => {
             provide: ToasterService,
             useValue: MockService(ToasterService),
           },
+          {
+            provide: MediaQuotesExperimentService,
+            useValue: mediaQuotesExperimentServiceMock,
+          },
         ],
       }).compileComponents();
     })

src/app/modules/composer/components/toolbar/toolbar.component.ts

@@ -38,6 +38,7 @@ import { isPlatformBrowser } from '@angular/common';
 import { ToasterService } from '../../../../common/services/toaster.service';
 import { AttachmentErrorComponent } from '../popup/attachment-error/attachment-error.component';
 import isMobile from '../../../../helpers/is-mobile';
+import { MediaQuotesExperimentService } from '../../../experiments/sub-services/media-quotes-experiment.service';
 
 /**
  * Composer toolbar. Displays important actions
@@ -110,7 +111,8 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy {
     protected popup: PopupService,
     protected cd: ChangeDetectorRef,
     protected toaster: ToasterService,
-    @Inject(PLATFORM_ID) protected platformId: Object
+    @Inject(PLATFORM_ID) protected platformId: Object,
+    protected mediaQuotesExperiment: MediaQuotesExperimentService
   ) {}
 
   /**
@@ -408,6 +410,16 @@ export class ToolbarComponent implements OnInit, AfterViewInit, OnDestroy {
     return isMobile();
   }
 
+  fileUploadVisible$ = this.remind$.pipe(
+    map(remind => {
+      if (this.mediaQuotesExperiment.isActive()) {
+        return true;
+      }
+
+      return !remind;
+    })
+  );
+
   /**
    * Triggers change detection
    */

src/app/modules/experiments/sub-services/media-quotes-experiment.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { ExperimentsService } from '../experiments.service';
+
+/**
+ * https://growthbook.minds.com/features/front-5645-media-quotes
+ */
+@Injectable({ providedIn: 'root' })
+export class MediaQuotesExperimentService {
+  constructor(private experiments: ExperimentsService) {}
+
+  /**
+   * Returns true if the media quotes experiment is active.
+   * @returns { boolean } whether media quotes experiment is active.
+   */
+  public isActive(): boolean {
+    return this.experiments.hasVariation('front-5645-media-quotes', true);
+  }
+}

src/app/modules/newsfeed/activity-v2/content/content.component.html

@@ -69,7 +69,7 @@
     <m-videoPlayer--scrollaware
       #videoEl
       [guid]="videoGuid"
-      [shouldPlayInModal]="!isModal"
+      [shouldPlayInModal]="entity.remind_object ? false : !isModal"
       (mediaModalRequested)="onModalRequested($event)"
       [autoplay]="
         service.displayOptions.autoplayVideo &&

src/app/modules/newsfeed/activity-v2/content/content.component.ng.scss

@@ -257,6 +257,10 @@
   // ** QUOTE **
   // *********************************
 
+  .m-activityContent__media + .m-activityContent__quote {
+    margin-top: $spacing4;
+  }
+
   .m-activityContent--quote {
     overflow: hidden;
 

src/app/modules/newsfeed/activity-v2/content/content.component.ts

@@ -621,6 +621,12 @@ export class ActivityV2ContentComponent
       return;
     }
 
+    // We don't support showing media quotes in modal yet
+    if (this.entity.remind_object) {
+      this.redirectToSinglePage();
+      return;
+    }
+
     if (
       this.service.displayOptions.bypassMediaModal &&
       this.entity.content_type !== 'image' &&
@@ -669,7 +675,10 @@ export class ActivityV2ContentComponent
   }
 
   redirectToSinglePage(): void {
-    this.router.navigateByUrl(this.canonicalUrl);
+    // don't navigate if we're already there
+    if (this.router.url !== this.canonicalUrl) {
+      this.router.navigateByUrl(this.canonicalUrl);
+    }
   }
 
   onImageError(e: Event): void {}

src/app/modules/newsfeed/activity/activity.service.ts

@@ -396,7 +396,11 @@ export class ActivityService implements OnDestroy {
   }
 
   buildCanonicalUrl(entity: ActivityEntity, full: boolean): string {
-    const guid = entity.entity_guid || entity.guid;
+    let guid = entity.entity_guid || entity.guid;
+    // use the entity guid for media quotes
+    if (entity.remind_object && entity.entity_guid) {
+      guid = entity.guid;
+    }
     const prefix = full ? this.siteUrl : '/';
     return `${prefix}newsfeed/${guid}`;
   }