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