@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

package/src/hooks/__tests__/use-media-player.test.ts

@@ -0,0 +1,712 @@
+import { act, renderHook, waitFor } from "@testing-library/react"
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"
+import { useMediaPlayer } from "../use-media-player"
+
+describe("useMediaPlayer", () => {
+	let mockMediaElement: Partial<HTMLVideoElement>
+	let mockContainerElement: HTMLDivElement
+
+	beforeEach(() => {
+		// Create mock media element
+		mockMediaElement = {
+			play: vi.fn().mockResolvedValue(undefined),
+			pause: vi.fn(),
+			volume: 1,
+			muted: false,
+			currentTime: 0,
+			duration: 100,
+			buffered: {
+				length: 1,
+				start: () => 0,
+				end: () => 50
+			} as TimeRanges,
+			addEventListener: vi.fn(),
+			removeEventListener: vi.fn(),
+			autoplay: false,
+			loop: false,
+			preload: "metadata",
+			crossOrigin: null,
+			error: null
+		}
+
+		mockContainerElement = document.createElement("div")
+		document.body.appendChild(mockContainerElement)
+
+		// Mock fullscreen API
+		document.fullscreenEnabled = true
+		document.fullscreenElement = null
+		mockContainerElement.requestFullscreen = vi.fn().mockResolvedValue(undefined)
+		document.exitFullscreen = vi.fn().mockResolvedValue(undefined)
+	})
+
+	afterEach(() => {
+		document.body.removeChild(mockContainerElement)
+		vi.clearAllMocks()
+	})
+
+	describe("Initialization", () => {
+		it("should initialize with default state", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			expect(result.current.state).toMatchObject({
+				isPlaying: false,
+				currentTime: 0,
+				duration: 0,
+				volume: 1,
+				isMuted: false,
+				isLoading: false,
+				isFullscreen: false,
+				error: null
+			})
+		})
+
+		it("should initialize media element with provided options", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					autoPlay: true,
+					loop: true,
+					muted: true,
+					volume: 0.5,
+					preload: "auto",
+					crossOrigin: "anonymous"
+				})
+			)
+
+			// Mock ref attachment
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			expect(result.current.state.volume).toBe(0.5)
+			expect(result.current.state.isMuted).toBe(true)
+		})
+
+		it("should handle array of sources", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: ["video.mp4", "video.webm", "video.ogv"]
+				})
+			)
+
+			expect(result.current.mediaRef).toBeDefined()
+			expect(result.current.containerRef).toBeDefined()
+		})
+	})
+
+	describe("Playback Controls", () => {
+		it("should play media successfully", async () => {
+			const onPlay = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onPlay
+				})
+			)
+
+			// Attach mock media element
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			await act(async () => {
+				await result.current.controls.play()
+			})
+
+			expect(mockMediaElement.play).toHaveBeenCalled()
+		})
+
+		it("should handle play errors gracefully", async () => {
+			const onError = vi.fn()
+			const playError = new Error("Play failed")
+			mockMediaElement.play = vi.fn().mockRejectedValue(playError)
+
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onError
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			await act(async () => {
+				await result.current.controls.play()
+			})
+
+			expect(result.current.state.error).toBe("Failed to play media")
+		})
+
+		it("should pause media", () => {
+			const onPause = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onPause
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			act(() => {
+				result.current.controls.pause()
+			})
+
+			expect(mockMediaElement.pause).toHaveBeenCalled()
+		})
+
+		it("should toggle play/pause", async () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Toggle to play
+			await act(async () => {
+				await result.current.controls.toggle()
+			})
+			expect(mockMediaElement.play).toHaveBeenCalled()
+
+			// Set playing state
+			act(() => {
+				result.current.state.isPlaying = true
+			})
+
+			// Toggle to pause
+			act(() => {
+				result.current.controls.toggle()
+			})
+			expect(mockMediaElement.pause).toHaveBeenCalled()
+		})
+	})
+
+	describe("Seeking", () => {
+		it("should seek to valid time", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+					result.current.mediaRef.current.duration = 100
+				}
+			})
+
+			act(() => {
+				result.current.controls.seek(50)
+			})
+
+			expect(mockMediaElement.currentTime).toBe(50)
+		})
+
+		it("should clamp seek time to valid range", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+					result.current.mediaRef.current.duration = 100
+				}
+			})
+
+			// Seek beyond duration
+			act(() => {
+				result.current.controls.seek(200)
+			})
+			expect(mockMediaElement.currentTime).toBe(100)
+
+			// Seek to negative time
+			act(() => {
+				result.current.controls.seek(-10)
+			})
+			expect(mockMediaElement.currentTime).toBe(0)
+		})
+
+		it("should call onTimeUpdate callback during seeking", () => {
+			const onTimeUpdate = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onTimeUpdate
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			act(() => {
+				result.current.controls.seek(30)
+			})
+
+			// Simulate timeupdate event
+			const timeUpdateHandler = (mockMediaElement.addEventListener as any).mock.calls.find(
+				(call: any[]) => call[0] === "timeupdate"
+			)?.[1]
+
+			if (timeUpdateHandler) {
+				act(() => {
+					mockMediaElement.currentTime = 30
+					timeUpdateHandler()
+				})
+				expect(onTimeUpdate).toHaveBeenCalledWith(30)
+			}
+		})
+	})
+
+	describe("Volume Controls", () => {
+		it("should set volume within valid range", () => {
+			const onVolumeChange = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onVolumeChange
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			act(() => {
+				result.current.controls.setVolume(0.5)
+			})
+
+			expect(mockMediaElement.volume).toBe(0.5)
+		})
+
+		it("should clamp volume to 0-1 range", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Test upper bound
+			act(() => {
+				result.current.controls.setVolume(1.5)
+			})
+			expect(mockMediaElement.volume).toBe(1)
+
+			// Test lower bound
+			act(() => {
+				result.current.controls.setVolume(-0.5)
+			})
+			expect(mockMediaElement.volume).toBe(0)
+		})
+
+		it("should mute media", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			act(() => {
+				result.current.controls.mute()
+			})
+
+			expect(mockMediaElement.muted).toBe(true)
+		})
+
+		it("should unmute media", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					muted: true
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+					mockMediaElement.muted = true
+				}
+			})
+
+			act(() => {
+				result.current.controls.unmute()
+			})
+
+			expect(mockMediaElement.muted).toBe(false)
+		})
+
+		it("should toggle mute state", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Toggle to mute
+			act(() => {
+				result.current.controls.toggleMute()
+			})
+			expect(mockMediaElement.muted).toBe(true)
+
+			// Toggle to unmute
+			act(() => {
+				result.current.controls.toggleMute()
+			})
+			expect(mockMediaElement.muted).toBe(false)
+		})
+	})
+
+	describe("Fullscreen", () => {
+		it("should enter fullscreen", async () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.containerRef.current) {
+					Object.assign(result.current.containerRef.current, mockContainerElement)
+				}
+			})
+
+			await act(async () => {
+				await result.current.controls.enterFullscreen()
+			})
+
+			expect(mockContainerElement.requestFullscreen).toHaveBeenCalled()
+		})
+
+		it("should exit fullscreen", async () => {
+			document.fullscreenElement = mockContainerElement
+
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			await act(async () => {
+				await result.current.controls.exitFullscreen()
+			})
+
+			expect(document.exitFullscreen).toHaveBeenCalled()
+		})
+
+		it("should toggle fullscreen", async () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.containerRef.current) {
+					Object.assign(result.current.containerRef.current, mockContainerElement)
+				}
+			})
+
+			// Toggle to fullscreen
+			await act(async () => {
+				await result.current.controls.toggleFullscreen()
+			})
+			expect(mockContainerElement.requestFullscreen).toHaveBeenCalled()
+
+			// Simulate fullscreen state
+			document.fullscreenElement = mockContainerElement
+
+			// Toggle to exit fullscreen
+			await act(async () => {
+				await result.current.controls.toggleFullscreen()
+			})
+			expect(document.exitFullscreen).toHaveBeenCalled()
+		})
+
+		it("should handle fullscreen errors gracefully", async () => {
+			mockContainerElement.requestFullscreen = vi
+				.fn()
+				.mockRejectedValue(new Error("Fullscreen denied"))
+
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.containerRef.current) {
+					Object.assign(result.current.containerRef.current, mockContainerElement)
+				}
+			})
+
+			// Should not throw
+			await act(async () => {
+				await result.current.controls.enterFullscreen()
+			})
+
+			expect(mockContainerElement.requestFullscreen).toHaveBeenCalled()
+		})
+
+		it("should not enter fullscreen if not supported", async () => {
+			document.fullscreenEnabled = false
+
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.containerRef.current) {
+					Object.assign(result.current.containerRef.current, mockContainerElement)
+				}
+			})
+
+			await act(async () => {
+				await result.current.controls.enterFullscreen()
+			})
+
+			expect(mockContainerElement.requestFullscreen).not.toHaveBeenCalled()
+		})
+	})
+
+	describe("Event Handling", () => {
+		it("should attach all media event listeners", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			const addEventListener = mockMediaElement.addEventListener as any
+			const eventTypes = addEventListener.mock.calls.map((call: any[]) => call[0])
+
+			expect(eventTypes).toContain("play")
+			expect(eventTypes).toContain("pause")
+			expect(eventTypes).toContain("timeupdate")
+			expect(eventTypes).toContain("durationchange")
+			expect(eventTypes).toContain("volumechange")
+			expect(eventTypes).toContain("loadstart")
+			expect(eventTypes).toContain("loadeddata")
+			expect(eventTypes).toContain("error")
+			expect(eventTypes).toContain("ended")
+			expect(eventTypes).toContain("progress")
+		})
+
+		it("should remove event listeners on unmount", () => {
+			const { result, unmount } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			unmount()
+
+			expect(mockMediaElement.removeEventListener).toHaveBeenCalled()
+		})
+
+		it("should handle error events", () => {
+			const onError = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onError
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Get error event handler
+			const errorHandler = (mockMediaElement.addEventListener as any).mock.calls.find(
+				(call: any[]) => call[0] === "error"
+			)?.[1]
+
+			// Simulate error
+			act(() => {
+				mockMediaElement.error = { message: "Network error" } as MediaError
+				errorHandler?.()
+			})
+
+			expect(result.current.state.error).toBe("Network error")
+			expect(onError).toHaveBeenCalledWith("Network error")
+			expect(result.current.state.isLoading).toBe(false)
+		})
+
+		it("should handle ended event", () => {
+			const onEnded = vi.fn()
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					onEnded
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Get ended event handler
+			const endedHandler = (mockMediaElement.addEventListener as any).mock.calls.find(
+				(call: any[]) => call[0] === "ended"
+			)?.[1]
+
+			// Simulate ended
+			act(() => {
+				endedHandler?.()
+			})
+
+			expect(result.current.state.isPlaying).toBe(false)
+			expect(onEnded).toHaveBeenCalled()
+		})
+
+		it("should update buffered state", () => {
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4"
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Get progress event handler
+			const progressHandler = (mockMediaElement.addEventListener as any).mock.calls.find(
+				(call: any[]) => call[0] === "progress"
+			)?.[1]
+
+			// Simulate progress
+			act(() => {
+				progressHandler?.()
+			})
+
+			expect(result.current.state.buffered).toBe(mockMediaElement.buffered)
+		})
+	})
+
+	describe("Callbacks", () => {
+		it("should call all lifecycle callbacks", () => {
+			const callbacks = {
+				onPlay: vi.fn(),
+				onPause: vi.fn(),
+				onTimeUpdate: vi.fn(),
+				onDurationChange: vi.fn(),
+				onVolumeChange: vi.fn(),
+				onError: vi.fn(),
+				onLoadStart: vi.fn(),
+				onLoadedData: vi.fn(),
+				onEnded: vi.fn()
+			}
+
+			const { result } = renderHook(() =>
+				useMediaPlayer({
+					src: "test-video.mp4",
+					...callbacks
+				})
+			)
+
+			act(() => {
+				if (result.current.mediaRef.current) {
+					Object.assign(result.current.mediaRef.current, mockMediaElement)
+				}
+			})
+
+			// Simulate all events
+			const addEventListener = mockMediaElement.addEventListener as any
+			addEventListener.mock.calls.forEach((call: any[]) => {
+				const [eventType, handler] = call
+				act(() => {
+					if (eventType === "timeupdate") {
+						mockMediaElement.currentTime = 50
+					} else if (eventType === "durationchange") {
+						mockMediaElement.duration = 100
+					} else if (eventType === "volumechange") {
+						mockMediaElement.volume = 0.5
+					} else if (eventType === "error") {
+						mockMediaElement.error = { message: "Test error" } as MediaError
+					}
+					handler()
+				})
+			})
+
+			// Verify callbacks were called
+			expect(callbacks.onPlay).toHaveBeenCalled()
+			expect(callbacks.onPause).toHaveBeenCalled()
+			expect(callbacks.onTimeUpdate).toHaveBeenCalledWith(50)
+			expect(callbacks.onDurationChange).toHaveBeenCalledWith(100)
+			expect(callbacks.onVolumeChange).toHaveBeenCalledWith(0.5)
+			expect(callbacks.onError).toHaveBeenCalledWith("Test error")
+			expect(callbacks.onLoadStart).toHaveBeenCalled()
+			expect(callbacks.onLoadedData).toHaveBeenCalled()
+			expect(callbacks.onEnded).toHaveBeenCalled()
+		})
+	})
+})