fix: install system ffmpeg in CI and add UI changes to example app

DeDuckProject · claude · DeDuckProject · commit 646b7aeb0ba2 · 2026-03-11T21:37:38.000+02:00
Playwright's bundled FFmpeg is compiled with --disable-everything and
only supports WebM encoding for recording — it lacks the fps, palettegen,
and paletteuse filters required for GIF conversion. Install system ffmpeg
via apt-get in the demo workflow to fix post-processing.

Also add meaningful UI changes to the example app (price display, wishlist
button, best-seller badge) so the diff analyzer detects UI changes and
the pipeline runs end-to-end instead of short-circuiting.

Co-Authored-By: Claude Sonnet 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/.github/workflows/demo.yml b/.github/workflows/demo.yml
@@ -28,6 +28,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install
 
+      - name: Install FFmpeg
+        run: sudo apt-get install -y ffmpeg
+
       - name: Install Playwright Chromium
         run: pnpm --filter @git-glimpse/core exec playwright install chromium --with-deps
 
diff --git a/examples/simple-app/server.js b/examples/simple-app/server.js
@@ -9,8 +9,13 @@ const HTML = `<!DOCTYPE html>
     body { font-family: sans-serif; padding: 2rem; background: #f5f5f5; }
     h1 { color: #333; }
     .card { background: white; border-radius: 8px; padding: 1.5rem; margin: 1rem 0; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
+    .price { font-size: 1.5rem; font-weight: bold; color: #111; margin: 0.5rem 0; }
+    .badge { display: inline-block; background: #fef3c7; color: #92400e; font-size: 0.75rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: 999px; margin-bottom: 0.5rem; }
     button { background: #6366f1; color: white; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; cursor: pointer; font-size: 1rem; }
     button:hover { background: #4f46e5; }
+    .btn-wishlist { background: white; color: #6366f1; border: 2px solid #6366f1; margin-left: 0.5rem; }
+    .btn-wishlist:hover { background: #eef2ff; }
+    .wishlist-msg { display: none; color: #10b981; font-size: 0.9rem; margin-top: 0.5rem; }
     .modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
     .modal.open { display: flex; }
     .modal-content { background: white; border-radius: 12px; padding: 2rem; max-width: 400px; width: 90%; }
@@ -22,11 +27,15 @@ const HTML = `<!DOCTYPE html>
   <h1>Product Page</h1>
 
   <div class="card">
+    <span class="badge">Best Seller</span>
     <h2>Wireless Headphones</h2>
     <p>Premium noise-cancelling headphones with 30-hour battery life.</p>
-    <p id="counter">0</p>
+    <p class="price">$129.99</p>
+    <p id="counter">0 in cart</p>
     <button id="add-to-cart">Add to Cart</button>
+    <button class="btn-wishlist" id="wishlist-btn">♡ Wishlist</button>
     <button id="try-on-btn" style="margin-left:0.5rem; background:#10b981">Virtual Try-On</button>
+    <p class="wishlist-msg" id="wishlist-msg">Added to wishlist!</p>
   </div>
 
   <div class="modal" id="modal">
@@ -42,7 +51,12 @@ const HTML = `<!DOCTYPE html>
     let count = 0;
     document.getElementById('add-to-cart').addEventListener('click', () => {
       count++;
-      document.getElementById('counter').textContent = count;
+      document.getElementById('counter').textContent = count + ' in cart';
+    });
+    document.getElementById('wishlist-btn').addEventListener('click', () => {
+      const msg = document.getElementById('wishlist-msg');
+      msg.style.display = 'block';
+      document.getElementById('wishlist-btn').textContent = '♥ Wishlisted';
     });
     document.getElementById('try-on-btn').addEventListener('click', () => {
       document.getElementById('modal').classList.add('open');
