@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

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

@@ -0,0 +1,85 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@rp/ui/components/button";
+import { AlertTriangleIcon, RefreshCcwIcon, RotateCcwIcon } from "lucide-react";
+import React from "react";
+import { useMediaContext, useMediaSelector } from "../context/media-context";
+import { cn } from "../lib/utils";
+export function MediaPlayerError({ error: errorProp, label, description, onRetry: onRetryProp, onReload: onReloadProp, className, asChild = false, children, ...props }) {
+    const context = useMediaContext();
+    const stateError = useMediaSelector((state) => state.error);
+    const error = errorProp || stateError;
+    const [actionState, setActionState] = React.useState({
+        retryPending: false,
+        reloadPending: false
+    });
+    const handleRetry = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, retryPending: true }));
+        requestAnimationFrame(() => {
+            const mediaElement = context.mediaRef.current;
+            if (!mediaElement) {
+                setActionState((prev) => ({ ...prev, retryPending: false }));
+                return;
+            }
+            if (onRetryProp) {
+                onRetryProp();
+            }
+            else {
+                const currentSrc = mediaElement.src;
+                if (currentSrc) {
+                    mediaElement.load();
+                }
+            }
+            setActionState((prev) => ({ ...prev, retryPending: false }));
+        });
+    }, [context.mediaRef, onRetryProp]);
+    const handleReload = React.useCallback(() => {
+        setActionState((prev) => ({ ...prev, reloadPending: true }));
+        requestAnimationFrame(() => {
+            if (onReloadProp) {
+                onReloadProp();
+            }
+            else {
+                window.location.reload();
+            }
+        });
+    }, [onReloadProp]);
+    const errorLabel = React.useMemo(() => {
+        if (label)
+            return label;
+        if (error instanceof Error) {
+            return "Media Error";
+        }
+        return "Playback Error";
+    }, [label, error]);
+    const errorDescription = React.useMemo(() => {
+        if (description)
+            return description;
+        if (error instanceof Error) {
+            return error.message;
+        }
+        if (typeof error === "string") {
+            return error;
+        }
+        return "An error occurred while loading the media";
+    }, [description, error]);
+    if (!error)
+        return null;
+    const errorProps = {
+        role: "alert",
+        "aria-describedby": `${context.mediaId}-error-description`,
+        "aria-labelledby": `${context.mediaId}-error-label`,
+        "aria-live": "assertive",
+        "data-slot": "media-player-error",
+        "data-state": "error",
+        className: cn("pointer-events-auto absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white backdrop-blur-sm", className),
+        ...props
+    };
+    const content = (_jsxs("div", { className: "flex flex-col items-center gap-4 p-6 text-center", children: [_jsx(AlertTriangleIcon, { className: "size-12 text-red-400" }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { id: `${context.mediaId}-error-label`, className: "font-semibold text-lg", children: errorLabel }), _jsx("p", { id: `${context.mediaId}-error-description`, className: "text-sm text-white/80", children: errorDescription })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsxs(Button, { variant: "outline", size: "sm", onClick: handleRetry, disabled: actionState.retryPending, children: [actionState.retryPending ? (_jsx(RefreshCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RefreshCcwIcon, { className: "mr-2 size-4" })), "Try again"] }), _jsxs(Button, { variant: "outline", size: "sm", onClick: handleReload, disabled: actionState.reloadPending, children: [actionState.reloadPending ? (_jsx(RotateCcwIcon, { className: "mr-2 size-4 animate-spin" })) : (_jsx(RotateCcwIcon, { className: "mr-2 size-4" })), "Reload page"] })] })] }));
+    if (asChild) {
+        const child = React.Children.only(children);
+        return React.cloneElement(child, errorProps, content);
+    }
+    return _jsx("div", { ...errorProps, children: content });
+}
+MediaPlayerError.displayName = "MediaPlayerError";

package/src/components/media-player-fullscreen.d.ts

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

package/src/components/media-player-fullscreen.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-fullscreen.d.ts","sourceRoot":"","sources":["media-player-fullscreen.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,0BAA0B;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,qBAAqB,CAAC,EACrC,SAAS,EACT,QAAgB,EAChB,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,0BAA0B,2CAgF5B;yBAtFe,qBAAqB"}

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

