# Screenshot definitions for the Compressatorium Web UI, taken with
# shot-scraper (https://shot-scraper.datasette.io/) and regenerated by the
# "Take screenshots" GitHub Actions workflow (.github/workflows/screenshots.yml).
#
# The workflow builds the Svelte frontend, boots the FastAPI backend against a
# throwaway fixture volume (scripts/make_screenshot_fixture.sh), then runs
# `shot-scraper multi shots.yml`. Outputs land in docs/screenshots/ and are
# referenced from README.md and docs/.
#
# Theme control: the UI stores its light/dark preference in the
# `theme-preference` localStorage key (mode-watcher). Setting the key and
# dispatching a `storage` event flips the theme reactively before capture, so
# each surface is shot as a light / dark pair. Theme-only shots share the JS via
# the &js_theme_light / &js_theme_dark YAML anchors defined below (anchors expand
# at parse time, so both PyYAML and `shot-scraper multi` see the full script);
# the batch / Dolphin / 3DS shots keep inline JS because they append interaction
# steps after the theme flip.
#
# Each URL carries a unique `?s=` query so every shot is a full page load rather
# than a same-document hash change (the app is a hash-router SPA). The server is
# expected on http://127.0.0.1:8099 (see the workflow). Views are addressed
# through the hash router: #/workspace/<tool>, #/dashboard, #/dat, #/help.

# --- Workspace: CHDMAN (default tool, Arcade CHD volume) -------------------
# These two shots also define the shared theme-flip anchors.
- url: http://127.0.0.1:8099/?s=workspace-chdman-light#/workspace/chdman
  output: docs/screenshots/workspace-chdman-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: &js_theme_light |
    (async () => {
      localStorage.setItem('theme-preference', 'light');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'light' }));
      await new Promise(r => setTimeout(r, 500));
    })()
- url: http://127.0.0.1:8099/?s=workspace-chdman-dark#/workspace/chdman
  output: docs/screenshots/workspace-chdman-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: &js_theme_dark |
    (async () => {
      localStorage.setItem('theme-preference', 'dark');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'dark' }));
      await new Promise(r => setTimeout(r, 500));
    })()

# --- Workspace: batch selection (all files ticked, convert panel armed) ----
- url: http://127.0.0.1:8099/?s=workspace-batch-light#/workspace/chdman
  output: docs/screenshots/workspace-batch-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'light');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'light' }));
      await new Promise(r => setTimeout(r, 400));
      const all = document.querySelector('input[aria-label="Select all visible"]');
      if (all && !all.checked) all.click();
      await new Promise(r => setTimeout(r, 400));
    })()
- url: http://127.0.0.1:8099/?s=workspace-batch-dark#/workspace/chdman
  output: docs/screenshots/workspace-batch-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'dark');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'dark' }));
      await new Promise(r => setTimeout(r, 400));
      const all = document.querySelector('input[aria-label="Select all visible"]');
      if (all && !all.checked) all.click();
      await new Promise(r => setTimeout(r, 400));
    })()

# --- Workspace: Dolphin (GameCube volume selected) -------------------------
- url: http://127.0.0.1:8099/?s=workspace-dolphin-light#/workspace/dolphin
  output: docs/screenshots/workspace-dolphin-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'light');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'light' }));
      await new Promise(r => setTimeout(r, 400));
      const vol = [...document.querySelectorAll('button.item')].find(b => b.textContent.trim() === 'GameCube');
      if (vol) vol.click();
      await new Promise(r => setTimeout(r, 500));
    })()
- url: http://127.0.0.1:8099/?s=workspace-dolphin-dark#/workspace/dolphin
  output: docs/screenshots/workspace-dolphin-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'dark');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'dark' }));
      await new Promise(r => setTimeout(r, 400));
      const vol = [...document.querySelectorAll('button.item')].find(b => b.textContent.trim() === 'GameCube');
      if (vol) vol.click();
      await new Promise(r => setTimeout(r, 500));
    })()

# --- Workspace: 3DS (Nintendo 3DS volume selected) ------------------------
- url: http://127.0.0.1:8099/?s=workspace-3ds-light#/workspace/z3ds
  output: docs/screenshots/workspace-3ds-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'light');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'light' }));
      await new Promise(r => setTimeout(r, 400));
      const vol = [...document.querySelectorAll('button.item')].find(b => b.textContent.trim() === 'Nintendo 3DS');
      if (vol) vol.click();
      await new Promise(r => setTimeout(r, 500));
    })()
- url: http://127.0.0.1:8099/?s=workspace-3ds-dark#/workspace/z3ds
  output: docs/screenshots/workspace-3ds-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: |
    (async () => {
      localStorage.setItem('theme-preference', 'dark');
      window.dispatchEvent(new StorageEvent('storage', { key: 'theme-preference', newValue: 'dark' }));
      await new Promise(r => setTimeout(r, 400));
      const vol = [...document.querySelectorAll('button.item')].find(b => b.textContent.trim() === 'Nintendo 3DS');
      if (vol) vol.click();
      await new Promise(r => setTimeout(r, 500));
    })()

# --- Dashboard ------------------------------------------------------------
- url: http://127.0.0.1:8099/?s=dashboard-light#/dashboard
  output: docs/screenshots/dashboard-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_light
- url: http://127.0.0.1:8099/?s=dashboard-dark#/dashboard
  output: docs/screenshots/dashboard-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_dark

# --- DAT Library ----------------------------------------------------------
- url: http://127.0.0.1:8099/?s=dat-light#/dat
  output: docs/screenshots/dat-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_light
- url: http://127.0.0.1:8099/?s=dat-dark#/dat
  output: docs/screenshots/dat-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_dark

# --- Help -----------------------------------------------------------------
- url: http://127.0.0.1:8099/?s=help-light#/help
  output: docs/screenshots/help-light.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_light
- url: http://127.0.0.1:8099/?s=help-dark#/help
  output: docs/screenshots/help-dark.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_dark

# --- Responsive layouts (workspace at desktop / tablet / mobile widths) ----
- url: http://127.0.0.1:8099/?s=docs-desktop-view#/workspace/chdman
  output: docs/screenshots/docs-desktop-view.png
  width: 1280
  height: 900
  wait: 1800
  javascript: *js_theme_light
- url: http://127.0.0.1:8099/?s=docs-tablet-view#/workspace/chdman
  output: docs/screenshots/docs-tablet-view.png
  width: 768
  height: 1024
  wait: 1800
  javascript: *js_theme_light
- url: http://127.0.0.1:8099/?s=docs-mobile-view#/workspace/chdman
  output: docs/screenshots/docs-mobile-view.png
  width: 375
  height: 812
  wait: 1800
  javascript: *js_theme_light