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

   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 { Account, 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-avatar-edit',
  10   templateUrl: './actor-avatar-edit.component.html',
  11   styleUrls: [
  12     './actor-image-edit.scss',
  13     './actor-avatar-edit.component.scss'
  14   ]
  15 })
  16 export class ActorAvatarEditComponent implements OnInit {
  17   @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  18   @ViewChild('avatarPopover') avatarPopover: NgbPopover
  19
  20   @Input() actor: VideoChannel | Account
  21   @Input() editable = true
  22   @Input() displaySubscribers = true
  23   @Input() displayUsername = true
  24   @Input() previewImage = false
  25
  26   @Output() avatarChange = new EventEmitter<FormData>()
  27   @Output() avatarDelete = new EventEmitter<void>()
  28
  29   avatarFormat = ''
  30   maxAvatarSize = 0
  31   avatarExtensions = ''
  32
  33   preview: SafeResourceUrl
  34
  35   constructor (
  36     private sanitizer: DomSanitizer,
  37     private serverService: ServerService,
  38     private notifier: Notifier
  39   ) { }
  40
  41   ngOnInit (): void {
  42     this.serverService.getConfig()
  43         .subscribe(config => {
  44           this.maxAvatarSize = config.avatar.file.size.max
  45           this.avatarExtensions = config.avatar.file.extensions.join(', ')
  46
  47           this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
  48                               `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
  49         })
  50   }
  51
  52   onAvatarChange (input: HTMLInputElement) {
  53     this.avatarfileInput = new ElementRef(input)
  54
  55     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
  56     if (avatarfile.size > this.maxAvatarSize) {
  57       this.notifier.error('Error', $localize`This image is too large.`)
  58       return
  59     }
  60
  61     const formData = new FormData()
  62     formData.append('avatarfile', avatarfile)
  63     this.avatarPopover?.close()
  64     this.avatarChange.emit(formData)
  65
  66     if (this.previewImage) {
  67       this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
  68     }
  69   }
  70
  71   deleteAvatar () {
  72     this.preview = undefined
  73     this.avatarDelete.emit()
  74   }
  75
  76   hasAvatar () {
  77     return !!this.preview || !!this.actor.avatar
  78   }
  79
  80   isChannel () {
  81     return !!(this.actor as VideoChannel).ownerAccount
  82   }
  83 }