mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-01 19:42:03 +00:00
Miguel Ángel
5655dabff6
## Summary Two independent initiatives that improve agent DX and expand HyperFrames' reach. ### Initiative 1: Fix the Clip Animation Footgun - `gsap_animates_clip_element` lint rule now uses smart detection — only errors when GSAP animates `visibility` or `display` on a clip element - All other properties (opacity, transform, x, y, scale, etc.) are allowed silently - This was the #1 agent failure in QA (10/10 agents hit it on v0.2.1) ### Initiative 2: `<hyperframes-player>` Web Component - New `@hyperframes/player` package — zero dependencies, 3.3KB gzipped - Iframe-based web component with Shadow DOM for perfect isolation - Video-like API: `play()`, `pause()`, `seek()`, `currentTime`, `duration`, events - Controls overlay with play/pause, scrubber (mouse + touch), time display, auto-hide - Full docs page at `docs/packages/player.mdx` ## Before / After ### Clip animation lint **Before (10/10 agents hit this):** ``` ✗ gsap_animates_clip_element: GSAP animation targets a clip element. Selector "#title" resolves to element <div id="title" class="clip">. The framework manages clip visibility — animate an inner wrapper instead. Fix: Wrap content in a child <div> and target that with GSAP. ``` **After (only errors on actual conflicts):** ``` # This passes lint — no error: tl.from("#title", { opacity: 0, y: -50, scale: 0.8 }, 0); # This still errors — actual conflict with runtime: tl.to("#title", { visibility: "hidden" }, 3); ✗ gsap_animates_clip_element: GSAP animation sets visibility on a clip element. Fix: Remove the visibility/display tween. Use opacity for fade effects. ``` ### Embeddable player **Before:** No way to embed a composition in a web page. **After:** ```html <script src="https://cdn.jsdelivr.net/npm/@hyperframes/player"></script> <hyperframes-player src="./composition/index.html" controls></hyperframes-player> ``` ```js const player = document.querySelector('hyperframes-player'); player.play(); player.pause(); player.seek(2.5); player.addEventListener('ready', (e) => console.log('Duration:', e.detail.duration)); ``` ## Test plan - [x] 427 core tests pass (20 GSAP lint tests with smart detection) - [x] 7 player tests pass (formatTime + element registration) - [x] TypeScript compiles cleanly (core + player) - [x] Lint: GSAP animating clip with safe props → 0 errors - [x] Lint: GSAP animating clip with `visibility` → 1 error (correct) - [x] Player builds to 3.3KB gzipped ESM - [x] Lockfile updated for CI - [x] Docs page added at `docs/packages/player.mdx`
91 lines
3.1 KiB
Docker
91 lines
3.1 KiB
Docker
# HyperFrames Producer - Regression Test Image
|
|
#
|
|
# Matches the production rendering environment (same Chromium, fonts, FFmpeg)
|
|
# but includes the full source + devDependencies for running the test harness.
|
|
#
|
|
# This ensures golden baselines match what production actually renders.
|
|
#
|
|
# Usage:
|
|
# docker build -f Dockerfile.test -t hyperframes-producer:test .
|
|
# docker run --rm -v ./packages/producer/tests:/app/packages/producer/tests hyperframes-producer:test
|
|
# docker run --rm -v ./packages/producer/tests:/app/packages/producer/tests hyperframes-producer:test --update
|
|
|
|
FROM node:22-bookworm-slim
|
|
|
|
# ── System dependencies (identical to production) ────────────────────────────
|
|
RUN apt-get update && apt-get install -y --no-install-recommends \
|
|
ca-certificates \
|
|
curl \
|
|
unzip \
|
|
ffmpeg \
|
|
chromium \
|
|
libgbm1 \
|
|
libnss3 \
|
|
libatk-bridge2.0-0 \
|
|
libdrm2 \
|
|
libxcomposite1 \
|
|
libxdamage1 \
|
|
libxrandr2 \
|
|
libcups2 \
|
|
libasound2 \
|
|
libpangocairo-1.0-0 \
|
|
libxshmfence1 \
|
|
libgtk-3-0 \
|
|
# Font support — matches production
|
|
fonts-liberation \
|
|
fonts-noto-color-emoji \
|
|
fonts-noto-cjk \
|
|
fonts-noto-core \
|
|
fonts-noto-extra \
|
|
fonts-noto-ui-core \
|
|
fonts-freefont-ttf \
|
|
fonts-dejavu-core \
|
|
fontconfig \
|
|
&& rm -rf /var/lib/apt/lists/* \
|
|
&& apt-get clean \
|
|
&& fc-cache -fv
|
|
|
|
# Use system Chromium (same as production)
|
|
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
|
|
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium
|
|
ENV CONTAINER=true
|
|
|
|
# Install chrome-headless-shell for deterministic BeginFrame rendering.
|
|
# This lightweight Chrome binary supports HeadlessExperimental.beginFrame.
|
|
# Install to ~/.cache/puppeteer/ where resolveHeadlessShellPath() looks.
|
|
RUN npx --yes @puppeteer/browsers install chrome-headless-shell@stable \
|
|
--path /root/.cache/puppeteer \
|
|
&& find /root/.cache/puppeteer/chrome-headless-shell -name "chrome-headless-shell" -type f \
|
|
&& echo "chrome-headless-shell installed"
|
|
|
|
WORKDIR /app
|
|
|
|
# Install bun
|
|
RUN curl -fsSL https://bun.sh/install | bash
|
|
ENV PATH="/root/.bun/bin:$PATH"
|
|
|
|
# Install dependencies (full, including devDependencies for tsx + test harness)
|
|
COPY package.json bun.lock ./
|
|
COPY packages/core/package.json packages/core/package.json
|
|
COPY packages/engine/package.json packages/engine/package.json
|
|
COPY packages/player/package.json packages/player/package.json
|
|
COPY packages/producer/package.json packages/producer/package.json
|
|
COPY packages/cli/package.json packages/cli/package.json
|
|
COPY packages/studio/package.json packages/studio/package.json
|
|
RUN bun install --frozen-lockfile
|
|
|
|
# Copy source
|
|
COPY packages/core/ packages/core/
|
|
COPY packages/engine/ packages/engine/
|
|
COPY packages/producer/ packages/producer/
|
|
|
|
# Build core runtime artifacts (needed by renderer)
|
|
RUN bun run --filter @hyperframes/core build:hyperframes-runtime:modular
|
|
|
|
# Generate embedded font data (deterministicFonts.ts imports this at runtime)
|
|
RUN cd packages/producer && bunx tsx scripts/generate-font-data.ts
|
|
|
|
WORKDIR /app/packages/producer
|
|
|
|
ENTRYPOINT ["bunx", "tsx", "src/regression-harness.ts", "--", "--sequential"]
|