Merge pull request #29 from adurrr/fix/demo-gif-v1.2

feat: recreate demo GIF, bump version to 1.2.0 (fixes #11)

Author: adurrr

CHANGELOG.md

@@ -6,30 +6,43 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+## [1.2.0] - 2026-06-02
+
 ### Added
 
-- Demo GIF to README showing persistent player across page navigation
-- Scripts for capturing and generating demo GIF (`scripts/capture-demo.mjs`, `scripts/make-gif.py`)
-- Favicon and browser assets (SVG, ICO, PNG sizes, Apple touch icon, Android Chrome icons, webmanifest)
-- Theme-color meta tags for light and dark color schemes
-- `CHANGELOG.md` with Keep a Changelog format
+- Bidirectional real-time sync of mute, volume, playback rate, and chapter seek between inline player and footer via new `podcast-state-change` event (#25, #28)
+- `podcast-seek` event dispatched from skip (rewind/forward) and chapter-click buttons so footer tracks all position changes
+- Updated demo GIF showing new sync features (8 frames, SVG icons, volume/speed sync)
 
 ### Changed
 
-- Replaced emoji with Feather/Lucide SVG icons in inline player skip and mute buttons
+- Updated demo capture script (`scripts/capture-demo.mjs`) for new site structure, port 1311, and `/wavecast/` subpath
+- Updated GIF generation script (`scripts/make-gif.py`) with new captions matching updated demo flow
 
-## [1.1.0] - 2026-05-31
+### Fixed
 
-### Changed
+- Speed change on inline player no longer accidentally mutes footer audio (volume/mute defaults now read from UI rather than silenced `<audio>` when footer is active)
+- Double-audio prevention: inline `_setVolume`, `_toggleMute`, `_cycleRate`, and keyboard volume handlers now skip modifying the inline `<audio>` when a footer is producing audible output
+- Event echo loop prevented with `_suppressSync` guard flag on both inline player and footer
 
-- Updated theme.toml tags for Hugo theme gallery: `podcast`, `radio`, `music`, `responsive`, `dark`, `dark mode`
+## [1.1.0] - 2026-05-31
 
 ### Added
 
+- Demo GIF to README showing persistent player across page navigation
+- Scripts for capturing and generating demo GIF (`scripts/capture-demo.mjs`, `scripts/make-gif.py`)
+- Favicon and browser assets (SVG, ICO, PNG sizes, Apple touch icon, Android Chrome icons, webmanifest)
+- Theme-color meta tags for light and dark color schemes
+- `CHANGELOG.md` with Keep a Changelog format
 - Hugo theme gallery screenshots (`images/screenshot.png`, `images/tn.png`)
 - README badges (release, license, tests, GitHub stars)
 - `demosite` field in theme.toml
 
+### Changed
+
+- Replaced emoji with Feather/Lucide SVG icons in inline player skip and mute buttons
+- Updated theme.toml tags for Hugo theme gallery: `podcast`, `radio`, `music`, `responsive`, `dark`, `dark mode`
+
 ### Fixed
 
 - Em dashes replaced with hyphens in theme.toml
@@ -80,6 +93,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ---
 
-[Unreleased]: https://github.com/adurrr/wavecast/compare/v1.1.0...HEAD
-[1.1.0]: https://github.com/adurrr/wavecast/releases/tag/v1.1.0
+[Unreleased]: https://github.com/adurrr/wavecast/compare/v1.2.0...HEAD
+[1.2.0]: https://github.com/adurrr/wavecast/compare/v1.1.0...v1.2.0
+[1.1.0]: https://github.com/adurrr/wavecast/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/adurrr/wavecast/releases/tag/v1.0.0

images/demo.gif

@@ -1,7 +1,7 @@
 import { chromium } from 'playwright';
 import { mkdirSync } from 'fs';
 
-const BASE = 'http://localhost:1313';
+const BASE = 'http://localhost:1311/wavecast';
 const OUT = '/tmp/demo-frames';
 
 mkdirSync(OUT, { recursive: true });
@@ -16,7 +16,7 @@ const context = await browser.newContext({
 const page = await context.newPage();
 
 let frame = 0;
-const shot = async (label, delay = 600) => {
+const shot = async (label, delay = 800) => {
   await page.waitForTimeout(delay);
   const n = String(frame++).padStart(2, '0');
   await page.screenshot({ path: `${OUT}/frame-${n}-${label}.png` });
@@ -40,14 +40,40 @@ async function clickClose() {
   });
 }
 
+async function clickRateBtn() {
+  await page.evaluate(() => {
+    const pp = document.querySelector('podcast-player');
+    if (pp && pp.shadowRoot) {
+      pp.shadowRoot.querySelector('[part="rate-btn"]')?.click();
+    }
+  });
+}
+
+async function setVolume(value) {
+  await page.evaluate((v) => {
+    const pp = document.querySelector('podcast-player');
+    if (pp && pp.shadowRoot) {
+      const slider = pp.shadowRoot.querySelector('[part="volume"]');
+      if (slider) {
+        // Set value and dispatch input event
+        const nativeInputValueSetter = Object.getOwnPropertyDescriptor(
+          window.HTMLInputElement.prototype, 'value'
+        ).set;
+        nativeInputValueSetter.call(slider, String(v));
+        slider.dispatchEvent(new Event('input', { bubbles: true }));
+      }
+    }
+  }, value);
+}
+
 async function footerIsActive() {
   return page.evaluate(() => {
     const f = document.querySelector('podcast-footer');
     return f && f.hasAttribute('active');
   });
 }
 
-async function waitFooterActive(timeout = 5000) {
+async function waitFooterActive(timeout = 8000) {
   const start = Date.now();
   while (Date.now() - start < timeout) {
     if (await footerIsActive()) return;
@@ -65,37 +91,52 @@ async function waitFooterInactive(timeout = 5000) {
   throw new Error('Footer did not become inactive');
 }
 
-// === 1. Homepage — show inline player ===
+// === 1. Homepage — inline player loaded ===
 await page.goto(`${BASE}/`);
 await page.waitForSelector('podcast-player');
-await shot('01-homepage-inline-player', 1000);
+await shot('01-homepage-inline-player', 1200);
 
-// === 2. Click play on first player → footer appears ===
+// === 2. Click play → footer appears with SVG icons and poster ===
 await clickPlay();
 await waitFooterActive();
-await shot('02-footer-appeared');
-
-// === 3. Navigate to a post page → footer persists ===
-await page.locator('a[href="/posts/test-episode/"]').first().click();
-await page.waitForTimeout(1500);
+await shot('02-footer-appears-with-icons', 400);
+
+// === 3. Change volume on inline → footer syncs ===
+// Drag inline volume slider to 0.3 and capture footer following
+await setVolume(0.3);
+await page.waitForTimeout(600);
+await shot('03-volume-sync-footer-follows', 200);
+
+// === 4. Change playback speed on inline → footer syncs ===
+await clickRateBtn(); // 1× → 1.25×
+await page.waitForTimeout(400);
+await shot('04-speed-sync-footer-follows', 200);
+
+// === 5. Navigate to episode page → footer persists ===
+await page.locator('a[href*="/episodes/"]').first().click();
+await page.waitForTimeout(1800);
 await waitFooterActive();
-await shot('03-navigate-footer-persists');
+await shot('05-navigate-footer-persists');
 
-// === 4. Navigate back to home — footer still there ===
-await page.locator('a[href="/"]').first().click();
-await page.waitForTimeout(1500);
-await waitFooterActive();
-await shot('04-navigate-back-footer-still-there');
+// === 6. Interact with footer controls (skip forward) ===
+await page.evaluate(() => {
+  const f = document.querySelector('podcast-footer');
+  if (f && f.shadowRoot) {
+    f.shadowRoot.querySelector('[part="skip-fwd-btn"]')?.click();
+  }
+});
+await page.waitForTimeout(600);
+await shot('06-footer-skip-forward');
 
-// === 5. Close footer ===
+// === 7. Close footer ===
 await clickClose();
 await waitFooterInactive();
-await shot('05-footer-closed');
+await shot('07-footer-closed');
 
-// === 6. Navigate again — footer should NOT reappear ===
-await page.locator('a[href="/posts/test-episode/"]').first().click();
+// === 8. Navigate to another page → footer stays closed ===
+await page.locator('a[href*="/programs/"]').first().click();
 await page.waitForTimeout(1500);
-await shot('06-navigate-no-footer');
+await shot('08-navigate-footer-stays-closed');
 
 await browser.close();
 console.log(`Captured ${frame} frames to ${OUT}`);

scripts/capture-demo.mjs

@@ -7,12 +7,14 @@
 WIDTH = 800
 
 captions = [
-    "Page loads with inline podcast player",
-    "Click play -> sticky footer player appears at bottom",
-    "Navigate to another page -> footer persists",
-    "Navigate back -> footer still there, still playing",
+    "Page loads with SVG-icon podcast player and chapters",
+    "Click play -> sticky footer player appears with poster",
+    "Change volume on inline -> footer slider syncs in real time",
+    "Change playback speed on inline -> footer syncs speed",
+    "Navigate to another page -> footer persists, never stops",
+    "Interact with footer (skip forward) while navigating",
     "Close the footer player",
-    "Navigate again -> footer stays closed",
+    "Navigate again -> footer stays closed, playback stops",
 ]
 
 frame_files = sorted(