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 { Notifier, ServerService } from '@app/core'
   3 import { Account, VideoChannel } from '@app/shared/shared-main'
   4 import { getBytes } from '@root-helpers/bytes'
   5 import { imageToDataURL } from '@root-helpers/images'
   6
   7 @Component({
   8   selector: 'my-actor-avatar-edit',
   9   templateUrl: './actor-avatar-edit.component.html',
  10   styleUrls: [
  11     './actor-image-edit.scss',
  12     './actor-avatar-edit.component.scss'
  13   ]
  14 })
  15 export class ActorAvatarEditComponent implements OnInit {
  16   @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  17
  18   @Input() actor: VideoChannel | Account
  19   @Input() editable = true
  20   @Input() displaySubscribers = true
  21   @Input() displayUsername = true
  22   @Input() previewImage = false
  23
  24   @Output() avatarChange = new EventEmitter<FormData>()
  25   @Output() avatarDelete = new EventEmitter<void>()
  26
  27   avatarFormat = ''
  28   maxAvatarSize = 0
  29   avatarExtensions = ''
  30
  31   preview: string
  32
  33   constructor (
  34     private serverService: ServerService,
  35     private notifier: Notifier
  36   ) { }
  37
  38   ngOnInit (): void {
  39     const config = this.serverService.getHTMLConfig()
  40
  41     this.maxAvatarSize = config.avatar.file.size.max
  42     this.avatarExtensions = config.avatar.file.extensions.join(', ')
  43
  44     this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
  45                         `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
  46   }
  47
  48   onAvatarChange (input: HTMLInputElement) {
  49     this.avatarfileInput = new ElementRef(input)
  50
  51     const avatarfile = this.avatarfileInput.nativeElement.files[0]
  52     if (avatarfile.size > this.maxAvatarSize) {
  53       this.notifier.error('Error', $localize`This image is too large.`)
  54       return
  55     }
  56
  57     const formData = new FormData()
  58     formData.append('avatarfile', avatarfile)
  59     this.avatarChange.emit(formData)
  60
  61     if (this.previewImage) {
  62       imageToDataURL(avatarfile).then(result => this.preview = result)
  63     }
  64   }
  65
  66   deleteAvatar () {
  67     this.preview = undefined
  68     this.avatarDelete.emit()
  69   }
  70
  71   hasAvatar () {
  72     return !!this.preview || this.actor.avatars.length !== 0
  73   }
  74
  75   getActorType () {
  76     if ((this.actor as VideoChannel).ownerAccount) return 'channel'
  77
  78     return 'account'
  79   }
  80 }