@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

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

@@ -0,0 +1,251 @@
+"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/dist/src/hooks/use-media-player.ts

@@ -0,0 +1,312 @@
+"use client"
+
+import { useCallback, useEffect, useRef } from "react"
+import type { MediaPlayerControls } from "../types/index"
+import { useMediaState } from "./use-media-state"
+
+interface UseMediaPlayerOptions {
+	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
+	onPlay?: () => void
+	onPause?: () => void
+	onTimeUpdate?: (currentTime: number) => void
+	onDurationChange?: (duration: number) => void
+	onVolumeChange?: (volume: number) => void
+	onError?: (error: string) => void
+	onLoadStart?: () => void
+	onLoadedData?: () => void
+	onEnded?: () => void
+}
+
+export function useMediaPlayer(options: UseMediaPlayerOptions) {
+	const mediaRef = useRef<HTMLVideoElement | HTMLAudioElement>(null)
+	const containerRef = useRef<HTMLDivElement>(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: number) => {
+    		const media = mediaRef.current
+    		if (!media) return
+
+    		media.currentTime = Math.max(0, Math.min(time, media.duration || 0))
+    	}
+
+	const setVolumeControl = (volume: number) => {
+    		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: MediaPlayerControls = {
+		play,
+		pause,
+		toggle,
+		seek,
+		setVolume: setVolumeControl,
+		mute,
+		unmute,
+		toggleMute,
+		enterFullscreen,
+		exitFullscreen,
+		toggleFullscreen
+	}
+
+	return {
+		state,
+		controls,
+		mediaRef,
+		containerRef
+	}
+}

package/dist/src/hooks/use-media-state.d.ts

@@ -0,0 +1,17 @@
+import type { MediaPlayerState } from "../types/index";
+export declare function useMediaState(): {
+    state: MediaPlayerState;
+    updateState: (updates: Partial<MediaPlayerState>) => void;
+    setPlaying: (isPlaying: boolean) => void;
+    setCurrentTime: (currentTime: number) => void;
+    setDuration: (duration: number) => void;
+    setVolume: (volume: number) => void;
+    setMuted: (isMuted: boolean) => void;
+    setLoading: (isLoading: boolean) => void;
+    setFullscreen: (isFullscreen: boolean) => void;
+    setError: (error: string | null) => void;
+    setBuffered: (buffered: TimeRanges | null) => void;
+};
+export declare function useEnhancedMediaState(): any;
+export declare function useAdaptiveMediaState(): any;
+//# sourceMappingURL=use-media-state.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-state.d.ts","sourceRoot":"","sources":["use-media-state.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAOtD,wBAAgB,aAAa;;2BAaE,OAAO,CAAC,gBAAgB,CAAC;4BAIxB,OAAO;kCAID,MAAM;4BAIZ,MAAM;wBAIV,MAAM;wBAIN,OAAO;4BAIH,OAAO;kCAID,OAAO;sBAInB,MAAM,GAAG,IAAI;4BAIP,UAAU,GAAG,IAAI;EAiBhD;AAGD,wBAAgB,qBAAqB,QAkGpC;AAGD,wBAAgB,qBAAqB,QASpC"}