@hyperframes/engine 0.6.119 → 0.6.121

package/src/services/videoFrameInjector.ts

@@ -1,687 +0,0 @@
-/**
- * Video Frame Injector
- *
- * Creates a BeforeCaptureHook that replaces native <video> elements with
- * pre-extracted frame images during rendering. This is the Hyperframes-specific
- * video handling strategy — OSS users with different video pipelines can
- * provide their own hook or skip video injection entirely.
- */
-
-import { type Page } from "puppeteer-core";
-import { promises as fs } from "fs";
-import { type FrameLookupTable } from "./videoFrameExtractor.js";
-import { injectVideoFramesBatch, syncVideoFrameVisibility } from "./screenshotService.js";
-import { type BeforeCaptureHook } from "./frameCapture.js";
-import { DEFAULT_CONFIG, type EngineConfig } from "../config.js";
-
-export interface VideoFrameInjectorOptions extends Partial<
-  Pick<EngineConfig, "frameDataUriCacheLimit" | "frameDataUriCacheBytesLimitMb">
-> {
-  frameSrcResolver?: (framePath: string) => string | null;
-}
-
-interface FrameSourceCacheStats {
-  entries: number;
-  bytes: number;
-  /** Total entries evicted since cache creation. A high count vs a small
-   * composition signals the byte budget is too tight (cache thrash). */
-  evictions: number;
-  /** Total inserts rejected because the entry alone exceeds bytesLimit.
-   * Non-zero means a single frame is bigger than the configured budget —
-   * raise `frameDataUriCacheBytesLimitMb` if it recurs in production. */
-  oversizedRejections: number;
-}
-
-interface FrameSourceCache {
-  get: (framePath: string) => Promise<string>;
-  /** Exposed for tests + telemetry; reflects current cache occupancy. */
-  stats: () => FrameSourceCacheStats;
-}
-
-/**
- * Two-bound LRU keyed by frame path. Either bound triggers eviction of the
- * oldest entry — entry count protects against pathological many-tiny-frames
- * cases, and the byte budget keeps memory bounded when the per-frame data
- * URI grows (4K PNG frames are ~33 MB once base64-encoded).
- *
- * If a single entry's data URI exceeds `bytesLimit`, we skip caching it
- * (returning the URI directly to the caller). Without this guard, the
- * post-insert eviction loop would drop the entry we just inserted and the
- * cache would degrade into a CPU hot path — every subsequent `get()` would
- * re-read from disk and re-base64 the same frame.
- *
- * **Invariant**: cached values MUST be strings whose `.length` equals the
- * byte count we account for at insertion. We derive size on demand via
- * `cache.get(key)?.length` rather than maintaining a parallel `Map<string, number>`.
- * If you ever wrap the value (e.g. cache a Buffer or an object), the byte
- * accounting silently breaks — switch to a parallel size map first.
- */
-function createFrameSourceCache(
-  entryLimit: number,
-  bytesLimit: number,
-  frameSrcResolver?: (framePath: string) => string | null,
-): FrameSourceCache {
-  const cache = new Map<string, string>();
-  const inFlight = new Map<string, Promise<string>>();
-  let totalBytes = 0;
-  let evictions = 0;
-  let oversizedRejections = 0;
-
-  function evictOldest(): void {
-    const oldestKey = cache.keys().next().value;
-    if (!oldestKey) return;
-    // Snapshot the value before deleting so the byte-size derivation can't
-    // accidentally read post-delete (a future reorder would silently lose
-    // accounting and surface as `totalBytes` drifting out of sync).
-    const dropped = cache.get(oldestKey);
-    cache.delete(oldestKey);
-    totalBytes = Math.max(0, totalBytes - (dropped?.length ?? 0));
-    evictions++;
-  }
-
-  function remember(framePath: string, dataUri: string): string {
-    // Skip caching entries that alone exceed the byte budget. Caching them
-    // would trigger immediate self-eviction on insert and pollute LRU order
-    // by displacing the previous entry's slot.
-    if (dataUri.length > bytesLimit) {
-      oversizedRejections++;
-      // Drop any stale prior version so the caller sees consistent state.
-      if (cache.has(framePath)) {
-        totalBytes = Math.max(0, totalBytes - (cache.get(framePath)?.length ?? 0));
-        cache.delete(framePath);
-      }
-      return dataUri;
-    }
-    if (cache.has(framePath)) {
-      totalBytes = Math.max(0, totalBytes - (cache.get(framePath)?.length ?? 0));
-      cache.delete(framePath);
-    }
-    cache.set(framePath, dataUri);
-    totalBytes += dataUri.length;
-    while ((cache.size > entryLimit || totalBytes > bytesLimit) && cache.size > 0) {
-      evictOldest();
-    }
-    return dataUri;
-  }
-
-  async function get(framePath: string): Promise<string> {
-    const servedSrc = frameSrcResolver?.(framePath);
-    if (servedSrc) return servedSrc;
-
-    const cached = cache.get(framePath);
-    if (cached) {
-      remember(framePath, cached);
-      return cached;
-    }
-
-    const existing = inFlight.get(framePath);
-    if (existing) {
-      return existing;
-    }
-
-    const pending = fs
-      .readFile(framePath)
-      .then((frameData) => {
-        const mimeType = framePath.endsWith(".png") ? "image/png" : "image/jpeg";
-        const dataUri = `data:${mimeType};base64,${frameData.toString("base64")}`;
-        return remember(framePath, dataUri);
-      })
-      .finally(() => {
-        inFlight.delete(framePath);
-      });
-    inFlight.set(framePath, pending);
-    return pending;
-  }
-
-  return {
-    get,
-    stats: () => ({
-      entries: cache.size,
-      bytes: totalBytes,
-      evictions,
-      oversizedRejections,
-    }),
-  };
-}
-
-export const __testing = { createFrameSourceCache };
-
-async function redrawRuntimeColorGrading(page: Page): Promise<void> {
-  await page.evaluate(() => {
-    const hf = (
-      window as Window & {
-        __hf?: {
-          colorGrading?: { redraw?: () => unknown };
-        };
-      }
-    ).__hf;
-    const redraw = hf?.colorGrading?.redraw;
-    if (typeof redraw !== "function") return;
-    try {
-      redraw();
-    } catch {
-      // Optional page-side shader layer.
-    }
-  });
-}
-
-/**
- * Creates a BeforeCaptureHook that injects pre-extracted video frames
- * into the page, replacing native <video> elements with frame images.
- */
-export function createVideoFrameInjector(
-  frameLookup: FrameLookupTable | null,
-  config?: VideoFrameInjectorOptions,
-): BeforeCaptureHook | null {
-  if (!frameLookup) return null;
-
-  const entryLimit = Math.max(
-    32,
-    config?.frameDataUriCacheLimit ?? DEFAULT_CONFIG.frameDataUriCacheLimit,
-  );
-  const bytesLimitMb = Math.max(
-    64,
-    config?.frameDataUriCacheBytesLimitMb ?? DEFAULT_CONFIG.frameDataUriCacheBytesLimitMb,
-  );
-  const bytesLimit = bytesLimitMb * 1024 * 1024;
-  const frameCache = createFrameSourceCache(entryLimit, bytesLimit, config?.frameSrcResolver);
-  const lastInjectedFrameByVideo = new Map<string, number>();
-
-  return async (page: Page, time: number) => {
-    const activePayloads = frameLookup.getActiveFramePayloads(time);
-
-    const updates: Array<{ videoId: string; dataUri: string; frameIndex: number }> = [];
-    const activeIds = new Set<string>();
-    if (activePayloads.size > 0) {
-      const pendingReads: Array<Promise<{ videoId: string; dataUri: string; frameIndex: number }>> =
-        [];
-      for (const [videoId, payload] of activePayloads) {
-        activeIds.add(videoId);
-        const lastFrameIndex = lastInjectedFrameByVideo.get(videoId);
-        if (lastFrameIndex === payload.frameIndex) continue;
-        pendingReads.push(
-          frameCache
-            .get(payload.framePath)
-            .then((dataUri) => ({ videoId, dataUri, frameIndex: payload.frameIndex })),
-        );
-      }
-      updates.push(...(await Promise.all(pendingReads)));
-    }
-
-    for (const videoId of Array.from(lastInjectedFrameByVideo.keys())) {
-      if (!activeIds.has(videoId)) {
-        lastInjectedFrameByVideo.delete(videoId);
-      }
-    }
-
-    await syncVideoFrameVisibility(page, Array.from(activeIds));
-    if (updates.length > 0) {
-      // Only record cache entries for videos the page actually painted.
-      // injectVideoFramesBatch skips any video whose visual ancestor is
-      // hidden (sub-comp host out-of-window) and returns the subset of ids
-      // it really wrote — recording the rest would short-circuit the next
-      // call at the same frameIndex and leave the host's first visible
-      // frame blank.
-      const injectedIds = new Set(
-        await injectVideoFramesBatch(
-          page,
-          updates.map((u) => ({ videoId: u.videoId, dataUri: u.dataUri })),
-        ),
-      );
-      for (const update of updates) {
-        if (injectedIds.has(update.videoId)) {
-          lastInjectedFrameByVideo.set(update.videoId, update.frameIndex);
-        }
-      }
-      if (injectedIds.size > 0) {
-        // GPU compositions (WebGL / WebGPU) that sample these videos as
-        // textures already rendered once on the pre-injection seek, reading a
-        // stale/black frame. Now that the decoded `__render_frame__` images are
-        // in the DOM, re-render the GPU adapters at the same time so they
-        // re-upload their video textures from the correct frame. No-op in
-        // compositions without a GPU adapter.
-        await page.evaluate((t: number) => {
-          (window as unknown as { __hfReseekGpu?: (n: number) => void }).__hfReseekGpu?.(t);
-        }, time);
-      }
-    }
-    await redrawRuntimeColorGrading(page);
-  };
-}
-
-// ── HDR compositing utilities ─────────────────────────────────────────────────
-
-/**
- * Bounds and transform of a video element, queried from Chrome each frame.
- * Used by the two-pass HDR compositing pipeline to position native HDR frames.
- */
-export interface VideoElementBounds {
-  videoId: string;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  opacity: number;
-  /** CSS transform matrix as a DOMMatrix-compatible string, e.g. "matrix(1,0,0,1,0,0)" */
-  transform: string;
-  zIndex: number;
-  visible: boolean;
-}
-
-/**
- * Hide specific video elements by ID. Used in Pass 1 of the HDR pipeline so
- * Chrome screenshots only contain DOM content (text, overlays) with transparent
- * holes where the HDR videos go.
- */
-export async function hideVideoElements(page: Page, videoIds: string[]): Promise<void> {
-  if (videoIds.length === 0) return;
-  await page.evaluate((ids: string[]) => {
-    for (const id of ids) {
-      const el = document.getElementById(id) as HTMLVideoElement | null;
-      if (el) {
-        el.style.setProperty("visibility", "hidden", "important");
-        const img = document.getElementById(`__render_frame_${id}__`);
-        if (img) img.style.setProperty("visibility", "hidden", "important");
-      }
-    }
-  }, videoIds);
-}
-
-/**
- * Restore visibility of video elements after a DOM screenshot.
- */
-export async function showVideoElements(page: Page, videoIds: string[]): Promise<void> {
-  if (videoIds.length === 0) return;
-  await page.evaluate((ids: string[]) => {
-    for (const id of ids) {
-      const el = document.getElementById(id) as HTMLVideoElement | null;
-      if (el) {
-        el.style.removeProperty("visibility");
-        const img = document.getElementById(`__render_frame_${id}__`);
-        if (img) img.style.removeProperty("visibility");
-      }
-    }
-  }, videoIds);
-}
-
-/**
- * Query the current bounds, transform, and visibility of video elements.
- * Called after seeking (so GSAP has moved things) but before the screenshot.
- */
-export async function queryVideoElementBounds(
-  page: Page,
-  videoIds: string[],
-): Promise<VideoElementBounds[]> {
-  if (videoIds.length === 0) return [];
-  return page.evaluate((ids: string[]): VideoElementBounds[] => {
-    return ids.map((id) => {
-      const el = document.getElementById(id) as HTMLVideoElement | null;
-      if (!el) {
-        return {
-          videoId: id,
-          x: 0,
-          y: 0,
-          width: 0,
-          height: 0,
-          opacity: 0,
-          transform: "none",
-          zIndex: 0,
-          visible: false,
-        };
-      }
-      const rect = el.getBoundingClientRect();
-      const style = window.getComputedStyle(el);
-      const zIndexParsed = parseInt(style.zIndex);
-      const zIndex = Number.isNaN(zIndexParsed) ? 0 : zIndexParsed;
-      const opacityParsed = parseFloat(style.opacity);
-      const opacity = Number.isNaN(opacityParsed) ? 1 : opacityParsed;
-      const transform = style.transform || "none";
-      const visible =
-        style.visibility !== "hidden" &&
-        style.display !== "none" &&
-        rect.width > 0 &&
-        rect.height > 0;
-      return {
-        videoId: id,
-        x: Math.round(rect.x),
-        y: Math.round(rect.y),
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        opacity,
-        transform,
-        zIndex,
-        visible,
-      };
-    });
-  }, videoIds);
-}
-
-/**
- * Stacking info for a single timed element, used by the z-ordered layer compositor.
- */
-export interface ElementStackingInfo {
-  id: string;
-  zIndex: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  /** Layout dimensions before CSS transforms (offsetWidth/offsetHeight). */
-  layoutWidth: number;
-  layoutHeight: number;
-  opacity: number;
-  visible: boolean;
-  isHdr: boolean;
-  transform: string; // CSS transform matrix string, e.g. "matrix(1,0,0,1,0,0)" or "none"
-  borderRadius: [number, number, number, number]; // [tl, tr, br, bl] in CSS px from nearest clipping ancestor
-  /**
-   * CSS `object-fit` value for replaced elements (`<img>`, `<video>`).
-   * One of: `fill` (default), `cover`, `contain`, `none`, `scale-down`.
-   * The HDR compositor uses this to resample image/video buffers into the
-   * element's layout box the same way the browser would.
-   */
-  objectFit: string;
-  /**
-   * CSS `object-position` value (e.g. `"50% 50%"`, `"center top"`).
-   * Falls back to the CSS default `"50% 50%"` (center) when unset.
-   */
-  objectPosition: string;
-  /**
-   * Clip rect from the nearest ancestor with `overflow: hidden` (or
-   * `clip`/`clip-path`). When set, the HDR compositor must scissor the
-   * element's blit to this viewport-relative rectangle. `null` means no
-   * clipping ancestor was found — render at full element bounds.
-   */
-  clipRect: { x: number; y: number; width: number; height: number } | null;
-}
-
-/**
- * Query Chrome for ALL timed elements' stacking context.
- * Returns z-index, bounds, opacity, and whether each element is a native HDR source.
- *
- * Queries every element with `data-start` (not just videos) so the layer compositor
- * can determine z-ordering between DOM content and HDR video/image elements.
- *
- * @param nativeHdrIds Combined set of HDR-tagged element IDs (videos AND images).
- */
-export async function queryElementStacking(
-  page: Page,
-  nativeHdrIds: Set<string>,
-): Promise<ElementStackingInfo[]> {
-  const hdrIds = Array.from(nativeHdrIds);
-  return page.evaluate((hdrIdList: string[]): ElementStackingInfo[] => {
-    const hdrSet = new Set(hdrIdList);
-    const elements = document.querySelectorAll("[data-start]");
-    const results: ElementStackingInfo[] = [];
-
-    // Walk up the DOM to find the effective z-index from the nearest
-    // positioned ancestor with a z-index. CSS z-index only applies to
-    // positioned elements; video elements inside positioned wrappers
-    // inherit the wrapper's stacking context.
-    //
-    // ## Supported subset
-    //
-    // This implementation looks for explicit `z-index` on positioned
-    // (non-static) ancestors. It does NOT detect the CSS stacking contexts
-    // created implicitly by other properties — including `opacity < 1`,
-    // `transform`, `filter`, `will-change`, `isolation: isolate`, and
-    // `mix-blend-mode`. GSAP routinely sets `transform` on wrappers, which
-    // creates an implicit stacking context with auto z-index; an HDR video
-    // inside such a wrapper with no explicit z-index will return the
-    // wrapper-of-the-wrapper's z-index here, potentially reordering layers
-    // incorrectly relative to sibling stacking contexts.
-    //
-    // The workaround is to set explicit `z-index` on the positioned wrapper
-    // when you want it treated as a compositing layer root. This matches
-    // what compositions need to do anyway for deterministic z-ordering.
-    function getEffectiveZIndex(node: Element): number {
-      let current: Element | null = node;
-      while (current) {
-        const cs = window.getComputedStyle(current);
-        const pos = cs.position;
-        const z = parseInt(cs.zIndex);
-        if (!Number.isNaN(z) && pos !== "static") return z;
-        current = current.parentElement;
-      }
-      return 0;
-    }
-
-    // Find border-radius that clips the element. Replaced elements like <video>
-    // clip to their own border-radius; ancestors need overflow !== visible.
-    function getEffectiveBorderRadius(node: Element): [number, number, number, number] {
-      // Resolve a CSS border-radius value to pixels. Chrome's getComputedStyle
-      // returns percentages as-is (e.g. "50%"), not resolved to px.
-      // Uses offsetWidth/offsetHeight (layout dimensions before CSS transforms)
-      // because CSS resolves percentages against the padding box, not the
-      // transformed bounding box.
-      function resolveRadius(value: string, el: Element): number {
-        if (value.includes("%")) {
-          const pct = parseFloat(value) / 100;
-          const w = el instanceof HTMLElement ? el.offsetWidth : 0;
-          const h = el instanceof HTMLElement ? el.offsetHeight : 0;
-          return pct * Math.min(w, h);
-        }
-        const parsed = parseFloat(value);
-        return Number.isNaN(parsed) ? 0 : parsed;
-      }
-
-      // Check element itself (replaced elements clip to own border-radius)
-      const selfCs = window.getComputedStyle(node);
-      const selfRadii: [number, number, number, number] = [
-        resolveRadius(selfCs.borderTopLeftRadius, node),
-        resolveRadius(selfCs.borderTopRightRadius, node),
-        resolveRadius(selfCs.borderBottomRightRadius, node),
-        resolveRadius(selfCs.borderBottomLeftRadius, node),
-      ];
-      if (selfRadii[0] > 0 || selfRadii[1] > 0 || selfRadii[2] > 0 || selfRadii[3] > 0) {
-        return selfRadii;
-      }
-
-      // Walk ancestors looking for clipping container
-      let current: Element | null = node.parentElement;
-      while (current) {
-        const cs = window.getComputedStyle(current);
-        if (cs.overflow !== "visible") {
-          const tl = resolveRadius(cs.borderTopLeftRadius, current);
-          const tr = resolveRadius(cs.borderTopRightRadius, current);
-          const brr = resolveRadius(cs.borderBottomRightRadius, current);
-          const bl = resolveRadius(cs.borderBottomLeftRadius, current);
-          if (tl > 0 || tr > 0 || brr > 0 || bl > 0) {
-            return [tl, tr, brr, bl];
-          }
-        }
-        current = current.parentElement;
-      }
-      return [0, 0, 0, 0];
-    }
-
-    // Walk ancestors to find the tightest overflow:hidden clip rect.
-    // Returns null if no clipping ancestor exists.
-    function getClipRect(
-      node: Element,
-    ): { x: number; y: number; width: number; height: number } | null {
-      let current: Element | null = node.parentElement;
-      let clip: { x: number; y: number; width: number; height: number } | null = null;
-      while (current) {
-        const cs = window.getComputedStyle(current);
-        if (cs.overflow === "hidden" || cs.overflow === "clip") {
-          const r = current.getBoundingClientRect();
-          const ancestor = {
-            x: Math.round(r.x),
-            y: Math.round(r.y),
-            width: Math.round(r.width),
-            height: Math.round(r.height),
-          };
-          if (!clip) {
-            clip = ancestor;
-          } else {
-            // Intersect with existing clip
-            const x1 = Math.max(clip.x, ancestor.x);
-            const y1 = Math.max(clip.y, ancestor.y);
-            const x2 = Math.min(clip.x + clip.width, ancestor.x + ancestor.width);
-            const y2 = Math.min(clip.y + clip.height, ancestor.y + ancestor.height);
-            clip = { x: x1, y: y1, width: Math.max(0, x2 - x1), height: Math.max(0, y2 - y1) };
-          }
-        }
-        current = current.parentElement;
-      }
-      return clip;
-    }
-
-    // Walk up the DOM multiplying each ancestor's opacity. GSAP animates
-    // opacity on wrapper divs, not directly on the video element, so the
-    // element's own opacity is often 1.0. Multiplying ancestors gives the
-    // true effective opacity.
-    function getEffectiveOpacity(node: Element): number {
-      let opacity = 1;
-      let current: Element | null = node;
-      while (current) {
-        const cs = window.getComputedStyle(current);
-        const val = parseFloat(cs.opacity);
-        // Note: `val || 1` would turn opacity:0 into 1 (0 is falsy)
-        opacity *= Number.isNaN(val) ? 1 : val;
-        current = current.parentElement;
-      }
-      return opacity;
-    }
-
-    // Compute the full CSS transform matrix from element-local coords to
-    // viewport coords by walking the offsetParent chain and accumulating
-    // position offsets + CSS transforms. This correctly handles GSAP
-    // animations on wrapper divs (rotation, scale) that getBoundingClientRect
-    // conflates into an axis-aligned bounding box.
-    function getViewportMatrix(node: Element): string {
-      const chain: HTMLElement[] = [];
-      let current: Element | null = node;
-      while (current instanceof HTMLElement) {
-        chain.push(current);
-        const next: Element | null =
-          (current.offsetParent as Element | null) ?? current.parentElement;
-        if (next === current) break;
-        current = next;
-      }
-      let mat = new DOMMatrix();
-      for (let i = chain.length - 1; i >= 0; i--) {
-        const htmlEl = chain[i];
-        if (!htmlEl) continue;
-        mat = mat.translate(htmlEl.offsetLeft, htmlEl.offsetTop);
-        const cs = window.getComputedStyle(htmlEl);
-        const origin = cs.transformOrigin.split(" ");
-        const ox = resolveLength(origin[0] ?? "0", htmlEl.offsetWidth);
-        const oy = resolveLength(origin[1] ?? "0", htmlEl.offsetHeight);
-        const individualTransform = composeIndividualTransforms(cs);
-        const hasIndividual = individualTransform !== null;
-        const hasTransform = cs.transform && cs.transform !== "none";
-        if (hasIndividual || hasTransform) {
-          mat = mat.translate(ox, oy);
-          if (hasIndividual) mat = mat.multiply(individualTransform);
-          if (hasTransform) {
-            try {
-              const t = new DOMMatrix(cs.transform);
-              if (
-                Number.isFinite(t.a) &&
-                Number.isFinite(t.b) &&
-                Number.isFinite(t.c) &&
-                Number.isFinite(t.d) &&
-                Number.isFinite(t.e) &&
-                Number.isFinite(t.f)
-              ) {
-                mat = mat.multiply(t);
-              }
-            } catch {
-              // DOMMatrix constructor throws on malformed input — skip.
-            }
-          }
-          mat = mat.translate(-ox, -oy);
-        }
-      }
-      return mat.toString();
-    }
-
-    function composeIndividualTransforms(cs: CSSStyleDeclaration): DOMMatrix | null {
-      const translate = cs.getPropertyValue("translate").trim();
-      const rotate = cs.getPropertyValue("rotate").trim();
-      const scale = cs.getPropertyValue("scale").trim();
-      const hasTranslate = translate && translate !== "none";
-      const hasRotate = rotate && rotate !== "none";
-      const hasScale = scale && scale !== "none";
-      if (!hasTranslate && !hasRotate && !hasScale) return null;
-      let m = new DOMMatrix();
-      if (hasTranslate) {
-        const parts = translate.split(/\s+/);
-        const tx = parseFloat(parts[0] ?? "0") || 0;
-        const ty = parseFloat(parts[1] ?? "0") || 0;
-        if (tx !== 0 || ty !== 0) m = m.translate(tx, ty);
-      }
-      if (hasRotate) {
-        const deg = parseFloat(rotate) || 0;
-        if (deg !== 0) m = m.rotate(deg);
-      }
-      if (hasScale) {
-        const parts = scale.split(/\s+/);
-        const sx = parseFloat(parts[0] ?? "1") || 1;
-        const sy = parseFloat(parts[1] ?? String(sx)) || sx;
-        if (sx !== 1 || sy !== 1) m = m.scale(sx, sy);
-      }
-      return m;
-    }
-
-    function resolveLength(value: string, basis: number): number {
-      if (value.endsWith("%")) {
-        const pct = parseFloat(value) / 100;
-        return Number.isFinite(pct) ? pct * basis : 0;
-      }
-      const n = parseFloat(value);
-      return Number.isFinite(n) ? n : 0;
-    }
-
-    for (const el of elements) {
-      const id = el.id;
-      if (!id) continue;
-      const rect = el.getBoundingClientRect();
-      const style = window.getComputedStyle(el);
-      const zIndex = getEffectiveZIndex(el);
-      const isHdrEl = hdrSet.has(id);
-      // The frame injector now uses `visibility: hidden` (without `opacity: 0`)
-      // to hide native <video> elements, so the element's own computed opacity
-      // remains the GSAP-controlled value. Walk from the element itself to
-      // multiply through any ancestor opacity stacks.
-      const opacity = getEffectiveOpacity(el);
-      const visible =
-        style.visibility !== "hidden" &&
-        style.display !== "none" &&
-        rect.width > 0 &&
-        rect.height > 0;
-      // offsetWidth/offsetHeight only exist on HTMLElement (not on
-      // SVGElement, MathMLElement, etc.). Fall back to the bounding rect
-      // dimensions for non-HTML elements so callers always get sensible
-      // layout numbers.
-      const htmlEl = el instanceof HTMLElement ? el : null;
-      results.push({
-        id,
-        zIndex,
-        x: Math.round(rect.x),
-        y: Math.round(rect.y),
-        width: Math.round(rect.width),
-        height: Math.round(rect.height),
-        layoutWidth: htmlEl?.offsetWidth || Math.round(rect.width),
-        layoutHeight: htmlEl?.offsetHeight || Math.round(rect.height),
-        opacity,
-        visible,
-        isHdr: hdrSet.has(id),
-        // For HDR elements, use the full accumulated viewport matrix so the
-        // affine blit can apply rotation/scale/translate properly. For DOM
-        // elements, the element-level transform is sufficient for reference.
-        transform: isHdrEl ? getViewportMatrix(el) : style.transform || "none",
-        borderRadius: isHdrEl ? getEffectiveBorderRadius(el) : [0, 0, 0, 0],
-        // `getComputedStyle` returns "" when the property doesn't apply (e.g.
-        // for non-replaced elements); normalize to the CSS defaults so callers
-        // can rely on a populated value.
-        objectFit: style.objectFit || "fill",
-        objectPosition: style.objectPosition || "50% 50%",
-        clipRect: isHdrEl ? getClipRect(el) : null,
-      });
-    }
-    return results;
-  }, hdrIds);
-}

package/src/services/vp9Options.ts

@@ -1,13 +0,0 @@
-export const DEFAULT_VP9_CPU_USED = 4;
-export const MIN_VP9_CPU_USED = -8;
-export const MAX_VP9_CPU_USED = 8;
-
-export function normalizeVp9CpuUsed(value: number | undefined): number {
-  if (value === undefined || !Number.isFinite(value)) return DEFAULT_VP9_CPU_USED;
-  const integer = Math.trunc(value);
-  return Math.max(MIN_VP9_CPU_USED, Math.min(MAX_VP9_CPU_USED, integer));
-}
-
-export function appendVp9CpuUsedArg(args: string[], value: number | undefined): void {
-  args.push("-cpu-used", String(normalizeVp9CpuUsed(value)));
-}