@therealtinhtute/baroiplayer 1.0.8 → 1.2.0

package/src/hooks/useMediaControls.ts

@@ -1,36 +1,36 @@
-import { useState, useRef, useCallback, useEffect } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 export function useMediaControls(isPlaying: boolean, showSettings: boolean) {
 	const [controlsVisible, setControlsVisible] = useState(true)
 	const [showVolumeSlider, setShowVolumeSlider] = useState(false)
-  const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
+	const hideTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
 	const showControls = () => {
-    		setControlsVisible(true)
-    		if (hideTimeoutRef.current) {
-    			clearTimeout(hideTimeoutRef.current)
-    		}
-
-    		if (isPlaying && !showSettings) {
-    			hideTimeoutRef.current = setTimeout(() => {
-    				setControlsVisible(false)
-    			}, 3000)
-    		}
-    	}
+		setControlsVisible(true)
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current)
+		}
+
+		if (isPlaying && !showSettings) {
+			hideTimeoutRef.current = setTimeout(() => {
+				setControlsVisible(false)
+			}, 3000)
+		}
+	}
 
 	const handleMouseMove = () => {
-    		showControls()
-    	}
+		showControls()
+	}
 
 	const handleMouseEnter = () => {
-    		setControlsVisible(true)
-    	}
+		setControlsVisible(true)
+	}
 
 	const handleMouseLeave = () => {
-    		if (isPlaying) {
-    			setControlsVisible(false)
-    		}
-    	}
+		if (isPlaying) {
+			setControlsVisible(false)
+		}
+	}
 
 	useEffect(() => {
 		showControls()
@@ -49,4 +49,4 @@ export function useMediaControls(isPlaying: boolean, showSettings: boolean) {
 		handleMouseEnter,
 		handleMouseLeave
 	}
-}
+}

package/src/hooks/useScreenshot.ts

@@ -2,56 +2,60 @@ import { useCallback } from "react"
 
 export function useScreenshot(videoRef: React.RefObject<HTMLVideoElement | null>) {
 	const takeScreenshot = (ctrlKey: boolean = false) => {
-    		if (!videoRef.current) return
+		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
+		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 {
+			// 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
-    				}
+			// Try to export the canvas
+			canvas.toBlob((blob) => {
+				if (!blob) {
+					console.error("Failed to create blob from canvas")
+					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")
-    					}
-    				} 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 (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"))
-    			}
-    		}
-    	}
+				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")
+					}
+				} 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 (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"))
+			}
+		}
+	}
 
 	return { takeScreenshot }
-}
+}

package/src/hooks/useSubtitles.ts

