@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,250 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+import { useMediaContext, useMediaSelector, useMediaDispatch, MediaActionTypes } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+// Custom hook for auto-hide controls
+function useAutoHideControls(autoHide, delay, showOnHover, showOnTouch) {
+    const [showControls, setShowControls] = React.useState(true);
+    const [isHovering, setIsHovering] = React.useState(false);
+    const [isTouching, setIsTouching] = React.useState(false);
+    const timeoutRef = React.useRef(null);
+    const resetTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        if (autoHide) {
+            timeoutRef.current = setTimeout(() => {
+                if (!isHovering && !isTouching) {
+                    setShowControls(false);
+                }
+            }, delay);
+        }
+    }, [autoHide, delay, isHovering, isTouching]);
+    const showControlsTemporarily = React.useCallback(() => {
+        setShowControls(true);
+        resetTimeout();
+    }, [resetTimeout]);
+    React.useEffect(() => {
+        if (autoHide) {
+            resetTimeout();
+        }
+        else {
+            setShowControls(true);
+        }
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, [autoHide, resetTimeout]);
+    const handleMouseEnter = React.useCallback(() => {
+        if (showOnHover) {
+            setIsHovering(true);
+            setShowControls(true);
+        }
+    }, [showOnHover]);
+    const handleMouseLeave = React.useCallback(() => {
+        if (showOnHover) {
+            setIsHovering(false);
+            resetTimeout();
+        }
+    }, [showOnHover, resetTimeout]);
+    const handleTouchStart = React.useCallback(() => {
+        if (showOnTouch) {
+            setIsTouching(true);
+            showControlsTemporarily();
+        }
+    }, [showOnTouch, showControlsTemporarily]);
+    const handleTouchEnd = React.useCallback(() => {
+        if (showOnTouch) {
+            setIsTouching(false);
+            resetTimeout();
+        }
+    }, [showOnTouch, resetTimeout]);
+    return {
+        showControls,
+        showControlsTemporarily,
+        handleMouseEnter,
+        handleMouseLeave,
+        handleTouchStart,
+        handleTouchEnd
+    };
+}
+// Custom hook for touch gestures
+function useTouchGestures(enabled) {
+    const dispatch = useMediaDispatch();
+    const isPlaying = useMediaSelector(state => state.isPlaying);
+    const currentTime = useMediaSelector(state => state.currentTime);
+    const duration = useMediaSelector(state => state.duration);
+    const volume = useMediaSelector(state => state.volume);
+    const [touchStart, setTouchStart] = React.useState(null);
+    const [isDoubleTap, setIsDoubleTap] = React.useState(false);
+    const handleTouchStart = React.useCallback((e) => {
+        if (!enabled)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        const now = Date.now();
+        if (touchStart && now - touchStart.time < 300) {
+            setIsDoubleTap(true);
+            // Double tap to play/pause
+            dispatch({
+                type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+            });
+        }
+        else {
+            setTouchStart({
+                x: touch.clientX,
+                y: touch.clientY,
+                time: now
+            });
+            setIsDoubleTap(false);
+        }
+    }, [enabled, touchStart, isPlaying, dispatch]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (!enabled || !touchStart || isDoubleTap)
+            return;
+        const touch = e.touches[0];
+        if (!touch)
+            return;
+        const deltaX = touch.clientX - touchStart.x;
+        const deltaY = touch.clientY - touchStart.y;
+        // Horizontal swipe for seeking
+        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > 50) {
+            const seekAmount = (deltaX / window.innerWidth) * 30; // 30 seconds max
+            const newTime = Math.max(0, Math.min(duration, currentTime + seekAmount));
+            dispatch({
+                type: MediaActionTypes.SEEK,
+                detail: newTime
+            });
+        }
+        // Vertical swipe for volume (right side of screen)
+        if (Math.abs(deltaY) > Math.abs(deltaX) && Math.abs(deltaY) > 50 && touchStart.x > window.innerWidth / 2) {
+            const volumeChange = -(deltaY / window.innerHeight) * 1; // Full range
+            const newVolume = Math.max(0, Math.min(1, volume + volumeChange));
+            dispatch({
+                type: MediaActionTypes.SET_VOLUME,
+                detail: newVolume
+            });
+        }
+    }, [enabled, touchStart, isDoubleTap, duration, currentTime, volume, dispatch]);
+    const handleTouchEnd = React.useCallback(() => {
+        if (!enabled)
+            return;
+        // Reset touch state after a delay to allow for double tap detection
+        setTimeout(() => {
+            setTouchStart(null);
+            setIsDoubleTap(false);
+        }, 300);
+    }, [enabled]);
+    return {
+        handleTouchStart,
+        handleTouchMove,
+        handleTouchEnd
+    };
+}
+export const EnhancedMediaPlayer = function EnhancedMediaPlayer({ children, className, autoHide = true, autoHideDelay = 3000, showControlsOnHover = true, showControlsOnTouch = true, enableKeyboardControls = true, enableTouchGestures = true, onPlay, onPause, onTimeUpdate, onVolumeChange, onFullscreenChange }) {
+    const context = useMediaContext();
+    const dispatch = useMediaDispatch();
+    // State selectors with memoization
+    const isPlaying = useMediaSelector(React.useCallback(state => state.isPlaying, []));
+    const isFullscreen = useMediaSelector(React.useCallback(state => state.isFullscreen, []));
+    const currentTime = useMediaSelector(React.useCallback(state => state.currentTime, []));
+    const volume = useMediaSelector(React.useCallback(state => state.volume, []));
+    const error = useMediaSelector(React.useCallback(state => state.error, []));
+    // Custom hooks
+    const { showControls, showControlsTemporarily, handleMouseEnter, handleMouseLeave, handleTouchStart: handleControlsTouch, handleTouchEnd: handleControlsTouchEnd } = useAutoHideControls(autoHide, autoHideDelay, showControlsOnHover, showControlsOnTouch);
+    const { handleTouchStart: handleGestureStart, handleTouchMove: handleGestureMove, handleTouchEnd: handleGestureEnd } = useTouchGestures(enableTouchGestures);
+    // Combine touch handlers
+    const handleTouchStart = React.useCallback((e) => {
+        handleControlsTouch();
+        handleGestureStart(e);
+    }, [handleControlsTouch, handleGestureStart]);
+    const handleTouchEnd = React.useCallback(() => {
+        handleControlsTouchEnd();
+        handleGestureEnd();
+    }, [handleControlsTouchEnd, handleGestureEnd]);
+    // Event handlers with memoization
+    const handleClick = React.useCallback(() => {
+        showControlsTemporarily();
+    }, [showControlsTemporarily]);
+    // Keyboard controls
+    React.useEffect(() => {
+        if (!enableKeyboardControls)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+                return;
+            }
+            switch (e.code) {
+                case 'Space':
+                case 'KeyK':
+                    e.preventDefault();
+                    dispatch({
+                        type: isPlaying ? MediaActionTypes.PAUSE : MediaActionTypes.PLAY
+                    });
+                    break;
+                case 'KeyF':
+                    e.preventDefault();
+                    dispatch({
+                        type: isFullscreen ? MediaActionTypes.EXIT_FULLSCREEN : MediaActionTypes.ENTER_FULLSCREEN
+                    });
+                    break;
+                case 'KeyM':
+                    e.preventDefault();
+                    dispatch({ type: MediaActionTypes.TOGGLE_MUTE });
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: Math.max(0, currentTime - 10)
+                    });
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SEEK,
+                        detail: currentTime + 10
+                    });
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SET_VOLUME,
+                        detail: Math.min(1, volume + 0.1)
+                    });
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    dispatch({
+                        type: MediaActionTypes.SET_VOLUME,
+                        detail: Math.max(0, volume - 0.1)
+                    });
+                    break;
+            }
+        };
+        document.addEventListener('keydown', handleKeyDown);
+        return () => document.removeEventListener('keydown', handleKeyDown);
+    }, [enableKeyboardControls, dispatch, isPlaying, isFullscreen, currentTime, volume]);
+    // Event callbacks
+    React.useEffect(() => {
+        if (isPlaying)
+            onPlay?.();
+        else
+            onPause?.();
+    }, [isPlaying, onPlay, onPause]);
+    React.useEffect(() => {
+        onTimeUpdate?.(currentTime);
+    }, [currentTime, onTimeUpdate]);
+    React.useEffect(() => {
+        onVolumeChange?.(volume);
+    }, [volume, onVolumeChange]);
+    React.useEffect(() => {
+        onFullscreenChange?.(isFullscreen);
+    }, [isFullscreen, onFullscreenChange]);
+    return (_jsx("div", { ref: context.rootRef, className: cn("relative isolate flex flex-col overflow-hidden rounded-lg bg-black outline-none", "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "data-[disabled]:pointer-events-none data-[disabled]:opacity-50", isFullscreen && "fixed inset-0 z-50 rounded-none", className), "data-state": isFullscreen ? "fullscreen" : "inline", "data-disabled": error ? "" : undefined, "data-controls-visible": showControls ? "" : undefined, tabIndex: 0, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onTouchStart: handleTouchStart, onTouchMove: handleGestureMove, onTouchEnd: handleTouchEnd, onClick: handleClick, children: children }));
+};
+EnhancedMediaPlayer.displayName = "EnhancedMediaPlayer";

package/src/components/examples/basic-video-player.d.ts

@@ -0,0 +1,10 @@
+export interface BasicVideoPlayerProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function BasicVideoPlayer({ src, poster, className }: BasicVideoPlayerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace BasicVideoPlayer {
+    var displayName: string;
+}
+//# sourceMappingURL=basic-video-player.d.ts.map

package/src/components/examples/basic-video-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-video-player.d.ts","sourceRoot":"","sources":["basic-video-player.tsx"],"names":[],"mappings":"AAcA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,qBAAqB,2CAgCjF;yBAhCe,gBAAgB"}

package/src/components/examples/basic-video-player.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { MediaPlayerControls, MediaPlayerControlsOverlay } from "../media-player-controls";
+import { MediaPlayerPlay } from "../media-player-play";
+import { MediaPlayerSeek } from "../media-player-seek";
+import { MediaPlayerVolume } from "../media-player-volume";
+import { MediaPlayerTime } from "../media-player-time";
+import { MediaPlayerFullscreen } from "../media-player-fullscreen";
+import { MediaPlayerLoading } from "../media-player-loading";
+import { MediaPlayerError } from "../media-player-error";
+export function BasicVideoPlayer({ src, poster, className }) {
+    return (_jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, crossOrigin: "anonymous", playsInline: true }), _jsx(MediaPlayerLoading, {}), _jsx(MediaPlayerError, {}), _jsx(MediaPlayerControlsOverlay, {}), _jsxs(MediaPlayerControls, { children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerPlay, {}), _jsx(MediaPlayerVolume, {}), _jsx(MediaPlayerTime, { variant: "current" })] }), _jsx("div", { className: "flex-1 px-2", children: _jsx(MediaPlayerSeek, {}) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(MediaPlayerTime, { variant: "duration" }), _jsx(MediaPlayerFullscreen, {})] })] })] }));
+}
+BasicVideoPlayer.displayName = "BasicVideoPlayer";

