@therealtinhtute/baroiplayer 1.0.5 → 1.0.7

package/src/components/media-player-fullscreen.js

@@ -1,68 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@rp/ui/components/button";
-import { Maximize2Icon, Minimize2Icon } from "lucide-react";
-import React from "react";
-import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
-import { MediaPlayerTooltip } from "./media-player-tooltip";
-export function MediaPlayerFullscreen({ className, disabled = false, asChild = false, children, ...props }) {
-    const context = useMediaContext();
-    const dispatch = useMediaDispatch();
-    const isFullscreen = useMediaSelector((state) => state.isFullscreen);
-    const isDisabled = disabled || useMediaSelector((state) => state.error !== null);
-    const handleClick = React.useCallback((event) => {
-        event.preventDefault();
-        if (isDisabled)
-            return;
-        dispatch({
-            type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
-        });
-    }, [dispatch, isFullscreen, isDisabled]);
-    // Set up fullscreen API event listeners
-    React.useEffect(() => {
-        const handleFullscreenChange = () => {
-            const isCurrentlyFullscreen = !!document.fullscreenElement;
-            dispatch({
-                type: isCurrentlyFullscreen
-                    ? MediaActionTypes.ENTER_FULLSCREEN
-                    : MediaActionTypes.EXIT_FULLSCREEN
-            });
-        };
-        document.addEventListener("fullscreenchange", handleFullscreenChange);
-        return () => {
-            document.removeEventListener("fullscreenchange", handleFullscreenChange);
-        };
-    }, [dispatch]);
-    // Handle actual fullscreen API calls
-    React.useEffect(() => {
-        const rootElement = context.rootRef.current;
-        if (!rootElement)
-            return;
-        if (isFullscreen && !document.fullscreenElement) {
-            rootElement.requestFullscreen?.().catch(console.error);
-        }
-        else if (!isFullscreen && document.fullscreenElement) {
-            document.exitFullscreen?.().catch(console.error);
-        }
-    }, [isFullscreen, context.rootRef]);
-    const buttonProps = {
-        type: "button",
-        "aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
-        "data-disabled": isDisabled ? "" : undefined,
-        "data-slot": "media-player-fullscreen",
-        "data-state": isFullscreen ? "fullscreen" : "inline",
-        disabled: isDisabled,
-        variant: "ghost",
-        size: "icon",
-        className: "size-8",
-        onClick: handleClick,
-        ...props
-    };
-    const content = isFullscreen ? (_jsx(Minimize2Icon, { className: "size-4" })) : (_jsx(Maximize2Icon, { className: "size-4" }));
-    if (asChild) {
-        const child = React.Children.only(children);
-        return React.cloneElement(child, buttonProps, content);
-    }
-    return (_jsx(MediaPlayerTooltip, { tooltip: isFullscreen ? "Exit fullscreen" : "Enter fullscreen", shortcut: "F", children: _jsx(Button, { ...buttonProps, children: content }) }));
-}
-MediaPlayerFullscreen.displayName = "MediaPlayerFullscreen";

package/src/components/media-player-hls.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { MediaPlayerRoot } from "./media-player-root";
-import { VideoJSAdapter } from "../adapters/videojs-adapter";
-import { MediaPlayerLoading } from "./media-player-loading";
-import { MediaPlayerError } from "./media-player-error";
-import { useMediaSelector } from "../context/media-context";
-import { cn } from "../lib/utils";
-import "../styles/videojs.css"; // Import Video.js styles
-function MediaPlayerHLSContent({ sources, poster, textTracks = [], showControls = true, customControls, hlsConfig, enableQualitySelector = true, enableSubtitles = true, containerClassName, videoClassName, onPlayerReady, onPlayerError }) {
-    const isLoading = useMediaSelector(state => state.isLoading);
-    const isBuffering = useMediaSelector(state => state.isBuffering);
-    const error = useMediaSelector(state => state.error);
-    return (_jsxs("div", { className: cn("relative h-full w-full", containerClassName), children: [_jsx(VideoJSAdapter, { sources: sources, poster: poster, textTracks: textTracks, controls: true, autoplay: false, muted: true, preload: "auto", className: videoClassName, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, onReady: onPlayerReady, onError: onPlayerError }), (isLoading || isBuffering) && _jsx(MediaPlayerLoading, {}), error && _jsx(MediaPlayerError, { children: error })] }));
-}
-export function MediaPlayerHLS(props) {
-    const { sources, poster, textTracks, showControls, customControls, hlsConfig, enableQualitySelector, enableSubtitles, containerClassName, videoClassName, onPlayerReady, onPlayerError, ...rootProps } = props;
-    return (_jsx(MediaPlayerRoot, { ...rootProps, children: _jsx(MediaPlayerHLSContent, { sources: sources, poster: poster, textTracks: textTracks, showControls: showControls, customControls: customControls, hlsConfig: hlsConfig, enableQualitySelector: enableQualitySelector, enableSubtitles: enableSubtitles, containerClassName: containerClassName, videoClassName: videoClassName, onPlayerReady: onPlayerReady, onPlayerError: onPlayerError }) }));
-}
-MediaPlayerHLS.displayName = "MediaPlayerHLS";

