canvas-recorder-lib 0.5.0 → 0.6.0

package/dev/canvas-recorder.ts

@@ -80,6 +80,7 @@ import {
 import { buildSlideComponentPanel } from "./slide-panel.ts";
 import { buildVideoClipPanel } from "./video-clip-panel.ts";
 import { buildTextFramePanel, CanvasState } from "./multi-text-panel.ts";
+import { openMultiTextDialog } from "./multi-text-dialog.ts";
 import {
   ownerOf,
   parseSoundClips,
@@ -110,8 +111,15 @@ import {
 import { transcriptFileName, transcriptJson } from "./transcript-export.ts";
 import { wordFlag } from "./transcript-align.ts";
 import type { Device } from "./transcribe-core.ts";
-import { canvasRecorder } from "../lib/main-control.ts";
+import { canvasRecorder, type VideoSize } from "../lib/main-control.ts";
 import { watchServiceWorkerReady } from "./delay-files.ts";
+import {
+  checkLocalFiles,
+  localFilesNeedingPermission,
+  localFileUrlsIn,
+  onLocalFilesChange,
+  requestLocalFileAccess,
+} from "../src/local-files.ts";
 import { DurationAgnosticComponent } from "../src/slide-components/duration-agnostic.ts";
 import {
   componentChoices,
@@ -317,6 +325,166 @@ viewport.addEventListener(
   { passive: false },
 );
 
+// MARK: Video size
+
+/**
+ * The four size fields:  the saved file's pixels, and the drawing units.
+ * See development-plans/configurable-video-size.md.
+ */
+const videoSizeInputs = {
+  pixelWidth: getById("videoPixelWidth", HTMLInputElement),
+  pixelHeight: getById("videoPixelHeight", HTMLInputElement),
+  width: getById("videoUnitWidth", HTMLInputElement),
+  height: getById("videoUnitHeight", HTMLInputElement),
+} satisfies Record<keyof VideoSize, HTMLInputElement>;
+const videoSizeWarning = getById("videoSizeWarning", HTMLSpanElement);
+
+/**
+ * Where the user's size is remembered.  One entry per video, shared by every window
+ * and session on this origin.  localStorage, not IndexedDB:  it's synchronous, so a
+ * saved size is in place before the first frame, and its `storage` event tells the
+ * other windows about a change for free.
+ */
+const videoSizeStorageKey = `canvas-recorder-size|${startRequest.name}`;
+
+/** The size this video's user saved, if any. */
+function readSavedVideoSize(): VideoSize | undefined {
+  try {
+    const parsed: unknown = JSON.parse(
+      localStorage.getItem(videoSizeStorageKey) ?? "null",
+    );
+    if (typeof parsed !== "object" || parsed === null) return undefined;
+    const record = parsed as Record<string, unknown>;
+    const size = {
+      pixelWidth: record.pixelWidth,
+      pixelHeight: record.pixelHeight,
+      width: record.width,
+      height: record.height,
+    };
+    const valid = Object.values(size).every(
+      (value) => typeof value === "number" && Number.isFinite(value) && value > 0,
+    );
+    return valid ? (size as VideoSize) : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+/** Use the saved size, unless the program locked it.  A bad saved size is ignored. */
+function applySavedVideoSize() {
+  if (canvasRecorder.sizeLocked) return;
+  const saved = readSavedVideoSize();
+  if (!saved) return;
+  try {
+    canvasRecorder.size = saved;
+  } catch (error) {
+    console.warn("Ignoring the saved video size.", saved, error);
+  }
+}
+applySavedVideoSize();
+
+/** Copy the size into the fields, except one the user is typing in. */
+function showVideoSize(size: VideoSize) {
+  for (const [key, input] of Object.entries(videoSizeInputs)) {
+    input.readOnly = canvasRecorder.sizeLocked;
+    if (document.activeElement !== input) {
+      input.value = String(size[key as keyof VideoSize]);
+    }
+  }
+  const pixelAspect = size.pixelWidth / size.pixelHeight;
+  const unitAspect = size.width / size.height;
+  const stretched = Math.abs(pixelAspect / unitAspect - 1) > 0.001;
+  videoSizeWarning.textContent = stretched ? "⚠ stretched" : "";
+  videoSizeWarning.title = stretched
+    ? `The pixels are ${pixelAspect.toFixed(3)} : 1 and the units are ${unitAspect.toFixed(3)} : 1, so the picture is stretched to fit.`
+    : "";
+  getById("videoSizeControls", HTMLSpanElement).title = canvasRecorder.sizeLocked
+    ? "The size of the video.  This program sets it, so it can't be changed here."
+    : "The size of the video.  Pixels:  the saved file.  Units:  the coordinates everything is drawn in.  Remembered for this video.";
+}
+showVideoSize(canvasRecorder.size);
+
+/**
+ * The user asked for this size, in the size fields or with a button like the Video File
+ * panel's "Make video this size".  Use it, and remember it for this video.
+ * @returns False if the size is locked, or `size` isn't usable.  Nothing changes then.
+ */
+function setVideoSizeFromGui(size: VideoSize): boolean {
+  if (canvasRecorder.sizeLocked) return false;
+  try {
+    canvasRecorder.size = size;
+  } catch {
+    // E.g. 0.4 pixels, which rounds to 0.  Normal while typing.
+    return false;
+  }
+  try {
+    localStorage.setItem(videoSizeStorageKey, JSON.stringify(canvasRecorder.size));
+  } catch {
+    // Private browsing, or storage is full.  The size still works until the page reloads.
+  }
+  return true;
+}
+
+for (const [key, input] of Object.entries(videoSizeInputs)) {
+  input.addEventListener("input", () => {
+    const value = input.valueAsNumber;
+    // Empty, 0 or negative is normal while typing.  Wait for a usable number.
+    if (!(Number.isFinite(value) && value > 0)) return;
+    setVideoSizeFromGui({ ...canvasRecorder.size, [key]: value });
+  });
+  // Show the value as stored, e.g. rounded to whole pixels, once the user is done typing.
+  input.addEventListener("blur", () => showVideoSize(canvasRecorder.size));
+}
+
+canvasRecorder.onSizeChange((size) => {
+  showVideoSize(size);
+  if (isRecording) return;
+  if (zoomSelect.value === "fit") {
+    zoomToFit();
+  } else {
+    applyZoom(currentZoomFactor);
+  }
+});
+
+// Another window changed this video's size.
+addEventListener("storage", (event) => {
+  if (event.key === videoSizeStorageKey) applySavedVideoSize();
+});
+
+// MARK: Local files
+
+/**
+ * 🔓:  shown when some of the video's files are on this computer, and the browser
+ * needs a click before it will read them.  See src/local-files.ts.
+ */
+const localFilesBtn = getById("localFilesBtn", HTMLButtonElement);
+
+function updateLocalFilesButton() {
+  const names = localFilesNeedingPermission();
+  localFilesBtn.hidden = names.length === 0;
+  localFilesBtn.textContent =
+    names.length === 1 ? "🔓 Allow local file" : `🔓 Allow ${names.length} local files`;
+  localFilesBtn.title =
+    "The browser needs your OK before it reads these files again:\n" + names.join("\n");
+}
+onLocalFilesChange(updateLocalFilesButton);
+
+/** Ask about every file that needs it.  Then the sounds can load. */
+async function allowLocalFiles() {
+  await requestLocalFileAccess();
+  // The images and video clips try again by themselves.  The sounds are loaded all at once.
+  void initAudio();
+}
+localFilesBtn.addEventListener("click", () => void allowLocalFiles());
+
+/**
+ * Find out, without asking the user anything, whether the video's local files can be read.
+ * Any that can't put the 🔓 button on screen.
+ */
+function checkVideosLocalFiles() {
+  void checkLocalFiles(localFileUrlsIn(toShow));
+}
+
 /**
  * @param timeInMs Draw the animation at this time.
  * @param live True for interactive display (schedule markers drawn on top).
@@ -635,6 +803,8 @@ let audioBuilder = new AudioBuilder(toShow.duration);
 let reloadGeneration = 0;
 
 async function initAudio(): Promise<void> {
+  // The sound clips are being re-read, so this is a good time to look for files needing 🔓.
+  checkVideosLocalFiles();
   const myGen = ++reloadGeneration;
   audioReady = false;
   stopAudio();
@@ -766,11 +936,15 @@ playPositionSeconds.addEventListener("input", () => {
 });
 
 // Cmd+Z / Ctrl+Z opens the history (undo) dialog when no text field is focused.
+// A contenteditable, like the Multi Text editor, is a text field with its own undo,
+// and an editor that handled the key itself has said so with preventDefault().
 addEventListener("keydown", (event) => {
   if (!(event.metaKey || event.ctrlKey) || event.key !== "z") return;
+  if (event.defaultPrevented) return;
   if (
     event.target instanceof HTMLInputElement ||
-    event.target instanceof HTMLTextAreaElement
+    event.target instanceof HTMLTextAreaElement ||
+    (event.target instanceof HTMLElement && event.target.isContentEditable)
   )
     return;
   event.preventDefault();
@@ -823,6 +997,76 @@ getById("back5s", HTMLButtonElement).addEventListener("click", () => {
  */
 const FPS = canvasRecorder.fps;
 
+// MARK: Frames
+
+/**
+ * Frame *n* covers the times from n / FPS (inclusive) to (n + 1) / FPS (exclusive), and is
+ * always drawn at its center, (n + ½) / FPS.  That's true for the whole video and for any part
+ * of it, so separately saved pieces line up exactly.
+ *
+ * These measure in frames from the start of the whole video, with the centers at whole numbers.
+ * The play position is stored to 0.1 ms (see {@link loadPlayPositionSeconds}), so a time that
+ * was meant to be a center is allowed to miss by a little.
+ */
+const FRAME_TOLERANCE = 0.01;
+
+/** `ms` in frames, shifted so the frame centers are whole numbers. */
+function framePosition(ms: number): number {
+  return (ms * FPS) / 1000 - 0.5;
+}
+
+/** Where frame `n` is drawn, in ms from the start of the whole video. */
+function frameCenterMs(n: number): number {
+  return ((n + 0.5) * 1000) / FPS;
+}
+
+/** The first frame drawn at or after `ms`. */
+function firstFrameAtOrAfter(ms: number): number {
+  return Math.ceil(framePosition(ms) - FRAME_TOLERANCE);
+}
+
+/** How many frames are drawn from `startMs` (inclusive) to `endMs` (exclusive). */
+function framesBetween(startMs: number, endMs: number): number {
+  return Math.max(0, firstFrameAtOrAfter(endMs) - firstFrameAtOrAfter(startMs));
+}
+
+/**
+ * Move one frame forward (+1) or back (-1), pausing playback.
+ *
+ * From a frame's center, that's exactly one frame.  From anywhere else, it's the nearest
+ * center in that direction, so the playhead always ends up on a time that's really rendered.
+ * It stays inside the play limits.
+ */
+function stepOneFrame(direction: 1 | -1): void {
+  const position = framePosition(playPositionSeconds.valueAsNumber * 1000);
+  let frame =
+    direction > 0
+      ? Math.floor(position + FRAME_TOLERANCE) + 1
+      : Math.ceil(position - FRAME_TOLERANCE) - 1;
+  const first = firstFrameAtOrAfter(sectionStartTime);
+  const last = firstFrameAtOrAfter(sectionEndTime) - 1;
+  frame = Math.max(first, Math.min(last, frame));
+  playCheckBox.checked = false;
+  stopAudio();
+  loadPlayPositionSeconds(frameCenterMs(frame));
+  loadPlayPositionRange();
+}
+
+// Option-← and Option-→:  one frame back or forward.  Like the other hot keys, these use Option.
+// They work even in a text field, where they would otherwise move the cursor one word.
+// Arrow keys never cause a keypress event, so this has to be keydown.
+addEventListener("keydown", (event) => {
+  if (!event.altKey || event.shiftKey || event.metaKey || event.ctrlKey) return;
+  if (suspendLiveAnimationLoop) return; // Recording.
+  if (event.code === "ArrowRight") {
+    stepOneFrame(1);
+    event.preventDefault();
+  } else if (event.code === "ArrowLeft") {
+    stepOneFrame(-1);
+    event.preventDefault();
+  }
+});
+
 /**
  * This is the status of the save.  It has no purpose during live / realtime operation
  * so it initialize it to blank.
@@ -858,7 +1102,21 @@ function escapeHtml(text: string): string {
     .replace(/>/g, "&gt;");
 }
 
-async function startRecording(saveStartMs = 0, saveEndMs = toShow.duration) {
+/**
+ * Record the video and save it to a file the user picks.
+ * @param saveStartMs Where to start, in the video's time.
+ * @param saveEndMs Where to stop.
+ * @param pixelWidth The saved file's width.  Usually {@link canvasRecorder.pixelWidth}, but the
+ * Save dialog can change it, just for this file.  Nothing else sees the change:  the picture
+ * is still drawn in canvasRecorder's units, and simply stretched to this size.
+ * @param pixelHeight The saved file's height.  See `pixelWidth`.
+ */
+async function startRecording(
+  saveStartMs = 0,
+  saveEndMs = toShow.duration,
+  pixelWidth = canvasRecorder.pixelWidth,
+  pixelHeight = canvasRecorder.pixelHeight,
+) {
   stopAudio();
   startRecordingButton.disabled = true;
   liveControls.disabled = true;
@@ -867,13 +1125,13 @@ async function startRecording(saveStartMs = 0, saveEndMs = toShow.duration) {
 
   suspendLiveAnimationLoop = true;
 
-  // Lock canvas at 4K for the duration of recording.
+  // Lock the canvas at the output size for the duration of recording.
   // Disable all size-changing code paths so the encoder sees a constant frame size.
   isRecording = true;
   viewportResizeObserver.disconnect();
   zoomControls.inert = true;
-  canvas.width = canvasRecorder.pixelWidth;
-  canvas.height = canvasRecorder.pixelHeight;
+  canvas.width = pixelWidth;
+  canvas.height = pixelHeight;
   canvas.style.width = "";
   canvas.style.height = "";
   canvas.style.maxWidth = "100%";
@@ -897,7 +1155,7 @@ async function startRecording(saveStartMs = 0, saveEndMs = toShow.duration) {
       suggestedName: "canvas-recording.mp4",
       types: [
         {
-          description: "WebM Video",
+          description: "MP4 Video",
           accept: { "video/mp4": [".mp4"] },
         },
       ],
@@ -911,21 +1169,28 @@ async function startRecording(saveStartMs = 0, saveEndMs = toShow.duration) {
       target: new StreamTarget(writableStream, { chunked: true }), // Batch writes for speed
     });
 
-    // Canvas source (VP9 for good quality/size on macOS)
+    // HEVC (H.265):  Macs encode it in hardware, fast and well.
     const videoSource = new CanvasSource(canvas, {
       codec: "hevc",
-      bitrate: 16_000_000, // ~8Mbps — tune higher for better quality
+      // 16 Mbps.  This file is the master that YouTube re-encodes, so a higher rate costs only
+      // file size.  See "Export bit rate" in development-plans/review-2026-11.md.
+      bitrate: 16_000_000,
     });
 
     output.addVideoTrack(videoSource, { frameRate: FPS });
 
+    // Frames come from the whole video's grid, even for part of it.  See firstFrameAtOrAfter().
+    const firstFrame = firstFrameAtOrAfter(saveStartMs);
+    // The file starts where its first frame starts, so the sound starts there too.
+    const audioStartMs = (firstFrame * 1000) / FPS;
+
     const fullAudioBuffer = audioBuilder.getAudioBuffer();
     let audioBuffer: AudioBuffer;
-    if (saveStartMs === 0 && saveEndMs >= toShow.duration) {
+    if (firstFrame === 0 && saveEndMs >= toShow.duration) {
       audioBuffer = fullAudioBuffer;
     } else {
       const sr = fullAudioBuffer.sampleRate;
-      const s0 = Math.round((saveStartMs / 1000) * sr);
+      const s0 = Math.round((audioStartMs / 1000) * sr);
       const s1 = Math.min(
         Math.round((saveEndMs / 1000) * sr),
         fullAudioBuffer.length,
@@ -960,7 +1225,7 @@ async function startRecording(saveStartMs = 0, saveEndMs = toShow.duration) {
     let frameNumber = 0;
     let warnedNoFramePromises = false;
     while (!canceled) {
-      const timeInMs = saveStartMs + (frameNumber + 0.5) * frameDuration;
+      const timeInMs = frameCenterMs(firstFrame + frameNumber);
       if (timeInMs >= saveEndMs) {
         break;
       }
@@ -1096,6 +1361,85 @@ const saveInfoStart = getById("saveInfoStart", HTMLTableCellElement);
 const saveInfoEnd = getById("saveInfoEnd", HTMLTableCellElement);
 const saveInfoDuration = getById("saveInfoDuration", HTMLTableCellElement);
 const saveInfoFrames = getById("saveInfoFrames", HTMLTableCellElement);
+const saveWidthInput = getById("saveWidth", HTMLInputElement);
+const saveHeightInput = getById("saveHeight", HTMLInputElement);
+const saveKeepAspectCheckbox = getById("saveKeepAspect", HTMLInputElement);
+const saveSizeNote = getById("saveSizeNote", HTMLDivElement);
+const saveOkBtn = getById("saveOkBtn", HTMLButtonElement);
+
+// MARK: Save size
+
+/**
+ * Why the Save dialog's size can't be used, or undefined if it can.
+ *
+ * HEVC stores color at half resolution (4:2:0), so both numbers must be even.
+ */
+function saveSizeProblem(width: number, height: number): string | undefined {
+  if (!(Number.isInteger(width) && width > 0 && Number.isInteger(height) && height > 0)) {
+    return "The size must be two whole numbers of pixels.";
+  }
+  if (width % 2 || height % 2) {
+    return "Both numbers must be even.";
+  }
+  return undefined;
+}
+
+/** Explain the Save dialog's size, and enable OK only when everything is usable. */
+function updateSaveSizeNote(): void {
+  const width = saveWidthInput.valueAsNumber;
+  const height = saveHeightInput.valueAsNumber;
+  const { pixelWidth, pixelHeight } = canvasRecorder;
+  const problem = saveSizeProblem(width, height);
+  if (problem) {
+    saveSizeNote.textContent = problem;
+    saveSizeNote.style.color = "red";
+  } else if (width === pixelWidth && height === pixelHeight) {
+    saveSizeNote.textContent = "The video's own size.";
+    saveSizeNote.style.color = "#555";
+  } else {
+    const stretched =
+      Math.abs((width / height) / (pixelWidth / pixelHeight) - 1) > 0.001;
+    saveSizeNote.textContent = stretched
+      ? `Stretched:  the video is ${pixelWidth} × ${pixelHeight}.`
+      : `${Math.round((width / pixelWidth) * 100)}% of the video's ${pixelWidth} × ${pixelHeight}.`;
+    saveSizeNote.style.color = stretched ? "#a06000" : "#555";
+  }
+  const startMs = (saveStartSecondsInput.valueAsNumber || 0) * 1000;
+  const endMs = (saveEndSecondsInput.valueAsNumber || 0) * 1000;
+  saveOkBtn.disabled = problem !== undefined || endMs <= startMs;
+}
+
+/** Set the Save dialog's size to the video's own. */
+function resetSaveSize(): void {
+  saveWidthInput.value = String(canvasRecorder.pixelWidth);
+  saveHeightInput.value = String(canvasRecorder.pixelHeight);
+  updateSaveSizeNote();
+}
+
+/**
+ * With Keep aspect ratio checked, typing one number sets the other.
+ * The shape always comes from the video's own size, not the last pair typed, so it can't drift.
+ * The other number is rounded to an even number of pixels.
+ */
+function matchSaveAspect(changed: "width" | "height"): void {
+  if (saveKeepAspectCheckbox.checked) {
+    const aspect = canvasRecorder.pixelWidth / canvasRecorder.pixelHeight;
+    const even = (n: number) => Math.max(2, Math.round(n / 2) * 2);
+    if (changed === "width") {
+      const width = saveWidthInput.valueAsNumber;
+      if (width > 0) saveHeightInput.value = String(even(width / aspect));
+    } else {
+      const height = saveHeightInput.valueAsNumber;
+      if (height > 0) saveWidthInput.value = String(even(height * aspect));
+    }
+  }
+  updateSaveSizeNote();
+}
+
+saveWidthInput.addEventListener("input", () => matchSaveAspect("width"));
+saveHeightInput.addEventListener("input", () => matchSaveAspect("height"));
+saveKeepAspectCheckbox.addEventListener("input", () => matchSaveAspect("width"));
+getById("saveVideoSizeBtn", HTMLButtonElement).addEventListener("click", resetSaveSize);
 
 function formatTimecode(ms: number): string {
   const totalFrames = Math.round((ms * FPS) / 1000);
@@ -1116,10 +1460,9 @@ function updateSaveDialogInfo(): void {
   saveInfoEnd.textContent = formatTimecode(endMs);
   saveInfoDuration.textContent = formatTimecode(durationMs);
   saveInfoDuration.style.color = invalid ? "red" : "";
-  saveInfoFrames.textContent = Math.floor(
-    (durationMs * FPS) / 1000,
-  ).toLocaleString();
+  saveInfoFrames.textContent = framesBetween(startMs, endMs).toLocaleString();
   saveInfoFrames.style.color = invalid ? "red" : "";
+  updateSaveSizeNote();
 }
 
 function setSaveRange(startMs: number, endMs: number): void {
@@ -1186,17 +1529,49 @@ getById("saveDialogCancelBtn", HTMLButtonElement).addEventListener(
   () => saveDialog.close(),
 );
 
-getById("saveOkBtn", HTMLButtonElement).addEventListener("click", () => {
+const saveLocalFilesRow = getById("saveLocalFilesRow", HTMLDivElement);
+const saveLocalFilesNote = getById("saveLocalFilesNote", HTMLSpanElement);
+const saveLocalFilesBtn = getById("saveLocalFilesBtn", HTMLButtonElement);
+
+/**
+ * Check every local file the video uses, before a long recording starts, so it can't stop
+ * halfway to wait for a permission nobody is there to give.
+ * @returns True if they're all ready.  Otherwise the Save dialog says what's wrong.
+ */
+async function saveDialogLocalFilesReady(): Promise<boolean> {
+  const problems = await checkLocalFiles(localFileUrlsIn(toShow));
+  saveLocalFilesRow.hidden = problems.length === 0;
+  const needPermission = problems.some((problem) => problem.reason === "permission");
+  saveLocalFilesBtn.hidden = !needPermission;
+  saveLocalFilesNote.textContent = problems.map((problem) => problem.message).join("  ");
+  return problems.length === 0;
+}
+
+saveLocalFilesBtn.addEventListener("click", async () => {
+  await allowLocalFiles();
+  await saveDialogLocalFilesReady();
+});
+
+saveOkBtn.addEventListener("click", async () => {
   const startMs = (saveStartSecondsInput.valueAsNumber || 0) * 1000;
   const endMs = (saveEndSecondsInput.valueAsNumber || 0) * 1000;
+  const width = saveWidthInput.valueAsNumber;
+  const height = saveHeightInput.valueAsNumber;
+  if (saveSizeProblem(width, height)) return;
+  // Quick:  no prompts, just IndexedDB.  The click still counts for the file picker afterward.
+  if (!(await saveDialogLocalFilesReady())) return;
   saveDialog.close();
-  startRecording(startMs, endMs);
+  startRecording(startMs, endMs, width, height);
 });
 
 startRecordingButton.addEventListener("click", () => {
   populateSaveChapterSelect();
+  // Always start from the video's own size, not whatever was used last time.
+  resetSaveSize();
   setSaveRange(0, toShow.duration);
+  saveLocalFilesRow.hidden = true;
   saveDialog.showModal();
+  void saveDialogLocalFilesReady();
 });
 
 /**
@@ -1596,10 +1971,7 @@ const veRootParent: ShowableParent = {
     clearTimeout(_durationAudioTimer);
     _durationAudioTimer = setTimeout(() => void initAudio(), 300);
     // Redraw the timeline so block positions/sizes update during drags.
-    if (_veRootSelectable) {
-      timelineDisplay.setChapterDuration(_veRootSelectable.duration);
-      timelineDisplay.setBlocks(_buildTimelineBlocks(_veRootSelectable));
-    }
+    refreshTimeline();
     scheduleChapterRefresh();
   },
 };
@@ -1621,10 +1993,7 @@ const toShowParent: ShowableParent = {
     markDirty();
     clearTimeout(_durationAudioTimer);
     _durationAudioTimer = setTimeout(() => void initAudio(), 300);
-    if (_veRootSelectable) {
-      timelineDisplay.setChapterDuration(_veRootSelectable.duration);
-      timelineDisplay.setBlocks(_buildTimelineBlocks(_veRootSelectable));
-    }
+    refreshTimeline();
     scheduleChapterRefresh();
   },
 };
@@ -1842,7 +2211,7 @@ transcriptView = new TranscriptView({
     _durationAudioTimer = setTimeout(() => void initAudio(), 300);
     // Show the owner's Sound Clips, with the remaining piece highlighted.
     selectInChapter(owner);
-    if (_veRootSelectable) _updateTimeline(_veRootSelectable);
+    refreshTimeline();
   },
 });
 getById("timelineCanvas", HTMLCanvasElement).after(transcriptView.element);
@@ -2190,8 +2559,19 @@ function _buildTimelineBlocks(selectable: Showable): TimelineBlock[] {
   return blocks;
 }
 
+/**
+ * Redraw the timeline after an edit.  It always shows the chapter, the root picked in the
+ * `<select>`.  Not {@link _veRootSelectable}:  that's whatever the component editor shows, which
+ * can be a child of the chapter.  Passing both, one after the other, looked like a new chapter
+ * every time, and reset the timeline's zoom and pan.
+ */
+function refreshTimeline(): void {
+  const chapter = currentRoot();
+  if (chapter) _updateTimeline(chapter);
+}
+
 function _updateTimeline(selectable: Showable): void {
-  timelineDisplay.setChapterDuration(selectable.duration);
+  timelineDisplay.setChapter(selectable, selectable.duration);
   timelineDisplay.setBlocks(_buildTimelineBlocks(selectable));
   timelineDisplay.setSelectedId(selectedSlideChild ?? undefined);
 }
@@ -2679,10 +3059,6 @@ function buildDiffText(): string {
       : JSON.stringify(s.value);
   }
 
-  /**
-   * Generate TypeScript constructor + .set() lines for a removable component,
-   * omitting any property whose value matches the class default.
-   */
   /** Variable names already used in this diff, so generated code never declares one twice. */
   const usedVarNames = new Set<string>();
   function uniqueVarName(base: string): string {
@@ -2694,14 +3070,15 @@ function buildDiffText(): string {
 
   /**
    * TypeScript that recreates `comp`, a component added in the Visual Editor, and adds it to
-   * `parentExpr`.  Covers everything the save file stores for such a component:  schedules
+   * `parentExpr`'s replaceable children, so the Visual Editor can still edit or delete it.
+   * Covers everything the save file stores for such a component:  schedules
    * and scalars that differ from the class's defaults, the user's name for it, its own
    * replaceable children (recursively), its duration, and its sound clips.
    */
   function generateComponentCode(
     comp: Showable,
     indent: string,
-    parentExpr = "this",
+    parentExpr: string,
   ): string[] {
     const out: string[] = [];
     const rk = comp.registryKey ?? "unknown";
@@ -2802,13 +3179,45 @@ function buildDiffText(): string {
       );
     }
 
-    out.push(`${indent}${parentExpr}.addFixed({ child: ${varName} });`);
+    out.push(
+      `${indent}${parentExpr}.replaceableComponents!.push(${varName});`,
+    );
 
     return out;
   }
 
-  function diffNode(
-    defaultEntry: SerializedFixedChild,
+  /** A component's name in the diff:  the user's name for it, or its own. */
+  function displayName(comp: Showable): string {
+    return comp.userEditableDescription ?? comp.description;
+  }
+
+  /** `names`, with " #1", " #2"… added to any name used more than once. */
+  function numberedNames(names: readonly string[]): string[] {
+    const total = new Map<string, number>();
+    for (const name of names) total.set(name, (total.get(name) ?? 0) + 1);
+    const seen = new Map<string, number>();
+    return names.map((name) => {
+      if (total.get(name)! < 2) return name;
+      const n = (seen.get(name) ?? 0) + 1;
+      seen.set(name, n);
+      return `${name} #${n}`;
+    });
+  }
+
+  /**
+   * The differences in one component's own properties.  The same for a fixed child, whose
+   * default is its TypeScript, and for a replaceable child, whose default is its counterpart
+   * in the TypeScript's list.
+   */
+  function diffProperties(
+    defaultEntry: Pick<
+      SerializedFixedChild,
+      | "schedules"
+      | "scalars"
+      | "duration"
+      | "userEditableDescription"
+      | "soundClips"
+    >,
     sel: Showable,
     path: string[],
   ): void {
@@ -2882,15 +3291,91 @@ function buildDiffText(): string {
       lines.push(`TypeScript: ${JSON.stringify(defClips)}`);
       lines.push(`Current:    ${JSON.stringify(curClips)}`);
     }
+  }
+
+  /**
+   * The differences between a component's replaceable children and the TypeScript's.
+   *
+   * Children pair up by kind and name, in order, the way fixed children pair up by description.
+   * Then any left over pair up by kind alone, so a child renamed in the Visual Editor is one
+   * child with a new name, not one deleted and one added.
+   *
+   * A pair prints its property changes, the same way a fixed child does.  A child with no
+   * counterpart in the TypeScript prints as the TypeScript that makes it.  A deleted child, or
+   * an order that deleting and adding wouldn't give, gets one line.  No changes, no lines.
+   */
+  function diffReplaceable(
+    defaults: readonly SerializedChild[],
+    sel: Showable,
+    path: string[],
+  ): void {
+    // Only components with a registry key are saved, so only they can differ.
+    const live = (sel.replaceableComponents?.get() ?? []).filter(
+      (comp) => comp.registryKey !== undefined,
+    );
+    const key = (registryKey: string, name: string | undefined) =>
+      `${registryKey}\0${name ?? ""}`;
+    const liveFor = counterparts(
+      defaults.map((d) => ({
+        description: key(d.registryKey, d.userEditableDescription),
+      })),
+      live.map((comp) => ({
+        description: key(comp.registryKey!, comp.userEditableDescription),
+        comp,
+      })),
+    ).map((match) => match?.comp);
+    for (const [index, d] of defaults.entries()) {
+      liveFor[index] ??= live.find(
+        (comp) => comp.registryKey === d.registryKey && !liveFor.includes(comp),
+      );
+    }
+    const added = live.filter((comp) => !liveFor.includes(comp));
+    const names = new Map(
+      numberedNames(live.map(displayName)).map((name, index) => [
+        live[index],
+        name,
+      ]),
+    );
 
-    const currentComponents = sel.replaceableComponents?.get() ?? [];
-    if (currentComponents.length > 0) {
+    const expectedOrder = [
+      ...liveFor.filter((comp) => comp !== undefined),
+      ...added,
+    ];
+    if (expectedOrder.some((comp, index) => comp !== live[index])) {
       printPathIfNeeded(path);
-      for (const comp of currentComponents) {
-        lines.push(...generateComponentCode(comp, "  "));
+      lines.push(
+        `  [new order:  ${live.map((comp) => names.get(comp)).join(", ")}]`,
+      );
+    }
+
+    for (const [index, d] of defaults.entries()) {
+      const comp = liveFor[index];
+      if (comp) {
+        const childPath = [...path, names.get(comp)!];
+        diffProperties(d, comp, childPath);
+        diffReplaceable(d.components ?? [], comp, childPath);
+      } else {
+        printPathIfNeeded([...path, d.userEditableDescription ?? d.registryKey]);
+        lines.push(`  [deleted]`);
       }
     }
 
+    const parentExpr = toVarName(path.at(-1) ?? "") || "parent";
+    for (const comp of added) {
+      printPathIfNeeded([...path, names.get(comp)!]);
+      lines.push(`  [added]`);
+      lines.push(...generateComponentCode(comp, "  ", parentExpr));
+    }
+  }
+
+  function diffNode(
+    defaultEntry: SerializedFixedChild,
+    sel: Showable,
+    path: string[],
+  ): void {
+    diffProperties(defaultEntry, sel, path);
+    diffReplaceable(defaultEntry.components ?? [], sel, path);
+
     const liveFixed = getFixedComponents(sel);
     const defaultFixed = defaultEntry.fixedComponents ?? [];
     const liveFor = counterparts(defaultFixed, liveFixed);
@@ -2919,10 +3404,12 @@ function buildDiffText(): string {
     diffNode(tsDefaultsTree, toShow, [toShow.description]);
   }
 
-  if (lines.length === 1) lines.push("(no differences found)");
+  if (lines.length === 0) lines.push("(no differences found)");
 
   return lines.join("\n");
 }
+/** The diff file's text, from the console, with or without syncing the file. */
+philDebug.diffText = () => console.log(buildDiffText());
 
 // MARK: Load-source helpers
 
@@ -3740,9 +4227,19 @@ function buildScheduleSection(
     return playPositionSeconds.valueAsNumber * 1000;
   }
 
-  /** Time relative to the start of the selected scene — what keyframe.time values use. */
+  /**
+   * Where the component that owns this schedule starts, measured from the start of the Visual
+   * Editor's root.  0 for anything in a parallel container at the top, which is why measuring
+   * from the root used to look right.  A clip in an In Series starts later.
+   */
+  function ownerStartMs() {
+    const root = currentRoot();
+    return root ? (startWithin(root, selectable) ?? 0) : 0;
+  }
+
+  /** Time relative to the start of the component that owns this schedule — what keyframe.time values use. */
   function localTimeMs() {
-    return currentTimeMs() - rootStartMs;
+    return currentTimeMs() - rootStartMs - ownerStartMs();
   }
 
   function addKeyframeAtCurrentTime() {
@@ -4553,7 +5050,7 @@ function buildScheduleSection(
       goToBtn.addEventListener("click", () => {
         const globalMs = Math.max(
           sectionStartTime,
-          Math.min(sectionEndTime, kf.time + rootStartMs),
+          Math.min(sectionEndTime, kf.time + rootStartMs + ownerStartMs()),
         );
         stopAudio();
         loadPlayPositionSeconds(globalMs);
@@ -4694,10 +5191,13 @@ function updateComponentEditor(selectable: Showable) {
 
       if (replaceable && replaceables) {
         const moveChild = (fromIdx: number, toIdx: number) => {
-          const arr = replaceables.get();
-          const [item] = arr.splice(fromIdx, 1);
-          arr.splice(toIdx, 0, item);
-          replaceables.replace(arr);
+          // In a series, the playhead follows the picture it was showing.
+          keepingScene(selectable, () => {
+            const arr = replaceables.get();
+            const [item] = arr.splice(fromIdx, 1);
+            arr.splice(toIdx, 0, item);
+            replaceables.replace(arr);
+          });
           activeRootComponentEditor?.resetAll();
           updateComponentEditor(selectable);
         };
@@ -4735,11 +5235,20 @@ function updateComponentEditor(selectable: Showable) {
         const deleteBtn = document.createElement("button");
         deleteBtn.type = "button";
         deleteBtn.textContent = "🗑";
+        deleteBtn.title = "Delete component";
         deleteBtn.addEventListener("click", () => {
+          // In a series, everything after this child moves earlier, and the playhead goes with it.
+          const root = currentRoot();
+          const childStart = root ? startWithin(root, child) : undefined;
+          const childDuration = child.duration;
+          const chainEndMs = seriesChainEndMs(selectable);
           const arr = replaceables.get();
           const i = arr.indexOf(child);
           if (i !== -1) arr.splice(i, 1);
           replaceables.replace(arr);
+          if (childStart !== undefined) {
+            playheadAfterRemoving(childStart, childStart + childDuration, chainEndMs);
+          }
           if (selectedSlideChild === child) {
             selectedSlideChild = null;
             updateScheduleEditor(selectable);
@@ -4880,6 +5389,16 @@ function updateComponentEditor(selectable: Showable) {
     const entry = key === undefined ? undefined : componentRegistry.get(key);
     if (!entry) return;
     const newChild = entry.create();
+    if (newChild instanceof VideoClipComponent) {
+      // The class default is 16 × 9, and saved files rely on defaults never changing.
+      // So fill the canvas here, as a value of its own, whatever size the canvas is.
+      newChild.destinationRectSchedule.set({
+        x: 0,
+        y: 0,
+        width: canvasRecorder.width,
+        height: canvasRecorder.height,
+      });
+    }
     addTarget.replaceableComponents!.push(newChild);
     afterStructureEdit(newChild);
   });
@@ -4960,7 +5479,7 @@ function buildSoundClipSection(selectable: Showable): HTMLElement {
     clearTimeout(_durationAudioTimer);
     _durationAudioTimer = setTimeout(() => void initAudio(), 300);
     updateScheduleEditor(selectable);
-    if (_veRootSelectable) _updateTimeline(_veRootSelectable);
+    refreshTimeline();
   }
 
   /** Every place a sound can live in this video, and when each starts. */
@@ -5072,7 +5591,7 @@ function buildSoundClipSection(selectable: Showable): HTMLElement {
 
     const delBtn = document.createElement("button");
     delBtn.type = "button";
-    delBtn.textContent = "✕";
+    delBtn.textContent = "🗑";
     delBtn.title = "Delete clip";
     delBtn.addEventListener("click", () => {
       clips.splice(i, 1);
@@ -5315,7 +5834,7 @@ function buildSoundClipSection(selectable: Showable): HTMLElement {
         // The new owner is in another chapter.  Stay here; the clip is gone from this list.
         updateScheduleEditor(selectable);
       }
-      if (_veRootSelectable) _updateTimeline(_veRootSelectable);
+      refreshTimeline();
     });
     ownerLabel.append(ownerSelect);
     const playsAt = document.createElement("span");
@@ -5370,6 +5889,9 @@ function buildNameSection(selectable: Showable): HTMLElement {
     resetBtn.disabled = selectable.userEditableDescription === undefined;
     const root = currentSaveTarget();
     if (root) updateComponentEditor(root);
+    // The timeline's blocks and the Edit menu show the name, too.
+    refreshTimeline();
+    scheduleChapterRefresh();
   }
 
   input.addEventListener("input", () => syncName(input.value));
@@ -5450,6 +5972,13 @@ function updateScheduleEditor(selectable: Showable) {
 
   const videoPanel = videoClip
     ? buildVideoClipPanel(videoClip, {
+        setVideoSize: setVideoSizeFromGui,
+        urlChanged() {
+          activeRootComponentEditor?.update(videoClip, videoClip.urlScalar);
+          markDirty();
+          // Rebuild so the URL field shows the new value.
+          updateScheduleEditor(videoClip);
+        },
         scalarsChanged() {
           activeRootComponentEditor?.update(
             videoClip,
@@ -5496,6 +6025,12 @@ function updateScheduleEditor(selectable: Showable) {
   if (selectable instanceof SingleImageComponent) {
     const image = selectable;
     const imagePanel = buildStaticImagePanel(image, {
+      urlChanged() {
+        activeRootComponentEditor?.update(image, image.urlSchedule);
+        markDirty();
+        // Rebuild so the URL field shows the new value.
+        updateScheduleEditor(image);
+      },
       rectKeyframeChanged(kf) {
         // The same sync a drag on the canvas uses, so ✎ edit mode survives.
         markerSyncCallbacks.get(kf)?.(kf.value);
@@ -5616,6 +6151,74 @@ function splitTarget(clip: VideoClipComponent): InSeriesComponent | string {
   return parent;
 }
 
+// MARK: Keep the scene
+
+/** Move the playhead to this time, measured from the start of the Visual Editor's root. */
+function seekInRoot(ms: number): void {
+  stopAudio();
+  loadPlayPositionSeconds(rootStartMs + ms);
+  loadPlayPositionRange();
+  // An edit moved the playhead.  Keep it on the timeline's screen if it was there.
+  timelineDisplay.movePlayMs(ms);
+}
+
+/**
+ * Before an edit removes time from `series`:  where its chain of series ends, measured from the
+ * start of the root.  Removing time moves everything up to there earlier, and nothing after it.
+ * Undefined if `series` isn't an In Series in the current root, so nothing moves.
+ */
+function seriesChainEndMs(series: Showable): number | undefined {
+  const root = currentRoot();
+  if (!root || !(series instanceof InSeriesComponent)) return undefined;
+  let top: Showable = series;
+  while (top !== root && top.parent instanceof InSeriesComponent) {
+    top = top.parent;
+  }
+  const start = startWithin(root, top);
+  return start === undefined ? undefined : start + top.duration;
+}
+
+/**
+ * A series just lost the time from `fromMs` to `toMs` (measured from the start of the root), and
+ * everything after it moved earlier to fill the gap.  Move the playhead with it, so the preview
+ * keeps showing the same picture.  A playhead inside what's gone goes to where the gap was.
+ * @param chainEndMs {@link seriesChainEndMs}, from before the edit.
+ */
+function playheadAfterRemoving(
+  fromMs: number,
+  toMs: number,
+  chainEndMs: number | undefined,
+): void {
+  if (chainEndMs === undefined) return;
+  const at = playheadInRootMs();
+  if (at < fromMs || at >= chainEndMs) return;
+  seekInRoot(at >= toMs ? at - (toMs - fromMs) : fromMs);
+}
+
+/**
+ * Run `edit`, which reorders the children of `series`, then put the playhead on the same moment
+ * of the same child, wherever that child is now.
+ */
+function keepingScene(series: Showable, edit: () => void): void {
+  const root = currentRoot();
+  const seriesStart =
+    root && series instanceof InSeriesComponent
+      ? startWithin(root, series)
+      : undefined;
+  let anchor: { child: Showable; offsetMs: number } | undefined;
+  if (seriesStart !== undefined) {
+    const local = playheadInRootMs() - seriesStart;
+    const found = series.children?.find(
+      ({ start, child }) => local >= start && local < start + child.duration,
+    );
+    if (found) anchor = { child: found.child, offsetMs: local - found.start };
+  }
+  edit();
+  if (!root || !anchor) return;
+  const newStart = startWithin(root, anchor.child);
+  if (newStart !== undefined) seekInRoot(newStart + anchor.offsetMs);
+}
+
 /** How long a sound plays, for splitting:  a clip whose file isn't decoded yet is taken to play forever. */
 function soundLengthForSplit(sound: SoundClip): number {
   return soundClipLengthMs(sound) ?? Infinity;
@@ -5651,8 +6254,16 @@ async function splitAtPlayhead(clip: VideoClipComponent): Promise<void> {
         : [second];
   const siblings = parent.replaceableComponents!.get();
   siblings.splice(siblings.indexOf(clip), 1, ...kept);
+  const chainEndMs = seriesChainEndMs(parent);
   // Saves, rebuilds the audio, and redraws the timeline and the chapter list.
   parent.replaceableComponents!.replace(siblings);
+  // Keep showing the same picture:  a piece thrown away takes its time with it.
+  const splitMs = clipStart + first.duration;
+  if (choice.keep === "second") {
+    playheadAfterRemoving(clipStart, splitMs, chainEndMs);
+  } else if (choice.keep === "first") {
+    playheadAfterRemoving(splitMs, splitMs + second.duration, chainEndMs);
+  }
   selectedSoundClip = undefined;
   activeRootComponentEditor?.resetAll();
   if (root !== clip) {
@@ -5739,6 +6350,21 @@ function buildMultiTextFrame(text: MultiTextComponent): HTMLElement {
       textFrameCanvasStates.set(text, newState);
       applyCanvasState();
     },
+    editText() {
+      void openMultiTextDialog(text, {
+        saveNow: _flushDirtyToDb,
+        changed: markDirty,
+        copyComponent: (component) =>
+          buildComponents(serializeComponents([component]))[0],
+        closed() {
+          // The dialog covered the component list and this panel, so neither was kept up to date.
+          activeRootComponentEditor?.resetAll();
+          const root = currentSaveTarget();
+          if (root) updateComponentEditor(root);
+          updateScheduleEditor(text);
+        },
+      });
+    },
   });
   // Adding a keyframe to Position, say, means there's no longer one frame.
   scheduleEditorRefreshers.push(applyCanvasState, panel.refresh);
@@ -7083,6 +7709,8 @@ function refreshEditorsAfterLoad(): void {
   activeRootComponentEditor?.resetAll();
   updateComponentEditor(current);
   updateScheduleEditor(current);
+  // The loaded state may use local files that need 🔓.
+  checkVideosLocalFiles();
 }
 
 /**