@liqvid/controls 1.0.0-alpha.0

package/LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) Yuri Sulyma
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# @liqvid/recording.
+
+Recording functionality for [`Liqvid`](https://liqvidjs.org/). Documentation at https://liqvidjs.org/docs/plugins/recording.

package/dist/esm/ColorSchemeToggle.js

@@ -0,0 +1,24 @@
+"use client";
+import { useColorScheme } from "@liqvid/color-scheme/react";
+import { useKeymap } from "@liqvid/keymap/react";
+import { onClickReact } from "@liqvid/utils";
+import classNames from "classnames";
+import { useEffect, useMemo } from "react";
+import { bind, convertShortcuts, unbind } from "./utils";
+export function ColorSchemeToggle({ className, render, shortcuts, }) {
+    const { colorScheme, toggleColorScheme } = useColorScheme();
+    const keymap = useKeymap();
+    useEffect(() => {
+        // keyboard shortcut
+        bind(keymap, shortcuts, toggleColorScheme);
+        return () => {
+            unbind(keymap, shortcuts, toggleColorScheme);
+        };
+    }, [keymap, shortcuts, toggleColorScheme]);
+    const events = useMemo(() => onClickReact(toggleColorScheme), [toggleColorScheme]);
+    return render({ colorScheme }, {
+        "aria-keyshortcuts": convertShortcuts(shortcuts),
+        className: classNames("lv-controls-color-scheme lv-controls-button", className),
+        ...events,
+    });
+}

package/dist/esm/FullScreen.js

@@ -0,0 +1,32 @@
+"use client";
+import { useKeymap } from "@liqvid/keymap/react";
+import { onClickReact, useForceUpdate } from "@liqvid/utils";
+import classNames from "classnames";
+import { useEffect } from "react";
+import { exitFullScreen, isFullScreen, onFullScreenChange, requestFullScreen, } from "./fake-fullscreen";
+import { convertShortcuts } from "./utils";
+const toggleFullScreen = () => isFullScreen() ? exitFullScreen() : requestFullScreen();
+const events = onClickReact(toggleFullScreen);
+/** Fullscreen control */
+export function FullScreen({ className, render, shortcuts, }) {
+    const keymap = useKeymap();
+    const forceUpdate = useForceUpdate();
+    useEffect(() => {
+        // listener
+        onFullScreenChange(forceUpdate);
+        // keyboard shortcut
+        for (const seq of shortcuts ?? []) {
+            keymap.bind(seq, toggleFullScreen);
+        }
+        return () => {
+            for (const seq of shortcuts ?? []) {
+                keymap.unbind(seq, toggleFullScreen);
+            }
+        };
+    }, [forceUpdate, keymap, shortcuts]);
+    return render({ isFullScreen: isFullScreen() ?? false }, {
+        "aria-keyshortcuts": convertShortcuts(shortcuts),
+        className: classNames("lv-controls-fullscreen lv-controls-button", className),
+        ...events,
+    });
+}

package/dist/esm/MuteButton.js

@@ -0,0 +1,37 @@
+"use client";
+import { useKeymap } from "@liqvid/keymap/react";
+import { usePlayback, usePlaybackEvent } from "@liqvid/playback/react";
+import { onClickReact, useForceUpdate } from "@liqvid/utils";
+import classNames from "classnames";
+import { useCallback, useEffect, useMemo } from "react";
+import { bind, convertShortcuts, unbind } from "./utils";
+/** Mute/unmute button */
+export function Mute({ className, render, shortcuts }) {
+    const keymap = useKeymap();
+    const playback = usePlayback();
+    const forceUpdate = useForceUpdate();
+    // keyboard controls
+    const toggleMute = useCallback(() => {
+        playback.muted = !playback.muted;
+    }, [playback]);
+    usePlaybackEvent("volumechange", forceUpdate);
+    useEffect(() => {
+        // keyboard shortcuts
+        bind(keymap, shortcuts, toggleMute);
+        return () => {
+            // keyboard shortcuts
+            unbind(keymap, shortcuts, toggleMute);
+        };
+    }, [keymap, shortcuts, toggleMute]);
+    const events = useMemo(() => onClickReact(toggleMute), [toggleMute]);
+    if (render) {
+        return render({
+            muted: playback.muted,
+            volume: playback.volume,
+        }, {
+            "aria-keyshortcuts": convertShortcuts(shortcuts),
+            className: classNames("lv-controls-mute lv-controls-button", className),
+            ...events,
+        });
+    }
+}

package/dist/esm/PlayPause.js

@@ -0,0 +1,39 @@
+"use client";
+import { useKeymap } from "@liqvid/keymap/react";
+import { usePlayback, usePlaybackEvent } from "@liqvid/playback/react";
+import { onClickReact, useForceUpdate } from "@liqvid/utils";
+import classNames from "classnames";
+import { useCallback, useEffect, useMemo } from "react";
+import { convertShortcuts } from "./utils";
+/** Control for playing/pausing */
+export function PlayPause({ className, render, shortcuts, }) {
+    const keymap = useKeymap();
+    const playback = usePlayback();
+    const forceUpdate = useForceUpdate();
+    usePlaybackEvent("pause", forceUpdate);
+    usePlaybackEvent("play", forceUpdate);
+    usePlaybackEvent("seeked", forceUpdate);
+    usePlaybackEvent("seeking", forceUpdate);
+    usePlaybackEvent("stop", forceUpdate);
+    // keyboard controls
+    const toggle = useCallback(() => playback[playback.paused ? "play" : "pause"](), [playback]);
+    useEffect(() => {
+        // keyboard shortcut
+        for (const seq of shortcuts ?? []) {
+            keymap.bind(seq, toggle);
+        }
+        return () => {
+            // unbind keyboard controls
+            for (const seq of shortcuts ?? []) {
+                keymap.unbind(seq, toggle);
+            }
+        };
+    }, [keymap, shortcuts, toggle]);
+    // event handler
+    const events = useMemo(() => onClickReact(toggle), [toggle]);
+    return render({ paused: playback.paused, seeking: playback.seeking }, {
+        "aria-keyshortcuts": convertShortcuts(shortcuts),
+        className: classNames("lv-controls-playpause lv-controls-button", className),
+        ...events,
+    });
+}

package/dist/esm/ScrubberBar.js

@@ -0,0 +1,194 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Duration } from "@liqvid/duration";
+import { useKeymap } from "@liqvid/keymap/react";
+import { usePlayback, usePlaybackEvent } from "@liqvid/playback/react";
+import { anyHover, between, clamp, onDrag } from "@liqvid/utils";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ThumbnailBox } from "./ThumbnailBox";
+export function ScrubberBar({ shortcuts, thumbs, ...props }) {
+    const playback = usePlayback();
+    const [progress, setProgress] = useState({
+        scrubber: playback.currentTime / playback.duration,
+        thumb: playback.currentTime / playback.duration,
+    });
+    const [showThumb, setShowThumb] = useState(false);
+    // refs
+    const scrubberBar = useRef(null);
+    /* Event handlers */
+    usePlaybackEvent("seek", useCallback(() => {
+        if (playback.seeking)
+            return;
+        const progress = playback.currentTime / playback.duration;
+        setProgress({ scrubber: progress, thumb: progress });
+    }, [playback]));
+    usePlaybackEvent("seeked", useCallback(() => {
+        const progress = playback.currentTime / playback.duration;
+        setProgress((prev) => ({ scrubber: progress, thumb: prev.thumb }));
+    }, [playback]));
+    usePlaybackEvent("timeupdate", useCallback(() => {
+        const progress = playback.currentTime / playback.duration;
+        setProgress((prev) => ({ scrubber: progress, thumb: prev.thumb }));
+    }, [playback]));
+    useRelativeShortcuts(shortcuts?.relative);
+    usePercentageShortcuts(shortcuts?.percentage);
+    // event handlers
+    const divEvents = useMemo(() => {
+        if (!anyHover)
+            return {};
+        const listener = onDrag(
+        // move
+        (_e, { x }) => {
+            if (!scrubberBar.current)
+                return;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setProgress({ scrubber: progress, thumb: progress });
+            playback.currentTime = progress * playback.duration;
+        }, 
+        // down
+        (_e, { x }) => {
+            if (!scrubberBar.current)
+                return;
+            playback.seeking = true;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setProgress({ scrubber: progress, thumb: progress });
+            playback.currentTime = progress * playback.duration;
+        }, 
+        // up
+        () => {
+            playback.seeking = false;
+        });
+        return {
+            onMouseDown: (e) => listener(e.nativeEvent),
+        };
+    }, [playback]);
+    // events to attach on the wrapper
+    const wrapEvents = useMemo(() => {
+        const props = {};
+        if (anyHover) {
+            Object.assign(props, {
+                onMouseMove: (e) => {
+                    if (!scrubberBar.current)
+                        return;
+                    const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (e.clientX - rect.left) / rect.width, 1);
+                    setProgress((prev) => ({ scrubber: prev.scrubber, thumb: progress }));
+                },
+                onMouseOut: () => setShowThumb(false),
+                // show thumb preview on hover
+                onMouseOver: () => setShowThumb(true),
+            });
+        }
+        const listener = onDrag(
+        // move
+        (_e, { x }) => {
+            if (!scrubberBar.current)
+                return;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setProgress({ scrubber: progress, thumb: progress });
+        }, 
+        // start
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            playback.seeking = true;
+            setShowThumb(true);
+        }, 
+        // end
+        (e, { x }) => {
+            e.preventDefault();
+            if (!scrubberBar.current)
+                return;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setShowThumb(false);
+            playback.seeking = false;
+            playback.currentTime = progress * playback.duration;
+        });
+        props.onTouchStart = listener;
+        return props;
+    }, [playback]);
+    // events to be attached to the scrubber
+    const scrubberEvents = useMemo(() => {
+        // if (anyHover) return {};
+        const listener = onDrag(
+        // move
+        (_e, { x }) => {
+            if (!scrubberBar.current)
+                return;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setProgress({ scrubber: progress, thumb: progress });
+        }, 
+        // start
+        (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            playback.seeking = true;
+            setShowThumb(true);
+        }, 
+        // end
+        (e, { x }) => {
+            e.preventDefault();
+            if (!scrubberBar.current)
+                return;
+            const rect = scrubberBar.current.getBoundingClientRect(), progress = clamp(0, (x - rect.left) / rect.width, 1);
+            setShowThumb(false);
+            playback.seeking = false;
+            playback.currentTime = progress * playback.duration;
+        });
+        return {
+            onTouchStart: listener,
+        };
+    }, [playback]);
+    // TODO: optimize this
+    const activeHighlight = thumbs?.highlights?.find((h) => between(Duration.from(h.time).inSeconds() / playback.duration, progress.thumb, Duration.from(h.time).inSeconds() / playback.duration + 0.01));
+    return (_jsxs("div", { className: "lv-controls-scrub", ref: scrubberBar, ...divEvents, ...props, children: [thumbs && (_jsx(ThumbnailBox, { ...thumbs, progress: progress.thumb, show: showThumb, title: activeHighlight?.title })), _jsxs("div", { className: "lv-controls-scrub-wrap", ...wrapEvents, children: [_jsxs("svg", { className: "lv-controls-scrub-progress", preserveAspectRatio: "none", viewBox: "0 0 100 10", children: [_jsx("rect", { className: "lv-progress-elapsed", height: "10", width: progress.scrubber * 100, x: "0", y: "0" }), _jsx("rect", { className: "lv-progress-remaining", height: "10", width: (1 - progress.scrubber) * 100, x: progress.scrubber * 100, y: "0" }), thumbs?.highlights?.map(({ time }) => {
+                                const $time = Duration.from(time);
+                                return (_jsx("rect", { className: ["lv-thumb-highlight"]
+                                        .concat($time.inSeconds() <= playback.currentTime ? "past" : [])
+                                        .join(" "), height: "10", width: "1", x: ($time.inSeconds() / playback.duration) * 100, y: "0" }, $time.inSeconds()));
+                            })] }), _jsx("svg", { className: "lv-scrubber", style: { left: `calc(${progress.scrubber * 100}% - 6px)` }, viewBox: "0 0 100 100", ...scrubberEvents, children: _jsx("circle", { cx: "50", cy: "50", r: "50", stroke: "none" }) })] })] }));
+}
+function useRelativeShortcuts(shortcuts) {
+    const keymap = useKeymap();
+    const playback = usePlayback();
+    const configs = useMemo(() => shortcuts?.map(({ key, delta }) => {
+        delta = Duration.from(delta);
+        const callback = () => {
+            playback.currentTime$ = playback.currentTime$.plus(delta);
+        };
+        return [key, callback];
+    }) ?? [], [playback, shortcuts]);
+    useEffect(() => {
+        // bind
+        for (const [key, callback] of configs) {
+            keymap.bind(key, callback);
+        }
+        // unbind
+        return () => {
+            for (const [key, callback] of configs) {
+                keymap.unbind(key, callback);
+            }
+        };
+    }, [configs, keymap]);
+}
+function usePercentageShortcuts(shortcuts) {
+    const keymap = useKeymap();
+    const playback = usePlayback();
+    const configs = useMemo(() => shortcuts?.map(({ key, multiplier }) => {
+        const callback = () => {
+            playback.currentTime = playback.duration * multiplier;
+        };
+        return [key, callback];
+    }) ?? [], [playback, shortcuts]);
+    useEffect(() => {
+        // bind
+        for (const [key, callback] of configs) {
+            keymap.bind(key, callback);
+        }
+        // unbind
+        return () => {
+            for (const [key, callback] of configs) {
+                keymap.unbind(key, callback);
+            }
+        };
+    }, [configs, keymap]);
+}

