feat: add transitions, track mixing, and voiceover controls

1 files changed, 33 insertions, 30 deletions

diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index aa14dfbd..35faf7e8 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -1,30 +1,33 @@
-"use client";

-

-import * as React from "react";

-import { Slider as SliderPrimitive } from "radix-ui";

-

-import { cn } from "@/utils/ui";

-

-const Slider = React.forwardRef<

-	React.ElementRef<typeof SliderPrimitive.Root>,

-	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {

-		className?: string;

-	}

->(({ className, ...props }, ref) => (

-	<SliderPrimitive.Root

-		ref={ref}

-		className={cn(

-			"relative flex w-full touch-none items-center select-none",

-			className,

-		)}

-		{...props}

-	>

-		<SliderPrimitive.Track className="bg-accent relative h-1.5 w-full grow overflow-hidden rounded-full">

-			<SliderPrimitive.Range className="bg-primary absolute h-full" />

-		</SliderPrimitive.Track>

-		<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />

-	</SliderPrimitive.Root>

-));

-Slider.displayName = SliderPrimitive.Root.displayName;

-

-export { Slider };

+"use client";
+
+import * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+
+import { cn } from "@/utils/ui";
+
+const Slider = React.forwardRef<
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+		className?: string;
+	}
+>(({ className, ...props }, ref) => (
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none items-center select-none",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="bg-accent relative h-1.5 w-full grow overflow-hidden rounded-full">
+			<SliderPrimitive.Range className="bg-primary absolute h-full" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb
+			aria-label={props["aria-label"]}
+			className="border-primary/50 bg-background focus-visible:ring-ring block size-4 rounded-full border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+		/>
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };