Add miniature quick actions to add video to Watch later playlist

1 files changed, 14 insertions, 0 deletions

diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index b302ebd0f..df15698c0 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,9 +1,23 @@
 <a
   [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
+  (mouseenter)="load()"
 >
   <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
+  <div *ngIf="isUserLoggedIn()" class="video-thumbnail-actions-overlay">
+    <ng-container *ngIf="addedToWatchLater !== true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="addToWatchLater();$event.stopPropagation();false">
+        <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
+      </div>
+    </ng-container>
+    <ng-container *ngIf="addedToWatchLater === true">
+      <div class="video-thumbnail-watch-later-overlay" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="removeFromWatchLater();$event.stopPropagation();false">
+        <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
+      </div>
+    </ng-container>
+  </div>
+
   <div class="video-thumbnail-duration-overlay">{{ video.durationLabel }}</div>
 
   <div class="play-overlay">