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 { getBytes } from '@root-helpers/bytes'
5 import { imageToDataURL } from '@root-helpers/images'
8 selector: 'my-actor-avatar-edit',
9 templateUrl: './actor-avatar-edit.component.html',
11 './actor-image-edit.scss',
12 './actor-avatar-edit.component.scss'
15 export class ActorAvatarEditComponent implements OnInit {
16 @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement>
18 @Input() actor: VideoChannel | Account
19 @Input() editable = true
20 @Input() displaySubscribers = true
21 @Input() displayUsername = true
22 @Input() previewImage = false
24 @Output() avatarChange = new EventEmitter<FormData>()
25 @Output() avatarDelete = new EventEmitter<void>()
34 private serverService: ServerService,
35 private notifier: Notifier
39 const config = this.serverService.getHTMLConfig()
41 this.maxAvatarSize = config.avatar.file.size.max
42 this.avatarExtensions = config.avatar.file.extensions.join(', ')
44 this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
45 `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
48 onAvatarChange (input: HTMLInputElement) {
49 this.avatarfileInput = new ElementRef(input)
51 const avatarfile = this.avatarfileInput.nativeElement.files[0]
52 if (avatarfile.size > this.maxAvatarSize) {
53 this.notifier.error('Error', $localize`This image is too large.`)
57 const formData = new FormData()
58 formData.append('avatarfile', avatarfile)
59 this.avatarChange.emit(formData)
61 if (this.previewImage) {
62 imageToDataURL(avatarfile).then(result => this.preview = result)
67 this.preview = undefined
68 this.avatarDelete.emit()
72 return !!this.preview || this.actor.avatars.length !== 0
76 if ((this.actor as VideoChannel).ownerAccount) return 'channel'