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>
244 lines
10 KiB
TypeScript
244 lines
10 KiB
TypeScript
/**
|
||
* Videos (#402): an asset with clips, worn by a sprite through `texture` like a picture, played
|
||
* under a key the texture library hands to its player.
|
||
*/
|
||
import { describe, expect, it } from 'vitest';
|
||
import { CreateVideoCommand, DuplicateAssetCommand } from '../../src/core/commands/assetCommands';
|
||
import { AddClipCommand, RemoveClipCommand, SetClipPropsCommand } from '../../src/core/commands/clipCommands';
|
||
import { CommandError } from '../../src/core/commands/Command';
|
||
import type { VideoAsset, VideoClip } from '../../src/core/model/Asset';
|
||
import { findAssetOf } from '../../src/core/model/Project';
|
||
import { clipsOf } from '../../src/core/model/sound';
|
||
import { resolvePicture } from '../../src/core/model/texture';
|
||
import {
|
||
findVideo,
|
||
isVideoFile,
|
||
parseVideoKey,
|
||
posterFileOf,
|
||
videoKey,
|
||
videoPlayOf,
|
||
videoSpan,
|
||
videoTimeAt,
|
||
} from '../../src/core/model/video';
|
||
import { pictureChoices, textureRefLabel, videoChoices } from '../../src/core/properties/textureRef';
|
||
import {
|
||
VIDEO_END_KEY,
|
||
VIDEO_LOOP_KEY,
|
||
VIDEO_START_KEY,
|
||
VIDEO_VOLUME_KEY,
|
||
} from '../../src/core/properties/videos';
|
||
import { deserializeProject, serializeProject } from '../../src/core/store/serialize';
|
||
import { formatDuration, isPending, videoStatusText } from '../../src/editor/video/videoInfo';
|
||
import { makeProject } from '../helpers';
|
||
|
||
const FILE = `a1b2c3d4e5f6/${'c7'.repeat(32)}.mp4`;
|
||
const DETAILS = { width: 1920, height: 1080, duration: 12.5, fps: 29.97, audio: true };
|
||
|
||
function setup() {
|
||
const f = makeProject();
|
||
const create = new CreateVideoCommand('Intro', FILE, DETAILS);
|
||
f.stack.execute(create);
|
||
const clip = new AddClipCommand(create.asset.id, { [VIDEO_START_KEY]: 2, [VIDEO_END_KEY]: 4.5 });
|
||
f.stack.execute(clip);
|
||
const video = () => findAssetOf(f.project, create.asset.id, 'video')!;
|
||
return { f, video, clipId: clip.clipId };
|
||
}
|
||
|
||
describe('a video asset (#402)', () => {
|
||
it('names an MP4 the worker made, nothing else', () => {
|
||
expect(isVideoFile(FILE)).toBe(true);
|
||
expect(isVideoFile(`${'c7'.repeat(32)}.mp4`)).toBe(true);
|
||
expect(isVideoFile(`a1b2c3d4e5f6/${'c7'.repeat(32)}.mov`)).toBe(false);
|
||
expect(isVideoFile('../x.mp4')).toBe(false);
|
||
const f = makeProject();
|
||
expect(() => f.stack.execute(new CreateVideoCommand('Bad', 'holiday.mov', DETAILS))).toThrow(
|
||
CommandError,
|
||
);
|
||
expect(posterFileOf(FILE)).toBe(`a1b2c3d4e5f6/${'c7'.repeat(32)}.jpg`);
|
||
});
|
||
|
||
it('keeps its details, loops by default and has clips like a sound', () => {
|
||
const { video, clipId } = setup();
|
||
expect(video()).toMatchObject({ type: 'video', file: FILE, ...DETAILS });
|
||
expect(video().props[VIDEO_LOOP_KEY]).toBe(true);
|
||
expect(clipsOf<VideoClip>(video())).toEqual([
|
||
{ id: clipId, name: 'Clip 1', props: { [VIDEO_START_KEY]: 2, [VIDEO_END_KEY]: 4.5 } },
|
||
]);
|
||
});
|
||
|
||
it('takes only the rows a video clip has', () => {
|
||
const { f, video, clipId } = setup();
|
||
expect(() => new SetClipPropsCommand(video().id, clipId, { reverse: true }).execute(f.project)).toThrow(
|
||
CommandError,
|
||
);
|
||
expect(() =>
|
||
new SetClipPropsCommand(video().id, clipId, { [VIDEO_START_KEY]: -1 }).execute(f.project),
|
||
).toThrow(CommandError);
|
||
f.stack.execute(new SetClipPropsCommand(video().id, clipId, { [VIDEO_END_KEY]: 6 }));
|
||
expect(clipsOf<VideoClip>(video())[0]!.props[VIDEO_END_KEY]).toBe(6);
|
||
f.stack.undo();
|
||
expect(clipsOf<VideoClip>(video())[0]!.props[VIDEO_END_KEY]).toBe(4.5);
|
||
});
|
||
|
||
it('resolves a clip id to its video', () => {
|
||
const { f, video, clipId } = setup();
|
||
expect(findVideo(f.project, clipId)).toEqual({ asset: video(), clip: clipsOf(video())[0] });
|
||
expect(findVideo(f.project, video().id)).toEqual({ asset: video(), clip: null });
|
||
expect(findVideo(f.project, 'nothing')).toBeNull();
|
||
});
|
||
|
||
it('survives saving and loading, its clip ids included', () => {
|
||
const { f, video } = setup();
|
||
const back = deserializeProject(serializeProject(f.project));
|
||
expect(findAssetOf(back, video().id, 'video')).toEqual(video());
|
||
});
|
||
|
||
it('drops a file that is no video and details that are no numbers when loading', () => {
|
||
const { f, video } = setup();
|
||
const raw = structuredClone(serializeProject(f.project)) as {
|
||
assets: Record<string, unknown>[];
|
||
};
|
||
const stored = raw.assets.find((a) => a.id === video().id)!;
|
||
Object.assign(stored, { file: '../etc/passwd', width: 'wide', duration: -3, audio: 'yes' });
|
||
const back = findAssetOf(deserializeProject(raw), video().id, 'video')!;
|
||
expect(back).toMatchObject({ file: '', width: 0, duration: 0, audio: false });
|
||
});
|
||
|
||
it('gives a copy clips of its own', () => {
|
||
const { f, video, clipId } = setup();
|
||
const copy = new DuplicateAssetCommand(video().id);
|
||
f.stack.execute(copy);
|
||
const twin = f.project.assets.find((a) => a.type === 'video' && a.id !== video().id) as VideoAsset;
|
||
expect(clipsOf(twin)).toHaveLength(1);
|
||
expect(clipsOf<VideoClip>(twin)[0]!.id).not.toBe(clipId);
|
||
});
|
||
});
|
||
|
||
describe('the stretch a video plays', () => {
|
||
it('runs from the start to the end of the video for an end of 0', () => {
|
||
expect(videoSpan(10, 0, 0)).toEqual({ start: 0, end: 10 });
|
||
expect(videoSpan(10, 2, 4)).toEqual({ start: 2, end: 4 });
|
||
});
|
||
|
||
it('stays inside the video', () => {
|
||
expect(videoSpan(10, 3, 25)).toEqual({ start: 3, end: 10 });
|
||
expect(videoSpan(10, -1, 4)).toEqual({ start: 0, end: 4 });
|
||
expect(videoSpan(10, 12, 0).start).toBeLessThan(10);
|
||
});
|
||
|
||
it('runs to the end when the end is not after the start', () => {
|
||
expect(videoSpan(10, 6, 4)).toEqual({ start: 6, end: 10 });
|
||
});
|
||
|
||
it('is told where it stands after a while, repeating or held at its end', () => {
|
||
const clip = { start: 2, end: 4, loop: true };
|
||
expect(videoTimeAt(clip, 0.5)).toBe(2.5);
|
||
expect(videoTimeAt(clip, 2.5)).toBe(2.5);
|
||
expect(videoTimeAt({ ...clip, loop: false }, 9)).toBe(4);
|
||
expect(videoTimeAt({ start: 0, end: Infinity, loop: true }, 7)).toBe(7);
|
||
});
|
||
});
|
||
|
||
describe('the key a playing video goes by', () => {
|
||
it('says the file, the stretch, the loop and the volume, and is read back', () => {
|
||
const { f, video, clipId } = setup();
|
||
f.stack.execute(new SetClipPropsCommand(video().id, clipId, {}));
|
||
video().props[VIDEO_VOLUME_KEY] = 0.5;
|
||
const play = videoPlayOf({ asset: video(), clip: clipsOf<VideoClip>(video())[0]! });
|
||
expect(play).toEqual({ file: FILE, start: 2, end: 4.5, loop: true, volume: 0.5 });
|
||
expect(parseVideoKey(videoKey(play))).toEqual(play);
|
||
});
|
||
|
||
it('names the whole video, or a clip that runs to its end, as running to the end', () => {
|
||
const { video } = setup();
|
||
const whole = videoPlayOf({ asset: video(), clip: null });
|
||
expect(whole.end).toBe(Infinity);
|
||
expect(videoKey(whole)).toBe(`video:${FILE}#0~0~1~1`);
|
||
expect(parseVideoKey(videoKey(whole))?.end).toBe(Infinity);
|
||
const tail = { id: 'tail', name: 'Tail', props: { [VIDEO_START_KEY]: 10, [VIDEO_END_KEY]: 0 } };
|
||
expect(videoPlayOf({ asset: video(), clip: tail })).toMatchObject({ start: 10, end: Infinity });
|
||
});
|
||
|
||
it('is no key for anything else', () => {
|
||
expect(parseVideoKey(FILE)).toBeNull();
|
||
expect(parseVideoKey('gen:abc@1')).toBeNull();
|
||
expect(parseVideoKey(`video:holiday.mov#0~0~1~1`)).toBeNull();
|
||
expect(parseVideoKey(`video:${FILE}#0~0~1`)).toBeNull();
|
||
expect(parseVideoKey(`video:${FILE}#a~0~1~1`)).toBeNull();
|
||
});
|
||
});
|
||
|
||
describe('a video worn by a sprite', () => {
|
||
it('reads like a picture of its size, under its key', () => {
|
||
const { f, video, clipId } = setup();
|
||
expect(resolvePicture(f.project, video().id)).toEqual({
|
||
file: `video:${FILE}#0~0~1~1`,
|
||
smooth: true,
|
||
rect: null,
|
||
sourceWidth: 1920,
|
||
sourceHeight: 1080,
|
||
slice: null,
|
||
});
|
||
expect(resolvePicture(f.project, clipId)?.file).toBe(`video:${FILE}#2~4.5~1~1`);
|
||
});
|
||
|
||
it('is no picture while it names no file', () => {
|
||
const f = makeProject();
|
||
const raw = structuredClone(serializeProject(f.project)) as { assets: unknown[] };
|
||
raw.assets.push({ id: 'v1', type: 'video', name: 'Empty', props: {}, file: '' });
|
||
expect(resolvePicture(deserializeProject(raw), 'v1')).toBeNull();
|
||
});
|
||
|
||
it('is offered with its clips where a texture field plays videos, after the pictures', () => {
|
||
const { f, video, clipId } = setup();
|
||
expect(pictureChoices(f.project).some((c) => c.asset.type === 'video')).toBe(false);
|
||
expect(videoChoices(f.project).map((c) => [c.id, c.label])).toEqual([
|
||
[video().id, 'Intro'],
|
||
[clipId, 'Intro / Clip 1'],
|
||
]);
|
||
expect(textureRefLabel(f.project, clipId)).toBe('Intro / Clip 1');
|
||
});
|
||
|
||
it('reads as missing once its clip is gone, and comes back on undo', () => {
|
||
const { f, video, clipId } = setup();
|
||
f.stack.execute(new RemoveClipCommand(video().id, clipId));
|
||
expect(resolvePicture(f.project, clipId)).toBeNull();
|
||
expect(textureRefLabel(f.project, clipId)).toBe(`${clipId}?`);
|
||
f.stack.undo();
|
||
expect(resolvePicture(f.project, clipId)).not.toBeNull();
|
||
});
|
||
});
|
||
|
||
describe('what the picker says about a video', () => {
|
||
it('waits, converts, is ready or failed', () => {
|
||
const base = { file: FILE, name: 'a.mov', bytes: 0 };
|
||
expect(videoStatusText({ ...base, status: 'queued' })).toBe('Waiting to be converted…');
|
||
expect(videoStatusText({ ...base, status: 'converting', progress: 0.426 })).toBe('Converting… 43 %');
|
||
expect(videoStatusText({ ...base, status: 'failed', error: 'no picture' })).toBe(
|
||
'Could not be converted: no picture',
|
||
);
|
||
expect(videoStatusText({ ...base, status: 'ready', ...DETAILS })).toBe(
|
||
'1920 × 1080 · 12.5 s · 29.97 fps · with sound',
|
||
);
|
||
expect([isPending({ ...base, status: 'converting' }), isPending({ ...base, status: 'failed' })]).toEqual([
|
||
true,
|
||
false,
|
||
]);
|
||
});
|
||
|
||
it('says what to do with an upload kept without converting it, which waits for nobody', () => {
|
||
const kept = { file: FILE, name: 'a.mkv', bytes: 10, status: 'unconverted' as const };
|
||
expect(videoStatusText(kept)).toBe('Not converted – Convert makes it usable');
|
||
expect(isPending(kept)).toBe(false);
|
||
});
|
||
|
||
it('writes a length as long as it needs', () => {
|
||
expect([formatDuration(4), formatDuration(59.94), formatDuration(65), formatDuration(3723)]).toEqual([
|
||
'4 s',
|
||
'59.9 s',
|
||
'1:05',
|
||
'1:02:03',
|
||
]);
|
||
});
|
||
});
|