package/dist/esm/ThumbnailBox.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePlayback } from "@liqvid/playback/react";
+import { formatTime } from "@liqvid/utils";
+import { useEffect } from "react";
+export function ThumbnailBox({ cols = 5, rows = 5, frequency = 4, path, progress, show, title, height = 100, width = 160, }) {
+    const { duration } = usePlayback();
+    const count = cols * rows;
+    useEffect(() => {
+        // preload thumbs (once more important loading has taken place)
+        const maxSlide = Math.floor(duration / frequency), maxSheet = Math.floor(maxSlide / count);
+        for (let sheetNum = 0; sheetNum <= maxSheet; ++sheetNum) {
+            const img = new Image();
+            img.src = path.replace("%s", sheetNum.toString());
+        }
+    }, [count, frequency, path, duration]);
+    const time = progress * duration;
+    const markerNum = Math.floor(time / frequency);
+    const sheetNum = Math.floor(markerNum / count);
+    const markerNumOnSheet = markerNum % count;
+    const row = Math.floor(markerNumOnSheet / rows);
+    const col = markerNumOnSheet % rows;
+    const sheetName = path.replace("%s", sheetNum.toString());
+    return (_jsxs("div", { className: "lv-controls-thumbnail", style: {
+            display: show ? "block" : "none",
+            left: `${progress * 100}%`,
+        }, children: [title && _jsx("span", { className: "lv-thumbnail-title", children: title }), _jsxs("div", { className: "lv-thumbnail-box", children: [_jsx("img", { alt: "", src: sheetName, style: {
+                            left: `-${col * width}px`,
+                            maxWidth: "unset",
+                            top: `-${row * height}px`,
+                        } }), _jsx("span", { className: "lv-thumbnail-time", children: formatTime(time * 1000) })] })] }));
+}

