aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2021-01-13 10:52:17 +0100
committerChocobozzz <me@florianbigard.com>2021-01-13 10:52:17 +0100
commit0e4ca570fa33105456f0e4650342374c1658d5f4 (patch)
treefd454210839d07534dc70c30e7b254b2e587902d /client/src
parentd95bc7029012c9f28144fd58948962c49910a1ae (diff)
downloadPeerTube-0e4ca570fa33105456f0e4650342374c1658d5f4.tar.gz
PeerTube-0e4ca570fa33105456f0e4650342374c1658d5f4.tar.zst
PeerTube-0e4ca570fa33105456f0e4650342374c1658d5f4.zip
Avatar info component optimizations
Diffstat (limited to 'client/src')
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.html6
-rw-r--r--client/src/app/shared/shared-main/account/actor-avatar-info.component.ts37
2 files changed, 17 insertions, 26 deletions
diff --git a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
index a34d27b26..30584fd00 100644
--- a/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
+++ b/client/src/app/shared/shared-main/account/actor-avatar-info.component.html
@@ -5,13 +5,13 @@
5 5
6 <div class="actor-img-edit-container"> 6 <div class="actor-img-edit-container">
7 7
8 <div *ngIf="!hasAvatar" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body"> 8 <div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
9 <my-global-icon iconName="upload"></my-global-icon> 9 <my-global-icon iconName="upload"></my-global-icon>
10 <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label> 10 <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
11 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/> 11 <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
12 </div> 12 </div>
13 13
14 <div *ngIf="hasAvatar" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right"> 14 <div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
15 <my-global-icon iconName="edit"></my-global-icon> 15 <my-global-icon iconName="edit"></my-global-icon>
16 <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label> 16 <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
17 </div> 17 </div>
@@ -40,4 +40,4 @@
40 <my-global-icon iconName="delete"></my-global-icon> 40 <my-global-icon iconName="delete"></my-global-icon>
41 <span i18n>Remove avatar</span> 41 <span i18n>Remove avatar</span>
42 </div> 42 </div>
43</ng-template> \ No newline at end of file 43</ng-template>
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 451bbbba3..b459c591f 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,10 +1,9 @@
1import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core' 1import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
2import { Notifier, ServerService } from '@app/core' 2import { Notifier, ServerService } from '@app/core'
3import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
3import { getBytes } from '@root-helpers/bytes' 4import { getBytes } from '@root-helpers/bytes'
4import { ServerConfig } from '@shared/models'
5import { VideoChannel } from '../video-channel/video-channel.model'
6import { Account } from '../account/account.model' 5import { Account } from '../account/account.model'
7import { NgbPopover } from '@ng-bootstrap/ng-bootstrap' 6import { VideoChannel } from '../video-channel/video-channel.model'
8import { Actor } from './actor.model' 7import { Actor } from './actor.model'
9 8
10@Component({ 9@Component({
@@ -21,8 +20,11 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
21 @Output() avatarChange = new EventEmitter<FormData>() 20 @Output() avatarChange = new EventEmitter<FormData>()
22 @Output() avatarDelete = new EventEmitter<void>() 21 @Output() avatarDelete = new EventEmitter<void>()
23 22
23 avatarFormat = ''
24 maxAvatarSize = 0
25 avatarExtensions = ''
26
24 private avatarUrl: string 27 private avatarUrl: string
25 private serverConfig: ServerConfig
26 28
27 constructor ( 29 constructor (
28 private serverService: ServerService, 30 private serverService: ServerService,
@@ -30,9 +32,14 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
30 ) { } 32 ) { }
31 33
32 ngOnInit (): void { 34 ngOnInit (): void {
33 this.serverConfig = this.serverService.getTmpConfig()
34 this.serverService.getConfig() 35 this.serverService.getConfig()
35 .subscribe(config => this.serverConfig = config) 36 .subscribe(config => {
37 this.maxAvatarSize = config.avatar.file.size.max
38 this.avatarExtensions = config.avatar.file.extensions.join(', ')
39
40 this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
41 `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
42 })
36 } 43 }
37 44
38 ngOnChanges (changes: SimpleChanges) { 45 ngOnChanges (changes: SimpleChanges) {
@@ -60,23 +67,7 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
60 this.avatarDelete.emit() 67 this.avatarDelete.emit()
61 } 68 }
62 69
63 get maxAvatarSize () { 70 hasAvatar () {
64 return this.serverConfig.avatar.file.size.max
65 }
66
67 get maxAvatarSizeInBytes () {
68 return getBytes(this.maxAvatarSize)
69 }
70
71 get avatarExtensions () {
72 return this.serverConfig.avatar.file.extensions.join(', ')
73 }
74
75 get avatarFormat () {
76 return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
77 }
78
79 get hasAvatar () {
80 return !!this.avatarUrl 71 return !!this.avatarUrl
81 } 72 }
82} 73}