@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/src/hooks/useEnhancedSubtitles.js

@@ -0,0 +1,205 @@
+import { useState, useEffect } from "react";
+export function useEnhancedSubtitles({ subtitleSrc, subtitleTracks = [], defaultFontSize = "medium", onLoadError } = {}) {
+    const [subtitlesEnabled, setSubtitlesEnabled] = useState(false);
+    const [subtitleCues, setSubtitleCues] = useState([]);
+    const [currentSubtitle, setCurrentSubtitle] = useState("");
+    const [currentTrackId, setCurrentTrackId] = useState(null);
+    const [fontSize, setFontSize] = useState(defaultFontSize);
+    const [loadError, setLoadError] = useState(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) => {
+        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) => {
+        // 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) => {
+        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 = [];
+            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) => {
+        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) => {
+        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) => {
+        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.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/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/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/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/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/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/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/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/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/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/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"}

package/src/hooks/useSubtitles.js

@@ -0,0 +1,73 @@
+import { useState, useEffect } from "react";
+export function useSubtitles(subtitleSrc) {
+    const [subtitlesEnabled, setSubtitlesEnabled] = useState(false);
+    const [subtitleCues, setSubtitleCues] = useState([]);
+    const [currentSubtitle, setCurrentSubtitle] = useState("");
+    const parseVTTTime = (timeStr) => {
+        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) => {
+        try {
+            const response = await fetch(url);
+            const text = await response.text();
+            const cues = [];
+            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) => {
+        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.d.ts

@@ -0,0 +1,32 @@
+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;
+}
+export declare function useVideoPlayer(containerRef: React.RefObject<HTMLDivElement | null>): {
+    videoRef: import("react").RefObject<HTMLVideoElement | null>;
+    state: VideoState;
+    controls: VideoControls;
+};
+//# sourceMappingURL=useVideoPlayer.d.ts.map

package/src/hooks/useVideoPlayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVideoPlayer.d.ts","sourceRoot":"","sources":["useVideoPlayer.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,aAAa;IAC7B,KAAK,EAAE,MAAM,CAAA;IACb,GAAG,EAAE,MAAM,CAAA;IACX,UAAU,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,UAAU;IAC1B,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,MAAM,CAAA;IACnB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,EAAE,MAAM,CAAA;IACd,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY,EAAE,OAAO,CAAA;IACrB,SAAS,EAAE,OAAO,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,aAAa,EAAE,CAAA;CAC/B;AAED,MAAM,WAAW,aAAa;IAC7B,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,YAAY,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IACxC,UAAU,EAAE,MAAM,IAAI,CAAA;IACtB,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,MAAM,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAED,wBAAgB,cAAc,CAAC,YAAY,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC;;;;EAwMlF"}