Set channel banner/avatar in creation form

4 files changed, 82 insertions, 47 deletions

diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
index a625493de..b3265210f 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-create.component.ts
@@ -8,10 +8,12 @@ import {
   VIDEO_CHANNEL_SUPPORT_VALIDATOR
 } from '@app/shared/form-validators/video-channel-validators'
 import { FormValidatorService } from '@app/shared/shared-forms'
-import { VideoChannelService } from '@app/shared/shared-main'
+import { VideoChannel, VideoChannelService } from '@app/shared/shared-main'
 import { VideoChannelCreate } from '@shared/models'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { MyVideoChannelEdit } from './my-video-channel-edit'
+import { switchMap } from 'rxjs/operators'
+import { of } from 'rxjs'
 
 @Component({
   templateUrl: './my-video-channel-edit.component.html',
@@ -19,6 +21,10 @@ import { MyVideoChannelEdit } from './my-video-channel-edit'
 })
 export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements OnInit {
   error: string
+  videoChannel = new VideoChannel({})
+
+  private avatar: FormData
+  private banner: FormData
 
   constructor (
     protected formValidatorService: FormValidatorService,
@@ -50,23 +56,43 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
       support: body.support || null
     }
 
-    this.videoChannelService.createVideoChannel(videoChannelCreate).subscribe(
-      () => {
-        this.authService.refreshUserInformation()
+    this.videoChannelService.createVideoChannel(videoChannelCreate)
+      .pipe(
+        switchMap(() => this.uploadAvatar()),
+        switchMap(() => this.uploadBanner())
+      ).subscribe(
+        () => {
+          this.authService.refreshUserInformation()
+
+          this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
+          this.router.navigate(['/my-library', 'video-channels'])
+        },
 
-        this.notifier.success($localize`Video channel ${videoChannelCreate.displayName} created.`)
-        this.router.navigate([ '/my-library', 'video-channels' ])
-      },
+        err => {
+          if (err.status === HttpStatusCode.CONFLICT_409) {
+            this.error = $localize`This name already exists on this instance.`
+            return
+          }
 
-      err => {
-        if (err.status === HttpStatusCode.CONFLICT_409) {
-          this.error = $localize`This name already exists on this instance.`
-          return
+          this.error = err.message
         }
+      )
+  }
+
+  onAvatarChange (formData: FormData) {
+    this.avatar = formData
+  }
+
+  onAvatarDelete () {
+    this.avatar = null
+  }
+
+  onBannerChange (formData: FormData) {
+    this.banner = formData
+  }
 
-        this.error = err.message
-      }
-    )
+  onBannerDelete () {
+    this.banner = null
   }
 
   isCreation () {
@@ -76,4 +102,20 @@ export class MyVideoChannelCreateComponent extends MyVideoChannelEdit implements
   getFormButtonTitle () {
     return $localize`Create`
   }
+
+  getUsername () {
+    return this.form.value.name
+  }
+
+  private uploadAvatar () {
+    if (!this.avatar) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.avatar, 'avatar')
+  }
+
+  private uploadBanner () {
+    if (!this.banner) return of(undefined)
+
+    return this.videoChannelService.changeVideoChannelImage(this.getUsername(), this.banner, 'banner')
+  }
 }
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
index 7b8928907..2910dffad 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.component.html
@@ -10,7 +10,7 @@
     <ng-container *ngIf="!isCreation()">
       <li class="breadcrumb-item active" i18n>Edit</li>
       <li class="breadcrumb-item active" aria-current="page">
-        <a *ngIf="videoChannelToUpdate" [routerLink]="[ '/my-library/video-channels/update', videoChannelToUpdate?.nameWithHost ]">{{ videoChannelToUpdate?.displayName }}</a>
+        <a *ngIf="videoChannel" [routerLink]="[ '/my-library/video-channels/update', videoChannel?.nameWithHost ]">{{ videoChannel?.displayName }}</a>
       </li>
     </ng-container>
   </ol>
@@ -23,10 +23,22 @@
   <div class="form-row"> <!-- channel grid -->
     <div class="form-group col-12 col-lg-4 col-xl-3">
       <div *ngIf="isCreation()" class="video-channel-title" i18n>NEW CHANNEL</div>
-      <div *ngIf="!isCreation() && videoChannelToUpdate" class="video-channel-title" i18n>CHANNEL</div>
+      <div *ngIf="!isCreation() && videoChannel" class="video-channel-title" i18n>CHANNEL</div>
     </div>
 
     <div class="form-group col-12 col-lg-8 col-xl-9">
+      <h6 i18n>Banner image of your channel</h6>
+
+      <my-actor-banner-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
+      ></my-actor-banner-edit>
+
+      <my-actor-avatar-edit
+        *ngIf="videoChannel" [previewImage]="isCreation()"
+        [actor]="videoChannel" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
+        [displayUsername]="!isCreation()" [displaySubscribers]="!isCreation()"
+      ></my-actor-avatar-edit>
 
       <div class="form-group" *ngIf="isCreation()">
         <label i18n for="name">Name</label>
@@ -44,18 +56,6 @@
         </div>
       </div>
 