@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 
 interface SubtitleCue {
 	start: number
@@ -12,68 +12,68 @@ export function useSubtitles(subtitleSrc?: string) {
 	const [currentSubtitle, setCurrentSubtitle] = useState("")
 
 	const parseVTTTime = (timeStr: string): number => {
-    		const parts = timeStr.split(":")
-    		const seconds = parts[2] ? parseFloat(parts[2]) : 0
-    		const minutes = parts[1] ? parseInt(parts[1], 10) * 60 : 0
-    		const hours = parts[0] ? parseInt(parts[0], 10) * 3600 : 0
-    		return hours + minutes + seconds
-    	}
+		const parts = timeStr.split(":")
+		const seconds = parts[2] ? parseFloat(parts[2]) : 0
+		const minutes = parts[1] ? parseInt(parts[1], 10) * 60 : 0
+		const hours = parts[0] ? parseInt(parts[0], 10) * 3600 : 0
+		return hours + minutes + seconds
+	}
 
 	const loadSubtitles = async (url: string) => {
-    		try {
-    			const response = await fetch(url)
-    			const text = await response.text()
+		try {
+			const response = await fetch(url)
+			const text = await response.text()
 
-    			const cues: SubtitleCue[] = []
-    			const lines = text.split("\n")
-    			let i = 0
+			const cues: SubtitleCue[] = []
+			const lines = text.split("\n")
+			let i = 0
 
-    			while (i < lines.length) {
-    				if (lines[i]?.includes("-->")) {
-    					const [startStr, endStr] = (lines[i] || "").split("-->").map((s) => s.trim())
-    					const start = parseVTTTime(startStr || "")
-    					const end = parseVTTTime(endStr || "")
+			while (i < lines.length) {
+				if (lines[i]?.includes("-->")) {
+					const [startStr, endStr] = (lines[i] || "").split("-->").map((s) => s.trim())
+					const start = parseVTTTime(startStr || "")
+					const end = parseVTTTime(endStr || "")
 
-    					i++
-    					let subtitleText = ""
-    					while (i < lines.length && lines[i]?.trim() !== "") {
-    						subtitleText += (subtitleText ? " " : "") + lines[i]?.trim()
-    						i++
-    					}
+					i++
+					let subtitleText = ""
+					while (i < lines.length && lines[i]?.trim() !== "") {
+						subtitleText += (subtitleText ? " " : "") + lines[i]?.trim()
+						i++
+					}
 
-    					if (subtitleText) {
-    						cues.push({ start, end, text: subtitleText })
-    					}
-    				}
-    				i++
-    			}
+					if (subtitleText) {
+						cues.push({ start, end, text: subtitleText })
+					}
+				}
+				i++
+			}
 
-    			setSubtitleCues(cues)
-    		} catch (error) {
-    			console.error("Failed to load subtitles:", error)
-    		}
-    	}
+			setSubtitleCues(cues)
+		} catch (error) {
+			console.error("Failed to load subtitles:", error)
+		}
+	}
 
 	const getCurrentSubtitle = (currentTime: number) => {
-    			if (!subtitlesEnabled || subtitleCues.length === 0) return ""
-    			
-    			const currentCue = subtitleCues.find(
-    				(cue) => currentTime >= cue.start && currentTime <= cue.end
-    			)
-    			return currentCue?.text || ""
-    		}
+		if (!subtitlesEnabled || subtitleCues.length === 0) return ""
+
+		const currentCue = subtitleCues.find(
+			(cue) => currentTime >= cue.start && currentTime <= cue.end
+		)
+		return currentCue?.text || ""
+	}
 
 	const toggleSubtitles = () => {
-    		setSubtitlesEnabled(prev => {
-    			const newEnabled = !prev
-    			if (newEnabled && subtitleSrc && subtitleCues.length === 0) {
-    				loadSubtitles(subtitleSrc)
-    			} else if (!newEnabled) {
-    				setCurrentSubtitle("")
-    			}
-    			return newEnabled
-    		})
-    	}
+		setSubtitlesEnabled((prev) => {
+			const newEnabled = !prev
+			if (newEnabled && subtitleSrc && subtitleCues.length === 0) {
+				loadSubtitles(subtitleSrc)
+			} else if (!newEnabled) {
+				setCurrentSubtitle("")
+			}
+			return newEnabled
+		})
+	}
 
 	useEffect(() => {
 		if (!subtitlesEnabled) {
@@ -88,4 +88,4 @@ export function useSubtitles(subtitleSrc?: string) {
 		getCurrentSubtitle,
 		setCurrentSubtitle
 	}
-}
+}

package/src/hooks/useVideoPlayer.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, useCallback, useEffect } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 
 export interface BufferedRange {
 	start: number
@@ -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>({
@@ -49,23 +75,23 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 		if (!video) return
 
 		const handleTimeUpdate = () => {
-			setState(prev => ({ ...prev, currentTime: video.currentTime }))
+			setState((prev) => ({ ...prev, currentTime: video.currentTime }))
 		}
 
 		const handleLoadedMetadata = () => {
-			setState(prev => ({ ...prev, duration: video.duration }))
+			setState((prev) => ({ ...prev, duration: video.duration }))
 		}
 
 		const handlePlay = () => {
-			setState(prev => ({ ...prev, isPlaying: true, isBuffering: false }))
+			setState((prev) => ({ ...prev, isPlaying: true, isBuffering: false }))
 		}
 
 		const handlePause = () => {
-			setState(prev => ({ ...prev, isPlaying: false }))
+			setState((prev) => ({ ...prev, isPlaying: false }))
 		}
 
 		const handleVolumeChange = () => {
-			setState(prev => ({
+			setState((prev) => ({
 				...prev,
 				volume: video.volume,
 				isMuted: video.muted
@@ -74,39 +100,39 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 
 		// Loading state handlers
 		const handleLoadStart = () => {
-			setState(prev => ({ ...prev, isLoading: true }))
+			setState((prev) => ({ ...prev, isLoading: true }))
 		}
 
 		const handleLoadedData = () => {
-			setState(prev => ({ ...prev, isLoading: false }))
+			setState((prev) => ({ ...prev, isLoading: false }))
 		}
 
 		// Seeking state handlers
 		const handleSeeking = () => {
-			setState(prev => ({ ...prev, isSeeking: true }))
+			setState((prev) => ({ ...prev, isSeeking: true }))
 		}
 
 		const handleSeeked = () => {
-			setState(prev => ({ ...prev, isSeeking: false }))
+			setState((prev) => ({ ...prev, isSeeking: false }))
 		}
 
 		// Buffering state handlers
 		const handleWaiting = () => {
-			setState(prev => ({ ...prev, isBuffering: true }))
+			setState((prev) => ({ ...prev, isBuffering: true }))
 		}
 
 		const handlePlaying = () => {
-			setState(prev => ({ ...prev, isBuffering: false, isLoading: false }))
+			setState((prev) => ({ ...prev, isBuffering: false, isLoading: false }))
 		}
 
 		const handleCanPlay = () => {
-			setState(prev => ({ ...prev, isLoading: false, isBuffering: false }))
+			setState((prev) => ({ ...prev, isLoading: false, isBuffering: false }))
 		}
 
 		// Progress handler for buffered ranges
 		const handleProgress = () => {
 			if (!video.buffered || video.buffered.length === 0 || video.duration === 0) {
-				setState(prev => ({ ...prev, bufferedRanges: [] }))
+				setState((prev) => ({ ...prev, bufferedRanges: [] }))
 				return
 			}
 
@@ -120,7 +146,7 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 					percentage: ((end - start) / video.duration) * 100
 				})
 			}
-			setState(prev => ({ ...prev, bufferedRanges: ranges }))
+			setState((prev) => ({ ...prev, bufferedRanges: ranges }))
 		}
 
 		video.addEventListener("timeupdate", handleTimeUpdate)
@@ -155,64 +181,84 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 	}, [])
 
 	const togglePlay = () => {
-    		const video = videoRef.current
-    		if (!video) return
+		const video = videoRef.current
+		if (!video) return
 
-    		if (state.isPlaying) {
-    			video.pause()
-    		} else {
-    			video.play()
-    		}
-    	}
+		if (state.isPlaying) {
+			video.pause()
+		} else {
+			video.play()
+		}
+	}
 
 	const seekForward = (seconds = 10) => {
-    		const video = videoRef.current
-    		if (!video) return
-    		video.currentTime = Math.min(state.duration, video.currentTime + seconds)
-    	}
+		const video = videoRef.current
+		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 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 video = videoRef.current
+		if (!video) return
+
+		const currentTime = Number.isFinite(video.currentTime) ? video.currentTime : 0
+		const newTime = Math.max(0, currentTime - seconds)
+		safeSetCurrentTime(video, newTime)
+	}
 
 	const toggleMute = () => {
-    		const video = videoRef.current
-    		if (!video) return
-    		video.muted = !state.isMuted
-    	}
+		const video = videoRef.current
+		if (!video) return
+		video.muted = !state.isMuted
+	}
 
 	const setVolume = (volume: number) => {
-    		const video = videoRef.current
-    		if (!video) return
-    		video.volume = volume
-    		if (volume > 0 && state.isMuted) {
-    			video.muted = false
-    		}
-    	}
+		const video = videoRef.current
+		if (!video) return
+		video.volume = volume
+		if (volume > 0 && state.isMuted) {
+			video.muted = false
+		}
+	}
 
 	const toggleFullscreen = () => {
-    		const container = containerRef.current
-    		if (!container) return
-
-    		if (!state.isFullscreen) {
-    			if (container.requestFullscreen) {
-    				container.requestFullscreen()
-    			}
-    		} else {
-    			if (document.exitFullscreen) {
-    				document.exitFullscreen()
-    			}
-    		}
-    		setState(prev => ({ ...prev, isFullscreen: !prev.isFullscreen }))
-    	}
+		const container = containerRef.current
+		if (!container) return
+
+		if (!state.isFullscreen) {
+			if (container.requestFullscreen) {
+				container.requestFullscreen()
+			}
+		} else {
+			if (document.exitFullscreen) {
+				document.exitFullscreen()
+			}
+		}
+		setState((prev) => ({ ...prev, isFullscreen: !prev.isFullscreen }))
+	}
 
 	const seekTo = (time: number) => {
-    		const video = videoRef.current
-    		if (!video || state.duration === 0) return
-    		video.currentTime = Math.max(0, Math.min(state.duration, time))
-    	}
+		const video = videoRef.current
+		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 = {
 		togglePlay,
@@ -229,4 +275,4 @@ export function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | nu
 		state,
 		controls
 	}
