Fix video miniature keyboard navigation

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

@@ -9,25 +9,25 @@
 <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">
+  <div *ngIf="displayWatchLaterPlaylist" class="actions-overlay">
-    <ng-container *ngIf="inWatchLaterPlaylist !== true">
+    <button
-      <button class="video-thumbnail-watch-later-overlay button-unstyle" placement="left" [ngbTooltip]="addToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+      class="watch-icon-overlay button-unstyle"
-        <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText" role="button"></my-global-icon>
+      placement="left" [ngbTooltip]="getWatchIconText()" container="body" #watchLaterTooltip="ngbTooltip"
-      </button>
+      (click)="onWatchLaterClick($event)"
-    </ng-container>
+    >
-
+      @if (inWatchLaterPlaylist) {
-    <ng-container *ngIf="inWatchLaterPlaylist === true">
+        <my-global-icon iconName="tick" [attr.aria-label]="inWatchLaterPlaylist"></my-global-icon>
-      <button class="video-thumbnail-watch-later-overlay button-unstyle" placement="left" [ngbTooltip]="addedToWatchLaterText" container="body" (click)="onWatchLaterClick($event)">
+      } @else {
-        <my-global-icon iconName="tick" [attr.aria-label]="addedToWatchLaterText" role="button"></my-global-icon>
+        <my-global-icon iconName="clock" [attr.aria-label]="addToWatchLaterText"></my-global-icon>
-      </button>
+      }
-    </ng-container>
+    </button>
   </div>
 
-  <div class="video-thumbnail-label-overlay warning"><ng-content select="label-warning"></ng-content></div>
+  <div class="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="label-overlay danger"><ng-content select="label-danger"></ng-content></div>
 
-  <div class="video-thumbnail-duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
+  <div class="duration-overlay" *ngIf="!video.isLive">{{ video.durationLabel }}</div>
-  <div  class="video-thumbnail-live-overlay" [ngClass]="{ 'live-ended': isLiveEnded() }" *ngIf="video.isLive">
+  <div  class="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>

client/src/app/shared/shared-thumbnail/video-thumbnail.component.scss

@@ -19,10 +19,10 @@
   }
 }
 
-.video-thumbnail-watch-later-overlay,
+.watch-icon-overlay,
-.video-thumbnail-label-overlay,
+.label-overlay,
-.video-thumbnail-duration-overlay,
+.duration-overlay,
-.video-thumbnail-live-overlay {
+.live-overlay {
   border-radius: 3px;
   font-size: 12px;
   font-weight: $font-semibold;
@@ -32,7 +32,7 @@
   @include static-thumbnail-overlay;
 }
 
-.video-thumbnail-label-overlay {
+.label-overlay {
   position: absolute;
   padding: 0 5px;
   left: 5px;
@@ -43,15 +43,15 @@
   &.danger { background-color: #ff0000; }
 }
 
-.video-thumbnail-duration-overlay,
+.duration-overlay,
-.video-thumbnail-live-overlay {
+.live-overlay {
   position: absolute;
   padding: 0 3px;
   right: 5px;
   bottom: 5px;
 }
 
-.video-thumbnail-live-overlay {
+.live-overlay {
   font-weight: $font-semibold;
   color: #fff;
 
@@ -60,7 +60,7 @@
   }
 }
 
-.video-thumbnail-actions-overlay {
+.actions-overlay {
   position: absolute;
   display: flex;
   flex-direction: column;
@@ -73,7 +73,7 @@
   }
 }
 
-.video-thumbnail-watch-later-overlay {
+.watch-icon-overlay {
   padding: 3px;
 
   my-global-icon {

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

@@ -1,10 +1,10 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
+import { NgClass, NgIf, NgStyle, NgTemplateOutlet } from '@angular/common'
+import { Component, EventEmitter, Input, Output, ViewChild, viewChild } from '@angular/core'
+import { RouterLink } from '@angular/router'
 import { ScreenService } from '@app/core'
+import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
 import { VideoState } from '@peertube/peertube-models'
 import { GlobalIconComponent } from '../shared-icons/global-icon.component'
-import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap'
-import { RouterLink } from '@angular/router'
-import { NgIf, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'
 import { Video } from '../shared-main/video/video.model'
 
 @Component({
@@ -15,6 +15,8 @@ import { Video } from '../shared-main/video/video.model'
   imports: [ NgIf, RouterLink, NgTemplateOutlet, NgClass, NgbTooltip, GlobalIconComponent, NgStyle ]
 })
 export class VideoThumbnailComponent {
+  @ViewChild('watchLaterTooltip') watchLaterTooltip: NgbTooltip
+
   @Input() video: Video
   @Input() nsfw = false
 
@@ -31,11 +33,17 @@ export class VideoThumbnailComponent {
   @Output() watchLaterClick = new EventEmitter<boolean>()
 
   addToWatchLaterText: string
-  addedToWatchLaterText: string
+  removeFromWatchLaterText: string
 
   constructor (private screenService: ScreenService) {
     this.addToWatchLaterText = $localize`Add to watch later`
-    this.addedToWatchLaterText = $localize`Remove from watch later`
+    this.removeFromWatchLaterText = $localize`Remove from watch later`
+  }
+
+  getWatchIconText () {
+    if (this.inWatchLaterPlaylist) return this.removeFromWatchLaterText
+
+    return this.addToWatchLaterText
   }
 
   isLiveEnded () {
@@ -72,6 +80,8 @@ export class VideoThumbnailComponent {
     this.watchLaterClick.emit(this.inWatchLaterPlaylist)
 
     event.stopPropagation()
+    this.watchLaterTooltip.close()
+
     return false
   }
 }

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

@@ -1,4 +1,4 @@
-<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()">
+<div class="video-miniature" [ngClass]="getClasses()" (mouseenter)="loadActions()" (focusin)="loadActions()">
   <my-video-thumbnail
     [ariaLabel]="getAriaLabel()"
     [video]="video" [nsfw]="isVideoBlur" [videoRouterLink]="videoRouterLink" [videoHref]="videoHref" [videoTarget]="videoTarget"

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

@@ -77,8 +77,9 @@ my-actor-avatar {
   }
 }
 
-.video-miniature:hover {
+.video-miniature:hover,
-  ::ng-deep .video-thumbnail-actions-overlay,
+.video-miniature:focus-within {
+  my-video-thumbnail ::ng-deep .actions-overlay,
   .video-actions ::ng-deep .dropdown-root {
     opacity: 1 !important;
   }

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

@@ -118,6 +118,7 @@ export class VideoMiniatureComponent implements OnInit {
   videoTarget: string
 
   private ownerDisplayType: 'account' | 'videoChannel'
+  private actionsLoaded = false
 
   constructor (
     private screenService: ScreenService,
@@ -244,9 +245,12 @@ export class VideoMiniatureComponent implements OnInit {
   }
 
   loadActions () {
+    if (this.actionsLoaded) return
     if (this.displayVideoActions) this.showActions = true
 
     this.loadWatchLater()
+
+    this.actionsLoaded = true
   }
 
   onVideoBlocked () {