Add ability to choose what policy we have for NSFW videos

There is a global instance setting and a per user setting

3 files changed, 22 insertions, 9 deletions

diff --git a/client/src/app/account/account-settings/account-details/account-details.component.html b/client/src/app/account/account-settings/account-details/account-details.component.html
index 8f1475a4d..9dcc66a75 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.html
+++ b/client/src/app/account/account-settings/account-details/account-details.component.html
@@ -1,11 +1,18 @@
 <form role="form" (ngSubmit)="updateDetails()" [formGroup]="form">
   <div class="form-group">
-    <input
-      type="checkbox" id="displayNSFW"
-      formControlName="displayNSFW"
-    >
-    <label for="displayNSFW"></label>
-    <label for="displayNSFW">Display videos that contain mature or explicit content</label>
+    <label for="nsfwPolicy">Default policy on videos containing sensitive content</label>
+    <my-help helpType="custom" customHtml="With <strong>Do not list</strong> or <strong>Blur thumbnails</strong>, a confirmation will be requested to watch the video."></my-help>
+
+    <div class="peertube-select-container">
+      <select id="nsfwPolicy" formControlName="nsfwPolicy">
+        <option value="do_not_list">Do not list</option>
+        <option value="blur">Blur thumbnails</option>
+        <option value="display">Display</option>
+      </select>
+    </div>
+    <div *ngIf="formErrors.nsfwPolicy" class="form-error">
+      {{ formErrors.nsfwPolicy }}
+    </div>
   </div>
 
   <div class="form-group">
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.scss b/client/src/app/account/account-settings/account-details/account-details.component.scss
index 4e8dfde1d..ed59e4689 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.scss
+++ b/client/src/app/account/account-settings/account-details/account-details.component.scss
@@ -12,3 +12,9 @@ input[type=submit] {
   display: block;
   margin-top: 15px;
 }
+
+.peertube-select-container {
+  @include peertube-select-container(340px);
+
+  margin-bottom: 30px;
+}
\ No newline at end of file
diff --git a/client/src/app/account/account-settings/account-details/account-details.component.ts b/client/src/app/account/account-settings/account-details/account-details.component.ts
index 917f31651..de213717e 100644
--- a/client/src/app/account/account-settings/account-details/account-details.component.ts
+++ b/client/src/app/account/account-settings/account-details/account-details.component.ts
@@ -29,7 +29,7 @@ export class AccountDetailsComponent extends FormReactive implements OnInit {
 
   buildForm () {
     this.form = this.formBuilder.group({
-      displayNSFW: [ this.user.displayNSFW ],
+      nsfwPolicy: [ this.user.nsfwPolicy ],
       autoPlayVideo: [ this.user.autoPlayVideo ]
     })
 
@@ -41,10 +41,10 @@ export class AccountDetailsComponent extends FormReactive implements OnInit {
   }
 
   updateDetails () {
-    const displayNSFW = this.form.value['displayNSFW']
+    const nsfwPolicy = this.form.value['nsfwPolicy']
     const autoPlayVideo = this.form.value['autoPlayVideo']
     const details: UserUpdateMe = {
-      displayNSFW,
+      nsfwPolicy,
       autoPlayVideo
     }