Feat: Scroll queue item on mouse hover

music-assistant · Dec 25, 2024 · 51781de · 51781de
1 parent 55e3da9
commit 51781de
Showing 1 changed file with 11 additions and 3 deletions.
diff --git a/src/layouts/default/PlayerOSD/PlayerFullscreen.vue b/src/layouts/default/PlayerOSD/PlayerFullscreen.vue
@@ -262,15 +262,19 @@
                     :show-menu-btn="true"
                     @click.stop="(e) => openQueueItemMenu(e, item)"
                     @menu.stop="(e) => openQueueItemMenu(e, item)"
+                    @mouseenter="hoveredQueueIndex = index"
+                    @mouseleave="hoveredQueueIndex = -1"
                   >
                     <template #prepend>
                       <div class="media-thumb listitem-media-thumb">
                         <MediaItemThumb size="50" :item="item" />
                       </div>
                     </template>
                     <template #title>
-                      <!-- only scroll the currently playing track -->
-                      <MarqueeText :sync="playerMarqueeSync" :disabled="index != 0 || activeQueuePanel != 0">
+                      <!-- only scroll the currently playing track, or when hovered with a separete sync group -->
+                      <MarqueeText
+                        :sync="(index == 0 && activeQueuePanel == 0) ? playerMarqueeSync : hoveredMarqueeSync"
+                        :disabled="!((index == 0 && activeQueuePanel == 0) || hoveredQueueIndex == index)">
                         {{ item.name }}
                       </MarqueeText>
                     </template>
@@ -279,7 +283,9 @@
                         <span style="white-space: nowrap" class="pr-1">
                           {{ formatDuration(item.duration) }} |
                         </span>
-                        <MarqueeText :sync="playerMarqueeSync" :disabled="index != 0 || activeQueuePanel != 0">
+                        <MarqueeText
+                          :sync="(index == 0 && activeQueuePanel == 0) ? playerMarqueeSync : hoveredMarqueeSync"
+                          :disabled="!((index == 0 && activeQueuePanel == 0) || hoveredQueueIndex == index)">
                           <span
                             v-if="
                               item.media_item &&
@@ -492,6 +498,8 @@ interface Props {
 const compProps = defineProps<Props>();
 
 const playerMarqueeSync = new MarqueeTextSync();
+const hoveredQueueIndex = ref(-1);
+const hoveredMarqueeSync = new MarqueeTextSync();
 
 // Local refs
 const queueItems = ref<QueueItem[]>([]);