Fix scroll check in infinite scroller directive

[github/Chocobozzz/PeerTube.git] / client / src / app / shared / shared-thumbnail / video-thumbnail.component.html

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 fe5510c568b24d09aa2e6393a869737cec29537a..4fea0cc1c9a8b1dc5c12bdd177d0c0b563a40936 100644 (file)
--- 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">
@@ -21,7 +26,11 @@
   <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
   <div class="video-thumbnail-label-overlay danger"><ng-content select="label-danger"></ng-content></div>
 
-  <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
+  <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
+  <div  class="video-thumbnail-live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }" *ngIf="video.isLive">
+    <ng-container i18n *ngIf="!isLiveEnded()">LIVE</ng-container>
+    <ng-container i18n *ngIf="isLiveEnded()">LIVE ENDED</ng-container>
+  </div>
 
   <div class="play-overlay">
     <div class="icon"></div>
@@ -30,4 +39,4 @@
   <div class="progress-bar" *ngIf="video.userHistory?.currentTime">
     <div [ngStyle]="{ 'width.%': getProgressPercent() }"></div>
   </div>
-</a>
+</ng-template>