package/src/components/examples/custom-controls-example.d.ts

@@ -0,0 +1,10 @@
+export interface CustomControlsExampleProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function CustomControlsExample({ src, poster, className }: CustomControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace CustomControlsExample {
+    var displayName: string;
+}
+//# sourceMappingURL=custom-controls-example.d.ts.map

package/src/components/examples/custom-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-controls-example.d.ts","sourceRoot":"","sources":["custom-controls-example.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,0BAA0B;IAC1C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,wBAAgB,qBAAqB,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,EAAE,0BAA0B,2CA6C3F;yBA7Ce,qBAAqB"}

package/src/components/examples/custom-controls-example.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaPlayer } from "../media-player";
+import { FullscreenButton } from "../ui/fullscreen-button";
+import { PlayButton } from "../ui/play-button";
+import { SeekBar } from "../ui/seek-bar";
+import { TimeDisplay } from "../ui/time-display";
+import { VolumeControl } from "../ui/volume-control";
+export function CustomControlsExample({ src, poster, className }) {
+    return (_jsx(MediaPlayer, { src: src, customControls: true, showControls: false, className: className, children: ({ state, controls }) => (_jsxs("div", { className: "absolute inset-0 flex flex-col justify-end", children: [_jsx("div", { className: "pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent" }), _jsxs("div", { className: "relative z-10 space-y-3 p-4", children: [_jsx("div", { className: "w-full", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, size: "lg" }), _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute }), _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration })] }), _jsx("div", { className: "flex items-center gap-2", children: _jsx(FullscreenButton, { isFullscreen: state.isFullscreen, onToggle: controls.toggleFullscreen }) })] })] })] })) }));
+}
+CustomControlsExample.displayName = "CustomControlsExample";

