@therealtinhtute/baroiplayer 1.1.0 → 1.2.1

package/src/hooks/useKeyboardShortcuts.ts

@@ -8,6 +8,29 @@ interface UseKeyboardShortcutsProps {
 	duration: number
 }
 
+/**
+ * Safely sets currentTime on a video element, ensuring the value is finite
+ */
+function safeSetCurrentTime(video: HTMLVideoElement, time: number): boolean {
+	if (!Number.isFinite(time)) {
+		console.warn(`Attempted to set non-finite currentTime: ${time}`)
+		return false
+	}
+
+	if (time < 0) {
+		console.warn(`Attempted to set negative currentTime: ${time}`)
+		return false
+	}
+
+	try {
+		video.currentTime = time
+		return true
+	} catch (error) {
+		console.error(`Failed to set currentTime to ${time}:`, error)
+		return false
+	}
+}
+
 export function useKeyboardShortcuts({
 	videoControls,
 	toggleSubtitles,
@@ -34,11 +57,20 @@ export function useKeyboardShortcuts({
 				break
 			case "arrowleft":
 				e.preventDefault()
-				video.currentTime = Math.max(0, video.currentTime - 5)
+				const currentTime = Number.isFinite(video.currentTime) ? video.currentTime : 0
+				const newTimeLeft = Math.max(0, currentTime - 5)
+				safeSetCurrentTime(video, newTimeLeft)
 				break
 			case "arrowright":
 				e.preventDefault()
-				video.currentTime = Math.min(duration, video.currentTime + 5)
+				const validDuration = Number.isFinite(duration) && duration > 0 ? duration : Number.isFinite(video.duration) ? video.duration : 0
+				if (validDuration === 0) {
+					console.warn("Cannot seek: duration is not available")
+					break
+				}
+				const currentTimeRight = Number.isFinite(video.currentTime) ? video.currentTime : 0
+				const newTimeRight = Math.min(validDuration, currentTimeRight + 5)
+				safeSetCurrentTime(video, newTimeRight)
 				break
 			case "arrowup":
 				e.preventDefault()

package/src/hooks/useScreenshot.ts

@@ -1,61 +1,77 @@
 import { useCallback } from "react"
 
+function isCanvasTaintError(error: unknown): boolean {
+	if (error instanceof DOMException && error.name === "SecurityError") return true
+	if (error instanceof Error && /tainted/i.test(error.message)) return true
+	return false
+}
+
+/**
+ * Capture the current video frame.
+ * Requires the video to be loaded with CORS-friendly headers and
+ * `crossOrigin="anonymous"` (or `use-credentials`) on the element.
+ */
 export function useScreenshot(videoRef: React.RefObject<HTMLVideoElement | null>) {
-	const takeScreenshot = (ctrlKey: boolean = false) => {
-		if (!videoRef.current) return
-
-		const video = videoRef.current
-		const canvas = document.createElement("canvas")
-		canvas.width = video.videoWidth
-		canvas.height = video.videoHeight
-		const ctx = canvas.getContext("2d")
-		if (!ctx) return
-
-		try {
-			// Draw the video frame to canvas
-			ctx.drawImage(video, 0, 0)
-
-			// Try to export the canvas
-			canvas.toBlob((blob) => {
-				if (!blob) {
-					console.error("Failed to create blob from canvas")
-					return
-				}
+	const takeScreenshot = useCallback(
+		(ctrlKey: boolean = false) => {
+			const video = videoRef.current
+			if (!video) return
+
+			if (!video.videoWidth || !video.videoHeight) {
+				console.warn("Screenshot skipped: video frame not ready yet.")
+				return
+			}
 
-				if (ctrlKey) {
-					// Copy to clipboard
-					if (navigator.clipboard && window.ClipboardItem) {
-						const item = new ClipboardItem({ "image/png": blob })
-						navigator.clipboard.write([item]).catch((err) => {
-							console.error("Failed to copy to clipboard:", err)
-						})
-					} else {
-						console.warn("Clipboard API not supported")
+			const canvas = document.createElement("canvas")
+			canvas.width = video.videoWidth
+			canvas.height = video.videoHeight
+			const ctx = canvas.getContext("2d")
+			if (!ctx) return
+
+			try {
+				ctx.drawImage(video, 0, 0)
+
+				// SecurityError throws here when the canvas is tainted by a
+				// cross-origin video without usable CORS + crossOrigin on <video>.
+				canvas.toBlob((blob) => {
+					if (!blob) {
+						console.error("Screenshot failed: could not create image blob.")
+						return
+					}
+
+					if (ctrlKey) {
+						if (navigator.clipboard && window.ClipboardItem) {
+							const item = new ClipboardItem({ "image/png": blob })
+							navigator.clipboard.write([item]).catch((err) => {
+								console.error("Failed to copy screenshot to clipboard:", err)
+							})
+						} else {
+							console.warn("Clipboard API not supported for screenshot copy.")
+						}
+						return
 					}
-				} else {
-					// Download
+
 					const url = URL.createObjectURL(blob)
 					const a = document.createElement("a")
 					a.href = url
 					a.download = `screenshot-${Date.now()}.png`
 					a.click()
 					URL.revokeObjectURL(url)
+				}, "image/png")
+			} catch (error) {
+				if (isCanvasTaintError(error)) {
+					console.error(
+						"Screenshot failed: canvas tainted. The video is cross-origin without CORS allowing canvas use. " +
+							"Serve the media with Access-Control-Allow-Origin and set crossOrigin=\"anonymous\" on the player " +
+							"(must be set before the media loads)."
+					)
+					return
 				}
-			}, "image/png")
-		} catch (error) {
-			if (error instanceof Error && error.message.includes("tainted")) {
-				console.error(
-					"Canvas is tainted - video source may not have proper CORS headers. Try setting crossOrigin='anonymous' on the video element."
-				)
-				alert(
-					"Screenshot failed: The video source doesn't allow screenshots due to CORS policy. Please ensure the video server includes proper CORS headers or set crossOrigin='anonymous' on the video player."
-				)
-			} else {
 				console.error("Screenshot failed:", error)
-				alert("Screenshot failed: " + (error instanceof Error ? error.message : "Unknown error"))
 			}
-		}
-	}
+		},
+		[videoRef]
+	)
 
 	return { takeScreenshot }
 }

package/src/hooks/useVideoPlayer.ts

@@ -29,6 +29,32 @@ export interface VideoControls {
 	seekTo: (time: number) => void
 }
 
+/**
+ * Safely sets currentTime on a video element, ensuring the value is finite
+ * @param video - The video element
+ * @param time - The desired time value
+ * @returns true if successfully set, false otherwise
+ */
+function safeSetCurrentTime(video: HTMLVideoElement, time: number): boolean {
+	if (!Number.isFinite(time)) {
+		console.warn(`Attempted to set non-finite currentTime: ${time}`)
+		return false
+	}
+
+	if (time < 0) {
+		console.warn(`Attempted to set negative currentTime: ${time}`)
+		return false
+	}
+
+	try {
+		video.currentTime = time
+		return true
+	} catch (error) {
+		console.error(`Failed to set currentTime to ${time}:`, error)
+		return false
+	}
+}
+
 export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | null>) {
 	const videoRef = useRef<HTMLVideoElement>(null)
 	const [state, setState] = useState<VideoState>({
@@ -168,13 +194,25 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 	const seekForward = (seconds = 10) => {
 		const video = videoRef.current
 		if (!video) return
-		video.currentTime = Math.min(state.duration, video.currentTime + seconds)
+
+		const duration = Number.isFinite(video.duration) ? video.duration : Number.isFinite(state.duration) ? state.duration : 0
+		if (duration === 0) {
+			console.warn("Cannot seek forward: duration is not available")
+			return
+		}
+
+		const currentTime = Number.isFinite(video.currentTime) ? video.currentTime : 0
+		const newTime = Math.min(duration, currentTime + seconds)
+		safeSetCurrentTime(video, newTime)
 	}
 
 	const seekBackward = (seconds = 10) => {
 		const video = videoRef.current
 		if (!video) return
-		video.currentTime = Math.max(0, video.currentTime - seconds)
+
+		const currentTime = Number.isFinite(video.currentTime) ? video.currentTime : 0
+		const newTime = Math.max(0, currentTime - seconds)
+		safeSetCurrentTime(video, newTime)
 	}
 
 	const toggleMute = () => {
@@ -210,8 +248,16 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 
 	const seekTo = (time: number) => {
 		const video = videoRef.current
-		if (!video || state.duration === 0) return
-		video.currentTime = Math.max(0, Math.min(state.duration, time))
+		if (!video) return
+
+		const duration = Number.isFinite(video.duration) ? video.duration : Number.isFinite(state.duration) ? state.duration : 0
+		if (duration === 0) {
+			console.warn("Cannot seek: duration is not available")
+			return
+		}
+
+		const clampedTime = Math.max(0, Math.min(duration, time))
+		safeSetCurrentTime(video, clampedTime)
 	}
 
 	const controls: VideoControls = {

package/src/index-legacy.ts

@@ -131,11 +131,9 @@ export { useIntelligentPreloading } from "./hooks/use-intelligent-preloading"
 export { useEnhancedMediaPlayer } from "./hooks/use-enhanced-media-player"
 
 // Performance Monitoring
-export {
-	PerformanceMonitor,
-	PerformanceMetrics,
-	usePerformanceMonitor as usePerformanceMonitoring
-} from "./core/performance"
+export { PerformanceMonitor } from "./core/performance"
+export type { PerformanceMetrics } from "./core/performance"
+export { usePerformanceMonitor as usePerformanceMonitoring } from "./core/performance"
 
 // Media Resource Preloader
 export { MediaResourcePreloader } from "./components/ui/media-resource-preloader"

package/src/test/accessibility-utils.ts

@@ -42,7 +42,7 @@ export const a11yTestUtils = {
 
 	// Test ARIA attributes
 	testAriaAttributes: (container: HTMLElement) => {
-		const violations = []
+		const violations: Array<{ element: Element; issue: string }> = []
 
 		// Check for required ARIA attributes
 		const elementsNeedingAria = container.querySelectorAll(
@@ -77,7 +77,7 @@ export const a11yTestUtils = {
 
 	// Test color contrast (mock implementation)
 	testColorContrast: (container: HTMLElement) => {
-		const violations = []
+		const violations: Array<{ element: Element; issue: string }> = []
 		const textElements = container.querySelectorAll("p, span, div, button, a")
 
 		textElements.forEach((element) => {
@@ -100,7 +100,7 @@ export const a11yTestUtils = {
 	// Test screen reader announcements
 	testScreenReaderAnnouncements: (container: HTMLElement) => {
 		const liveRegions = container.querySelectorAll('[aria-live], [role="status"], [role="alert"]')
-		const announcements = []
+		const announcements: Array<{ region: Element; text: string; priority: string }> = []
 
 		liveRegions.forEach((region) => {
 			const text = region.textContent?.trim()
@@ -118,7 +118,7 @@ export const a11yTestUtils = {
 
 	// Test focus management
 	testFocusManagement: (container: HTMLElement) => {
-		const issues = []
+		const issues: Array<{ element: Element; issue: string }> = []
 
 		// Test for focus traps
 		const focusTraps = container.querySelectorAll('[data-focus-trap="true"]')
@@ -164,7 +164,7 @@ export const mockAxe = {
 export const accessibilityMatchers = {
 	toBeAccessible: async (container: HTMLElement) => {
 		const axeResults = await mockAxe.run(container)
-		const keyboardResults = a11yTestUtils.testKeyboardNavigation(container)
+		const keyboardResults = await a11yTestUtils.testKeyboardNavigation(container)
 		const ariaResults = a11yTestUtils.testAriaAttributes(container)
 
 		const allViolations = [...axeResults.violations, ...keyboardResults, ...ariaResults]
@@ -194,8 +194,8 @@ export const accessibilityMatchers = {
 		}
 	},
 
-	toSupportKeyboardNavigation: (container: HTMLElement) => {
-		const issues = a11yTestUtils.testKeyboardNavigation(container)
+	toSupportKeyboardNavigation: async (container: HTMLElement) => {
+		const issues = await a11yTestUtils.testKeyboardNavigation(container)
 
 		return {
 			pass: issues.length === 0,

package/src/test/media-mocks.ts

@@ -14,14 +14,18 @@ export class MockMediaStream {
 }
 
 export const createMockHTMLMediaElement = () => {
+	// Internal state
+	let _currentTime = 0
+	let _paused = true
+	let _volume = 1
+	let _muted = false
+
 	const mockElement = {
 		// Basic properties
 		src: "",
-		currentTime: 0,
 		duration: NaN,
 		volume: 1,
 		muted: false,
-		paused: true,
 		ended: false,
 		seeking: false,
 		readyState: 0,
@@ -71,34 +75,26 @@ export const createMockHTMLMediaElement = () => {
 		// Capture stream
 		captureStream: vi.fn().mockReturnValue(new MockMediaStream()),
 
-		// Setters with side effects
+		// Getters and setters with side effects
+		get currentTime() {
+			return _currentTime
+		},
 		set currentTime(value: number) {
-			this._currentTime = value
+			_currentTime = value
 			// Trigger timeupdate event
 			const event = new Event("timeupdate")
 			this.dispatchEvent(event)
 		},
 
-		get currentTime() {
-			return this._currentTime || 0
+		get paused() {
+			return _paused
 		},
-
 		set paused(value: boolean) {
-			this._paused = value
+			_paused = value
 			// Trigger play or pause events
 			const event = new Event(value ? "pause" : "play")
 			this.dispatchEvent(event)
-		},
-
-		get paused() {
-			return this._paused !== false
-		},
-
-		// Internal state
-		_currentTime: 0,
-		_paused: true,
-		_volume: 1,
-		_muted: false
+		}
 	}
 
 	return mockElement
@@ -114,14 +110,23 @@ export const setupMediaMocks = () => {
 	} as any
 
 	// Mock MediaDevices API
-	global.navigator.mediaDevices = {
-		getUserMedia: vi.fn().mockResolvedValue(new MockMediaStream()),
-		enumerateDevices: vi.fn().mockResolvedValue([])
-	} as any
+	Object.defineProperty(global.navigator, "mediaDevices", {
+		writable: true,
+		value: {
+			getUserMedia: vi.fn().mockResolvedValue(new MockMediaStream()),
+			enumerateDevices: vi.fn().mockResolvedValue([])
+		}
+	})
 
 	// Mock Picture-in-Picture API
-	global.document.pictureInPictureEnabled = true
-	global.document.pictureInPictureElement = null
+	Object.defineProperty(global.document, "pictureInPictureEnabled", {
+		writable: true,
+		value: true
+	})
+	Object.defineProperty(global.document, "pictureInPictureElement", {
+		writable: true,
+		value: null
+	})
 
 	// Mock Fullscreen API
 	Object.defineProperty(document, "fullscreenEnabled", {
@@ -136,8 +141,12 @@ export const setupMediaMocks = () => {
 
 	Object.defineProperty(Element.prototype, "requestFullscreen", {
 		writable: true,
-		value: vi.fn().mockImplementation(function () {
-			document.fullscreenElement = this
+		value: vi.fn().mockImplementation(function (this: Element) {
+			Object.defineProperty(document, "fullscreenElement", {
+				writable: true,
+				configurable: true,
+				value: this
+			})
 			const event = new Event("fullscreenchange")
 			document.dispatchEvent(event)
 			return Promise.resolve()
@@ -147,7 +156,11 @@ export const setupMediaMocks = () => {
 	Object.defineProperty(document, "exitFullscreen", {
 		writable: true,
 		value: vi.fn().mockImplementation(function () {
-			document.fullscreenElement = null
+			Object.defineProperty(document, "fullscreenElement", {
+				writable: true,
+				configurable: true,
+				value: null
+			})
 			const event = new Event("fullscreenchange")
 			document.dispatchEvent(event)
 			return Promise.resolve()

package/src/test/setup.ts

@@ -1,5 +1,5 @@
 import "@testing-library/jest-dom"
-import { vi } from "vitest"
+import { afterEach, vi } from "vitest"
 import { setupMediaMocks } from "./media-mocks"
 
 // Setup comprehensive media mocking
@@ -20,8 +20,8 @@ global.ResizeObserver = vi.fn().mockImplementation(() => ({
 }))
 
 // Mock requestAnimationFrame for performance testing
-global.requestAnimationFrame = vi.fn((cb) => setTimeout(cb, 16))
-global.cancelAnimationFrame = vi.fn(clearTimeout)
+global.requestAnimationFrame = vi.fn((cb: FrameRequestCallback) => setTimeout(cb, 16) as unknown as number)
+global.cancelAnimationFrame = vi.fn((id: number) => clearTimeout(id as unknown as NodeJS.Timeout))
 
 // Mock performance API
 Object.defineProperty(global, "performance", {
@@ -54,7 +54,17 @@ global.MediaSource = vi.fn().mockImplementation(() => ({
 	sourceBuffers: [],
 	addSourceBuffer: vi.fn(),
 	endOfStream: vi.fn()
-}))
+})) as unknown as typeof MediaSource
+
+Object.defineProperty(global.MediaSource, "canConstructInDedicatedWorker", {
+	writable: true,
+	value: false
+})
+
+Object.defineProperty(global.MediaSource, "isTypeSupported", {
+	writable: true,
+	value: vi.fn((type: string) => true)
+})
 
 global.SourceBuffer = vi.fn().mockImplementation(() => ({
 	appendBuffer: vi.fn(),
@@ -173,6 +183,14 @@ global.AudioContext = vi.fn().mockImplementation(() => ({
 }))
 
 // Custom test utilities
+declare global {
+	var testUtils: {
+		simulateMediaEvent: (element: HTMLMediaElement, eventType: string, properties?: any) => void
+		simulateNetworkCondition: (condition: "slow" | "fast" | "offline") => void
+		simulateDevice: (device: "mobile" | "tablet" | "desktop") => void
+	}
+}
+
 global.testUtils = {
 	// Helper to simulate media events
 	simulateMediaEvent: (element: HTMLMediaElement, eventType: string, properties?: any) => {

package/src/types/assets.d.ts

@@ -0,0 +1,29 @@
+declare module "*.gif" {
+	const src: string
+	export default src
+}
+
+declare module "*.png" {
+	const src: string
+	export default src
+}
+
+declare module "*.jpg" {
+	const src: string
+	export default src
+}
+
+declare module "*.jpeg" {
+	const src: string
+	export default src
+}
+
+declare module "*.webp" {
+	const src: string
+	export default src
+}
+
+declare module "*.svg" {
+	const src: string
+	export default src
+}

package/src/types/index.ts

@@ -69,6 +69,7 @@ export interface MediaPlayerControls {
 	pause: () => void
 	toggle: () => void
 	seek: (time: number) => void
+	setCurrentTime: (time: number) => void
 	setVolume: (volume: number) => void
 	mute: () => void
 	unmute: () => void
@@ -89,6 +90,10 @@ export interface MediaPlayerConfig {
 	keyboardControls?: boolean
 	showControls?: boolean
 	customControls?: boolean
+	enablePerformanceMonitoring?: boolean
+	bufferingStrategy?: "aggressive" | "conservative" | "adaptive"
+	preloadStrategy?: "eager" | "lazy" | "progressive"
+	enableOptimizations?: boolean
 }
 
 export interface MediaPlayerProps extends MediaPlayerConfig {
@@ -188,3 +193,11 @@ export type VolumeOrientation = "horizontal" | "vertical"
 
 // Import BufferedRange type for external use
 import type { BufferedRange } from "../hooks/useVideoPlayer"
+
+// Media Player Instance for plugins
+export interface MediaPlayerInstance {
+	state: MediaPlayerState
+	controls: MediaPlayerControls
+	element: HTMLVideoElement | HTMLAudioElement | null
+	config: MediaPlayerConfig
+}

package/dist/context/media.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/media.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"media.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/context/store.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"store.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/context/store.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"store.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}