client/src/app/+my-account/shared/actor-avatar-info.component.ts

   1 import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core'
   2 import { ServerService } from '../../core/server'
   3 import { VideoChannel } from '@app/shared/video-channel/video-channel.model'
   4 import { Account } from '@app/shared/account/account.model'
   5 import { Notifier } from '@app/core'
   6
   7 @Component({
   8   selector: 'my-actor-avatar-info',
   9   templateUrl: './actor-avatar-info.component.html',
  10   styleUrls: [ './actor-avatar-info.component.scss' ]
  11 })
  12 export class ActorAvatarInfoComponent {
  13   @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>
  14
  15   @Input() actor: VideoChannel | Account
  16
  17   @Output() avatarChange = new EventEmitter<FormData>()
  18
  19   constructor (
  20     private serverService: ServerService,
  21     private notifier: Notifier
  22   ) {}
  23
  24   onAvatarChange () {
  25     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
  26     if (avatarfile.size > this.maxAvatarSize) {
  27       this.notifier.error('Error', 'This image is too large.')
  28       return
  29     }
  30
  31     const formData = new FormData()
  32     formData.append('avatarfile', avatarfile)
  33
  34     this.avatarChange.emit(formData)
  35   }
  36
  37   get maxAvatarSize () {
  38     return this.serverService.getConfig().avatar.file.size.max
  39   }
  40
  41   get avatarExtensions () {
  42     return this.serverService.getConfig().avatar.file.extensions.join(',')
  43   }
  44 }