@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/components/media-player-seek.tsx

@@ -0,0 +1,168 @@
+"use client"
+
+import { Slider } from "@rp/ui/components/slider"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { formatTime } from "../lib/format-time"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerSeekProps {
+	className?: string
+	disabled?: boolean
+	withTime?: boolean
+	withoutTooltip?: boolean
+	tooltipTimeVariant?: "current" | "remaining" | "duration"
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerSeek({
+	className,
+	disabled = false,
+	withTime = true,
+	withoutTooltip = false,
+	tooltipTimeVariant = "current",
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerSeekProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+	const buffered = useMediaSelector((state) => state.buffered)
+	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
+
+	const [isDragging, setIsDragging] = React.useState(false)
+	const [previewTime, setPreviewTime] = React.useState<number | null>(null)
+
+	const seekableStart = 0
+	const seekableEnd = duration || 0
+	const progress = seekableEnd > 0 ? (currentTime / seekableEnd) * 100 : 0
+
+	// Calculate buffered ranges
+	const bufferedRanges = React.useMemo(() => {
+		if (!buffered || !seekableEnd) return []
+
+		const ranges: Array<{ start: number; end: number }> = []
+		for (let i = 0; i < buffered.length; i++) {
+			const start = (buffered.start(i) / seekableEnd) * 100
+			const end = (buffered.end(i) / seekableEnd) * 100
+			ranges.push({ start, end })
+		}
+		return ranges
+	}, [buffered, seekableEnd])
+
+	const handleValueChange = React.useCallback(
+		(values: number[]) => {
+			const time = values[0] || 0
+			setPreviewTime(time)
+
+			if (isDragging) {
+				dispatch({
+					type: MediaActionTypes.SEEK,
+					detail: time
+				})
+			}
+		},
+		[dispatch, isDragging]
+	)
+
+	const handleValueCommit = React.useCallback(
+		(values: number[]) => {
+			const time = values[0]
+			setIsDragging(false)
+			setPreviewTime(null)
+
+			dispatch({
+				type: MediaActionTypes.SEEK,
+				detail: time
+			})
+		},
+		[dispatch]
+	)
+
+	const handlePointerDown = React.useCallback(() => {
+		setIsDragging(true)
+	}, [])
+
+	const getTooltipTime = React.useCallback(
+		(time: number) => {
+			switch (tooltipTimeVariant) {
+				case "remaining":
+					return formatTime(Math.max(0, seekableEnd - time))
+				case "duration":
+					return formatTime(seekableEnd)
+				default:
+					return formatTime(time)
+			}
+		},
+		[tooltipTimeVariant, seekableEnd]
+	)
+
+	const sliderProps = {
+		"aria-controls": context.mediaId,
+		"aria-valuetext": `${formatTime(currentTime)} of ${formatTime(duration)}`,
+		"data-slot": "media-player-seek",
+		disabled: isDisabled,
+		min: seekableStart,
+		max: seekableEnd,
+		step: 0.1,
+		value: [previewTime ?? currentTime],
+		onValueChange: handleValueChange,
+		onValueCommit: handleValueCommit,
+		onPointerDown: handlePointerDown,
+		className: cn(
+			"relative flex w-full touch-none select-none items-center",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className
+		),
+		...props
+	}
+
+	const sliderContent = (
+		<>
+			{/* Track */}
+			<div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+				{/* Buffered ranges */}
+				{bufferedRanges.map((range, index) => (
+					<div
+						key={index}
+						className="absolute h-full bg-secondary/60"
+						style={{
+							left: `${range.start}%`,
+							width: `${range.end - range.start}%`
+						}}
+					/>
+				))}
+
+				{/* Progress */}
+				<div className="h-full bg-primary transition-all" style={{ width: `${progress}%` }} />
+			</div>
+
+			{/* Thumb */}
+			<div
+				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"
+				style={{
+					transform: `translateX(-50%)`,
+					left: `${progress}%`
+				}}
+			/>
+		</>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, sliderProps as any, sliderContent)
+	}
+
+	return <Slider {...sliderProps}>{sliderContent}</Slider>
+}
+
+MediaPlayerSeek.displayName = "MediaPlayerSeek"

package/dist/src/components/media-player-time.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerTimeProps {
+    variant?: "current" | "duration" | "remaining" | "current-duration";
+    className?: string;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerTime({ variant, className, asChild, children, ...props }: MediaPlayerTimeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerTime {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-time.d.ts.map

package/dist/src/components/media-player-time.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-time.d.ts","sourceRoot":"","sources":["media-player-time.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAKzB,MAAM,WAAW,oBAAoB;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,kBAAkB,CAAA;IACnE,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC/B,OAA4B,EAC5B,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,2CA4EtB;yBAlFe,eAAe"}

package/dist/src/components/media-player-time.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMediaContext, useMediaSelector } from "../context/media-context";
+import { formatTime } from "../lib/format-time";
+import { cn } from "../lib/utils";
+export function MediaPlayerTime({ variant = "current-duration", className, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const currentTime = useMediaSelector((state) => state.currentTime);
+    const duration = useMediaSelector((state) => state.duration);
+    const times = React.useMemo(() => {
+        if (variant === "remaining") {
+            return {
+                remaining: formatTime(Math.max(0, duration - currentTime))
+            };
+        }
+        if (variant === "duration") {
+            return {
+                duration: formatTime(duration)
+            };
+        }
+        if (variant === "current") {
+            return {
+                current: formatTime(currentTime)
+            };
+        }
+        return {
+            current: formatTime(currentTime),
+            duration: formatTime(duration)
+        };
+    }, [variant, currentTime, duration]);
+    const timeProps = {
+        "data-slot": "media-player-time",
+        "data-variant": variant,
+        dir: context.dir,
+        className: cn("text-sm text-foreground/80 tabular-nums", className),
+        ...props
+    };
+    if (variant !== "current-duration") {
+        const content = times[variant];
+        if (asChild) {
+            const child = React.Children.only(children);
+            return React.cloneElement(child, timeProps, content);
+        }
+        return _jsx("time", { ...timeProps, children: content });
+    }
+    const content = (_jsxs(_Fragment, { children: [_jsx("time", { children: times.current }), _jsx("span", { className: "text-foreground/60", children: "/" }), _jsx("time", { children: times.duration })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, {
+            ...timeProps,
+            className: cn("flex items-center gap-1 text-foreground/80 text-sm", className)
+        }, content);
+    }
+    return (_jsx("div", { ...timeProps, className: cn("flex items-center gap-1 text-foreground/80 text-sm", className), children: content }));
+}
+MediaPlayerTime.displayName = "MediaPlayerTime";

package/dist/src/components/media-player-time.tsx

@@ -0,0 +1,99 @@
+"use client"
+
+import React from "react"
+import { useMediaContext, useMediaSelector } from "../context/media-context"
+import { formatTime } from "../lib/format-time"
+import { cn } from "../lib/utils"
+
+export interface MediaPlayerTimeProps {
+	variant?: "current" | "duration" | "remaining" | "current-duration"
+	className?: string
+	asChild?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerTime({
+	variant = "current-duration",
+	className,
+	asChild = false,
+	children,
+	...props
+}: MediaPlayerTimeProps) {
+	const context = useMediaContext()
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const duration = useMediaSelector((state) => state.duration)
+
+	const times = React.useMemo(() => {
+		if (variant === "remaining") {
+			return {
+				remaining: formatTime(Math.max(0, duration - currentTime))
+			}
+		}
+
+		if (variant === "duration") {
+			return {
+				duration: formatTime(duration)
+			}
+		}
+
+		if (variant === "current") {
+			return {
+				current: formatTime(currentTime)
+			}
+		}
+
+		return {
+			current: formatTime(currentTime),
+			duration: formatTime(duration)
+		}
+	}, [variant, currentTime, duration])
+
+	const timeProps = {
+		"data-slot": "media-player-time",
+		"data-variant": variant,
+		dir: context.dir,
+		className: cn("text-sm text-foreground/80 tabular-nums", className),
+		...props
+	}
+
+	if (variant !== "current-duration") {
+		const content = times[variant as keyof typeof times]
+
+		if (asChild) {
+			const child = React.Children.only(children) as React.ReactElement
+			return React.cloneElement(child, timeProps as any, content)
+		}
+
+		return <time {...timeProps}>{content}</time>
+	}
+
+	const content = (
+		<>
+			<time>{times.current}</time>
+			<span className="text-foreground/60">/</span>
+			<time>{times.duration}</time>
+		</>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(
+			child,
+			{
+				...timeProps,
+				className: cn("flex items-center gap-1 text-foreground/80 text-sm", className)
+			} as any,
+			content
+		)
+	}
+
+	return (
+		<div
+			{...timeProps}
+			className={cn("flex items-center gap-1 text-foreground/80 text-sm", className)}>
+			{content}
+		</div>
+	)
+}
+
+MediaPlayerTime.displayName = "MediaPlayerTime"

package/dist/src/components/media-player-tooltip.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface MediaPlayerTooltipProps {
+    children: React.ReactNode;
+    tooltip?: string;
+    shortcut?: string | string[];
+    delayDuration?: number;
+    sideOffset?: number;
+}
+export declare function MediaPlayerTooltip({ children, tooltip, shortcut, delayDuration, sideOffset }: MediaPlayerTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerTooltip {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-tooltip.d.ts.map

package/dist/src/components/media-player-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-tooltip.d.ts","sourceRoot":"","sources":["media-player-tooltip.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,uBAAuB;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IAC5B,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,UAAU,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,kBAAkB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,aAAa,EACb,UAAU,EACV,EAAE,uBAAuB,2CAmCzB;yBAzCe,kBAAkB"}

package/dist/src/components/media-player-tooltip.js

@@ -0,0 +1,14 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip";
+import { useMediaContext } from "../context/media-context";
+export function MediaPlayerTooltip({ children, tooltip, shortcut, delayDuration, sideOffset }) {
+    const context = useMediaContext();
+    if (context.withoutTooltip || !tooltip) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration;
+    const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset;
+    return (_jsxs(Tooltip, { delayDuration: tooltipDelayDuration, children: [_jsx(TooltipTrigger, { asChild: true, children: children }), _jsxs(TooltipContent, { sideOffset: tooltipSideOffset, className: "flex items-center gap-2 text-sm", children: [_jsx("span", { children: tooltip }), shortcut && (_jsx("div", { className: "flex items-center gap-1", children: Array.isArray(shortcut) ? (shortcut.map((key, index) => (_jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100", children: key }, index)))) : (_jsx("kbd", { className: "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100", children: shortcut })) }))] })] }));
+}
+MediaPlayerTooltip.displayName = "MediaPlayerTooltip";

package/dist/src/components/media-player-tooltip.tsx

@@ -0,0 +1,58 @@
+"use client"
+
+import { Tooltip, TooltipContent, TooltipTrigger } from "@rp/ui/components/tooltip"
+import React from "react"
+import { useMediaContext } from "../context/media-context"
+
+export interface MediaPlayerTooltipProps {
+	children: React.ReactNode
+	tooltip?: string
+	shortcut?: string | string[]
+	delayDuration?: number
+	sideOffset?: number
+}
+
+export function MediaPlayerTooltip({
+	children,
+	tooltip,
+	shortcut,
+	delayDuration,
+	sideOffset
+}: MediaPlayerTooltipProps) {
+	const context = useMediaContext()
+
+	if (context.withoutTooltip || !tooltip) {
+		return <>{children}</>
+	}
+
+	const tooltipDelayDuration = delayDuration ?? context.tooltipDelayDuration
+	const tooltipSideOffset = sideOffset ?? context.tooltipSideOffset
+
+	return (
+		<Tooltip delayDuration={tooltipDelayDuration}>
+			<TooltipTrigger asChild>{children}</TooltipTrigger>
+			<TooltipContent sideOffset={tooltipSideOffset} className="flex items-center gap-2 text-sm">
+				<span>{tooltip}</span>
+				{shortcut && (
+					<div className="flex items-center gap-1">
+						{Array.isArray(shortcut) ? (
+							shortcut.map((key, index) => (
+								<kbd
+									key={index}
+									className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100">
+									{key}
+								</kbd>
+							))
+						) : (
+							<kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-medium font-mono text-[10px] text-muted-foreground opacity-100">
+								{shortcut}
+							</kbd>
+						)}
+					</div>
+				)}
+			</TooltipContent>
+		</Tooltip>
+	)
+}
+
+MediaPlayerTooltip.displayName = "MediaPlayerTooltip"

package/dist/src/components/media-player-video.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+export interface MediaPlayerVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+    asChild?: boolean;
+}
+export declare function MediaPlayerVideo({ asChild, className, children, ...props }: MediaPlayerVideoProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerVideo {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-video.d.ts.map

package/dist/src/components/media-player-video.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-video.d.ts","sourceRoot":"","sources":["media-player-video.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACzF,OAAO,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,wBAAgB,gBAAgB,CAAC,EAChC,OAAe,EACf,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,qBAAqB,2CAsBvB;yBA3Be,gBAAgB"}

package/dist/src/components/media-player-video.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMediaContext } from "../context/media-context";
+export function MediaPlayerVideo({ asChild = false, className, children, ...props }) {
+    const context = useMediaContext();
+    if (asChild) {
+        // When asChild is true, clone the child element and add our props
+        const child = React.Children.only(children);
+        return React.cloneElement(child, {
+            ...props,
+            ref: context.mediaRef,
+            "data-slot": "media-player-video"
+        });
+    }
+    return (_jsx("video", { ref: context.mediaRef, "data-slot": "media-player-video", className: className, ...props, children: children }));
+}
+MediaPlayerVideo.displayName = "MediaPlayerVideo";

package/dist/src/components/media-player-video.tsx

@@ -0,0 +1,39 @@
+"use client"
+
+import React from "react"
+import { useMediaContext } from "../context/media-context"
+
+export interface MediaPlayerVideoProps extends React.VideoHTMLAttributes<HTMLVideoElement> {
+	asChild?: boolean
+}
+
+export function MediaPlayerVideo({
+	asChild = false,
+	className,
+	children,
+	...props
+}: MediaPlayerVideoProps) {
+	const context = useMediaContext()
+
+	if (asChild) {
+		// When asChild is true, clone the child element and add our props
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, {
+			...props,
+			ref: context.mediaRef,
+			"data-slot": "media-player-video"
+		} as any)
+	}
+
+	return (
+		<video
+			ref={context.mediaRef as React.RefObject<HTMLVideoElement>}
+			data-slot="media-player-video"
+			className={className}
+			{...props}>
+			{children}
+		</video>
+	)
+}
+
+MediaPlayerVideo.displayName = "MediaPlayerVideo"

package/dist/src/components/media-player-volume.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+export interface MediaPlayerVolumeProps {
+    className?: string;
+    disabled?: boolean;
+    asChild?: boolean;
+    expandable?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerVolume({ className, disabled, asChild, expandable, children, ...props }: MediaPlayerVolumeProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerVolume {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-volume.d.ts.map

package/dist/src/components/media-player-volume.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-volume.d.ts","sourceRoot":"","sources":["media-player-volume.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,WAAW,sBAAsB;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,iBAAiB,CAAC,EACjC,SAAS,EACT,QAAgB,EAChB,OAAe,EACf,UAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,sBAAsB,2CA0HxB;yBAjIe,iBAAiB"}

package/dist/src/components/media-player-volume.js

@@ -0,0 +1,88 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { Slider } from "@rp/ui/components/slider";
+import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+import { MediaPlayerTooltip } from "./media-player-tooltip";
+export function MediaPlayerVolume({ className, disabled = false, asChild = false, expandable = true, children, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const volume = useMediaSelector((state) => state.volume);
+    const isMuted = useMediaSelector((state) => state.isMuted);
+    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
+    // Determine volume level for icon
+    const volumeLevel = React.useMemo(() => {
+        if (isMuted || volume === 0)
+            return 0;
+        if (volume < 0.5)
+            return 1;
+        return 2;
+    }, [volume, isMuted]);
+    const handleMuteToggle = React.useCallback(() => {
+        dispatch({
+            type: MediaActionTypes.TOGGLE_MUTE
+        });
+    }, [dispatch]);
+    const handleVolumeChange = React.useCallback((values) => {
+        const newVolume = values[0];
+        dispatch({
+            type: MediaActionTypes.SET_VOLUME,
+            detail: newVolume
+        });
+    }, [dispatch]);
+    const handleVolumeCommit = React.useCallback((values) => {
+        const newVolume = values[0];
+        dispatch({
+            type: MediaActionTypes.SET_VOLUME,
+            detail: newVolume
+        });
+    }, [dispatch]);
+    const VolumeIcon = volumeLevel === 0 ? VolumeXIcon : volumeLevel === 1 ? Volume1Icon : Volume2Icon;
+    const containerProps = {
+        "data-disabled": isDisabled ? "" : undefined,
+        "data-slot": "media-player-volume",
+        className: cn("group flex items-center", expandable ? "gap-2 transition-all duration-200 hover:gap-3" : "gap-2", className),
+        ...props
+    };
+    const buttonProps = {
+        type: "button",
+        "aria-controls": context.mediaId,
+        "aria-label": isMuted ? "Unmute" : "Mute",
+        "aria-pressed": isMuted,
+        "data-slot": "media-player-volume-button",
+        "data-state": isMuted ? "muted" : "unmuted",
+        variant: "ghost",
+        size: "icon",
+        className: "size-8 shrink-0",
+        disabled: isDisabled,
+        onClick: handleMuteToggle
+    };
+    const sliderProps = {
+        "aria-controls": context.mediaId,
+        "aria-valuetext": `Volume ${Math.round(volume * 100)}%`,
+        "data-slot": "media-player-volume-slider",
+        min: 0,
+        max: 1,
+        step: 0.01,
+        value: [isMuted ? 0 : volume],
+        onValueChange: handleVolumeChange,
+        onValueCommit: handleVolumeCommit,
+        disabled: isDisabled,
+        className: cn("relative flex touch-none select-none items-center", expandable
+            ? "w-0 opacity-0 transition-all duration-200 group-hover:w-20 group-hover:opacity-100"
+            : "w-20", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50")
+    };
+    const content = (_jsxs("div", { ...containerProps, children: [_jsx(MediaPlayerTooltip, { tooltip: isMuted ? "Unmute" : "Mute", shortcut: "M", children: _jsx(Button, { ...buttonProps, children: _jsx(VolumeIcon, { className: "size-4" }) }) }), _jsxs(Slider, { ...sliderProps, children: [_jsx("div", { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: _jsx("div", { className: "h-full bg-primary transition-all", style: { width: `${(isMuted ? 0 : volume) * 100}%` } }) }), _jsx("div", { className: "block h-4 w-4 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", style: {
+                            transform: `translateX(-50%)`,
+                            left: `${(isMuted ? 0 : volume) * 100}%`
+                        } })] })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, containerProps, content);
+    }
+    return content;
+}
+MediaPlayerVolume.displayName = "MediaPlayerVolume";