Display avatar in video miniatures (#4823)

* show avatar in video miniatures

closes #4040

* fix: videos for api, include avatars

* add config for display video miniature avatar

* Revert "fix: videos for api, include avatars"

This reverts commit 5520a3eda6805338317a394d0553f2f82095a425.

* video-min: set display avatar to false as default

* remove empty line

* rename display_avatar > display_author_avatar

* fix renaming displayAvatar > displayAuthorAvatar

7 files changed, 38 insertions, 13 deletions

diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index 9a7ec7efa..38a80b973 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -3,7 +3,16 @@ import { fromEvent, Observable, Subject, Subscription } from 'rxjs'
 import { debounceTime, switchMap } from 'rxjs/operators'
 import { Component, EventEmitter, Input, OnChanges, OnDestroy, OnInit, Output, SimpleChanges } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AuthService, ComponentPaginationLight, Notifier, PeerTubeRouterService, ScreenService, User, UserService } from '@app/core'
+import {
+  AuthService,
+  ComponentPaginationLight,
+  Notifier,
+  PeerTubeRouterService,
+  ScreenService,
+  ServerService,
+  User,
+  UserService
+} from '@app/core'
 import { GlobalIconName } from '@app/shared/shared-icons'
 import { isLastMonth, isLastWeek, isThisMonth, isToday, isYesterday } from '@shared/core-utils'
 import { ResultList, UserRight, VideoSortField } from '@shared/models'
@@ -61,16 +70,7 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
 
   @Input() hideScopeFilter = false
 
-  @Input() displayOptions: MiniatureDisplayOptions = {
-    date: true,
-    views: true,
-    by: true,
-    avatar: false,
-    privacyLabel: true,
-    privacyText: false,
-    state: false,
-    blacklistInfo: false
-  }
+  @Input() displayOptions: MiniatureDisplayOptions
 
   @Input() disabled = false
 
@@ -85,6 +85,16 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
 
   userMiniature: User
 
+  private defaultDisplayOptions: MiniatureDisplayOptions = {
+    date: true,
+    views: true,
+    by: true,
+    avatar: false,
+    privacyLabel: true,
+    privacyText: false,
+    state: false,
+    blacklistInfo: false
+  }
   private routeSub: Subscription
   private userSub: Subscription
   private resizeSub: Subscription
@@ -105,7 +115,8 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
     private userService: UserService,
     private route: ActivatedRoute,
     private screenService: ScreenService,
-    private peertubeRouter: PeerTubeRouterService
+    private peertubeRouter: PeerTubeRouterService,
+    private serverService: ServerService
   ) {
 
   }
@@ -161,6 +172,14 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   ngOnChanges (changes: SimpleChanges) {
+    if (changes['displayOptions'] || !this.displayOptions) {
+      this.displayOptions = {
+        ...this.defaultDisplayOptions,
+        avatar: this.serverService.getHTMLConfig().client.videos.miniature.displayAuthorAvatar,
+        ...changes['displayOptions']
+      }
+    }
+
     if (!this.filters) return
 
     let updated = false
diff --git a/config/default.yaml b/config/default.yaml
index 3588a5ec9..d76894b52 100644
--- a/config/default.yaml
+++ b/config/default.yaml
@@ -624,6 +624,7 @@ client:
     miniature:
       # By default PeerTube client displays author username
       prefer_author_display_name: false
+      display_author_avatar: false
 
   menu:
     login:
diff --git a/config/production.yaml.example b/config/production.yaml.example
index 73d1ead66..45d26190a 100644
--- a/config/production.yaml.example
+++ b/config/production.yaml.example
@@ -632,6 +632,7 @@ client:
     miniature:
       # By default PeerTube client displays author username
       prefer_author_display_name: false
+      display_author_avatar: false
 
   menu:
     login:
diff --git a/server/initializers/checker-before-init.ts b/server/initializers/checker-before-init.ts
index 36401f95c..10dd98f43 100644
--- a/server/initializers/checker-before-init.ts
+++ b/server/initializers/checker-before-init.ts
@@ -33,6 +33,7 @@ function checkMissedConfig () {
     'transcoding.resolutions.2160p', 'video_editor.enabled',
     'import.videos.http.enabled', 'import.videos.torrent.enabled', 'import.videos.concurrency', 'auto_blacklist.videos.of_users.enabled',
     'trending.videos.interval_days',
+    'client.videos.miniature.display_author_avatar',
     'client.videos.miniature.prefer_author_display_name', 'client.menu.login.redirect_on_single_external_auth',
     'defaults.publish.download_enabled', 'defaults.publish.comments_enabled', 'defaults.publish.privacy', 'defaults.publish.licence',
     'instance.name', 'instance.short_description', 'instance.description', 'instance.terms', 'instance.default_client_route',
diff --git a/server/initializers/config.ts b/server/initializers/config.ts
index 63056b41d..7a13a1368 100644
--- a/server/initializers/config.ts
+++ b/server/initializers/config.ts
@@ -62,7 +62,8 @@ const CONFIG = {
   CLIENT: {
     VIDEOS: {
       MINIATURE: {
-        get PREFER_AUTHOR_DISPLAY_NAME () { return config.get<boolean>('client.videos.miniature.prefer_author_display_name') }
+        get PREFER_AUTHOR_DISPLAY_NAME () { return config.get<boolean>('client.videos.miniature.prefer_author_display_name') },
+        get DISPLAY_AUTHOR_AVATAR () { return config.get<boolean>('client.videos.miniature.display_author_avatar') }
       }
     },
     MENU: {
diff --git a/server/lib/server-config-manager.ts b/server/lib/server-config-manager.ts
index 38512f384..43ca2332b 100644
--- a/server/lib/server-config-manager.ts
+++ b/server/lib/server-config-manager.ts
@@ -46,6 +46,7 @@ class ServerConfigManager {
       client: {
         videos: {
           miniature: {
+            displayAuthorAvatar: CONFIG.CLIENT.VIDEOS.MINIATURE.DISPLAY_AUTHOR_AVATAR,
             preferAuthorDisplayName: CONFIG.CLIENT.VIDEOS.MINIATURE.PREFER_AUTHOR_DISPLAY_NAME
           }
         },
diff --git a/shared/models/server/server-config.model.ts b/shared/models/server/server-config.model.ts
index 0fe8b0de8..b06019bb8 100644
--- a/shared/models/server/server-config.model.ts
+++ b/shared/models/server/server-config.model.ts
@@ -38,6 +38,7 @@ export interface ServerConfig {
   client: {
     videos: {
       miniature: {
+        displayAuthorAvatar: boolean
         preferAuthorDisplayName: boolean
       }
     }