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

   1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { Notifier, ServerService } from '@app/core'
   3 import { getBytes } from '@root-helpers/bytes'
   4 import { ServerConfig } from '@shared/models'
   5 import { VideoChannel } from '../video-channel/video-channel.model'
   6 import { Account } from '../account/account.model'
   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') 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 maxAvatarSizeInBytes () {
  51     return getBytes(this.maxAvatarSize)
  52   }
  53
  54   get avatarExtensions () {
  55     return this.serverConfig.avatar.file.extensions.join(', ')
  56   }
  57
  58   get avatarFormat () {
  59     return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
  60   }
  61 }