(feat): implements nsfw consent to new activity components

src/app/common/components/nsfw-selector/nsfw-selector.service.ts

 import { CookieService } from '../../../common/services/cookie.service';
 import { Injectable } from '@angular/core';
 
+type NsfwReason = {
+  value: number;
+  label: string;
+  selected: boolean;
+  locked: boolean;
+};
+
+export const NSFW_REASONS: NsfwReason[] = [
+  { value: 1, label: 'Nudity', selected: false, locked: false },
+  { value: 2, label: 'Pornography', selected: false, locked: false },
+  { value: 3, label: 'Profanity', selected: false, locked: false },
+  { value: 4, label: 'Violence and Gore', selected: false, locked: false },
+  { value: 5, label: 'Race and Religion', selected: false, locked: false },
+  { value: 6, label: 'Other', selected: false, locked: false },
+];
+
 @Injectable()
 export class NSFWSelectorService {
   cacheKey: string = '';
 
-  reasons: Array<any> = [
-    { value: 1, label: 'Nudity', selected: false, locked: false },
-    { value: 2, label: 'Pornography', selected: false, locked: false },
-    { value: 3, label: 'Profanity', selected: false, locked: false },
-    { value: 4, label: 'Violence and Gore', selected: false, locked: false },
-    { value: 5, label: 'Race and Religion', selected: false, locked: false },
-    { value: 6, label: 'Other', selected: false, locked: false },
-  ];
+  reasons: Array<any> = NSFW_REASONS;
 
   constructor(private cookieService: CookieService) {}
 

src/app/modules/newsfeed/activity/activity.component.html

@@ -5,11 +5,11 @@
 </m-activity__ownerBlock>
 
 <m-activity__content
-  *ngIf="service.canShowContent$ | async"
+  *ngIf="service.shouldShowContent$ | async"
 ></m-activity__content>
 
-<!-- <m-activity__nsfwConsent *ngIf="service.isNsfw$ | async">
-</m-activity__nsfwConsent> -->
+<m-activity__nsfwConsent *ngIf="service.shouldShowNsfwConsent$ | async">
+</m-activity__nsfwConsent>
 
 <m-activity__toolbar
   *ngIf="service.displayOptions.showToolbar"

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

@@ -19,6 +19,7 @@ import { ModalsModule } from '../../modals/modals.module';
 import { LegacyModule } from '../../legacy/legacy.module';
 import { ActivityMenuComponent } from './menu/menu.component';
 import { PostMenuModule } from '../../../common/components/post-menu/post-menu.module';
+import { ActivityNsfwConsentComponent } from './nsfw-consent/nsfw-consent.component';
 
 @NgModule({
   imports: [
@@ -41,6 +42,7 @@ import { PostMenuModule } from '../../../common/components/post-menu/post-menu.m
     ActivityContentComponent,
     ActivityToolbarComponent,
     ActivityMenuComponent,
+    ActivityNsfwConsentComponent,
   ],
   providers: [],
   exports: [ActivityComponent],

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

-import { BehaviorSubject, Observable } from 'rxjs';
+import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
 import { MindsUser, MindsGroup } from '../../../interfaces/entities';
 import { map } from 'rxjs/operators';
 import { Injectable } from '@angular/core';
@@ -31,11 +31,17 @@ export type ActivityEntity = {
   edited: boolean;
   modal_source_url?: string;
   ephemeral?: boolean;
+  nsfw: Array<number>;
+  paywall: boolean;
 };
 
 @Injectable()
 export class ActivityService {
   entity$ = new BehaviorSubject(null);
+
+  /**
+   * Resolves media posts to a single guid and url
+   */
   canonicalUrl$: Observable<string> = this.entity$.pipe(
     map((entity: ActivityEntity) => {
       if (!entity) return '';
@@ -43,19 +49,68 @@ export class ActivityService {
       return `/newsfeed/${guid}`;
     })
   );
+
+  /**
+   * TODO
+   */
   canDelete$: Observable<boolean> = this.entity$.pipe();
-  canShowContent$: Observable<boolean> = this.entity$.pipe();
+
+  /**
+   * Allows for components to give nsfw consent
+   */
+  isNsfwConsented$: BehaviorSubject<boolean> = new BehaviorSubject(false);
+
+  /**
+   * Will be true if not consented and is nsfw
+   */
+  shouldShowNsfwConsent$: Observable<boolean> = combineLatest(
+    this.entity$,
+    this.isNsfwConsented$
+  ).pipe(
+    map(([entity, isConsented]: [ActivityEntity, boolean]) => {
+      return entity.nsfw.length > 0 && !isConsented;
+    })
+  );
+
+  /**
+   * We do not render the contents if nsfw (and no consent) or
+   * a paywall is in place
+   */
+  shouldShowContent$: Observable<boolean> = combineLatest(
+    this.entity$,
+    this.shouldShowNsfwConsent$
+  ).pipe(
+    map(([entity, shouldShowNsfwContsent]: [ActivityEntity, boolean]) => {
+      return !shouldShowNsfwContsent && !entity.paywall;
+    })
+  );
+
+  /**
+   * TODO
+   */
   isBoost$: Observable<boolean> = this.entity$.pipe();
+
+  /**
+   * If the post is a remind this will emit true
+   */
   isRemind$: Observable<boolean> = this.entity$.pipe(
     map((entity: ActivityEntity) => {
       return entity && !!entity.remind_object;
     })
   );
+
+  /**
+   * If the post has been editied this will emit true
+   */
   isEdited$: Observable<boolean> = this.entity$.pipe(
     map((entity: ActivityEntity) => {
       return entity && entity.edited;
     })
   );
+
+  /**
+   * TODO
+   */
   isUnlisted$: Observable<boolean> = this.entity$.pipe();
 
   displayOptions: ActivityDisplayOptions = {

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

@@ -47,7 +47,7 @@ export class ActivityContentComponent {
     );
   }
 
-  ngOnDestory() {
+  ngOnDestroy() {
     this.entitySubscription.unsubscribe();
   }
 

src/app/modules/newsfeed/activity/menu/menu.component.ts

@@ -38,7 +38,7 @@ export class ActivityMenuComponent {
     );
   }
 
-  ngOnDestory() {
+  ngOnDestroy() {
     this.entitySubscription.unsubscribe();
   }
 

src/app/modules/newsfeed/activity/nsfw-consent/nsfw-consent.component.html

+<div class="m-activityContent__fixedHeightSpacer"></div>
+
+<div class="m-activityNsfwConsent__container">
+  <i class="material-icons m-activityNsfwConsent__icon">lock</i>
+
+  <h2 class="m-activityNsfwConsent__title">NSFW</h2>
+  <h3 class="m-activityNsfwConsent__reasons">{{ reasonsLabel$ | async }}</h3>
+
+  <button
+    class="m-activityNsfwConsent__button"
+    (click)="onConsentedClick($event)"
+  >
+    I am over 18 years of age
+  </button>
+</div>
+
+<div class="m-activityContent__fixedHeightSpacer"></div>

src/app/modules/newsfeed/activity/nsfw-consent/nsfw-consent.component.scss

+m-activity__nsfwConsent {
+  display: block;
+  width: 100%;
+
+  text-align: center;
+
+  .m-activityNsfwConsent__icon {
+    font-size: 62px;
+    margin: 25px 0;
+
+    @include m-theme() {
+      color: themed($m-textColor--tertiary);
+    }
+  }
+
+  h2 {
+    font-size: 28px;
+    line-height: 36px;
+    font-weight: 600;
+    padding: 0;
+    margin: 0 0 $minds-margin 0;
+    @include m-theme() {
+      color: themed($m-textColor--primary);
+    }
+  }
+  h3 {
+    font-size: 16px;
+    line-height: 20px;
+    padding: 0;
+    margin: 0;
+    @include m-theme() {
+      color: themed($m-textColor--tertiary);
+    }
+  }
+
+  .m-activityNsfwConsent__button {
+    margin: 38px 0;
+    padding: $minds-padding;
+    font-size: 16px;
+    border-radius: $m-borderRadius;
+    cursor: pointer;
+
+    @include m-theme() {
+      color: themed($m-textColor--primary);
+      border-color: themed($m-borderColor--primary);
+    }
+  }
+}
+.m-activity--fixedHeight {
+  m-activity__nsfwConsent {
+    flex: 1;
+    // overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+}

src/app/modules/newsfeed/activity/nsfw-consent/nsfw-consent.component.ts

+import {
+  Component,
+  HostListener,
+  ViewChild,
+  Input,
+  ElementRef,
+} from '@angular/core';
+import { Subscription, Observable } from 'rxjs';
+
+import { ActivatedRoute, Router } from '@angular/router';
+import { ActivityService, ActivityEntity } from '../activity.service';
+import { ConfigsService } from '../../../../common/services/configs.service';
+import { Session } from '../../../../services/session';
+import { MindsUser, MindsGroup } from '../../../../interfaces/entities';
+import { OverlayModalService } from '../../../../services/ux/overlay-modal';
+import { MediaModalComponent } from '../../../media/modal/modal.component';
+import { map } from 'rxjs/operators';
+import { NSFW_REASONS } from '../../../../common/components/nsfw-selector/nsfw-selector.service';
+
+@Component({
+  selector: 'm-activity__nsfwConsent',
+  templateUrl: 'nsfw-consent.component.html',
+})
+export class ActivityNsfwConsentComponent {
+  reasonsLabel$: Observable<string> = this.service.entity$.pipe(
+    map((entity: ActivityEntity) => {
+      const reasons = NSFW_REASONS.filter(
+        reason => entity.nsfw.indexOf(reason.value) > -1
+      );
+      if (reasons.length === 1) {
+        return reasons[0].label;
+      }
+      if (reasons.length === 2) {
+        return reasons.map(reason => reason.label).join(' & ');
+      }
+      if (reasons.length > 2) {
+        return (
+          reasons
+            .slice(0, reasons.length - 1)
+            .map(reason => reason.label)
+            .join(', ') +
+          ' & ' +
+          reasons[reasons.length - 1].label
+        );
+      }
+      return '';
+    })
+  );
+
+  constructor(
+    public service: ActivityService,
+    private overlayModal: OverlayModalService,
+    private router: Router
+  ) {}
+
+  onConsentedClick(e: MouseEvent): void {
+    this.service.isNsfwConsented$.next(true);
+  }
+}

src/app/modules/newsfeed/activity/owner-block/owner-block.component.ts

@@ -31,7 +31,7 @@ export class ActivityOwnerBlockComponent {
     );
   }
 
-  ngOnDestory() {
+  ngOnDestroy() {
     this.entitySubscription.unsubscribe();
   }
 

src/app/modules/newsfeed/activity/toolbar/toolbar.component.ts

@@ -30,7 +30,7 @@ export class ActivityToolbarComponent {
     );
   }
 
-  ngOnDestory() {
+  ngOnDestroy() {
     this.entitySubscription.unsubscribe();
   }
 }

src/app/modules/newsfeed/single/single.component.html

@@ -48,7 +48,7 @@
     <div class="minds-list" *ngIf="activity && !showLegacyActivity">
       <m-activity
         [entity]="activity"
-        [displayOptions]="{ fixedHeight: true }"
+        [displayOptions]="{ fixedHeight: fixedHeight }"
       ></m-activity>
     </div>
   </div>

src/app/modules/newsfeed/single/single.component.ts

@@ -28,6 +28,7 @@ export class NewsfeedSingleComponent {
   queryParamsSubscription: Subscription;
   focusedCommentGuid: string = '';
   editing = false;
+  fixedHeight = false;
 
   constructor(
     public router: Router,
@@ -70,7 +71,9 @@ export class NewsfeedSingleComponent {
       params => {
         if (params.has('editing')) {
           this.editing = !!params.get('editing');
-          console.log('editing', this.editing);
+        }
+        if (params.has('fixedHeight')) {
+          this.fixedHeight = !!params.get('fixedHeight');
         }
       }
     );