feat(static): "Run simulation" start button over the black stage
The experience boots silent and waits for a gesture (browser autoplay blocks an un-gestured audio play()). Until now that gesture was an unlabelled Video toggle — not obvious to a first-time viewer. Add a "Run simulation" button, revealed over the black stage once media has preloaded; clicking it turns Video on, snaps the audio dial to a gentle 2/10, dismisses the prompt, and starts the soundtrack in that one gesture. Turning Video on directly still begins the experience too (couples audio in, dismisses the button) via a shared beginExperience(). Localised en/es/fr/ja. E2E coverage updated (Playwright + pytest-playwright): button shown after load, button starts video+audio+dismisses, and direct-Video-on path. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
+33
-9
@@ -7,10 +7,10 @@ blanking) — real Safari/iOS autoplay and real-GPU compositing still need a dev
|
||||
by-ear/eye check.
|
||||
|
||||
The experience BOOTS SILENT — video off, audio dial at 0 — so nothing plays until a
|
||||
real user gesture. Turning Video ON (a click) couples the audio dial up to 3/10 and
|
||||
starts the soundtrack IN that gesture, sidestepping the browser autoplay block that
|
||||
swallowed an un-gestured auto-start. Audio is a 0–10 range dial (not a checkbox);
|
||||
set it by writing `value` + firing an `input` event.
|
||||
real user gesture. The "Run simulation" button (or turning Video ON directly) couples
|
||||
the audio dial up to 2/10 and starts the soundtrack IN that gesture, sidestepping the
|
||||
browser autoplay block that swallowed an un-gestured auto-start. Audio is a 0–10 range
|
||||
dial (not a checkbox); set it by writing `value` + firing an `input` event.
|
||||
|
||||
Install: pip install -e '.[e2e]' && python -m playwright install chromium
|
||||
"""
|
||||
@@ -100,12 +100,36 @@ def test_app_boots_silent_video_off(page):
|
||||
) is True
|
||||
|
||||
|
||||
def test_video_on_couples_audio_to_three_and_plays(page):
|
||||
# Turning Video on (a click gesture) lifts the audio dial to 3/10 and starts the
|
||||
# soundtrack IN that gesture: video shows (black hidden), a scale soundtrack plays.
|
||||
def test_run_simulation_button_shows_after_load(page):
|
||||
# Once media is preloaded the "Run simulation" prompt is revealed over the (still
|
||||
# black) stage — the obvious starting point — while the experience stays silent.
|
||||
page.wait_for_selector("#run-sim:not(.hidden)")
|
||||
assert page.is_checked("#visual") is False
|
||||
assert page.evaluate("document.getElementById('audio').value") == "0"
|
||||
|
||||
|
||||
def test_run_simulation_button_starts_video_and_audio(page):
|
||||
# Pressing "Run simulation" (a click gesture) turns Video on, snaps the audio dial
|
||||
# to 2/10, dismisses itself, and starts the soundtrack IN that gesture.
|
||||
page.click("#run-sim")
|
||||
page.wait_for_selector("#run-sim.hidden", state="attached") # prompt dismissed
|
||||
assert page.is_checked("#visual") is True
|
||||
page.wait_for_function("document.getElementById('audio').value === '2'")
|
||||
page.wait_for_function("document.getElementById('audio-level-val').textContent === '2'")
|
||||
page.wait_for_selector("#black.hidden", state="attached") # video showing
|
||||
page.wait_for_function(
|
||||
"(() => { const a = document.getElementById('aud');"
|
||||
" return /\\/media\\/audio\\/.+\\.mp3/.test(a.src) && !a.paused; })()"
|
||||
)
|
||||
|
||||
|
||||
def test_video_on_directly_couples_audio_to_two_and_dismisses_button(page):
|
||||
# Turning Video on directly (skipping the Run simulation button) ALSO begins the
|
||||
# experience: audio snaps to 2/10, the soundtrack plays, and the button goes away.
|
||||
_toggle_visual(page) # off -> on
|
||||
page.wait_for_function("document.getElementById('audio').value === '3'")
|
||||
page.wait_for_function("document.getElementById('audio-level-val').textContent === '3'")
|
||||
page.wait_for_function("document.getElementById('audio').value === '2'")
|
||||
page.wait_for_function("document.getElementById('audio-level-val').textContent === '2'")
|
||||
page.wait_for_selector("#run-sim.hidden", state="attached") # prompt dismissed
|
||||
page.wait_for_selector("#black.hidden", state="attached") # video showing
|
||||
page.wait_for_function(
|
||||
"(() => { const a = document.getElementById('aud');"
|
||||
|
||||
Reference in New Issue
Block a user