@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,243 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
+import { MediaProvider } from "../context/media-provider";
+import { useMediaGestures } from "../hooks/use-touch-gestures";
+import { useMobileOptimizations, useDeviceInfo } from "@rp/ui/hooks/use-mobile";
+import { cn } from "../lib/utils";
+// Utility function to compose refs
+function composeRefs(...refs) {
+    return (node) => {
+        refs.forEach((ref) => {
+            if (typeof ref === "function") {
+                ref(node);
+            }
+            else if (ref && typeof ref === "object") {
+                ;
+                ref.current = node;
+            }
+        });
+    };
+}
+// Internal MediaPlayer implementation
+function MediaPlayerImpl({ children, className, dir = "ltr", disabled = false, asChild = false, autoHide = true, enableGestures = true, enableMobileOptimizations = true, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError, onPipError, onFullscreenChange, ...props }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    const { isTouchDevice } = useDeviceInfo();
+    // Get state values
+    const isPlaying = useMediaSelector((state) => state.isPlaying);
+    const currentTime = useMediaSelector((state) => state.currentTime);
+    const volume = useMediaSelector((state) => state.volume);
+    const isMuted = useMediaSelector((state) => state.isMuted);
+    const error = useMediaSelector((state) => state.error);
+    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
+    const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture);
+    // Enable mobile optimizations
+    useMobileOptimizations();
+    // Gesture handling actions - React 19 compiler will optimize this
+    const gestureActions = {
+        onPlayPause: () => {
+            if (disabled)
+                return;
+            dispatch({
+                type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+            });
+        },
+        onSeek: (direction, amount) => {
+            if (disabled || !context.isVideo)
+                return;
+            const mediaElement = context.mediaRef.current;
+            if (!mediaElement)
+                return;
+            const newTime = direction === 'forward'
+                ? Math.min(mediaElement.duration || 0, currentTime + amount)
+                : Math.max(0, currentTime - amount);
+            dispatch({
+                type: MediaActionTypes.SEEK,
+                detail: newTime
+            });
+        },
+        onVolumeChange: (direction, amount) => {
+            if (disabled)
+                return;
+            const newVolume = direction === 'up'
+                ? Math.min(1, volume + amount)
+                : Math.max(0, volume - amount);
+            dispatch({
+                type: MediaActionTypes.SET_VOLUME,
+                detail: newVolume
+            });
+        },
+        onToggleFullscreen: () => {
+            if (disabled || !context.isVideo)
+                return;
+            dispatch({
+                type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+            });
+        },
+        onZoom: (scale) => {
+            // Handle video zoom - this could be implemented with CSS transforms
+            // For now, we'll just log it as a placeholder
+            console.log('Zoom gesture detected:', scale);
+        }
+    };
+    // Set up touch gestures for mobile devices
+    const { isGestureEnabled } = useMediaGestures(context.rootRef, enableGestures ? gestureActions : {});
+    // Keyboard event handler - React 19 compiler will optimize this
+    const handleKeyDown = (event) => {
+        if (disabled)
+            return;
+        const target = event.target;
+        const isInputElement = target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable;
+        if (isInputElement)
+            return;
+        const mediaElement = context.mediaRef.current;
+        if (!mediaElement)
+            return;
+        switch (event.code) {
+            case "Space":
+            case "KeyK":
+                event.preventDefault();
+                dispatch({
+                    type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+                });
+                break;
+            case "KeyF":
+                event.preventDefault();
+                dispatch({
+                    type: isFullscreen
+                        ? MediaActionTypes.EXIT_FULLSCREEN
+                        : MediaActionTypes.ENTER_FULLSCREEN
+                });
+                break;
+            case "KeyM":
+                event.preventDefault();
+                dispatch({
+                    type: MediaActionTypes.TOGGLE_MUTE
+                });
+                break;
+            case "ArrowLeft":
+                event.preventDefault();
+                if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: Math.max(0, currentTime - 10)
+                    });
+                }
+                break;
+            case "ArrowRight":
+                event.preventDefault();
+                if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: Math.min(mediaElement.duration || 0, currentTime + 10)
+                    });
+                }
+                break;
+            case "ArrowUp":
+                event.preventDefault();
+                dispatch({
+                    type: MediaActionTypes.SET_VOLUME,
+                    detail: Math.min(1, volume + 0.1)
+                });
+                break;
+            case "ArrowDown":
+                event.preventDefault();
+                dispatch({
+                    type: MediaActionTypes.SET_VOLUME,
+                    detail: Math.max(0, volume - 0.1)
+                });
+                break;
+        }
+    };
+    // Set up media element event listeners
+    React.useEffect(() => {
+        const mediaElement = context.mediaRef.current;
+        if (!mediaElement)
+            return;
+        const handlePlay = () => {
+            dispatch({ type: MediaActionTypes.PLAY });
+            onPlay?.();
+        };
+        const handlePause = () => {
+            dispatch({ type: MediaActionTypes.PAUSE });
+            onPause?.();
+        };
+        const handleEnded = () => {
+            dispatch({ type: MediaActionTypes.PAUSE });
+            onEnded?.();
+        };
+        const handleTimeUpdate = () => {
+            const time = mediaElement.currentTime;
+            dispatch({ type: MediaActionTypes.SET_CURRENT_TIME, detail: time });
+            onTimeUpdate?.(time);
+        };
+        const handleVolumeChange = () => {
+            const vol = mediaElement.volume;
+            const muted = mediaElement.muted;
+            dispatch({ type: MediaActionTypes.SET_VOLUME, detail: vol });
+            dispatch({ type: muted ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE });
+            onVolumeChange?.(vol);
+            onMuted?.(muted);
+        };
+        const handleLoadedMetadata = () => {
+            dispatch({ type: MediaActionTypes.SET_DURATION, detail: mediaElement.duration });
+            dispatch({ type: MediaActionTypes.SET_LOADING, detail: false });
+        };
+        const handleError = () => {
+            const errorMessage = "An error occurred while loading the media";
+            dispatch({ type: MediaActionTypes.SET_ERROR, detail: errorMessage });
+            onMediaError?.(errorMessage);
+        };
+        const handleLoadStart = () => {
+            dispatch({ type: MediaActionTypes.SET_LOADING, detail: true });
+        };
+        // Add event listeners
+        mediaElement.addEventListener("play", handlePlay);
+        mediaElement.addEventListener("pause", handlePause);
+        mediaElement.addEventListener("ended", handleEnded);
+        mediaElement.addEventListener("timeupdate", handleTimeUpdate);
+        mediaElement.addEventListener("volumechange", handleVolumeChange);
+        mediaElement.addEventListener("loadedmetadata", handleLoadedMetadata);
+        mediaElement.addEventListener("error", handleError);
+        mediaElement.addEventListener("loadstart", handleLoadStart);
+        return () => {
+            mediaElement.removeEventListener("play", handlePlay);
+            mediaElement.removeEventListener("pause", handlePause);
+            mediaElement.removeEventListener("ended", handleEnded);
+            mediaElement.removeEventListener("timeupdate", handleTimeUpdate);
+            mediaElement.removeEventListener("volumechange", handleVolumeChange);
+            mediaElement.removeEventListener("loadedmetadata", handleLoadedMetadata);
+            mediaElement.removeEventListener("error", handleError);
+            mediaElement.removeEventListener("loadstart", handleLoadStart);
+        };
+    }, [dispatch, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError]);
+    const rootProps = {
+        "aria-labelledby": context.labelId,
+        "aria-describedby": context.descriptionId,
+        "aria-disabled": disabled,
+        "data-disabled": disabled ? "" : undefined,
+        "data-slot": "media-player",
+        "data-state": isFullscreen ? "fullscreen" : "inline",
+        dir,
+        tabIndex: disabled ? -1 : 0,
+        className: cn("dark relative isolate flex flex-col overflow-hidden rounded-lg bg-background outline-none", "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", "[&_video]:relative [&_video]:object-contain", "data-[state=fullscreen]:[&_video]:size-full", "[:fullscreen_&]:flex [:fullscreen_&]:h-full [:fullscreen_&]:max-h-screen [:fullscreen_&]:flex-col [:fullscreen_&]:justify-between", 
+        // Mobile-first optimizations
+        isTouchDevice && [
+            "touch-manipulation", // Improves touch responsiveness
+            "select-none", // Prevents text selection during gestures
+            "overscroll-contain", // Prevents scroll chaining
+        ], 
+        // Enable hardware acceleration for smooth animations
+        "will-change-transform", "transform-gpu", className),
+        onKeyDown: handleKeyDown,
+        ...props
+    };
+    return (_jsx("div", { ref: composeRefs(context.rootRef), ...rootProps, children: children }));
+}
+// Main MediaPlayer component with provider
+export function MediaPlayerRoot(props) {
+    return (_jsx(MediaProvider, { children: _jsx(MediaPlayerImpl, { ...props }) }));
+}
+MediaPlayerRoot.displayName = "MediaPlayerRoot";

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

