Timeline

import { type CSSProperties, useMemo, useState } from "react";

import { arrangeScenes, type SceneInstance, type WrappedConfig, type WrappedSubject } from "@react-wrapped/core";
import { WrappedPlayer } from "@react-wrapped/player";

const ROOM: CSSProperties = { display: "grid", height: 560 };

export function EditableCut({
  subject,
  seed,
  scenes,
  config,
  onConfigChange,
}: {
  subject: WrappedSubject;
  seed: string;
  scenes: readonly SceneInstance[];
  config: WrappedConfig;
  onConfigChange: (next: WrappedConfig) => void;
}) {
  const [asked, setAsked] = useState<string | null>(null);
  // Every scene in the viewer's order, the switched-off ones too: the timeline shows them all.
  const ordered = useMemo(() => arrangeScenes(scenes, config.order), [scenes, config.order]);
  // Only what is still on gets played. Memoized: the player rebuilds its timeline when this array changes.
  const playing = useMemo(
    () => ordered.filter((scene) => !config.hidden.includes(scene.key)),
    [ordered, config.hidden],
  );

  const keys = ordered.map((scene) => scene.key);
  const editing = {
    scenes: ordered,
    hidden: config.hidden,
    onToggle: (key: string, on: boolean) =>
      onConfigChange({
        ...config,
        hidden: on ? config.hidden.filter((hidden) => hidden !== key) : [...config.hidden, key],
      }),
    onMove: (key: string, by: -1 | 1) => {
      const from = keys.indexOf(key);
      const to = from + by;
      if (from === -1 || to < 0 || to >= keys.length) return;
      const order = [...keys];
      [order[from], order[to]] = [order[to], order[from]];
      onConfigChange({ ...config, order });
    },
    // The pencil. Open your own editor here, or the library's `SceneEditor`.
    onEdit: setAsked,
  };

  return (
    <div>
      <div style={ROOM}>
        <WrappedPlayer subject={subject} seed={seed} scenes={playing} config={config} editing={editing} />
      </div>
      <output>
        {`hidden: [${config.hidden.join(", ")}] order: [${config.order.join(", ")}]`}
        {asked ? ` asked to edit: ${asked}` : ""}
      </output>
    </div>
  );
}

import { type CSSProperties, useRef } from "react";

import {
  type SceneInstance,
  useWrappedTimeline,
  WRAPPED_FORMATS,
  type WrappedConfig,
  WrappedStage,
  type WrappedSubject,
} from "@react-wrapped/core";
import { Timeline } from "@react-wrapped/player";

/** How wide the frame is drawn on the page. The stage itself is always full size and scaled to this. */
const WIDTH = 280;

export function OwnTransport({
  subject,
  seed,
  scenes,
  config,
}: {
  subject: WrappedSubject;
  seed: string;
  scenes: readonly SceneInstance[];
  config: WrappedConfig;
}) {
  const stageRef = useRef<HTMLDivElement>(null);
  const trackRef = useRef<HTMLDivElement>(null);
  const clockRef = useRef<HTMLSpanElement>(null);
  // The engine behind `WrappedPlayer`: it builds the timeline and writes the clock and the segments through the refs.
  const { playing, marks, toggle, seekTime, duration } = useWrappedTimeline({
    stageRef,
    scenes,
    config,
    seed,
    trackRef,
    clockRef,
  });

  const format = WRAPPED_FORMATS[config.format];
  const scale = WIDTH / format.width;
  const frame: CSSProperties = {
    position: "relative",
    width: WIDTH,
    height: format.height * scale,
    overflow: "hidden",
    borderRadius: 16,
  };

  return (
    <div>
      <div style={frame}>
        <WrappedStage stageRef={stageRef} subject={subject} scenes={scenes} config={config} scale={scale} />
      </div>
      <div role="group" aria-label="Transport">
        <button type="button" onClick={toggle}>
          {playing ? "Pause" : "Play"}
        </button>
        <Timeline
          trackRef={trackRef}
          scenes={scenes}
          marks={marks}
          duration={duration}
          config={config}
          onSeek={seekTime}
        />
        <span ref={clockRef}>0:00 / 0:00</span>
      </div>
    </div>
  );
}