client/src/app/shared/shared-actor-image-edit/actor-avatar-edit.component.ts

   1 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
   2 import { Notifier, ServerService } from '@app/core'
   3 import { Account, VideoChannel } from '@app/shared/shared-main'
   4 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
   5 import { getBytes } from '@root-helpers/bytes'
   6 import { imageToDataURL } from '@root-helpers/images'
   7
   8 @Component({
   9   selector: 'my-actor-avatar-edit',
  10   templateUrl: './actor-avatar-edit.component.html',
  11   styleUrls: [
  12     './actor-image-edit.scss',
  13     './actor-avatar-edit.component.scss'
  14   ]
  15 })
  16 export class ActorAvatarEditComponent implements OnInit {
  17   @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
  18   @ViewChild('avatarPopover') avatarPopover: NgbPopover
  19
  20   @Input() actor: VideoChannel | Account
  21   @Input() editable = true
  22   @Input() displaySubscribers = true
  23   @Input() displayUsername = true
  24   @Input() previewImage = false
  25
  26   @Output() avatarChange = new EventEmitter<FormData>()
  27   @Output() avatarDelete = new EventEmitter<void>()
  28
  29   avatarFormat = ''
  30   maxAvatarSize = 0
  31   avatarExtensions = ''
  32
  33   preview: string
  34
  35   constructor (
  36     private serverService: ServerService,
  37     private notifier: Notifier
  38   ) { }
  39
  40   ngOnInit (): void {
  41     const config = this.serverService.getHTMLConfig()
  42
  43     this.maxAvatarSize = config.avatar.file.size.max
  44     this.avatarExtensions = config.avatar.file.extensions.join(', ')
  45
  46     this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
  47                         `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
  48   }
  49
  50   onAvatarChange (input: HTMLInputElement) {
  51     this.avatarfileInput = new ElementRef(input)
  52
  53     const avatarfile = this.avatarfileInput.nativeElement.files[0]
  54     if (avatarfile.size > this.maxAvatarSize) {
  55       this.notifier.error('Error', $localize`This image is too large.`)
  56       return
  57     }
  58
  59     const formData = new FormData()
  60     formData.append('avatarfile', avatarfile)
  61     this.avatarPopover?.close()
  62     this.avatarChange.emit(formData)
  63
  64     if (this.previewImage) {
  65       imageToDataURL(avatarfile).then(result => this.preview = result)
  66     }
  67   }
  68
  69   deleteAvatar () {
  70     this.preview = undefined
  71     this.avatarDelete.emit()
  72   }
  73
  74   hasAvatar () {
  75     return !!this.preview || this.actor.avatars.length !== 0
  76   }
  77
  78   isChannel () {
  79     return !!(this.actor as VideoChannel).ownerAccount
  80   }
  81
  82   getChannel (): VideoChannel {
  83     if (this.isChannel()) return this.actor as VideoChannel
  84
  85     return undefined
  86   }
  87
  88   getAccount (): Account {
  89     if (this.isChannel()) return undefined
  90
  91     return this.actor as Account
  92   }
  93 }