Add playlist channel validator when playlist is public

3 files changed, 23 insertions, 11 deletions

diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
index 61b61e221..87a10961f 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-create.component.ts
@@ -35,13 +35,17 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
 
   ngOnInit () {
     this.buildForm({
-      'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
       privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
       description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
       videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
       thumbnailfile: null
     })
 
+    this.form.get('privacy').valueChanges.subscribe(privacy => {
+      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+    })
+
     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
 
     this.serverService.videoPlaylistPrivaciesLoaded.subscribe(
@@ -60,7 +64,7 @@ export class MyAccountVideoPlaylistCreateComponent extends MyAccountVideoPlaylis
 
     const body = this.form.value
     const videoPlaylistCreate: VideoPlaylistCreate = {
-      displayName: body['display-name'],
+      displayName: body.displayName,
       privacy: body.privacy,
       description: body.description || null,
       videoChannelId: body.videoChannelId || null,
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
index 5d1184218..303fc46f7 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-edit.component.html
@@ -6,13 +6,13 @@
   <div class="row">
     <div class="col-md-12 col-xl-6">
       <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>
 
@@ -50,6 +50,10 @@
             <option *ngFor="let channel of userVideoChannels" [value]="channel.id">{{ channel.label }}</option>
           </select>
         </div>
+
+        <div *ngIf="formErrors['videoChannelId']" class="form-error">
+          {{ formErrors['videoChannelId'] }}
+        </div>
       </div>
 
       <div class="form-group">
diff --git a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
index 167d7dd09..4887fdfb4 100644
--- a/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
+++ b/client/src/app/+my-account/my-account-video-playlists/my-account-video-playlist-update.component.ts
@@ -41,13 +41,17 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
 
   ngOnInit () {
     this.buildForm({
-      'display-name': this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
+      displayName: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DISPLAY_NAME,
       privacy: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_PRIVACY,
       description: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_DESCRIPTION,
       videoChannelId: this.videoPlaylistValidatorsService.VIDEO_PLAYLIST_CHANNEL_ID,
       thumbnailfile: null
     })
 
+    this.form.get('privacy').valueChanges.subscribe(privacy => {
+      this.videoPlaylistValidatorsService.setChannelValidator(this.form.get('videoChannelId'), privacy)
+    })
+
     populateAsyncUserVideoChannels(this.authService, this.userVideoChannels)
 
     this.paramsSub = this.route.params.subscribe(routeParams => {
@@ -85,8 +89,8 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
 
     const body = this.form.value
     const videoPlaylistUpdate: VideoPlaylistUpdate = {
-      displayName: body['display-name'],
-      privacy: body['privacy'],
+      displayName: body.displayName,
+      privacy: body.privacy,
       description: body.description || null,
       videoChannelId: body.videoChannelId || null,
       thumbnailfile: body.thumbnailfile || undefined
@@ -115,7 +119,7 @@ export class MyAccountVideoPlaylistUpdateComponent extends MyAccountVideoPlaylis
 
   private hydrateFormFromPlaylist () {
     this.form.patchValue({
-      'display-name': this.videoPlaylistToUpdate.displayName,
+      displayName: this.videoPlaylistToUpdate.displayName,
       privacy: this.videoPlaylistToUpdate.privacy.id,
       description: this.videoPlaylistToUpdate.description,
       videoChannelId: this.videoPlaylistToUpdate.videoChannel ? this.videoPlaylistToUpdate.videoChannel.id : null