Replace NSFW with "mature or explicit content"

Blur their thumbnail and name

client/src/app/account/account-details/account-details.component.html

@@ -2,11 +2,11 @@
 
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
   <div class="form-group">
-    <label for="displayNSFW">Display NSFW videos</label>
     <input
       type="checkbox" id="displayNSFW"
       formControlName="displayNSFW"
     >
+    <label for="displayNSFW">Display videos that contain mature or explicit content</label>
     <div *ngIf="formErrors['displayNSFW']" class="alert alert-danger">
       {{ formErrors['displayNSFW'] }}
     </div>

client/src/app/videos/+video-edit/video-add.component.html

@@ -18,11 +18,11 @@
       </div>
 
       <div class="form-group">
-        <label for="nsfw">NSFW</label>
         <input
           type="checkbox" id="nsfw"
           formControlName="nsfw"
         >
+        <label for="nsfw">This video contains mature or explicit content</label>
       </div>
 
       <div class="form-group">

client/src/app/videos/+video-edit/video-update.component.html

@@ -18,11 +18,11 @@
     </div>
 
     <div class="form-group">
-      <label for="nsfw">NSFW</label>
       <input
         type="checkbox" id="nsfw"
         formControlName="nsfw"
       >
+      <label for="nsfw">This video contains mature or explicit content</label>
     </div>
 
     <div class="form-group">

client/src/app/videos/+video-watch/video-watch.component.html

@@ -29,7 +29,7 @@
   <div id="torrent-info-peers" class="col-md-4 col-sm-4 col-xs-4">Number of peers: {{ numPeers }}</div>
 </div>
 
-<!-- Video informations -->
+<!-- Video information -->
 <div *ngIf="video !== null" id="video-info">
   <div class="row video-name-views">
     <div class="col-xs-8 col-md-8 video-name">

client/src/app/videos/+video-watch/video-watch.component.ts

@@ -218,7 +218,10 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     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')
+      observable = this.confirmService.confirm(
+        'This video contains mature or explicit content. Are you sure you want to watch it?',
+        'Mature or explicit content'
+      )
     } else {
       observable = Observable.of(true)
     }

client/src/app/videos/video-list/video-list.component.ts

@@ -5,13 +5,14 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject'
 
 import { NotificationsService } from 'angular2-notifications'
 
+import { AuthService } from '../../core'
 import {
   SortField,
   Video,
   VideoService,
   VideoPagination
 } from '../shared'
-import { Search, SearchField, SearchService } from '../../shared'
+import { Search, SearchField, SearchService, User} from '../../shared'
 
 @Component({
   selector: 'my-videos-list',
@@ -26,6 +27,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
     totalItems: null
   }
   sort: SortField
+  user: User
   videos: Video[] = []
 
   private search: Search
@@ -33,6 +35,7 @@ export class VideoListComponent implements OnInit, OnDestroy {
   private subSearch: Subscription
 
   constructor (
+    private authService: AuthService,
     private notificationsService: NotificationsService,
     private router: Router,
     private route: ActivatedRoute,
@@ -41,6 +44,8 @@ export class VideoListComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit () {
+    this.user = this.authService.getUser()
+
     // Subscribe to route changes
     this.subActivatedRoute = this.route.params.subscribe(routeParams => {
       this.loadRouteParams(routeParams)

client/src/app/videos/video-list/video-miniature.component.html

@@ -3,10 +3,7 @@
     [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.description"
     class="video-miniature-thumbnail"
   >
-    <img *ngIf="isVideoNSFWForThisUser() === false" [attr.src]="video.thumbnailUrl" alt="video thumbnail" />
-    <div *ngIf="isVideoNSFWForThisUser()" class="thumbnail-nsfw">
-      NSFW
-    </div>
+    <img [attr.src]="video.thumbnailUrl" alt="video thumbnail" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }" />
 
     <div class="video-miniature-thumbnail-overlay">
       <span class="video-miniature-thumbnail-overlay-views">{{ video.views }} views</span>
@@ -14,9 +11,14 @@
     </div>
   </a>
 
-  <div class="video-miniature-informations">
+  <div class="video-miniature-information">
     <span class="video-miniature-name">
-      <a [routerLink]="['/videos/watch', video.uuid]" [attr.title]="getVideoName()" class="video-miniature-name">{{ getVideoName() }}</a>
+      <a
+        class="video-miniature-name"
+        [routerLink]="['/videos/watch', video.uuid]" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoNSFWForThisUser() }"
+      >
+          {{ video.name }}
+      </a>
     </span>
 
     <div class="video-miniature-tags">

client/src/app/videos/video-list/video-miniature.component.scss

@@ -9,24 +9,16 @@
   .video-miniature-thumbnail {
     display: inline-block;
     position: relative;
+    border-radius: 3px;
+    overflow: hidden;
 
     &: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;
-    }
-
-    img, .thumbnail-nsfw {
-      border-radius: 3px;
+    img.blur-filter {
+      filter: blur(5px);
+      transform : scale(1.03);
     }
 
     .video-miniature-thumbnail-overlay {
@@ -51,7 +43,7 @@
     }
   }
 
-  .video-miniature-informations {
+  .video-miniature-information {
     width: 200px;
 
     .video-miniature-name {
@@ -68,6 +60,11 @@
         text-decoration: none;
       }
 
+      &.blur-filter {
+        filter: blur(3px);
+        padding-left: 4px;
+      }
+
       .video-miniature-tags {
         // Fix for chrome when tags are long
         width: 201px;

client/src/app/videos/video-list/video-miniature.component.ts

@@ -13,14 +13,6 @@ export class VideoMiniatureComponent {
   @Input() user: User
   @Input() video: Video
 
-  getVideoName () {
-    if (this.isVideoNSFWForThisUser()) {
-      return 'NSFW'
-    }
-
-    return this.video.name
-  }
-
   isVideoNSFWForThisUser () {
     return this.video.isVideoNSFWForUser(this.user)
   }