@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/hooks/useKeyboardShortcuts.ts

@@ -1,106 +0,0 @@
-import { useCallback, useEffect } from "react"
-import type { VideoControls } from "./useVideoPlayer"
-
-interface UseKeyboardShortcutsProps {
-	videoControls: VideoControls
-	toggleSubtitles: () => void
-	takeScreenshot: (ctrlKey?: boolean) => void
-	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,
-	takeScreenshot,
-	duration
-}: UseKeyboardShortcutsProps) {
-	const handleKeyDown = (e: KeyboardEvent) => {
-		const video = document.querySelector("video")
-		if (!video) return
-
-		switch (e.key.toLowerCase()) {
-			case " ":
-			case "k":
-				e.preventDefault()
-				videoControls.togglePlay()
-				break
-			case "j":
-				e.preventDefault()
-				videoControls.seekBackward()
-				break
-			case "l":
-				e.preventDefault()
-				videoControls.seekForward()
-				break
-			case "arrowleft":
-				e.preventDefault()
-				const currentTime = Number.isFinite(video.currentTime) ? video.currentTime : 0
-				const newTimeLeft = Math.max(0, currentTime - 5)
-				safeSetCurrentTime(video, newTimeLeft)
-				break
-			case "arrowright":
-				e.preventDefault()
-				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()
-				video.volume = Math.min(1, video.volume + 0.1)
-				break
-			case "arrowdown":
-				e.preventDefault()
-				video.volume = Math.max(0, video.volume - 0.1)
-				break
-			case "m":
-				e.preventDefault()
-				videoControls.toggleMute()
-				break
-			case "f":
-				e.preventDefault()
-				videoControls.toggleFullscreen()
-				break
-			case "c":
-				e.preventDefault()
-				toggleSubtitles()
-				break
-			case "s":
-				e.preventDefault()
-				takeScreenshot(e.ctrlKey || e.metaKey)
-				break
-		}
-	}
-
-	useEffect(() => {
-		document.addEventListener("keydown", handleKeyDown)
-		return () => document.removeEventListener("keydown", handleKeyDown)
-	}, [handleKeyDown])
-}

package/src/hooks/useMediaControls.ts

@@ -1,52 +0,0 @@
-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 showControls = () => {
-		setControlsVisible(true)
-		if (hideTimeoutRef.current) {
-			clearTimeout(hideTimeoutRef.current)
-		}
-
-		if (isPlaying && !showSettings) {
-			hideTimeoutRef.current = setTimeout(() => {
-				setControlsVisible(false)
-			}, 3000)
-		}
-	}
-
-	const handleMouseMove = () => {
-		showControls()
-	}
-
-	const handleMouseEnter = () => {
-		setControlsVisible(true)
-	}
-
-	const handleMouseLeave = () => {
-		if (isPlaying) {
-			setControlsVisible(false)
-		}
-	}
-
-	useEffect(() => {
-		showControls()
-		return () => {
-			if (hideTimeoutRef.current) {
-				clearTimeout(hideTimeoutRef.current)
-			}
-		}
-	}, [showControls])
-
-	return {
-		controlsVisible,
-		showVolumeSlider,
-		setShowVolumeSlider,
-		handleMouseMove,
-		handleMouseEnter,
-		handleMouseLeave
-	}
-}

package/src/hooks/useScreenshot.ts

