// asciinema-player over a run's terminal.cast — the terminal twin of the// browser surface's session video. Idle stretches (token-expiry waits) are// compressed so playback stays watchable.import { useEffect, useRef } from "react";import * as AsciinemaPlayer from "asciinema-player";import "asciinema-player/dist/bundle/asciinema-player.css"; const TerminalCast = ({ url }: { url: string }) => { const mount = useRef<HTMLDivElement>(null); useEffect(() => { if (!mount.current) return; const player = AsciinemaPlayer.create(url, mount.current, { autoPlay: true, idleTimeLimit: 2, fit: "width", terminalFontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace", }); return () => player.dispose(); }, [url]); return <div ref={mount} className="cast-player" />;}; export default TerminalCast;
// asciinema-player over a run's terminal.cast — the terminal twin of the
// browser surface's session video. Idle stretches (token-expiry waits) are
// compressed so playback stays watchable.
import { useEffect, useRef } from "react";
import * as AsciinemaPlayer from "asciinema-player";
import "asciinema-player/dist/bundle/asciinema-player.css";
const TerminalCast = ({ url }: { url: string }) => {
const mount = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!mount.current) return;
const player = AsciinemaPlayer.create(url, mount.current, {
autoPlay: true,
idleTimeLimit: 2,
fit: "width",
terminalFontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
});
return () => player.dispose();
}, [url]);
return <div ref={mount} className="cast-player" />;
};
export default TerminalCast;