diff options
author | Rigel Kent <sendmemail@rigelk.eu> | 2021-01-13 09:12:55 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-01-13 09:12:55 +0100 |
commit | 1ea7da819e5bfae7b443ed722c18c4165d101439 (patch) | |
tree | 17cea3786dfb3a59a2ad5559de9ebf106a0440a2 /client/src/app/shared/shared-main/account/actor-avatar-info.component.ts | |
parent | 75dd1b641f987e1e09dbaa3329e08c6e98a858f3 (diff) | |
download | PeerTube-1ea7da819e5bfae7b443ed722c18c4165d101439.tar.gz PeerTube-1ea7da819e5bfae7b443ed722c18c4165d101439.tar.zst PeerTube-1ea7da819e5bfae7b443ed722c18c4165d101439.zip |
add ability to remove one's avatar for account and channels (#3467)
* add ability to remove one's avatar for account and channels
* add ability to remove one's avatar for account and channels
* only display avatar edition options after input change
Diffstat (limited to 'client/src/app/shared/shared-main/account/actor-avatar-info.component.ts')
-rw-r--r-- | client/src/app/shared/shared-main/account/actor-avatar-info.component.ts | 31 |
1 files changed, 26 insertions, 5 deletions
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts index de78a390e..451bbbba3 100644 --- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts +++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.ts | |||
@@ -1,22 +1,27 @@ | |||
1 | import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | 1 | import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' |
2 | import { Notifier, ServerService } from '@app/core' | 2 | import { Notifier, ServerService } from '@app/core' |
3 | import { getBytes } from '@root-helpers/bytes' | 3 | import { getBytes } from '@root-helpers/bytes' |
4 | import { ServerConfig } from '@shared/models' | 4 | import { ServerConfig } from '@shared/models' |
5 | import { VideoChannel } from '../video-channel/video-channel.model' | 5 | import { VideoChannel } from '../video-channel/video-channel.model' |
6 | import { Account } from '../account/account.model' | 6 | import { Account } from '../account/account.model' |
7 | import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' | ||
8 | import { Actor } from './actor.model' | ||
7 | 9 | ||
8 | @Component({ | 10 | @Component({ |
9 | selector: 'my-actor-avatar-info', | 11 | selector: 'my-actor-avatar-info', |
10 | templateUrl: './actor-avatar-info.component.html', | 12 | templateUrl: './actor-avatar-info.component.html', |
11 | styleUrls: [ './actor-avatar-info.component.scss' ] | 13 | styleUrls: [ './actor-avatar-info.component.scss' ] |
12 | }) | 14 | }) |
13 | export class ActorAvatarInfoComponent implements OnInit { | 15 | export class ActorAvatarInfoComponent implements OnInit, OnChanges { |
14 | @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement> | 16 | @ViewChild('avatarfileInput') avatarfileInput: ElementRef<HTMLInputElement> |
17 | @ViewChild('avatarPopover') avatarPopover: NgbPopover | ||
15 | 18 | ||
16 | @Input() actor: VideoChannel | Account | 19 | @Input() actor: VideoChannel | Account |
17 | 20 | ||
18 | @Output() avatarChange = new EventEmitter<FormData>() | 21 | @Output() avatarChange = new EventEmitter<FormData>() |
22 | @Output() avatarDelete = new EventEmitter<void>() | ||
19 | 23 | ||
24 | private avatarUrl: string | ||
20 | private serverConfig: ServerConfig | 25 | private serverConfig: ServerConfig |
21 | 26 | ||
22 | constructor ( | 27 | constructor ( |
@@ -30,19 +35,31 @@ export class ActorAvatarInfoComponent implements OnInit { | |||
30 | .subscribe(config => this.serverConfig = config) | 35 | .subscribe(config => this.serverConfig = config) |
31 | } | 36 | } |
32 | 37 | ||
33 | onAvatarChange () { | 38 | ngOnChanges (changes: SimpleChanges) { |
39 | if (changes['actor']) { | ||
40 | this.avatarUrl = Actor.GET_ACTOR_AVATAR_URL(this.actor) | ||
41 | } | ||
42 | } | ||
43 | |||
44 | onAvatarChange (input: HTMLInputElement) { | ||
45 | this.avatarfileInput = new ElementRef(input) | ||
46 | |||
34 | const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] | 47 | const avatarfile = this.avatarfileInput.nativeElement.files[ 0 ] |
35 | if (avatarfile.size > this.maxAvatarSize) { | 48 | if (avatarfile.size > this.maxAvatarSize) { |
36 | this.notifier.error('Error', 'This image is too large.') | 49 | this.notifier.error('Error', $localize`This image is too large.`) |
37 | return | 50 | return |
38 | } | 51 | } |
39 | 52 | ||
40 | const formData = new FormData() | 53 | const formData = new FormData() |
41 | formData.append('avatarfile', avatarfile) | 54 | formData.append('avatarfile', avatarfile) |
42 | 55 | this.avatarPopover?.close() | |
43 | this.avatarChange.emit(formData) | 56 | this.avatarChange.emit(formData) |
44 | } | 57 | } |
45 | 58 | ||
59 | deleteAvatar () { | ||
60 | this.avatarDelete.emit() | ||
61 | } | ||
62 | |||
46 | get maxAvatarSize () { | 63 | get maxAvatarSize () { |
47 | return this.serverConfig.avatar.file.size.max | 64 | return this.serverConfig.avatar.file.size.max |
48 | } | 65 | } |
@@ -58,4 +75,8 @@ export class ActorAvatarInfoComponent implements OnInit { | |||
58 | get avatarFormat () { | 75 | get avatarFormat () { |
59 | return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}` | 76 | return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}` |
60 | } | 77 | } |
78 | |||
79 | get hasAvatar () { | ||
80 | return !!this.avatarUrl | ||
81 | } | ||
61 | } | 82 | } |