Fix scrollToIndex

front/src/components/Queue.vue

@@ -83,19 +83,16 @@ const scrollToCurrent = (behavior: ScrollBehavior = 'smooth') => {
 }
 
 watchDebounced(currentTrack, () => scrollToCurrent(), { debounce: 100 })
-whenever(
-  () => store.state.ui.queueFocused,
-  async () => {
-    list.value?.scrollToIndex(currentIndex.value)
-    await nextTick()
-    requestAnimationFrame(() => scrollToCurrent('auto'))
-  }
-)
 
-onMounted(async () => {
-  await nextTick()
-  list.value?.scrollToIndex(currentIndex.value)
-})
+const scrollLoop = () => {
+  const visible = [...(list.value?.scroller.$_views.values() ?? [])].map(item => item.nr.index)
+  if (!visible.includes(currentIndex.value)) {
+    list.value?.scrollToIndex(currentIndex.value)
+    requestAnimationFrame(scrollLoop)
+  }
+}
+
+onMounted(scrollLoop)
 
 whenever(
   () => tracks.value.length === 0,
@@ -389,6 +386,8 @@ const reorderTracks = async (from: number, to: number) => {
           :component="QueueItem"
           :size="50"
           @reorder="reorderTracks"
+          @visible="scrollToCurrent('auto')"
+          @hidden="scrollLoop"
         >
           <template #default="{ index, item, classList }">
             <queue-item

front/src/components/vui/list/VirtualList.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import type { MaybeElementRef, MaybeElement } from '@vueuse/core'
-
-import { useMouse, useCurrentElement, useResizeObserver, useRafFn, useElementByPoint } from '@vueuse/core'
+import { useMouse, useCurrentElement, useRafFn, useElementByPoint } from '@vueuse/core'
 import { ref, watchEffect, reactive } from 'vue'
 
 // @ts-expect-error no typings
@@ -11,6 +9,8 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 interface Emits {
   (e: 'reorder', from: number, to: number): void
+  (e: 'visible'): void
+  (e: 'hidden'): void
 }
 
 interface Props {
@@ -133,14 +133,11 @@ watchEffect(() => {
 })
 
 const el = useCurrentElement()
-useResizeObserver(el as unknown as MaybeElementRef<MaybeElement>, ([entry]) => {
-  const height = entry.borderBoxSize?.[0]?.blockSize ?? 0
-
-  if (height !== 0) {
-    containerSize.top = (entry.target as HTMLElement).offsetTop
-    containerSize.bottom = height + containerSize.top
-  }
-})
+const resize = () => {
+  const element = el.value as HTMLElement
+  containerSize.top = element.offsetTop
+  containerSize.bottom = element.offsetHeight + containerSize.top
+}
 
 let lastDate = +new Date()
 const { resume, pause } = useRafFn(() => {
@@ -156,9 +153,9 @@ const { resume, pause } = useRafFn(() => {
 }, { immediate: false })
 
 const virtualList = ref()
-window.vl = virtualList
 defineExpose({
   scrollToIndex: (index: number) => virtualList.value?.scrollToItem(index),
+  scroller: virtualList,
   cleanup
 })
 </script>
@@ -174,6 +171,9 @@ defineExpose({
       @mousedown="onMousedown"
       @touchstart="onMousedown"
       @touchmove="onTouchmove"
+      @resize="resize"
+      @visible="emit('visible')"
+      @hidden="emit('hidden')"
     >
       <slot
         :class-list="[draggedItem && hoveredIndex === index && `drop-${position}`, 'drag-item']"

front/src/style/components/_queue.scss

@@ -307,7 +307,7 @@
 
         .virtual-list {
           height: 100%;
-          overflow-y: auto;
+          overflow-y: scroll;
           padding-bottom: 2rem;
         }
       }