Avatar info component optimizations

client/src/app/shared/shared-main/account/actor-avatar-info.component.html

@@ -5,13 +5,13 @@
 
       <div class="actor-img-edit-container">
 
-        <div *ngIf="!hasAvatar" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
+        <div *ngIf="!hasAvatar()" class="actor-img-edit-button" [ngbTooltip]="avatarFormat" placement="right" container="body">
           <my-global-icon iconName="upload"></my-global-icon>
           <label class="sr-only" for="avatarfile" i18n>Upload a new avatar</label>
           <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange(avatarfileInput)"/>
         </div>
 
-        <div *ngIf="hasAvatar" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
+        <div *ngIf="hasAvatar()" class="actor-img-edit-button" #avatarPopover="ngbPopover" [ngbPopover]="avatarEditContent" popoverClass="popover-avatar-info" autoClose="outside" placement="right">
           <my-global-icon iconName="edit"></my-global-icon>
           <label class="sr-only" for="avatarMenu" i18n>Change your avatar</label>
         </div>
@@ -40,4 +40,4 @@
     <my-global-icon iconName="delete"></my-global-icon>
     <span i18n>Remove avatar</span>
   </div>
-</ng-template>
+</ng-template>

client/src/app/shared/shared-main/account/actor-avatar-info.component.ts

@@ -1,10 +1,9 @@
 import { Component, ElementRef, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges, ViewChild } from '@angular/core'
 import { Notifier, ServerService } from '@app/core'
-import { getBytes } from '@root-helpers/bytes'
-import { ServerConfig } from '@shared/models'
-import { VideoChannel } from '../video-channel/video-channel.model'
-import { Account } from '../account/account.model'
 import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+import { getBytes } from '@root-helpers/bytes'
+import { Account } from '../account/account.model'
+import { VideoChannel } from '../video-channel/video-channel.model'
 import { Actor } from './actor.model'
 
 @Component({
@@ -21,8 +20,11 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
   @Output() avatarChange = new EventEmitter<FormData>()
   @Output() avatarDelete = new EventEmitter<void>()
 
+  avatarFormat = ''
+  maxAvatarSize = 0
+  avatarExtensions = ''
+
   private avatarUrl: string
-  private serverConfig: ServerConfig
 
   constructor (
     private serverService: ServerService,
@@ -30,9 +32,14 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
   ) { }
 
   ngOnInit (): void {
-    this.serverConfig = this.serverService.getTmpConfig()
     this.serverService.getConfig()
-        .subscribe(config => this.serverConfig = config)
+        .subscribe(config => {
+          this.maxAvatarSize = config.avatar.file.size.max
+          this.avatarExtensions = config.avatar.file.extensions.join(', ')
+
+          this.avatarFormat = `${$localize`max size`}: 192*192px, ` +
+                              `${getBytes(this.maxAvatarSize)} ${$localize`extensions`}: ${this.avatarExtensions}`
+        })
   }
 
   ngOnChanges (changes: SimpleChanges) {
@@ -60,23 +67,7 @@ export class ActorAvatarInfoComponent implements OnInit, OnChanges {
     this.avatarDelete.emit()
   }
 
-  get maxAvatarSize () {
-    return this.serverConfig.avatar.file.size.max
-  }
-
-  get maxAvatarSizeInBytes () {
-    return getBytes(this.maxAvatarSize)
-  }
-
-  get avatarExtensions () {
-    return this.serverConfig.avatar.file.extensions.join(', ')
-  }
-
-  get avatarFormat () {
-    return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
-  }
-
-  get hasAvatar () {
+  hasAvatar () {
     return !!this.avatarUrl
   }
 }