buninu-browser 0.2.2 → 0.2.3

package/lib/renderer/page-renderer.js

@@ -29,6 +29,10 @@ import { parseHTMLDocument } from "../happy-dom/parser.js";
 import { LayoutEngine } from "../layout/text-layout.js";
 import { ScrollViewport } from "../layout/scroll-viewport.js";
 import { elementAtPoint, elementBounds, hitTest, interactiveRegions } from "../input/hit-test.js";
+import { beginImageLoad, finishImageLoad } from "./image-loading.js";
+import { dispatchPointerMove } from "./pointer-move.js";
+import { keyboardInput } from "./keyboard-input.js";
+import { playbackEvent } from "./media-playback-events.js";
 import { RenderTreeBuilder, renderTreeText, sameLayoutInput } from "../render-tree/index.js";
 import { absolutizeStyleSheetUrls, matchSelectors, StyleEngine, topmostConnected } from "../style/computed-style.js";
 import { compileSelector, matchesCompiled } from "../happy-dom/selector-matcher.js";
@@ -42,7 +46,9 @@ import { formatHint } from "../../vendor/wasmpeg/src/js/formats.js";
 import { containerFormat } from "./media-source.js";
 import { floatToS16, splitSamples } from "../audio/pcm.js";
 import { advanceAudio } from "../media/position-audio.js";
-import { pianoNote, PianoMixer } from "../audio/piano.js";
+import { seekVideoKeyframe } from "../media/video-keyframe.js";
+import { PianoMixer } from "../audio/piano.js";
+import { handlePianoInput } from "./piano-input.js";
 
 // Captured at load: in host mode page scripts share this global object.
 const hostPerformance = globalThis.performance;
@@ -67,11 +73,6 @@ const AUDIO_HISTORY_SECONDS = 3;
 const RESUME_BUFFER_SECONDS = 2;
 const RESUME_BUFFER_MAX_WAIT_MS = 6000;
 const RESUME_BUFFER_IDLE_MS = 400;
-// Finding a seek's keyframe (see seekToKeyframe): how far back it may lie,
-// and the size of the pictures compared.
-const KEYFRAME_SEARCH_SECONDS = 10;
-const KEYFRAME_PROBE_WIDTH = 32;
-const KEYFRAME_PROBE_HEIGHT = 18;
 // element → MediaSource, and the reverse. One renderer owns one page pipeline.
 const elementSources = new WeakMap();
 const sourceElements = new WeakMap();
