frontend/script/edit/EditPage.tsx

import { Duration, formatDuration } from "../components/Duration";

import Element = JSX.Element;
import { Section } from "../components/Section";
import MultiRangeSlider from "../components/MultiSlider";
import { DemoHead } from "../header";
import { createSignal } from "solid-js";
import { downloadBuffer, edit } from "./tools";

export interface EditPageProps {
  header: DemoHead;
  demoData: ArrayBuffer;
  setDropText: (string) => void;
  name: string;
}

export const Editor = (props: EditPageProps) => {
  let demoInfo: any[] | Element = [];
  demoInfo = (
    <div className="demo-info">
      {props.header.map}
      <Duration className="time" duration={Math.floor(props.header.duration)} />
    </div>
  );

  const [loading, setLoading] = createSignal(false);
  const [cutFrom, setCutFrom] = createSignal(0);
  const [cutTo, setCutTo] = createSignal(props.header.ticks);
  const intervalPerTick = props.header.duration / props.header.ticks;
  const [unlockPov, setUnlockPov] = createSignal(false);
  const [fixPlayerCount, setFixPlayerCount] = createSignal(true);

  const editCb = async () => {
    try {
      setLoading(true);
      props.setDropText("Editing...");
      await doEdit(
        props.name,
        props.demoData,
        props.header,
        unlockPov(),
        fixPlayerCount(),
        cutFrom(),
        cutTo(),
      );
      props.setDropText(props.name);
      setLoading(false);
    } catch (e) {
      props.setDropText("Error: " + e.toString());
      setLoading(false);
    }
  };

  return (
    <div>
      {demoInfo}
      <Section title="Unlock camera">
        <ul key={1}>
          <li key={1}>
            Unlocks the camera in pov demos, allowing free movement as if it
            were an stv demo.
          </li>
          <li key={2}>When the player respawns the camera will be moved.</li>
          <li key={3}>
            As pov demos only contain data near the player, far away players
            might freeze, teleport or otherwise behave weirdly.
          </li>
        </ul>
        <p key={2}>
          <input
            type="checkbox"
            id="pov-unlock"
            checked={unlockPov() ? "checked" : null}
            onChange={() => {
              setUnlockPov(!unlockPov());
            }}
          />
          <label htmlFor="pov-unlock">Unlock camara for pov demo</label>
        </p>
      </Section>
      <Section title="Cut demo">
        <ul key={1}>
          <li key={1}>Cuts the demo file to the selected tick range.</li>
          <li key={2}>
            Cutting demos is experimental, resulting demo files might crash,
            have broken animations or have other issues.
          </li>
          <li key={3}>
            Changing the specific cut range can sometimes work around issues
            with broken demos.
          </li>
        </ul>
        <p key={2}>
          <MultiRangeSlider
            min={0}
            max={props.header.ticks}
            onChange={(min, max) => {
              if (min !== cutFrom() || max !== cutTo()) {
                setCutFrom(min);
                setCutTo(max);
              }
            }}
            labelFn={(ticks) => formatDuration(ticks * intervalPerTick)}
          />
        </p>
      </Section>
      <Section title="Fix player count">
        <ul key={1}>
          <li key={1}>
            The 2023-07-25 update increased the max player count from 32 to 100,
            this broke playing some demos from before the update.
          </li>
          <li key={2}>
            This option attempts to make demos from before the update
            compatible.
          </li>
          <li key={3}>Using it on newer demos should have no effect.</li>
        </ul>
        <p key={2}>
          <input
            type="checkbox"
            id="fix-player-count"
            checked={fixPlayerCount() ? "checked" : null}
            onChange={() => {
              setFixPlayerCount(!fixPlayerCount());
            }}
          />
          <label htmlFor="fix-player-count">Fix player count</label>
        </p>
      </Section>
      <Section title="Process">
        <p key={1}>
          <button
            onClick={editCb}
            className="pure-button pure-button-primary"
            disabled={loading() ? "disabled" : null}
          >
            {() => (loading() ? "Processing..." : "Edit")}
          </button>
        </p>
      </Section>
    </div>
  );
};

async function doEdit(
  name: string,
  data: ArrayBuffer,
  header: DemoHead,
  unlockPov: boolean,
  fixPlayerCount: boolean,
  from: number,
  to: number,
) {
  let options = {
    unlock_pov: unlockPov,
    fix_player_count: fixPlayerCount,
    cut: from > 0 || to < header.ticks ? { from, to } : undefined,
  };
  console.log(options);
  const edited = await edit(data, options);
  downloadBuffer(edited, name.replace(".dem", "_edited.dem"));
}