@columenlabs/lumen-ui 0.1.159 → 0.1.161

package/dist/lumen-player.js

@@ -0,0 +1,244 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// LumenPlayer: a recording, video or audio, on the browser's own <video>/<audio> (served with byte
+// ranges, so seeking reads only what it needs) with the kit's controls under it: play, back and
+// forward 15 s, the seek bar and its times, speed, captions and full screen. Chapters jump; a timed
+// transcript lights the line being said, keeps it in view inside its own box and plays from a
+// line on a tap. It starts at `start` and reports its place through `onProgress` about every 10 s
+// while it plays, on pause and at the end, so an app can save where it was left. A slides source
+// is pictures in step with an audio track: the slide shown is the last one whose `at` has passed.
+// Keys work only while the player has focus: space or k plays, j and l skip 15 s, ← and → 5 s,
+// f full screen, c captions.
+import { CaptionsIcon, GaugeIcon, MaximizeIcon, MinimizeIcon, PauseIcon, PlayIcon, RotateCcwIcon, RotateCwIcon, } from 'lucide-react';
+import { useEffect, useRef, useState, } from 'react';
+import { cn } from './lib/utils.js';
+import { LumenSelector } from './lumen-selector.js';
+import { IconButton } from './page.js';
+import { Slider } from './ui/slider.js';
+import { Spinner } from './ui/spinner.js';
+const SPEEDS = ['0.75', '1', '1.25', '1.5', '1.75', '2'];
+const SKIP = 15;
+const NUDGE = 5;
+const REPORT_MS = 10_000;
+/** After a person scrolls the transcript, it stops following for this long. */
+const HANDS_OFF_MS = 5_000;
+const AUDIO = /\.(mp3|m4a|aac|wav|ogg|oga|opus|flac)(\?|#|$)/i;
+/** `1:02`, `1:02:03`. */
+export function playerClock(seconds) {
+    const s = Math.max(0, Math.floor(Number.isFinite(seconds) ? seconds : 0));
+    const h = Math.floor(s / 3600);
+    const m = Math.floor((s % 3600) / 60);
+    const ss = String(s % 60).padStart(2, '0');
+    return h ? `${h}:${String(m).padStart(2, '0')}:${ss}` : `${m}:${ss}`;
+}
+/** The last entry whose time has passed, by binary search over a list sorted by time. */
+function lastAt(list, time, now) {
+    let lo = 0;
+    let hi = list.length - 1;
+    let at = -1;
+    while (lo <= hi) {
+        const mid = (lo + hi) >> 1;
+        if (time(list[mid]) <= now) {
+            at = mid;
+            lo = mid + 1;
+        }
+        else
+            hi = mid - 1;
+    }
+    return at;
+}
+export function LumenPlayer({ src, source, kind, title, poster, tracks, chapters, transcript, start, onProgress, onEnded, autoPlay, className, }) {
+    const root = useRef(null);
+    const media = useRef(null);
+    const url = source?.kind === 'slides' ? source.audio : (src ?? '');
+    const slides = source?.kind === 'slides' ? source.slides : null;
+    const video = !slides && (kind ? kind === 'video' : !AUDIO.test(url));
+    const [now, setNow] = useState(start ?? 0);
+    const [duration, setDuration] = useState(null);
+    const [playing, setPlaying] = useState(false);
+    const [waiting, setWaiting] = useState(false);
+    const [failed, setFailed] = useState(false);
+    const [rate, setRate] = useState('1');
+    const [captions, setCaptions] = useState(() => !!tracks?.some((t) => t.default));
+    const [full, setFull] = useState(false);
+    const last = useRef(0);
+    const progress = useRef(onProgress);
+    progress.current = onProgress;
+    const report = (ended = false) => {
+        const el = media.current;
+        // Opening a recording and leaving it unplayed saves nothing.
+        if (!el || !Number.isFinite(el.currentTime) || (!ended && el.currentTime < 1))
+            return;
+        last.current = Date.now();
+        progress.current?.(Math.round(el.currentTime), {
+            duration: Number.isFinite(el.duration) ? Math.round(el.duration) : null,
+            ended,
+        });
+    };
+    // Leaving the player (closing its drawer) saves the place too.
+    // biome-ignore lint/correctness/useExhaustiveDependencies: report reads refs only, once on leave
+    useEffect(() => {
+        const el = media.current;
+        return () => {
+            if (el && !el.ended && el.currentTime >= 1) {
+                progress.current?.(Math.round(el.currentTime), {
+                    duration: Number.isFinite(el.duration) ? Math.round(el.duration) : null,
+                    ended: false,
+                });
+            }
+        };
+    }, [url]);
+    useEffect(() => {
+        const on = () => setFull(document.fullscreenElement === root.current);
+        document.addEventListener('fullscreenchange', on);
+        return () => document.removeEventListener('fullscreenchange', on);
+    }, []);
+    // Captions follow the toggle once the tracks have loaded.
+    useEffect(() => {
+        const list = media.current?.textTracks;
+        if (!list)
+            return;
+        for (let i = 0; i < list.length; i++) {
+            const t = list[i];
+            if (t)
+                t.mode = captions && i === 0 ? 'showing' : 'hidden';
+        }
+    }, [captions]);
+    const seek = (s, play = false) => {
+        const el = media.current;
+        if (!el)
+            return;
+        const end = Number.isFinite(el.duration) ? el.duration : Number.POSITIVE_INFINITY;
+        el.currentTime = Math.min(Math.max(0, s), end);
+        setNow(el.currentTime);
+        if (play)
+            void el.play().catch(() => { });
+    };
+    const toggle = () => {
+        const el = media.current;
+        if (!el)
+            return;
+        if (el.paused)
+            void el.play().catch(() => { });
+        else
+            el.pause();
+    };
+    const fullscreen = () => {
+        if (document.fullscreenElement)
+            void document.exitFullscreen().catch(() => { });
+        else
+            void root.current?.requestFullscreen?.().catch(() => { });
+    };
+    const onKey = (e) => {
+        const t = e.target;
+        // Fields, menus and the seek bar keep their own keys.
+        if (t.closest('input, textarea, select, [role="slider"], [role="combobox"], [role="listbox"]'))
+            return;
+        const here = media.current?.currentTime ?? 0;
+        const keys = {
+            ' ': toggle,
+            k: toggle,
+            j: () => seek(here - SKIP),
+            l: () => seek(here + SKIP),
+            ArrowLeft: () => seek(here - NUDGE),
+            ArrowRight: () => seek(here + NUDGE),
+            ...(video ? { f: fullscreen } : {}),
+            ...(video && tracks?.length ? { c: () => setCaptions((c) => !c) } : {}),
+        };
+        const run = keys[e.key];
+        // Space on a focused button presses it; the player takes it only on itself or the media.
+        if (!run || e.metaKey || e.ctrlKey || e.altKey)
+            return;
+        if (e.key === ' ' && t.closest('button'))
+            return;
+        e.preventDefault();
+        run();
+    };
+    const events = {
+        ref: media,
+        src: url,
+        preload: 'metadata',
+        playsInline: true,
+        onLoadedMetadata: (e) => {
+            const el = e.currentTarget;
+            setFailed(false);
+            setDuration(Number.isFinite(el.duration) ? el.duration : null);
+            el.playbackRate = Number(rate);
+            if (start && start > 0 && (!Number.isFinite(el.duration) || start < el.duration - 1)) {
+                el.currentTime = start;
+                setNow(start);
+            }
+            if (autoPlay)
+                void el.play().catch(() => { });
+        },
+        onDurationChange: (e) => {
+            const d = e.currentTarget.duration;
+            setDuration(Number.isFinite(d) ? d : null);
+        },
+        onTimeUpdate: (e) => {
+            const el = e.currentTarget;
+            setNow(el.currentTime);
+            if (!el.paused && Date.now() - last.current >= REPORT_MS)
+                report();
+        },
+        onPlay: () => setPlaying(true),
+        onPause: () => {
+            setPlaying(false);
+            report();
+        },
+        onWaiting: () => setWaiting(true),
+        onPlaying: () => setWaiting(false),
+        onCanPlay: () => setWaiting(false),
+        onError: () => {
+            setWaiting(false);
+            setFailed(true);
+        },
+        onEnded: () => {
+            setPlaying(false);
+            report(true);
+            onEnded?.();
+        },
+    };
+    const slide = slides ? (slides[lastAt(slides, (s) => s.at, now)] ?? slides[0]) : null;
+    const chapter = chapters?.length ? lastAt(chapters, (c) => c.at, now) : -1;
+    const end = duration ?? 0;
+    return (_jsxs("section", { ref: root, 
+        // biome-ignore lint/a11y/noNoninteractiveTabindex: the player takes its keys while focused
+        tabIndex: 0, onKeyDown: onKey, "aria-label": title ? `${title} player` : 'Player', className: cn('flex min-w-0 flex-col gap-3 rounded-md outline-none focus-visible:ring-3 focus-visible:ring-ring/50', full && 'justify-center bg-background p-4', className), children: [_jsxs("div", { className: cn('relative overflow-hidden rounded-md', (video || slides) && 'bg-black', full && 'min-h-0 flex-1'), children: [video ? (_jsx("video", { ...events, poster: poster, title: title, onClick: toggle, className: cn('w-full', full ? 'h-full object-contain' : 'aspect-video'), children: tracks?.map((t) => (_jsx("track", { kind: "captions", src: t.src, srcLang: t.srcLang, label: t.label, default: t.default }, t.src))) }, url)) : (_jsxs(_Fragment, { children: [_jsx("audio", { ...events, title: title, className: "hidden" }, url), slide ? (_jsx("img", { src: slide.image, alt: slide.alt ?? title ?? '', className: cn('w-full object-contain', full ? 'h-full' : 'aspect-video') })) : null] })), waiting && !failed ? (_jsx("span", { className: "absolute inset-0 flex items-center justify-center bg-black/20", children: _jsx(Spinner, { className: "size-6 text-white" }) })) : null, failed ? (_jsxs("div", { role: "alert", className: cn('flex items-center justify-center gap-2 p-4 text-sm', video || slides ? 'absolute inset-0 bg-black/70 text-white' : 'text-destructive'), children: [_jsx("span", { className: "truncate", children: "Could not load this recording" }), _jsx(IconButton, { icon: RotateCwIcon, label: "Try again", variant: "secondary", onClick: () => {
+                                    setFailed(false);
+                                    media.current?.load();
+                                } })] })) : null] }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx(Slider, { "aria-label": "Seek", min: 0, max: end || 1, step: 1, value: [Math.min(now, end || 1)], disabled: !end, onValueChange: ([v]) => v !== undefined && seek(v), className: "py-2" }), _jsxs("div", { className: "flex min-w-0 items-center gap-1", children: [_jsx(IconButton, { icon: playing ? PauseIcon : PlayIcon, label: playing ? 'Pause' : 'Play', variant: "default", onClick: toggle, disabled: failed }), _jsx(IconButton, { icon: RotateCcwIcon, label: `Back ${SKIP} seconds`, onClick: () => seek(now - SKIP) }), _jsx(IconButton, { icon: RotateCwIcon, label: `Forward ${SKIP} seconds`, onClick: () => seek(now + SKIP) }), _jsxs("span", { className: "num ml-1 min-w-0 truncate text-xs text-muted-foreground", children: [playerClock(now), " / ", duration === null ? '–:––' : playerClock(duration)] }), _jsxs("span", { className: "ml-auto flex shrink-0 items-center gap-1", children: [_jsx(LumenSelector, { trigger: "chip", size: "sm", icon: GaugeIcon, label: "Speed", value: rate, display: _jsxs("span", { className: "num", children: [rate, "\u00D7"] }), options: SPEEDS.map((s) => ({ value: s, label: `${s}×` })), search: false, align: "end", onChange: (v) => {
+                                            setRate(v);
+                                            if (media.current)
+                                                media.current.playbackRate = Number(v);
+                                        } }), video && tracks?.length ? (_jsx(IconButton, { icon: CaptionsIcon, label: captions ? 'Hide captions' : 'Show captions', pressed: captions, onClick: () => setCaptions((c) => !c) })) : null, video ? (_jsx(IconButton, { icon: full ? MinimizeIcon : MaximizeIcon, label: full ? 'Exit full screen' : 'Full screen', onClick: fullscreen })) : null] })] })] }), !full && chapters?.length ? (_jsx(PlayerList, { label: "Chapters", children: chapters.map((c, i) => (_jsx(PlayerRow, { at: c.at, current: i === chapter, onPlay: () => seek(c.at, true), children: c.title }, `${c.at}:${c.title}`))) })) : null, !full && transcript?.length ? (_jsx(Transcript, { lines: transcript, now: now, playing: playing, onPlay: (s) => seek(s, true) })) : null] }));
+}
+function PlayerList({ label, children }) {
+    return (_jsxs("section", { "aria-label": label, className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: label }), _jsx("ol", { className: "flex flex-col", children: children })] }));
+}
+function PlayerRow({ at, current, onPlay, children, wrap, index, }) {
+    return (_jsx("li", { "data-line": index, children: _jsxs("button", { type: "button", onClick: onPlay, "aria-current": current || undefined, className: cn('flex w-full min-w-0 gap-3 rounded-md px-2 py-1 text-left text-sm hover:bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50', wrap ? 'items-baseline' : 'items-center', current && 'bg-accent text-accent-foreground'), children: [_jsx("time", { className: "num w-14 shrink-0 text-xs text-muted-foreground", children: playerClock(at) }), _jsx("span", { className: cn('min-w-0 flex-1', wrap ? 'break-words' : 'truncate'), children: children })] }) }));
+}
+function Transcript({ lines, now, playing, onPlay, }) {
+    const box = useRef(null);
+    const touched = useRef(0);
+    const at = lastAt(lines, (l) => l.start, now);
+    const line = lines[at];
+    const current = line && (line.end === undefined || now < line.end) ? at : -1;
+    // While it plays, the line being said stays in view inside the box (never the page), unless the
+    // person has just scrolled it themselves.
+    useEffect(() => {
+        const el = box.current;
+        if (!playing || current < 0 || !el || Date.now() - touched.current < HANDS_OFF_MS)
+            return;
+        const row = el.querySelector(`[data-line="${current}"]`);
+        if (!row)
+            return;
+        const top = row.offsetTop - el.offsetTop;
+        if (top < el.scrollTop || top + row.offsetHeight > el.scrollTop + el.clientHeight)
+            el.scrollTo({ top: top - el.clientHeight / 3, behavior: 'smooth' });
+    }, [current, playing]);
+    const mark = () => {
+        touched.current = Date.now();
+    };
+    return (_jsxs("section", { "aria-label": "Transcript", className: "flex flex-col gap-1", children: [_jsx("h3", { className: "text-xs font-medium text-muted-foreground", children: "Transcript" }), _jsx("div", { ref: box, onWheel: mark, onTouchMove: mark, className: "relative max-h-[40vh] overflow-y-auto overscroll-contain", children: _jsx("ol", { className: "flex flex-col", children: lines.map((l, i) => (_jsxs(PlayerRow, { index: i, at: l.start, current: i === current, onPlay: () => onPlay(l.start), wrap: true, children: [l.who ? _jsxs("span", { className: "font-medium", children: [l.who, ": "] }) : null, l.text] }, `${l.start}:${i}`))) }) })] }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@columenlabs/lumen-ui",
-  "version": "0.1.159",
+  "version": "0.1.161",
   "description": "Lumen: shared React components (frame, views, widgets, charts, drawers).",
   "license": "MIT",
   "type": "module",
@@ -49,7 +49,7 @@
     "@codemirror/lang-javascript": "6.2.5",
     "@codemirror/lang-json": "6.0.2",
     "@codemirror/lang-sql": "6.10.0",
-    "@columenlabs/lumen-ui-types": "0.1.159",
+    "@columenlabs/lumen-ui-types": "0.1.161",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",