Refactor sliders

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -8,7 +8,6 @@ import React, {
 import { useApiHost } from "@/api";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { ReviewSegment } from "@/types/review";
-import { Slider } from "../ui/slider-no-thumb";
 import { getIconForLabel } from "@/utils/iconUtil";
 import TimeAgo from "../dynamic/TimeAgo";
 import useSWR from "swr";
@@ -23,6 +22,7 @@ import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import useContextMenu from "@/hooks/use-contextmenu";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
+import { NoThumbSlider } from "../ui/slider";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -543,7 +543,7 @@ function VideoPreview({
       >
         <source src={relevantPreview.src} type={relevantPreview.type} />
       </video>
-      <Slider
+      <NoThumbSlider
         ref={sliderRef}
         className="absolute inset-x-0 bottom-0 z-30"
         value={[progress]}
@@ -707,7 +707,7 @@ function InProgressPreview({
         src={`${apiHost}api/preview/${previewFrames[key]}/thumbnail.webp`}
         onLoad={handleLoad}
       />
-      <Slider
+      <NoThumbSlider
         ref={sliderRef}
         className="absolute inset-x-0 bottom-0 z-30"
         value={[key]}

web/src/components/player/VideoControls.tsx

@@ -16,8 +16,8 @@ import {
   MdVolumeOff,
   MdVolumeUp,
 } from "react-icons/md";
-import { Slider } from "../ui/slider-volume";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
+import { VolumeSlider } from "../ui/slider";
 
 type VideoControls = {
   volume?: boolean;
@@ -154,7 +154,7 @@ export default function VideoControls({
             }}
           />
           {video.muted == false && (
-            <Slider
+            <VolumeSlider
               className="w-20"
               value={[video.volume]}
               min={0}

web/src/components/ui/slider-no-thumb.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-
-import { cn } from "@/lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
-      <SliderPrimitive.Range className="absolute h-full bg-blue-500" />
-    </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" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

web/src/components/ui/slider-volume.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import * as SliderPrimitive from "@radix-ui/react-slider";
-
-import { cn } from "@/lib/utils";
-
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-muted">
-      <SliderPrimitive.Range className="absolute h-full bg-white" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-3 w-3 rounded-full bg-white ring-white focus:ring-white disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-));
-Slider.displayName = SliderPrimitive.Root.displayName;
-
-export { Slider };

web/src/components/ui/slider.tsx

@@ -23,4 +23,64 @@ const Slider = React.forwardRef<
 ))
 Slider.displayName = SliderPrimitive.Root.displayName
 
-export { Slider }
+const VolumeSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-1 w-full grow overflow-hidden rounded-full bg-muted">
+      <SliderPrimitive.Range className="absolute h-full bg-white" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-3 w-3 rounded-full bg-white ring-white focus:ring-white disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+));
+VolumeSlider.displayName = SliderPrimitive.Root.displayName;
+
+const NoThumbSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className,
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full">
+      <SliderPrimitive.Range className="absolute h-full bg-blue-500" />
+    </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" />
+  </SliderPrimitive.Root>
+));
+NoThumbSlider.displayName = SliderPrimitive.Root.displayName;
+
+const DualThumbSlider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative flex w-full touch-none select-none items-center",
+      className
+    )}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+  </SliderPrimitive.Root>
+))
+DualThumbSlider.displayName = SliderPrimitive.Root.displayName
+
+export { DualThumbSlider, Slider, NoThumbSlider, VolumeSlider }