package/dist/esm/TimeDisplay.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { usePlayback, usePlaybackEvent, useTime } from "@liqvid/playback/react";
+import { formatTime, useForceUpdate } from "@liqvid/utils";
+import { useRef } from "react";
+export function TimeDisplay() {
+    const playback = usePlayback();
+    const forceUpdate = useForceUpdate();
+    usePlaybackEvent("durationchange", forceUpdate);
+    usePlaybackEvent("seek", forceUpdate);
+    useTime(() => {
+        const timeElt = timeRef.current;
+        if (!timeElt)
+            return;
+        timeElt.innerText = formatTime(playback.currentTime$);
+    });
+    const timeRef = useRef(null);
+    return (_jsxs("span", { className: "lv-controls-time", children: [_jsx("time", { className: "lv-current-time", ref: timeRef, children: formatTime(playback.currentTime$) }), _jsx("span", { className: "lv-time-separator", children: "/" }), _jsx("time", { className: "lv-total-time", children: formatTime(playback.duration$) })] }));
+}

package/dist/esm/VolumeSlider.js

@@ -0,0 +1,65 @@
+"use client";
+import { useKeymap } from "@liqvid/keymap/react";
+import { usePlayback, usePlaybackEvent } from "@liqvid/playback/react";
+import { useForceUpdate } from "@liqvid/utils";
+import classNames from "classnames";
+import { useCallback, useEffect } from "react";
+const VOLUME_MAX = 100;
+/** Volume control */
+export function VolumeSlider({ className, render, shortcuts, }) {
+    const keymap = useKeymap();
+    const playback = usePlayback();
+    const forceUpdate = useForceUpdate();
+    usePlaybackEvent("volumechange", forceUpdate);
+    useEffect(() => {
+        // keyboard shortcuts
+        const shortcutCallbacks = (shortcuts ?? []).map((s) => {
+            if ("delta" in s) {
+                return {
+                    callback: () => {
+                        playback.muted = false;
+                        playback.volume += s.delta / VOLUME_MAX;
+                    },
+                    seq: s.seq,
+                };
+            }
+            else {
+                return {
+                    callback: () => {
+                        playback.muted = false;
+                        playback.volume = s.value;
+                    },
+                    seq: s.seq,
+                };
+            }
+        });
+        for (const { seq, callback } of shortcutCallbacks) {
+            keymap.bind(seq, callback);
+        }
+        return () => {
+            // keyboard shortcuts
+            for (const { seq: key, callback } of shortcutCallbacks) {
+                keymap.unbind(key, callback);
+            }
+        };
+    }, [forceUpdate, keymap, playback]);
+    // input
+    const onChange = useCallback((e) => {
+        playback.muted = false;
+        playback.volume = parseFloat(e.target.value) / VOLUME_MAX;
+    }, [playback]);
+    if (render) {
+        return render({
+            muted: playback.muted,
+            volume: playback.volume,
+        }, {
+            // "aria-keyshortcuts": convertShortcuts(shortcuts),
+            className: classNames("lv-controls-volume-slider", className),
+            max: VOLUME_MAX,
+            min: 0,
+            onChange,
+            type: "range",
+            value: playback.muted ? 0 : playback.volume * VOLUME_MAX,
+        });
+    }
+}

package/dist/esm/fake-fullscreen.js

@@ -0,0 +1,33 @@
+import { exitFullScreen as $exitFullScreen, isFullScreen as $isFullScreen, onFullScreenChange as $onFullScreenChange, requestFullScreen as $requestFullScreen, fullscreenEnabled, } from "./polyfills";
+let __isFullScreen = false;
+const __callbacks = [];
+export const requestFullScreen = fullscreenEnabled
+    ? $requestFullScreen
+    : () => {
+        window.parent.postMessage({ type: "fake-fullscreen", value: true }, window.parent.origin);
+        if (!__isFullScreen) {
+            __isFullScreen = true;
+            for (const _ of __callbacks)
+                _();
+        }
+    };
+export const exitFullScreen = fullscreenEnabled
+    ? $exitFullScreen
+    : () => {
+        window.parent.postMessage({ type: "fake-fullscreen", value: false }, window.parent.origin);
+        if (__isFullScreen) {
+            __isFullScreen = false;
+            for (const _ of __callbacks)
+                _();
+        }
+    };
+export const isFullScreen = fullscreenEnabled
+    ? $isFullScreen
+    : () => {
+        return __isFullScreen;
+    };
+export const onFullScreenChange = fullscreenEnabled
+    ? $onFullScreenChange
+    : (callback) => {
+        __callbacks.push(callback);
+    };

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export { ColorSchemeToggle } from "./ColorSchemeToggle";
+export { FullScreen } from "./FullScreen";
+export { Mute } from "./MuteButton";
+export { PlayPause } from "./PlayPause";
+export { ScrubberBar, } from "./ScrubberBar";
+export { TimeDisplay } from "./TimeDisplay";
+export { VolumeSlider, } from "./VolumeSlider";

package/dist/esm/polyfills.js

