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 { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
   3 import { Notifier, ServerService } from '@app/core'
   4 import { Account, VideoChannel } from '@app/shared/shared-main'
   5 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
   6 import { getBytes } from '@root-helpers/bytes'
   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: SafeResourceUrl
  34
  35   constructor (
  36     private sanitizer: DomSanitizer,
  37     private serverService: ServerService,
  38     private notifier: Notifier
  39   ) { }
  40
  41   ngOnInit (): void {
  42     const config = this.serverService.getHTMLConfig()
  43
  44     this.maxAvatarSize = config.avatar.file.size.max
  45     this.avatarExtensions = config.avatar.file.extensions.join(', ')
  46
  47     this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
  48                         `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
  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     if (this.previewImage) {
  66       this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
  67     }
  68   }
  69
  70   deleteAvatar () {
  71     this.preview = undefined
  72     this.avatarDelete.emit()
  73   }
  74
  75   hasAvatar () {
  76     return !!this.preview || !!this.actor.avatar
  77   }
  78
  79   isChannel () {
  80     return !!(this.actor as VideoChannel).ownerAccount
  81   }
  82
  83   getChannel (): VideoChannel {
  84     if (this.isChannel()) return this.actor as VideoChannel
  85
  86     return undefined
  87   }
  88
  89   getAccount (): Account {
  90     if (this.isChannel()) return undefined
  91
  92     return this.actor as Account
  93   }
  94 }