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

   1 import { Component, ElementRef, EventEmitter, Input, OnInit, 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 import { ServerConfig } from '@shared/models'
   7
   8 @Component({
   9   selector: 'my-actor-avatar-info',
  10   templateUrl: './actor-avatar-info.component.html',
  11   styleUrls: [ './actor-avatar-info.component.scss' ]
  12 })
  13 export class ActorAvatarInfoComponent implements OnInit {
  14   @ViewChild('avatarfileInput', { static: false }) avatarfileInput: ElementRef<HTMLInputElement>
  15
  16   @Input() actor: VideoChannel | Account
  17
  18   @Output() avatarChange = new EventEmitter<FormData>()
  19
  20   private serverConfig: ServerConfig
  21
  22   constructor (
  23     private serverService: ServerService,
  24     private notifier: Notifier
  25   ) {}
  26
  27   ngOnInit (): void {
  28     this.serverConfig = this.serverService.getTmpConfig()
  29     this.serverService.getConfig()
  30         .subscribe(config => this.serverConfig = config)
  31   }
  32
  33   onAvatarChange () {
  34     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
  35     if (avatarfile.size > this.maxAvatarSize) {
  36       this.notifier.error('Error', 'This image is too large.')
  37       return
  38     }
  39
  40     const formData = new FormData()
  41     formData.append('avatarfile', avatarfile)
  42
  43     this.avatarChange.emit(formData)
  44   }
  45
  46   get maxAvatarSize () {
  47     return this.serverConfig.avatar.file.size.max
  48   }
  49
  50   get avatarExtensions () {
  51     return this.serverConfig.avatar.file.extensions.join(',')
  52   }
  53 }