-      <h6 i18n>Banner image of your channel</h6>
-
-      <my-actor-banner-edit
-        *ngIf="!isCreation() && videoChannelToUpdate"
-        [actor]="videoChannelToUpdate" (bannerChange)="onBannerChange($event)" (bannerDelete)="onBannerDelete()"
-      ></my-actor-banner-edit>
-
-      <my-actor-avatar-edit
-        *ngIf="!isCreation() && videoChannelToUpdate"
-        [actor]="videoChannelToUpdate" (avatarChange)="onAvatarChange($event)" (avatarDelete)="onAvatarDelete()"
-      ></my-actor-avatar-edit>
-
       <div class="form-group">
         <label i18n for="display-name">Display name</label>
         <input
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
index 0cdf2fe34..33bb90f14 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-edit.ts
@@ -2,8 +2,7 @@ import { FormReactive } from '@app/shared/shared-forms'
 import { VideoChannel } from '@app/shared/shared-main'
 
 export abstract class MyVideoChannelEdit extends FormReactive {
-  // We need it even in the create component because it's used in the edit template
-  videoChannelToUpdate: VideoChannel
+  videoChannel: VideoChannel
 
   abstract isCreation (): boolean
   abstract getFormButtonTitle (): string
@@ -12,12 +11,6 @@ export abstract class MyVideoChannelEdit extends FormReactive {
     return window.location.host
   }
 
-  // We need this method so angular does not complain in child template that doesn't need this
-  onAvatarChange (formData: FormData) { /* empty */ }
-  onAvatarDelete () { /* empty */ }
-  onBannerChange (formData: FormData) { /* empty */ }
-  onBannerDelete () { /* empty */ }
-
   // Should be implemented by the child
   isBulkUpdateVideosDisplayed () {
     return false
diff --git a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
index 22935a87a..a29af176c 100644
--- a/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
+++ b/client/src/app/+my-library/+my-video-channels/my-video-channel-update.component.ts
@@ -21,7 +21,7 @@ import { MyVideoChannelEdit } from './my-video-channel-edit'
 })
 export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements OnInit, OnDestroy {
   error: string
-  videoChannelToUpdate: VideoChannel
+  videoChannel: VideoChannel
 
   private paramsSub: Subscription
   private oldSupportField: string
@@ -56,7 +56,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
 
       this.videoChannelService.getVideoChannel(videoChannelId).subscribe(
         videoChannelToUpdate => {
-          this.videoChannelToUpdate = videoChannelToUpdate
+          this.videoChannel = videoChannelToUpdate
 
           this.oldSupportField = videoChannelToUpdate.support
 
@@ -87,7 +87,7 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
       bulkVideosSupportUpdate: body.bulkVideosSupportUpdate || false
     }
 
-    this.videoChannelService.updateVideoChannel(this.videoChannelToUpdate.name, videoChannelUpdate).subscribe(
+    this.videoChannelService.updateVideoChannel(this.videoChannel.name, videoChannelUpdate).subscribe(
       () => {
         this.authService.refreshUserInformation()
 
@@ -101,12 +101,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onAvatarChange (formData: FormData) {
-    this.videoChannelService.changeVideoChannelImage(this.videoChannelToUpdate.name, formData, 'avatar')
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'avatar')
         .subscribe(
           data => {
             this.notifier.success($localize`Avatar changed.`)
 
-            this.videoChannelToUpdate.updateAvatar(data.avatar)
+            this.videoChannel.updateAvatar(data.avatar)
           },
 
           (err: HttpErrorResponse) => uploadErrorHandler({
@@ -118,12 +118,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onAvatarDelete () {
-    this.videoChannelService.deleteVideoChannelImage(this.videoChannelToUpdate.name, 'avatar')
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'avatar')
                             .subscribe(
                               data => {
                                 this.notifier.success($localize`Avatar deleted.`)
 
-                                this.videoChannelToUpdate.resetAvatar()
+                                this.videoChannel.resetAvatar()
                               },
 
                               err => this.notifier.error(err.message)
@@ -131,12 +131,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onBannerChange (formData: FormData) {
-    this.videoChannelService.changeVideoChannelImage(this.videoChannelToUpdate.name, formData, 'banner')
+    this.videoChannelService.changeVideoChannelImage(this.videoChannel.name, formData, 'banner')
         .subscribe(
           data => {
             this.notifier.success($localize`Banner changed.`)
 
-            this.videoChannelToUpdate.updateBanner(data.banner)
+            this.videoChannel.updateBanner(data.banner)
           },
 
           (err: HttpErrorResponse) => uploadErrorHandler({
@@ -148,12 +148,12 @@ export class MyVideoChannelUpdateComponent extends MyVideoChannelEdit implements
   }
 
   onBannerDelete () {
-    this.videoChannelService.deleteVideoChannelImage(this.videoChannelToUpdate.name, 'banner')
+    this.videoChannelService.deleteVideoChannelImage(this.videoChannel.name, 'banner')
                             .subscribe(
                               data => {
                                 this.notifier.success($localize`Banner deleted.`)
 
-                                this.videoChannelToUpdate.resetBanner()
+                                this.videoChannel.resetBanner()
                               },
 
                               err => this.notifier.error(err.message)