Client: Handle NSFW video

8 files changed, 92 insertions, 16 deletions

diff --git a/client/src/app/videos/shared/video.model.ts b/client/src/app/videos/shared/video.model.ts
index 5ed622dce..3c588c446 100644
--- a/client/src/app/videos/shared/video.model.ts
+++ b/client/src/app/videos/shared/video.model.ts
@@ -1,3 +1,5 @@
+import { User } from '../../shared';
+
 export class Video {
   author: string;
   by: string;
@@ -16,6 +18,7 @@ export class Video {
   views: number;
   likes: number;
   dislikes: number;
+  nsfw: boolean;
 
   private static createByString(author: string, podHost: string) {
     return author + '@' + podHost;
@@ -47,6 +50,7 @@ export class Video {
     views: number,
     likes: number,
     dislikes: number,
+    nsfw: boolean
   }) {
     this.author  = hash.author;
     this.createdAt = new Date(hash.createdAt);
@@ -64,11 +68,17 @@ export class Video {
     this.views = hash.views;
     this.likes = hash.likes;
     this.dislikes = hash.dislikes;
+    this.nsfw = hash.nsfw;
 
     this.by = Video.createByString(hash.author, hash.podHost);
   }
 
-  isRemovableBy(user) {
+  isRemovableBy(user: User) {
     return this.isLocal === true && user && this.author === user.username;
   }
+
+  isVideoNSFWForUser(user: User) {
+    // If the video is NSFW and the user is not logged in, or the user does not want to display NSFW videos...
+    return (this.nsfw && (!user || user.displayNSFW === false));
+  }
 }
diff --git a/client/src/app/videos/video-add/video-add.component.html b/client/src/app/videos/video-add/video-add.component.html
index 97a3c846a..a3c25c14b 100644
--- a/client/src/app/videos/video-add/video-add.component.html
+++ b/client/src/app/videos/video-add/video-add.component.html
@@ -15,6 +15,14 @@
   </div>
 
   <div class="form-group">
+    <label for="nsfw">NSFW</label>
+    <input
+      type="checkbox" id="nsfw"
+      formControlName="nsfw"
+    >
+  </div>
+
+  <div class="form-group">
     <label for="category">Category</label>
     <select class="form-control" id="category" formControlName="category">
       <option></option>
diff --git a/client/src/app/videos/video-add/video-add.component.ts b/client/src/app/videos/video-add/video-add.component.ts
index 8fae233d3..ea7ad2e5c 100644
--- a/client/src/app/videos/video-add/video-add.component.ts
+++ b/client/src/app/videos/video-add/video-add.component.ts
@@ -71,6 +71,7 @@ export class VideoAddComponent extends FormReactive implements OnInit {
   buildForm() {
     this.form = this.formBuilder.group({
       name: [ '', VIDEO_NAME.VALIDATORS ],
+      nsfw: [ false ],
       category: [ '', VIDEO_CATEGORY.VALIDATORS ],
       licence: [ '', VIDEO_LICENCE.VALIDATORS ],
       description: [ '', VIDEO_DESCRIPTION.VALIDATORS ],
@@ -93,12 +94,14 @@ export class VideoAddComponent extends FormReactive implements OnInit {
 
     this.uploader.onBuildItemForm = (item, form) => {
       const name = this.form.value['name'];
+      const nsfw = this.form.value['nsfw'];
       const category = this.form.value['category'];
       const licence = this.form.value['licence'];
       const description = this.form.value['description'];
 
       form.append('name', name);
       form.append('category', category);
+      form.append('nsfw', nsfw);
       form.append('licence', licence);
       form.append('description', description);
 
diff --git a/client/src/app/videos/video-list/video-miniature.component.html b/client/src/app/videos/video-list/video-miniature.component.html
index b2bf35435..94b892698 100644
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/client/src/app/videos/video-list/video-miniature.component.html
@@ -3,7 +3,11 @@
     [routerLink]="['/videos/watch', video.id]" [attr.title]="video.description"
     class="video-miniature-thumbnail"
   >
-    <img [attr.src]="video.thumbnailPath" alt="video thumbnail" />
+    <img *ngIf="isVideoNSFWForThisUser() === false" [attr.src]="video.thumbnailPath" alt="video thumbnail" />
+    <div *ngIf="isVideoNSFWForThisUser()" class="thumbnail-nsfw">
+      NSFW
+    </div>
+
     <span class="video-miniature-duration">{{ video.duration }}</span>
   </a>
   <span
@@ -13,7 +17,7 @@
 
   <div class="video-miniature-informations">
     <span class="video-miniature-name-tags">
-      <a [routerLink]="['/videos/watch', video.id]" [attr.title]="video.name" class="video-miniature-name">{{ video.name }}</a>
+      <a [routerLink]="['/videos/watch', video.id]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
 
       <div class="video-miniature-tags">
         <span *ngFor="let tag of video.tags" class="video-miniature-tag">
diff --git a/client/src/app/videos/video-list/video-miniature.component.scss b/client/src/app/videos/video-list/video-miniature.component.scss
index b5d24271a..b8e90e8c5 100644
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/client/src/app/videos/video-list/video-miniature.component.scss
@@ -15,6 +15,21 @@
     display: inline-block;
     position: relative;
 
+    &:hover {
+      text-decoration: none !important;
+    }
+
+    .thumbnail-nsfw {
+      background-color: #000;
+      color: #fff;
+      text-align: center;
+      font-size: 30px;
+      line-height: 110px;
+
+      width: 200px;
+      height: 110px;
+    }
+
     .video-miniature-duration {
       position: absolute;
       right: 5px;
diff --git a/client/src/app/videos/video-list/video-miniature.component.ts b/client/src/app/videos/video-list/video-miniature.component.ts
index ba4715597..888026dde 100644
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/client/src/app/videos/video-list/video-miniature.component.ts
@@ -2,7 +2,7 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 import { NotificationsService } from 'angular2-notifications';
 
-import { ConfirmService } from '../../core';
+import { ConfirmService, ConfigService } from '../../core';
 import { SortField, Video, VideoService } from '../shared';
 import { User } from '../../shared';
 
@@ -24,6 +24,7 @@ export class VideoMiniatureComponent {
   constructor(
     private notificationsService: NotificationsService,
     private confirmService: ConfirmService,
+    private configService: ConfigService,
     private videoService: VideoService
   ) {}
 
@@ -31,6 +32,13 @@ export class VideoMiniatureComponent {
     return this.hovering && this.video.isRemovableBy(this.user);
   }
 
+  getVideoName() {
+    if (this.isVideoNSFWForThisUser())
+      return 'NSFW';
+
+    return this.video.name;
+  }
+
   onBlur() {
     this.hovering = false;
   }
@@ -52,4 +60,8 @@ export class VideoMiniatureComponent {
       }
     );
   }
+
+  isVideoNSFWForThisUser() {
+    return this.video.isVideoNSFWForUser(this.user);
+  }
 }
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index 5678f6df8..37ed70a99 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,12 +1,13 @@
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { Observable } from 'rxjs/Observable';
 import { Subscription } from 'rxjs/Subscription';
 
 import * as videojs from 'video.js';
 import { MetaService } from '@nglibs/meta';
 import { NotificationsService } from 'angular2-notifications';
 
-import { AuthService } from '../../core';
+import { AuthService, ConfirmService } from '../../core';
 import { VideoMagnetComponent } from './video-magnet.component';
 import { VideoShareComponent } from './video-share.component';
 import { VideoReportComponent } from './video-report.component';
@@ -47,7 +48,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     private elementRef: ElementRef,
     private ngZone: NgZone,
     private route: ActivatedRoute,
+    private router: Router,
     private videoService: VideoService,
+    private confirmService: ConfirmService,
     private metaService: MetaService,
     private webTorrentService: WebTorrentService,
     private authService: AuthService,
@@ -58,15 +61,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.paramsSub = this.route.params.subscribe(routeParams => {
       let id = routeParams['id'];
       this.videoService.getVideo(id).subscribe(
-        video => {
-          this.video = video;
-          this.setOpenGraphTags();
-          this.loadVideo();
-          this.checkUserRating();
-        },
-        error => {
-          this.videoNotFound = true;
-        }
+        video => this.onVideoFetched(video),
+
+        error => this.videoNotFound = true
       );
     });
 
@@ -92,7 +89,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     window.clearInterval(this.torrentInfosInterval);
     window.clearTimeout(this.errorTimer);
 
-    if (this.video !== null) {
+    if (this.video !== null && this.webTorrentService.has(this.video.magnetUri)) {
       this.webTorrentService.remove(this.video.magnetUri);
     }
 
@@ -206,6 +203,29 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
                       );
   }
 
+  private onVideoFetched(video: Video) {
+    this.video = video;
+
+    let observable;
+    if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
+      observable = this.confirmService.confirm('This video is not safe for work. Are you sure you want to watch it?', 'NSFW');
+    } else {
+      observable = Observable.of(true);
+    }
+
+    observable.subscribe(
+      res => {
+        if (res === false) {
+          return this.router.navigate([ '/videos/list' ]);
+        }
+
+        this.setOpenGraphTags();
+        this.loadVideo();
+        this.checkUserRating();
+      }
+    );
+  }
+
   private updateVideoRating(oldRating: RateType, newRating: RateType) {
     let likesToIncrement = 0;
     let dislikesToIncrement = 0;
diff --git a/client/src/app/videos/video-watch/webtorrent.service.ts b/client/src/app/videos/video-watch/webtorrent.service.ts
index 0192167ee..630a5c469 100644
--- a/client/src/app/videos/video-watch/webtorrent.service.ts
+++ b/client/src/app/videos/video-watch/webtorrent.service.ts
@@ -26,4 +26,8 @@ export class WebTorrentService {
   remove(magnetUri: string) {
     return this.client.remove(magnetUri);
   }
+
+  has(magnetUri: string) {
+    return this.client.get(magnetUri) !== null;
+  }
 }