From 5e4c075340945aab916d7bde7f14e825453ee970 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 19 Apr 2024 14:47:14 -0600
Subject: [PATCH] Make no thumb slider height dynamic

---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 5 +++--
 web/src/components/ui/slider.tsx                     | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index a7968075d..0767933b2 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -520,6 +520,7 @@ export function VideoPreview({
   const onStopManualSeek = useCallback(() => {
     setTimeout(() => {
       setIgnoreClick(false);
+      setHoverTimeout(undefined);
 
       if (isSafari || (isFirefox && isMobile)) {
         setManualPlayback(true);
@@ -565,7 +566,7 @@ export function VideoPreview({
       {showProgress && (
         <NoThumbSlider
           ref={sliderRef}
-          className="absolute inset-x-0 bottom-0 z-30"
+          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${hoverTimeout != undefined ? "h-4" : "h-2"}`}
           value={[progress]}
           onValueChange={onManualSeek}
           onValueCommit={onStopManualSeek}
@@ -740,7 +741,7 @@ export function InProgressPreview({
       {showProgress && (
         <NoThumbSlider
           ref={sliderRef}
-          className="absolute inset-x-0 bottom-0 z-30"
+          className={`absolute inset-x-0 bottom-0 z-30 cursor-col-resize ${manualFrame ? "h-4" : "h-2"}`}
           value={[key]}
           onValueChange={onManualSeek}
           onValueCommit={onStopManualSeek}
diff --git a/web/src/components/ui/slider.tsx b/web/src/components/ui/slider.tsx
index 8a3e93747..1dde1df67 100644
--- a/web/src/components/ui/slider.tsx
+++ b/web/src/components/ui/slider.tsx
@@ -55,7 +55,7 @@ const NoThumbSlider = React.forwardRef<
     )}
     {...props}
   >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
+    <SliderPrimitive.Track className="relative h-full w-full grow overflow-hidden rounded-full">
       <SliderPrimitive.Range className="absolute h-full bg-selected" />
     </SliderPrimitive.Track>
     <SliderPrimitive.Thumb className="block h-4 w-16 rounded-full bg-transparent -translate-y-[50%] ring-offset-transparent focus-visible:outline-none focus-visible:ring-transparent disabled:pointer-events-none disabled:opacity-50 cursor-col-resize" />