package/src/components/examples/enhanced-controls-example.d.ts

@@ -0,0 +1,9 @@
+export interface EnhancedControlsExampleProps {
+    src: string;
+    poster?: string;
+    className?: string;
+}
+export declare function EnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function CustomEnhancedControlsExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function SkipButtonsOnlyExample({ src, poster, className }: EnhancedControlsExampleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=enhanced-controls-example.d.ts.map

package/src/components/examples/enhanced-controls-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-controls-example.d.ts","sourceRoot":"","sources":["enhanced-controls-example.tsx"],"names":[],"mappings":"AAgBA,MAAM,WAAW,4BAA4B;IAC5C,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;CAClB;AAGD,wBAAgB,uBAAuB,CAAC,EACvC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAmB9B;AAGD,wBAAgB,6BAA6B,CAAC,EAC7C,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CA+B9B;AAGD,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,EAAE,4BAA4B,2CAsB9B"}

package/src/components/examples/enhanced-controls-example.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MediaProvider } from "../../context/media-provider";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { EnhancedControlBar, EnhancedPlayButton, EnhancedSeekBar, EnhancedBackwardButton, EnhancedForwardButton, EnhancedVolumeControl, EnhancedTimeDisplay } from "../enhanced/enhanced-controls";
+// Complete example with all enhanced controls
+export function EnhancedControlsExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx(EnhancedControlBar, { className: "absolute right-0 bottom-0 left-0", showSkipButtons: true, showVolumeControl: true, showTimeDisplay: true, playButtonSize: "xl", skipButtonSize: "md", skipTime: 10 })] }) }));
+}
+// Example with individual components for custom layouts
+export function CustomEnhancedControlsExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsxs("div", { className: "absolute right-0 bottom-0 left-0 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(EnhancedSeekBar, { className: "mb-4" }), _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(EnhancedBackwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 15, size: "md" }), _jsx(EnhancedVolumeControl, {})] }), _jsxs("div", { className: "flex items-center gap-2 font-mono text-sm text-white", children: [_jsx(EnhancedTimeDisplay, { variant: "current" }), _jsx("span", { className: "text-white/60", children: "/" }), _jsx(EnhancedTimeDisplay, { variant: "duration" })] })] })] })] }) }));
+}
+// Minimal example with just skip buttons
+export function SkipButtonsOnlyExample({ src, poster, className }) {
+    return (_jsx(MediaProvider, { children: _jsxs(MediaPlayerRoot, { className: className, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster }), _jsx("div", { className: "-translate-x-1/2 absolute bottom-4 left-1/2 transform", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx(EnhancedBackwardButton, { skipTime: 10, size: "lg" }), _jsx(EnhancedPlayButton, { size: "xl" }), _jsx(EnhancedForwardButton, { skipTime: 10, size: "lg" })] }) })] }) }));
+}

