Set channel banner/avatar in creation form

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-actor-image / actor-banner-edit.component.ts

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 b92ecef4b57787c8027abf1262575af41c1e645f..8c12d3c4cd9ecd23d8c204a51e3285ec579a543f 100644 (file)
--- 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
   ) { }
@@ -36,7 +41,8 @@ export class ActorBannerEditComponent implements OnInit {
           this.maxBannerSize = config.banner.file.size.max
           this.bannerExtensions = config.banner.file.extensions.join(', ')
 
-          this.bannerFormat = $localize`maxsize: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
+          // tslint:disable:max-line-length
+          this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
         })
   }
 
@@ -53,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
   }
 }