Replace NSFW with "mature or explicit content"

Blur their thumbnail and name

diff --git a/client/src/app/account/account-details/account-details.component.html b/client/src/app/account/account-details/account-details.component.html
index 24b0750d297a81082fc43685c881197a9f3ef298..8f4f176afee1f55dc4ff00fd1c5a75551169b007 100644 (file)
--- a/client/src/app/account/account-details/account-details.component.html
+++ b/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>

diff --git a/client/src/app/videos/+video-edit/video-add.component.html b/client/src/app/videos/+video-edit/video-add.component.html
index 136c82a7c2c689b36b948ddbc85e76a00a5c25b6..3bf4101f4afd763bbfd172d36a9ccf56d7c447f5 100644 (file)
--- a/client/src/app/videos/+video-edit/video-add.component.html
+++ b/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">

diff --git a/client/src/app/videos/+video-edit/video-update.component.html b/client/src/app/videos/+video-edit/video-update.component.html
index 4ade5a671e2782b11fc12200056278b70628b22b..4dcb3ea5676618bd16be6a5674cff5409e58e9b3 100644 (file)
--- a/client/src/app/videos/+video-edit/video-update.component.html
+++ b/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">

diff --git a/client/src/app/videos/+video-watch/video-watch.component.html b/client/src/app/videos/+video-watch/video-watch.component.html
index 6e502aae28f0d7c2f45e2f6f6ae9e4f220384e30..4b594e7edf77e8cf5d1443c08bf5f885c61be1ea 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.html
+++ b/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">

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 2e1adb0434a757caa18a0d35da77ca8813f58909..199666bdc9a490311fd4b941a4e4a4a876cdb73d 100644 (file)
--- a/client/src/app/videos/+video-watch/video-watch.component.ts
+++ b/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)
     }

diff --git a/client/src/app/videos/video-list/video-list.component.ts b/client/src/app/videos/video-list/video-list.component.ts
index d2f0ae0450ef4d19d7ebbc2a9f6cdc646653ccd7..35a7b6521374f8c8111b415ca108e55a39c4bbeb 100644 (file)
--- a/client/src/app/videos/video-list/video-list.component.ts
+++ b/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)

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 6525b67bfb32f0aeb2304827c7cb1172df0059f9..abe87025f084acc759a56d2250ae79c23f41071b 100644 (file)
--- a/client/src/app/videos/video-list/video-miniature.component.html
+++ b/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">

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 c2743c3beb0c123df1578277e7de8787e233f600..066792d10ce2cf0a8a0abd285f78ac5f4d7c2247 100644 (file)
--- a/client/src/app/videos/video-list/video-miniature.component.scss
+++ b/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;

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 8d8b817ee494a439124b2205a6f4fbf71ca81a1b..18434dad2f28fc795db7b58ba577ce447e0ffd14 100644 (file)
--- a/client/src/app/videos/video-list/video-miniature.component.ts
+++ b/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)
   }