client/src/app/shared/shared-actor-image-edit/actor-banner-edit.component.ts

   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'
   8
   9 @Component({
  10   selector: 'my-actor-banner-edit',
  11   templateUrl: './actor-banner-edit.component.html',
  12   styleUrls: [
  13     './actor-image-edit.scss',
  14     './actor-banner-edit.component.scss'
  15   ]
  16 })
  17 export class ActorBannerEditComponent implements OnInit {
  18   @ViewChild('bannerfileInput') bannerfileInput: ElementRef<HTMLInputElement>
  19   @ViewChild('bannerPopover') bannerPopover: NgbPopover
  20
  21   @Input() actor: VideoChannel
  22   @Input() previewImage = false
  23
  24   @Output() bannerChange = new EventEmitter<FormData>()
  25   @Output() bannerDelete = new EventEmitter<void>()
  26
  27   bannerFormat = ''
  28   maxBannerSize = 0
  29   bannerExtensions = ''
  30
  31   preview: SafeResourceUrl
  32
  33   constructor (
  34     private serverService: ServerService,
  35     private notifier: Notifier
  36   ) { }
  37
  38   ngOnInit (): void {
  39     const config = this.serverService.getHTMLConfig()
  40     this.maxBannerSize = config.banner.file.size.max
  41     this.bannerExtensions = config.banner.file.extensions.join(', ')
  42
  43     /* eslint-disable max-len */
  44     this.bannerFormat = $localize`ratio 6/1, recommended size: 1920x317, max size: ${getBytes(this.maxBannerSize)}, extensions: ${this.bannerExtensions}`
  45   }
  46
  47   onBannerChange (input: HTMLInputElement) {
  48     this.bannerfileInput = new ElementRef(input)
  49
  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.`)
  53       return
  54     }
  55
  56     const formData = new FormData()
  57     formData.append('bannerfile', bannerfile)
  58     this.bannerPopover?.close()
  59     this.bannerChange.emit(formData)
  60
  61     if (this.previewImage) {
  62       imageToDataURL(bannerfile).then(result => this.preview = result)
  63     }
  64   }
  65
  66   deleteBanner () {
  67     this.preview = undefined
  68     this.bannerDelete.emit()
  69   }
  70
  71   hasBanner () {
  72     return !!this.preview || !!this.actor.bannerUrl
  73   }
  74 }