@therealtinhtute/baroiplayer 1.0.5 → 1.0.7

package/src/hooks/use-media-optimistic.js

@@ -1,205 +0,0 @@
-"use client";
-import React, { useOptimistic } from "react";
-// Optimistic update reducer function
-function optimisticMediaReducer(state, action) {
-    if (!action.optimistic)
-        return state;
-    // Apply immediate optimistic updates for better UX
-    switch (action.type) {
-        case "PLAY":
-            return { ...state, isPlaying: true, error: null };
-        case "PAUSE":
-            return { ...state, isPlaying: false };
-        case "SEEK":
-            return { ...state, currentTime: action.detail };
-        case "SET_VOLUME":
-            return { ...state, volume: Math.max(0, Math.min(1, action.detail)) };
-        case "MUTE":
-            return { ...state, isMuted: true };
-        case "UNMUTE":
-            return { ...state, isMuted: false };
-        case "TOGGLE_MUTE":
-            return { ...state, isMuted: !state.isMuted };
-        case "ENTER_FULLSCREEN":
-            return { ...state, isFullscreen: true };
-        case "EXIT_FULLSCREEN":
-            return { ...state, isFullscreen: false };
-        case "SET_PLAYBACK_RATE":
-            return { ...state, playbackRate: action.detail };
-        case "TOGGLE_SUBTITLES":
-            return { ...state, subtitlesShowing: !state.subtitlesShowing };
-        case "PREVIEW_TIME":
-            return { ...state, previewTime: action.detail };
-        case "CLEAR_PREVIEW":
-            return {
-                ...state,
-                previewTime: null,
-                previewImage: null,
-                previewCoords: null
-            };
-        default:
-            return state;
-    }
-}
-// Media optimistic state hook using React 19's useOptimistic
-export function useMediaOptimistic(store) {
-    const actualState = React.useSyncExternalStore(store.subscribe, store.getState, store.getState);
-    const [optimisticState, addOptimistic] = useOptimistic(actualState, optimisticMediaReducer);
-    // Enhanced dispatch that uses optimistic updates
-    const dispatchOptimistic = React.useCallback(async (action) => {
-        // Add optimistic update immediately
-        if (action.optimistic) {
-            addOptimistic(action);
-        }
-        // Dispatch the actual action
-        await store.dispatchOptimistic(action);
-    }, [store, addOptimistic]);
-    // Quick actions with optimistic updates
-    const optimisticActions = React.useMemo(() => ({
-        // Play/Pause with immediate feedback
-        togglePlayPause: async () => {
-            const action = {
-                type: optimisticState.isPlaying ? "PAUSE" : "PLAY",
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Volume control with immediate slider feedback
-        setVolumeOptimistic: async (volume) => {
-            const action = {
-                type: "SET_VOLUME",
-                detail: Math.max(0, Math.min(1, volume)),
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Seek with immediate scrub feedback
-        seekOptimistic: async (time) => {
-            const action = {
-                type: "SEEK",
-                detail: time,
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Mute toggle with immediate icon change
-        toggleMuteOptimistic: async () => {
-            const action = {
-                type: "TOGGLE_MUTE",
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Fullscreen toggle with immediate layout change
-        toggleFullscreenOptimistic: async () => {
-            const action = {
-                type: optimisticState.isFullscreen ? "EXIT_FULLSCREEN" : "ENTER_FULLSCREEN",
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Playback rate with immediate feedback
-        setPlaybackRateOptimistic: async (rate) => {
-            const action = {
-                type: "SET_PLAYBACK_RATE",
-                detail: rate,
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        },
-        // Subtitle toggle with immediate visibility change
-        toggleSubtitlesOptimistic: async () => {
-            const action = {
-                type: "TOGGLE_SUBTITLES",
-                optimistic: true,
-                timestamp: Date.now()
-            };
-            await dispatchOptimistic(action);
-        }
-    }), [optimisticState, dispatchOptimistic]);
-    // State selectors that return optimistic values
-    const selectors = React.useMemo(() => ({
-        isPlaying: optimisticState.isPlaying,
-        currentTime: optimisticState.currentTime,
-        volume: optimisticState.volume,
-        isMuted: optimisticState.isMuted,
-        isFullscreen: optimisticState.isFullscreen,
-        playbackRate: optimisticState.playbackRate,
-        subtitlesShowing: optimisticState.subtitlesShowing,
-        previewTime: optimisticState.previewTime,
-        // Computed values
-        progress: optimisticState.duration > 0
-            ? optimisticState.currentTime / optimisticState.duration
-            : 0,
-        formattedTime: formatTime(optimisticState.currentTime),
-        formattedDuration: formatTime(optimisticState.duration),
-        // State checks
-        canPlay: !optimisticState.isLoading && !optimisticState.error,
-        hasError: !!optimisticState.error,
-        isBuffering: optimisticState.isLoading
-    }), [optimisticState]);
-    return {
-        state: optimisticState,
-        actualState,
-        ...selectors,
-        ...optimisticActions,
-        dispatchOptimistic
-    };
-}
-// Time formatting utility
-function formatTime(seconds) {
-    if (!seconds || !isFinite(seconds))
-        return "0:00";
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    const hours = Math.floor(mins / 60);
-    if (hours > 0) {
-        return `${hours}:${String(mins % 60).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
-    }
-    return `${mins}:${String(secs).padStart(2, '0')}`;
-}
-// Hook for components that need to detect optimistic updates
-export function useOptimisticUpdates(store) {
-    const [hasOptimisticUpdates, setHasOptimisticUpdates] = React.useState(false);
-    React.useEffect(() => {
-        const unsubscribe = store.subscribe(() => {
-            const actualState = store.getState();
-            const optimisticState = store.getOptimisticState();
-            const hasUpdates = JSON.stringify(actualState) !== JSON.stringify(optimisticState);
-            setHasOptimisticUpdates(hasUpdates);
-        });
-        return unsubscribe;
-    }, [store]);
-    return hasOptimisticUpdates;
-}
-// Hook to get both actual and optimistic state for debugging
-export function useMediaStateComparison(store) {
-    const actualState = React.useSyncExternalStore(store.subscribe, store.getState, store.getState);
-    const optimisticState = React.useSyncExternalStore(store.subscribe, store.getOptimisticState, store.getOptimisticState);
-    const differences = React.useMemo(() => {
-        const diffs = [];
-        const stateKeys = Object.keys(actualState);
-        stateKeys.forEach(key => {
-            if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
-                diffs.push({
-                    key: key,
-                    actual: actualState[key],
-                    optimistic: optimisticState[key]
-                });
-            }
-        });
-        return diffs;
-    }, [actualState, optimisticState]);
-    return {
-        actualState,
-        optimisticState,
-        differences,
-        hasOptimisticUpdates: differences.length > 0
-    };
-}

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

@@ -1,251 +0,0 @@
-"use client";
-import { useEffect, useRef } from "react";
-import { useMediaState } from "./use-media-state";
-export function useMediaPlayer(options) {
-    const mediaRef = useRef(null);
-    const containerRef = useRef(null);
-    const { state, setPlaying, setCurrentTime, setDuration, setVolume, setMuted, setLoading, setFullscreen, setError, setBuffered } = useMediaState();
-    // Initialize media element with options
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        // Set initial properties
-        if (options.volume !== undefined) {
-            media.volume = options.volume;
-            setVolume(options.volume);
-        }
-        if (options.muted !== undefined) {
-            media.muted = options.muted;
-            setMuted(options.muted);
-        }
-        if (options.autoPlay !== undefined) {
-            media.autoplay = options.autoPlay;
-        }
-        if (options.loop !== undefined) {
-            media.loop = options.loop;
-        }
-        if (options.preload !== undefined) {
-            media.preload = options.preload;
-        }
-        if (options.crossOrigin !== undefined) {
-            media.crossOrigin = options.crossOrigin;
-        }
-    }, [options, setVolume, setMuted]);
-    // Event handlers
-    const handlePlay = () => {
-        setPlaying(true);
-        options.onPlay?.();
-    };
-    const handlePause = () => {
-        setPlaying(false);
-        options.onPause?.();
-    };
-    const handleTimeUpdate = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        setCurrentTime(media.currentTime);
-        options.onTimeUpdate?.(media.currentTime);
-    };
-    const handleDurationChange = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        setDuration(media.duration);
-        options.onDurationChange?.(media.duration);
-    };
-    const handleVolumeChange = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        setVolume(media.volume);
-        setMuted(media.muted);
-        options.onVolumeChange?.(media.volume);
-    };
-    const handleLoadStart = () => {
-        setLoading(true);
-        setError(null);
-        options.onLoadStart?.();
-    };
-    const handleLoadedData = () => {
-        setLoading(false);
-        options.onLoadedData?.();
-    };
-    const handleError = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        const errorMessage = media.error?.message || "An error occurred while loading the media";
-        setError(errorMessage);
-        setLoading(false);
-        options.onError?.(errorMessage);
-    };
-    const handleEnded = () => {
-        setPlaying(false);
-        options.onEnded?.();
-    };
-    const handleProgress = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        setBuffered(media.buffered);
-    };
-    // Attach event listeners
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.addEventListener("play", handlePlay);
-        media.addEventListener("pause", handlePause);
-        media.addEventListener("timeupdate", handleTimeUpdate);
-        media.addEventListener("durationchange", handleDurationChange);
-        media.addEventListener("volumechange", handleVolumeChange);
-        media.addEventListener("loadstart", handleLoadStart);
-        media.addEventListener("loadeddata", handleLoadedData);
-        media.addEventListener("error", handleError);
-        media.addEventListener("ended", handleEnded);
-        media.addEventListener("progress", handleProgress);
-        return () => {
-            media.removeEventListener("play", handlePlay);
-            media.removeEventListener("pause", handlePause);
-            media.removeEventListener("timeupdate", handleTimeUpdate);
-            media.removeEventListener("durationchange", handleDurationChange);
-            media.removeEventListener("volumechange", handleVolumeChange);
-            media.removeEventListener("loadstart", handleLoadStart);
-            media.removeEventListener("loadeddata", handleLoadedData);
-            media.removeEventListener("error", handleError);
-            media.removeEventListener("ended", handleEnded);
-            media.removeEventListener("progress", handleProgress);
-        };
-    }, [
-        handlePlay,
-        handlePause,
-        handleTimeUpdate,
-        handleDurationChange,
-        handleVolumeChange,
-        handleLoadStart,
-        handleLoadedData,
-        handleError,
-        handleEnded,
-        handleProgress
-    ]);
-    // Control functions
-    const play = async () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        try {
-            await media.play();
-        }
-        catch (error) {
-            console.error("Failed to play media:", error);
-            setError("Failed to play media");
-        }
-    };
-    const pause = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.pause();
-    };
-    const toggle = () => {
-        if (state.isPlaying) {
-            pause();
-        }
-        else {
-            play();
-        }
-    };
-    const seek = (time) => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.currentTime = Math.max(0, Math.min(time, media.duration || 0));
-    };
-    const setVolumeControl = (volume) => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        const clampedVolume = Math.max(0, Math.min(1, volume));
-        media.volume = clampedVolume;
-    };
-    const mute = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.muted = true;
-    };
-    const unmute = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.muted = false;
-    };
-    const toggleMute = () => {
-        const media = mediaRef.current;
-        if (!media)
-            return;
-        media.muted = !media.muted;
-    };
-    const enterFullscreen = async () => {
-        const container = containerRef.current;
-        if (!container || !document.fullscreenEnabled)
-            return;
-        try {
-            await container.requestFullscreen();
-            setFullscreen(true);
-        }
-        catch (error) {
-            console.error("Failed to enter fullscreen:", error);
-        }
-    };
-    const exitFullscreen = async () => {
-        if (!document.fullscreenElement)
-            return;
-        try {
-            await document.exitFullscreen();
-            setFullscreen(false);
-        }
-        catch (error) {
-            console.error("Failed to exit fullscreen:", error);
-        }
-    };
-    const toggleFullscreen = () => {
-        if (document.fullscreenElement) {
-            exitFullscreen();
-        }
-        else {
-            enterFullscreen();
-        }
-    };
-    // Listen for fullscreen changes
-    useEffect(() => {
-        const handleFullscreenChange = () => {
-            setFullscreen(!!document.fullscreenElement);
-        };
-        document.addEventListener("fullscreenchange", handleFullscreenChange);
-        return () => {
-            document.removeEventListener("fullscreenchange", handleFullscreenChange);
-        };
-    }, [setFullscreen]);
-    const controls = {
-        play,
-        pause,
-        toggle,
-        seek,
-        setVolume: setVolumeControl,
-        mute,
-        unmute,
-        toggleMute,
-        enterFullscreen,
-        exitFullscreen,
-        toggleFullscreen
-    };
-    return {
-        state,
-        controls,
-        mediaRef,
-        containerRef
-    };
-}

package/src/hooks/use-media-state.js

@@ -1,162 +0,0 @@
-"use client";
-import { useState } from "react";
-import { useMediaStore } from "../context/media-context";
-import { useMediaOptimistic } from "./use-media-optimistic";
-import { useMediaActions } from "./use-media-actions";
-// Legacy hook for backward compatibility
-export function useMediaState() {
-    const [state, setState] = useState({
-        isPlaying: false,
-        currentTime: 0,
-        duration: 0,
-        volume: 1,
-        isMuted: false,
-        isLoading: false,
-        isFullscreen: false,
-        error: null,
-        buffered: null
-    });
-    const updateState = (updates) => {
-        setState((prev) => ({ ...prev, ...updates }));
-    };
-    const setPlaying = (isPlaying) => {
-        updateState({ isPlaying });
-    };
-    const setCurrentTime = (currentTime) => {
-        updateState({ currentTime });
-    };
-    const setDuration = (duration) => {
-        updateState({ duration });
-    };
-    const setVolume = (volume) => {
-        updateState({ volume: Math.max(0, Math.min(1, volume)) });
-    };
-    const setMuted = (isMuted) => {
-        updateState({ isMuted });
-    };
-    const setLoading = (isLoading) => {
-        updateState({ isLoading });
-    };
-    const setFullscreen = (isFullscreen) => {
-        updateState({ isFullscreen });
-    };
-    const setError = (error) => {
-        updateState({ error });
-    };
-    const setBuffered = (buffered) => {
-        updateState({ buffered });
-    };
-    return {
-        state,
-        updateState,
-        setPlaying,
-        setCurrentTime,
-        setDuration,
-        setVolume,
-        setMuted,
-        setLoading,
-        setFullscreen,
-        setError,
-        setBuffered
-    };
-}
-// React 19 enhanced media state hook
-export function useEnhancedMediaState() {
-    const store = useMediaStore();
-    // Check if this is an enhanced store
-    const isEnhanced = 'getOptimisticState' in store;
-    if (!isEnhanced) {
-        // Fall back to regular media state if not enhanced
-        return useMediaState();
-    }
-    // Cast to enhanced store type
-    const enhancedStore = store;
-    // Use React 19 optimistic updates
-    const optimisticState = useMediaOptimistic(enhancedStore);
-    // Get action handlers with React 19 features
-    const actions = useMediaActions(enhancedStore);
-    return {
-        // State (optimistic values for immediate UI feedback)
-        state: optimisticState.state,
-        actualState: optimisticState.actualState,
-        // Individual state selectors
-        isPlaying: optimisticState.isPlaying,
-        currentTime: optimisticState.currentTime,
-        duration: optimisticState.state.duration,
-        volume: optimisticState.volume,
-        isMuted: optimisticState.isMuted,
-        isLoading: optimisticState.isBuffering,
-        isFullscreen: optimisticState.isFullscreen,
-        error: optimisticState.state.error,
-        buffered: optimisticState.state.buffered,
-        // Computed values
-        progress: optimisticState.progress,
-        formattedTime: optimisticState.formattedTime,
-        formattedDuration: optimisticState.formattedDuration,
-        // Actions with optimistic updates
-        actions,
-        // Action state for loading/error handling
-        isActionLoading: actions.isLoading,
-        actionError: actions.errorMessage,
-        retryLastAction: actions.retryLastAction,
-        // Legacy compatibility methods
-        updateState: (updates) => {
-            // Map legacy updates to new actions
-            if ('isPlaying' in updates) {
-                updates.isPlaying ? actions.play() : actions.pause();
-            }
-            if ('currentTime' in updates) {
-                actions.setCurrentTime(updates.currentTime);
-            }
-            if ('duration' in updates) {
-                actions.setDuration(updates.duration);
-            }
-            if ('volume' in updates) {
-                actions.setVolume(updates.volume);
-            }
-            if ('isMuted' in updates) {
-                updates.isMuted ? actions.mute() : actions.unmute();
-            }
-            if ('isLoading' in updates) {
-                actions.setLoading(updates.isLoading);
-            }
-            if ('isFullscreen' in updates) {
-                updates.isFullscreen ? actions.enterFullscreen() : actions.exitFullscreen();
-            }
-            if ('error' in updates) {
-                actions.setError(updates.error ?? null);
-            }
-            if ('buffered' in updates) {
-                actions.setBuffered(updates.buffered ?? null);
-            }
-        },
-        // Individual action methods for legacy compatibility
-        setPlaying: (isPlaying) => {
-            isPlaying ? actions.play(true) : actions.pause(true); // Use optimistic updates
-        },
-        setCurrentTime: (time) => actions.setCurrentTime(time),
-        setDuration: (duration) => actions.setDuration(duration),
-        setVolume: (volume) => actions.setVolume(volume, true),
-        setMuted: (muted) => {
-            muted ? actions.mute(true) : actions.unmute(true);
-        },
-        setLoading: (loading) => actions.setLoading(loading),
-        setFullscreen: (fullscreen) => {
-            fullscreen ? actions.enterFullscreen(true) : actions.exitFullscreen(true);
-        },
-        setError: (error) => actions.setError(error),
-        setBuffered: (buffered) => actions.setBuffered(buffered)
-    };
-}
-// Hook that automatically chooses between legacy and enhanced based on context availability
-export function useAdaptiveMediaState() {
-    try {
-        // Try to use the enhanced version if MediaStore context is available
-        return useEnhancedMediaState();
-    }
-    catch (error) {
-        // Fall back to legacy version if not in MediaProvider context
-        console.warn('MediaStore context not available, using legacy state management');
-        return useMediaState();
-    }
-}