From 8aa073b9768c57ba6efd9030808e6607261d6cd2 Mon Sep 17 00:00:00 2001
From: wvffle <funkwhale@wvffle.net>
Date: Mon, 25 Jul 2022 02:05:33 +0000
Subject: [PATCH] Add player seek progress bar

---
 front/src/components/audio/Player.vue         | 10 +++++++++-
 front/src/components/vui/list/VirtualItem.vue | 18 ------------------
 front/src/components/vui/list/VirtualList.vue | 10 +++++++++-
 front/src/style/components/_player.scss       | 15 +++++++++++----
 front/src/style/components/_queue.scss        |  2 +-
 5 files changed, 30 insertions(+), 25 deletions(-)
 delete mode 100644 front/src/components/vui/list/VirtualItem.vue

diff --git a/front/src/components/audio/Player.vue b/front/src/components/audio/Player.vue
index 6e2eee2e7..cdda270b6 100644
--- a/front/src/components/audio/Player.vue
+++ b/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">
diff --git a/front/src/components/vui/list/VirtualItem.vue b/front/src/components/vui/list/VirtualItem.vue
deleted file mode 100644
index 1ca9cc8cb..000000000
--- a/front/src/components/vui/list/VirtualItem.vue
+++ /dev/null
@@ -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>
diff --git a/front/src/components/vui/list/VirtualList.vue b/front/src/components/vui/list/VirtualList.vue
index 4e3946f4e..22b485426 100644
--- a/front/src/components/vui/list/VirtualList.vue
+++ b/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 {
diff --git a/front/src/style/components/_player.scss b/front/src/style/components/_player.scss
index 702e1ffaa..0673ff126 100644
--- a/front/src/style/components/_player.scss
+++ b/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 {
diff --git a/front/src/style/components/_queue.scss b/front/src/style/components/_queue.scss
index cba7b55ff..31534ae84 100644
--- a/front/src/style/components/_queue.scss
+++ b/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;
   }