@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/hooks/core/index.ts

@@ -0,0 +1,47 @@
+// Core Media Player Hooks
+export { useKeyboardControls } from "../use-keyboard-controls";
+export { useMediaPlayer } from "../use-media-player";
+
+// Media State Hooks
+export {
+  useAdaptiveMediaState,
+  useEnhancedMediaState,
+  useMediaState
+} from "../use-media-state";
+
+// React 19 Advanced Hooks
+export {
+  useMediaActions,
+  useMediaActionState
+} from "../use-media-actions";
+export type { MediaActionPayloads } from "../use-media-actions";
+
+export {
+  useMediaOptimistic,
+  useMediaStateComparison,
+  useOptimisticUpdates
+} from "../use-media-optimistic";
+
+// Mobile-First Touch Gestures
+export {
+  useMediaGestures,
+  useTouchGestures
+} from "../use-touch-gestures";
+export type {
+  GestureConfig,
+  GestureEvent,
+  GestureType
+} from "../use-touch-gestures";
+
+// Refactored Hooks (React 19 optimized)
+export { useVideoPlayer } from "../useVideoPlayer";
+export { useSubtitles } from "../useSubtitles";
+export { useEnhancedSubtitles } from "../useEnhancedSubtitles";
+export type { SubtitleTrack, UseEnhancedSubtitlesOptions } from "../useEnhancedSubtitles";
+export { useMediaControls } from "../useMediaControls";
+export { useScreenshot } from "../useScreenshot";
+export type { VideoState, VideoControls } from "../useVideoPlayer";
+
+// Specialized hooks
+export { useMediaMetadata } from "../use-media-metadata";
+export { useOptimisticControls } from "../use-optimistic-controls";