package/src/components/examples/enhanced-media-player-example.d.ts

@@ -0,0 +1,9 @@
+interface EnhancedMediaPlayerProps {
+    src: string | string[];
+    className?: string;
+    title?: string;
+    description?: string;
+}
+export declare function EnhancedMediaPlayerExample({ src, className, title, description }: EnhancedMediaPlayerProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=enhanced-media-player-example.d.ts.map

package/src/components/examples/enhanced-media-player-example.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"enhanced-media-player-example.d.ts","sourceRoot":"","sources":["enhanced-media-player-example.tsx"],"names":[],"mappings":"AAUA,UAAU,wBAAwB;IACjC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,wBAAgB,0BAA0B,CAAC,EAC1C,GAAG,EACH,SAAS,EACT,KAAsB,EACtB,WAA+D,EAC/D,EAAE,wBAAwB,2CA8Q1B"}

package/src/components/examples/enhanced-media-player-example.js

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from "react";
+import { MediaPlayer } from "../media-player";
+import { PlayButton } from "../ui/play-button";
+import { SeekBar } from "../ui/seek-bar";
+import { TimeDisplay } from "../ui/time-display";
+import { VolumeControl } from "../ui/volume-control";
+import { cn } from "../../lib/utils";
+export function EnhancedMediaPlayerExample({ src, className, title = "Sample Media", description = "Demonstrating the new BaroiPlayer design system" }) {
+    const [isControlsVisible, setIsControlsVisible] = useState(true);
+    return (_jsxs("div", { className: cn("mx-auto w-full max-w-4xl space-y-6", className), children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h2", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-xl", children: title }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: description })] }), _jsx("div", { className: cn("group relative", "hover:shadow-2xl hover:shadow-[color:var(--color-brand-primary)]/10", "transition-all duration-500 ease-out"), onMouseEnter: () => setIsControlsVisible(true), onMouseLeave: () => setIsControlsVisible(false), children: _jsx(MediaPlayer, { src: src, customControls: true, children: ({ state, controls }) => (_jsxs(_Fragment, { children: [_jsx("div", { className: cn("absolute inset-0 z-20 flex items-center justify-center", "transition-all duration-300", state.isLoading && "pointer-events-none"), children: _jsx("div", { className: cn("relative", "transition-all duration-300 ease-out", "hover:scale-105"), children: _jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "xl", className: cn("transform transition-all duration-300", !isControlsVisible && !state.isLoading && "scale-75 opacity-60", isControlsVisible && "scale-100 opacity-100") }) }) }), _jsxs("div", { className: cn("absolute right-0 bottom-0 left-0 z-30", "glass-strong border-[color:var(--media-border)]/30 border-t", "transition-all duration-300 ease-out", !isControlsVisible && "translate-y-full opacity-0", isControlsVisible && "translate-y-0 opacity-100"), children: [_jsx("div", { className: "-mt-2 px-4", children: _jsx(SeekBar, { currentTime: state.currentTime, duration: state.duration, buffered: state.buffered, onSeek: controls.seek, className: "w-full" }) }), _jsxs("div", { className: cn("flex items-center justify-between gap-4 p-4", "media-md:px-8 media-sm:px-6"), children: [_jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx(PlayButton, { isPlaying: state.isPlaying, onToggle: controls.toggle, disabled: state.isLoading, size: "md" }), _jsx("div", { className: "media-sm:block hidden", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "font-mono text-fluid-sm" }) })] }), _jsxs("div", { className: cn("media-md:block hidden flex-1 text-center", "space-y-1"), children: [_jsx("p", { className: "truncate font-medium text-[color:var(--media-text)] text-fluid-sm", children: title }), state.duration > 0 && (_jsxs("div", { className: "text-[color:var(--media-text-secondary)] text-xs", children: [Math.round((state.currentTime / state.duration) * 100), "% complete"] }))] }), _jsxs("div", { className: "flex items-center gap-3 media-sm:gap-4", children: [_jsx("div", { className: "media-sm:block hidden", children: _jsx(VolumeControl, { volume: state.volume, isMuted: state.isMuted, onVolumeChange: controls.setVolume, onToggleMute: controls.toggleMute, size: "md" }) }), _jsx("button", { onClick: controls.toggleFullscreen, className: cn("group glass-strong media-control relative", "size-10 touch-manipulation rounded-xl contain-layout", "bg-[color:var(--media-control-bg)] backdrop-blur-sm", "border border-[color:var(--media-border)]/30", "text-[color:var(--media-text)] transition-all duration-300", "hover:bg-[color:var(--media-control-hover)]", "hover:border-[color:var(--media-border)]/50", "hover:-translate-y-0.5 hover:scale-105", "active:translate-y-0 active:scale-100", "focus-ring"), "aria-label": "Enter fullscreen", children: _jsx("svg", { className: "m-auto size-5 transition-transform duration-200 group-hover:scale-110", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" }) }) })] })] }), _jsx("div", { className: "media-sm:hidden px-4 pb-3", children: _jsx(TimeDisplay, { currentTime: state.currentTime, duration: state.duration, className: "text-center font-mono text-sm" }) })] }), state.isLoading && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-16 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-16 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-lg") })] }), _jsxs("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-fluid-base", children: ["Loading ", title, "..."] })] }) })), state.error && (_jsx("div", { className: cn("absolute inset-0 z-40 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "mx-auto max-w-sm space-y-4 p-6 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-4", children: _jsx("svg", { className: "size-8 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" }) }) }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 font-semibold text-fluid-lg", children: "Playback Error" }), _jsx("p", { className: "text-[color:var(--media-text-secondary)] text-fluid-sm", children: state.error })] }), _jsx("button", { onClick: () => window.location.reload(), className: cn("rounded-lg px-6 py-2 font-medium transition-all duration-200", "bg-[color:var(--color-brand-primary)] text-[color:var(--media-text)]", "hover:scale-105 hover:bg-[color:var(--color-brand-accent)]", "focus-ring active:scale-95"), children: "Try Again" })] }) }))] })) }) }), _jsxs("div", { className: "grid grid-cols-1 media-lg:grid-cols-3 media-sm:grid-cols-2 gap-4", children: [_jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Modern Colors" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "OKLCH color space for vivid, accessible colors across all displays." }), _jsxs("div", { className: "flex gap-2", children: [_jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-primary)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-accent)] shadow-sm" }), _jsx("div", { className: "h-4 w-4 rounded-full bg-[color:var(--color-brand-highlight)] shadow-sm" })] })] }), _jsxs("div", { className: "glass-strong space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Container Queries" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Responsive design based on container size, not just viewport." }), _jsx("div", { className: "font-mono text-[color:var(--color-text-tertiary)] text-xs", children: "@container (min-width: 480px)" })] }), _jsxs("div", { className: "glass-strong media-lg:col-span-1 media-sm:col-span-2 space-y-3 rounded-xl border border-[color:var(--glass-border-medium)] p-6", children: [_jsx("h3", { className: "font-semibold text-[color:var(--color-text-primary)] text-fluid-base", children: "Smooth Animations" }), _jsx("p", { className: "text-[color:var(--color-text-secondary)] text-fluid-sm", children: "Performance-optimized with CSS containment and modern easing." }), _jsx("div", { className: "h-1 w-8 animate-pulse rounded-full bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]" })] })] })] }));
+}

