Fix issues with external links in search page

5 files changed, 38 insertions, 23 deletions

diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
index fe5510c56..0cb0f321b 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.html
@@ -1,7 +1,12 @@
-<a
-  [routerLink]="getVideoRouterLink()" [queryParams]="queryParams"
-  class="video-thumbnail"
->
+<a *ngIf="!videoHref" [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" class="video-thumbnail">
+  <ng-container *ngTemplateOutlet="aContent"></ng-container>
+</a>
+
+<a *ngIf="videoHref" [href]="videoHref" [target]="videoTarget" class="video-thumbnail">
+  <ng-container *ngTemplateOutlet="aContent"></ng-container>
+</a>
+
+<ng-template #aContent>
   <img alt="" [attr.aria-label]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
   <div *ngIf="displayWatchLaterPlaylist" class="video-thumbnail-actions-overlay">
@@ -30,4 +35,4 @@
   <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
     <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
   </div>
-</a>
+</ng-template>
diff --git a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
index 3ff45d9b7..812c7a508 100644
--- a/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
+++ b/client/src/app/shared/shared-thumbnail/video-thumbnail.component.ts
@@ -11,8 +11,11 @@ import { Video } from '../shared-main'
 export class VideoThumbnailComponent {
   @Input() video: Video
   @Input() nsfw = false
-  @Input() routerLink: any[]
+
+  @Input() videoRouterLink: any[]
   @Input() queryParams: { [ p: string ]: any }
+  @Input() videoHref: string
+  @Input() videoTarget: string
 
   @Input() displayWatchLaterPlaylist: boolean
   @Input() inWatchLaterPlaylist: boolean
@@ -49,7 +52,7 @@ export class VideoThumbnailComponent {
   }
 
   getVideoRouterLink () {
-    if (this.routerLink) return this.routerLink
+    if (this.videoRouterLink) return this.videoRouterLink
 
     return [ '/videos/watch', this.video.uuid ]
   }
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 e5d91e69a..a88b3bc9e 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
@@ -1,6 +1,6 @@
 <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow, 'fit-width': fitWidth }" (mouseenter)="loadActions()">
   <my-video-thumbnail
-    [video]="video" [nsfw]="isVideoBlur" [routerLink]="videoLink"
+    [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"
     [displayWatchLaterPlaylist]="isWatchLaterPlaylistDisplayed()" [inWatchLaterPlaylist]="inWatchLaterPlaylist" (watchLaterClick)="onWatchLaterClick($event)"
   >
     <ng-container ngProjectAs="label-warning" *ngIf="displayOptions.privacyLabel && isUnlistedVideo()" i18n>Unlisted</ng-container>
@@ -15,10 +15,12 @@
         </a>
 
         <div class="w-100 d-flex flex-column">
-          <a
-            tabindex="-1"
-            class="video-miniature-name"
-            [routerLink]="videoLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
+          <a *ngIf="!videoHref" tabindex="-1" class="video-miniature-name"
+            [routerLink]="videoRouterLink" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
+          >{{ video.name }}</a>
+
+          <a *ngIf="videoHref" tabindex="-1" class="video-miniature-name"
+            [href]="videoHref" [target]="videoTarget" [attr.title]="video.name" [ngClass]="{ 'blur-filter': isVideoBlur }"
           >{{ video.name }}</a>
 
           <span class="video-miniature-created-at-views">
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 e1adbb6ad..f434550dd 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
@@ -29,6 +29,7 @@ export type MiniatureDisplayOptions = {
   blacklistInfo?: boolean
   nsfw?: boolean
 }
+export type VideoLinkType = 'internal' | 'lazy-load' | 'external'
 
 @Component({
   selector: 'my-video-miniature',
@@ -55,7 +56,7 @@ export class VideoMiniatureComponent implements OnInit {
   @Input() displayVideoActions = true
   @Input() fitWidth = false
 
-  @Input() useLazyLoadUrl = false
+  @Input() videoLinkType: VideoLinkType = 'internal'
 
   @Output() videoBlocked = new EventEmitter()
   @Output() videoUnblocked = new EventEmitter()
@@ -85,7 +86,9 @@ export class VideoMiniatureComponent implements OnInit {
     playlistElementId?: number
   }
 
-  videoLink: any[] = []
+  videoRouterLink: any[] = []
+  videoHref: string
+  videoTarget: string
 
   private ownerDisplayTypeChosen: 'account' | 'videoChannel'
 
@@ -125,18 +128,20 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   buildVideoLink () {
-    if (this.useLazyLoadUrl && this.video.url) {
-      const remoteUriConfig = this.serverConfig.search.remoteUri
-
-      // Redirect on the external instance if not allowed to fetch remote data
-      const externalRedirect = (!this.authService.isLoggedIn() && !remoteUriConfig.anonymous) || !remoteUriConfig.users
-      const fromPath = window.location.pathname + window.location.search
+    if (this.videoLinkType === 'internal' || !this.video.url) {
+      this.videoRouterLink = [ '/videos/watch', this.video.uuid ]
+      return
+    }
 
-      this.videoLink = [ '/search/lazy-load-video', { url: this.video.url, externalRedirect, fromPath } ]
+    if (this.videoLinkType === 'external') {
+      this.videoRouterLink = null
+      this.videoHref = this.video.url
+      this.videoTarget = '_blank'
       return
     }
 
-    this.videoLink = [ '/videos/watch', this.video.uuid ]
+    // Lazy load
+    this.videoRouterLink = [ '/search/lazy-load-video', { url: this.video.url } ]
   }
 
   displayOwnerAccount () {
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 e3f7ef017..473fdc102 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
@@ -8,7 +8,7 @@
     <my-video-thumbnail
       *ngIf="playlistElement.video"
       [video]="playlistElement.video" [nsfw]="isVideoBlur(playlistElement.video)"
-      [routerLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
+      [videoRouterLink]="buildRouterLink()" [queryParams]="buildRouterQuery()"
     ></my-video-thumbnail>
 
     <div class="fake-thumbnail" *ngIf="!playlistElement.video"></div>