Add pixel size to tooltip and gif support with FFmpeg for avatar upload (#3329)

* Add avatar pixel size upload in tooltip

* Add gif support for avatar

* Add ffmpeg GIF process

Co-authored-by: kimsible <kimsible@users.noreply.github.com>

2 files changed, 7 insertions, 6 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 d01b9ac7f..e63d8de2d 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
@@ -4,7 +4,8 @@
       <img [src]="actor.avatarUrl" alt="Avatar" />
 
       <div class="actor-img-edit-container">
-        <div class="actor-img-edit-button" [ngbTooltip]="'(extensions: '+ avatarExtensions +', '+ maxSizeText +': '+ maxAvatarSizeInBytes +')'" placement="right" container="body">
+        <div class="actor-img-edit-button" [ngbTooltip]="avatarFormat"
+          placement="right" container="body">
           <my-global-icon iconName="edit"></my-global-icon>
           <label for="avatarfile" i18n>Change your avatar</label>
           <input #avatarfileInput type="file" title=" " name="avatarfile" id="avatarfile" [accept]="avatarExtensions" (change)="onAvatarChange()"/>
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 5daa54cb5..de78a390e 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
@@ -17,16 +17,12 @@ export class ActorAvatarInfoComponent implements OnInit {
 
   @Output() avatarChange = new EventEmitter<FormData>()
 
-  maxSizeText: string
-
   private serverConfig: ServerConfig
 
   constructor (
     private serverService: ServerService,
     private notifier: Notifier
-  ) {
-    this.maxSizeText = $localize`max size`
-  }
+  ) { }
 
   ngOnInit (): void {
     this.serverConfig = this.serverService.getTmpConfig()
@@ -58,4 +54,8 @@ export class ActorAvatarInfoComponent implements OnInit {
   get avatarExtensions () {
     return this.serverConfig.avatar.file.extensions.join(', ')
   }
+
+  get avatarFormat () {
+    return `${$localize`max size`}: 192*192px, ${this.maxAvatarSizeInBytes} ${$localize`extensions`}: ${this.avatarExtensions}`
+  }
 }