package/src/components/examples/loading-states-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function LoadingStatesDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=loading-states-demo.d.ts.map

package/src/components/examples/loading-states-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"loading-states-demo.d.ts","sourceRoot":"","sources":["loading-states-demo.tsx"],"names":[],"mappings":"AAOA,wBAAgB,iBAAiB,4CAsIhC"}

package/src/components/examples/loading-states-demo.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { SimpleMinimalPlayer } from "../variants/minimal/SimpleMinimalPlayer";
+import { AnimateLoadingWrapper } from "../LoadingState";
+import { cn } from "../../lib/utils";
+export function LoadingStatesDemo() {
+    const [showCustomLoading, setShowCustomLoading] = useState(false);
+    const [loadingVariant, setLoadingVariant] = useState("animate");
+    // Custom loading component example
+    const CustomLoadingComponent = ({ context }) => (_jsxs("div", { className: "flex flex-col items-center gap-4 text-white", children: [_jsx("div", { className: "h-16 w-16 animate-pulse rounded-full bg-gradient-to-r from-cyan-500 to-blue-500" }), _jsxs("p", { className: "font-medium text-sm", children: ["Custom ", context, " loader"] })] }));
+    return (_jsx("div", { className: "min-h-screen bg-gray-950 p-8", children: _jsxs("div", { className: "mx-auto max-w-6xl space-y-8", children: [_jsxs("div", { className: "text-center", children: [_jsx("h1", { className: "mb-4 font-bold text-3xl text-white", children: "Loading States Demo" }), _jsx("p", { className: "mb-6 text-gray-400", children: "Demonstrating the new AnimateLoading integration with context-aware loading text" })] }), _jsxs("div", { className: "mb-8 grid grid-cols-1 gap-6 md:grid-cols-3", children: [_jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "initial" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Initial Loading" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "seeking" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Seeking" })] }), _jsxs("div", { className: "relative h-40 overflow-hidden rounded-lg bg-black", children: [_jsx(AnimateLoadingWrapper, { context: "buffering" }), _jsx("p", { className: "absolute bottom-2 left-2 text-white/60 text-xs", children: "Buffering" })] })] }), _jsxs("div", { className: "mb-6 flex justify-center gap-4", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("label", { className: "text-sm text-white", children: "Loading Variant:" }), _jsxs("select", { value: loadingVariant, onChange: (e) => setLoadingVariant(e.target.value), className: "rounded border border-gray-700 bg-gray-800 px-3 py-1 text-white", children: [_jsx("option", { value: "animate", children: "Animate (Default)" }), _jsx("option", { value: "spinner", children: "Spinner" }), _jsx("option", { value: "dots", children: "Dots" }), _jsx("option", { value: "skeleton", children: "Skeleton" })] })] }), _jsxs("button", { onClick: () => setShowCustomLoading(!showCustomLoading), className: cn("rounded-lg px-4 py-2 transition-colors", showCustomLoading
+                                ? "bg-cyan-600 text-white"
+                                : "bg-gray-800 text-gray-300 hover:bg-gray-700"), children: [showCustomLoading ? "Using Custom" : "Use Custom", " Loading"] })] }), _jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "font-semibold text-white text-xl", children: "Live Player Example" }), _jsx("div", { className: "aspect-video overflow-hidden rounded-lg bg-black", children: _jsx(SimpleMinimalPlayer, { src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4", poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg", crossOrigin: "anonymous", showLoadingState: true, loadingComponent: showCustomLoading ? CustomLoadingComponent : undefined, loadingProps: {
+                                    variant: showCustomLoading ? undefined : loadingVariant,
+                                    size: "sm",
+                                    message: showCustomLoading ? undefined : "Custom message..."
+                                } }) }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Features:" }), _jsxs("ul", { className: "space-y-1 text-gray-300 text-sm", children: [_jsx("li", { children: "\u2022 AnimateLoading from UI package as default" }), _jsx("li", { children: "\u2022 Context-aware loading messages" }), _jsx("li", { children: "\u2022 No blur backdrop for better performance" }), _jsx("li", { children: "\u2022 Customizable text size based on size prop" }), _jsx("li", { children: "\u2022 Support for custom loading components" }), _jsx("li", { children: "\u2022 Fallback to other variants (spinner, dots, skeleton)" })] })] }), _jsxs("div", { className: "rounded-lg bg-gray-900 p-4", children: [_jsx("h3", { className: "mb-2 font-medium text-white", children: "Usage:" }), _jsx("pre", { className: "overflow-x-auto text-green-400 text-sm", children: _jsx("code", { children: `// Default with AnimateLoading
+<SimpleMinimalPlayer
+  src="video.mp4"
+  showLoadingState={true}
+/>
+
+// Custom loading component
+<SimpleMinimalPlayer
+  src="video.mp4"
+  loadingComponent={CustomLoader}
+  loadingProps={{
+    size: "sm",
+    message: "Please wait..."
+  }}
+/>
+
+// Use different variant
+<SimpleMinimalPlayer
+  src="video.mp4"
+  loadingProps={{
+    variant: "spinner"
+  }}
+/>` }) })] })] })] }) }));
+}

package/src/components/examples/react-19-demo.d.ts

@@ -0,0 +1,10 @@
+interface React19MediaPlayerDemoProps {
+    src: string;
+    poster?: string;
+    className?: string;
+    mediaId?: string;
+}
+export declare function React19MediaPlayerDemo({ src, poster, className, mediaId }: React19MediaPlayerDemoProps): import("react/jsx-runtime").JSX.Element;
+export declare function React19DemoExample(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=react-19-demo.d.ts.map

package/src/components/examples/react-19-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-19-demo.d.ts","sourceRoot":"","sources":["react-19-demo.tsx"],"names":[],"mappings":"AAiCA,UAAU,2BAA2B;IACpC,GAAG,EAAE,MAAM,CAAA;IACX,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,sBAAsB,CAAC,EACtC,GAAG,EACH,MAAM,EACN,SAAS,EACT,OAAyB,EACzB,EAAE,2BAA2B,2CA2B7B;AAiOD,wBAAgB,kBAAkB,4CAmFjC"}

package/src/components/examples/react-19-demo.js

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { MediaProvider } from "../../context/media-provider";
+import { MediaPlayerRoot } from "../media-player-root";
+import { MediaPlayerVideo } from "../media-player-video";
+import { MediaPlayerControls } from "../media-player-controls";
+import { MediaPlayerPlay } from "../media-player-play";
+import { MediaPlayerVolume } from "../media-player-volume";
+import { MediaPlayerTime } from "../media-player-time";
+import { MediaPlayerSeek } from "../media-player-seek";
+import { MediaPlayerFullscreen } from "../media-player-fullscreen";
+import { EnhancedMediaWrapper, MediaLoading, useMediaConcurrent, useMediaPerformance } from "../media-suspense";
+import { useEnhancedMediaState } from "../../hooks/use-media-state";
+import { useMediaActions } from "../../hooks/use-media-actions";
+import { useMediaOptimistic } from "../../hooks/use-media-optimistic";
+import { useMediaErrorHandler } from "../../context/error-handling";
+import { useOptimisticMediaSelector } from "../../context/media-context";
+import { cn } from "../../lib/utils";
+export function React19MediaPlayerDemo({ src, poster, className, mediaId = "react-19-demo" }) {
+    return (_jsx(EnhancedMediaWrapper, { className: className, priority: "high", loadingFallback: _jsx(MediaLoading, { variant: "skeleton", size: "lg" }), errorFallback: ErrorFallback, children: _jsx(MediaProvider, { mediaId: mediaId, useEnhancedStore: true, enableOptimisticUpdates: true, enableErrorRecovery: true, persistenceConfig: {
+                userPreferences: true,
+                sessionState: true,
+                debounceMs: 300
+            }, retryConfig: {
+                maxRetries: 3,
+                exponentialBackoff: true
+            }, children: _jsx(MediaPlayerContent, { src: src, poster: poster }) }) }));
+}
+// Internal content component with React 19 hooks
+function MediaPlayerContent({ src, poster }) {
+    // React 19 enhanced state management
+    const mediaState = useEnhancedMediaState();
+    const { isLoading: actionLoading, errorMessage, ...actions } = useMediaActions(mediaState.state // Type assertion for store
+    );
+    // React 19 optimistic updates
+    const optimisticState = useMediaOptimistic(mediaState.state);
+    // React 19 concurrent features
+    const { isPending, updateWithTransition } = useMediaConcurrent();
+    // Performance monitoring
+    const { metrics, recordRenderTime } = useMediaPerformance();
+    // Error handling
+    const { errors, clearError } = useMediaErrorHandler();
+    // Record render performance
+    React.useEffect(() => {
+        const start = performance.now();
+        return () => recordRenderTime(start);
+    }, [recordRenderTime]);
+    // Optimistic selectors for immediate UI feedback
+    const isPlaying = useOptimisticMediaSelector(state => state.isPlaying);
+    const volume = useOptimisticMediaSelector(state => state.volume);
+    const currentTime = useOptimisticMediaSelector(state => state.currentTime);
+    const duration = useOptimisticMediaSelector(state => state.duration);
+    const isFullscreen = useOptimisticMediaSelector(state => state.isFullscreen);
+    // Enhanced action handlers with React 19 features
+    const handlePlayPause = async () => {
+        await updateWithTransition(async () => {
+            await optimisticState.togglePlayPause();
+        });
+    };
+    const handleVolumeChange = async (newVolume) => {
+        await optimisticState.setVolumeOptimistic(newVolume);
+    };
+    const handleSeek = async (time) => {
+        await optimisticState.seekOptimistic(time);
+    };
+    const handleFullscreenToggle = async () => {
+        await optimisticState.toggleFullscreenOptimistic();
+    };
+    return (_jsxs(MediaPlayerRoot, { className: cn("group relative overflow-hidden rounded-lg", "border border-border bg-black shadow-lg", "transition-all duration-200", isPending && "opacity-75", // Visual feedback for pending transitions
+        actionLoading && "pointer-events-none"), enableGestures: true, enableMobileOptimizations: true, children: [_jsx(MediaPlayerVideo, { src: src, poster: poster, className: "aspect-video w-full object-contain" }), (actionLoading || isPending) && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-black/20", children: _jsx(MediaLoading, { variant: "spinner", size: "lg", children: actionLoading ? "Processing..." : "Updating..." }) })), _jsx(MediaPlayerControls, { className: "absolute right-0 bottom-0 left-0", children: _jsxs("div", { className: "flex items-center gap-4 bg-gradient-to-t from-black/80 to-transparent p-4", children: [_jsx(MediaPlayerPlay, { className: "text-white transition-colors hover:text-white/80" }), _jsx(MediaPlayerVolume, { className: "text-white" }), _jsx(MediaPlayerTime, { className: "min-w-[120px] font-mono text-sm text-white" }), _jsx("div", { className: "flex-1", children: _jsx(MediaPlayerSeek, { className: "w-full" }) }), _jsx(MediaPlayerFullscreen, { className: "text-white transition-colors hover:text-white/80" })] }) }), (errorMessage || errors.length > 0) && (_jsxs("div", { className: "absolute top-4 right-4 rounded-lg bg-destructive/90 px-3 py-2 text-destructive-foreground text-sm", children: [errorMessage || errors[0]?.message, _jsx("button", { onClick: () => clearError(errors[0] ? `${errors[0].action?.type}-${errors[0].timestamp}` : ''), className: "ml-2 underline hover:no-underline", children: "Dismiss" })] })), process.env.NODE_ENV === 'development' && (_jsx(PerformanceDebugPanel, { metrics: metrics, optimisticState: optimisticState, errors: errors }))] }));
+}
+// Error fallback component
+function ErrorFallback({ error, resetError }) {
+    return (_jsxs("div", { className: "flex min-h-[300px] flex-col items-center justify-center rounded-lg border border-destructive/20 bg-destructive/10 p-8", children: [_jsx("div", { className: "mb-2 font-semibold text-destructive text-xl", children: "React 19 Media Player Error" }), _jsx("div", { className: "mb-4 max-w-md text-center text-muted-foreground", children: error.message }), _jsx("button", { onClick: resetError, className: "rounded-lg bg-primary px-4 py-2 text-primary-foreground transition-colors hover:bg-primary/90", children: "Retry Player" })] }));
+}
+// Performance debug panel (development only)
+function PerformanceDebugPanel({ metrics, optimisticState, errors }) {
+    const [isExpanded, setIsExpanded] = React.useState(false);
+    if (!isExpanded) {
+        return (_jsx("button", { onClick: () => setIsExpanded(true), className: "absolute top-4 left-4 rounded bg-blue-600 px-2 py-1 text-white text-xs", children: "Debug" }));
+    }
+    return (_jsxs("div", { className: "absolute top-4 left-4 max-w-sm rounded-lg bg-black/90 p-4 font-mono text-white text-xs", children: [_jsxs("div", { className: "mb-2 flex items-center justify-between", children: [_jsx("span", { className: "font-bold", children: "React 19 Debug" }), _jsx("button", { onClick: () => setIsExpanded(false), className: "text-white/60 hover:text-white", children: "\u00D7" })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { children: ["Render Time: ", metrics.renderTime, "ms"] }), _jsxs("div", { children: ["Suspense Count: ", metrics.suspenseCount] }), _jsxs("div", { children: ["Error Count: ", metrics.errorCount] }), _jsxs("div", { children: ["Transition Count: ", metrics.transitionCount] }), _jsxs("div", { children: ["Has Optimistic: ", optimisticState.hasOptimisticUpdates ? 'Yes' : 'No'] }), _jsxs("div", { children: ["Active Errors: ", errors.length] })] }), optimisticState.differences?.length > 0 && (_jsxs("div", { className: "mt-2 border-white/20 border-t pt-2", children: [_jsx("div", { className: "mb-1 font-bold", children: "Optimistic Diffs:" }), optimisticState.differences.map((diff, i) => (_jsxs("div", { className: "text-yellow-400", children: [diff.key, ": ", JSON.stringify(diff.optimistic), "(was: ", JSON.stringify(diff.actual), ")"] }, i)))] }))] }));
+}
+// Example usage component
+export function React19DemoExample() {
+    const [currentSrc, setCurrentSrc] = React.useState("https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
+    const videoSources = [
+        {
+            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+            title: "Big Buck Bunny",
+            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg"
+        },
+        {
+            src: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+            title: "Elephants Dream",
+            poster: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg"
+        }
+    ];
+    const currentVideo = videoSources.find(v => v.src === currentSrc);
+    return (_jsxs("div", { className: "mx-auto max-w-4xl space-y-6 p-6", children: [_jsxs("div", { children: [_jsx("h1", { className: "mb-2 font-bold text-3xl", children: "React 19 Enhanced Media Player" }), _jsx("p", { className: "text-muted-foreground", children: "Featuring useOptimistic, useActionState, Suspense, concurrent features, error handling, state persistence, and performance optimizations." })] }), _jsx("div", { className: "flex gap-4", children: videoSources.map((video) => (_jsx("button", { onClick: () => setCurrentSrc(video.src), className: cn("rounded-lg border px-4 py-2 transition-colors", currentSrc === video.src
+                        ? "border-primary bg-primary text-primary-foreground"
+                        : "border-border bg-background hover:border-primary/50"), children: video.title }, video.src))) }), _jsx(React19MediaPlayerDemo, { src: currentSrc, poster: currentVideo.poster, mediaId: `demo-${currentSrc}`, className: "w-full" }), _jsxs("div", { className: "grid grid-cols-1 gap-4 text-sm md:grid-cols-2", children: [_jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "React 19 Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 useOptimistic for immediate UI feedback" }), _jsx("li", { children: "\u2705 useActionState for form-like actions" }), _jsx("li", { children: "\u2705 Automatic memoization via React compiler" }), _jsx("li", { children: "\u2705 Concurrent features with Suspense" }), _jsx("li", { children: "\u2705 Enhanced error boundaries" })] })] }), _jsxs("div", { className: "space-y-2", children: [_jsx("h3", { className: "font-semibold", children: "Media Features" }), _jsxs("ul", { className: "space-y-1 text-muted-foreground", children: [_jsx("li", { children: "\u2705 Optimistic play/pause/seek/volume" }), _jsx("li", { children: "\u2705 Automatic state persistence" }), _jsx("li", { children: "\u2705 Error recovery with retries" }), _jsx("li", { children: "\u2705 Touch gestures & mobile optimization" }), _jsx("li", { children: "\u2705 Performance monitoring" })] })] })] })] }));
+}

package/src/components/examples/volume-orientation-demo.d.ts

@@ -0,0 +1,2 @@
+export declare function VolumeOrientationDemo(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=volume-orientation-demo.d.ts.map

package/src/components/examples/volume-orientation-demo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"volume-orientation-demo.d.ts","sourceRoot":"","sources":["volume-orientation-demo.tsx"],"names":[],"mappings":"AAKA,wBAAgB,qBAAqB,4CA4GpC"}