Fix duplicate movie audio during scene transitions

frontend/tests/movie.test.mjs

@@ -6,7 +6,46 @@ import { parseHTML } from "linkedom";
 
 const source = readFileSync(new URL("../src/player/movie.ts", import.meta.url), "utf8");
 const { outputText } = ts.transpileModule(source, { compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext } });
-const { applyMovieMask, movieDisplayable } = await import(`data:text/javascript;base64,${Buffer.from(outputText).toString("base64")}`);
+const { applyMovieMask, movieDisplayable, disposeMovies, snapshotDisplayables } = await import(`data:text/javascript;base64,${Buffer.from(outputText).toString("base64")}`);
+
+test("transition snapshots copy video and canvas pixels without cloning active players", () => {
+  const { document } = parseHTML('<html><body><div><video class="pg-image" style="left: 10px"></video><canvas width="4" height="2"></canvas></div></body></html>');
+  globalThis.document = document;
+  const create = document.createElement.bind(document);
+  const drawn = [];
+  const root = document.querySelector('div');
+  const video = root.querySelector('video');
+  const canvas = root.querySelector('canvas');
+  Object.assign(video, { readyState: 2, videoWidth: 4, videoHeight: 2, muted: true, autoplay: true });
+  const canvasProto = Object.getPrototypeOf(canvas);
+  const previous = canvasProto.getContext;
+  canvasProto.getContext = function () { return { drawImage: source => drawn.push(source) }; };
+  try {
+    const copy = snapshotDisplayables(root);
+    assert.equal(copy.querySelectorAll('video').length, 0);
+    assert.equal(copy.querySelectorAll('canvas').length, 2);
+    assert.deepEqual(drawn, [video, canvas]);
+    assert.equal(copy.querySelector('.pg-image').style.left, '10px');
+    assert.equal(root.querySelector('video'), video, 'snapshot leaves the live movie in place');
+  } finally { canvasProto.getContext = previous; document.createElement = create; }
+});
+
+test("disposing a removed movie stops and unloads its player immediately", () => {
+  const { document } = parseHTML('<html><body></body></html>');
+  globalThis.document = document;
+  const video = movieDisplayable('/movie.webm', null);
+  let paused = false, unloaded = false;
+  video.pause = () => { paused = true; };
+  video.load = () => { unloaded = true; };
+  assert.equal(video.defaultMuted, true);
+  document.body.append(video);
+  video.remove();
+  disposeMovies(video);
+  assert.equal(paused, true);
+  assert.equal(unloaded, true);
+  assert.equal(video.autoplay, false);
+  assert.equal(video.hasAttribute('src'), false);
+});
 
 test("video opacity uses the mask's red channel and retains existing transparency", () => {
   const pixels = new Uint8ClampedArray([200, 10, 20, 255, 30, 40, 50, 128]);