@juangadm/pre-post 0.1.1 → 0.3.0

package/dist/video.js

@@ -0,0 +1,263 @@
+/**
+ * Animated GIF capture via sequential Playwright screenshots + gifenc encoding.
+ *
+ * Pipeline: PNG screenshots → canvas decode → gifenc quantize → animated GIF.
+ * Single codepath. No FFmpeg. No external dependencies beyond Playwright + gifenc.
+ */
+import { getBrowser } from './browser.js';
+import { createRequire } from 'module';
+// gifenc ships as CJS — use createRequire for ESM compat
+const require = createRequire(import.meta.url);
+let gifencModule = null;
+function getGifenc() {
+    if (gifencModule)
+        return gifencModule;
+    try {
+        gifencModule = require('gifenc');
+        return gifencModule;
+    }
+    catch {
+        throw new Error('GIF capture requires the "gifenc" dependency for --video captures. Install dependencies with `npx pnpm install`.');
+    }
+}
+// Mobile viewport height cap for GIF mode (above-the-fold, not comically tall)
+const MOBILE_GIF_HEIGHT = 667;
+const DEFAULT_DURATION_SECONDS = 3;
+const DEFAULT_FPS = 5;
+const MAX_DURATION_SECONDS = 10;
+const MAX_FPS = 10;
+const MIN_FPS = 1;
+// ============================================================
+// Canvas decoder page (reused across frames)
+// ============================================================
+/**
+ * Decode an image buffer to raw RGBA pixels at target dimensions.
+ * Uses a hidden Playwright page with canvas for decoding.
+ */
+async function decodeImageToRgba(decoderPage, imageBuffer, width, height) {
+    const pg = decoderPage;
+    const base64 = imageBuffer.toString('base64');
+    const base64Rgba = await pg.evaluate(async ({ b64, w, h }) => {
+        const img = new Image();
+        await new Promise((resolve, reject) => {
+            img.onload = () => resolve();
+            img.onerror = reject;
+            img.src = `data:image/png;base64,${b64}`;
+        });
+        const canvas = document.getElementById('c');
+        canvas.width = w;
+        canvas.height = h;
+        const ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0, w, h);
+        const bytes = ctx.getImageData(0, 0, w, h).data;
+        // Transfer as base64 instead of JSON array (~5MB vs ~12MB per frame)
+        const parts = [];
+        for (let i = 0; i < bytes.length; i += 8192) {
+            parts.push(String.fromCharCode(...bytes.subarray(i, Math.min(i + 8192, bytes.length))));
+        }
+        return btoa(parts.join(''));
+    }, { b64: base64, w: width, h: height });
+    return new Uint8Array(Buffer.from(base64Rgba, 'base64'));
+}
+// ============================================================
+// Core capture function
+// ============================================================
+/**
+ * Capture animated GIF frames from an existing Playwright Page.
+ * Caller manages page lifecycle.
+ */
+export async function captureGif(page, url, options) {
+    const duration = normalizeDuration(options.duration);
+    const fps = normalizeFps(options.fps);
+    const delay = options.delay ?? 0;
+    const totalFrames = Math.ceil(duration * fps);
+    const frameInterval = Math.round(1000 / fps);
+    // Navigate — do NOT kill animations
+    const response = await page.goto(url, { waitUntil: 'domcontentloaded' });
+    await Promise.race([
+        page.waitForLoadState('networkidle'),
+        page.waitForTimeout(3000),
+    ]);
+    // Warn on HTTP errors (but continue — page may still have content)
+    if (response && response.status() >= 400) {
+        console.warn(`Warning: ${url} returned HTTP ${response.status()}`);
+    }
+    // Wait for fonts (capped at 2s)
+    await Promise.race([
+        page.evaluate(() => document.fonts.ready),
+        page.waitForTimeout(2000),
+    ]);
+    // Optional delay before recording
+    if (delay > 0) {
+        await page.waitForTimeout(delay);
+    }
+    // Scroll selector into view if specified
+    if (options.selector) {
+        const locator = page.locator(options.selector);
+        const count = await locator.count();
+        if (count === 0) {
+            throw new Error(`Element not found: ${options.selector}`);
+        }
+        await locator.first().scrollIntoViewIfNeeded();
+    }
+    // Capture PNG frames
+    const frames = [];
+    let identicalCount = 0;
+    for (let i = 0; i < totalFrames; i++) {
+        const screenshot = await page.screenshot({ type: 'png' });
+        const frame = Buffer.from(screenshot);
+        // Early-stop: 3 consecutive identical frames means animation has settled
+        if (frames.length > 0 && frame.equals(frames[frames.length - 1])) {
+            identicalCount++;
+            if (identicalCount >= 3) {
+                console.log(`Animation settled after ${i} frames`);
+                break;
+            }
+        }
+        else {
+            identicalCount = 0;
+        }
+        frames.push(frame);
+        if (i < totalFrames - 1) {
+            await page.waitForTimeout(frameInterval);
+        }
+    }
+    // Encode GIF
+    const browser = page.context().browser();
+    if (!browser) {
+        throw new Error('Cannot encode GIF: browser instance is not available on this page context.');
+    }
+    const gifBuffer = await encodeGif(browser, frames, options.viewport, fps);
+    return {
+        gif: gifBuffer,
+        format: 'gif',
+        viewport: options.viewport,
+        url,
+        duration,
+        frameCount: frames.length,
+        selector: options.selector,
+    };
+}
+function normalizeDuration(duration) {
+    if (duration === undefined)
+        return DEFAULT_DURATION_SECONDS;
+    if (!Number.isFinite(duration)) {
+        throw new Error('Duration must be a finite number.');
+    }
+    return Math.min(MAX_DURATION_SECONDS, Math.max(0.1, duration));
+}
+function normalizeFps(fps) {
+    if (fps === undefined)
+        return DEFAULT_FPS;
+    if (!Number.isFinite(fps)) {
+        throw new Error('FPS must be a finite number.');
+    }
+    return Math.min(MAX_FPS, Math.max(MIN_FPS, Math.round(fps)));
+}
+// ============================================================
+// High-level entry point
+// ============================================================
+/**
+ * Capture an animated GIF of a URL.
+ * Creates its own page at DPR 1 (no retina), captures, cleans up.
+ */
+export async function captureVideo(url, options) {
+    const browser = await getBrowser();
+    // For mobile, cap height at 667px for GIF mode
+    const viewport = { ...options.viewport };
+    if (viewport.width <= 430 && viewport.height > MOBILE_GIF_HEIGHT) {
+        viewport.height = MOBILE_GIF_HEIGHT;
+    }
+    const page = await browser.newPage({
+        viewport,
+        deviceScaleFactor: 1, // DPR 1 — retina wastes pixels in 256-color GIF
+    });
+    try {
+        return await captureGif(page, url, { ...options, viewport });
+    }
+    finally {
+        await page.close();
+    }
+}
+// ============================================================
+// GIF encoding
+// ============================================================
+/**
+ * Encode an array of screenshot Buffers into an animated GIF.
+ */
+async function encodeGif(browser, frames, viewport, fps) {
+    const { GIFEncoder, quantize, applyPalette } = getGifenc();
+    const width = viewport.width;
+    const height = viewport.height;
+    const delayCs = Math.round(1000 / fps / 10); // GIF delay is in centiseconds
+    const encoder = GIFEncoder();
+    const rgbaFrames = [];
+    const decoderPage = await browser.newPage();
+    await decoderPage.setContent('<canvas id="c"></canvas>');
+    try {
+        for (let i = 0; i < frames.length; i++) {
+            console.log(`Decoding frame ${i + 1}/${frames.length}...`);
+            rgbaFrames.push(await decodeImageToRgba(decoderPage, frames[i], width, height));
+        }
+        const palette = quantize(buildPaletteSample(rgbaFrames), 256, { format: 'rgba4444' });
+        let previousIndexed = null;
+        let duplicateRunLength = 0;
+        for (let i = 0; i < rgbaFrames.length; i++) {
+            const indexed = applyPalette(rgbaFrames[i], palette, 'rgba4444');
+            if (!previousIndexed) {
+                previousIndexed = indexed;
+                duplicateRunLength = 1;
+                continue;
+            }
+            if (indexedEquals(previousIndexed, indexed)) {
+                duplicateRunLength++;
+                continue;
+            }
+            encoder.writeFrame(previousIndexed, width, height, {
+                palette,
+                delay: delayCs * duplicateRunLength,
+                repeat: 0,
+            });
+            previousIndexed = indexed;
+            duplicateRunLength = 1;
+        }
+        if (previousIndexed) {
+            encoder.writeFrame(previousIndexed, width, height, {
+                palette,
+                delay: delayCs * duplicateRunLength,
+                repeat: 0,
+            });
+        }
+        encoder.finish();
+        return Buffer.from(encoder.bytes());
+    }
+    finally {
+        if (!decoderPage.isClosed()) {
+            await decoderPage.close();
+        }
+    }
+}
+function buildPaletteSample(frames) {
+    if (frames.length === 0)
+        return new Uint8Array(0);
+    const stride = 4 * 4;
+    const samplesPerFrame = Math.ceil(frames[0].length / stride);
+    const sample = new Uint8Array(samplesPerFrame * frames.length * 4);
+    let offset = 0;
+    for (const frame of frames) {
+        for (let i = 0; i < frame.length; i += stride) {
+            sample[offset++] = frame[i];
+            sample[offset++] = frame[i + 1];
+            sample[offset++] = frame[i + 2];
+            sample[offset++] = frame[i + 3];
+        }
+    }
+    return sample;
+}
+function indexedEquals(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return Buffer.from(a.buffer, a.byteOffset, a.byteLength)
+        .equals(Buffer.from(b.buffer, b.byteOffset, b.byteLength));
+}
+//# sourceMappingURL=video.js.map