@@ -0,0 +1,340 @@
+"use client"
+
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { MediaProvider } from "../context/media-provider"
+import { useMediaGestures } from "../hooks/use-touch-gestures"
+import { useMobileOptimizations, useDeviceInfo } from "@rp/ui/hooks/use-mobile"
+import { cn } from "../lib/utils"
+
+// Utility function to compose refs
+function composeRefs<T>(...refs: Array<React.Ref<T> | undefined>) {
+	return (node: T) => {
+		refs.forEach((ref) => {
+			if (typeof ref === "function") {
+				ref(node)
+			} else if (ref && typeof ref === "object") {
+				;(ref as React.MutableRefObject<T>).current = node
+			}
+		})
+	}
+}
+
+// MediaPlayer root component props
+export interface MediaPlayerRootProps {
+	children: React.ReactNode
+	className?: string
+	dir?: "ltr" | "rtl"
+	disabled?: boolean
+	asChild?: boolean
+	autoHide?: boolean
+	tooltipDelayDuration?: number
+	tooltipSideOffset?: number
+	withoutTooltip?: boolean
+
+	// Mobile-first options
+	enableGestures?: boolean
+	enableMobileOptimizations?: boolean
+
+	// Media event handlers
+	onPlay?: () => void
+	onPause?: () => void
+	onEnded?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onVolumeChange?: (volume: number) => void
+	onMuted?: (muted: boolean) => void
+	onMediaError?: (error: string) => void
+	onPipError?: (error: Error) => void
+	onFullscreenChange?: (isFullscreen: boolean) => void
+}
+
+// Internal MediaPlayer implementation
+function MediaPlayerImpl({
+	children,
+	className,
+	dir = "ltr",
+	disabled = false,
+	asChild = false,
+	autoHide = true,
+	enableGestures = true,
+	enableMobileOptimizations = true,
+	onPlay,
+	onPause,
+	onEnded,
+	onTimeUpdate,
+	onVolumeChange,
+	onMuted,
+	onMediaError,
+	onPipError,
+	onFullscreenChange,
+	...props
+}: MediaPlayerRootProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+	const { isTouchDevice } = useDeviceInfo()
+
+	// Get state values
+	const isPlaying = useMediaSelector((state) => state.isPlaying)
+	const currentTime = useMediaSelector((state) => state.currentTime)
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
+	const error = useMediaSelector((state) => state.error)
+	const isFullscreen = useMediaSelector((state) => state.isFullscreen)
+	const isPictureInPicture = useMediaSelector((state) => state.isPictureInPicture)
+
+	// Enable mobile optimizations
+	useMobileOptimizations()
+
+	// Gesture handling actions - React 19 compiler will optimize this
+	const gestureActions = {
+		onPlayPause: () => {
+			if (disabled) return
+			dispatch({
+				type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+			})
+		},
+		onSeek: (direction: 'forward' | 'backward', amount: number) => {
+			if (disabled || !context.isVideo) return
+			const mediaElement = context.mediaRef.current
+			if (!mediaElement) return
+			
+			const newTime = direction === 'forward' 
+				? Math.min(mediaElement.duration || 0, currentTime + amount)
+				: Math.max(0, currentTime - amount)
+			
+			dispatch({
+				type: MediaActionTypes.SEEK,
+				detail: newTime
+			})
+		},
+		onVolumeChange: (direction: 'up' | 'down', amount: number) => {
+			if (disabled) return
+			const newVolume = direction === 'up'
+				? Math.min(1, volume + amount)
+				: Math.max(0, volume - amount)
+			
+			dispatch({
+				type: MediaActionTypes.SET_VOLUME,
+				detail: newVolume
+			})
+		},
+		onToggleFullscreen: () => {
+			if (disabled || !context.isVideo) return
+			dispatch({
+				type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+			})
+		},
+		onZoom: (scale: number) => {
+			// Handle video zoom - this could be implemented with CSS transforms
+			// For now, we'll just log it as a placeholder
+			console.log('Zoom gesture detected:', scale)
+		}
+	}
+
+		// Set up touch gestures for mobile devices
+		const { isGestureEnabled } = useMediaGestures(
+			context.rootRef as React.RefObject<HTMLElement>,
+			enableGestures ? gestureActions : {}
+		)
+
+	// Keyboard event handler - React 19 compiler will optimize this
+	const handleKeyDown = (event: React.KeyboardEvent) => {
+		if (disabled) return
+
+		const target = event.target as HTMLElement
+		const isInputElement =
+			target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.isContentEditable
+
+		if (isInputElement) return
+
+		const mediaElement = context.mediaRef.current
+		if (!mediaElement) return
+
+		switch (event.code) {
+			case "Space":
+			case "KeyK":
+				event.preventDefault()
+				dispatch({
+					type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+				})
+				break
+
+			case "KeyF":
+				event.preventDefault()
+				dispatch({
+					type: isFullscreen
+						? MediaActionTypes.EXIT_FULLSCREEN
+						: MediaActionTypes.ENTER_FULLSCREEN
+				})
+				break
+
+			case "KeyM":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.TOGGLE_MUTE
+				})
+				break
+
+			case "ArrowLeft":
+				event.preventDefault()
+				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: Math.max(0, currentTime - 10)
+					})
+				}
+				break
+
+			case "ArrowRight":
+				event.preventDefault()
+				if (context.isVideo && mediaElement instanceof HTMLVideoElement) {
+					dispatch({
+						type: MediaActionTypes.SEEK,
+						detail: Math.min(mediaElement.duration || 0, currentTime + 10)
+					})
+				}
+				break
+
+			case "ArrowUp":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.SET_VOLUME,
+					detail: Math.min(1, volume + 0.1)
+				})
+				break
+
+			case "ArrowDown":
+				event.preventDefault()
+				dispatch({
+					type: MediaActionTypes.SET_VOLUME,
+					detail: Math.max(0, volume - 0.1)
+				})
+				break
+		}
+	}
+
+	// Set up media element event listeners
+	React.useEffect(() => {
+		const mediaElement = context.mediaRef.current
+		if (!mediaElement) return
+
+		const handlePlay = () => {
+			dispatch({ type: MediaActionTypes.PLAY })
+			onPlay?.()
+		}
+
+		const handlePause = () => {
+			dispatch({ type: MediaActionTypes.PAUSE })
+			onPause?.()
+		}
+
+		const handleEnded = () => {
+			dispatch({ type: MediaActionTypes.PAUSE })
+			onEnded?.()
+		}
+
+		const handleTimeUpdate = () => {
+			const time = mediaElement.currentTime
+			dispatch({ type: MediaActionTypes.SET_CURRENT_TIME, detail: time })
+			onTimeUpdate?.(time)
+		}
+
+		const handleVolumeChange = () => {
+			const vol = mediaElement.volume
+			const muted = mediaElement.muted
+			dispatch({ type: MediaActionTypes.SET_VOLUME, detail: vol })
+			dispatch({ type: muted ? MediaActionTypes.MUTE : MediaActionTypes.UNMUTE })
+			onVolumeChange?.(vol)
+			onMuted?.(muted)
+		}
+
+		const handleLoadedMetadata = () => {
+			dispatch({ type: MediaActionTypes.SET_DURATION, detail: mediaElement.duration })
+			dispatch({ type: MediaActionTypes.SET_LOADING, detail: false })
+		}
+
+		const handleError = () => {
+			const errorMessage = "An error occurred while loading the media"
+			dispatch({ type: MediaActionTypes.SET_ERROR, detail: errorMessage })
+			onMediaError?.(errorMessage)
+		}
+
+		const handleLoadStart = () => {
+			dispatch({ type: MediaActionTypes.SET_LOADING, detail: true })
+		}
+
+		// Add event listeners
+		mediaElement.addEventListener("play", handlePlay)
+		mediaElement.addEventListener("pause", handlePause)
+		mediaElement.addEventListener("ended", handleEnded)
+		mediaElement.addEventListener("timeupdate", handleTimeUpdate)
+		mediaElement.addEventListener("volumechange", handleVolumeChange)
+		mediaElement.addEventListener("loadedmetadata", handleLoadedMetadata)
+		mediaElement.addEventListener("error", handleError)
+		mediaElement.addEventListener("loadstart", handleLoadStart)
+
+		return () => {
+			mediaElement.removeEventListener("play", handlePlay)
+			mediaElement.removeEventListener("pause", handlePause)
+			mediaElement.removeEventListener("ended", handleEnded)
+			mediaElement.removeEventListener("timeupdate", handleTimeUpdate)
+			mediaElement.removeEventListener("volumechange", handleVolumeChange)
+			mediaElement.removeEventListener("loadedmetadata", handleLoadedMetadata)
+			mediaElement.removeEventListener("error", handleError)
+			mediaElement.removeEventListener("loadstart", handleLoadStart)
+		}
+	}, [dispatch, onPlay, onPause, onEnded, onTimeUpdate, onVolumeChange, onMuted, onMediaError])
+
+	const rootProps = {
+		"aria-labelledby": context.labelId,
+		"aria-describedby": context.descriptionId,
+		"aria-disabled": disabled,
+		"data-disabled": disabled ? "" : undefined,
+		"data-slot": "media-player",
+		"data-state": isFullscreen ? "fullscreen" : "inline",
+		dir,
+		tabIndex: disabled ? -1 : 0,
+		className: cn(
+			"dark relative isolate flex flex-col overflow-hidden rounded-lg bg-background outline-none",
+			"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			"[&_video]:relative [&_video]:object-contain",
+			"data-[state=fullscreen]:[&_video]:size-full",
+			"[:fullscreen_&]:flex [:fullscreen_&]:h-full [:fullscreen_&]:max-h-screen [:fullscreen_&]:flex-col [:fullscreen_&]:justify-between",
+			// Mobile-first optimizations
+			isTouchDevice && [
+				"touch-manipulation", // Improves touch responsiveness
+				"select-none", // Prevents text selection during gestures
+				"overscroll-contain", // Prevents scroll chaining
+			],
+			// Enable hardware acceleration for smooth animations
+			"will-change-transform",
+			"transform-gpu",
+			className
+		),
+		onKeyDown: handleKeyDown,
+		...props
+	}
+
+	return (
+		<div ref={composeRefs(context.rootRef)} {...rootProps}>
+			{children}
+		</div>
+	)
+}
+
+// Main MediaPlayer component with provider
+export function MediaPlayerRoot(props: MediaPlayerRootProps) {
+	return (
+		<MediaProvider>
+			<MediaPlayerImpl {...props} />
+		</MediaProvider>
+	)
+}
+
+MediaPlayerRoot.displayName = "MediaPlayerRoot"

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

