keyboard-ui-profiles 0.0.30 → 0.0.32

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

@@ -25,13 +25,59 @@ var __importStar = (this && this.__importStar) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
-const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = false, poster, controls = false, authToken, startTime = null, endTime = null, onPlay, onPause, onEnded, onError, onReady, onBuffer, style = {}, onSeek, onRateChange, onVolumeChange, onMuteToggle, }, ref) => {
+// ─── 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 [isPlayingOnHover, setIsPlayingOnHover] = (0, react_1.useState)(playing);
+    const [, setIsPlayingOnHover] = (0, react_1.useState)(playing);
     const endTimeCheckInterval = (0, react_1.useRef)(null);
-    // Track watch time data
+    // Watch time tracking
     const watchStartTime = (0, react_1.useRef)(null);
     const totalWatchTime = (0, react_1.useRef)(0);
     const lastTime = (0, react_1.useRef)(0);
@@ -40,33 +86,194 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
     const lastRate = (0, react_1.useRef)(1);
     const wallClockStart = (0, react_1.useRef)(null);
     const wallClockTotal = (0, react_1.useRef)(0);
-    // Track whether event handlers are attached
     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: () => {
-            return videoRef?.current?.currentTime || 0;
-        },
+        getCurrentTime: () => videoRef?.current?.currentTime || 0,
         getTotalWatchTime: () => {
-            if (watchStartTime.current !== null &&
-                wallClockStart.current !== null &&
-                !videoRef.current.paused) {
+            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();
+        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; // seconds
+            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 {
@@ -85,13 +292,10 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                     onError({ type: "browser-not-supported" });
                 return;
             }
-            const player = new shaka.Player(); // ✅ new way
-            await player.attach(videoRef.current); // ✅ attach media element
-            player.addEventListener("error", (event) => {
-                console.error("Shaka Player Error:", event);
-                if (onError)
-                    onError(event);
-            });
+            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) {
@@ -106,30 +310,22 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                 if (onReady)
                     onReady();
             });
-            player.addEventListener("buffering", (event) => {
-                const isBuffering = event.buffering;
-                if (onBuffer)
-                    onBuffer(isBuffering);
-            });
+            player.addEventListener("buffering", (event) => { if (onBuffer)
+                onBuffer(event.buffering); });
             if (authToken) {
-                player
-                    .getNetworkingEngine()
-                    .registerRequestFilter((type, request) => {
+                player.getNetworkingEngine().registerRequestFilter((_type, request) => {
                     if (request && request.uris && request.uris.length > 0) {
                         request.headers = request.headers || {};
                         request.headers["Authorization"] = authToken;
                     }
-                    else {
-                        console.error("Request has no URIs defined");
-                    }
                 });
             }
             try {
                 await player.load(url);
                 if (videoRef.current) {
                     videoRef.current.muted = muted;
+                    videoRef.current.controls = false; // always disabled — using custom controls
                     lastMuted.current = muted;
-                    videoRef.current.controls = controls;
                     if (startTime !== null) {
                         try {
                             videoRef.current.currentTime = startTime;
@@ -143,16 +339,16 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                         try {
                             const playPromise = videoRef.current.play();
                             if (playPromise !== undefined) {
-                                playPromise
-                                    .then(() => {
-                                    setIsPlayingOnHover(true);
-                                })
-                                    .catch((err) => {
+                                playPromise.then(() => setIsPlayingOnHover(true)).catch((err) => {
                                     console.error("Autoplay prevented:", err);
                                     setIsPlayingOnHover(false);
-                                    if (err.name === "NotAllowedError") {
-                                        console.error("Waiting for user interaction to enable playback");
-                                    }
+                                    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 });
                                 });
                             }
                         }
@@ -177,30 +373,15 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                 onError(e);
         }
     };
-    // Setup event handlers
     (0, react_1.useEffect)(() => {
         if (!videoRef.current || eventHandlersAttached.current)
             return;
-        // Play handler
-        const handlePlay = () => {
-            watchStartTime.current = videoRef.current.currentTime;
-            wallClockStart.current = Date.now();
-            if (onPlay)
-                onPlay();
-        };
-        // Pause handler
-        const handlePause = () => {
-            logWatchTime();
-            if (onPause)
-                onPause(totalWatchTime.current);
-        };
-        // Ended handler
-        const handleEnded = () => {
-            logWatchTime();
-            if (onEnded)
-                onEnded(totalWatchTime.current);
-        };
-        // Time update / seek handler
+        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) {
@@ -210,20 +391,15 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                     wallClockStart.current = Date.now();
                 }
                 if (onSeek)
-                    onSeek({
-                        from: lastTime.current,
-                        to: currentTime,
-                    });
+                    onSeek({ from: lastTime.current, to: currentTime });
             }
             lastTime.current = currentTime;
-            // Check for end time
             if (endTime !== null && currentTime >= endTime) {
                 videoRef.current.pause();
                 if (onEnded)
                     onEnded(totalWatchTime.current);
             }
         };
-        // Rate change handler
         const handleRateChange = () => {
             const newRate = videoRef.current.playbackRate;
             if (newRate !== lastRate.current) {
@@ -232,24 +408,20 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
                 lastRate.current = newRate;
             }
         };
-        // Volume change handler
         const handleVolumeChange = () => {
             const volume = videoRef.current.volume;
             const isMuted = videoRef.current.muted;
-            // Handle mute toggle first
             if (isMuted !== lastMuted.current) {
                 if (onMuteToggle)
                     onMuteToggle(isMuted);
                 lastMuted.current = isMuted;
             }
-            // Handle volume change
             if (volume !== lastVolume.current) {
                 if (onVolumeChange)
                     onVolumeChange(volume);
                 lastVolume.current = volume;
             }
         };
-        // Add all event listeners
         videoRef.current.addEventListener("play", handlePlay);
         videoRef.current.addEventListener("pause", handlePause);
         videoRef.current.addEventListener("ended", handleEnded);
@@ -257,7 +429,6 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
         videoRef.current.addEventListener("ratechange", handleRateChange);
         videoRef.current.addEventListener("volumechange", handleVolumeChange);
         eventHandlersAttached.current = true;
-        // Clean up function
         return () => {
             if (videoRef.current) {
                 videoRef.current.removeEventListener("play", handlePlay);
@@ -269,16 +440,7 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
             }
             eventHandlersAttached.current = false;
         };
-    }, [
-        onPlay,
-        onPause,
-        onEnded,
-        onSeek,
-        onRateChange,
-        onVolumeChange,
-        onMuteToggle,
-        endTime,
-    ]);
+    }, [onPlay, onPause, onEnded, onSeek, onRateChange, onVolumeChange, onMuteToggle, endTime]);
     (0, react_1.useEffect)(() => {
         if (!isPlayerReady || !videoRef.current)
             return;
@@ -286,27 +448,18 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
             if (playing && videoRef.current.paused) {
                 const playPromise = videoRef.current.play();
                 if (playPromise !== undefined) {
-                    playPromise
-                        .then(() => {
-                        setIsPlayingOnHover(true);
-                    })
-                        .catch((err) => {
+                    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));
+                                    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("click", handleUserInteraction, { once: true });
                             document.addEventListener("touchstart", handleUserInteraction, { once: true });
                         }
                     });
@@ -321,17 +474,14 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
             console.error("Error updating play state:", err);
         }
     }, [playing, isPlayerReady]);