@@ -0,0 +1,53 @@
+import { isClient } from "@liqvid/ssr";
+const id = (_) => _;
+export const fullscreenEnabled = isClient
+    ? [
+        "fullscreenEnabled",
+        "webkitFullscreenEnabled",
+        "mozFullScreenEnabled",
+        "msFullscreenEnabled",
+    ]
+        // biome-ignore lint/suspicious/noExplicitAny: vendor-specific
+        .map((_) => document[_])
+        .concat(false)
+        .find((_) => _ !== undefined)
+    : false;
+export const requestFullScreen = isClient
+    ? [
+        "requestFullscreen",
+        "webkitRequestFullscreen",
+        "mozRequestFullScreen",
+        "msRequestFullscreen",
+    ]
+        // biome-ignore lint/suspicious/noExplicitAny: vendor-specific
+        .map((_) => document.body[_])
+        .concat(() => { })
+        .find(id)
+        .bind(document.body)
+    : async () => { };
+export const exitFullScreen = isClient
+    ? [
+        "exitFullscreen",
+        "webkitExitFullscreen",
+        "mozCancelFullScreen",
+        "msExitFullscreen",
+    ]
+        // biome-ignore lint/suspicious/noExplicitAny: vendor-specific
+        .map((_) => document[_])
+        .concat(async () => { })
+        .find(id)
+        .bind(document)
+    : async () => { };
+export const isFullScreen = () => ["fullscreen", "webkitIsFullScreen", "mozFullScreen"]
+    // biome-ignore lint/suspicious/noExplicitAny: vendor-specific
+    .map((_) => document[_])
+    .find((_) => _ !== undefined);
+export function onFullScreenChange(callback) {
+    for (const event of [
+        "fullscreenchange",
+        "webkitfullscreenchange",
+        "mozfullscreenchange",
+        "MSFullscreenChange",
+    ])
+        document.addEventListener(event, callback);
+}

package/dist/esm/utils.js

@@ -0,0 +1,31 @@
+export function bind(keymap, seqs, callback) {
+    if (!seqs)
+        return;
+    if (typeof seqs === "string") {
+        keymap.bind(seqs, callback);
+    }
+    else {
+        for (const s of seqs) {
+            keymap.bind(s, callback);
+        }
+    }
+}
+export function unbind(keymap, seqs, callback) {
+    if (!seqs)
+        return;
+    if (typeof seqs === "string") {
+        keymap.bind(seqs, callback);
+    }
+    else {
+        for (const s of seqs) {
+            keymap.bind(s, callback);
+        }
+    }
+}
+export function convertShortcuts(keys) {
+    if (typeof keys === "string")
+        return keys;
+    if (typeof keys === "undefined")
+        return undefined;
+    return keys.join(" ");
+}

