! Ensure new playlist button focused after add to playlist prompt clo…

…sed while thumbnail link unselectable
PikachuEXE · Aug 29, 2023 · 454763f · 454763f
1 parent 6d88279
commit 454763f
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 17 deletions.
diff --git a/src/renderer/components/ft-list-video/ft-list-video.js b/src/renderer/components/ft-list-video/ft-list-video.js
@@ -646,7 +646,7 @@ export default defineComponent({
 
         // `thumbnailLink` is a `router-link`
         // `focus()` can only be called on the actual element
-        this.$refs.thumbnailLink.$el.focus()
+        this.$refs.addToPlaylistIcon?.$el?.focus()
       }
     },
 

diff --git a/src/renderer/components/ft-list-video/ft-list-video.vue b/src/renderer/components/ft-list-video/ft-list-video.vue
@@ -12,9 +12,8 @@
       class="videoThumbnail"
     >
       <router-link
-        ref="thumbnailLink"
         class="thumbnailLink"
-        tabindex="0"
+        tabindex="-1"
         :to="{
           path: `/watch/${id}`,
           query: watchPageLinkQuery,
@@ -49,6 +48,7 @@
       <span class="playlistIcons">
         <ft-icon-button
           v-if="showPlaylists"
+          ref="addToPlaylistIcon"
           title="Add to playlist"
           :icon="['fas', 'plus']"
           class="addToPlaylistIcon"

diff --git a/src/renderer/scss-partials/_ft-list-item.scss b/src/renderer/scss-partials/_ft-list-item.scss
@@ -171,17 +171,6 @@ $watched-transition-duration: 0.5s;
       height: fit-content;
     }
 
-    // Show some buttons on hover only
-    .addToPlaylistIcon:not(.alwaysVisible) {
-      display: none;
-    }
-    // `:focus-within` means any child element is focused
-    &:hover, &:focus-within {
-      .addToPlaylistIcon {
-        display: inherit;
-      }
-    }
-
     .watchedProgressBar {
       align-self: flex-end;
       background-color: var(--primary-color);
@@ -340,20 +329,17 @@ $watched-transition-duration: 0.5s;
     &:hover .externalPlayerIcon,
     &:focus-within .addToPlaylistIcon:not(.alwaysVisible),
     &:focus-within .externalPlayerIcon {
-      visibility: visible;
       opacity: $thumbnail-overlay-opacity;
     }
 
     &:hover .optionsButton,
     &:focus-within .optionsButton {
-      visibility: visible;
       opacity: 1;
     }
 
     .addToPlaylistIcon:not(.alwaysVisible),
     .externalPlayerIcon,
     .optionsButton {
-      visibility: hidden;
       opacity: 0;
       transition: visibility 0s, opacity 0.2s linear;
     }