package/dist/video.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"video.js","sourceRoot":"","sources":["../src/video.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@juangadm/pre-post",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Visual diff tool for PRs — captures before/after screenshots of web pages",
   "author": "Juan Gabriel Delgado (forked from James Clements)",
   "license": "MIT",
@@ -50,6 +50,7 @@
     "test:integration": "vitest run tests/integration"
   },
   "dependencies": {
+    "gifenc": "^1.0.3",
     "playwright": "^1.50.0"
   },
   "devDependencies": {

package/skill/SKILL.md

@@ -239,7 +239,7 @@ IMAGE_ADAPTER=0x0st ./scripts/upload-and-copy.sh before.png after.png --markdown
 
 | Error | Fix |
 |-------|-----|
-| `command not found` | `npm install -g pre-post` |
+| `command not found` | `npm install -g @juangadm/pre-post` |
 | `browserType.launch: Executable doesn't exist` | `npx playwright install chromium` |
 | 401/403 on production URL | See pre-flight section above |
 | Element not found | Verify selector exists on page |

package/skill/scripts/upload-and-copy.sh

@@ -20,6 +20,49 @@
 set -e
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
+
+# Resolve owner/repo from env vars or git remote URL (supports proxy URLs)
+resolve_owner_repo() {
+    if [[ -n "${GH_REPO:-}" ]]; then echo "$GH_REPO"; return; fi
+    if [[ -n "${GITHUB_REPOSITORY:-}" ]]; then echo "$GITHUB_REPOSITORY"; return; fi
+
+    local url
+    url=$(git remote get-url origin 2>/dev/null) || true
+
+    # Standard GitHub HTTPS/SSH
+    local std
+    std=$(echo "$url" | sed -nE 's#.*github\.com[/:]([^/]+/[^/]+?)(\.git)?$#\1#p')
+    if [[ -n "$std" ]]; then echo "$std"; return; fi
+
+    # Proxy fallback: last two path segments
+    local proxy
+    proxy=$(echo "$url" | sed -nE 's#.*/([^/]+/[^/]+?)(\.git)?$#\1#p')
+    if [[ -n "$proxy" ]]; then echo "$proxy"; return; fi
+
+    echo "Error: Cannot parse owner/repo. Set GH_REPO=owner/repo" >&2
+    exit 1
+}
+
+# Check if gh CLI is installed and authenticated
+gh_is_authenticated() {
+    command -v gh &>/dev/null && gh auth status &>/dev/null
+}
+
+# Copy text to system clipboard (macOS or Linux)
+copy_to_clipboard() {
+    local text="$1"
+    local label="${2:-Text}"
+    if command -v pbcopy &>/dev/null; then
+        echo "$text" | pbcopy
+        echo "$label copied to clipboard!"
+    elif command -v xclip &>/dev/null; then
+        echo "$text" | xclip -selection clipboard
+        echo "$label copied to clipboard!"
+    else
+        echo "(clipboard copy not available - install pbcopy or xclip)"
+    fi
+}
+
 ADAPTERS_DIR="$SCRIPT_DIR/adapters"
 
 # Default adapter
@@ -86,8 +129,6 @@ upload_file() {
     local filename=$(basename "$file")
 
     echo "Uploading: $filename (via $IMAGE_ADAPTER)" >&2
-
-    # Call the adapter script
     "$ADAPTER_SCRIPT" "$file"
 }
 
@@ -109,8 +150,7 @@ if [[ "$IMAGE_ADAPTER" == "git-native" ]]; then
         exit 1
     fi
 
-    REMOTE_URL=$(git remote get-url origin 2>/dev/null)
-    OWNER_REPO=$(echo "$REMOTE_URL" | sed -E 's#^(https?://github\.com/|git@github\.com:)##; s#\.git$##')
+    OWNER_REPO=$(resolve_owner_repo)
 
     BEFORE_URL="https://github.com/$OWNER_REPO/blob/$SHA/.pre-post/$BEFORE_RESULT?raw=true"
     AFTER_URL="https://github.com/$OWNER_REPO/blob/$SHA/.pre-post/$AFTER_RESULT?raw=true"
@@ -125,36 +165,52 @@ echo "Before URL: $BEFORE_URL"
 echo "After URL: $AFTER_URL"
 echo ""
 
-if [[ "$MARKDOWN_MODE" == "true" ]]; then
-    # Build section with commit reference
-    SHORT_SHA=$(git rev-parse --short HEAD 2>/dev/null || echo "unknown")
-    TIMESTAMP=$(date "+%Y-%m-%d %H:%M")
+if [[ "$MARKDOWN_MODE" != "true" ]]; then
+    copy_to_clipboard "Before: $BEFORE_URL
+After: $AFTER_URL" "URLs"
+    exit 0
+fi
+
+# Build section with commit reference
+SHORT_SHA=$(git rev-parse --short HEAD 2>/dev/null || echo "unknown")
+TIMESTAMP=$(date "+%Y-%m-%d %H:%M")
 
-    SECTION="### Screenshots ($SHORT_SHA — $TIMESTAMP)
+SECTION="### Screenshots ($SHORT_SHA — $TIMESTAMP)
 
 | Pre | Post |
 |:---:|:----:|
 | ![Pre]($BEFORE_URL) | ![Post]($AFTER_URL) |"
 
-    echo "=== PR Markdown ==="
-    echo "$SECTION"
-    echo ""
+echo "=== PR Markdown ==="
+echo "$SECTION"
+echo ""
 
-    # Auto-append to PR body if gh CLI available and PR exists
-    # Parse owner/repo from origin so this works correctly in forks
-    REMOTE_URL=$(git remote get-url origin 2>/dev/null || true)
-    GH_REPO=$(echo "$REMOTE_URL" | sed -E 's#^(https?://github\.com/|git@github\.com:)##; s#\.git$##')
+# Auto-append to PR body if gh CLI is available and authenticated
+GH_REPO=$(resolve_owner_repo)
+CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || true)
 