package/src/components/media-player-loading.js

@@ -1,53 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Loader2Icon } from "lucide-react";
-import React from "react";
-import { useMediaSelector } from "../context/media-context";
-import { cn } from "../lib/utils";
-export function MediaPlayerLoading({ className, delayMs = 300, asChild = false, children, ...props }) {
-    const isLoading = useMediaSelector((state) => state.isLoading);
-    const [shouldRender, setShouldRender] = React.useState(false);
-    const timeoutRef = React.useRef(undefined);
-    React.useEffect(() => {
-        if (timeoutRef.current) {
-            clearTimeout(timeoutRef.current);
-            timeoutRef.current = undefined;
-        }
-        if (isLoading) {
-            if (delayMs > 0) {
-                timeoutRef.current = setTimeout(() => {
-                    setShouldRender(true);
-                    timeoutRef.current = undefined;
-                }, delayMs);
-            }
-            else {
-                setShouldRender(true);
-            }
-        }
-        else {
-            setShouldRender(false);
-        }
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-                timeoutRef.current = undefined;
-            }
-        };
-    }, [isLoading, delayMs]);
-    if (!shouldRender)
-        return null;
-    const loadingProps = {
-        role: "status",
-        "aria-live": "polite",
-        "data-slot": "media-player-loading",
-        className: cn("fade-in-0 zoom-in-95 pointer-events-none absolute inset-0 z-50 flex animate-in items-center justify-center duration-200", className),
-        ...props
-    };
-    const content = _jsx(Loader2Icon, { className: "size-8 animate-spin text-white" });
-    if (asChild) {
-        const child = React.Children.only(children);
-        return React.cloneElement(child, loadingProps, content);
-    }
-    return _jsx("div", { ...loadingProps, children: content });
-}
-MediaPlayerLoading.displayName = "MediaPlayerLoading";

package/src/components/media-player-play.js

@@ -1,44 +0,0 @@
-"use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Button } from "@rp/ui/components/button";
-import { PauseIcon, PlayIcon } from "lucide-react";
-import React from "react";
-import { MediaActionTypes, useMediaContext, useMediaDispatch, useMediaSelector } from "../context/media-context";
-import { MediaPlayerTooltip } from "./media-player-tooltip";
-export function MediaPlayerPlay({ className, asChild = false, children, ...props }) {
-    const context = useMediaContext();
-    const dispatch = useMediaDispatch();
-    const isPlaying = useMediaSelector((state) => state.isPlaying);
-    const disabled = useMediaSelector((state) => state.error !== null);
-    const handleClick = React.useCallback((event) => {
-        event.preventDefault();
-        const mediaElement = context.mediaRef.current;
-        if (!mediaElement || disabled)
-            return;
-        dispatch({
-            type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
-        });
-    }, [dispatch, context.mediaRef, isPlaying, disabled]);
-    const buttonProps = {
-        type: "button",
-        "aria-controls": context.mediaId,
-        "aria-label": isPlaying ? "Pause" : "Play",
-        "aria-pressed": isPlaying,
-        "data-disabled": disabled ? "" : undefined,
-        "data-slot": "media-player-play",
-        "data-state": isPlaying ? "playing" : "paused",
-        disabled,
-        variant: "ghost",
-        size: "icon",
-        className: "size-8 [&_svg:not([class*='fill-'])]:fill-current",
-        onClick: handleClick,
-        ...props
-    };
-    const content = isPlaying ? _jsx(PauseIcon, { className: "size-4" }) : _jsx(PlayIcon, { className: "size-4" });
-    if (asChild) {
-        const child = React.Children.only(children);
-        return React.cloneElement(child, buttonProps, content);
-    }
-    return (_jsx(MediaPlayerTooltip, { tooltip: isPlaying ? "Pause" : "Play", shortcut: "Space", children: _jsx(Button, { ...buttonProps, children: content }) }));
-}
-MediaPlayerPlay.displayName = "MediaPlayerPlay";

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

@@ -1,243 +0,0 @@
-"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/src/components/media-player-seek.js

@@ -1,92 +0,0 @@
-"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";

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

@@ -1,57 +0,0 @@
-"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/src/components/media-player-tooltip.js

@@ -1,14 +0,0 @@
-"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/src/components/media-player-video.js

@@ -1,18 +0,0 @@
-"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";