-}
+}

package/src/icons/components/FullscreenIcon.tsx

@@ -1,37 +1,36 @@
-import type { IconProps } from '../types'
-import { useIconTheme, useCustomIcon } from '../provider'
+import { useCustomIcon, useIconTheme } from "../provider"
+import type { IconProps } from "../types"
 
 export function FullscreenIcon(props: IconProps) {
-  const theme = useIconTheme()
-  const customIcon = useCustomIcon('fullscreen')
-  
-  if (customIcon) {
-    return customIcon(props)
-  }
-  
-  const {
-    size = theme.size,
-    color = theme.color,
-    strokeWidth = theme.strokeWidth,
-    className = theme.className,
-    ...rest
-  } = props
-  
-  return (
-    <svg
-      width={size}
-      height={size}
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke={color}
-      strokeWidth={strokeWidth}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      className={className}
-      aria-hidden="true"
-      {...rest}
-    >
-      <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-    </svg>
-  )
-}
+	const theme = useIconTheme()
+	const customIcon = useCustomIcon("fullscreen")
+
+	if (customIcon) {
+		return customIcon(props)
+	}
+
+	const {
+		size = theme.size,
+		color = theme.color,
+		strokeWidth = theme.strokeWidth,
+		className = theme.className,
+		...rest
+	} = props
+
+	return (
+		<svg
+			width={size}
+			height={size}
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke={color}
+			strokeWidth={strokeWidth}
+			strokeLinecap="round"
+			strokeLinejoin="round"
+			className={className}
+			aria-hidden="true"
+			{...rest}>
+			<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+		</svg>
+	)
+}