Function SessionPlayer

e2e/viewer/src/SessionPlayer.tsx:61–434

({
  castUrl,
  videoUrl,
  timeline,
  traces,
  playwrightTraceUrl,
  motelViewer,
}: {
  castUrl: string;
  videoUrl: string;
  timeline: SessionTimeline;
  traces: SessionTraceRef[];
  playwrightTraceUrl: string | null;
  motelViewer: string;
})

};

export const SessionPlayer = ({
  castUrl,
  videoUrl,
  timeline,
  traces,
  playwrightTraceUrl,
  motelViewer,
}: {
  castUrl: string;
  videoUrl: string;
  timeline: SessionTimeline;
  traces: SessionTraceRef[];
  playwrightTraceUrl: string | null;
  motelViewer: string;
}) => {
  const sessionStart = timeline.focus[0]?.at ?? 0;
  const terminalAnchor = timeline.anchors.terminal ?? sessionStart;
  const browserAnchor = timeline.anchors.browser ?? sessionStart;

  const castMount = useRef<HTMLDivElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);
  const castPlayer = useRef<CastPlayer | null>(null);
  // Session-time playhead the tick reads/writes without re-subscribing.
  const tRef = useRef(0);

  const [castDuration, setCastDuration] = useState<number | null>(null);
  const [videoDuration, setVideoDuration] = useState<number | null>(null);
  const [t, setT] = useState(0);
  const [playing, setPlaying] = useState(false);

  // Acts: each focus entry runs until the next one; the last runs until its
  // recording's end (anchored back into session time).
  const acts = useMemo<Act[]>(() => {
    const toSession = (wall: number) => (wall - sessionStart) / 1000;
    return timeline.focus.map((entry, index) => {
      const next = timeline.focus[index + 1];
      let to = Infinity;
      if (next) {
        to = toSession(next.at);
      } else if (entry.window === "terminal" && castDuration !== null) {
        to = toSession(terminalAnchor + castDuration * 1000);
      } else if (entry.window === "browser" && videoDuration !== null) {
        to = toSession(browserAnchor + videoDuration * 1000);
      }
      return { window: entry.window, from: toSession(entry.at), to };
    });
  }, [timeline, sessionStart, terminalAnchor, browserAnchor, castDuration, videoDuration]);

  const duration = acts.at(-1)?.to ?? 0;
  const ready = castDuration !== null && videoDuration !== null && Number.isFinite(duration);

  const actAt = (time: number): number => {
    for (let i = acts.length - 1; i >= 0; i -= 1) {
      const act = acts[i];
      if (act && time >= act.from - 0.001) return i;
    }
    return 0;
  };