-    CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD 2>/dev/null || true)
+if ! gh_is_authenticated || [[ -z "$GH_REPO" ]] || [[ -z "$CURRENT_BRANCH" ]]; then
+    if command -v gh &>/dev/null && ! gh_is_authenticated; then
+        echo "(gh CLI found but not authenticated — run 'gh auth login' to enable auto PR updates)"
+    fi
+    echo "Paste the markdown above into your PR description."
+    copy_to_clipboard "$SECTION" "Markdown"
+    exit 0
+fi
 
-    if command -v gh &> /dev/null && [[ -n "$GH_REPO" ]] && [[ -n "$CURRENT_BRANCH" ]]; then
-        PR_JSON=$(gh pr view "$CURRENT_BRANCH" --repo "$GH_REPO" --json number,body 2>/dev/null || true)
-        if [[ -n "$PR_JSON" ]]; then
-            PR_NUMBER=$(echo "$PR_JSON" | grep -o '"number":[0-9]*' | grep -o '[0-9]*')
-            PR_BODY=$(echo "$PR_JSON" | python3 -c "import sys,json; print(json.load(sys.stdin).get('body',''))" 2>/dev/null || echo "")
+PR_JSON=$(gh pr view "$CURRENT_BRANCH" --repo "$GH_REPO" --json number,body 2>/dev/null || true)
 
