1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
3 import { Notifier, ServerService } from '@app/core'
4 import { VideoChannel } from '@app/shared/shared-main'
5 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
6 import { getBytes } from '@root-helpers/bytes'
9 selector: 'my-actor-banner-edit',
10 templateUrl: './actor-banner-edit.component.html',
12 './actor-image-edit.scss',
13 './actor-banner-edit.component.scss'
16 export class ActorBannerEditComponent implements OnInit {
17 @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
18 @ViewChild('bannerPopover') bannerPopover: NgbPopover
20 @Input() actor: VideoChannel
21 @Input() previewImage = false
23 @Output() bannerChange = new EventEmitter<FormData>()
24 @Output() bannerDelete = new EventEmitter<void>()
30 preview: SafeResourceUrl
33 private sanitizer: DomSanitizer,
34 private serverService: ServerService,
35 private notifier: Notifier
39 const config = this.serverService.getHTMLConfig()
40 this.maxBannerSize = config.banner.file.size.max
41 this.bannerExtensions = config.banner.file.extensions.join(', ')
43 // tslint:disable:max-line-length
44 this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
48 onBannerChange (input: HTMLInputElement) {
49 this.bannerfileInput = new ElementRef(input)
51 const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
52 if (bannerfile.size > this.maxBannerSize) {
53 this.notifier.error('Error', $localize`This image is too large.`)
57 const formData = new FormData()
58 formData.append('bannerfile', bannerfile)
59 this.bannerPopover?.close()
60 this.bannerChange.emit(formData)
62 if (this.previewImage) {
63 this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
68 this.preview = undefined
69 this.bannerDelete.emit()
73 return !!this.preview || !!this.actor.bannerUrl