Add playlist channel validator when playlist is public

3 files changed, 24 insertions, 10 deletions

diff --git a/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
index 726084b47..a2c9a5368 100644
--- a/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
+++ b/client/src/app/shared/forms/form-validators/video-playlist-validators.service.ts
@@ -1,7 +1,8 @@
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { Validators } from '@angular/forms'
+import { AbstractControl, FormControl, Validators } from '@angular/forms'
 import { Injectable } from '@angular/core'
 import { BuildFormValidator } from '@app/shared'
+import { VideoPlaylistPrivacy } from '@shared/models'
 
 @Injectable()
 export class VideoPlaylistValidatorsService {
@@ -46,7 +47,20 @@ export class VideoPlaylistValidatorsService {
 
     this.VIDEO_PLAYLIST_CHANNEL_ID = {
       VALIDATORS: [ ],
-      MESSAGES: { }
+      MESSAGES: {
+        'required': this.i18n('The channel is required when the playlist is public.')
+      }
+    }
+  }
+
+  setChannelValidator (channelControl: AbstractControl, privacy: VideoPlaylistPrivacy) {
+    if (privacy.toString() === VideoPlaylistPrivacy.PUBLIC.toString()) {
+      channelControl.setValidators([ Validators.required ])
+    } else {
+      channelControl.setValidators(null)
     }
+
+    channelControl.markAsDirty()
+    channelControl.updateValueAndValidity()
   }
 }
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
index f85e50d6d..19b326206 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.html
@@ -60,13 +60,13 @@
 
 <form class="new-playlist-block dropdown-item" *ngIf="isNewPlaylistBlockOpened" (ngSubmit)="createPlaylist()" [formGroup]="form">
   <div class="form-group">
-    <label i18n for="display-name">Display name</label>
+    <label i18n for="displayName">Display name</label>
     <input
-      type="text" id="display-name"
-      formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+      type="text" id="displayName"
+      formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
     >
-    <div *ngIf="formErrors['display-name']" class="form-error">
-      {{ formErrors['display-name'] }}
+    <div *ngIf="formErrors['displayName']" class="form-error">
+      {{ formErrors['displayName'] }}
     </div>
   </div>
 
diff --git a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
index c6fb6dbed..705f62404 100644
--- a/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
+++ b/client/src/app/shared/video-playlist/video-add-to-playlist.component.ts
@@ -5,7 +5,7 @@ import { forkJoin } from 'rxjs'
 import { Video, VideoPlaylistCreate, VideoPlaylistElementCreate, VideoPlaylistPrivacy } from '@shared/models'
 import { FormReactive, FormValidatorService, VideoPlaylistValidatorsService } from '@app/shared/forms'
 import { I18n } from '@ngx-translate/i18n-polyfill'
-import { secondsToTime, timeToInt } from '../../../assets/player/utils'
+import { secondsToTime } from '../../../assets/player/utils'
 
 type PlaylistSummary = {
   id: number
@@ -54,7 +54,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
     this.resetOptions(true)
 
     this.buildForm({
-      'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME
     })
 
     forkJoin([
@@ -105,7 +105,7 @@ export class VideoAddToPlaylistComponent extends FormReactive implements OnInit
   }
 
   createPlaylist () {
-    const displayName = this.form.value[ 'display-name' ]
+    const displayName = this.form.value[ 'displayName' ]
 
     const videoPlaylistCreate: VideoPlaylistCreate = {
       displayName,