angular.json

@@ -21,7 +21,6 @@
             "styles": [
               "node_modules/material-design-lite/dist/material.blue_grey-amber.min.css",
               "node_modules/plyr/dist/plyr.css",
-              "node_modules/material-design-icons/iconfont/material-icons.css",
               "src/main.css"
             ],
             "scripts": [

src/app/common/common.module.ts

@@ -142,6 +142,7 @@ import { HorizontalFeedService } from './services/horizontal-feed.service';
 import { FormInputCheckboxComponent } from './components/forms/checkbox/checkbox.component';
 import { AttachmentPasteDirective } from './directives/paste/attachment-paste.directive';
 import { TagsService } from './services/tags.service';
+import { ExplicitOverlayComponent } from './components/explicit-overlay/overlay.component';
 import { RedirectService } from './services/redirect.service';
 
 const routes: Routes = [
@@ -268,6 +269,7 @@ const routes: Routes = [
     EmailConfirmationComponent,
     DateDropdownsComponent,
     FormInputCheckboxComponent,
+    ExplicitOverlayComponent,
   ],
   exports: [
     MINDS_PIPES,
@@ -370,6 +372,7 @@ const routes: Routes = [
     EmailConfirmationComponent,
     DateDropdownsComponent,
     FormInputCheckboxComponent,
+    ExplicitOverlayComponent,
   ],
   providers: [
     SiteService,

src/app/modules/channels/explicit-overlay/overlay.component.html → src/app/common/components/explicit-overlay/overlay.component.html

 <div class="m-channel--explicit-overlay--container" *ngIf="!hidden">
   <div class="m-channel--explicit-overlay--content">
-    <h3>
-      This channel contains content that is NSFW
-    </h3>
+    <h3>{{ message }}</h3>
     <div
       class="m-btn m-btn--slim m-btn--action m-channel--explicit-overlay--action"
       (click)="disableFilter()"

src/app/modules/channels/explicit-overlay/overlay.component.spec.ts → src/app/common/components/explicit-overlay/overlay.component.spec.ts

@@ -5,7 +5,7 @@ import { sessionMock } from '../../../../tests/session-mock.spec';
 import { Storage } from '../../../services/storage';
 import { Router } from '@angular/router';
 import { storageMock } from '../../../../tests/storage-mock.spec';
-import { ConfigsService } from '../../../common/services/configs.service';
+import { ConfigsService } from '../../services/configs.service';
 import { MockService } from '../../../utils/mock';
 
 let routerMock = new (function() {
@@ -55,7 +55,7 @@ describe('OverlayComponent', () => {
   });
 
   it('should not show overlay when mature visibility is set', () => {
-    comp.channel = {
+    comp.entity = {
       mature_visibility: true,
     };
     comp.showOverlay();
@@ -63,8 +63,8 @@ describe('OverlayComponent', () => {
     expect(comp.hidden).toBeTruthy();
   });
 
-  it('should overlay when channel is mature', () => {
-    comp._channel = {
+  it('should overlay when entity is mature', () => {
+    comp._entity = {
       is_mature: true,
     };
     comp.showOverlay();
@@ -72,8 +72,8 @@ describe('OverlayComponent', () => {
     expect(comp.hidden).toBeFalsy();
   });
 
-  it('should overlay when channel is nsfw for one reason', () => {
-    comp._channel = {
+  it('should overlay when entity is nsfw for one reason', () => {
+    comp._entity = {
       nsfw: [1],
     };
     comp.showOverlay();
@@ -81,8 +81,8 @@ describe('OverlayComponent', () => {
     expect(comp.hidden).toBeFalsy();
   });
 
-  it('should overlay when channel is nsfw for multiple reason', () => {
-    comp._channel = {
+  it('should overlay when entity is nsfw for multiple reason', () => {
+    comp._entity = {
       nsfw: [1, 2, 3],
     };
     comp.showOverlay();
@@ -90,8 +90,44 @@ describe('OverlayComponent', () => {
     expect(comp.hidden).toBeFalsy();
   });
 
-  it('should overlay not show overlay if channel is not nsfw, mature and no mature_visibility', () => {
-    comp._channel = {
+  it('should overlay when entity has nsfw_lock for one reason', () => {
+    comp._entity = {
+      nsfw_lock: [1],
+    };
+    comp.showOverlay();
+    fixture.detectChanges();
+    expect(comp.hidden).toBeFalsy();
+  });
+
+  it('should overlay when entity has nsfw_lock for multiple reasons', () => {
+    comp._entity = {
+      nsfw_lock: [1, 2, 3],
+    };
+    comp.showOverlay();
+    fixture.detectChanges();
+    expect(comp.hidden).toBeFalsy();
+  });
+
+  it('should have type `channel` when entity is a user', () => {
+    comp.entity = {
+      type: 'user',
+    };
+    comp.showOverlay();
+    fixture.detectChanges();
+    expect(comp.type).toBe('channel');
+  });
+
+  it('should have type `group` when entity is a group', () => {
+    comp.entity = {
+      type: 'group',
+    };
+    comp.showOverlay();
+    fixture.detectChanges();
+    expect(comp.type).toBe('group');
+  });
+
+  it('should overlay not show overlay if entity is not nsfw, mature and no mature_visibility', () => {
+    comp._entity = {
       mature_visibility: false,
       is_mature: false,
       nsfw: [],
@@ -102,7 +138,7 @@ describe('OverlayComponent', () => {
   });
 
   it('should not register undefined values as a false positive, and show the overlay', () => {
-    comp._channel = {
+    comp._entity = {
       mature_visibility: undefined,
       is_mature: undefined,
       nsfw: undefined,

src/app/modules/channels/explicit-overlay/overlay.component.ts → src/app/common/components/explicit-overlay/overlay.component.ts

@@ -2,22 +2,30 @@ import { Component, Input } from '@angular/core';
 import { Session } from '../../../services/session';
 import { Router } from '@angular/router';
 import { Storage } from '../../../services/storage';
-import { ConfigsService } from '../../../common/services/configs.service';
+import { ConfigsService } from '../../services/configs.service';
 
 @Component({
-  selector: 'm-channel--explicit-overlay',
+  selector: 'm-explicit-overlay',
   templateUrl: 'overlay.component.html',
 })
 export class ExplicitOverlayComponent {
   readonly siteUrl: string;
   public hidden = true;
-  public _channel: any;
+  public _entity: any;
+  public type: string;
 
-  @Input() set channel(value: any) {
-    this._channel = value;
-    this.showOverlay();
+  @Input() set entity(value: any) {
+    if (value) {
+      // change wording for entity label
+      this.type = value.type === 'user' ? 'channel' : value.type;
+
+      this._entity = value;
+      this.showOverlay();
+    }
   }
 
+  @Input() message: string;
+
   constructor(
     public session: Session,
     public storage: Storage,
@@ -28,15 +36,18 @@ export class ExplicitOverlayComponent {
   }
 
   login() {
-    this.storage.set('redirect', this.siteUrl + this._channel.username);
-    this.router.navigate(['/login']);
+    // TODO: Support redirect for other entity types.
+    if (this.type === 'channel') {
+      this.storage.set('redirect', this.siteUrl + this._entity.username);
+      this.router.navigate(['/login']);
+    }
   }
 
   /**
    * Disables overlay screen, revealing channel.
    */
   protected disableFilter(): void {
-    this._channel.mature_visibility = true;
+    this._entity.mature_visibility = true;
     this.hidden = true;
   }
 
@@ -45,15 +56,17 @@ export class ExplicitOverlayComponent {
    * over the a channel.
    */
   public showOverlay(): void {
-    if (!this._channel) {
+    if (!this._entity) {
       return;
     }
 
-    if (this._channel.mature_visibility) {
+    if (this._entity.mature_visibility) {
       this.hidden = true;
-    } else if (this._channel.is_mature) {
+    } else if (this._entity.is_mature) {
+      this.hidden = false;
+    } else if (this._entity.nsfw && this._entity.nsfw.length > 0) {
       this.hidden = false;
-    } else if (this._channel.nsfw && this._channel.nsfw.length > 0) {
+    } else if (this._entity.nsfw_lock && this._entity.nsfw_lock.length > 0) {
       this.hidden = false;
     } else {
       this.hidden = true;

src/app/modules/channels/channel.component.html

@@ -154,4 +154,8 @@
   </section>
 </div>
 
-<m-channel--explicit-overlay [channel]="user"></m-channel--explicit-overlay>
+<m-explicit-overlay
+  [entity]="user"
+  message="This channel contains content that is NSFW"
+  i18n-message
+></m-explicit-overlay>

src/app/modules/channels/channel.component.spec.ts

@@ -76,8 +76,8 @@ describe('ChannelComponent', () => {
           inputs: ['user', 'editing'],
         }),
         MockComponent({
-          selector: 'm-channel--explicit-overlay',
-          inputs: ['channel'],
+          selector: 'm-explicit-overlay',
+          inputs: ['entity'],
         }),
         MockComponent({
           selector: 'm-sort-selector',

src/app/modules/channels/channels.module.ts

@@ -23,7 +23,6 @@ import { ChannelComponent } from './channel.component';
 import { ChannelsTileComponent } from './tile/tile.component';
 import { PosterModule } from '../newsfeed/poster/poster.module';
 import { NewsfeedModule } from '../newsfeed/newsfeed.module';
-import { ExplicitOverlayComponent } from './explicit-overlay/overlay.component';
 import { HashtagsModule } from '../hashtags/hashtags.module';
 import { ChannelSortedComponent } from './sorted/sorted.component';
 import { ChannelSortedModuleComponent } from './sorted/module.component';
@@ -59,7 +58,6 @@ const routes: Routes = [
     ChannelsTileComponent,
     ChannelFeedComponent,
     ChannelSidebar,
-    ExplicitOverlayComponent,
     ChannelSortedComponent,
     ChannelSortedModuleComponent,
   ],

src/app/modules/groups/profile/profile.html

@@ -13,6 +13,12 @@
   <router-outlet></router-outlet>
 </div>
 
+<m-explicit-overlay
+  [entity]="group"
+  message="This group contains content that is NSFW"
+  i18n-message
+></m-explicit-overlay>
+
 <div
   class="m-group__grid"
   *ngIf="group && (group['is:member'] || group.membership == 2)"