---
/**
 * Cast.astro — embeds an asciinema `.cast` recording via asciinema-player
 * (ADR-website-001 §2). Client-side island: the player script is bundled and
 * initialises every `.asciinema-cast` element on the page from its data
 * attributes, so multiple casts on one page work without per-instance scripts.
 *
 * `.cast` files live in `public/casts/` and are generated from the sources in
 * `casts-src/` (run `pnpm casts`). Recordings are regenerable artifacts — the
 * source command-lists are the durable thing (re-run, re-record as the app
 * evolves).
 */
import 'asciinema-player/dist/bundle/asciinema-player.css';

interface Props {
  /** Path to the cast, e.g. `/casts/quickstart.cast`. */
  src: string;
  autoPlay?: boolean;
  loop?: boolean;
  /** Skip idle gaps longer than this many seconds (keeps demos snappy). */
  idleTimeLimit?: number;
  /** Poster frame shown before play, e.g. `npt:0:2` (the frame at 2s). */
  poster?: string;
  cols?: number;
  rows?: number;
  theme?: string;
}

const {
  src,
  autoPlay = false,
  loop = false,
  idleTimeLimit = 2,
  poster = 'npt:0:2',
  cols,
  rows,
  theme = 'asciinema',
} = Astro.props;

// Serialise options for the client script; nulls are dropped there.
const opts = JSON.stringify({
  autoPlay,
  loop,
  idleTimeLimit,
  poster,
  cols,
  rows,
  theme,
  fit: 'width',
  controls: true,
});
---

<div class="asciinema-cast" data-src={src} data-opts={opts}></div>

<script>
  import * as AsciinemaPlayer from 'asciinema-player';

  function initCasts() {
    document.querySelectorAll<HTMLElement>('.asciinema-cast').forEach((el) => {
      if (el.dataset.initialised) return;
      el.dataset.initialised = '1';
      const opts = JSON.parse(el.dataset.opts || '{}');
      Object.keys(opts).forEach((k) => opts[k] == null && delete opts[k]);
      AsciinemaPlayer.create(el.dataset.src!, el, opts);
    });
  }

  initCasts();
  // Re-init after Starlight/Astro view-transition navigations.
  document.addEventListener('astro:page-load', initCasts);
</script>