Fix issues with external links in search page

2 files changed, 15 insertions, 7 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 ]
   }