@@ -219,6 +220,7 @@ function buildPageRenderer({
   consoleMessage = null,
   trace = null,
   onFrame = null,
+  onVideo = null,
   onLifecycle = null,
   videoDecoder = null,
   // Prepares a classic script on another thread: (source) => Promise<{ code, parsed, strict }>.
@@ -463,6 +465,7 @@ function buildPageRenderer({
   // PaintController reusing cached display items
   // (platform/graphics/paint/paint_controller.cc, BSD).
   let rasterized = { list: null, overlay: "", background: "", scale: 0 };
+  let nextVideoPresentation = 1;
   let rasterSurface = null;
   let rasterSurfaceWidth = 0;
   let rasterSurfaceHeight = 0;
@@ -489,6 +492,7 @@ function buildPageRenderer({
 
   /** Rasterizes the viewport and hands it to the compositor. */
   function render() {
+    if (onVideo) for (const state of page.media.values()) readPresentedFrame(state);
     const width = Math.max(1, Math.floor(page.width));
     const height = Math.max(1, Math.floor(page.height));
     const region = { x: viewport.x, y: viewport.y, width, height };
@@ -508,7 +512,8 @@ function buildPageRenderer({
     const pixelWidth = Math.max(1, Math.round(region.width * scale));
     const pixelHeight = Math.max(1, Math.round(region.height * scale));
     if (!rasterSurface || rasterSurfaceWidth !== pixelWidth || rasterSurfaceHeight !== pixelHeight) {
-      rasterSurface?.delete();
+      // MakeSurface owns a malloc-backed pixel buffer; delete() alone leaks it.
+      rasterSurface?.dispose();
       rasterSurface = CanvasKit.MakeSurface(pixelWidth, pixelHeight);
       rasterSurfaceWidth = pixelWidth;
       rasterSurfaceHeight = pixelHeight;
@@ -529,6 +534,7 @@ function buildPageRenderer({
       colorSpace: CanvasKit.ColorSpace.SRGB,
     });
     image.delete();
+    const videoLayer = makeVideoLayer(canvas, surface, region, scale, pixelWidth, pixelHeight);
     page.needsPaint = false;
     rasterized = {
       list: page.displayList, overlay: overlayKey(), background: page.backgroundColor, scale: page.deviceScaleFactor,
@@ -544,6 +550,7 @@ function buildPageRenderer({
       height: region.height,
       scale,
       background: backgroundBytes(page.backgroundColor),
+      videoLayer,
     };
   }
 
@@ -623,7 +630,7 @@ function buildPageRenderer({
   /** Rasterizes display items intersecting the viewport onto a CanvasKit canvas. */
   const paintFailures = new Set();
 
-  function paintDisplayList(canvas, displayList, view, scale) {
+  function paintDisplayList(canvas, displayList, view, scale, videoOverride = null) {
     if (!displayList) return;
     const pixel = (value) => Math.round(value * scale);
     const deviceRect = (rect) => CanvasKit.XYWHRect(
@@ -654,6 +661,9 @@ function buildPageRenderer({
       try {
         if (item.fixed) canvas.translate(viewport.x * scale, viewport.y * scale);
         if (item.clipRect) canvas.clipRect(deviceRect(item.clipRect), CanvasKit.ClipOp.Intersect, true);
+        for (const clip of item.roundedClips ?? []) {
+          canvas.clipRRect(deviceRRect(clip.rect, clip.radii), CanvasKit.ClipOp.Intersect, true);
+        }
         // A scale in document space, as a device-space matrix around the item's device coordinates.
         if (item.transform) {
           const { a, d, e, f } = item.transform;
@@ -790,7 +800,10 @@ function buildPageRenderer({
         canvas.clipRect(rect, CanvasKit.ClipOp.Intersect, true);
         paint.setColor(CanvasKit.Color(0, 0, 0, 1));
         canvas.drawRect(rect, paint);
-        if (resource?.image) {
+        if (videoOverride?.resource === resource) {
+          paint.setColor(CanvasKit.Color(videoOverride.white ? 255 : 0, videoOverride.white ? 255 : 0, videoOverride.white ? 255 : 0, 1));
+          canvas.drawRect(rect, paint);
+        } else if (resource?.image) {
           canvas.drawImageRect(resource.image,
             CanvasKit.XYWHRect(0, 0, resource.bitmapWidth ?? resource.width, resource.bitmapHeight ?? resource.height),
             rect, null, false);
@@ -798,7 +811,7 @@ function buildPageRenderer({
         const centerX = rect[0] + (rect[2] - rect[0]) / 2;
         const centerY = rect[1] + (rect[3] - rect[1]) / 2;
         paint.setColor(CanvasKit.Color(0, 0, 0, 0.65));
-        if (!resource?.playing) {
+        if (item.controls && !resource?.playing) {
           canvas.drawCircle(centerX, centerY, 22 * scale, paint);
           paint.setColor(CanvasKit.Color(255, 255, 255, 1));
           const path = CanvasKit.Path.MakeFromSVGString(
@@ -806,7 +819,7 @@ function buildPageRenderer({
           if (path) { canvas.drawPath(path, paint); path.delete(); }
         }
         // The control bar (play/pause, time, seekable progress) once playing or known.
-        if (resource?.playing || Number.isFinite(resource?.duration)) {
+        if (item.controls && (resource?.playing || Number.isFinite(resource?.duration))) {
           drawMediaBar(canvas, item.rect.x - view.x, item.rect.y + item.rect.height - MEDIA_BAR_HEIGHT - view.y,
             item.rect.width, MEDIA_BAR_HEIGHT, resource, scale, true);
         }
@@ -1652,6 +1665,7 @@ function buildPageRenderer({
         }
         page.resources.set(element, resource);
         page.decodedImages.push(resource.image);
+        finishImageLoad(element, src, resource, type => element.dispatchEvent(new page.window.Event(type)));
       }
       page.dirty = true;
       page.resourceLayoutDirty = true;
@@ -1679,13 +1693,7 @@ function buildPageRenderer({
     if (element.tagName === "INPUT" && !["text", "search", "url", "email", "tel", "password"].includes(element.type)) return;
     // Mobile IMEs often send committed text without a usable keydown (key 229
     // or Unidentified). Handle that before the normal beforeinput insertion.
-    if (!backspace && element.getAttribute("id") === "buninu-piano-input" && audio && text.length === 1) {
-      const note = pianoNote(text);
-      if (note !== null) {
-        playPiano(note);
-        return;
-      }
-    }
+    if (!backspace && handlePianoInput(element, { text }, audio ? playPiano : null)) return;
     const value = String(element.value ?? "");
     let start = Number.isInteger(element.selectionStart) ? element.selectionStart : value.length;
     const end = Number.isInteger(element.selectionEnd) ? element.selectionEnd : start;
@@ -1819,7 +1827,12 @@ function buildPageRenderer({
       computedStyle(element) {
         if (!element) return null;
         if (page.dirty) rebuildRenderTree("getComputedStyle");
-        return styleEngine.get(element);
+        const style = styleEngine.get(element);
+        if (style?.padding.some(value => typeof value === "object")) {
+          const box = page.layout?.boxes.find(box => page.renderTree.nodesById.get(box.nodeId)?.domNode === element);
+          if (box) return { ...style, padding: box.style.padding };
+        }
+        return style;
       },
       layoutVersion() {
         if (page.dirty) rebuildRenderTree("intersection observer");
@@ -2215,19 +2228,15 @@ function buildPageRenderer({
       if (focusedFrame?.renderer) return focusedFrame.renderer.press(key, options);
       refresh();
       const pianoInput = page.document?.activeElement;
-      if (audio && pianoInput?.getAttribute?.("id") === "buninu-piano-input") {
-        const note = pianoNote(String(key), String(options.code ?? ""));
-        if (note !== null && !options.repeat && !options.modifiers) {
-          playPiano(note);
-          return { x: viewport.x, y: viewport.y };
-        }
+      if (handlePianoInput(pianoInput, { ...options, key }, audio ? playPiano : null)) {
+        return { x: viewport.x, y: viewport.y };
       }
       // Pages see keydown/keyup first; preventDefault() cancels the default scroll.
       if (page.realm) {
         const target = page.document.activeElement ?? page.document.body;
         const modifiers = Number(options?.modifiers) || 0;
         const init = {
-          key: String(key), code: String(options?.code ?? ""), repeat: Boolean(options?.repeat),
+          ...keyboardInput(key, options), repeat: Boolean(options?.repeat),
           altKey: Boolean(modifiers & 1), ctrlKey: Boolean(modifiers & 2),
           metaKey: Boolean(modifiers & 4), shiftKey: Boolean(modifiers & 8),
           bubbles: true, cancelable: true,
@@ -2272,10 +2281,37 @@ function buildPageRenderer({
     scrollOffset() {
       return { x: viewport.x, y: viewport.y };
     },
+    videoReport(report) {
+      const state = [...page.media.values()].find(state => state.video?.presentation?.id === report.id);
+      if (!state || !state.playing) return;
+      if (report.error) {
+        state.presentationFailed = true;
+        stopVideoPresentation(state);
+        const serial = state.seekSerial;
+        void placeVideo(state, mediaTime(state)).then(() => {
+          if (state.playing && state.document === page.document && state.seekSerial === serial) startMedia(state);
+        }).catch(reportError);
+      } else if (Number.isFinite(report.end)) {
+        state.video.frameTime = report.end;
+        if (needsMore(state.video)) void refillMedia(state, state.video);
+        else {
+          readPresentedFrame(state);
+          stopVideoPresentation(state);
+          state.video.done = true;
+        }
+      } else if (Number.isFinite(report.time)) state.video.shownTime = report.time;
+    },
     /** The wheel at a viewport point: the delta the page itself still has to scroll (see wheel). */
     wheel(x, y, deltaX, deltaY, options = undefined) {
       return wheel(Number(x), Number(y), Number(deltaX) || 0, Number(deltaY) || 0, options);
     },
+    /** Move the pointer in viewport coordinates, including boundary events. */
+    move(x, y) {
+      refresh();
+      const target = elementAtPoint(page.renderTree, page.displayList, Number(x), Number(y), viewport);
+      dispatchPointerMove(page.window, page.realm, target, Number(x), Number(y));
+      refresh();
+    },
     /**
      * Clicks at a viewport point: the page receives a click event first, and
      * unless it calls preventDefault() a link under the point is returned for
@@ -2351,7 +2387,7 @@ function buildPageRenderer({
         refresh();
         if (prevented) return null;
       }
-      if (target.tagName === "AUDIO" || target.tagName === "VIDEO") {
+      if ((target.tagName === "AUDIO" || target.tagName === "VIDEO") && target.hasAttribute("controls")) {
         clickMedia(target, x, y);
         return null;
       }
@@ -2446,7 +2482,7 @@ function buildPageRenderer({
       page.realm?.dispose();
       closePiano();
       disposeVideos();
-      rasterSurface?.delete();
+      rasterSurface?.dispose();
       rasterSurface = null;
       page.window?.happyDOM?.abort?.();
       for (const image of page.decodedImages) image.delete();
@@ -2497,9 +2533,10 @@ function buildPageRenderer({
       }, () => {
         // A failed stylesheet must not prevent the document itself from loading.
       }).then(() => {
-        if (entry.text === null || document !== page.document || linkSheets.get(element) !== entry) return;
+        if (document !== page.document || linkSheets.get(element) !== entry) return;
         page.dirty = true;
         scheduleFrame();
+        element.dispatchEvent(new page.window.Event(entry.text === null ? "error" : "load"));
       });
       pending?.push(request);
     }
@@ -2522,20 +2559,23 @@ function buildPageRenderer({
     await Promise.all([...document.querySelectorAll("img")].map(async (element) => {
       const src = element.getAttribute("src");
       if (!src) return;
+      beginImageLoad(element, src);
       try {
         const response = await fetchResource(new URL(src, documentUrl).href, "image");
-        if (!response.ok) return;
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
         // Untrusted image bytes are decoded here, inside the renderer.
         const bytes = response.body;
         const { width, height } = await new Bun.Image(bytes).metadata();
         const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) return;
+        if (!image) throw new Error("Image decoding failed");
         const resource = Object.freeze({ width, height, image, url: response.url });
+        finishImageLoad(element, src, resource);
         map.set(element, resource);
         decoded.push(image);
         entries.push({ element, src, resource });
       } catch {
         // Broken images keep their fallback replaced-element dimensions.
+        finishImageLoad(element, src, null);
       }
     }));
     return { map, decoded, entries };
@@ -3135,10 +3175,88 @@ function buildPageRenderer({
 
   /** The control bar and frame redraw without a relayout. */
   function repaintMedia() {
+    // The compositor replaces this video's pixels independently. Page changes
+    // still repaint normally; native controls get their periodic time update.
+    if ([...page.media.values()].some(state => state.video?.presentation && state.playing)
+      && !page.dirty && !page.needsPaint) return;
     rasterized.list = null;
     render();
   }
 
+  function stopVideoPresentation(state) {
+    const presentation = state.video?.presentation;
+    if (!presentation) return;
+    readPresentedFrame(state);
+    onVideo?.({ type: "video-stop", id: presentation.id });
+    state.video.presentation = null;
+    state.video.needsLocalPosition = true;
+  }
+
+  function readPresentedFrame(state) {
+    const p = state.video?.presentation;
+    if (!p) return;
+    const meta = new Int32Array(p.shared, 0, 4);
+    const serial = Atomics.load(meta, 0);
+    if (serial % 2 || !serial || serial === p.serial) return;
+    const width = Atomics.load(meta, 1), height = Atomics.load(meta, 2);
+    if (width < 1 || height < 1 || width * height > 480 * 480) return;
+    const pixels = new Uint8Array(p.shared, 16, width * height * 4).slice();
+    if (serial !== Atomics.load(meta, 0)) return;
+    const image = CanvasKit.MakeImage({ width, height, alphaType: CanvasKit.AlphaType.Unpremul,
+      colorType: CanvasKit.ColorType.RGBA_8888, colorSpace: CanvasKit.ColorSpace.SRGB }, pixels, width * 4);
+    if (!image) return;
+    state.resource.image?.delete();
+    Object.assign(state.resource, { image, bitmapWidth: width, bitmapHeight: height });
+    p.serial = serial;
+  }
+
+  function makeVideoLayer(canvas, surface, region, scale, width, height) {
+    if (!onVideo) return null;
+    const items = [...visibleItems(page.displayList, region, viewport)].filter(item => item.op === "drawVideo");
+    const item = items.length === 1 ? items[0] : null;
+    const resource = item && page.displayList.images[item.image];
+    const state = [...page.media.values()].find(state => state.resource === resource);
+    const eligible = state?.playing && state.video && !state.video.done && !state.buffering
+      && !state.presentationFailed && !item.controls && !item.fixed
+      && (!item.transform || (item.transform.a > 0 && item.transform.d > 0));
+    for (const other of page.media.values()) if (!eligible || other !== state) stopVideoPresentation(other);
+    if (!eligible) return null;
+    const video = state.video;
+    if (!video.presentation) {
+      const id = nextVideoPresentation++;
+      const shared = new SharedArrayBuffer(16 + 480 * 480 * 4);
+      video.presentation = { id, shared, serial: 0 };
+      onVideo({ type: "video-open", id, shared, bytes: snapshot(video.pipe, state.bytes),
+        options: decodeOptions(state.videoMime || state.contentType, state.url), time: mediaTime(state),
+        hasAudio: state.hasAudio, audioId: state.sound?.id ?? null,
+        audioStart: state.sound ? state.sound.streamStart / state.sound.decoder.sampleRate : 0 });
+    }
+    const rect = { ...item.rect };
+    if (item.transform) {
+      rect.x = rect.x * item.transform.a + item.transform.e;
+      rect.y = rect.y * item.transform.d + item.transform.f;
+      rect.width *= item.transform.a;
+      rect.height *= item.transform.d;
+    }
+    const raster = white => {
+      canvas.clear(canvasColor(CanvasKit, page.backgroundColor));
+      paintDisplayList(canvas, page.displayList, region, scale, { resource, white });
+      drawHints(canvas, region);
+      surface.flush();
+      const image = surface.makeImageSnapshot();
+      const pixels = image.readPixels(0, 0, { width, height, colorType: CanvasKit.ColorType.RGBA_8888,
+        alphaType: CanvasKit.AlphaType.Unpremul, colorSpace: CanvasKit.ColorSpace.SRGB });
+      image.delete();
+      return pixels;
+    };
+    const base = raster(false), mask = raster(true);
+    for (let i = 0; i < mask.length; i++) mask[i] = Math.max(0, mask[i] - base[i]);
+    return { id: video.presentation.id, base, mask, rect: {
+      x: Math.round((rect.x - region.x) * scale), y: Math.round((rect.y - region.y) * scale),
+      width: Math.round(rect.width * scale), height: Math.round(rect.height * scale),
+    } };
+  }
+
   function isPipe(value) {
     return Boolean(value && typeof value.waitFor === "function" && typeof value.bytes === "function");
   }
@@ -3318,6 +3436,7 @@ function buildPageRenderer({
   }
 
   async function openVideoDecoder(state) {
+    stopVideoPresentation(state);
     const pipe = state.videoPipe ?? state.pipe;
     const generation = pipe?.generation ?? 0;
     const bytes = snapshot(pipe, state.bytes);
@@ -3462,6 +3581,7 @@ function buildPageRenderer({
     if (!state || state.playing) return;
     state.error = null;
     setMediaPlaying(state, true);
+    playbackEvent(state, "play", mediaEvent);
     try {
       await loadMedia(state);
       if (state.ended) {
@@ -3484,7 +3604,6 @@ function buildPageRenderer({
       return;
     }
     startMedia(state);
-    mediaEvent(state, "play");
   }
 
   function pauseMedia(element) {
@@ -3495,7 +3614,7 @@ function buildPageRenderer({
     stopClock(state);
     state.needsPosition = true;
     setMediaPlaying(state, false);
-    mediaEvent(state, "pause");
+    playbackEvent(state, "pause", mediaEvent);
   }
 
   async function seekMedia(element, seconds) {
@@ -3598,6 +3717,8 @@ function buildPageRenderer({
 
   /** Starts the clock, the audio stream and the frame/time ticks. */
   function startMedia(state) {
+    hostClearTimeout(state.timer);
+    state.timer = null;
     // An output stream held through a stall (see refillMedia) is already
     // open: the clock goes on from where its audio is, and what it asked for
     // meanwhile is sent now.
@@ -3642,6 +3763,7 @@ function buildPageRenderer({
   }
 
   function stopClock(state, { keepAudio = false } = {}) {
+    stopVideoPresentation(state);
     hostClearTimeout(state.timer);
     state.timer = null;
     state.clockStart = null;
@@ -3680,7 +3802,18 @@ function buildPageRenderer({
     if (!state.playing || state.generation !== loadGeneration || state.document !== page.document) return;
     const now = mediaTime(state);
     const video = state.video;
-    if (video && !video.done && video.frameTime <= now) {
+    if (video?.needsLocalPosition && !video.presentation && !video.done) {
+      try {
+        video.frameTime = seekToKeyframe(video.decoder, now);
+        video.hideUntil = now;
+        video.needsLocalPosition = false;
+      } catch (error) { failMedia(state, error, 3); return; }
+    }
+    if (video?.presentation) {
+      // Decode and present on the compositor thread. This tick only updates
+      // DOM media state; it must not decode the same movie a second time.
+      video.frameTime = now + 1 / (video.decoder.fps || 30);
+    } else if (video && !video.done && video.frameTime <= now) {
       // Late frames are decoded but only the newest is shown.
       const decodeDeadline = hostPerformance.now() + 100;
       while (video.frameTime <= mediaTime(state) && !video.done) {
@@ -3713,6 +3846,10 @@ function buildPageRenderer({
       }
     }
     state.resource.time = now;
+    if (!state.buffering && !state.awaitingAudio) {
+      playbackEvent(state, "playing", mediaEvent);
+      if (!state.playing) return;
+    }
     repaintMedia();
     if (Math.floor(now * 4) !== state.lastTimeUpdate) {
       state.lastTimeUpdate = Math.floor(now * 4);
@@ -3796,7 +3933,8 @@ function buildPageRenderer({
         if (!state.lastSyncTrace || now - state.lastSyncTrace >= 1000) {
           state.lastSyncTrace = now;
           trace?.(`media sync: audio played ${sound.playedTime.toFixed(3)}s, video shown ${(state.video?.shownTime ?? 0).toFixed(3)}s,`
-            + ` output queued ${Math.max(0, event.sentSeconds - event.seconds).toFixed(3)}s, sink ${Number(event.sinkSeconds ?? 0).toFixed(3)}s`);
+            + ` output queued ${Math.max(0, event.sentSeconds - event.seconds).toFixed(3)}s, sink ${Number(event.sinkSeconds ?? 0).toFixed(3)}s`
+            + `, PCM reserve ${Number(event.bufferedSeconds ?? 0).toFixed(3)}s`);
         }
       } else if (event.event === "timing-error") {
         // Do not silently switch to a free-running clock on missing feedback.
@@ -3830,6 +3968,8 @@ function buildPageRenderer({
       }
     });
     sound.id = id;
+    if (state.video?.presentation) onVideo?.({ type: "video-bind", id: state.video.presentation.id,
+      audioId: id, audioStart: sound.streamStart / sound.decoder.sampleRate, time: mediaTime(state) });
   }
 
   /** Sends about `bytes` of s16le audio (pending samples first, then decoding); at the end, lets it drain. */
@@ -3838,7 +3978,7 @@ function buildPageRenderer({
     if (!state.playing || sound.id === null || sound.finishing) return;
     // While buffering the output plays what it holds and then nothing, as
     // the video waits; what it asks for is sent when playing resumes.
-    if (state.buffering || state.audioPositioning) {
+    if (state.buffering || state.refilling || state.audioPositioning) {
       sound.owed = (sound.owed ?? 0) + bytes;
       return;
     }
@@ -3918,42 +4058,7 @@ function buildPageRenderer({
    * frame). The frames from there to the clock are then decoded unshown.
    */
   function seekToKeyframe(decoder, seconds) {
-    // wasmpeg fails a seek to 0 once frames were decoded; 1 ms reaches the
-    // first keyframe as well.
-    const seek = (time) => decoder.seek(Math.max(1, time * 1000));
-    const frame = 1 / (decoder.fps || 30);
-    if (!(seconds >= frame)) {
-      seek(0);
-      return 0;
-    }
-    const probe = (time) => {
-      seek(time);
-      return pictureKey(decoder.nextFrame(KEYFRAME_PROBE_WIDTH, KEYFRAME_PROBE_HEIGHT));
-    };
-    const target = probe(seconds);
-    let keyframe = seconds;
-    if (target !== null) {
-      let earlier = Math.max(0, seconds - KEYFRAME_SEARCH_SECONDS);
-      if (earlier > 0 && probe(earlier) !== target) {
-        // The keyframe lies in (earlier, keyframe]: narrow it to a frame.
-        while (keyframe - earlier > frame) {
-          const middle = (earlier + keyframe) / 2;
-          if (probe(middle) === target) keyframe = middle;
-          else earlier = middle;
-        }
-      } else {
-        keyframe = earlier;
-      }
-    }
-    seek(keyframe);
-    return keyframe;
-  }
-
-  function pictureKey(pixels) {
-    if (!pixels) return null;
-    let hash = 0x811c9dc5;
-    for (let index = 0; index < pixels.length; index += 3) hash = Math.imul(hash ^ pixels[index], 0x01000193);
-    return hash >>> 0;
+    return seekVideoKeyframe(decoder, seconds);
   }
 
   /**
@@ -3963,17 +4068,33 @@ function buildPageRenderer({
    * new snapshot. The reported output cursor remains the A/V master clock.
    */
   function refillMedia(state, stalledTrack = null) {
-    if (state.refilling) return state.refilling;
+    if (state.refilling) {
+      // An audio prefetch may already be waiting for a later segment. If the
+      // picture catches its own end meanwhile, it really must wait too.
+      if (stalledTrack === state.video && !state.buffering) {
+        state.buffering = true;
+        stopClock(state, { keepAudio: true });
+        if (state.playing) playbackEvent(state, "waiting", mediaEvent);
+      }
+      return state.refilling;
+    }
     const serial = state.seekSerial;
-    state.buffering = true;
     state.base = mediaTime(state);
     // The audio output stays open through a stall: it plays the PCM it holds
     // and then runs dry, and playing resumes right after that PCM. Closing
     // and reopening it instead loses track of what was heard (a closed
     // stream may still play out its device buffer, which then plays twice).
     const holdAudio = Boolean(stalledTrack && state.sound && state.sound.id != null && !state.sound.finishing);
+    // PCM prefetch reaches the end of a snapshot ahead of actual playback.
+    // Keep presenting video against measured audio while the controller plays
+    // its reserve; a decoder needing bytes is not itself an output underrun.
+    const prefetch = holdAudio && stalledTrack === state.sound;
+    state.buffering = !prefetch;
     const stall = { at: hostPerformance.now(), base: state.base };
-    stopClock(state, { keepAudio: holdAudio });
+    if (!prefetch) {
+      stopClock(state, { keepAudio: holdAudio });
+      if (state.playing) playbackEvent(state, "waiting", mediaEvent);
+    }
     // The first await lets `job` be assigned before the body looks at it,
     // so a stall inside startMedia can begin a new refill.
     const job = (async () => {
@@ -4078,7 +4199,7 @@ function buildPageRenderer({
     state.ended = true;
     state.base = Number.isFinite(state.duration) ? state.duration : state.base;
     setMediaPlaying(state, false);
-    mediaEvent(state, "pause");
+    playbackEvent(state, "pause", mediaEvent);
     mediaEvent(state, "ended");
   }
 
@@ -4187,18 +4308,20 @@ function buildPageRenderer({
       const oldImage = page.resources.get(element)?.image;
       if (oldImage) staleImages.push(oldImage);
       page.resources.delete(element);
+      beginImageLoad(element, src);
       fetchResource(url, "image").then(async (response) => {
-        if (!response.ok) return;
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
         const bytes = response.body;
         const { width, height } = await new Bun.Image(bytes).metadata();
         const image = CanvasKit.MakeImageFromEncoded(bytes);
-        if (!image) return;
+        if (!image) throw new Error("Image decoding failed");
         if (generation !== loadGeneration || document !== page.document || element.getAttribute("src") !== src) {
           image.delete();
           return;
         }
         page.resources.set(element, Object.freeze({ width, height, image, url: response.url }));
         page.decodedImages.push(image);
+        finishImageLoad(element, src, { width, height }, type => element.dispatchEvent(new page.window.Event(type)));
         const node = [...page.renderTree.nodesById.values()].find((candidate) => candidate.domNode === element);
         const run = page.layout.fragments.flatMap((fragment) => fragment.runs)
           .find((candidate) => candidate.type === "image" && candidate.nodeId === node?.id);
@@ -4219,8 +4342,12 @@ function buildPageRenderer({
           page.resourceLayoutDirty = true;
         }
         refresh();
-      }).catch(() => {
+      }).catch((error) => {
         // A failed image retains its fallback replaced-element dimensions.
+        trace?.(`image failed ${url}: ${error?.message ?? error}`);
+        if (generation === loadGeneration && document === page.document) {
+          finishImageLoad(element, src, null, type => element.dispatchEvent(new page.window.Event(type)));
+        }
       });
     }
     return staleImages;

package/lib/renderer/piano-input.js

@@ -0,0 +1,22 @@
+import { pianoNote } from "../audio/piano.js";
+
+// Keep a real editable input so mobile keyboards can open, but consume piano
+// input before text editing. Terminals and IMEs may commit several keys at once.
+export function handlePianoInput(element, input, play) {
+  if (element?.getAttribute?.("id") !== "buninu-piano-input" || element.disabled || element.readOnly) return false;
+  // CDP key events also carry text (often "" on rawKeyDown). Only a text-only
+  // commit belongs here; otherwise use key/code, including Space and F1–F12.
+  if (input.key === undefined && input.text !== undefined) {
+    for (const key of String(input.text)) {
+      const note = pianoNote(key);
+      if (note !== null) play?.(note);
+    }
+    return true;
+  }
+  const note = pianoNote(String(input.key), String(input.code ?? ""));
+  if (note === null) return false;
+  // Suppressing text insertion must not depend on whether a note is retriggered
+  // or an audio backend is available. Shift still selects a physical piano key.
+  if (!input.repeat && !(Number(input.modifiers) & 7)) play?.(note);
+  return true;
+}

package/lib/renderer/pointer-move.js

@@ -0,0 +1,29 @@
+const previousTargets = new WeakMap();
+
+/** Deliver pointer/mouse boundary events before movement, as a real pointer does. */
+export function dispatchPointerMove(window, realm, target, x, y) {
+  const document = window.document;
+  const previous = previousTargets.get(document) ?? null;
+  previousTargets.set(document, target);
+  const ancestors = node => { const list = []; for (; node?.nodeType === 1; node = node.parentElement) list.push(node); return list; };
+  const before = ancestors(previous), after = ancestors(target);
+  const send = (node, type, relatedTarget, bubbles = true) => {
+    if (!node) return;
+    const pointer = type.startsWith('pointer');
+    const Constructor = pointer ? window.PointerEvent : window.MouseEvent;
+    const event = new Constructor(type, { clientX: x, clientY: y, relatedTarget, bubbles,
+      composed: bubbles, cancelable: bubbles, button: pointer ? -1 : 0, buttons: 0,
+      pointerId: 1, pointerType: 'mouse', isPrimary: true });
+    if (realm) realm.dispatch(node, event); else node.dispatchEvent(event);
+  };
+  if (previous !== target) {
+    for (const prefix of ['pointer', 'mouse']) {
+      send(previous, `${prefix}out`, target);
+      for (const node of before) if (!after.includes(node)) send(node, `${prefix}leave`, target, false);
+      send(target, `${prefix}over`, previous);
+      for (const node of after.toReversed()) if (!before.includes(node)) send(node, `${prefix}enter`, previous, false);
+    }
+  }
+  send(target, 'pointermove', null);
+  send(target, 'mousemove', null);
+}