package/dist/src/hooks/legacy.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Legacy Hooks (Deprecated)
+ * These hooks are wrapped with deprecation warnings
+ */
+export declare function useVideoPlayer(props: any): {
+    state: import("..").MediaPlayerState;
+    controls: import("../types").MediaPlayerControls;
+    mediaRef: import("react").RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+};
+export declare function useEnhancedSubtitles(props: any): {
+    subtitlesEnabled: boolean;
+    currentSubtitle: string;
+    toggleSubtitles: () => void;
+    getCurrentSubtitle: (currentTime: number) => string;
+    setCurrentSubtitle: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+//# sourceMappingURL=legacy.d.ts.map

package/dist/src/hooks/legacy.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legacy.d.ts","sourceRoot":"","sources":["legacy.ts"],"names":[],"mappings":"AAAA;;;GAGG;AASH,wBAAgB,cAAc,CAAC,KAAK,EAAE,GAAG;;;;;EAMxC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,GAAG;;;;;;EAM9C"}

package/dist/src/hooks/legacy.js

@@ -0,0 +1,17 @@
+/**
+ * Legacy Hooks (Deprecated)
+ * These hooks are wrapped with deprecation warnings
+ */
+import { showDeprecationWarning } from "../lib/deprecation";
+// Import current hooks
+import { useMediaPlayer } from "./use-media-player";
+import { useSubtitles } from "./useSubtitles";
+// Legacy hook wrappers with deprecation warnings
+export function useVideoPlayer(props) {
+    showDeprecationWarning("useVideoPlayer", "useMediaPlayer (the primary media player hook)");
+    return useMediaPlayer(props);
+}
+export function useEnhancedSubtitles(props) {
+    showDeprecationWarning("useEnhancedSubtitles", "useSubtitles (the current subtitle hook)");
+    return useSubtitles(props);
+}

package/dist/src/hooks/legacy.ts

@@ -0,0 +1,27 @@
+/**
+ * Legacy Hooks (Deprecated)
+ * These hooks are wrapped with deprecation warnings
+ */
+
+import { showDeprecationWarning } from "../lib/deprecation"
+
+// Import current hooks
+import { useMediaPlayer } from "./use-media-player"
+import { useSubtitles } from "./useSubtitles"
+
+// Legacy hook wrappers with deprecation warnings
+export function useVideoPlayer(props: any) {
+	showDeprecationWarning(
+		"useVideoPlayer",
+		"useMediaPlayer (the primary media player hook)"
+	)
+	return useMediaPlayer(props)
+}
+
+export function useEnhancedSubtitles(props: any) {
+	showDeprecationWarning(
+		"useEnhancedSubtitles",
+		"useSubtitles (the current subtitle hook)"
+	)
+	return useSubtitles(props)
+}

package/dist/src/hooks/use-enhanced-media-player.d.ts

@@ -0,0 +1,88 @@
+import React from "react";
+interface UseEnhancedMediaPlayerOptions {
+    src: string | string[];
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    preload?: "none" | "metadata" | "auto";
+    crossOrigin?: "anonymous" | "use-credentials";
+    playbackRates?: number[];
+    keyboardControls?: boolean;
+    showControls?: boolean;
+    customControls?: boolean;
+    enablePerformanceMonitoring?: boolean;
+    bufferingStrategy?: "aggressive" | "conservative" | "adaptive";
+    enableTimeUpdateThrottling?: boolean;
+    timeUpdateThrottleMs?: number;
+    enableSeekPreview?: boolean;
+    preloadStrategy?: "eager" | "lazy" | "progressive";
+}
+export declare function useEnhancedMediaPlayer(options: UseEnhancedMediaPlayerOptions): {
+    mediaRef: React.RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    state: {
+        isPlaying: boolean;
+        currentTime: number;
+        duration: any;
+        volume: number;
+        isMuted: boolean;
+        isLoading: boolean;
+        isBuffering: boolean;
+        error: any;
+        buffered: any;
+        isFullscreen: boolean;
+        progress: number;
+        isTransitioning: boolean;
+        canPlay: boolean;
+    };
+    actualState: import("../context/media-context").MediaState | undefined;
+    controls: {
+        play: () => Promise<void>;
+        pause: () => void;
+        toggle: () => void;
+        seek: (time: number) => void;
+        setVolume: (volume: number) => void;
+        toggleMute: () => void;
+        enterFullscreen: () => Promise<void>;
+        exitFullscreen: () => Promise<void>;
+    };
+    performanceMetrics: {
+        frameRate: number;
+        averageRenderTime: number;
+        droppedFrames: number;
+        bufferHealth: number;
+    };
+    isTransitioning: boolean;
+    actions: any;
+    actionState: any;
+    optimisticState: {
+        dispatchOptimistic: (action: import("../index-legacy").OptimisticMediaAction) => Promise<void>;
+        togglePlayPause: () => Promise<void>;
+        setVolumeOptimistic: (volume: number) => Promise<void>;
+        seekOptimistic: (time: number) => Promise<void>;
+        toggleMuteOptimistic: () => Promise<void>;
+        toggleFullscreenOptimistic: () => Promise<void>;
+        setPlaybackRateOptimistic: (rate: number) => Promise<void>;
+        toggleSubtitlesOptimistic: () => Promise<void>;
+        isPlaying: boolean;
+        currentTime: number;
+        volume: number;
+        isMuted: boolean;
+        isFullscreen: boolean;
+        playbackRate: number;
+        subtitlesShowing: boolean;
+        previewTime: number | null;
+        progress: number;
+        formattedTime: string;
+        formattedDuration: string;
+        canPlay: boolean;
+        hasError: boolean;
+        isBuffering: boolean;
+        state: import("../context/media-context").MediaState;
+        actualState: import("../context/media-context").MediaState;
+    } | null;
+    isEnhanced: boolean;
+};
+export {};
+//# sourceMappingURL=use-enhanced-media-player.d.ts.map

package/dist/src/hooks/use-enhanced-media-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-enhanced-media-player.d.ts","sourceRoot":"","sources":["use-enhanced-media-player.ts"],"names":[],"mappings":"AAEA,OAAO,KAQN,MAAM,OAAO,CAAA;AAOd,UAAU,6BAA6B;IACtC,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAA;IAC7C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,2BAA2B,CAAC,EAAE,OAAO,CAAA;IACrC,iBAAiB,CAAC,EAAE,YAAY,GAAG,cAAc,GAAG,UAAU,CAAA;IAE9D,0BAA0B,CAAC,EAAE,OAAO,CAAA;IACpC,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,eAAe,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,aAAa,CAAA;CAClD;AAGD,wBAAgB,sBAAsB,CAAC,OAAO,EAAE,6BAA6B;;;;;;;;;;;;;;;;;;;;;;;qBA4RvD,MAAM;4BAeC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiIlC"}

package/dist/src/hooks/use-enhanced-media-player.js

@@ -0,0 +1,395 @@
+"use client";
+import React, { useCallback, useEffect, useRef, useMemo, useTransition, useOptimistic } from "react";
+import { useMediaStore, useMediaSelector } from "../context/media-context";
+import { useMediaOptimistic } from "./use-media-optimistic";
+import { useMediaActions } from "./use-media-actions";
+// Performance-optimized media player hook with React 19 features
+export function useEnhancedMediaPlayer(options) {
+    const mediaRef = useRef(null);
+    const containerRef = useRef(null);
+    // React 19 concurrent features
+    const [isPending, startTransition] = useTransition();
+    const [isSeeking, startSeekTransition] = useTransition();
+    // Performance monitoring
+    const renderStartTime = React.useRef(0);
+    const frameCount = React.useRef(0);
+    const lastFrameTime = React.useRef(0);
+    // Throttled time update
+    const timeUpdateTimeoutRef = useRef();
+    const lastTimeUpdate = useRef(0);
+    // Store integration
+    const store = useMediaStore();
+    const isEnhanced = 'getOptimisticState' in store;
+    // Select only the state we need to minimize re-renders
+    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 isMuted = useMediaSelector(state => state.isMuted);
+    const isLoading = useMediaSelector(state => state.isLoading);
+    const isBuffering = useMediaSelector(state => state.isBuffering);
+    const error = useMediaSelector(state => state.error);
+    const buffered = useMediaSelector(state => state.buffered);
+    const isFullscreen = useMediaSelector(state => state.isFullscreen);
+    // Enhanced features if available
+    const enhancedStore = store;
+    const optimisticState = isEnhanced ? useMediaOptimistic(enhancedStore) : null;
+    const actions = isEnhanced ? useMediaActions(enhancedStore) : null;
+    // Performance state
+    const [performanceMetrics, setPerformanceMetrics] = React.useState({
+        frameRate: 0,
+        averageRenderTime: 0,
+        droppedFrames: 0,
+        bufferHealth: 0
+    });
+    // Optimistic state updates for immediate UI feedback
+    const [optimisticVolume, setOptimisticVolume] = useOptimistic(volume, (state, newVolume) => {
+        return Math.max(0, Math.min(1, newVolume));
+    });
+    const [optimisticTime, setOptimisticTime] = useOptimistic(currentTime, (state, newTime) => {
+        return Math.max(0, Math.min(duration || 0, newTime));
+    });
+    // Initialize media element with performance optimizations
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        // Set initial properties
+        const initProps = {
+            volume: options.volume,
+            muted: options.muted,
+            autoplay: options.autoPlay,
+            loop: options.loop,
+            preload: options.preload,
+            crossOrigin: options.crossOrigin
+        };
+        Object.entries(initProps).forEach(([key, value]) => {
+            if (value !== undefined) {
+                media[key] = value;
+            }
+        });
+        // Performance optimizations
+        media.setAttribute('preload', options.preloadStrategy === 'eager' ? 'auto' : 'metadata');
+        if (options.bufferingStrategy === 'aggressive') {
+            media.setAttribute('buffered', 'auto');
+        }
+        // Hardware acceleration
+        if (media instanceof HTMLVideoElement) {
+            media.style.willChange = 'transform';
+            media.style.transform = 'translateZ(0)';
+        }
+    }, [
+        options.volume,
+        options.muted,
+        options.autoPlay,
+        options.loop,
+        options.preload,
+        options.crossOrigin,
+        options.preloadStrategy,
+        options.bufferingStrategy
+    ]);
+    // Optimized event handlers with React 19 patterns
+    const handleTimeUpdate = useCallback(() => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        const now = performance.now();
+        // Throttle time updates for performance
+        if (options.enableTimeUpdateThrottling !== false) {
+            if (now - lastTimeUpdate.current < (options.timeUpdateThrottleMs || 100)) {
+                return;
+            }
+            lastTimeUpdate.current = now;
+        }
+        startTransition(() => {
+            if (isEnhanced && actions) {
+                actions.setCurrentTime(media.currentTime);
+            }
+        });
+    }, [options.enableTimeUpdateThrottling, options.timeUpdateThrottleMs, isEnhanced, actions]);
+    const handlePlay = useCallback(() => {
+        startTransition(() => {
+            if (isEnhanced && actions) {
+                actions.play(true); // Optimistic update
+            }
+        });
+        options.onPlay?.();
+    }, [isEnhanced, actions, options.onPlay]);
+    const handlePause = useCallback(() => {
+        startTransition(() => {
+            if (isEnhanced && actions) {
+                actions.pause(true); // Optimistic update
+            }
+        });
+        options.onPause?.();
+    }, [isEnhanced, actions, options.onPause]);
+    const handleVolumeChange = useCallback(() => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        startTransition(() => {
+            if (isEnhanced && actions) {
+                actions.setVolume(media.volume, true); // Optimistic update
+                media.muted ? actions.mute(true) : actions.unmute(true);
+            }
+        });
+    }, [isEnhanced, actions]);
+    const handleSeeking = useCallback(() => {
+        startSeekTransition(() => {
+            // Seek operations get their own transition
+        });
+    }, []);
+    const handleSeeked = useCallback(() => {
+        // Seek completed
+    }, []);
+    const handleProgress = useCallback(() => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        startTransition(() => {
+            if (isEnhanced && actions) {
+                actions.setBuffered(media.buffered);
+            }
+        });
+    }, [isEnhanced, actions]);
+    // Performance monitoring
+    const measureRenderTime = useCallback(() => {
+        const now = performance.now();
+        const deltaTime = now - lastFrameTime.current;
+        if (deltaTime > 0) {
+            frameCount.current++;
+            // Calculate frame rate every second
+            if (frameCount.current >= 60) {
+                const fps = Math.round((frameCount.current * 1000) / (now - lastFrameTime.current));
+                setPerformanceMetrics(prev => ({
+                    ...prev,
+                    frameRate: fps,
+                    droppedFrames: Math.max(0, 60 - fps)
+                }));
+                frameCount.current = 0;
+                lastFrameTime.current = now;
+            }
+        }
+    }, []);
+    // Attach event listeners with performance optimization
+    useEffect(() => {
+        const media = mediaRef.current;
+        if (!media)
+            return;
+        // Use passive listeners where possible for better performance
+        const eventListeners = [
+            { event: "timeupdate", handler: handleTimeUpdate, passive: true },
+            { event: "play", handler: handlePlay },
+            { event: "pause", handler: handlePause },
+            { event: "volumechange", handler: handleVolumeChange },
+            { event: "seeking", handler: handleSeeking },
+            { event: "seeked", handler: handleSeeked },
+            { event: "progress", handler: handleProgress, passive: true },
+            { event: "loadedmetadata", handler: () => measureRenderTime() },
+            { event: "loadeddata", handler: () => measureRenderTime() }
+        ];
+        eventListeners.forEach(({ event, handler, passive }) => {
+            const options = passive ? { passive: true } : {};
+            media.addEventListener(event, handler, options);
+        });
+        // Performance monitoring frame loop
+        let rafId;
+        const performanceLoop = () => {
+            measureRenderTime();
+            rafId = requestAnimationFrame(performanceLoop);
+        };
+        if (options.enablePerformanceMonitoring) {
+            performanceLoop();
+        }
+        return () => {
+            eventListeners.forEach(({ event, handler }) => {
+                media.removeEventListener(event, handler);
+            });
+            if (rafId) {
+                cancelAnimationFrame(rafId);
+            }
+        };
+    }, [
+        handleTimeUpdate,
+        handlePlay,
+        handlePause,
+        handleVolumeChange,
+        handleSeeking,
+        handleSeeked,
+        handleProgress,
+        measureRenderTime,
+        options.enablePerformanceMonitoring
+    ]);
+    // Optimized control functions with React 19 features
+    const controls = useMemo(() => {
+        const play = async () => {
+            const media = mediaRef.current;
+            if (!media)
+                return;
+            if (isEnhanced && actions) {
+                await actions.play(true); // Optimistic
+            }
+            else {
+                try {
+                    await media.play();
+                }
+                catch (error) {
+                    console.error("Failed to play media:", error);
+                }
+            }
+        };
+        const pause = () => {
+            const media = mediaRef.current;
+            if (!media)
+                return;
+            if (isEnhanced && actions) {
+                actions.pause(true); // Optimistic
+            }
+            else {
+                media.pause();
+            }
+        };
+        const toggle = () => {
+            if (isPlaying) {
+                pause();
+            }
+            else {
+                play();
+            }
+        };
+        const seek = (time) => {
+            const media = mediaRef.current;
+            if (!media)
+                return;
+            const clampedTime = Math.max(0, Math.min(time, duration || 0));
+            if (isEnhanced && actions) {
+                startSeekTransition(() => {
+                    actions.seek(clampedTime, true); // Optimistic
+                });
+            }
+            else {
+                media.currentTime = clampedTime;
+            }
+        };
+        const setVolume = (volume) => {
+            const media = mediaRef.current;
+            if (!media)
+                return;
+            const clampedVolume = Math.max(0, Math.min(1, volume));
+            if (isEnhanced && actions) {
+                setOptimisticVolume(clampedVolume);
+                startTransition(() => {
+                    actions.setVolume(clampedVolume, true);
+                });
+            }
+            else {
+                media.volume = clampedVolume;
+            }
+        };
+        const toggleMute = () => {
+            const media = mediaRef.current;
+            if (!media)
+                return;
+            if (isEnhanced && actions) {
+                actions.toggleMute(true); // Optimistic
+            }
+            else {
+                media.muted = !media.muted;
+            }
+        };
+        const enterFullscreen = async () => {
+            const container = containerRef.current;
+            if (!container || !document.fullscreenEnabled)
+                return;
+            try {
+                await container.requestFullscreen();
+                if (isEnhanced && actions) {
+                    actions.enterFullscreen(true);
+                }
+            }
+            catch (error) {
+                console.error("Failed to enter fullscreen:", error);
+            }
+        };
+        const exitFullscreen = async () => {
+            if (!document.fullscreenElement)
+                return;
+            try {
+                await document.exitFullscreen();
+                if (isEnhanced && actions) {
+                    actions.exitFullscreen(true);
+                }
+            }
+            catch (error) {
+                console.error("Failed to exit fullscreen:", error);
+            }
+        };
+        return {
+            play,
+            pause,
+            toggle,
+            seek,
+            setVolume,
+            toggleMute,
+            enterFullscreen,
+            exitFullscreen
+        };
+    }, [
+        isPlaying,
+        duration,
+        isEnhanced,
+        actions,
+        startTransition,
+        startSeekTransition,
+        setOptimisticVolume
+    ]);
+    // Computed state
+    const computedState = useMemo(() => ({
+        isPlaying: optimisticState?.isPlaying ?? isPlaying,
+        currentTime: optimisticState?.currentTime ?? currentTime,
+        duration: optimisticState?.duration ?? duration,
+        volume: optimisticState?.volume ?? optimisticVolume,
+        isMuted: optimisticState?.isMuted ?? isMuted,
+        isLoading: optimisticState?.isBuffering ?? isLoading,
+        isBuffering: optimisticState?.isBuffering ?? isBuffering,
+        error: optimisticState?.error ?? error,
+        buffered: optimisticState?.buffered ?? buffered,
+        isFullscreen: optimisticState?.isFullscreen ?? isFullscreen,
+        progress: duration > 0 ? currentTime / duration : 0,
+        isTransitioning: isPending || isSeeking,
+        canPlay: !isLoading && !isBuffering && !error
+    }), [
+        optimisticState,
+        isPlaying,
+        currentTime,
+        duration,
+        optimisticVolume,
+        isMuted,
+        isLoading,
+        isBuffering,
+        error,
+        buffered,
+        isFullscreen,
+        isPending,
+        isSeeking
+    ]);
+    return {
+        // Refs
+        mediaRef,
+        containerRef,
+        // State
+        state: computedState,
+        actualState: optimisticState?.actualState,
+        // Controls
+        controls,
+        // Performance metrics
+        performanceMetrics,
+        isTransitioning: isPending || isSeeking,
+        // Enhanced features
+        actions: optimisticState?.actions,
+        actionState: optimisticState?.actionState,
+        // Optimistic features
+        optimisticState,
+        isEnhanced
+    };
+}