@therealtinhtute/baroiplayer 1.0.0

package/src/hooks/useEnhancedSubtitles.ts

@@ -0,0 +1,258 @@
+import { useState, useCallback, useMemo, useEffect } from "react"
+
+interface SubtitleCue {
+  start: number
+  end: number
+  text: string
+}
+
+export interface SubtitleTrack {
+  id: string
+  label: string
+  language?: string
+  src?: string
+}
+
+export interface UseEnhancedSubtitlesOptions {
+  subtitleSrc?: string
+  subtitleTracks?: SubtitleTrack[]
+  defaultFontSize?: "small" | "medium" | "large"
+  onLoadError?: (error: Error) => void
+}
+
+export function useEnhancedSubtitles({
+  subtitleSrc,
+  subtitleTracks = [],
+  defaultFontSize = "medium",
+  onLoadError
+}: UseEnhancedSubtitlesOptions = {}) {
+  const [subtitlesEnabled, setSubtitlesEnabled] = useState(false)
+  const [subtitleCues, setSubtitleCues] = useState<SubtitleCue[]>([])
+  const [currentSubtitle, setCurrentSubtitle] = useState("")
+  const [currentTrackId, setCurrentTrackId] = useState<string | null>(null)
+  const [fontSize, setFontSize] = useState<"small" | "medium" | "large">(defaultFontSize)
+  const [loadError, setLoadError] = useState<Error | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  // Size mapping for subtitle font sizes
+  const sizeMap = {
+    small: "text-sm",
+    medium: "text-base", 
+    large: "text-lg"
+  }
+
+  // Determine if subtitles are available
+  const hasSubtitles = !!(subtitleSrc || (subtitleTracks && subtitleTracks.length > 0))
+
+  // Parse VTT/WebVTT timestamp
+  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
+    }
+
+  // Parse SRT timestamp
+  const parseSRTTime = (timeStr: string): number => {
+      // SRT format: 00:00:00,000 (hours:minutes:seconds,milliseconds)
+      const [time, ms] = timeStr.split(",")
+      const parts = (time || "").split(":")
+      const milliseconds = ms ? parseInt(ms, 10) / 1000 : 0
+      const seconds = parts[2] ? parseInt(parts[2], 10) : 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 + milliseconds
+    }
+
+  // Load and parse subtitle file
+  const loadSubtitles = async (url: string) => {
+      setIsLoading(true)
+      setLoadError(null)
+      
+      try {
+        const response = await fetch(url)
+        if (!response.ok) {
+          throw new Error(`Failed to load subtitles: ${response.status} ${response.statusText}`)
+        }
+        
+        const text = await response.text()
+        const cues: SubtitleCue[] = []
+        const lines = text.split("\n")
+        let i = 0
+
+        // Detect format (VTT or SRT)
+        const isVTT = text.includes("WEBVTT") || url.endsWith(".vtt")
+        const isSRT = url.endsWith(".srt") || /^\d+$/.test(lines[0]?.trim() || "")
+
+        if (isVTT) {
+          // Parse VTT format
+          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++
+          }
+        } else if (isSRT) {
+          // Parse SRT format
+          while (i < lines.length) {
+            // Skip the sequence number
+            if (/^\d+$/.test(lines[i]?.trim() || "")) {
+              i++
+              // Parse timestamp line
+              if (lines[i]?.includes("-->")) {
+                const [startStr, endStr] = (lines[i] || "").split("-->").map((s) => s.trim())
+                const start = parseSRTTime(startStr || "")
+                const end = parseSRTTime(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++
+          }
+        } else {
+          throw new Error("Unsupported subtitle format. Only VTT and SRT are supported.")
+        }
+
+        if (cues.length === 0) {
+          throw new Error("No subtitle cues found in file")
+        }
+
+        setSubtitleCues(cues)
+        setIsLoading(false)
+      } catch (error) {
+        const err = error instanceof Error ? error : new Error("Failed to load subtitles")
+        console.error("Failed to load subtitles:", err)
+        setLoadError(err)
+        setIsLoading(false)
+        setSubtitleCues([])
+        onLoadError?.(err)
+      }
+    }
+
+  // Get current subtitle text based on time
+  const getCurrentSubtitle = (currentTime: number) => {
+        if (!subtitlesEnabled || subtitleCues.length === 0) return ""
+        
+        const currentCue = subtitleCues.find(
+          (cue) => currentTime >= cue.start && currentTime <= cue.end
+        )
+        return currentCue?.text || ""
+      }
+
+  // Toggle subtitles on/off
+  const toggleSubtitles = () => {
+      setSubtitlesEnabled(prev => {
+        const newEnabled = !prev
+        
+        if (newEnabled && !loadError) {
+          // Try to load subtitles if not already loaded
+          if (subtitleCues.length === 0 && !isLoading) {
+            // Load default subtitle source or first track
+            const srcToLoad = subtitleSrc || subtitleTracks[0]?.src
+            if (srcToLoad) {
+              loadSubtitles(srcToLoad)
+              if (subtitleTracks[0]) {
+                setCurrentTrackId(subtitleTracks[0].id)
+              }
+            }
+          }
+        } else if (!newEnabled) {
+          setCurrentSubtitle("")
+        }
+        
+        return newEnabled
+      })
+    }
+
+  // Select a specific subtitle track
+  const selectSubtitleTrack = (trackId: string | null) => {
+      if (!trackId) {
+        // Turn off subtitles
+        setSubtitlesEnabled(false)
+        setCurrentTrackId(null)
+        setCurrentSubtitle("")
+        return
+      }
+
+      const track = subtitleTracks.find(t => t.id === trackId)
+      if (track?.src) {
+        setCurrentTrackId(trackId)
+        loadSubtitles(track.src)
+        setSubtitlesEnabled(true)
+      }
+    }
+
+  // Change subtitle font size
+  const changeSubtitleFontSize = (size: "small" | "medium" | "large") => {
+      setFontSize(size)
+    }
+
+  // Get CSS classes for subtitle display
+  const getSubtitleStyles = {
+        fontSize: sizeMap[fontSize],
+        className: `${sizeMap[fontSize]} font-medium`
+      }
+
+  // Clear subtitle on disable
+  useEffect(() => {
+    if (!subtitlesEnabled) {
+      setCurrentSubtitle("")
+    }
+  }, [subtitlesEnabled])
+
+  // Auto-load default subtitles on mount if available
+  useEffect(() => {
+    if (subtitleSrc && !subtitleCues.length && !loadError && !isLoading) {
+      // Don't auto-load, wait for user to enable
+      // This prevents errors on initial load
+    }
+  }, [])
+
+  return {
+    // State
+    subtitlesEnabled,
+    currentSubtitle,
+    subtitleCues,
+    currentTrackId,
+    fontSize,
+    loadError,
+    isLoading,
+    hasSubtitles,
+    
+    // Actions
+    toggleSubtitles,
+    selectSubtitleTrack,
+    changeSubtitleFontSize,
+    setCurrentSubtitle,
+    
+    // Utilities
+    getCurrentSubtitle,
+    getSubtitleStyles,
+    
+    // Track info
+    availableTracks: subtitleTracks
+  }
+}

package/src/hooks/useKeyboardShortcuts.ts

@@ -0,0 +1,74 @@
+import { useEffect, useCallback } from "react"
+import type { VideoControls } from "./useVideoPlayer"
+
+interface UseKeyboardShortcutsProps {
+	videoControls: VideoControls
+	toggleSubtitles: () => void
+	takeScreenshot: (ctrlKey?: boolean) => void
+	duration: number
+}
+
+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()
+    				video.currentTime = Math.max(0, video.currentTime - 5)
+    				break
+    			case "arrowright":
+    				e.preventDefault()
+    				video.currentTime = Math.min(duration, video.currentTime + 5)
+    				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

@@ -0,0 +1,52 @@
+import { useState, useRef, useCallback, useEffect } 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

@@ -0,0 +1,57 @@
+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

@@ -0,0 +1,91 @@
+import { useState, useCallback, useMemo, useEffect } 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
+	}
+}