@@ -1,61 +0,0 @@
-import { useCallback } from "react"
-
-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
-				}
-
-				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,91 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react"
-
-interface SubtitleCue {
-	start: number
-	end: number
-	text: string
-}
-
-export function useSubtitles(subtitleSrc?: string) {
-	const [subtitlesEnabled, setSubtitlesEnabled] = useState(false)
-	const [subtitleCues, setSubtitleCues] = useState<SubtitleCue[]>([])
-	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 loadSubtitles = async (url: string) => {
-		try {
-			const response = await fetch(url)
-			const text = await response.text()
-
-			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 || "")
-
-					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++
-			}
-
-			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 || ""
-	}
-
-	const toggleSubtitles = () => {
-		setSubtitlesEnabled((prev) => {
-			const newEnabled = !prev
-			if (newEnabled && subtitleSrc && subtitleCues.length === 0) {
-				loadSubtitles(subtitleSrc)
-			} else if (!newEnabled) {
-				setCurrentSubtitle("")
-			}
-			return newEnabled
-		})
-	}
-
-	useEffect(() => {
-		if (!subtitlesEnabled) {
-			setCurrentSubtitle("")
-		}
-	}, [subtitlesEnabled])
-
-	return {
-		subtitlesEnabled,
-		currentSubtitle,
-		toggleSubtitles,
-		getCurrentSubtitle,
-		setCurrentSubtitle
-	}
-}

package/src/hooks/useVideoPlayer.ts

