diff options
Diffstat (limited to 'client/src/app/+my-account/shared')
-rw-r--r-- | client/src/app/+my-account/shared/actor-avatar-info.component.html | 2 | ||||
-rw-r--r-- | client/src/app/+my-account/shared/actor-avatar-info.component.ts | 17 |
2 files changed, 16 insertions, 3 deletions
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.html b/client/src/app/+my-account/shared/actor-avatar-info.component.html index a5a435726..2050950be 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.html +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.html | |||
@@ -3,7 +3,7 @@ | |||
3 | <img [src]="actor.avatarUrl" alt="Avatar" /> | 3 | <img [src]="actor.avatarUrl" alt="Avatar" /> |
4 | 4 | ||
5 | <div class="actor-img-edit-container"> | 5 | <div class="actor-img-edit-container"> |
6 | <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', max size: 100KB)'" placement="right" container="body"> | 6 | <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body"> |
7 | <my-global-icon iconName="edit"></my-global-icon> | 7 | <my-global-icon iconName="edit"></my-global-icon> |
8 | <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> | 8 | <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/> |
9 | </div> | 9 | </div> |
diff --git a/client/src/app/+my-account/shared/actor-avatar-info.component.ts b/client/src/app/+my-account/shared/actor-avatar-info.component.ts index eb198587d..8e4a7a602 100644 --- a/client/src/app/+my-account/shared/actor-avatar-info.component.ts +++ b/client/src/app/+my-account/shared/actor-avatar-info.component.ts | |||
@@ -4,6 +4,8 @@ import { VideoChannel } from '@app/shared/video-channel/video-channel.model' | |||
4 | import { Account } from '@app/shared/account/account.model' | 4 | import { Account } from '@app/shared/account/account.model' |
5 | import { Notifier } from '@app/core' | 5 | import { Notifier } from '@app/core' |
6 | import { ServerConfig } from '@shared/models' | 6 | import { ServerConfig } from '@shared/models' |
7 | import { BytesPipe } from 'ngx-pipes' | ||
8 | import { I18n } from '@ngx-translate/i18n-polyfill' | ||
7 | 9 | ||
8 | @Component({ | 10 | @Component({ |
9 | selector: 'my-actor-avatar-info', | 11 | selector: 'my-actor-avatar-info', |
@@ -17,12 +19,19 @@ export class ActorAvatarInfoComponent implements OnInit { | |||
17 | 19 | ||
18 | @Output() avatarChange = new EventEmitter<FormData>() | 20 | @Output() avatarChange = new EventEmitter<FormData>() |
19 | 21 | ||
22 | maxSizeText: string | ||
23 | |||
20 | private serverConfig: ServerConfig | 24 | private serverConfig: ServerConfig |
25 | private bytesPipe: BytesPipe | ||
21 | 26 | ||
22 | constructor ( | 27 | constructor ( |
23 | private serverService: ServerService, | 28 | private serverService: ServerService, |
24 | private notifier: Notifier | 29 | private notifier: Notifier, |
25 | ) {} | 30 | private i18n: I18n |
31 | ) { | ||
32 | this.bytesPipe = new BytesPipe() | ||
33 | this.maxSizeText = this.i18n('max size') | ||
34 | } | ||
26 | 35 | ||
27 | ngOnInit (): void { | 36 | ngOnInit (): void { |
28 | this.serverConfig = this.serverService.getTmpConfig() | 37 | this.serverConfig = this.serverService.getTmpConfig() |
@@ -47,6 +56,10 @@ export class ActorAvatarInfoComponent implements OnInit { | |||
47 | return this.serverConfig.avatar.file.size.max | 56 | return this.serverConfig.avatar.file.size.max |
48 | } | 57 | } |
49 | 58 | ||
59 | get maxAvatarSizeInBytes () { | ||
60 | return this.bytesPipe.transform(this.maxAvatarSize) | ||
61 | } | ||
62 | |||
50 | get avatarExtensions () { | 63 | get avatarExtensions () { |
51 | return this.serverConfig.avatar.file.extensions.join(', ') | 64 | return this.serverConfig.avatar.file.extensions.join(', ') |
52 | } | 65 | } |