1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
2 import { 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'
7 import { imageToDataURL } from '@root-helpers/images'
10 selector: 'my-actor-banner-edit',
11 templateUrl: './actor-banner-edit.component.html',
13 './actor-image-edit.scss',
14 './actor-banner-edit.component.scss'
17 export class ActorBannerEditComponent implements OnInit {
18 @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
19 @ViewChild('bannerPopover') bannerPopover: NgbPopover
21 @Input() actor: VideoChannel
22 @Input() previewImage = false
24 @Output() bannerChange = new EventEmitter<FormData>()
25 @Output() bannerDelete = new EventEmitter<void>()
31 preview: SafeResourceUrl
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 /* eslint-disable max-len */
44 this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
47 onBannerChange (input: HTMLInputElement) {
48 this.bannerfileInput = new ElementRef(input)
50 const bannerfile = this.bannerfileInput.nativeElement.files[0]
51 if (bannerfile.size > this.maxBannerSize) {
52 this.notifier.error('Error', $localize`This image is too large.`)
56 const formData = new FormData()
57 formData.append('bannerfile', bannerfile)
58 this.bannerPopover?.close()
59 this.bannerChange.emit(formData)
61 if (this.previewImage) {
62 imageToDataURL(bannerfile).then(result => this.preview = result)
67 this.preview = undefined
68 this.bannerDelete.emit()
72 return !!this.preview || !!this.actor.bannerUrl