@@ -1,278 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from "react"
-
-export interface BufferedRange {
-	start: number
-	end: number
-	percentage: number
-}
-
-export interface VideoState {
-	isPlaying: boolean
-	currentTime: number
-	duration: number
-	volume: number
-	isMuted: boolean
-	isFullscreen: boolean
-	isLoading: boolean
-	isSeeking: boolean
-	isBuffering: boolean
-	bufferedRanges: BufferedRange[]
-}
-
-export interface VideoControls {
-	togglePlay: () => void
-	seekForward: (seconds?: number) => void
-	seekBackward: (seconds?: number) => void
-	toggleMute: () => void
-	setVolume: (volume: number) => void
-	toggleFullscreen: () => void
-	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>({
-		isPlaying: false,
-		currentTime: 0,
-		duration: 0,
-		volume: 1,
-		isMuted: false,
-		isFullscreen: false,
-		isLoading: true,
-		isSeeking: false,
-		isBuffering: false,
-		bufferedRanges: []
-	})
-
-	useEffect(() => {
-		const video = videoRef.current
-		if (!video) return
-
-		const handleTimeUpdate = () => {
-			setState((prev) => ({ ...prev, currentTime: video.currentTime }))
-		}
-
-		const handleLoadedMetadata = () => {
-			setState((prev) => ({ ...prev, duration: video.duration }))
-		}
-
-		const handlePlay = () => {
-			setState((prev) => ({ ...prev, isPlaying: true, isBuffering: false }))
-		}
-
-		const handlePause = () => {
-			setState((prev) => ({ ...prev, isPlaying: false }))
-		}
-
-		const handleVolumeChange = () => {
-			setState((prev) => ({
-				...prev,
-				volume: video.volume,
-				isMuted: video.muted
-			}))
-		}
-
-		// Loading state handlers
-		const handleLoadStart = () => {
-			setState((prev) => ({ ...prev, isLoading: true }))
-		}
-
-		const handleLoadedData = () => {
-			setState((prev) => ({ ...prev, isLoading: false }))
-		}
-
-		// Seeking state handlers
-		const handleSeeking = () => {
-			setState((prev) => ({ ...prev, isSeeking: true }))
-		}
-
-		const handleSeeked = () => {
-			setState((prev) => ({ ...prev, isSeeking: false }))
-		}
-
-		// Buffering state handlers
-		const handleWaiting = () => {
-			setState((prev) => ({ ...prev, isBuffering: true }))
-		}
-
-		const handlePlaying = () => {
-			setState((prev) => ({ ...prev, isBuffering: false, isLoading: false }))
-		}
-
-		const handleCanPlay = () => {
-			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: [] }))
-				return
-			}
-
-			const ranges: BufferedRange[] = []
-			for (let i = 0; i < video.buffered.length; i++) {
-				const start = video.buffered.start(i)
-				const end = video.buffered.end(i)
-				ranges.push({
-					start,
-					end,
-					percentage: ((end - start) / video.duration) * 100
-				})
-			}
-			setState((prev) => ({ ...prev, bufferedRanges: ranges }))
-		}
-
-		video.addEventListener("timeupdate", handleTimeUpdate)
-		video.addEventListener("loadedmetadata", handleLoadedMetadata)
-		video.addEventListener("play", handlePlay)
-		video.addEventListener("pause", handlePause)
-		video.addEventListener("volumechange", handleVolumeChange)
-		video.addEventListener("loadstart", handleLoadStart)
-		video.addEventListener("loadeddata", handleLoadedData)
-		video.addEventListener("seeking", handleSeeking)
-		video.addEventListener("seeked", handleSeeked)
-		video.addEventListener("waiting", handleWaiting)
-		video.addEventListener("playing", handlePlaying)
-		video.addEventListener("canplay", handleCanPlay)
-		video.addEventListener("progress", handleProgress)
-
-		return () => {
-			video.removeEventListener("timeupdate", handleTimeUpdate)
-			video.removeEventListener("loadedmetadata", handleLoadedMetadata)
-			video.removeEventListener("play", handlePlay)
-			video.removeEventListener("pause", handlePause)
-			video.removeEventListener("volumechange", handleVolumeChange)
-			video.removeEventListener("loadstart", handleLoadStart)
-			video.removeEventListener("loadeddata", handleLoadedData)
-			video.removeEventListener("seeking", handleSeeking)
-			video.removeEventListener("seeked", handleSeeked)
-			video.removeEventListener("waiting", handleWaiting)
-			video.removeEventListener("playing", handlePlaying)
-			video.removeEventListener("canplay", handleCanPlay)
-			video.removeEventListener("progress", handleProgress)
-		}
-	}, [])
-
-	const togglePlay = () => {
-		const video = videoRef.current
-		if (!video) return
-
-		if (state.isPlaying) {
-			video.pause()
-		} else {
-			video.play()
-		}
-	}
-
-	const seekForward = (seconds = 10) => {
-		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
-
-		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 setVolume = (volume: number) => {
-		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 seekTo = (time: number) => {
-		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,
-		seekForward,
-		seekBackward,
-		toggleMute,
-		setVolume,
-		toggleFullscreen,
-		seekTo
-	}
-
-	return {
-		videoRef,
-		state,
-		controls
-	}
-}

package/src/icons/components/FullscreenIcon.tsx

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

package/src/icons/components/SettingsIcon.tsx

@@ -1,37 +0,0 @@
-import { useCustomIcon, useIconTheme } from "../provider"
-import type { IconProps } from "../types"
-
-export function SettingsIcon(props: IconProps) {
-	const theme = useIconTheme()
-	const customIcon = useCustomIcon("settings")
-
-	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}>
-			<circle cx="12" cy="12" r="3" />
-			<path d="M12 1v6m0 6v6m11-7h-6m-6 0H1m10.5-4A1.5 1.5 0 0 1 15 12a1.5 1.5 0 0 1-3.5 0 1.5 1.5 0 0 1 3.5 0Z" />
-		</svg>
-	)
-}

package/src/icons/components/animated/LoadingIcon.tsx

@@ -1,27 +0,0 @@
-import { useCustomIcon, useIconTheme } from "../../provider"
-import type { IconProps } from "../../types"
-
-export function LoadingIcon(props: IconProps) {
-	const theme = useIconTheme()
-	const customIcon = useCustomIcon("loading")
-
-	if (customIcon) {
-		return customIcon(props)
-	}
-
-	const { size = theme.size, color = theme.color, className = theme.className, ...rest } = props
-
-	return (
-		<svg
-			width={size}
-			height={size}
-			viewBox="0 0 24 24"
-			fill="none"
-			className={`animate-spin ${className || ""}`}
-			aria-hidden="true"
-			{...rest}>
-			<circle cx="12" cy="12" r="10" stroke={color} strokeWidth="4" strokeOpacity="0.25" />
-			<path fill={color} d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-		</svg>
-	)
-}