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

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