1 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, 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 this.serverService.getConfig()
40 .subscribe(config => {
41 this.maxBannerSize = config.banner.file.size.max
42 this.bannerExtensions = config.banner.file.extensions.join(', ')
44 // tslint:disable:max-line-length
45 this.bannerFormat = $localize`ratio 6/1, recommended size: 1600x266, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
49 onBannerChange (input: HTMLInputElement) {
50 this.bannerfileInput = new ElementRef(input)
52 const bannerfile = this.bannerfileInput.nativeElement.files[ 0 ]
53 if (bannerfile.size > this.maxBannerSize) {
54 this.notifier.error('Error', $localize`This image is too large.`)
58 const formData = new FormData()
59 formData.append('bannerfile', bannerfile)
60 this.bannerPopover?.close()
61 this.bannerChange.emit(formData)
63 if (this.previewImage) {
64 this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(bannerfile))
69 this.preview = undefined
70 this.bannerDelete.emit()
74 return !!this.preview || !!this.actor.bannerUrl