-            # Stack: newest on top, right after ## Visual Changes header
-            NEW_BODY=$(python3 -c "
+if [[ -z "$PR_JSON" ]]; then
+    echo "(no PR found for branch '$CURRENT_BRANCH' — create a PR first, then paste the markdown above into the description)"
+    copy_to_clipboard "$SECTION" "Markdown"
+    exit 0
+fi
+
+PR_NUMBER=$(echo "$PR_JSON" | grep -o '"number":[0-9]*' | grep -o '[0-9]*')
+PR_BODY=$(echo "$PR_JSON" | python3 -c "import sys,json; print(json.load(sys.stdin).get('body',''))" 2>/dev/null || echo "")
+
+# Stack: newest on top, right after ## Visual Changes header
+NEW_BODY=$(python3 -c "
 import sys
 body = sys.argv[1]
 section = sys.argv[2]
@@ -168,35 +224,7 @@ else:
     print(body + '\n\n' + marker + '\n\n' + section)
 " "$PR_BODY" "$SECTION")
 
-            gh pr edit "$PR_NUMBER" --repo "$GH_REPO" --body "$NEW_BODY"
-            echo "Screenshots appended to PR #$PR_NUMBER body"
-        else
-            echo "(no PR found for current branch — markdown copied to clipboard)"
-        fi
-    fi
+gh pr edit "$PR_NUMBER" --repo "$GH_REPO" --body "$NEW_BODY"
+echo "Screenshots appended to PR #$PR_NUMBER body"
 
-    # Also copy to clipboard as fallback
-    if command -v pbcopy &> /dev/null; then
-        echo "$SECTION" | pbcopy
-        echo "Markdown copied to clipboard!"
-    elif command -v xclip &> /dev/null; then
-        echo "$SECTION" | xclip -selection clipboard
-        echo "Markdown copied to clipboard!"
-    else
-        echo "(clipboard copy not available - install pbcopy or xclip)"
-    fi
-else
-    # Copy URLs to clipboard
-    URLS="Before: $BEFORE_URL
-After: $AFTER_URL"
-
-    if command -v pbcopy &> /dev/null; then
-        echo "$URLS" | pbcopy
-        echo "URLs copied to clipboard!"
-    elif command -v xclip &> /dev/null; then
-        echo "$URLS" | xclip -selection clipboard
-        echo "URLs copied to clipboard!"
-    else
-        echo "(clipboard copy not available - install pbcopy or xclip)"
-    fi
-fi
+copy_to_clipboard "$SECTION" "Markdown"