Add playlist channel validator when playlist is public

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,

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"
+          type="text" id="displayName"
-          formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+          formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
         >
-        <div *ngIf="formErrors['display-name']" class="form-error">
+        <div *ngIf="formErrors['displayName']" class="form-error">
-          {{ formErrors['display-name'] }}
+          {{ 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">

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'],
+      displayName: body.displayName,
-      privacy: body['privacy'],
+      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

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()
+  }
 }

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"
+      type="text" id="displayName"
-      formControlName="display-name" [ngClass]="{ 'input-error': formErrors['display-name'] }"
+      formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
     >
-    <div *ngIf="formErrors['display-name']" class="form-error">
+    <div *ngIf="formErrors['displayName']" class="form-error">
-      {{ formErrors['display-name'] }}
+      {{ formErrors['displayName'] }}
     </div>
   </div>
 

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,