Choose size, rate and what follows when recording the editor

The editor recording had fixed settings: the canvas size at 60 fps,
always converted and imported. Recording in 4K needs a choice, and the
server shrank every video to 1080p anyway. Start recording... now opens
a dialog, and a recording always goes to the server as it is.

- The dialog holds name, resolution (Screen, 1080p, 1440p, 4K), fps
  (60 or 30), mouse pointer, sound, Convert and Import after
  conversion. Import is greyed out while Convert is off. The browser
  keeps the last choice, not the name.
- A larger resolution makes the editor draw finer while it records,
  so 4K is sharp, not stretched. It is never below the screen's own
  resolution and goes back after Stop.
- Stop always uploads. Without Convert the file only stays on the
  server. Without Import it is converted but no asset is added. Both
  are found in the video picker.
- The server keeps the original next to each MP4 for every upload, so
  Download in the video tab and the picker gives the original. Videos
  from before have none, they still download their MP4.
- A file left unconverted shows in the picker as not converted, with
  a Convert button. POST videos/{file}/convert queues it, and upload
  takes convert=0.
- The worker now caps a video at 3840x2160 instead of 1920x1080. Videos
  converted before stay as they are.

Tests:
- PHP videos.test.php: 81 checks green, with the original, convert=0,
  a later Convert and the 4K cap.
- Unit recording: 5 new, green. Red without the rule that a recording
  is never below the screen's resolution.
- e2e 67e-ii: the video tab downloads the .source.mkv, a Matroska
  file. 67f: 1440p from a 1280x800 window gives 2304x1440 at 30 fps
  without sound, kept and not imported, then converted in the picker.
  Both red with the MP4 download and without the finer drawing.
- The README names 2045 e2e checks.
- Gate on melektaus-atx: 304 files, 4699 tests green.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/editor/App.ts

@@ -1,13 +1,12 @@
 import type { Application } from 'pixi.js';
 import type { AuthStore, SignedIn } from '../core/store/AuthStore';
 import { HttpAuthStore } from '../core/store/HttpAuthStore';
-import { HttpFileStore } from '../core/store/HttpFileStore';
+import { HttpFileStore, HttpVideoStore } from '../core/store/HttpFileStore';
 import { HttpProjectStore } from '../core/store/HttpProjectStore';
 import { HttpReleaseStore } from '../core/store/HttpReleaseStore';
 import { HttpSnapshotStore } from '../core/store/HttpSnapshotStore';
 import { HttpUsersStore } from '../core/store/HttpUsersStore';
 import type { StoredTexture, UploadedTexture } from '../core/store/TextureStore';
-import type { StoredVideo, UploadedVideo } from '../core/store/VideoStore';
 import { loadPhysics } from '../runtime/physics/engine';
 import { projectPictureFactory } from '../viewport/generatedPictures';
 import { preloadProjectFiles, setUpProjectFiles } from '../viewport/projectFiles';
@@ -93,7 +92,7 @@ export async function startEditor(app: Application, root: VStack): Promise<void>
       new HttpFileStore<UploadedTexture, StoredTexture>(API_ENDPOINT, 'textures'),
       new HttpFileStore(API_ENDPOINT, 'fonts'),
       new HttpFileStore(API_ENDPOINT, 'sounds'),