@@ -0,0 +1,15 @@
+import React from "react";
+export interface MediaPlayerSeekProps {
+    className?: string;
+    disabled?: boolean;
+    withTime?: boolean;
+    withoutTooltip?: boolean;
+    tooltipTimeVariant?: "current" | "remaining" | "duration";
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerSeek({ className, disabled, withTime, withoutTooltip, tooltipTimeVariant, asChild, children, ...props }: MediaPlayerSeekProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerSeek {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-seek.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-seek.d.ts","sourceRoot":"","sources":["media-player-seek.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,WAAW,oBAAoB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,kBAAkB,CAAC,EAAE,SAAS,GAAG,WAAW,GAAG,UAAU,CAAA;IACzD,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,eAAe,CAAC,EAC/B,SAAS,EACT,QAAgB,EAChB,QAAe,EACf,cAAsB,EACtB,kBAA8B,EAC9B,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,2CAqItB;yBA9Ie,eAAe"}

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

@@ -0,0 +1,92 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 function MediaPlayerSeek({ className, disabled = false, withTime = true, withoutTooltip = false, tooltipTimeVariant = "current", asChild = false, children, ...props }) {
+    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(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 = [];
+        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) => {
+        const time = values[0] || 0;
+        setPreviewTime(time);
+        if (isDragging) {
+            dispatch({
+                type: MediaActionTypes.SEEK,
+                detail: time
+            });
+        }
+    }, [dispatch, isDragging]);
+    const handleValueCommit = React.useCallback((values) => {
+        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) => {
+        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 = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: [bufferedRanges.map((range, index) => (_jsx("div", { className: "absolute h-full bg-secondary/60", style: {
+                            left: `${range.start}%`,
+                            width: `${range.end - range.start}%`
+                        } }, index))), _jsx("div", { className: "h-full bg-primary transition-all", style: { width: `${progress}%` } })] }), _jsx("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);
+        return React.cloneElement(child, sliderProps, sliderContent);
+    }
+    return _jsx(Slider, { ...sliderProps, children: sliderContent });
+}
+MediaPlayerSeek.displayName = "MediaPlayerSeek";