package/dist/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"fileNames":["../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es5.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.dom.iterable.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.core.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.collection.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.generator.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.iterable.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.promise.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.proxy.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.reflect.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2015.symbol.wellknown.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.array.include.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2016.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.arraybuffer.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.date.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.object.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.sharedmemory.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.string.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2017.typedarrays.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asyncgenerator.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.asynciterable.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.promise.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2018.regexp.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.array.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.object.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.string.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.symbol.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2019.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.bigint.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.date.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.promise.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.sharedmemory.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.string.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.symbol.wellknown.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2020.number.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.promise.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.string.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.weakref.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2021.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.array.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.error.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.intl.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.object.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.string.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.es2022.regexp.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.d.ts","../../../node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/lib/lib.decorators.legacy.d.ts","../../../node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/global.d.ts","../../../node_modules/.pnpm/csstype@3.2.3/node_modules/csstype/index.d.ts","../../../node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/index.d.ts","../../../node_modules/.pnpm/@types+react@19.2.14/node_modules/@types/react/jsx-runtime.d.ts","../../hydration/dist/types/types.d.ts","../../hydration/dist/types/hydrateelement.d.ts","../../hydration/dist/types/hydrateonclient.d.ts","../../hydration/dist/types/hydratevariants.d.ts","../../hydration/dist/types/persistence.d.ts","../../hydration/dist/types/sneakyscript.d.ts","../../hydration/dist/types/index.d.ts","../../color-scheme/dist/types/react.d.ts","../../keymap/dist/types/index.d.mts","../../keymap/dist/types/react.d.ts","../../duration/dist/types/index.d.mts","../../../node_modules/.pnpm/bezier-easing@2.1.0/node_modules/bezier-easing/src/index.d.ts","../../utils/dist/types/replay-data.d.ts","../../utils/dist/types/animation.d.ts","../../utils/dist/types/collections.d.ts","../../utils/dist/types/interaction.d.ts","../../utils/dist/types/math.d.ts","../../utils/dist/types/misc.d.ts","../../utils/dist/types/react.d.ts","../../utils/dist/types/svg.d.ts","../../utils/dist/types/time.d.ts","../../utils/dist/types/types.d.ts","../../utils/dist/types/index.d.ts","../../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.d.ts","../src/utils.ts","../src/colorschemetoggle.tsx","../../ssr/dist/types/index.d.mts","../src/polyfills.ts","../src/fake-fullscreen.ts","../src/fullscreen.tsx","../../event-emitter/dist/types/types.d.mts","../../event-emitter/dist/types/index.d.mts","../../playback/dist/types/synthetic-playback.d.mts","../../playback/dist/types/playback.d.mts","../../playback/dist/types/react.d.ts","../src/mutebutton.tsx","../src/playpause.tsx","../src/thumbnailbox.tsx","../src/scrubberbar.tsx","../src/timedisplay.tsx","../src/volumeslider.tsx","../src/index.ts","../../../node_modules/.pnpm/@types+react-dom@19.2.3_@types+react@19.2.14/node_modules/@types/react-dom/index.d.ts"],"fileIdsList":[[62],[60,61],[63,70],[62,63,71,73,86,87,88],[63,91],[62,63,73,86,87,88,92],[63,89,93,99,100,101,102,103,104],[62,63,73,86,87,88,98],[63,90],[62,63,73,74,86,98,101],[62,63,74,86,98],[62,63,86,98],[63,72],[62,63,73,86,87,98],[94],[95],[63,64],[64,65,66,67,68,69],[64],[63],[62,63,72],[74,96],[62,63,74,96,97],[74,75,76],[76,77,78,79,80,81,82,83,84,85],[79],[74]],"fileInfos":[{"version":"c430d44666289dae81f30fa7b2edebf186ecc91a2d4c71266ea6ae76388792e1","affectsGlobalScope":true,"impliedFormat":1},{"version":"45b7ab580deca34ae9729e97c13cfd999df04416a79116c3bfb483804f85ded4","impliedFormat":1},{"version":"3facaf05f0c5fc569c5649dd359892c98a85557e3e0c847964caeb67076f4d75","impliedFormat":1},{"version":"e44bb8bbac7f10ecc786703fe0a6a4b952189f908707980ba8f3c8975a760962","impliedFormat":1},{"version":"5e1c4c362065a6b95ff952c0eab010f04dcd2c3494e813b493ecfd4fcb9fc0d8","impliedFormat":1},{"version":"68d73b4a11549f9c0b7d352d10e91e5dca8faa3322bfb77b661839c42b1ddec7","impliedFormat":1},{"version":"5efce4fc3c29ea84e8928f97adec086e3dc876365e0982cc8479a07954a3efd4","impliedFormat":1},{"version":"feecb1be483ed332fad555aff858affd90a48ab19ba7272ee084704eb7167569","impliedFormat":1},{"version":"ee7bad0c15b58988daa84371e0b89d313b762ab83cb5b31b8a2d1162e8eb41c2","impliedFormat":1},{"version":"080941d9f9ff9307f7e27a83bcd888b7c8270716c39af943532438932ec1d0b9","affectsGlobalScope":true,"impliedFormat":1},{"version":"2e80ee7a49e8ac312cc11b77f1475804bee36b3b2bc896bead8b6e1266befb43","affectsGlobalScope":true,"impliedFormat":1},{"version":"c57796738e7f83dbc4b8e65132f11a377649c00dd3eee333f672b8f0a6bea671","affectsGlobalScope":true,"impliedFormat":1},{"version":"dc2df20b1bcdc8c2d34af4926e2c3ab15ffe1160a63e58b7e09833f616efff44","affectsGlobalScope":true,"impliedFormat":1},{"version":"515d0b7b9bea2e31ea4ec968e9edd2c39d3eebf4a2d5cbd04e88639819ae3b71","affectsGlobalScope":true,"impliedFormat":1},{"version":"0559b1f683ac7505ae451f9a96ce4c3c92bdc71411651ca6ddb0e88baaaad6a3","affectsGlobalScope":true,"impliedFormat":1},{"version":"0dc1e7ceda9b8b9b455c3a2d67b0412feab00bd2f66656cd8850e8831b08b537","affectsGlobalScope":true,"impliedFormat":1},{"version":"ce691fb9e5c64efb9547083e4a34091bcbe5bdb41027e310ebba8f7d96a98671","affectsGlobalScope":true,"impliedFormat":1},{"version":"8d697a2a929a5fcb38b7a65594020fcef05ec1630804a33748829c5ff53640d0","affectsGlobalScope":true,"impliedFormat":1},{"version":"4ff2a353abf8a80ee399af572debb8faab2d33ad38c4b4474cff7f26e7653b8d","affectsGlobalScope":true,"impliedFormat":1},{"version":"fb0f136d372979348d59b3f5020b4cdb81b5504192b1cacff5d1fbba29378aa1","affectsGlobalScope":true,"impliedFormat":1},{"version":"d15bea3d62cbbdb9797079416b8ac375ae99162a7fba5de2c6c505446486ac0a","affectsGlobalScope":true,"impliedFormat":1},{"version":"68d18b664c9d32a7336a70235958b8997ebc1c3b8505f4f1ae2b7e7753b87618","affectsGlobalScope":true,"impliedFormat":1},{"version":"eb3d66c8327153d8fa7dd03f9c58d351107fe824c79e9b56b462935176cdf12a","affectsGlobalScope":true,"impliedFormat":1},{"version":"38f0219c9e23c915ef9790ab1d680440d95419ad264816fa15009a8851e79119","affectsGlobalScope":true,"impliedFormat":1},{"version":"69ab18c3b76cd9b1be3d188eaf8bba06112ebbe2f47f6c322b5105a6fbc45a2e","affectsGlobalScope":true,"impliedFormat":1},{"version":"a680117f487a4d2f30ea46f1b4b7f58bef1480456e18ba53ee85c2746eeca012","affectsGlobalScope":true,"impliedFormat":1},{"version":"2f11ff796926e0832f9ae148008138ad583bd181899ab7dd768a2666700b1893","affectsGlobalScope":true,"impliedFormat":1},{"version":"4de680d5bb41c17f7f68e0419412ca23c98d5749dcaaea1896172f06435891fc","affectsGlobalScope":true,"impliedFormat":1},{"version":"954296b30da6d508a104a3a0b5d96b76495c709785c1d11610908e63481ee667","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac9538681b19688c8eae65811b329d3744af679e0bdfa5d842d0e32524c73e1c","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a969edff4bd52585473d24995c5ef223f6652d6ef46193309b3921d65dd4376","affectsGlobalScope":true,"impliedFormat":1},{"version":"9e9fbd7030c440b33d021da145d3232984c8bb7916f277e8ffd3dc2e3eae2bdb","affectsGlobalScope":true,"impliedFormat":1},{"version":"811ec78f7fefcabbda4bfa93b3eb67d9ae166ef95f9bff989d964061cbf81a0c","affectsGlobalScope":true,"impliedFormat":1},{"version":"717937616a17072082152a2ef351cb51f98802fb4b2fdabd32399843875974ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"d7e7d9b7b50e5f22c915b525acc5a49a7a6584cf8f62d0569e557c5cfc4b2ac2","affectsGlobalScope":true,"impliedFormat":1},{"version":"71c37f4c9543f31dfced6c7840e068c5a5aacb7b89111a4364b1d5276b852557","affectsGlobalScope":true,"impliedFormat":1},{"version":"576711e016cf4f1804676043e6a0a5414252560eb57de9faceee34d79798c850","affectsGlobalScope":true,"impliedFormat":1},{"version":"89c1b1281ba7b8a96efc676b11b264de7a8374c5ea1e6617f11880a13fc56dc6","affectsGlobalScope":true,"impliedFormat":1},{"version":"74f7fa2d027d5b33eb0471c8e82a6c87216223181ec31247c357a3e8e2fddc5b","affectsGlobalScope":true,"impliedFormat":1},{"version":"d6d7ae4d1f1f3772e2a3cde568ed08991a8ae34a080ff1151af28b7f798e22ca","affectsGlobalScope":true,"impliedFormat":1},{"version":"063600664504610fe3e99b717a1223f8b1900087fab0b4cad1496a114744f8df","affectsGlobalScope":true,"impliedFormat":1},{"version":"934019d7e3c81950f9a8426d093458b65d5aff2c7c1511233c0fd5b941e608ab","affectsGlobalScope":true,"impliedFormat":1},{"version":"52ada8e0b6e0482b728070b7639ee42e83a9b1c22d205992756fe020fd9f4a47","affectsGlobalScope":true,"impliedFormat":1},{"version":"3bdefe1bfd4d6dee0e26f928f93ccc128f1b64d5d501ff4a8cf3c6371200e5e6","affectsGlobalScope":true,"impliedFormat":1},{"version":"59fb2c069260b4ba00b5643b907ef5d5341b167e7d1dbf58dfd895658bda2867","affectsGlobalScope":true,"impliedFormat":1},{"version":"639e512c0dfc3fad96a84caad71b8834d66329a1f28dc95e3946c9b58176c73a","affectsGlobalScope":true,"impliedFormat":1},{"version":"368af93f74c9c932edd84c58883e736c9e3d53cec1fe24c0b0ff451f529ceab1","affectsGlobalScope":true,"impliedFormat":1},{"version":"af3dd424cf267428f30ccfc376f47a2c0114546b55c44d8c0f1d57d841e28d74","affectsGlobalScope":true,"impliedFormat":1},{"version":"995c005ab91a498455ea8dfb63aa9f83fa2ea793c3d8aa344be4a1678d06d399","affectsGlobalScope":true,"impliedFormat":1},{"version":"959d36cddf5e7d572a65045b876f2956c973a586da58e5d26cde519184fd9b8a","affectsGlobalScope":true,"impliedFormat":1},{"version":"965f36eae237dd74e6cca203a43e9ca801ce38824ead814728a2807b1910117d","affectsGlobalScope":true,"impliedFormat":1},{"version":"3925a6c820dcb1a06506c90b1577db1fdbf7705d65b62b99dce4be75c637e26b","affectsGlobalScope":true,"impliedFormat":1},{"version":"0a3d63ef2b853447ec4f749d3f368ce642264246e02911fcb1590d8c161b8005","affectsGlobalScope":true,"impliedFormat":1},{"version":"8cdf8847677ac7d20486e54dd3fcf09eda95812ac8ace44b4418da1bbbab6eb8","affectsGlobalScope":true,"impliedFormat":1},{"version":"8444af78980e3b20b49324f4a16ba35024fef3ee069a0eb67616ea6ca821c47a","affectsGlobalScope":true,"impliedFormat":1},{"version":"3287d9d085fbd618c3971944b65b4be57859f5415f495b33a6adc994edd2f004","affectsGlobalScope":true,"impliedFormat":1},{"version":"b4b67b1a91182421f5df999988c690f14d813b9850b40acd06ed44691f6727ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"8e7f8264d0fb4c5339605a15daadb037bf238c10b654bb3eee14208f860a32ea","affectsGlobalScope":true,"impliedFormat":1},{"version":"782dec38049b92d4e85c1585fbea5474a219c6984a35b004963b00beb1aab538","affectsGlobalScope":true,"impliedFormat":1},{"version":"7e29f41b158de217f94cb9676bf9cbd0cd9b5a46e1985141ed36e075c52bf6ad","affectsGlobalScope":true,"impliedFormat":1},{"version":"ac51dd7d31333793807a6abaa5ae168512b6131bd41d9c5b98477fc3b7800f9f","impliedFormat":1},{"version":"dc0a7f107690ee5cd8afc8dbf05c4df78085471ce16bdd9881642ec738bc81fe","impliedFormat":1},{"version":"42c169fb8c2d42f4f668c624a9a11e719d5d07dacbebb63cbcf7ef365b0a75b3","impliedFormat":1},"0eff7e8c827a6b4d69d8d70da4fb83f24f1a0b2b600556c7929dc9925095f3ba","3bacb44aeb3ebd20957d1dc2ef689ee8007157144b9cb1cbdaf2a3531d44c66b","cee0ce9ca1e0bc522c0144c26f1a65eb20b901b2761804bcc26c4713cc83f841","4c5a1176bb2807ba5c543bbd5ca2722ed22bdf27022c51f3a7c9ee872f1cc730","b4f2d9d6adc44b6b5186a439721d7679eb3bee520aacd746b3116675883cd831","8125f98748dd4bbd4ce71d509ecea3474a3cad8f3d1352e29c2a6a5b8b399738","10240982d1ac7dc0590c971472849d48a954f31fa5884afcc2eed3e11cdcd28e","b8b662c06dc5c6f1a8e4455776542ed35bcbd220dd5c66439854d21f46e74dfa",{"version":"0427b580231f52ef097919ba61fcfe5e37f5fa5523ed4fd6d4864bde4dd8470c","impliedFormat":99},"de635f3aa40a27cca6d425276d463213f07bdaf54873a776f4a03b5fdecee1ce",{"version":"6f2dfeeb74d340004f68f576add21aac0668ae1da4c4e9ba3193541f3e865867","impliedFormat":99},{"version":"5e221d7876afbd3b808798515c5dd53d49e8aa4fe4c6095bc6760b30acff4b37","impliedFormat":1},"3ec9f283a3eb75a2fb4a89467a97ae6d13d3cd7589dadb5e1e5b59a875e6f6c9","cfbb4e78e9b657a14c100a97f6f8d9997a208fe30695895ab384f3fc0246492e","06f5a3f26c2c2dddab05df1375db0a6353efa4bcd818d53e0bbde7b94024d732",{"version":"8005021af1514f4193c860c4b7eeb2f01f660c443c2f7180f2c93aed44af3b16","affectsGlobalScope":true},"2b0dafed8302e979ebbee421ac05e790ee5621457a264cb1b8e76ef3afd72f3b","7f8b57b8dd275f27fc63e58f9f0d608054060cd7f2d57a3bc53653c39f6326e3","4ea806290d11878e3ee168b836612c19bc630c4f0782b1d1582b05b90d771ff8","69eaf11c5a8479bc92d32da085bfb9cba8ca6884366b4941369a4d24a27992c6","eca06e9eb6ebd0a81decc4d04aa1d0df7a2e6cb4588c3059269321c9e0fecc09","239f3c704fc87252b5dd00f70e35bc57af83a33e20a3ad71d14c3d2d99c3b4a4","3db60448ebc41502a9869dd39a4a6a3682ca9b5fcb8297399676fea8c88b7678",{"version":"1dfdec0ec9c299625d20c5cb8f96e2a801c81d91669c6245f520e8734a92fb3d","impliedFormat":1},{"version":"b131ef9faad176b6c142cc6fe1500558f1afb70bce4f2ba2c0df60d76f4ee536","signature":"5cbe0951bd491345f6ef3e9b38dbc0b62c6a8bd553e8ed9c7f523a848ecd72cb"},{"version":"d972ca7887d35ee6efd3781ac892fece1a9c3846f7163aeadbddff8616ecf763","signature":"38b01c0690caaaf23d9959db3fbcabca5313bd83eaaa7cfe3f076fa142e0286f"},{"version":"3954f113df61328c6af4bc83c9e50ab16ddac2ee9793210608e79e40da190061","impliedFormat":99},{"version":"80baa4231e6c2d35c254d82f3fdff692dc6c88f3e4f1b97b05b42a1c29020f5d","signature":"ccd62f94aa21c99e133a749d6e87e3d1695b48a7e91e7503b9fa1549f60b767a"},{"version":"765d7581ac15e7a7aa31b7c00c55291d6ba74b188591cc382e49af47390fc2b6","signature":"94870bb11f04ff117af0715c59d24a38ccfe1f10a3a4992f9c0f8d01443c5213"},{"version":"5e789963d8dca646eae96af4669e88b61ed3acac924bc1ec62b443fff9c3645c","signature":"acf27d2f62d5d325bbe4da5a5068204fb94ae542607529ee896e6b2df6d989d0"},{"version":"be831a6a1a2b57943dff1d23aa3b335b3b1621adc35807d8e3de0a0a9e96d0c9","impliedFormat":99},{"version":"5ce65fa2203ccb5304b06fadecfc53b41325ca5069f285a80f980acc476031f5","impliedFormat":99},{"version":"a6e7dd43e08acdccbc1d7578edeb2ce08b3bca87de26782bbc66192731f9cb83","impliedFormat":99},{"version":"5d4aad5c5865c0358f488e447a0874080b0ef6094f8b313abfb4ef09de83dce5","affectsGlobalScope":true,"impliedFormat":99},"33e8acec13777aeccf10a56d2b39f2ebc46b924dde7989365fc51b7c8b390778",{"version":"0c0efef6a8299f087e4cc90636068fc36e60802856cc375b191835efff149ddf","signature":"cdf78dfee97282d3c40412a02f815e2203b8a9d548e714f78c9dac071047fc46"},{"version":"b37bf0ccebe05b1a40f816313e6a5ef84a2cb1b91a8a336b5f79b6ebdba7c430","signature":"e5609d862c97cf859e4c70ae0aeb7f82e610b8db023847cd759c8c818897e7a1"},{"version":"9dc2c42fbe64f8d3a07136707b3414912d7ca253a890514f9ae66f6c1a2b4a73","signature":"ea2cc5eb65c508b48ab52485c5c0466ea0830841cc383cd0fbb24130e30ca85e"},{"version":"4efd8eacc2e28cffcbeffdd9952f4fd0c5b5b56ec98d1a39b4a3359544fc22af","signature":"c2e4312739fbeba0ad0252ed639e3e789bb6cd2982fb560ccc0b9b6546782455"},{"version":"468abb1fdf97ce4c62cb805c358b9c164d5d23324e58368501ecd75d292099fe","signature":"f455e9d1d6106b6330464b46f3e15ff86781fc09812999abc100462b5f858d72"},{"version":"93a4e22f8716f1b77a04c1f523ada1194c4baf6bd068054afdb37c187200d06f","signature":"7cc475b8c880bd32f223e0ade4ba75b1785880740211469dc38c21e59d696bf9"},{"version":"9ed6420e92e7bd2796786b4a1d0ca16da7c695453addf04cc02847a1888f8a50","signature":"8967ac0df21fd15975f3e4f0446e518d29d2c767c21ae55d916f46b6cff1d5d4"},{"version":"be1cc4d94ea60cbe567bc29ed479d42587bf1e6cba490f123d329976b0fe4ee5","impliedFormat":1}],"root":[88,89,[91,93],[99,105]],"options":{"alwaysStrict":true,"composite":true,"declaration":true,"declarationDir":"./types","esModuleInterop":true,"jsx":4,"module":99,"noImplicitAny":true,"noImplicitOverride":true,"noUncheckedIndexedAccess":false,"outDir":"./esm","removeComments":false,"rewriteRelativeImportExtensions":true,"rootDir":"../src","skipLibCheck":true,"strict":true,"target":9,"verbatimModuleSyntax":true},"referencedMap":[[106,1],[62,2],[63,1],[71,3],[89,4],[92,5],[93,6],[105,7],[99,8],[100,8],[91,9],[102,10],[101,11],[103,12],[88,13],[104,14],[95,15],[94,16],[65,17],[66,17],[67,17],[70,18],[68,19],[69,20],[73,21],[97,22],[98,23],[96,16],[77,24],[86,25],[82,26],[84,27]],"semanticDiagnosticsPerFile":[[102,[{"start":4607,"length":18,"code":2322,"category":1,"messageText":{"messageText":"Type '(e: MouseEvent | TouchEvent) => void' is not assignable to type 'TouchEventHandler<HTMLDivElement>'.","category":1,"code":2322,"next":[{"messageText":"Types of parameters 'e' and 'event' are incompatible.","category":1,"code":2328,"next":[{"messageText":"Type 'TouchEvent<HTMLDivElement>' is not assignable to type 'MouseEvent | TouchEvent'.","category":1,"code":2322,"next":[{"messageText":"Type 'TouchEvent<HTMLDivElement>' is missing the following properties from type 'TouchEvent': which, initUIEvent, cancelBubble, composed, and 9 more.","category":1,"code":2740,"canonicalHead":{"code":2322,"messageText":"Type 'TouchEvent<HTMLDivElement>' is not assignable to type 'TouchEvent'."}}]}]}]}},{"start":7736,"length":3,"code":2322,"category":1,"messageText":{"messageText":"Type '{ children: Element; onTouchStart: (e: MouseEvent | TouchEvent) => void; className: string; style: { left: string; }; viewBox: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'.","category":1,"code":2322,"next":[{"messageText":"Types of property 'onTouchStart' are incompatible.","category":1,"code":2326,"next":[{"messageText":"Type '(e: MouseEvent | TouchEvent) => void' is not assignable to type 'TouchEventHandler<SVGSVGElement>'.","category":1,"code":2322,"next":[{"messageText":"Types of parameters 'e' and 'event' are incompatible.","category":1,"code":2328,"next":[{"messageText":"Type 'TouchEvent<SVGSVGElement>' is not assignable to type 'MouseEvent | TouchEvent'.","category":1,"code":2322,"next":[{"messageText":"Type 'TouchEvent<SVGSVGElement>' is missing the following properties from type 'TouchEvent': which, initUIEvent, cancelBubble, composed, and 9 more.","category":1,"code":2740,"canonicalHead":{"code":2322,"messageText":"Type 'TouchEvent<SVGSVGElement>' is not assignable to type 'TouchEvent'."}}]}]}],"canonicalHead":{"code":2322,"messageText":"Type '{ children: Element; onTouchStart: (e: MouseEvent | TouchEvent) => void; className: string; style: { left: string; }; viewBox: string; }' is not assignable to type 'SVGProps<SVGSVGElement>'."}}]}]}}]]],"latestChangedDtsFile":"./types/index.d.ts","version":"5.9.3"}