-    (0, react_1.useEffect)(() => {
-        if (videoRef.current) {
-            videoRef.current.muted = muted;
-            lastMuted.current = muted;
-        }
-    }, [muted]);
-    (0, react_1.useEffect)(() => {
-        if (videoRef.current) {
-            videoRef.current.controls = controls;
-        }
-    }, [controls]);
+    (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 {
@@ -344,25 +494,7 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
         }
     }, [startTime, isPlayerReady]);
     (0, react_1.useEffect)(() => {
-        const handleUserInteraction = () => {
-            if (playing && videoRef.current && videoRef.current.paused) {
-                videoRef.current
-                    .play()
-                    .then(() => setIsPlayingOnHover(true))
-                    .catch((e) => console.error("User interaction play failed:", e));
-            }
-        };
-        document.addEventListener("click", handleUserInteraction);
-        document.addEventListener("touchstart", handleUserInteraction);
-        return () => {
-            document.removeEventListener("click", handleUserInteraction);
-            document.removeEventListener("touchstart", handleUserInteraction);
-        };
-    }, [playing]);
-    (0, react_1.useEffect)(() => {
-        if (typeof window !== "undefined" &&
-            typeof navigator !== "undefined" &&
-            url) {
+        if (typeof window !== "undefined" && typeof navigator !== "undefined" && url) {
             initShakaPlayer();
         }
     }, [url]);
@@ -370,28 +502,203 @@ const ShakaPlayer = (0, react_1.forwardRef)(({ url, playing = false, muted = fal
         return () => {
             if (playerInstance) {
                 try {
-                    playerInstance
-                        .destroy()
-                        .then(() => {
-                        console.log("Shaka player destroyed cleanly");
-                    })
-                        .catch((e) => {
-                        console.error("Error destroying player:", e);
-                    });
+                    playerInstance.destroy().then(() => { }).catch((e) => console.error("Error destroying player:", e));
                 }
                 catch (e) {
                     console.error("Error calling destroy on player:", e);
                 }
             }
-            if (endTimeCheckInterval.current) {
+            if (endTimeCheckInterval.current)
                 clearInterval(endTimeCheckInterval.current);
-            }
+            clearTimeout(hideTimerRef.current);
         };
     }, [playerInstance]);
-    const videoStyle = style && (style.width || style.height)
-        ? style
-        : { display: "block", width: "100%", height: "100%" };
-    return ((0, jsx_runtime_1.jsx)("video", { poster: poster, ref: videoRef, style: videoStyle, muted: muted, controls: controls, preload: "auto", disablePictureInPicture: true }));
+    // ── 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