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