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

   1 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
   2 import { Notifier, ServerService } from '@app/core'
   3 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
   4 import { getBytes } from '@root-helpers/bytes'
   5 import { Account } from '../account/account.model'
   6 import { VideoChannel } from '../video-channel/video-channel.model'
   7 import { Actor } from './actor.model'
   8
   9 @Component({
  10   selector: 'my-actor-avatar-info',
  11   templateUrl: './actor-avatar-info.component.html',
  12   styleUrls: [ './actor-avatar-info.component.scss' ]
  13 })
  14 export class ActorAvatarInfoComponent implements OnInit, OnChanges {
  15   @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  16   @ViewChild('avatarPopover') avatarPopover: NgbPopover
  17
  18   @Input() actor: VideoChannel | Account
  19
  20   @Output() avatarChange = new EventEmitter<FormData>()
  21   @Output() avatarDelete = new EventEmitter<void>()
  22
  23   avatarFormat = ''
  24   maxAvatarSize = 0
  25   avatarExtensions = ''
  26
  27   private avatarUrl: string
  28
  29   constructor (
  30     private serverService: ServerService,
  31     private notifier: Notifier
  32   ) { }
  33
  34   ngOnInit (): void {
  35     this.serverService.getConfig()
  36         .subscribe(config => {
  37           this.maxAvatarSize = config.avatar.file.size.max
  38           this.avatarExtensions = config.avatar.file.extensions.join(', ')
  39
  40           this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
  41                               `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
  42         })
  43   }
  44
  45   ngOnChanges (changes: SimpleChanges) {
  46     if (changes['actor']) {
  47       this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor)
  48     }
  49   }
  50
  51   onAvatarChange (input: HTMLInputElement) {
  52     this.avatarfileInput = new ElementRef(input)
  53
  54     const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ]
  55     if (avatarfile.size > this.maxAvatarSize) {
  56       this.notifier.error('Error', $localize`This image is too large.`)
  57       return
  58     }
  59
  60     const formData = new FormData()
  61     formData.append('avatarfile', avatarfile)
  62     this.avatarPopover?.close()
  63     this.avatarChange.emit(formData)
  64   }
  65
  66   deleteAvatar () {
  67     this.avatarDelete.emit()
  68   }
  69
  70   hasAvatar () {
  71     return !!this.avatarUrl
  72   }
  73
  74   isChannel () {
  75     return !!(this.actor as VideoChannel).ownerAccount
  76   }
  77 }