Display all miniature actions on hover and focus

7 files changed, 22 insertions, 12 deletions

diff --git a/client/src/app/shared/buttons/action-dropdown.component.scss b/client/src/app/shared/buttons/action-dropdown.component.scss
index 2f7e848d5..e33aa8d24 100644
--- a/client/src/app/shared/buttons/action-dropdown.component.scss
+++ b/client/src/app/shared/buttons/action-dropdown.component.scss
@@ -34,7 +34,7 @@
     width: 21px;
 
     ::ng-deep {
-      @include apply-svg-color(var(--mainForegroundColor));
+      @include apply-svg-color(var(--actionButtonColor));
     }
   }
 
diff --git a/client/src/app/shared/video/video-miniature.component.html b/client/src/app/shared/video/video-miniature.component.html
index 23a7dbb1e..c6fd570b7 100644
--- a/client/src/app/shared/video/video-miniature.component.html
+++ b/client/src/app/shared/video/video-miniature.component.html
@@ -1,5 +1,5 @@
 <div class="video-miniature" [ngClass]="{ 'display-as-row': displayAsRow }" (mouseenter)="loadActions()">
-  <my-video-thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
+  <my-video-thumbnail #thumbnail [video]="video" [nsfw]="isVideoBlur"></my-video-thumbnail>
 
   <div class="video-bottom">
     <div class="video-miniature-information">
diff --git a/client/src/app/shared/video/video-miniature.component.scss b/client/src/app/shared/video/video-miniature.component.scss
index ac83c5dfa..b63fd2989 100644
--- a/client/src/app/shared/video/video-miniature.component.scss
+++ b/client/src/app/shared/video/video-miniature.component.scss
@@ -74,10 +74,14 @@ $more-margin-right: 15px;
       ::ng-deep .playlist-dropdown.show + my-action-dropdown .dropdown-root {
         opacity: 1;
       }
-    }
 
-    &:hover .video-actions ::ng-deep .dropdown-root {
-      opacity: 1;
+      ::ng-deep .more-icon {
+        opacity: .6;
+
+        &:hover {
+          opacity: 1;
+        }
+      }
     }
 
     @media screen and (max-width: $small-view) {
@@ -96,6 +100,11 @@ $more-margin-right: 15px;
     }
   }
 
+  &:hover ::ng-deep .video-thumbnail .video-thumbnail-actions-overlay,
+  &:hover .video-bottom .video-actions ::ng-deep .dropdown-root {
+    opacity: 1;
+  }
+
   &.display-as-row {
     flex-direction: row;
     margin-bottom: 0;
diff --git a/client/src/app/shared/video/video-miniature.component.ts b/client/src/app/shared/video/video-miniature.component.ts
index 9fffc7ddb..ba65d33b6 100644
--- a/client/src/app/shared/video/video-miniature.component.ts
+++ b/client/src/app/shared/video/video-miniature.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output } from '@angular/core'
+import { ChangeDetectionStrategy, Component, EventEmitter, Inject, Input, LOCALE_ID, OnInit, Output, ViewChild } from '@angular/core'
 import { User } from '../users'
 import { Video } from './video.model'
 import { ServerService } from '@app/core'
@@ -6,6 +6,7 @@ import { ServerConfig, VideoPrivacy, VideoState } from '../../../../../shared'
 import { I18n } from '@ngx-translate/i18n-polyfill'
 import { VideoActionsDisplayType } from '@app/shared/video/video-actions-dropdown.component'
 import { ScreenService } from '@app/shared/misc/screen.service'
+import { VideoThumbnailComponent } from './video-thumbnail.component'
 
 export type OwnerDisplayType = 'account' | 'videoChannel' | 'auto'
 export type MiniatureDisplayOptions = {
@@ -46,6 +47,8 @@ export class VideoMiniatureComponent implements OnInit {
   @Output() videoUnblacklisted = new EventEmitter()
   @Output() videoRemoved = new EventEmitter()
 
+  @ViewChild('thumbnail', { static: true }) thumbnail: VideoThumbnailComponent
+
   videoActionsDisplayOptions: VideoActionsDisplayType = {
     playlist: true,
     download: false,
@@ -128,6 +131,7 @@ export class VideoMiniatureComponent implements OnInit {
 
   loadActions () {
     if (this.displayVideoActions) this.showActions = true
+    this.thumbnail.load()
   }
 
   onVideoBlacklisted () {
diff --git a/client/src/app/shared/video/video-thumbnail.component.html b/client/src/app/shared/video/video-thumbnail.component.html
index df15698c0..9679dfefb 100644
--- a/client/src/app/shared/video/video-thumbnail.component.html
+++ b/client/src/app/shared/video/video-thumbnail.component.html
@@ -1,7 +1,7 @@
 <a
   [routerLink]="getVideoRouterLink()" [queryParams]="queryParams" [attr.title]="video.name"
   class="video-thumbnail"
-  (mouseenter)="load()"
+  (mouseenter)="load()" (focus)="load()"
 >
   <img alt="" [attr.aria-labelledby]="video.name" [attr.src]="getImageUrl()" [ngClass]="{ 'blur-filter': nsfw }" />
 
diff --git a/client/src/app/shared/video/video-thumbnail.component.scss b/client/src/app/shared/video/video-thumbnail.component.scss
index aac50fd1b..ad221d6ed 100644
--- a/client/src/app/shared/video/video-thumbnail.component.scss
+++ b/client/src/app/shared/video/video-thumbnail.component.scss
@@ -35,6 +35,7 @@
     bottom: 5px;
   }
 
+  &:focus,
   &:hover {
     .video-thumbnail-actions-overlay {
       opacity: 1;
diff --git a/client/src/app/shared/video/video-thumbnail.component.ts b/client/src/app/shared/video/video-thumbnail.component.ts
index 0f605e425..6f9292d52 100644
--- a/client/src/app/shared/video/video-thumbnail.component.ts
+++ b/client/src/app/shared/video/video-thumbnail.component.ts
@@ -3,12 +3,7 @@ import { Video } from './video.model'
 import { ScreenService } from '@app/shared/misc/screen.service'
 import { AuthService, ThemeService } from '@app/core'
 import { VideoPlaylistService } from '../video-playlist/video-playlist.service'
-import { VideoPlaylistType } from '@shared/models'
-import { forkJoin } from 'rxjs'
-import { VideoPlaylistElement } from '@app/shared/video-playlist/video-playlist-element.model'
-import { VideoPlaylist } from '../video-playlist/video-playlist.model'
 import { VideoPlaylistElementCreate } from '../../../../../shared'
-import { VideoExistInPlaylist } from '@shared/models/videos/playlist/video-exist-in-playlist.model'
 
 @Component({
   selector: 'my-video-thumbnail',
@@ -36,6 +31,7 @@ export class VideoThumbnailComponent {
 
   load () {
     if (this.addedToWatchLater !== undefined) return
+    if (!this.isUserLoggedIn()) return
 
     this.videoPlaylistService.doesVideoExistInPlaylist(this.video.id)
       .subscribe(