@therealtinhtute/baroiplayer 1.2.1 → 2.0.0-beta.1

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

@@ -1,712 +0,0 @@
-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()
-		})
-	})
-})