@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/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/dist/src/hooks/useKeyboardShortcuts.d.ts

@@ -0,0 +1,10 @@
+import type { VideoControls } from "./useVideoPlayer";
+interface UseKeyboardShortcutsProps {
+    videoControls: VideoControls;
+    toggleSubtitles: () => void;
+    takeScreenshot: (ctrlKey?: boolean) => void;
+    duration: number;
+}
+export declare function useKeyboardShortcuts({ videoControls, toggleSubtitles, takeScreenshot, duration }: UseKeyboardShortcutsProps): void;
+export {};
+//# sourceMappingURL=useKeyboardShortcuts.d.ts.map

package/dist/src/hooks/useKeyboardShortcuts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useKeyboardShortcuts.d.ts","sourceRoot":"","sources":["useKeyboardShortcuts.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAErD,UAAU,yBAAyB;IAClC,aAAa,EAAE,aAAa,CAAA;IAC5B,eAAe,EAAE,MAAM,IAAI,CAAA;IAC3B,cAAc,EAAE,CAAC,OAAO,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC3C,QAAQ,EAAE,MAAM,CAAA;CAChB;AAED,wBAAgB,oBAAoB,CAAC,EACpC,aAAa,EACb,eAAe,EACf,cAAc,EACd,QAAQ,EACR,EAAE,yBAAyB,QA0D3B"}

package/dist/src/hooks/useKeyboardShortcuts.js

@@ -0,0 +1,59 @@
+import { useEffect } from "react";
+export function useKeyboardShortcuts({ videoControls, toggleSubtitles, takeScreenshot, duration }) {
+    const handleKeyDown = (e) => {
+        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/dist/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/dist/src/hooks/useMediaControls.d.ts

@@ -0,0 +1,9 @@
+export declare function useMediaControls(isPlaying: boolean, showSettings: boolean): {
+    controlsVisible: boolean;
+    showVolumeSlider: boolean;
+    setShowVolumeSlider: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    handleMouseMove: () => void;
+    handleMouseEnter: () => void;
+    handleMouseLeave: () => void;
+};
+//# sourceMappingURL=useMediaControls.d.ts.map

package/dist/src/hooks/useMediaControls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMediaControls.d.ts","sourceRoot":"","sources":["useMediaControls.ts"],"names":[],"mappings":"AAEA,wBAAgB,gBAAgB,CAAC,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO;;;;;;;EAiDzE"}

package/dist/src/hooks/useMediaControls.js

@@ -0,0 +1,44 @@
+import { useState, useRef, useEffect } from "react";
+export function useMediaControls(isPlaying, showSettings) {
+    const [controlsVisible, setControlsVisible] = useState(true);
+    const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+    const hideTimeoutRef = useRef(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/dist/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/dist/src/hooks/useScreenshot.d.ts

@@ -0,0 +1,4 @@
+export declare function useScreenshot(videoRef: React.RefObject<HTMLVideoElement | null>): {
+    takeScreenshot: (ctrlKey?: boolean) => void;
+};
+//# sourceMappingURL=useScreenshot.d.ts.map

package/dist/src/hooks/useScreenshot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScreenshot.d.ts","sourceRoot":"","sources":["useScreenshot.ts"],"names":[],"mappings":"AAEA,wBAAgB,aAAa,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC;+BAC9C,OAAO;EAqDxC"}

package/dist/src/hooks/useScreenshot.js

@@ -0,0 +1,56 @@
+export function useScreenshot(videoRef) {
+    const takeScreenshot = (ctrlKey = 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/dist/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/dist/src/hooks/useSubtitles.d.ts

@@ -0,0 +1,8 @@
+export declare function useSubtitles(subtitleSrc?: string): {
+    subtitlesEnabled: boolean;
+    currentSubtitle: string;
+    toggleSubtitles: () => void;
+    getCurrentSubtitle: (currentTime: number) => string;
+    setCurrentSubtitle: import("react").Dispatch<import("react").SetStateAction<string>>;
+};
+//# sourceMappingURL=useSubtitles.d.ts.map

package/dist/src/hooks/useSubtitles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSubtitles.d.ts","sourceRoot":"","sources":["useSubtitles.ts"],"names":[],"mappings":"AAQA,wBAAgB,YAAY,CAAC,WAAW,CAAC,EAAE,MAAM;;;;sCAgDP,MAAM;;EAkC/C"}