Add player seek progress bar

front/src/components/audio/Player.vue

@@ -7,6 +7,7 @@ import TrackPlaylistIcon from '~/components/playlists/TrackPlaylistIcon.vue'
 import onKeyboardShortcut from '~/composables/onKeyboardShortcut'
 import { computed, ref } from 'vue'
 import { useGettext } from 'vue3-gettext'
+import { useMouse, useWindowSize } from '@vueuse/core'
 import useQueue from '~/composables/audio/useQueue'
 import usePlayer from '~/composables/audio/usePlayer'
 
@@ -95,9 +96,12 @@ const switchTab = () => {
 
 const progressBar = ref()
 const touchProgress = (event: MouseEvent) => {
-  const time = ((event.clientX - (event.target as Element).getBoundingClientRect().left) / progressBar.value.offsetWidth) * duration.value
+  const time = ((event.clientX - ((event.target as Element).closest('.progress')?.getBoundingClientRect().left ?? 0)) / progressBar.value.offsetWidth) * duration.value
   currentTime.value = time
 }
+
+const { x } = useMouse()
+const { width: screenWidth } = useWindowSize()
 </script>
 
 <template>
@@ -132,6 +136,10 @@ const touchProgress = (event: MouseEvent) => {
           class="position bar"
           :style="{ 'transform': `translateX(${progress - 100}%)` }"
         />
+        <div
+          class="seek bar"
+          :style="{ 'transform': `translateX(${x / screenWidth * 100 - 100}%)` }"
+        />
       </div>
       <div class="controls-row">
         <div class="controls track-controls queue-not-focused desktop-and-up">

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

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-interface Props {
-  component: unknown
-  index: number
-  dragClassHandler: (index: number) => string
-}
-
-defineProps<Props>()
-</script>
-
-<template>
-  <Component
-    :is="component"
-    :class="dragClassHandler(index)"
-    :index="index"
-    :data-index="index"
-  />
-</template>

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

@@ -189,7 +189,7 @@ defineExpose({
   </div>
 </template>
 
-<style>
+<style lang="scss">
 .drag-container {
   position: relative;
 }
@@ -202,11 +202,19 @@ defineExpose({
 .drop-before {
   box-shadow: 0 -1px 0 var(--vibrant-color),
         inset 0  1px 0 var(--vibrant-color);
+
+  &:last-child {
+    box-shadow: inset 0 2px 0 var(--vibrant-color);
+  }
 }
 
 .drop-after {
   box-shadow: 0  1px 0 var(--vibrant-color),
         inset 0 -1px 0 var(--vibrant-color);
+
+  &:last-child {
+    box-shadow: inset 0 -2px 0 var(--vibrant-color);
+  }
 }
 
 .drag-ghost {

front/src/style/components/_player.scss

@@ -49,13 +49,20 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: scaleX(0);
+    transform: translateX(-100%);
     transform-origin: top left;
     will-change: transform;
-  }
-
-  .ui.progress .buffer.bar {
     position: absolute;
+
+    &.seek {
+      background: var(--player-color);
+      opacity: 0;
+      transition: opacity .2s ease;
+      mix-blend-mode: overlay;
+    }
+  }
+  .ui.progress:hover .bar.seek {
+    opacity: 0.4;
   }
 
   @keyframes MOVE-BG {

front/src/style/components/_queue.scss

@@ -158,7 +158,7 @@
   .ui.progress .bar {
     transition: none;
     width: 100%;
-    transform: scaleX(0);
+    transform: translateX(-100%);
     transform-origin: top left;
     will-change: transform;
   }