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'
9 selector: 'my-actor-avatar-edit',
10 templateUrl: './actor-avatar-edit.component.html',
12 './actor-image-edit.scss',
13 './actor-avatar-edit.component.scss'
16 export class ActorAvatarEditComponent implements OnInit {
17 @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
18 @ViewChild('avatarPopover') avatarPopover: NgbPopover
20 @Input() actor: VideoChannel | Account
21 @Input() editable = true
22 @Input() displaySubscribers = true
23 @Input() displayUsername = true
24 @Input() previewImage = false
26 @Output() avatarChange = new EventEmitter<FormData>()
27 @Output() avatarDelete = new EventEmitter<void>()
33 preview: SafeResourceUrl
36 private sanitizer: DomSanitizer,
37 private serverService: ServerService,
38 private notifier: Notifier
42 const config = this.serverService.getHTMLConfig()
44 this.maxAvatarSize = config.avatar.file.size.max
45 this.avatarExtensions = config.avatar.file.extensions.join(', ')
47 this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
48 `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
51 onAvatarChange (input: HTMLInputElement) {
52 this.avatarfileInput = new ElementRef(input)
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.`)
60 const formData = new FormData()
61 formData.append('avatarfile', avatarfile)
62 this.avatarPopover?.close()
63 this.avatarChange.emit(formData)
65 if (this.previewImage) {
66 this.preview = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(avatarfile))
71 this.preview = undefined
72 this.avatarDelete.emit()
76 return !!this.preview || !!this.actor.avatar
80 return !!(this.actor as VideoChannel).ownerAccount
83 getChannel (): VideoChannel {
84 if (this.isChannel()) return this.actor as VideoChannel
89 getAccount (): Account {
90 if (this.isChannel()) return undefined
92 return this.actor as Account