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>
This commit is contained in:
1 parent
93190e185c
commit
ba01d146e9
26 files changed
+1011
-129
No files matched your search
@@ -0,0 +1,89 @@
|
||||
/**
|
||||
* Recording the whole editor (main menu → Start recording…): what the dialog offers, and the size
|
||||
* and sharpness a choice comes out at. The browser's side is `editor/EditorRecorder.ts`.
|
||||
*/
|
||||
import { editorRecordingSize } from './recording';
|
||||
|
||||
export type EditorRecordingResolution = 'screen' | '1080p' | '1440p' | '4k';
|
||||
|
||||
export interface EditorRecordingSettings {
|
||||
/** Empty: named after the moment it starts (`recordingName`). */
|
||||
name: string;
|
||||
resolution: EditorRecordingResolution;
|
||||
fps: 30 | 60;
|
||||
/** Whether the mouse pointer is drawn in; the system draws it over the canvas, not into it. */
|
||||
pointer: boolean;
|
||||
/** Whether the master is recorded with it. */
|
||||
sound: boolean;
|
||||
/** Whether the server converts the upload into an MP4 a project can use; else it is only kept. */
|
||||
convert: boolean;
|
||||
/** Whether the converted video becomes an asset of the project; only with `convert`. */
|
||||
adopt: boolean;
|
||||
}
|
||||
|
||||
/** `box` is the frame the picture is fitted into, keeping the window's shape; none records the canvas as it is. */
|
||||
export const EDITOR_RECORDING_RESOLUTIONS: readonly {
|
||||
value: EditorRecordingResolution;
|
||||
label: string;
|
||||
box: { w: number; h: number } | null;
|
||||
}[] = [
|
||||
{ value: 'screen', label: 'Screen', box: null },
|
||||
{ value: '1080p', label: '1080p', box: { w: 1920, h: 1080 } },
|
||||
{ value: '1440p', label: '1440p', box: { w: 2560, h: 1440 } },
|
||||
{ value: '4k', label: '4K', box: { w: 3840, h: 2160 } },
|
||||
];
|
||||
|
||||
export const EDITOR_RECORDING_DEFAULTS: EditorRecordingSettings = {
|
||||
name: '',
|
||||
resolution: 'screen',
|
||||
fps: 60,
|
||||
pointer: true,
|
||||
sound: true,
|
||||
convert: true,
|
||||
adopt: true,
|
||||
};
|
||||
|
||||
/**
|
||||
* The most device pixels a layout pixel is drawn at while recording. A window too small for its
|
||||
* frame even then is scaled up into it, a little soft.
|
||||
*/
|
||||
const MOST_RESOLUTION = 4;
|
||||
|
||||
/** Settings as kept in the browser, whatever was kept: anything unknown is the default. The name is never kept. */
|
||||
export function editorRecordingSettingsOf(raw: unknown): EditorRecordingSettings {
|
||||
const kept = typeof raw === 'object' && raw !== null ? (raw as Record<string, unknown>) : {};
|
||||
const flag = (key: 'pointer' | 'sound' | 'convert' | 'adopt'): boolean =>
|
||||
typeof kept[key] === 'boolean' ? kept[key] : EDITOR_RECORDING_DEFAULTS[key];
|
||||
const resolution = EDITOR_RECORDING_RESOLUTIONS.find((r) => r.value === kept.resolution);
|
||||
return {
|
||||
name: '',
|
||||
resolution: resolution?.value ?? EDITOR_RECORDING_DEFAULTS.resolution,
|
||||
fps: kept.fps === 30 ? 30 : 60,
|
||||
pointer: flag('pointer'),
|
||||
sound: flag('sound'),
|
||||
convert: flag('convert'),
|
||||
adopt: flag('adopt'),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* How an editor recording is made of a screen of `screen` layout pixels drawn at `resolution`:
|
||||
* the size of its frames, even on both sides, and the resolution the editor draws at meanwhile.
|
||||
*
|
||||
* `Screen` is the canvas as it is. A larger frame is drawn for, not scaled up to: the editor draws
|
||||
* more device pixels per layout pixel while it records, so text and lines stay sharp in 4K. On
|
||||
* screen it looks the same, as the browser shows the larger canvas at its layout size. A smaller
|
||||
* frame keeps the screen's resolution and is scaled down when it is copied.
|
||||
*/
|
||||
export function editorRecordingPlan(
|
||||
screen: { w: number; h: number },
|
||||
resolution: number,
|
||||
choice: EditorRecordingResolution,
|
||||
): { size: { w: number; h: number }; resolution: number } {
|
||||
const box = EDITOR_RECORDING_RESOLUTIONS.find((r) => r.value === choice)?.box ?? null;
|
||||
const scale = box ? Math.min(box.w / screen.w, box.h / screen.h) : resolution;
|
||||
return {
|
||||
size: editorRecordingSize({ w: Math.round(screen.w * scale), h: Math.round(screen.h * scale) }),
|
||||
resolution: Math.min(MOST_RESOLUTION, Math.max(resolution, scale)),
|
||||
};
|
||||
}
|
||||
@@ -80,12 +80,9 @@ function even(value: number): number {
|
||||
return Math.max(2, Math.round(value / 2) * 2);
|
||||
}
|
||||
|
||||
/** The editor is recorded at 60 fps, whatever the screen draws. */
|
||||
export const EDITOR_RECORDING_FPS = 60;
|
||||
|
||||
/**
|
||||
* The size of an editor recording: the whole canvas in device pixels, an odd row or column cut off,
|
||||
* since the encoders want both sides even.
|
||||
* The size of an editor recording of a canvas in device pixels: all of it, an odd row or column
|
||||
* cut off, since the encoders want both sides even.
|
||||
*/
|
||||
export function editorRecordingSize(canvas: { w: number; h: number }): { w: number; h: number } {
|
||||
const cut = (value: number) => Math.max(2, Math.floor(value / 2) * 2);
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import type { FileStore, StoredFile, UploadedFile } from './FileStore';
|
||||
import { apiRequest } from './http';
|
||||
import type { StoredVideo, UploadedVideo, VideoStore, VideoUploadOptions } from './VideoStore';
|
||||
|
||||
/**
|
||||
* The API's file collections, one route each; textures, fonts, sounds and videos differ in nothing
|
||||
@@ -13,15 +14,19 @@ export class HttpFileStore<
|
||||
S extends StoredFile = StoredFile,
|
||||
> implements FileStore<U, S> {
|
||||
constructor(
|
||||
private readonly endpoint: string,
|
||||
protected readonly endpoint: string,
|
||||
private readonly route: FileRoute,
|
||||
) {}
|
||||
|
||||
async upload(bytes: Blob | ArrayBuffer, type: string, name = ''): Promise<U> {
|
||||
return this.send(bytes, type, { name });
|
||||
}
|
||||
|
||||
protected async send(bytes: Blob | ArrayBuffer, type: string, query: Record<string, string>): Promise<U> {
|
||||
return apiRequest<U>(this.endpoint, 'POST', this.route, {
|
||||
headers: { 'Content-Type': type },
|
||||
body: bytes,
|
||||
query: { name },
|
||||
query,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -31,9 +36,31 @@ export class HttpFileStore<
|
||||
|
||||
/** The reason a refusal gives is meant for the user, so it is thrown as it is, without the route. */
|
||||
async delete(file: string): Promise<void> {
|
||||
await apiRequest<void>(this.endpoint, 'DELETE', `${this.route}/${file}`, {}, (status, data) => {
|
||||
const error = (data as { error?: unknown } | null)?.error;
|
||||
return status >= 400 && typeof error === 'string' ? new Error(error) : undefined;
|
||||
});
|
||||
await apiRequest<void>(this.endpoint, 'DELETE', `${this.route}/${file}`, {}, refusal);
|
||||
}
|
||||
}
|
||||
|
||||
/** Videos: an upload may be kept without converting it, and converted later. */
|
||||
export class HttpVideoStore extends HttpFileStore<UploadedVideo, StoredVideo> implements VideoStore {
|
||||
constructor(endpoint: string) {
|
||||
super(endpoint, 'videos');
|
||||
}
|
||||
|
||||
override async upload(
|
||||
bytes: Blob | ArrayBuffer,
|
||||
type: string,
|
||||
name = '',
|
||||
options: VideoUploadOptions = {},
|
||||
): Promise<UploadedVideo> {
|
||||
return this.send(bytes, type, { name, convert: options.convert === false ? '0' : '' });
|
||||
}
|
||||
|
||||
async convert(file: string): Promise<UploadedVideo> {
|
||||
return apiRequest<UploadedVideo>(this.endpoint, 'POST', `videos/${file}/convert`, {}, refusal);
|
||||
}
|
||||
}
|
||||
|
||||
function refusal(status: number, data: unknown): Error | undefined {
|
||||
const error = (data as { error?: unknown } | null)?.error;
|
||||
return status >= 400 && typeof error === 'string' ? new Error(error) : undefined;
|
||||
}
|
||||
@@ -2,9 +2,10 @@ import type { FileStore, StoredFile, UploadedFile } from './FileStore';
|
||||
|
||||
/**
|
||||
* Where an upload is on its way to `data/videos/` (#402): the worker converts one after the other,
|
||||
* so a video waits, is converted, and is ready or failed.
|
||||
* so a video waits, is converted, and is ready or failed. One uploaded without converting it stays
|
||||
* `unconverted` until it is asked to be.
|
||||
*/
|
||||
export type VideoStatus = 'queued' | 'converting' | 'ready' | 'failed';
|
||||
export type VideoStatus = 'queued' | 'converting' | 'ready' | 'failed' | 'unconverted';
|
||||
|
||||
/**
|
||||
* What the server says about a video. `file` is known the moment the upload is in, long before the
|
||||
@@ -22,7 +23,27 @@ export interface UploadedVideo extends UploadedFile {
|
||||
audio?: boolean;
|
||||
/** `{folder}/{sha256}.jpg`, beside the MP4. */
|
||||
poster?: string;
|
||||
/**
|
||||
* The upload as it came, `{folder}/{sha256}.source.{ext}` beside the MP4: what Download saves.
|
||||
* Null for a video uploaded before uploads were kept.
|
||||
*/
|
||||
original?: string | null;
|
||||
}
|
||||
|
||||
export type StoredVideo = StoredFile & UploadedVideo;
|
||||
export type VideoStore = FileStore<UploadedVideo, StoredVideo>;
|
||||
|
||||
export interface VideoUploadOptions {
|
||||
/** False keeps the upload as it came, `unconverted`, until `convert` asks for it. */
|
||||
convert?: boolean;
|
||||
}
|
||||
|
||||
export interface VideoStore extends FileStore<UploadedVideo, StoredVideo> {
|
||||
upload(
|
||||
bytes: Blob | ArrayBuffer,
|
||||
type: string,
|
||||
name?: string,
|
||||
options?: VideoUploadOptions,
|
||||
): Promise<UploadedVideo>;
|
||||
/** Converts an upload kept without; answers what the server says of it then. */
|
||||
convert(file: string): Promise<UploadedVideo>;
|
||||
}
|
||||
Reference in new issue
Block a user