Set channel banner/avatar in creation form

6 files changed, 30 insertions, 10 deletions

diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
index 10f2ef262..0829263f4 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.html
@@ -1,6 +1,6 @@
 <div class="actor" *ngIf="actor">
   <div class="d-flex">
-    <img [ngClass]="{ channel: isChannel() }" [src]="actor.avatarUrl" alt="Avatar" />
+    <img [ngClass]="{ channel: isChannel() }" [src]="preview || actor.avatarUrl" alt="Avatar" />
 
     <div class="actor-img-edit-container">
 
diff --git a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
index 6f76172e9..d0d269489 100644
--- a/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-avatar-edit.component.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
 import { Account, VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
@@ -20,6 +21,7 @@ export class ActorAvatarEditComponent implements OnInit {
   @Input() editable = true
   @Input() displaySubscribers = true
   @Input() displayUsername = true
+  @Input() previewImage = false
 
   @Output() avatarChange = new EventEmitter<FormData>()
   @Output() avatarDelete = new EventEmitter<void>()
@@ -28,7 +30,10 @@ export class ActorAvatarEditComponent implements OnInit {
   maxAvatarSize = 0
   avatarExtensions = ''
 
+  preview: SafeResourceUrl
+
   constructor (
+    private sanitizer: DomSanitizer,
     private serverService: ServerService,
     private notifier: Notifier
   ) { }
@@ -57,14 +62,19 @@ export class ActorAvatarEditComponent implements OnInit {
     formData.append('avatarfile', avatarfile)
     this.avatarPopover?.close()
     this.avatarChange.emit(formData)
+
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
+    }
   }
 
   deleteAvatar () {
+    this.preview = undefined
     this.avatarDelete.emit()
   }
 
   hasAvatar () {
-    return !!this.actor.avatar
+    return !!this.preview || !!this.actor.avatar
   }
 
   isChannel () {
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
index eb1b66422..266fc26c5 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.html
@@ -1,7 +1,7 @@
 <div class="actor" *ngIf="actor">
   <div class="actor-img-edit-container">
     <div class="banner-placeholder">
-      <img *ngIf="hasBanner()" [src]="actor.bannerUrl" alt="Banner" />
+      <img *ngIf="hasBanner()" [src]="preview || actor.bannerUrl" alt="Banner" />
     </div>
 
     <div *ngIf="!hasBanner()" class="actor-img-edit-button" [ngbTooltip]="bannerFormat" placement="right" container="body">
diff --git a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
index 48451744c..8c12d3c4c 100644
--- a/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
+++ b/client/src/app/shared/shared-actor-image/actor-banner-edit.component.ts
@@ -1,4 +1,5 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
+import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
 import { Notifier, ServerService } from '@app/core'
 import { VideoChannel } from '@app/shared/shared-main'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
@@ -17,6 +18,7 @@ export class ActorBannerEditComponent implements OnInit {
   @ViewChild('bannerPopover') bannerPopover: NgbPopover
 
   @Input() actor: VideoChannel
+  @Input() previewImage = false
 
   @Output() bannerChange = new EventEmitter<FormData>()
   @Output() bannerDelete = new EventEmitter<void>()
@@ -25,7 +27,10 @@ export class ActorBannerEditComponent implements OnInit {
   maxBannerSize = 0
   bannerExtensions = ''
 
+  preview: SafeResourceUrl
+
   constructor (
+    private sanitizer: DomSanitizer,
     private serverService: ServerService,
     private notifier: Notifier
   ) { }
@@ -54,13 +59,18 @@ export class ActorBannerEditComponent implements OnInit {
     formData.append('bannerfile', bannerfile)
     this.bannerPopover?.close()
     this.bannerChange.emit(formData)
+
+    if (this.previewImage) {
+      this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
+    }
   }
 
   deleteBanner () {
+    this.preview = undefined
     this.bannerDelete.emit()
   }
 
   hasBanner () {
-    return !!this.actor.bannerUrl
+    return !!this.preview || !!this.actor.bannerUrl
   }
 }
diff --git a/client/src/app/shared/shared-main/account/actor.model.ts b/client/src/app/shared/shared-main/account/actor.model.ts
index 670823060..1ee0c297e 100644
--- a/client/src/app/shared/shared-main/account/actor.model.ts
+++ b/client/src/app/shared/shared-main/account/actor.model.ts
@@ -47,11 +47,11 @@ export abstract class Actor implements ActorServer {
     return host.trim() === thisHost
   }
 
-  protected constructor (hash: ActorServer) {
+  protected constructor (hash: Partial<ActorServer>) {
     this.id = hash.id
-    this.url = hash.url
-    this.name = hash.name
-    this.host = hash.host
+    this.url = hash.url ?? ''
+    this.name = hash.name ?? ''
+    this.host = hash.host ?? ''
     this.followingCount = hash.followingCount
     this.followersCount = hash.followersCount
 
diff --git a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
index d8be42eef..1ba3fcc0e 100644
--- a/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
+++ b/client/src/app/shared/shared-main/video-channel/video-channel.model.ts
@@ -44,7 +44,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     return `${window.location.origin}/client/assets/images/default-avatar-videochannel.png`
   }
 
-  constructor (hash: ServerVideoChannel) {
+  constructor (hash: Partial<ServerVideoChannel>) {
     super(hash)
 
     this.displayName = hash.displayName
@@ -93,7 +93,7 @@ export class VideoChannel extends Actor implements ServerVideoChannel {
     this.updateBanner(null)
   }
 
-  private updateComputedAttributes () {
+  updateComputedAttributes () {
     this.avatarUrl = VideoChannel.GET_ACTOR_AVATAR_URL(this)
     this.bannerUrl = VideoChannel.GET_ACTOR_BANNER_URL(this)
   }