From 746018f6b81b40e8858303662ac9ec5ce59ac6eb Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 28 Apr 2021 11:49:34 +0200
Subject: Refactor actor avatar display

---
 client/src/app/+search/search.component.html | 11 +++--------
 client/src/app/+search/search.component.scss | 18 +++++++-----------
 client/src/app/+search/search.component.ts   | 26 +++++++++++++++++++-------
 client/src/app/+search/search.module.ts      |  2 ++
 4 files changed, 31 insertions(+), 26 deletions(-)

(limited to 'client/src/app/+search')

diff --git a/client/src/app/+search/search.component.html b/client/src/app/+search/search.component.html
index 65d4b6ecd..130be75fc 100644
--- a/client/src/app/+search/search.component.html
+++ b/client/src/app/+search/search.component.html
@@ -33,20 +33,15 @@
 
   <ng-container *ngFor="let result of results">
     <div *ngIf="isVideoChannel(result)" class="entry video-channel">
-      <a class="link-avatar" *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)">
-        <img [src]="result.avatarUrl" alt="Avatar" />
-      </a>
 
-      <a class="link-avatar" *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank">
-        <img [src]="result.avatarUrl" alt="Avatar" />
-      </a>
+      <my-actor-avatar [channel]="result" [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)"></my-actor-avatar>
 
       <div class="video-channel-info">
-        <a *ngIf="!isExternalChannelUrl()" [routerLink]="getChannelUrl(result)" class="video-channel-names">
+        <a *ngIf="!isExternalChannelUrl()" [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
           <ng-container *ngTemplateOutlet="aContent"></ng-container>
         </a>
 
-        <a *ngIf="isExternalChannelUrl()" [href]="getChannelUrl(result)" target="_blank" class="video-channel-names">
+        <a *ngIf="isExternalChannelUrl()" [href]="getExternalChannelUrl(result)" target="_blank" class="video-channel-names">
           <ng-container *ngTemplateOutlet="aContent"></ng-container>
         </a>
 
diff --git a/client/src/app/+search/search.component.scss b/client/src/app/+search/search.component.scss
index 91c8272d7..a8002ba88 100644
--- a/client/src/app/+search/search.component.scss
+++ b/client/src/app/+search/search.component.scss
@@ -5,7 +5,7 @@
   $image-size: min(130px, $video-img-width);
   $margin-size: ($video-img-width - $image-size) / 2; // So we have the same width than the video miniature
 
-  @include channel-avatar($image-size);
+  @include actor-avatar-size($image-size);
 
   margin: 0 $margin-size 0 $margin-size;
 }
@@ -53,10 +53,8 @@
   max-width: 800px;
 }
 
-.video-channel {
-  img {
-    @include build-channel-img-size($video-thumbnail-width);
-  }
+.video-channel my-actor-avatar {
+  @include build-channel-img-size($video-thumbnail-width);
 }
 
 .video-channel-info {
@@ -92,14 +90,12 @@
     grid-template-columns: auto 1fr;
     grid-template-rows: auto auto;
 
-    .link-avatar {
+    my-actor-avatar {
+      @include build-channel-img-size($video-thumbnail-medium-width);
+
       grid-column: 1;
       grid-row: 1 / -1;
     }
-
-    img {
-      @include build-channel-img-size($video-thumbnail-medium-width);
-    }
   }
 
   .video-channel-info {
@@ -115,7 +111,7 @@
 }
 
 @include on-mobile-main-col {
-  .video-channel img {
+  .video-channel my-actor-avatar {
     @include build-channel-img-size($video-thumbnail-small-width);
   }
 }
diff --git a/client/src/app/+search/search.component.ts b/client/src/app/+search/search.component.ts
index 2be952e16..ecede19a3 100644
--- a/client/src/app/+search/search.component.ts
+++ b/client/src/app/+search/search.component.ts
@@ -132,10 +132,6 @@ export class SearchComponent implements OnInit, OnDestroy {
     return 'internal'
   }
 
-  isExternalChannelUrl () {
-    return this.getVideoLinkType() === 'external'
-  }
-
   search () {
     forkJoin([
       this.getVideosObs(),
@@ -200,17 +196,33 @@ export class SearchComponent implements OnInit, OnDestroy {
     this.results = this.results.filter(r => !this.isVideo(r) || r.id !== video.id)
   }
 
-  getChannelUrl (channel: VideoChannel) {
+  isExternalChannelUrl () {
+    return this.getVideoLinkType() === 'external'
+  }
+
+  getExternalChannelUrl (channel: VideoChannel) {
     // Same algorithm than videos
     if (this.getVideoLinkType() === 'external') {
       return channel.url
     }
 
-    if (this.getVideoLinkType() === 'internal') {
+    // lazy-load or internal
+    return undefined
+  }
+
+  getInternalChannelUrl (channel: VideoChannel) {
+    const linkType = this.getVideoLinkType()
+
+    if (linkType === 'internal') {
       return [ '/video-channels', channel.nameWithHost ]
     }
 
-    return [ '/search/lazy-load-channel', { url: channel.url } ]
+    if (linkType === 'lazy-load') {
+      return [ '/search/lazy-load-channel', { url: channel.url } ]
+    }
+
+    // external
+    return undefined
   }
 
   hideActions () {
diff --git a/client/src/app/+search/search.module.ts b/client/src/app/+search/search.module.ts
index e85ae07d0..390833abc 100644
--- a/client/src/app/+search/search.module.ts
+++ b/client/src/app/+search/search.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core'
+import { SharedActorImageModule } from '@app/shared/shared-actor-image/shared-actor-image.module'
 import { SharedFormModule } from '@app/shared/shared-forms'
 import { SharedMainModule } from '@app/shared/shared-main'
 import { SharedSearchModule } from '@app/shared/shared-search'
@@ -18,6 +19,7 @@ import { VideoLazyLoadResolver } from './video-lazy-load.resolver'
     SharedMainModule,
     SharedSearchModule,
     SharedFormModule,
+    SharedActorImageModule,
     SharedUserSubscriptionModule,
     SharedVideoMiniatureModule
   ],
-- 
cgit v1.2.3