reviewhver 0.0.1

package/dist/components/Molecules/DashPlayer/ShakaPlayer.js

@@ -0,0 +1,704 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+const formatTime = (seconds) => {
+    if (!seconds || isNaN(seconds))
+        return "0:00";
+    const h = Math.floor(seconds / 3600);
+    const m = Math.floor((seconds % 3600) / 60);
+    const s = Math.floor(seconds % 60);
+    if (h > 0)
+        return `${h}:${m.toString().padStart(2, "0")}:${s.toString().padStart(2, "0")}`;
+    return `${m}:${s.toString().padStart(2, "0")}`;
+};
+const SPEED_OPTIONS = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+const DEFAULT_SEGMENT_COLORS = [
+    "rgba(99, 179, 237, 0.45)",
+    "rgba(154, 230, 180, 0.45)",
+    "rgba(252, 211, 77, 0.45)",
+    "rgba(252, 129, 74, 0.45)",
+    "rgba(183, 148, 244, 0.45)",
+];
+// ─── SVG Icons ────────────────────────────────────────────────────────────────
+const IconPlay = () => ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: (0, jsx_runtime_1.jsx)("polygon", { points: "4,2 14,9 4,16" }) }));
+const IconPause = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "2", width: "4", height: "14", rx: "1" }), (0, jsx_runtime_1.jsx)("rect", { x: "11", y: "2", width: "4", height: "14", rx: "1" })] }));
+const IconSkipPrev = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: [(0, jsx_runtime_1.jsx)("rect", { x: "3", y: "3", width: "2.5", height: "12", rx: "1" }), (0, jsx_runtime_1.jsx)("polygon", { points: "14,3 6,9 14,15" })] }));
+const IconSkipNext = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: [(0, jsx_runtime_1.jsx)("polygon", { points: "4,3 12,9 4,15" }), (0, jsx_runtime_1.jsx)("rect", { x: "12.5", y: "3", width: "2.5", height: "12", rx: "1" })] }));
+const IconVolume = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: [(0, jsx_runtime_1.jsx)("polygon", { points: "2,6 2,12 6,12 10,16 10,2 6,6" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.5 5.5 C14.5 7 14.5 11 12.5 12.5", stroke: "white", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M14.5 3.5 C17.5 6 17.5 12 14.5 14.5", stroke: "white", strokeWidth: "1.5", fill: "none", strokeLinecap: "round" })] }));
+const IconMuted = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: [(0, jsx_runtime_1.jsx)("polygon", { points: "2,6 2,12 6,12 10,16 10,2 6,6" }), (0, jsx_runtime_1.jsx)("line", { x1: "13", y1: "6", x2: "17", y2: "12", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" }), (0, jsx_runtime_1.jsx)("line", { x1: "17", y1: "6", x2: "13", y2: "12", stroke: "white", strokeWidth: "1.8", strokeLinecap: "round" })] }));
+const IconFullscreen = () => ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: (0, jsx_runtime_1.jsx)("path", { d: "M2 6V2h4M12 2h4v4M16 12v4h-4M6 16H2v-4", stroke: "white", strokeWidth: "1.8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+const IconExitFullscreen = () => ((0, jsx_runtime_1.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 18 18", fill: "white", children: (0, jsx_runtime_1.jsx)("path", { d: "M6 2v4H2M16 6h-4V2M2 12h4v4M12 16v-4h4", stroke: "white", strokeWidth: "1.8", fill: "none", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+// ─── Control button with hover border ─────────────────────────────────────────
+const CtrlBtn = ({ onClick, label, children, disabled = false }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: disabled ? undefined : onClick, "aria-label": label, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            background: hovered && !disabled ? "rgba(255,255,255,0.1)" : "none",
+            border: `1px solid ${hovered && !disabled ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.18)"}`,
+            cursor: disabled ? "default" : "pointer",
+            padding: "5px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: "8px",
+            opacity: disabled ? 0.35 : 1,
+            flexShrink: 0,
+            transition: "border-color 0.15s ease, background-color 0.15s ease",
+        }, children: children }));
+};
+// ─── ShakaPlayer ──────────────────────────────────────────────────────────────
+const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = false, poster, controls = true, authToken, startTime = null, endTime = null, onPlay, onPause, onEnded, onError, onReady, onBuffer, style = {}, onSeek, onRateChange, onVolumeChange, onMuteToggle, segments = [], }, ref) => {
+    const videoRef = (0, react_1.useRef)(null);
+    const [playerInstance, setPlayerInstance] = (0, react_1.useState)(null);
+    const [isPlayerReady, setIsPlayerReady] = (0, react_1.useState)(false);
+    const [, setIsPlayingOnHover] = (0, react_1.useState)(playing);
+    const endTimeCheckInterval = (0, react_1.useRef)(null);
+    // Watch time tracking
+    const watchStartTime = (0, react_1.useRef)(null);
+    const totalWatchTime = (0, react_1.useRef)(0);
+    const lastTime = (0, react_1.useRef)(0);
+    const lastMuted = (0, react_1.useRef)(muted);
+    const lastVolume = (0, react_1.useRef)(1);
+    const lastRate = (0, react_1.useRef)(1);
+    const wallClockStart = (0, react_1.useRef)(null);
+    const wallClockTotal = (0, react_1.useRef)(0);
+    const eventHandlersAttached = (0, react_1.useRef)(false);
+    // ── UI state (for custom controls rendering) ──────────────────────────────
+    const [uiCurrentTime, setUiCurrentTime] = (0, react_1.useState)(0);
+    const [uiDuration, setUiDuration] = (0, react_1.useState)(0);
+    const [uiPlaying, setUiPlaying] = (0, react_1.useState)(false);
+    const [uiMuted, setUiMuted] = (0, react_1.useState)(muted);
+    const [uiPlaybackRate, setUiPlaybackRate] = (0, react_1.useState)(1);
+    const [hoveredSegmentId, setHoveredSegmentId] = (0, react_1.useState)(null);
+    const [showSpeedMenu, setShowSpeedMenu] = (0, react_1.useState)(false);
+    const [isFullscreen, setIsFullscreen] = (0, react_1.useState)(false);
+    const [seekingUI, setSeekingUI] = (0, react_1.useState)(false);
+    const [showControls, setShowControls] = (0, react_1.useState)(true);
+    const seekbarRef = (0, react_1.useRef)(null);
+    const containerRef = (0, react_1.useRef)(null);
+    const speedMenuRef = (0, react_1.useRef)(null);
+    const hideTimerRef = (0, react_1.useRef)(null);
+    const revealControls = () => {
+        setShowControls(true);
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(() => setShowControls(false), 3000);
+    };
+    const handleContainerMouseMove = () => revealControls();
+    const handleContainerMouseLeave = () => {
+        clearTimeout(hideTimerRef.current);
+        hideTimerRef.current = setTimeout(() => setShowControls(false), 500);
+    };
+    const handleContainerClick = () => revealControls();
+    // ── Imperative handle ────────────────────────────────────────────────────
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        getCurrentTime: () => videoRef?.current?.currentTime || 0,
+        getTotalWatchTime: () => {
+            if (watchStartTime.current !== null && wallClockStart.current !== null && !videoRef.current.paused) {
+                const elapsed = (Date.now() - wallClockStart.current) / 1000;
+                return wallClockTotal.current + elapsed;
+            }
+            return wallClockTotal.current;
+        },
+        logWatchTime: () => logWatchTime(),
+        seekTo: (seconds) => {
+            if (videoRef.current) {
+                videoRef.current.currentTime = seconds;
+                setUiCurrentTime(seconds);
+            }
+        },
+    }));
+    const logWatchTime = () => {
+        if (watchStartTime.current !== null && wallClockStart.current !== null) {
+            const elapsed = (Date.now() - wallClockStart.current) / 1000;
+            wallClockTotal.current += elapsed;
+            watchStartTime.current = null;
+            wallClockStart.current = null;
+        }
+    };
+    // ── UI state sync (timeupdate, durationchange, etc.) ─────────────────────
+    (0, react_1.useEffect)(() => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        const onTimeUpdateUI = () => setUiCurrentTime(video.currentTime);
+        const onDurationUI = () => { if (video.duration && !isNaN(video.duration))
+            setUiDuration(video.duration); };
+        const onPlayUI = () => setUiPlaying(true);
+        const onPauseUI = () => setUiPlaying(false);
+        const onEndedUI = () => setUiPlaying(false);
+        const onVolumeChangeUI = () => setUiMuted(video.muted);
+        const onRateChangeUI = () => setUiPlaybackRate(video.playbackRate);
+        video.addEventListener("timeupdate", onTimeUpdateUI);
+        video.addEventListener("durationchange", onDurationUI);
+        video.addEventListener("loadedmetadata", onDurationUI);
+        video.addEventListener("play", onPlayUI);
+        video.addEventListener("pause", onPauseUI);
+        video.addEventListener("ended", onEndedUI);
+        video.addEventListener("volumechange", onVolumeChangeUI);
+        video.addEventListener("ratechange", onRateChangeUI);
+        return () => {
+            video.removeEventListener("timeupdate", onTimeUpdateUI);
+            video.removeEventListener("durationchange", onDurationUI);
+            video.removeEventListener("loadedmetadata", onDurationUI);
+            video.removeEventListener("play", onPlayUI);
+            video.removeEventListener("pause", onPauseUI);
+            video.removeEventListener("ended", onEndedUI);
+            video.removeEventListener("volumechange", onVolumeChangeUI);
+            video.removeEventListener("ratechange", onRateChangeUI);
+        };
+    }, []);
+    // ── Fullscreen sync ───────────────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        const onChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onChange);
+        return () => document.removeEventListener("fullscreenchange", onChange);
+    }, []);
+    // ── Speed menu click-outside ──────────────────────────────────────────────
+    (0, react_1.useEffect)(() => {
+        if (!showSpeedMenu)
+            return;
+        const handler = (e) => {
+            if (speedMenuRef.current && !speedMenuRef.current.contains(e.target)) {
+                setShowSpeedMenu(false);
+            }
+        };
+        document.addEventListener("mousedown", handler);
+        return () => document.removeEventListener("mousedown", handler);
+    }, [showSpeedMenu]);
+    // ── Seekbar drag ──────────────────────────────────────────────────────────
+    const seekToClientX = (clientX) => {
+        const bar = seekbarRef.current;
+        const video = videoRef.current;
+        if (!bar || !video || !uiDuration)
+            return;
+        const { left, width } = bar.getBoundingClientRect();
+        const fraction = Math.min(Math.max((clientX - left) / width, 0), 1);
+        video.currentTime = fraction * uiDuration;
+        setUiCurrentTime(fraction * uiDuration);
+    };
+    (0, react_1.useEffect)(() => {
+        if (!seekingUI)
+            return;
+        const onMove = (e) => seekToClientX(e.clientX);
+        const onUp = (e) => { setSeekingUI(false); seekToClientX(e.clientX); };
+        window.addEventListener("mousemove", onMove);
+        window.addEventListener("mouseup", onUp);
+        return () => {
+            window.removeEventListener("mousemove", onMove);
+            window.removeEventListener("mouseup", onUp);
+        };
+    }, [seekingUI, uiDuration]);
+    // ── Control handlers ──────────────────────────────────────────────────────
+    const handleTogglePlay = () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.paused ? video.play() : video.pause();
+    };
+    const handleToggleMute = () => {
+        const video = videoRef.current;
+        if (!video)
+            return;
+        video.muted = !video.muted;
+        setUiMuted(video.muted);
+    };
+    const handleFullscreen = () => {
+        if (!document.fullscreenElement) {
+            containerRef.current?.requestFullscreen();
+        }
+        else {
+            document.exitFullscreen();
+        }
+    };
+    const handleSpeedChange = (rate) => {
+        if (videoRef.current)
+            videoRef.current.playbackRate = rate;
+        setUiPlaybackRate(rate);
+        setShowSpeedMenu(false);
+    };
+    // ── Segment helpers ───────────────────────────────────────────────────────
+    console.log("[ShakaPlayer] segments prop:", segments, "| length:", segments.length);
+    console.log("[ShakaPlayer] uiDuration:", uiDuration, "| controls:", controls, "| showControls:", showControls);
+    const segmentBands = segments.map((seg, i) => ({
+        ...seg,
+        end: seg.end ?? segments[i + 1]?.start ?? uiDuration,
+    }));
+    console.log("[ShakaPlayer] segmentBands (computed):", JSON.stringify(segmentBands));
+    console.log("[ShakaPlayer] Will render segment bands?", uiDuration > 0 && segmentBands.length > 0);
+    const activeSegment = segmentBands.find((seg) => uiCurrentTime >= seg.start && uiCurrentTime < seg.end) ?? null;
+    const activeSegmentId = activeSegment?.id ?? null;
+    const activeIdx = segmentBands.findIndex((s) => s.id === activeSegmentId);
+    const nextSegment = activeIdx >= 0 ? segmentBands[activeIdx + 1] ?? null : null;
+    const prevSegment = activeIdx > 0 ? segmentBands[activeIdx - 1] : segmentBands[0] ?? null;
+    const handleSkipPrev = () => {
+        if (!prevSegment || !videoRef.current)
+            return;
+        videoRef.current.currentTime = prevSegment.start;
+        setUiCurrentTime(prevSegment.start);
+    };
+    const handleSkipNext = () => {
+        if (!nextSegment || !videoRef.current)
+            return;
+        videoRef.current.currentTime = nextSegment.start;
+        setUiCurrentTime(nextSegment.start);
+    };
+    const handleSegmentMouseDown = (e, seg) => {
+        e.stopPropagation();
+        if (!videoRef.current)
+            return;
+        videoRef.current.currentTime = seg.start;
+        setUiCurrentTime(seg.start);
+    };
+    // ── Existing Shaka init & lifecycle effects ────────────────────────────────
+    const initShakaPlayer = async () => {
+        if (playerInstance) {
+            try {
+                await playerInstance.destroy();
+            }
+            catch (e) {
+                console.error("Error destroying previous player:", e);
+            }
+        }
+        try {
+            const shakaModule = await Promise.resolve().then(() => __importStar(require("shaka-player/dist/shaka-player.compiled.js")));
+            const shaka = shakaModule.default || shakaModule;
+            if (!shaka.Player.isBrowserSupported()) {
+                console.error("Shaka: Browser not supported!");
+                if (onError)
+                    onError({ type: "browser-not-supported" });
+                return;
+            }
+            const player = new shaka.Player();
+            await player.attach(videoRef.current);
+            player.addEventListener("error", (event) => { console.error("Shaka Player Error:", event); if (onError)
+                onError(event); });
+            player.addEventListener("loaded", () => {
+                setIsPlayerReady(true);
+                if (startTime !== null && videoRef.current) {
+                    try {
+                        videoRef.current.currentTime = startTime;
+                        lastTime.current = startTime;
+                    }
+                    catch (err) {
+                        console.error("Error setting initial time:", err);
+                    }
+                }
+                if (onReady)
+                    onReady();
+            });
+            player.addEventListener("buffering", (event) => { if (onBuffer)
+                onBuffer(event.buffering); });
+            if (authToken) {
+                player.getNetworkingEngine().registerRequestFilter((_type, request) => {
+                    if (request && request.uris && request.uris.length > 0) {
+                        request.headers = request.headers || {};
+                        request.headers["Authorization"] = authToken;
+                    }
+                });
+            }
+            try {
+                await player.load(url);
+                if (videoRef.current) {
+                    videoRef.current.muted = muted;
+                    videoRef.current.controls = false; // always disabled — using custom controls
+                    lastMuted.current = muted;
+                    if (startTime !== null) {
+                        try {
+                            videoRef.current.currentTime = startTime;
+                            lastTime.current = startTime;
+                        }
+                        catch (err) {
+                            console.error("Failed to set initial currentTime:", err);
+                        }
+                    }
+                    if (playing) {
+                        try {
+                            const playPromise = videoRef.current.play();
+                            if (playPromise !== undefined) {
+                                playPromise.then(() => setIsPlayingOnHover(true)).catch((err) => {
+                                    console.error("Autoplay prevented:", err);
+                                    setIsPlayingOnHover(false);
+                                    const handleFirstInteraction = () => {
+                                        if (videoRef.current && videoRef.current.paused) {
+                                            videoRef.current.play().then(() => setIsPlayingOnHover(true)).catch((e) => console.error("User interaction play failed:", e));
+                                        }
+                                    };
+                                    document.addEventListener("click", handleFirstInteraction, { once: true });
+                                    document.addEventListener("touchstart", handleFirstInteraction, { once: true });
+                                });
+                            }
+                        }
+                        catch (err) {
+                            console.error("Error during play attempt:", err);
+                            setIsPlayingOnHover(false);
+                        }
+                    }
+                }
+                setPlayerInstance(player);
+                setIsPlayerReady(true);
+            }
+            catch (e) {
+                console.error("Error loading video:", e);
+                if (onError)
+                    onError(e);
+            }
+        }
+        catch (e) {
+            console.error("Error initializing Shaka Player:", e);
+            if (onError)
+                onError(e);
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        if (!videoRef.current || eventHandlersAttached.current)
+            return;
+        const handlePlay = () => { watchStartTime.current = videoRef.current.currentTime; wallClockStart.current = Date.now(); if (onPlay)
+            onPlay(); };
+        const handlePause = () => { logWatchTime(); if (onPause)
+            onPause(totalWatchTime.current); };
+        const handleEnded = () => { logWatchTime(); if (onEnded)
+            onEnded(totalWatchTime.current); };
+        const handleTimeUpdate = () => {
+            const currentTime = videoRef.current.currentTime;
+            if (Math.abs(currentTime - lastTime.current) > 2) {
+                logWatchTime();
+                if (!videoRef.current.paused) {
+                    watchStartTime.current = currentTime;
+                    wallClockStart.current = Date.now();
+                }
+                if (onSeek)
+                    onSeek({ from: lastTime.current, to: currentTime });
+            }
+            lastTime.current = currentTime;
+            if (endTime !== null && currentTime >= endTime) {
+                videoRef.current.pause();
+                if (onEnded)
+                    onEnded(totalWatchTime.current);
+            }
+        };
+        const handleRateChange = () => {
+            const newRate = videoRef.current.playbackRate;
+            if (newRate !== lastRate.current) {
+                if (onRateChange)
+                    onRateChange(newRate);
+                lastRate.current = newRate;
+            }
+        };
+        const handleVolumeChange = () => {
+            const volume = videoRef.current.volume;
+            const isMuted = videoRef.current.muted;
+            if (isMuted !== lastMuted.current) {
+                if (onMuteToggle)
+                    onMuteToggle(isMuted);
+                lastMuted.current = isMuted;
+            }
+            if (volume !== lastVolume.current) {
+                if (onVolumeChange)
+                    onVolumeChange(volume);
+                lastVolume.current = volume;
+            }
+        };
+        videoRef.current.addEventListener("play", handlePlay);
+        videoRef.current.addEventListener("pause", handlePause);
+        videoRef.current.addEventListener("ended", handleEnded);
+        videoRef.current.addEventListener("timeupdate", handleTimeUpdate);
+        videoRef.current.addEventListener("ratechange", handleRateChange);
+        videoRef.current.addEventListener("volumechange", handleVolumeChange);
+        eventHandlersAttached.current = true;
+        return () => {
+            if (videoRef.current) {
+                videoRef.current.removeEventListener("play", handlePlay);
+                videoRef.current.removeEventListener("pause", handlePause);
+                videoRef.current.removeEventListener("ended", handleEnded);
+                videoRef.current.removeEventListener("timeupdate", handleTimeUpdate);
+                videoRef.current.removeEventListener("ratechange", handleRateChange);
+                videoRef.current.removeEventListener("volumechange", handleVolumeChange);
+            }
+            eventHandlersAttached.current = false;
+        };
+    }, [onPlay, onPause, onEnded, onSeek, onRateChange, onVolumeChange, onMuteToggle, endTime]);
+    (0, react_1.useEffect)(() => {
+        if (!isPlayerReady || !videoRef.current)
+            return;
+        try {
+            if (playing && videoRef.current.paused) {
+                const playPromise = videoRef.current.play();
+                if (playPromise !== undefined) {
+                    playPromise.then(() => setIsPlayingOnHover(true)).catch((err) => {
+                        console.error("Play prevented on prop change:", err);
+                        setIsPlayingOnHover(false);
+                        if (err.name === "NotAllowedError") {
+                            const handleUserInteraction = () => {
+                                if (videoRef.current && videoRef.current.paused) {
+                                    videoRef.current.play().then(() => setIsPlayingOnHover(true)).catch((e) => console.error("User interaction play failed:", e));
+                                }
+                                document.removeEventListener("click", handleUserInteraction);
+                                document.removeEventListener("touchstart", handleUserInteraction);
+                            };
+                            document.addEventListener("click", handleUserInteraction, { once: true });
+                            document.addEventListener("touchstart", handleUserInteraction, { once: true });
+                        }
+                    });
+                }
+            }
+            else if (!playing && !videoRef.current.paused) {
+                videoRef.current.pause();
+                setIsPlayingOnHover(false);
+            }
+        }
+        catch (err) {
+            console.error("Error updating play state:", err);
+        }
+    }, [playing, isPlayerReady]);
+    (0, react_1.useEffect)(() => { if (videoRef.current) {
+        videoRef.current.muted = muted;
+        lastMuted.current = muted;
+        setUiMuted(muted);
+    } }, [muted]);
+    // Always disable native controls (custom controls handle UI)
+    (0, react_1.useEffect)(() => { if (videoRef.current)
+        videoRef.current.controls = false; }, [controls]);
+    (0, react_1.useEffect)(() => {
+        if (videoRef.current && isPlayerReady && startTime !== null) {
+            try {
+                videoRef.current.currentTime = startTime;
+                lastTime.current = startTime;
+            }
+            catch (err) {
+                console.error("Failed to update currentTime:", err);
+            }
+        }
+    }, [startTime, isPlayerReady]);
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== "undefined" && typeof navigator !== "undefined" && url) {
+            initShakaPlayer();
+        }
+    }, [url]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (playerInstance) {
+                try {
+                    playerInstance.destroy().then(() => { }).catch((e) => console.error("Error destroying player:", e));
+                }
+                catch (e) {
+                    console.error("Error calling destroy on player:", e);
+                }
+            }
+            if (endTimeCheckInterval.current)
+                clearInterval(endTimeCheckInterval.current);
+            clearTimeout(hideTimerRef.current);
+        };
+    }, [playerInstance]);
+    // ── Render ────────────────────────────────────────────────────────────────
+    const containerStyle = {
+        position: "relative",
+        backgroundColor: "#000",
+        borderRadius: "8px",
+        overflow: "hidden",
+        ...(style.width ? { width: style.width } : { width: "100%" }),
+        ...(style.height ? { height: style.height } : {}),
+    };
+    const played = uiDuration > 0 ? uiCurrentTime / uiDuration : 0;
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: containerRef, style: containerStyle, onMouseMove: handleContainerMouseMove, onMouseLeave: handleContainerMouseLeave, onClick: handleContainerClick, children: [(0, jsx_runtime_1.jsx)("video", { poster: poster, ref: videoRef, style: { display: "block", width: "100%" }, muted: muted, controls: false, preload: "auto", disablePictureInPicture: true }), controls && showControls && ((0, jsx_runtime_1.jsxs)("div", { style: ctrlStyles.container, children: [(0, jsx_runtime_1.jsx)("div", { style: ctrlStyles.seekbarRow, children: (0, jsx_runtime_1.jsxs)("div", { ref: seekbarRef, style: ctrlStyles.seekbarTrack, onMouseDown: (e) => { setSeekingUI(true); seekToClientX(e.clientX); }, children: [uiDuration > 0 && segmentBands.map((seg, i) => {
+                                    const isHovered = hoveredSegmentId === seg.id;
+                                    const isActive = activeSegmentId === seg.id;
+                                    const baseColor = seg.color ?? DEFAULT_SEGMENT_COLORS[i % DEFAULT_SEGMENT_COLORS.length];
+                                    return ((0, jsx_runtime_1.jsx)("div", { title: seg.label, onMouseEnter: () => setHoveredSegmentId(seg.id), onMouseLeave: () => setHoveredSegmentId(null), onMouseDown: (e) => handleSegmentMouseDown(e, seg), style: {
+                                            ...ctrlStyles.segmentBand,
+                                            left: `${(seg.start / uiDuration) * 100}%`,
+                                            width: `${((seg.end - seg.start) / uiDuration) * 100}%`,
+                                            backgroundColor: baseColor,
+                                            ...(isHovered && !isActive && { transform: "translateY(-4px)", zIndex: 2, boxShadow: "0 4px 8px rgba(0,0,0,0.5)" }),
+                                            ...(isActive && !isHovered && { transform: "translateY(-6px)", zIndex: 3, boxShadow: "0 6px 12px rgba(0,0,0,0.6)" }),
+                                            ...(isHovered && isActive && { transform: "translateY(-8px)", zIndex: 4, boxShadow: "0 8px 16px rgba(0,0,0,0.7)" }),
+                                        } }, seg.id));
+                                }), uiDuration > 0 && segmentBands.slice(1).map((seg, i) => ((0, jsx_runtime_1.jsx)("div", { style: { ...ctrlStyles.segmentMarker, left: `${(seg.start / uiDuration) * 100}%` } }, `marker-${i}`))), (0, jsx_runtime_1.jsx)("div", { style: { ...ctrlStyles.seekbarFill, width: `${played * 100}%` } }), (0, jsx_runtime_1.jsx)("div", { style: { ...ctrlStyles.seekbarThumb, left: `${played * 100}%` } })] }) }), (0, jsx_runtime_1.jsxs)("div", { style: ctrlStyles.controlsRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: ctrlStyles.controlsLeft, children: [(0, jsx_runtime_1.jsx)(CtrlBtn, { onClick: handleTogglePlay, label: uiPlaying ? "Pause" : "Play", children: uiPlaying ? (0, jsx_runtime_1.jsx)(IconPause, {}) : (0, jsx_runtime_1.jsx)(IconPlay, {}) }), segments.length > 0 && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(CtrlBtn, { onClick: handleSkipPrev, label: "Previous segment", disabled: activeIdx <= 0 && activeSegmentId === segmentBands[0]?.id, children: (0, jsx_runtime_1.jsx)(IconSkipPrev, {}) }), (0, jsx_runtime_1.jsx)(CtrlBtn, { onClick: handleSkipNext, label: "Next segment", disabled: !nextSegment, children: (0, jsx_runtime_1.jsx)(IconSkipNext, {}) })] })), (0, jsx_runtime_1.jsx)(CtrlBtn, { onClick: handleToggleMute, label: uiMuted ? "Unmute" : "Mute", children: uiMuted ? (0, jsx_runtime_1.jsx)(IconMuted, {}) : (0, jsx_runtime_1.jsx)(IconVolume, {}) }), (0, jsx_runtime_1.jsxs)("div", { style: ctrlStyles.time, children: [formatTime(uiCurrentTime), " / ", formatTime(uiDuration)] })] }), segments.length > 0 && activeSegment && ((0, jsx_runtime_1.jsx)("div", { style: ctrlStyles.controlsCenter, children: (0, jsx_runtime_1.jsx)("span", { style: ctrlStyles.segmentLabel, children: activeSegment.label }) })), (0, jsx_runtime_1.jsxs)("div", { style: ctrlStyles.controlsRight, children: [(0, jsx_runtime_1.jsxs)("div", { ref: speedMenuRef, style: { position: "relative", flexShrink: 0 }, children: [(0, jsx_runtime_1.jsx)(SpeedBtn, { label: uiPlaybackRate === 1 ? "1x" : `${uiPlaybackRate}x`, onClick: () => setShowSpeedMenu((v) => !v) }), showSpeedMenu && ((0, jsx_runtime_1.jsx)("div", { style: ctrlStyles.speedMenu, children: SPEED_OPTIONS.map((rate) => ((0, jsx_runtime_1.jsx)(SpeedOption, { rate: rate, active: uiPlaybackRate === rate, onClick: () => handleSpeedChange(rate) }, rate))) }))] }), (0, jsx_runtime_1.jsx)(CtrlBtn, { onClick: handleFullscreen, label: isFullscreen ? "Exit fullscreen" : "Fullscreen", children: isFullscreen ? (0, jsx_runtime_1.jsx)(IconExitFullscreen, {}) : (0, jsx_runtime_1.jsx)(IconFullscreen, {}) })] })] })] }))] }));
+});
+// ─── Speed sub-components ─────────────────────────────────────────────────────
+const SpeedBtn = ({ label, onClick }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, "aria-label": "Playback speed", onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            background: hovered ? "rgba(255,255,255,0.1)" : "none",
+            border: `1px solid ${hovered ? "rgba(255,255,255,0.4)" : "rgba(255,255,255,0.18)"}`,
+            borderRadius: "8px",
+            color: "#fff",
+            fontSize: "12px",
+            fontWeight: 600,
+            cursor: "pointer",
+            padding: "5px 8px",
+            minWidth: "38px",
+            textAlign: "center",
+            transition: "border-color 0.15s ease, background-color 0.15s ease",
+        }, children: label }));
+};
+const SpeedOption = ({ rate, active, onClick }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false), style: {
+            display: "block",
+            width: "100%",
+            background: active || hovered ? "rgba(255,255,255,0.1)" : "none",
+            border: "none",
+            color: active ? "#fff" : "#ccc",
+            fontSize: "13px",
+            fontWeight: active ? 600 : 400,
+            padding: "7px 14px",
+            textAlign: "left",
+            cursor: "pointer",
+            whiteSpace: "nowrap",
+            transition: "background-color 0.1s ease",
+        }, children: rate === 1 ? "Normal" : `${rate}x` }));
+};
+// ─── Styles ───────────────────────────────────────────────────────────────────
+const ctrlStyles = {
+    container: {
+        position: "absolute",
+        bottom: 0,
+        left: 0,
+        right: 0,
+        backgroundColor: "rgba(17, 17, 17, 0.92)",
+        paddingBottom: "4px",
+        zIndex: 10,
+        transition: "opacity 0.25s ease",
+    },
+    seekbarRow: {
+        padding: "10px 12px 6px",
+    },
+    seekbarTrack: {
+        position: "relative",
+        height: "4px",
+        backgroundColor: "rgba(255,255,255,0.2)",
+        borderRadius: "2px",
+        cursor: "pointer",
+        overflow: "visible",
+    },
+    segmentBand: {
+        position: "absolute",
+        top: 0,
+        height: "100%",
+        cursor: "pointer",
+        borderRadius: "2px",
+        transition: "transform 0.15s ease, box-shadow 0.15s ease",
+        zIndex: 1,
+    },
+    segmentMarker: {
+        position: "absolute",
+        top: "-3px",
+        width: "2px",
+        height: "10px",
+        backgroundColor: "#fff",
+        transform: "translateX(-50%)",
+        pointerEvents: "none",
+        borderRadius: "1px",
+        zIndex: 5,
+    },
+    seekbarFill: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        height: "100%",
+        backgroundColor: "rgba(255,255,255,0.85)",
+        borderRadius: "2px",
+        pointerEvents: "none",
+        zIndex: 6,
+    },
+    seekbarThumb: {
+        position: "absolute",
+        top: "50%",
+        width: "12px",
+        height: "12px",
+        backgroundColor: "#fff",
+        borderRadius: "50%",
+        transform: "translate(-50%, -50%)",
+        pointerEvents: "none",
+        boxShadow: "0 0 4px rgba(0,0,0,0.6)",
+        zIndex: 7,
+    },
+    controlsRow: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "2px 8px 4px",
+        gap: "8px",
+    },
+    controlsLeft: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        flexShrink: 0,
+    },
+    controlsCenter: {
+        display: "flex",
+        alignItems: "center",
+        flex: 1,
+        overflow: "hidden",
+        justifyContent: "flex-start",
+        paddingLeft: "8px",
+    },
+    segmentLabel: {
+        color: "#e0e0e0",
+        fontSize: "12px",
+        fontWeight: 500,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        maxWidth: "220px",
+        padding: "5px 8px",
+        border: "1px solid rgba(255,255,255,0.18)",
+        borderRadius: "8px",
+        display: "inline-block",
+    },
+    controlsRight: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        flexShrink: 0,
+    },
+    time: {
+        color: "#ccc",
+        fontSize: "12px",
+        fontVariantNumeric: "tabular-nums",
+        whiteSpace: "nowrap",
+        padding: "5px 8px",
+        border: "1px solid rgba(255,255,255,0.18)",
+        borderRadius: "8px",
+        flexShrink: 0,
+    },
+    speedMenu: {
+        position: "absolute",
+        bottom: "calc(100% + 6px)",
+        right: 0,
+        backgroundColor: "#1e1e1e",
+        border: "1px solid rgba(255,255,255,0.15)",
+        borderRadius: "8px",
+        overflow: "hidden",
+        zIndex: 20,
+        minWidth: "90px",
+        boxShadow: "0 4px 16px rgba(0,0,0,0.6)",
+    },
+};
+exports.default = ShakaPlayer;
+//# sourceMappingURL=ShakaPlayer.js.map