fix: hover slots

jellyfin · Jan 26, 2023 · 64e1112 · 64e1112
1 parent 4c5ccee
commit 64e1112
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 58 deletions.
diff --git a/frontend/src/components/Layout/Backdrop.vue b/frontend/src/components/Layout/Backdrop.vue
@@ -1,11 +1,9 @@
 <template>
-  <div>
-    <v-fade-transition>
-      <div v-if="blurhash" :key="`backdrop-${blurhash}`" class="backdrop">
-        <blurhash-canvas :hash="blurhash" :width="32" :height="32" />
-      </div>
-    </v-fade-transition>
-  </div>
+  <v-fade-transition>
+    <div v-if="blurhash" :key="`backdrop-${blurhash}`" class="backdrop">
+      <blurhash-canvas :hash="blurhash" :width="32" :height="32" />
+    </div>
+  </v-fade-transition>
 </template>
 
 <script setup lang="ts">

diff --git a/frontend/src/components/Playback/DraggableQueue.vue b/frontend/src/components/Playback/DraggableQueue.vue
@@ -1,51 +1,49 @@
 <template>
   <v-list-group class="list-group">
     <draggable v-model="queue" v-bind="dragOptions" class="list-draggable">
-      <v-hover
-        v-for="(item, index) in queue"
-        :key="`${item.Id}-${index}`"
-        v-slot="{ hover }"
-        ref="listItems">
-        <v-list-item @click="onClick(index)">
-          <v-list-item-action
-            v-if="!hover"
-            class="list-group-item d-flex justify-center d-flex transition"
-            :class="{ 'text-primary font-weight-bold': isPlaying(index) }">
-            {{ index + 1 }}
-          </v-list-item-action>
-          <v-list-item-action v-else class="justify-center d-flex">
-            <v-icon>
-              <i-mdi-drag-horizontal />
-            </v-icon>
-          </v-list-item-action>
-          <v-avatar class="list-group-item">
-            <blurhash-image :item="item" />
-          </v-avatar>
-
-          <v-list-item-title
-            :class="{
-              'text-primary font-weight-bold': isPlaying(index)
-            }"
-            class="text-truncate ml-2 list-group-item transition">
-            {{ item.Name }}
-          </v-list-item-title>
-          <v-list-item-subtitle
-            v-if="getArtists(item)"
-            class="ml-2 list-group-item transition"
-            :class="{
-              'text-primary font-weight-bold': isPlaying(index)
-            }">
-            {{ getArtists(item) }}
-          </v-list-item-subtitle>
-
-          <v-list-item-action v-hide="isPlaying(index)">
-            <like-button :item="item" />
-          </v-list-item-action>
-          <v-list-item-action class="mr-2">
-            <item-menu :item="item" queue />
-          </v-list-item-action>
-        </v-list-item>
-      </v-hover>
+      <template v-for="(item, index) in queue" :key="`${item.Id}-${index}`">
+        <v-hover v-slot="{ isHovering, props: hoverProps }" ref="listItems">
+          <v-list-item v-bind="hoverProps" @click="onClick(index)">
+            <v-list-item-action
+              v-if="!isHovering"
+              class="list-group-item d-flex justify-center d-flex transition"
+              :class="{ 'text-primary font-weight-bold': isPlaying(index) }">
+              {{ index + 1 }}
+            </v-list-item-action>
+            <v-list-item-action v-else class="justify-center d-flex">
+              <v-icon>
+                <i-mdi-drag-horizontal />
+              </v-icon>
+            </v-list-item-action>
+            <v-avatar class="list-group-item">
+              <blurhash-image :item="item" />
+            </v-avatar>
+
+            <v-list-item-title
+              :class="{
+                'text-primary font-weight-bold': isPlaying(index)
+              }"
+              class="text-truncate ml-2 list-group-item transition">
+              {{ item.Name }}
+            </v-list-item-title>
+            <v-list-item-subtitle
+              v-if="getArtists(item)"
+              class="ml-2 list-group-item transition"
+              :class="{
+                'text-primary font-weight-bold': isPlaying(index)
+              }">
+              {{ getArtists(item) }}
+            </v-list-item-subtitle>
+
+            <v-list-item-action v-hide="isPlaying(index)">
+              <like-button :item="item" />
+            </v-list-item-action>
+            <v-list-item-action class="mr-2">
+              <item-menu :item="item" queue />
+            </v-list-item-action>
+          </v-list-item>
+        </v-hover>
+      </template>
     </draggable>
   </v-list-group>
 </template>

diff --git a/frontend/src/components/Playback/TrackList.vue b/frontend/src/components/Playback/TrackList.vue
@@ -27,13 +27,14 @@
           </td>
         </tr>
         <template v-for="track in tracksOnDisc" :key="track.Id">
-          <v-hover v-slot="{ hover }">
+          <v-hover v-slot="{ isHovering, props: hoverProps }">
             <tr
               :class="{ 'text-primary': isPlaying(track) }"
+              v-bind="hoverProps"
               @dblclick="playTracks(track)">
               <td style="width: 4em" class="pr-0 text-center">
-                <span v-if="hover && !isPlaying(track)">
-                  <v-btn small icon @click="playTracks(track)">
+                <span v-if="isHovering && !isPlaying(track)">
+                  <v-btn size="small" icon @click="playTracks(track)">
                     <v-icon>
                       <i-mdi-play-circle-outline />
                     </v-icon>
@@ -69,7 +70,7 @@
                     </template>
                   </div>
                   <v-spacer />
-                  <item-menu v-show="hover" :item="item" />
+                  <item-menu v-show="isHovering" :item="item" />
                 </div>
               </td>
               <td class="text-center">

diff --git a/frontend/src/components/Users/UserCard.vue b/frontend/src/components/Users/UserCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <v-hover v-slot="{ isHovering, props }">
+  <v-hover v-slot="{ isHovering, props: hoverProps }">
     <div
       class="ma-2 d-flex flex-column pointer"
-      v-bind="props"
+      v-bind="hoverProps"
       @click="$emit('connect', user)">
       <v-btn
         :active="isHovering"