Client: Handle NSFW video

3 files changed, 34 insertions, 3 deletions

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);
+  }
 }