Fix channel lazy loading in search results

client/src/app/shared/shared-main/common/link.component.scss

@@ -1,5 +1,6 @@
 .inherit-parent-style {
   color: inherit;
+  opacity: inherit;
   text-decoration: inherit;
 }
 

client/src/app/shared/shared-video-miniature/video-miniature.component.html

@@ -29,13 +29,18 @@
       }
 
       <div class="owner-container" *ngIf="displayOptions().by">
-        <a class="owner-label ellipsis" [routerLink]="[ '/c', video().byVideoChannel ]" [title]="displayOwnerAccount() ? authorAccount : authorChannel">
+        <my-link
+          class="owner-label" className="ellipsis"
+          [internalLink]="ownerRouterLink" [href]="ownerHref" [target]="ownerTarget" inheritParentStyle="true"
+          [ariaLabel]="getAriaLabel()"
+          [title]="displayOwnerAccount() ? authorAccount : authorChannel"
+        >
           @if (displayOwnerAccount()) {
             {{ authorAccount }}
           } @else if (displayOwnerVideoChannel()) {
             {{ authorChannel }}
           }
-        </a>
+        </my-link>
 
         <my-actor-host *ngIf="!video().isLocal" [host]="video().account.host"></my-actor-host>
       </div>

client/src/app/shared/shared-video-miniature/video-miniature.component.ts

@@ -127,6 +127,10 @@ export class VideoMiniatureComponent implements OnInit {
   videoHref: string
   videoTarget: string
 
+  ownerRouterLink: string | any[] = []
+  ownerHref: string
+  ownerTarget: string
+
   private ownerDisplayType: 'account' | 'videoChannel'
   private actionsLoaded = false
 
@@ -148,7 +152,9 @@ export class VideoMiniatureComponent implements OnInit {
 
   ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
+
     this.buildVideoLink()
+    this.buildOwnerLink()
 
     this.setUpBy()
 
@@ -179,6 +185,29 @@ export class VideoMiniatureComponent implements OnInit {
     this.videoRouterLink = [ '/search/lazy-load-video', { url: video.url } ]
   }
 
+  buildOwnerLink () {
+    const video = this.video()
+
+    const linkType = this.videoLinkType()
+
+    if (linkType === 'internal' || !video.channel.url) {
+      this.ownerRouterLink = `/c/${video.byVideoChannel}`
+      return
+    }
+
+    if (linkType === 'external') {
+      this.ownerRouterLink = null
+      this.ownerHref = video.channel.url
+      this.ownerTarget = '_blank'
+      return
+    }
+
+    // Lazy load
+    this.ownerRouterLink = [ '/search/lazy-load-channel', { url: video.channel.url } ]
+  }
+
+  // ---------------------------------------------------------------------------
+
   displayOwnerAccount () {
     return this.ownerDisplayType === 'account'
   }

client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.html

@@ -1,6 +1,6 @@
 <div class="miniature" [ngClass]="{ 'no-videos': playlist().videosLength === 0, 'to-manage': toManage(), 'display-as-row': displayAsRow() }">
   <my-link
-    [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
+    [internalLink]="playlistRouterLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
     [title]="playlist().description" class="miniature-thumbnail" tabindex="-1"
   >
     <img alt="" [attr.aria-labelledby]="playlist().displayName" [attr.src]="playlist().thumbnailUrl" />
@@ -16,15 +16,19 @@
 
   <div class="miniature-info">
     <my-link
-      [internalLink]="routerLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
+      [internalLink]="playlistRouterLink" [href]="playlistHref" [target]="playlistTarget" inheritParentStyle="true" inheritParentDimension="true"
       [title]="playlist().description" class="miniature-name" className="ellipsis-multiline-2"
     >
       {{ playlist().displayName }}
     </my-link>
 
-    <a i18n [routerLink]="[ '/c', playlist().videoChannelBy ]" class="by" *ngIf="displayChannel() && playlist().videoChannelBy">
+    <my-link
+      *ngIf="displayChannel() && playlist().videoChannelBy"
+      class="by"
+      [internalLink]="ownerRouterLink" [href]="ownerHref" [target]="ownerTarget" inheritParentStyle="true"
+    >
       {{ playlist().videoChannelBy }}
-    </a>
+    </my-link>
 
     <div class="privacy-date">
       <span class="privacy" *ngIf="displayPrivacy()">{{ playlist().privacy.label }}</span>

client/src/app/shared/shared-video-playlist/video-playlist-miniature.component.ts

@@ -27,13 +27,20 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
 
   readonly linkType = input<LinkType>('internal')
 
-  routerLink: any
+  ownerRouterLink: any
+  ownerHref: string
+  ownerTarget: string
+
+  playlistRouterLink: any
   playlistHref: string
   playlistTarget: string
+
   playlistDescription: string
 
   async ngOnInit () {
     this.buildPlaylistUrl()
+    this.buildOwnerUrl()
+
     if (this.displayDescription()) {
       this.playlistDescription = await this.markdownService.textMarkdownToHTML({ markdown: this.playlist().description })
     }
@@ -41,32 +48,53 @@ export class VideoPlaylistMiniatureComponent implements OnInit {
 
   buildPlaylistUrl () {
     if (this.toManage()) {
-      this.routerLink = [ '/my-library/video-playlists', this.playlist().shortUUID ]
+      this.playlistRouterLink = [ '/my-library/video-playlists', this.playlist().shortUUID ]
       return
     }
 
     const playlist = this.playlist()
     if (playlist.videosLength === 0) {
-      this.routerLink = null
+      this.playlistRouterLink = null
       return
     }
 
     const linkType = this.linkType()
     if (linkType === 'internal' || !playlist.url) {
-      this.routerLink = VideoPlaylist.buildWatchUrl(playlist)
+      this.playlistRouterLink = VideoPlaylist.buildWatchUrl(playlist)
       return
     }
 
     if (linkType === 'external') {
-      this.routerLink = null
+      this.playlistRouterLink = null
       this.playlistHref = playlist.url
       this.playlistTarget = '_blank'
       return
     }
 
     // Lazy load
-    this.routerLink = [ '/search/lazy-load-playlist', { url: playlist.url } ]
+    this.playlistRouterLink = [ '/search/lazy-load-playlist', { url: playlist.url } ]
+  }
 
+  buildOwnerUrl () {
+    const playlist = this.playlist()
+    const linkType = this.linkType()
+
+    if (!playlist.videoChannel) return
+
+    if (linkType === 'internal' || !playlist.videoChannel.url) {
+      this.ownerRouterLink = `/c/${playlist.videoChannelBy}`
+      return
+    }
+
+    if (linkType === 'external') {
+      this.ownerRouterLink = null
+      this.ownerHref = playlist.videoChannel.url
+      this.ownerTarget = '_blank'
+      return
+    }
+
+    // Lazy load
+    this.ownerRouterLink = [ '/search/lazy-load-channel', { url: playlist.videoChannel.url } ]
     return
   }
 }