@@ -0,0 +1,68 @@
+"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.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+import { MediaPlayerRootProps } from "./media-player-root";
+import { VideoSource, TextTrack } from "../adapters/videojs-adapter";
+import "../styles/videojs.css";
+export interface MediaPlayerHLSProps extends Omit<MediaPlayerRootProps, "children"> {
+    sources: VideoSource[];
+    poster?: string;
+    textTracks?: TextTrack[];
+    showControls?: boolean;
+    customControls?: React.ReactNode;
+    hlsConfig?: any;
+    enableQualitySelector?: boolean;
+    enableSubtitles?: boolean;
+    containerClassName?: string;
+    videoClassName?: string;
+    onPlayerReady?: (player: any) => void;
+    onPlayerError?: (error: any) => void;
+}
+export declare function MediaPlayerHLS(props: MediaPlayerHLSProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerHLS {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-hls.d.ts.map

package/src/components/media-player-hls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-hls.d.ts","sourceRoot":"","sources":["media-player-hls.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAmB,oBAAoB,EAAE,MAAM,qBAAqB,CAAA;AAC3E,OAAO,EAAkB,WAAW,EAAE,SAAS,EAAE,MAAM,6BAA6B,CAAA;AAMpF,OAAO,uBAAuB,CAAA;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACjF,OAAO,EAAE,WAAW,EAAE,CAAA;IACtB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAA;IACxB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,CAAC,EAAE,GAAG,CAAA;IACf,qBAAqB,CAAC,EAAE,OAAO,CAAA;IAC/B,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,IAAI,CAAA;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAA;CACrC;AAgDD,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,2CAmCxD;yBAnCe,cAAc"}

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

@@ -0,0 +1,20 @@
+"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.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+export interface MediaPlayerLoadingProps {
+    className?: string;
+    delayMs?: number;
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+export declare function MediaPlayerLoading({ className, delayMs, asChild, children, ...props }: MediaPlayerLoadingProps): import("react/jsx-runtime").JSX.Element | null;
+export declare namespace MediaPlayerLoading {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-loading.d.ts.map

package/src/components/media-player-loading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-loading.d.ts","sourceRoot":"","sources":["media-player-loading.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,WAAW,uBAAuB;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EAClC,SAAS,EACT,OAAa,EACb,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,uBAAuB,kDAqDzB;yBA3De,kBAAkB"}

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

@@ -0,0 +1,53 @@
+"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.d.ts

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

package/src/components/media-player-play.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-play.d.ts","sourceRoot":"","sources":["media-player-play.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAA;AASzB,MAAM,WAAW,oBAAoB;IACpC,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,SAAS,EACT,OAAe,EACf,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,oBAAoB,2CAgDtB;yBArDe,eAAe"}

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

@@ -0,0 +1,44 @@
+"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.d.ts

@@ -0,0 +1,28 @@
+import React from "react";
+export interface MediaPlayerRootProps {
+    children: React.ReactNode;
+    className?: string;
+    dir?: "ltr" | "rtl";
+    disabled?: boolean;
+    asChild?: boolean;
+    autoHide?: boolean;
+    tooltipDelayDuration?: number;
+    tooltipSideOffset?: number;
+    withoutTooltip?: boolean;
+    enableGestures?: boolean;
+    enableMobileOptimizations?: boolean;
+    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;
+}
+export declare function MediaPlayerRoot(props: MediaPlayerRootProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaPlayerRoot {
+    var displayName: string;
+}
+//# sourceMappingURL=media-player-root.d.ts.map

package/src/components/media-player-root.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player-root.d.ts","sourceRoot":"","sources":["media-player-root.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AA0BzB,MAAM,WAAW,oBAAoB;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAA;IAGxB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IAGnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;IACnC,kBAAkB,CAAC,EAAE,CAAC,YAAY,EAAE,OAAO,KAAK,IAAI,CAAA;CACpD;AAsRD,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAM1D;yBANe,eAAe"}

package/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/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/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"}