-      new HttpFileStore<UploadedVideo, StoredVideo>(API_ENDPOINT, 'videos'),
+      new HttpVideoStore(API_ENDPOINT),
       new HttpSnapshotStore(API_ENDPOINT),
       new HttpReleaseStore(API_ENDPOINT),
       {

src/editor/Editor.ts

@@ -79,6 +79,8 @@ import { Toolbar } from './panels/Toolbar';
 import { type PlayHost, PlaySession, type WorldSnapshot } from './PlaySession';
 import { type RecordingUpload, RecordingUploads } from './recordingUploads';
 import { EditorRecorder } from './EditorRecorder';
+import { EditorRecordingDialog } from './EditorRecordingDialog';
+import { editorRecordingSettings, keepEditorRecordingSettings } from './editorRecordingSettings';
 import type { MadeRecording } from '../viewport/RecordingTake';
 import { ProjectSession } from './ProjectSession';
 import { ParticlesEditor } from './particles/ParticlesEditor';
@@ -351,6 +353,7 @@ export class Editor implements PlayHost {
   private readonly toolbar: Toolbar;
   private readonly passwordDialog = dialogSlot<PasswordDialog>();
   private readonly generalDialog = dialogSlot<GeneralSettingsDialog>();
+  private readonly recordingDialog = dialogSlot<EditorRecordingDialog>();
   /** Drawn-frame count at the last measurement, not a counter of its own. */
   private fpsFrames = 0;
   private fpsElapsed = 0;
@@ -391,7 +394,7 @@ export class Editor implements PlayHost {
     this.particlesEditor = new ParticlesEditor(state);
     this.streamKeeper = new StreamKeeper(state, sounds);
     this.soundEditor = new SoundEditor(state, this.streamKeeper);
-    this.videoEditor = new VideoEditor(state);
+    this.videoEditor = new VideoEditor(state, videos);
     this.soundFxEditor = new SoundFxEditor(state);
     this.instrumentEditor = new InstrumentEditor(state);
     this.patternEditor = new PatternEditor(state, sounds);
@@ -421,7 +424,7 @@ export class Editor implements PlayHost {
         state.setNotice(line);
         console.warn('[recording]', line);
       },
-      saved: (recording) => this.recordings.add(recording),
+      saved: (recording, options) => this.recordings.add(recording, options),
       showBadge: (on) => this.toolbar.showRecording(on),
       badgeRoom: () => this.toolbar.recordingRoom(),
     });
@@ -815,7 +818,7 @@ export class Editor implements PlayHost {
       { separator: true },
       recorder.isRecording
         ? { label: 'Stop recording', onSelect: () => recorder.stop() }
-        : { label: 'Start recording', onSelect: () => recorder.start() },
+        : { label: 'Start recording…', onSelect: () => this.openEditorRecording() },
       { separator: true },
       { label: 'General settings…', onSelect: () => this.openGeneralSettings() },
       ...(this.usersPane ? [{ label: 'User management', onSelect: open }] : []),
@@ -833,6 +836,21 @@ export class Editor implements PlayHost {
     return this.generalDialog.current();
   }
 
+  /** "Start recording…": how the editor is recorded, starting on the last choice made in this browser. */
+  openEditorRecording(): EditorRecordingDialog {
+    return this.recordingDialog.open(
+      new EditorRecordingDialog(editorRecordingSettings(), (settings) => {
+        keepEditorRecordingSettings(settings);
+        this.editorRecorder.start(settings);
+      }),
+    );
+  }
+
+  /** The open "Start recording" dialog, for the check scripts. */
+  editorRecordingDialog(): EditorRecordingDialog | null {
+    return this.recordingDialog.current();
+  }
+
   /**
    * The account menu under its button (#182). The name stands in it as an entry that cannot be
    * picked: it says who is signed in without costing the crowded toolbar another label.
@@ -1350,6 +1368,7 @@ export class Editor implements PlayHost {
     // Closed rather than just thrown away with the overlay below, so the slot lets go of it too.
     this.passwordDialog.current()?.close();
     this.generalDialog.current()?.close();
+    this.recordingDialog.current()?.close();
     // The tooltip is not the editor's to destroy: it leaves the overlay before that is emptied.
     tooltips.dismiss();
     // A menu or a picker left open belongs to widgets that are about to be destroyed.

src/editor/EditorRecorder.ts

@@ -1,17 +1,21 @@
 import { UPDATE_PRIORITY } from 'pixi.js';
 import { cursorShape, type CursorShape } from '../core/recording/cursors';
-import {
-  EDITOR_RECORDING_FPS,
-  editorRecordingSize,
-  elapsedText,
-  fitPicture,
-  recordingName,
-} from '../core/recording/recording';
+import { editorRecordingPlan, type EditorRecordingSettings } from '../core/recording/editorRecording';
+import { elapsedText, fitPicture, recordingName } from '../core/recording/recording';
 import { renderCount, requestRender, Theme, toHex, ui } from '../ui';
-import { type FrameSource, Take, type TakeHost, type TakeInfo } from '../viewport/RecordingTake';
+import { type FrameSource, type MadeRecording, Take, type TakeInfo } from '../viewport/RecordingTake';
+
+/** What becomes of a recording on the server, as "Start recording…" asked. */
+export interface RecordingUploadOptions {
+  convert: boolean;
+  adopt: boolean;
+}
 
 /** What the editor recorder needs of the editor. */
-export interface EditorRecorderHost extends TakeHost {
+export interface EditorRecorderHost {
+  /** A line for the editor's notice. */
+  log(line: string): void;
+  saved(recording: MadeRecording, options: RecordingUploadOptions): void;
   /** Makes room in the top bar for the badge while recording, or takes it away. */
   showBadge(on: boolean): void;
   /** Where the badge goes, in CSS pixels. */
@@ -19,12 +23,12 @@ export interface EditorRecorderHost extends TakeHost {
 }
 
 /**
- * Records the whole editor (main menu → Start recording): the canvas as it is on screen, at its size
- * in device pixels and 60 fps, with the mouse pointer drawn in, since the system draws that over the
- * canvas. What the editor draws is copied from the canvas right after each render, so recording costs
- * no second drawing. The badge beside the menu is an HTML element over the canvas, the one exception
- * to the single canvas: it is never in the recording, and the canvas is drawn once per frame, which a
- * `desynchronized` canvas needs to show no half-drawn picture.
+ * Records the whole editor (main menu → Start recording…): the canvas as it is on screen, or drawn
+ * sharper to fill a larger frame (`editorRecordingPlan`), with the mouse pointer drawn in, since
+ * the system draws that over the canvas. What the editor draws is copied from the canvas right after
+ * each render, so recording costs no second drawing. The badge beside the menu is an HTML element
+ * over the canvas, the one exception to the single canvas: it is never in the recording, and the
+ * canvas is drawn once per frame, which a `desynchronized` canvas needs to show no half-drawn picture.
  */
 export class EditorRecorder {
   private take: Take | null = null;
@@ -35,6 +39,8 @@ export class EditorRecorder {
   private startedAt = 0;
   private shownText = '';
   private readonly badge = new RecordingBadge();
+  /** The resolution the editor was drawn at before a recording raised it; null while it is not raised. */
+  private screenResolution: number | null = null;
 
   constructor(private readonly host: EditorRecorderHost) {}
 
@@ -42,13 +48,32 @@ export class EditorRecorder {
     return this.take !== null;
   }
 
-  start(): void {
+  start(settings: EditorRecordingSettings): void {
     if (this.take) return;
     const app = ui().app;
-    const source = new CanvasSource(app.canvas);
-    const take = new Take(recordingName('', new Date()), EDITOR_RECORDING_FPS, source, this.host, () => {
-      if (this.take === take) this.end();
-    });
+    const screen = { w: app.screen.width, h: app.screen.height };
+    const plan = editorRecordingPlan(screen, app.renderer.resolution, settings.resolution);
+    if (plan.resolution !== app.renderer.resolution) {
+      this.screenResolution = app.renderer.resolution;
+      app.renderer.resize(screen.w, screen.h, plan.resolution);
+    }
+    const source = new CanvasSource(app.canvas, plan.size, settings.fps, settings.pointer);
+    const upload = { convert: settings.convert, adopt: settings.convert && settings.adopt };
+    const host = {
+      log: (line: string) => this.host.log(line),
+      saved: (recording: MadeRecording) => this.host.saved(recording, upload),
+    };
+    const name = recordingName(settings.name, new Date());
+    const take = new Take(
+      name,
+      settings.fps,
+      source,
+      host,
+      () => {
+        if (this.take === take) this.end();
+      },
+      { sound: settings.sound },
+    );
     this.take = take;
     this.source = source;
     this.takes.push(take);
@@ -72,7 +97,12 @@ export class EditorRecorder {
     this.take = null;
     this.source?.detach();
     this.source = null;
-    ui().app.ticker.remove(this.tick, this);
+    const app = ui().app;
+    app.ticker.remove(this.tick, this);
+    if (this.screenResolution !== null) {
+      app.renderer.resize(Math.round(app.screen.width), Math.round(app.screen.height), this.screenResolution);
+      this.screenResolution = null;
+    }
     this.badge.hide();
     this.host.showBadge(false);
     requestRender();
@@ -102,11 +132,14 @@ export class EditorRecorder {
     recording: boolean;
     takes: TakeInfo[];
     badge: { x: number; y: number; w: number; h: number } | null;
+    /** What the editor is drawn at now, raised while a larger frame is recorded. */
+    resolution: number;
   } {
     return {
       recording: this.isRecording,
       takes: this.takes.map((take) => take.info()),
       badge: this.isRecording ? this.host.badgeRoom() : null,
+      resolution: ui().app.renderer.resolution,
     };
   }
 }
@@ -178,7 +211,6 @@ class RecordingBadge {
  * picture with the mouse pointer drawn over it.
  */
 class CanvasSource implements FrameSource {
-  private readonly size: { w: number; h: number };
   private readonly picture: OffscreenCanvas;
   private readonly picturePen: OffscreenCanvasRenderingContext2D;
   private readonly frame: OffscreenCanvas;
@@ -188,13 +220,17 @@ class CanvasSource implements FrameSource {
   private copied = false;
   private ready: VideoFrame[] = [];
 
-  constructor(private readonly canvas: HTMLCanvasElement) {
-    this.size = editorRecordingSize({ w: canvas.width, h: canvas.height });
+  constructor(
+    private readonly canvas: HTMLCanvasElement,
+    private readonly size: { w: number; h: number },
+    private readonly fps: number,
+    private readonly showsPointer: boolean,
+  ) {
     this.picture = new OffscreenCanvas(this.size.w, this.size.h);
     this.picturePen = this.picture.getContext('2d', { alpha: false })!;
     this.frame = new OffscreenCanvas(this.size.w, this.size.h);
     this.framePen = this.frame.getContext('2d', { alpha: false })!;
-    this.pointer.attach(canvas);
+    if (showsPointer) this.pointer.attach(canvas);
   }
 
   open(): { w: number; h: number } {
@@ -230,7 +266,7 @@ class CanvasSource implements FrameSource {
     this.ready.push(
       new VideoFrame(this.frame, {
         timestamp: Math.round(ms * 1000),
-        duration: Math.round(1e6 / EDITOR_RECORDING_FPS),
+        duration: Math.round(1e6 / this.fps),
       }),
     );
     return true;
@@ -239,7 +275,7 @@ class CanvasSource implements FrameSource {
   private drawPointer(): void {
     const { canvas, pointer } = this;
     const shape = cursorShape(canvas.style.cursor);
-    if (!pointer.inside || !shape) return;
+    if (!this.showsPointer || !pointer.inside || !shape) return;
     const rect = canvas.getBoundingClientRect();
     if (rect.width === 0 || rect.height === 0) return;
     const at = fitPicture({ w: canvas.width, h: canvas.height }, this.size);

src/editor/EditorRecordingDialog.ts

@@ -0,0 +1,145 @@
+import {
+  EDITOR_RECORDING_RESOLUTIONS,
+  editorRecordingPlan,
+  type EditorRecordingResolution,
+  type EditorRecordingSettings,
+} from '../core/recording/editorRecording';
+import { type Button, Checkbox, Dropdown, Label, Menu, TextField, ui } from '../ui';
+import { FormDialog } from './FormDialog';
+
+const FIELD_WIDTH = 200;
+const FPS_CHOICES = [60, 30] as const;
+
+type Switch = 'pointer' | 'sound' | 'convert' | 'adopt';
+
+/**
+ * "Start recording…" in the main menu: how the whole editor is recorded, and what becomes of the
+ * file. It always goes up to the server; Convert makes the MP4 a project can use of it, and Import
+ * adds that to the project once it is ready.
+ */
+export class EditorRecordingDialog extends FormDialog {
+  private settings: EditorRecordingSettings;
+  private readonly nameField: TextField;
+  private readonly resolutionPicker: Dropdown;
+  private readonly fpsPicker: Dropdown;
+  private readonly size: Label;
+  private readonly boxes: Record<Switch, Checkbox>;
+  /** The confirming button, so a check can click it. */
+  readonly startButton: Button;
+
+  constructor(settings: EditorRecordingSettings, onStart: (settings: EditorRecordingSettings) => void) {
+    super(360, 'Start recording');
+    this.settings = { ...settings };
+
+    this.nameField = new TextField(settings.name, {
+      width: FIELD_WIDTH,
+      placeholder: 'Recording <date> <time>',
+      onSubmit: () => this.start(onStart),
+    });
+    this.content.add(this.formRow(this.fieldLabel('Name'), this.nameField));
+
+    this.resolutionPicker = new Dropdown('', {
+      width: FIELD_WIDTH,
+      onClick: () => this.pickResolution(),
+    });
+    this.content.add(this.formRow(this.fieldLabel('Resolution'), this.resolutionPicker));
+    this.fpsPicker = new Dropdown('', { width: FIELD_WIDTH, onClick: () => this.pickFps() });
+    this.content.add(this.formRow(this.fieldLabel('FPS'), this.fpsPicker));
+    this.size = new Label('', { style: 'muted' });
+    this.content.add(this.size);
+
+    const box = (key: Switch, text: string): Checkbox => {
+      const checkbox = new Checkbox(this.settings[key]);
+      checkbox.onChange = (on) => {
+        this.settings[key] = on;
+        this.sync();
+      };
+      this.content.add(this.formRow(checkbox, new Label(text)));
+      return checkbox;
+    };
+    this.boxes = {
+      pointer: box('pointer', 'Mouse pointer'),
+      sound: box('sound', 'Sound'),
+      convert: box('convert', 'Convert'),
+      adopt: box('adopt', 'Import after conversion'),
+    };
+    this.content.add(new Label('Always uploaded. Download saves it as it was recorded.', { style: 'muted' }));
+    this.startButton = this.addButtons('Start recording', 'primary', () => onStart(this.values()));
+    this.sync();
+  }
+
+  /** A switch, so a check can click it. */
+  switchOf(key: Switch): Checkbox {
+    return this.boxes[key];
+  }
+
+  /** The settings as the fields stand (test hook). */
+  values(): EditorRecordingSettings {
+    return { ...this.settings, name: this.nameField.value.trim() };
+  }
+
+  /** Sets the fields as a check script would pick them (test hook). */
+  choose(change: Partial<EditorRecordingSettings>): void {
+    if (change.name !== undefined) this.nameField.setValue(change.name);
+    this.settings = { ...this.settings, ...change };
+    for (const [key, checkbox] of Object.entries(this.boxes) as [Switch, Checkbox][])
+      checkbox.setChecked(this.settings[key]);
+    this.sync();
+  }
+
+  /** Whether "Import after conversion" can be changed (test hook). */
+  get adoptEnabled(): boolean {
+    return this.boxes.adopt.enabled;
+  }
+
+  /** The line under the pickers, which says the size the recording comes out at (test hook). */
+  get sizeText(): string {
+    return this.size.text;
+  }
+
+  private start(onStart: (settings: EditorRecordingSettings) => void): void {
+    const settings = this.values();
+    this.close();
+    onStart(settings);
+  }
+
+  private pickResolution(): void {
+    new Menu(
+      EDITOR_RECORDING_RESOLUTIONS.map((r) => ({
+        label: r.label,
+        current: r.value === this.settings.resolution,
+        onSelect: () => this.choose({ resolution: r.value }),
+      })),
+    ).openBelow(this.resolutionPicker);
+  }
+
+  private pickFps(): void {
+    new Menu(
+      FPS_CHOICES.map((fps) => ({
+        label: String(fps),
+        current: fps === this.settings.fps,
+        onSelect: () => this.choose({ fps }),
+      })),
+    ).openBelow(this.fpsPicker);
+  }
+
+  /** Import goes with Convert: without an MP4 there is nothing a project could take. */
+  private sync(): void {
+    const { resolution, fps, convert } = this.settings;
+    this.resolutionPicker.setText(labelOf(resolution));
+    this.fpsPicker.setText(String(fps));
+    const { app } = ui();
+    const { size } = editorRecordingPlan(
+      { w: app.screen.width, h: app.screen.height },
+      app.renderer.resolution,
+      resolution,
+    );
+    this.size.setText(`${size.w} × ${size.h} at ${fps} fps, from this window`);
+    this.boxes.adopt.setEnabled(convert);
+    this.refreshLayout();
+  }
+}
+
+function labelOf(resolution: EditorRecordingResolution): string {
+  return EDITOR_RECORDING_RESOLUTIONS.find((r) => r.value === resolution)?.label ?? resolution;
+}

src/editor/FilePicker.ts

@@ -252,6 +252,8 @@ export abstract class FilePicker<Item extends PickerItem> extends Popup {
     private readonly words: PickerWords,
     upload: () => void,
     private readonly deleteFile: (file: string) => Promise<void>,
+    /** Buttons of a kind of picker of its own, after Delete; `picked` says what is picked. */
+    protected readonly extras: readonly Button[] = [],
   ) {
     super({ modal: true, padding: Theme.padding * 2, gap: Theme.gap });
     this.content.add(new Label(words.title, { style: 'bodyBold' }));
@@ -278,7 +280,7 @@ export abstract class FilePicker<Item extends PickerItem> extends Popup {
     this.remove = new Button('Delete', { variant: 'danger' });
     this.remove.onClick = () => void this.pressDelete();
     this.remove.setEnabled(false);
-    this.buttons = dialogButtons(this.closeThen(), this.use, [uploadButton, this.remove]);
+    this.buttons = dialogButtons(this.closeThen(), this.use, [uploadButton, this.remove, ...extras]);
     this.content.add(this.buttons);
   }
 
@@ -350,10 +352,20 @@ export abstract class FilePicker<Item extends PickerItem> extends Popup {
     this.setDeleteLabel('Delete');
     this.use.setEnabled(item !== null && this.canUse(item));
     this.remove.setEnabled(item?.deletable ?? false);
+    this.picked(item);
     this.detail.setText(item ? this.describe(item) : (this.words.idle ?? ''));
     this.refreshLayout();
   }
 
+  /** Says the `extras` what is picked now, null for nothing. */
+  protected picked(_item: Item | null): void {}
+
+  /** Shows a line under the list instead of what is picked, until the pick changes. */
+  protected say(text: string): void {
+    this.detail.setText(text);
+    this.refreshLayout();
+  }
+
   /** A button does not measure itself again on a new text; the row around it has to (see `Button.setText`). */
   private setDeleteLabel(label: string): void {
     this.remove.setText(label);

src/editor/debug/videoHooks.ts

@@ -2,6 +2,7 @@ import type { VideoClip } from '../../core/model/Asset';
 import { findAssetOf } from '../../core/model/Project';
 import { clipsOf } from '../../core/model/sound';
 import { videoLibrary } from '../../viewport/VideoLibrary';
+import type { EditorRecordingDialog } from '../EditorRecordingDialog';
 import { currentVideoPicker } from '../video/VideoPicker';
 import { centreOf, type HookContext } from './hookHelpers';
 
@@ -31,15 +32,41 @@ export function videoHooks({ state, editor }: HookContext) {
       rulerAt: (seconds: number) => videoEditor.canvas.rulerAt(seconds),
       /** The time's zoom, and whether a transition is on its way. */
       zoom: () => videoEditor.canvas.zoomInfo(),
+      downloadButton: () => centreOf(videoEditor.downloadButton),
+      /** Where the last Download went and under which name. */
+      lastDownload: () => videoEditor.lastDownload,
     },
     videoPicker: () => {
       const picker = currentVideoPicker();
-      return picker ? { ...picker.debugInfo(), waiting: picker.waitingFor } : null;
+      return picker
+        ? {
+            ...picker.debugInfo(),
+            waiting: picker.waitingFor,
+            extras: picker.extraButtons(),
+            lastDownload: picker.lastDownload,
+          }
+        : null;
     },
     videoPickerRow: (file: string) => currentVideoPicker()?.rowGlobal(file) ?? null,
     /** What each player behind a sprite is doing: its time, whether it runs and is heard. */
     videos: () => videoLibrary.debugInfo(),
     /** The recordings of the game view (#405): each take, and its way into the project. */
     recording: () => editor.recordingInfo(),
+    /** "Start recording…" as it stands, with the centres of its switches and of Start; null while shut. */
+    recordingDialog: () => {
+      const dialog = editor.editorRecordingDialog();
+      if (!dialog) return null;
+      const switches = ['pointer', 'sound', 'convert', 'adopt'] as const;
+      return {
+        values: dialog.values(),
+        size: dialog.sizeText,
+        adoptEnabled: dialog.adoptEnabled,
+        switches: Object.fromEntries(switches.map((key) => [key, centreOf(dialog.switchOf(key))])),
+        start: centreOf(dialog.startButton),
+      };
+    },
+    /** Picks resolution, fps or name in the open "Start recording…" as the menus would. */
+    recordingDialogChoose: (change: Parameters<EditorRecordingDialog['choose']>[0]) =>
+      editor.editorRecordingDialog()?.choose(change),
   };
 }

src/editor/editorRecordingSettings.ts

@@ -0,0 +1,38 @@
+/**
+ * The last choice of "Start recording…", kept in this browser like the general settings (#309):
+ * it is about the person recording, not the game. The name is never kept – each recording gets its
+ * own. Best effort: a browser that refuses `localStorage` forgets it with the page.
+ */
+import { editorRecordingSettingsOf, type EditorRecordingSettings } from '../core/recording/editorRecording';
+
+const STORAGE_KEY = 'game-maker.editor-recording';
+
+let kept: EditorRecordingSettings | null = null;
+
+function storage(): Pick<Storage, 'getItem' | 'setItem'> | null {
+  try {
+    return typeof window === 'undefined' ? null : window.localStorage;
+  } catch {
+    return null;
+  }
+}
+
+export function editorRecordingSettings(): EditorRecordingSettings {
+  if (!kept) {
+    try {
+      kept = editorRecordingSettingsOf(JSON.parse(storage()?.getItem(STORAGE_KEY) ?? '{}'));
+    } catch {
+      kept = editorRecordingSettingsOf({});
+    }
+  }
+  return { ...kept };
+}
+
+export function keepEditorRecordingSettings(settings: EditorRecordingSettings): void {
+  kept = { ...editorRecordingSettingsOf(settings) };
+  try {
+    storage()?.setItem(STORAGE_KEY, JSON.stringify({ ...kept, name: undefined }));
+  } catch {
+    // Kept for this page only.
+  }
+}

src/editor/recordingUploads.ts

@@ -1,11 +1,13 @@
 import type { UploadedVideo } from '../core/store/VideoStore';
 import type { MadeRecording } from '../viewport/RecordingTake';
+import type { RecordingUploadOptions } from './EditorRecorder';
 import { adoptVideo, type VideoImportDeps } from './videoImport';
 
 /** How often the server is asked whether a recording is converted, as the video picker does. */
 const POLL_MS = 1000;
 
-type UploadState = 'uploading' | 'converting' | 'added' | 'elsewhere' | 'failed';
+/** `kept`: uploaded without converting it; `converted`: converted, but not to be imported. */
+type UploadState = 'uploading' | 'converting' | 'added' | 'kept' | 'converted' | 'elsewhere' | 'failed';
 
 /** What became of a recording on its way into the project (test hook). */
 export interface RecordingUpload {
@@ -19,16 +21,18 @@ export interface RecordingUpload {
 }
 
 /**
- * Brings a recording of the game view (#405) or of the editor into the project: up to the server, which converts it
- * like any video, then an asset named after the recording once it is ready. Only while the editor
- * is not playing: a run plays a copy of the project that is thrown away, and so would the asset be.
+ * Brings a recording of the game view (#405) or of the editor into the project: up to the server,
+ * which converts it like any video, then an asset named after the recording once it is ready. Only
+ * while the editor is not playing: a run plays a copy of the project that is thrown away, and so
+ * would the asset be. An editor recording may stop short of either step ("Start recording…"): it
+ * is always uploaded, and the video picker has it.
  */
 export class RecordingUploads {
   private readonly uploads: RecordingUpload[] = [];
 
   constructor(private readonly deps: VideoImportDeps) {}
 
-  add(recording: MadeRecording): void {
+  add(recording: MadeRecording, options: RecordingUploadOptions = { convert: true, adopt: true }): void {
     const upload: RecordingUpload = {
       name: recording.name,
       state: 'uploading',
@@ -38,7 +42,7 @@ export class RecordingUploads {
       error: '',
     };
     this.uploads.push(upload);
-    void this.bring(recording, upload).catch((error: unknown) => {
+    void this.bring(recording, upload, options).catch((error: unknown) => {
       upload.state = 'failed';
       upload.error = error instanceof Error ? error.message : String(error);
       this.deps.state.setNotice(`Could not save the recording "${recording.name}": ${upload.error}`, 'error');
@@ -49,7 +53,11 @@ export class RecordingUploads {
     return this.uploads.map((upload) => ({ ...upload }));
   }
 
-  private async bring(recording: MadeRecording, upload: RecordingUpload): Promise<void> {
+  private async bring(
+    recording: MadeRecording,
+    upload: RecordingUpload,
+    options: RecordingUploadOptions,
+  ): Promise<void> {
     const { state, videos } = this.deps;
     const projectId = state.project.id;
     state.setNotice(`Uploading the recording "${recording.name}"…`);
@@ -57,14 +65,27 @@ export class RecordingUploads {
       recording.blob,
       'application/octet-stream',
       `${recording.name}.mkv`,
+      { convert: options.convert },
     );
     upload.file = video.file;
+    if (!options.convert) {
+      upload.state = 'kept';
+      state.setNotice(
+        `Uploaded the recording "${recording.name}" without converting it – the video picker has it.`,
+      );
+      return;
+    }
     upload.state = 'converting';
     while (video.status !== 'ready') {
       if (video.status === 'failed') throw new Error(video.error ?? 'the server could not convert it');
       await wait(POLL_MS);
       video = (await videos.list()).find((v) => v.file === upload.file) ?? video;
     }
+    if (!options.adopt) {
+      upload.state = 'converted';
+      state.setNotice(`The recording "${recording.name}" is converted – the video picker has it.`);
+      return;
+    }
     while (state.mode !== 'edit') await wait(POLL_MS);
     if (state.project.id !== projectId) {
       upload.state = 'elsewhere';

src/editor/video/VideoEditor.ts

@@ -1,4 +1,5 @@
 import type { Asset, VideoAsset } from '../../core/model/Asset';
+import type { VideoStore } from '../../core/store/VideoStore';
 import { Button, downloadFile } from '../../ui';
 import { videoFileUrl } from '../../viewport/VideoLibrary';
 import { AssetTabEditor } from '../AssetTabEditor';
@@ -16,10 +17,18 @@ const INFO_WIDTH = 220;
 export class VideoEditor extends AssetTabEditor<VideoAsset, VideoCanvas> {
   /** Public for the check scripts. */
   readonly playButton: Button;
-  /** Saves the MP4 the server made (#405): a recording of the game view is had this way. */
+  /**
+   * Saves the video as it was uploaded (#405): a recording comes out as it was recorded. A video
+   * uploaded before uploads were kept has only its MP4.
+   */
   readonly downloadButton: Button;
+  /** Where the last Download went and under which name (test hook). */
+  lastDownload: { href: string; name: string } | null = null;
 
-  constructor(state: EditorState) {
+  constructor(
+    state: EditorState,
+    private readonly videos: VideoStore,
+  ) {
     super(state, { infoWidth: INFO_WIDTH });
     this.playButton = new Button('Play', {
       icon: TOOLBAR_ICON_SVG.play,
@@ -28,8 +37,8 @@ export class VideoEditor extends AssetTabEditor<VideoAsset, VideoCanvas> {
       onClick: () => this.togglePlay(),
     });
     this.downloadButton = new Button('Download', {
-      tooltip: 'Save the video as an MP4 file',
-      onClick: () => this.download(),
+      tooltip: 'Save the video as it was uploaded',
+      onClick: () => void this.download(),
     });
     const canvas = new VideoCanvas(state);
     canvas.onTogglePlay = () => this.togglePlay();
@@ -57,9 +66,21 @@ export class VideoEditor extends AssetTabEditor<VideoAsset, VideoCanvas> {
     this.syncPlayButton();
   }
 
-  private download(): void {
+  private async download(): Promise<void> {
     const asset = this.asset();
-    if (asset?.file) downloadFile(videoFileUrl(asset.file), `${asset.name}.mp4`);
+    if (!asset?.file) return;
+    let original: string | null = null;
+    try {
+      original = (await this.videos.list()).find((v) => v.file === asset.file)?.original ?? null;
+    } catch (error) {
+      this.state.setNotice(
+        `Could not ask the server for the upload, saving the MP4: ${String(error)}`,
+        'error',
+      );
+    }
+    const file = original ?? asset.file;
+    this.lastDownload = { href: videoFileUrl(file), name: `${asset.name}.${file.split('.').pop()}` };
+    downloadFile(this.lastDownload.href, this.lastDownload.name);
   }
 
   /** Only called while the tab is visible. */

src/editor/video/VideoPicker.ts

@@ -1,7 +1,7 @@
 import { Container, Graphics, Sprite, type Text } from 'pixi.js';
 import type { StoredVideo } from '../../core/store/VideoStore';
-import { crispText, formatBytes, textStyle, truncate } from '../../ui';
-import { posterLibrary } from '../../viewport/VideoLibrary';
+import { Button, crispText, downloadFile, formatBytes, textStyle, truncate } from '../../ui';
+import { posterLibrary, videoFileUrl } from '../../viewport/VideoLibrary';
 import { pickFiles } from '../assetImport';
 import {
   currentPicker,
@@ -84,6 +84,8 @@ class VideoPicker extends FilePicker<VideoItem> {
   declare protected readonly list: VideoList;
   private poll: ReturnType<typeof setTimeout> | null = null;
   private lastItems: VideoItem[] = [];
+  /** Where the last Download went and under which name (test hook). */
+  lastDownload: { href: string; name: string } | null = null;
 
   constructor(
     private readonly deps: VideoImportDeps,
@@ -95,14 +97,21 @@ class VideoPicker extends FilePicker<VideoItem> {
       {
         title: 'Choose a video',
         loading: 'Loading videos…',
-        idle: 'Videos are converted to MP4 on the server, up to 1080p.',
+        idle: 'Videos are converted to MP4 on the server, up to 4K.',
         empty: 'No videos on the server yet – upload one.',
         use: 'Use video',
         noun: 'video',
       },
       () => uploadFromDialog(deps),
       (file) => deps.videos.delete(file),
+      [
+        new Button('Download', { tooltip: 'Save the video as it was uploaded' }),
+        new Button('Convert', { tooltip: 'Convert it on the server, so a project can use it' }),
+      ],
     );
+    const [download, convert] = this.extras;
+    download!.onClick = () => this.download();
+    convert!.onClick = () => void this.convert();
   }
 
   /** Global centre of a row (test hook). */
@@ -110,6 +119,49 @@ class VideoPicker extends FilePicker<VideoItem> {
     return this.list.rowGlobal(file);
   }
 
+  /** Download and Convert, whether they can be pressed and where (test hook). */
+  extraButtons(): { label: string; enabled: boolean; x: number; y: number }[] {
+    return this.extras.map((button) => {
+      const at = button.getGlobalPosition();
+      return { label: button.text, enabled: button.enabled, x: at.x + button.w / 2, y: at.y + button.h / 2 };
+    });
+  }
+
+  protected override picked(item: VideoItem | null): void {
+    const [download, convert] = this.extras;
+    download!.setEnabled(Boolean(item?.original));
+    convert!.setEnabled(
+      Boolean(item?.original) && (item?.status === 'unconverted' || item?.status === 'failed'),
+    );
+  }
+
+  /** The upload as it came, under the name it came with. */
+  private download(): void {
+    const item = this.list.selected;
+    if (!item?.original) return;
+    const ending = item.original.split('.').pop() ?? 'mp4';
+    const name = item.name || `video.${ending}`;
+    this.lastDownload = { href: videoFileUrl(item.original), name };
+    downloadFile(this.lastDownload.href, name);
+  }
+
+  /** Sends a kept upload to be converted, then watches it on its way like any other. */
+  private async convert(): Promise<void> {
+    const item = this.list.selected;
+    if (!item?.original) return;
+    this.extras[1]!.setEnabled(false);
+    try {
+      await this.deps.videos.convert(item.file);
+    } catch (error) {
+      this.say(`Not converted: ${error instanceof Error ? error.message : String(error)}`);
+      return;
+    }
+    if (this.list.destroyed) return;
+    if (this.poll !== null) clearTimeout(this.poll);
+    this.poll = null;
+    await this.load();
+  }
+
   /** The uploads it waits for (test hook). */
   get waitingFor(): string[] {
     return [...this.waiting];
@@ -160,7 +212,8 @@ class VideoPicker extends FilePicker<VideoItem> {
   }
 
   protected override describe(item: VideoItem): string {
-    const size = item.status === 'ready' ? ` – ${formatBytes(item.bytes)}` : '';
+    const size =
+      item.status === 'ready' || item.status === 'unconverted' ? ` – ${formatBytes(item.bytes)}` : '';
     return `${item.name || 'Video'}${size} – ${videoStatusText(item)}`;
   }
 

src/editor/video/videoInfo.ts

@@ -20,6 +20,8 @@ export function videoStatusText(video: UploadedVideo): string {
       return `Converting… ${Math.round((video.progress ?? 0) * 100)} %`;
     case 'failed':
       return `Could not be converted: ${video.error || 'no reason given'}`;
+    case 'unconverted':
+      return 'Not converted – Convert makes it usable';
     default:
       return [
         `${video.width ?? 0} × ${video.height ?? 0}`,