package/dist/types/ColorSchemeToggle.d.ts

@@ -0,0 +1,8 @@
+import { type ColorScheme } from "@liqvid/color-scheme/react";
+export declare function ColorSchemeToggle({ className, render, shortcuts, }: {
+    className?: string;
+    render: (state: {
+        colorScheme: ColorScheme;
+    }, props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactNode;
+    shortcuts?: string | string[];
+}): import("react").ReactNode;

package/dist/types/FullScreen.d.ts

@@ -0,0 +1,10 @@
+interface FullScreenControlProps {
+    className?: string;
+    render: (state: {
+        isFullScreen: boolean;
+    }, props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactNode;
+    shortcuts?: string | string[];
+}
+/** Fullscreen control */
+export declare function FullScreen({ className, render, shortcuts, }: FullScreenControlProps): import("react").ReactNode;
+export {};

package/dist/types/MuteButton.d.ts

@@ -0,0 +1,24 @@
+interface MutePropsBase {
+    className?: string;
+    shortcuts?: string[] | string;
+}
+interface MutesPropsCustomRender {
+    render: (state: {
+        muted: boolean;
+        volume: number;
+    }, props: React.HTMLAttributes<HTMLButtonElement>) => React.ReactNode;
+    variants?: undefined;
+}
+interface MutePropsVariants {
+    render?: undefined;
+    variants: {
+        muted?: true;
+        gte?: number;
+        lt?: number;
+        props: React.ButtonHTMLAttributes<HTMLButtonElement>;
+    }[];
+}
+export type MuteProps = MutePropsBase & (MutesPropsCustomRender | MutePropsVariants);
+/** Mute/unmute button */
+export declare function Mute({ className, render, shortcuts }: MuteProps): import("react").ReactNode;
+export {};

package/dist/types/PlayPause.d.ts

@@ -0,0 +1,9 @@
+/** Control for playing/pausing */
+export declare function PlayPause({ className, render, shortcuts, }: {
+    className?: string;
+    render: (state: {
+        paused: boolean;
+        seeking: boolean;
+    }, props: React.ButtonHTMLAttributes<HTMLButtonElement>) => React.ReactNode;
+    shortcuts?: string[];
+}): import("react").ReactNode;

package/dist/types/ScrubberBar.d.ts

@@ -0,0 +1,23 @@
+import { type DurationLike } from "@liqvid/duration";
+import { type ThumbData } from "./ThumbnailBox";
+export type { ThumbData };
+export interface RelativeSeekShortcut {
+    delta: DurationLike;
+    key: string;
+}
+export interface PercentageSeekShortcut {
+    key: string;
+    /**
+     * @min 0
+     * @max 1
+     */
+    multiplier: number;
+}
+export interface ScrubberBarProps {
+    shortcuts?: {
+        relative?: RelativeSeekShortcut[];
+        percentage?: PercentageSeekShortcut[];
+    };
+    thumbs?: ThumbData;
+}
+export declare function ScrubberBar({ shortcuts, thumbs, ...props }: ScrubberBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/ThumbnailBox.d.ts

@@ -0,0 +1,42 @@
+import type { DurationLike } from "@liqvid/duration";
+export interface ThumbData {
+    /**
+     * Number of columns per thumbnail sheet.
+     * @default 5
+     */
+    cols?: number;
+    /**
+     * Number of rows per thumbnail sheet.
+     * @default 5
+     */
+    rows?: number;
+    /**
+     * Width of individual thumbnails.
+     * @default 160
+     */
+    width?: number;
+    /**
+     * Height of individual thumbnails.
+     * @default 100
+     */
+    height?: number;
+    /**
+     * How many seconds between thumbnails.
+     * @default 4
+     */
+    frequency?: number;
+    /** URL pattern for thumbnails. Must include "%s". */
+    path: string;
+    /** Points of interest in the video to highlight. */
+    highlights?: VideoHighlight[];
+}
+export interface ThumbnailBoxProps extends Omit<ThumbData, "highlights"> {
+    progress: number;
+    show: boolean;
+    title?: string;
+}
+export interface VideoHighlight {
+    time: DurationLike;
+    title: string;
+}
+export declare function ThumbnailBox({ cols, rows, frequency, path, progress, show, title, height, width, }: ThumbnailBoxProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/TimeDisplay.d.ts

@@ -0,0 +1 @@
+export declare function TimeDisplay(): import("react/jsx-runtime").JSX.Element;

package/dist/types/VolumeSlider.d.ts

@@ -0,0 +1,25 @@
+export interface AdjustVolumeShortcut {
+    /** Keyboard sequence */
+    seq: string;
+    /**
+     * A value of 5 will increase the volume by 5%; a value of -10 will decrease the volume by 10%.
+     */
+    delta: number;
+}
+export interface SetVolumeShortcut {
+    /** Keyboard sequence */
+    seq: string;
+    /** Value between 0 and 100 to set the volume to. */
+    value: number;
+}
+export type VolumeShortcut = AdjustVolumeShortcut | SetVolumeShortcut;
+export interface VolumeSliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    className?: string;
+    render: (state: {
+        muted: boolean;
+        volume: number;
+    }, props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
+    shortcuts?: VolumeShortcut[];
+}
+/** Volume control */
+export declare function VolumeSlider({ className, render, shortcuts, }: VolumeSliderProps): import("react").ReactNode;

package/dist/types/fake-fullscreen.d.ts

@@ -0,0 +1,4 @@
+export declare const requestFullScreen: () => void;
+export declare const exitFullScreen: () => void;
+export declare const isFullScreen: () => boolean | undefined;
+export declare const onFullScreenChange: (callback: () => void) => void;

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+export { ColorSchemeToggle } from "./ColorSchemeToggle";
+export { FullScreen } from "./FullScreen";
+export { Mute, type MuteProps } from "./MuteButton";
+export { PlayPause } from "./PlayPause";
+export { type PercentageSeekShortcut, type RelativeSeekShortcut, ScrubberBar, type ScrubberBarProps, } from "./ScrubberBar";
+export type { ThumbData, VideoHighlight } from "./ThumbnailBox";
+export { TimeDisplay } from "./TimeDisplay";
+export { type VolumeShortcut, VolumeSlider, type VolumeSliderProps, } from "./VolumeSlider";

package/dist/types/polyfills.d.ts

@@ -0,0 +1,5 @@
+export declare const fullscreenEnabled: boolean;
+export declare const requestFullScreen: () => Promise<void>;
+export declare const exitFullScreen: () => Promise<void>;
+export declare const isFullScreen: () => boolean | undefined;
+export declare function onFullScreenChange(callback: EventListener): void;

package/dist/types/utils.d.ts

@@ -0,0 +1,4 @@
+import type { Keymap } from "@liqvid/keymap";
+export declare function bind(keymap: Keymap, seqs: string | string[] | undefined, callback: () => void): void;
+export declare function unbind(keymap: Keymap, seqs: string | string[] | undefined, callback: () => void): void;
+export declare function convertShortcuts(keys: string | string[] | undefined): string | undefined;

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@liqvid/controls",
+  "version": "1.0.0-alpha.0",
+  "description": "Controls for Liqvid",
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    }
+  },
+  "files": [
+    "dist/*"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/liqvidjs/liqvid.git"
+  },
+  "author": "Yuri Sulyma <yuri@liqvidjs.org>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/liqvidjs/liqvid/issues"
+  },
+  "homepage": "https://github.com/liqvidjs/liqvid/tree/main/packages/controls#readme",
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "@liqvid/player": "^1.0.0-alpha.0",
+    "@liqvid/utils": "^2.0.0-alpha.0",
+    "@liqvid/ssr": "^0.0.2",
+    "@liqvid/keymap": "^2.0.0-alpha.0",
+    "@liqvid/color-scheme": "^1.0.0-alpha.0",
+    "@liqvid/playback": "^2.0.0-alpha.0",
+    "@liqvid/duration": "^1.3.0"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "2.4.4",
+    "@types/react": "^19",
+    "typescript": "^5.9"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "pnpm build:clean && mkdir dist && pnpm build:js && pnpm build:postclean",
+    "build:clean": "rm -rf dist",
+    "build:js": "tsc",
+    "build:postclean": "rm dist/tsconfig.tsbuildinfo",
+    "lint": "biome check --fix",
+    "watch": "tsc --watch"
+  }
+}