Prefer displaying channel for playlist element

6 files changed, 36 insertions, 25 deletions

diff --git a/client/src/app/shared/shared-main/video/video.service.ts b/client/src/app/shared/shared-main/video/video.service.ts
index 8c8b1e08f..152149827 100644
--- a/client/src/app/shared/shared-main/video/video.service.ts
+++ b/client/src/app/shared/shared-main/video/video.service.ts
@@ -420,6 +420,24 @@ export class VideoService {
       : 'both'
   }
 
+  // Choose if we display by default the account or the channel
+  buildDefaultOwnerDisplayType (video: Video) {
+    const accountName = video.account.name
+
+    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
+    // Or has not been customized (default created channel display name)
+    // -> Use the account name
+    if (
+      video.channel.displayName === `Default ${accountName} channel` ||
+      video.channel.displayName === `Main ${accountName} channel` ||
+      video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
+    ) {
+      return 'account' as 'account'
+    }
+
+    return 'videoChannel' as 'videoChannel'
+  }
+
   buildCommonVideosParams (options: CommonVideoParams & { params: HttpParams }) {
     const {
       params,
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.html b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
index 227c12130..7d3c3dbfc 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.html
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.html
@@ -40,11 +40,9 @@
             </span>
           </span>
 
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerAccount()" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
-            {{ authorAccount }}
-          </a>
-          <a tabindex="-1" *ngIf="displayOptions.by && displayOwnerVideoChannel()" class="video-miniature-channel" [routerLink]="[ '/c', video.byVideoChannel ]">
-            {{ authorChannel }}
+          <a tabindex="-1" *ngIf="displayOptions.by" class="video-miniature-account" [routerLink]="[ '/c', video.byVideoChannel ]">
+            <ng-container *ngIf="displayOwnerAccount()">{{ authorAccount }}</ng-container>
+            <ng-container *ngIf="displayOwnerVideoChannel()">{{ authorChannel }}</ng-container>
           </a>
 
           <div class="video-info-privacy">
diff --git a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
index 706227e66..2384b34d7 100644
--- a/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
+++ b/client/src/app/shared/shared-video-miniature/video-miniature.component.ts
@@ -14,7 +14,7 @@ import { AuthService, ScreenService, ServerService, User } from '@app/core'
 import { HTMLServerConfig, VideoExistInPlaylist, VideoPlaylistType, VideoPrivacy, VideoState } from '@shared/models'
 import { LinkType } from '../../../types/link.type'
 import { ActorAvatarSize } from '../shared-actor-image/actor-avatar.component'
-import { Video } from '../shared-main'
+import { Video, VideoService } from '../shared-main'
 import { VideoPlaylistService } from '../shared-video-playlist'
 import { VideoActionsDisplayType } from './video-actions-dropdown.component'
 
@@ -103,6 +103,7 @@ export class VideoMiniatureComponent implements OnInit {
     private serverService: ServerService,
     private authService: AuthService,
     private videoPlaylistService: VideoPlaylistService,
+    private videoService: VideoService,
     private cd: ChangeDetectorRef,
     @Inject(LOCALE_ID) private localeId: string
   ) {}
@@ -276,20 +277,7 @@ export class VideoMiniatureComponent implements OnInit {
       return
     }
 
-    const accountName = this.video.account.name
-
-    // If the video channel name is an UUID (not really displayable, we changed this behaviour in v1.0.0-beta.12)
-    // Or has not been customized (default created channel display name)
-    // -> Use the account name
-    if (
-      this.video.channel.displayName === `Default ${accountName} channel` ||
-      this.video.channel.displayName === `Main ${accountName} channel` ||
-      this.video.channel.name.match(/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/)
-    ) {
-      this.ownerDisplayType = 'account'
-    } else {
-      this.ownerDisplayType = 'videoChannel'
-    }
+    this.ownerDisplayType = this.videoService.buildDefaultOwnerDisplayType(this.video)
   }
 
   private loadWatchLater () {
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
index f58d5f7f6..40c58166d 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.html
@@ -32,9 +32,11 @@
           </span>
         </span>
 
-        <a *ngIf="accountLink" tabindex="-1" class="video-info-account" [routerLink]="[ '/a', playlistElement.video.byAccount ]">
-          {{ playlistElement.video.byAccount }}
+        <a *ngIf="accountLink" tabindex="-1" class="video-info-owner" [routerLink]="[ '/c', playlistElement.video.byVideoChannel ]">
+          <ng-container *ngIf="getVideoOwnerDisplayType(playlistElement) === 'account'">{{ playlistElement.video.byAccount }}</ng-container>
+          <ng-container *ngIf="getVideoOwnerDisplayType(playlistElement) === 'videoChannel'">{{ playlistElement.video.byVideoChannel }}</ng-container>
         </a>
+
         <span *ngIf="!accountLink" tabindex="-1" class="video-info-account">{{ playlistElement.video.byAccount }}</span>
 
         <span tabindex="-1" class="video-info-timestamp">{{ formatTimestamp(playlistElement) }}</span>
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
index e6b01d33d..0f085231c 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.scss
@@ -133,13 +133,13 @@ my-video-thumbnail,
     }
   }
 
-  .video-info-account,
+  .video-info-owner,
   .video-info-timestamp {
     color: pvar(--greyForegroundColor);
   }
 }
 
-.video-info-account,
+.video-info-owner,
 .video-miniature-created-at-views {
   font-size: 14px;
 }
diff --git a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
index 79b7b9a50..552ea742b 100644
--- a/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
+++ b/client/src/app/shared/shared-video-playlist/video-playlist-element-miniature.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
 import { AuthService, Notifier, ServerService } from '@app/core'
-import { Video } from '@app/shared/shared-main'
+import { Video, VideoService } from '@app/shared/shared-main'
 import { NgbDropdown } from '@ng-bootstrap/ng-bootstrap'
 import { secondsToTime } from '@shared/core-utils'
 import { HTMLServerConfig, VideoPlaylistElementType, VideoPlaylistElementUpdate, VideoPrivacy } from '@shared/models'
@@ -44,6 +44,7 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
     private serverService: ServerService,
     private notifier: Notifier,
     private videoPlaylistService: VideoPlaylistService,
+    private videoService: VideoService,
     private cdr: ChangeDetectorRef
   ) {}
 
@@ -51,6 +52,10 @@ export class VideoPlaylistElementMiniatureComponent implements OnInit {
     this.serverConfig = this.serverService.getHTMLConfig()
   }
 
+  getVideoOwnerDisplayType (element: VideoPlaylistElement) {
+    return this.videoService.buildDefaultOwnerDisplayType(element.video)
+  }
+
   isVideoPrivate () {
     return this.playlistElement.video.privacy.id === VideoPrivacy.PRIVATE
   }