audio_controls

Audio playback controls for the alignment card stack: auto-navigate toggle

HTML IDs

HTML ID constants for alignment audio control elements.

AlignAudioControlIds


def AlignAudioControlIds(
    args:VAR_POSITIONAL, kwargs:VAR_KEYWORD
):

HTML ID constants for alignment audio control elements.

Speed Selector Config

The speed selector itself is provided by cjm_fasthtml_web_audio.components.render_speed_selector. We only need a minimal WebAudioConfig here (namespace + enable_speed=True) to drive its namespace-derived IDs and window.setAlignSpeed / window.cycleAlignSpeed* wiring.

Defined locally (rather than reusing ALIGN_AUDIO_CONFIG from components.callbacks) to avoid a circular import — callbacks imports symbols from this module.

Auto-Navigate Toggle

Toggle switch to enable automatic navigation to the next VAD chunk when audio playback of the current chunk completes.

render_align_auto_navigate_toggle


def render_align_auto_navigate_toggle(
    enabled:bool=False, # Whether auto-navigate is enabled
)->Any: # Auto-navigate toggle component

Render auto-navigate toggle switch for alignment audio (client-side only).

Audio Controls Container

Wraps the toggle in an OOB-targetable container for chrome switching.

render_align_audio_controls


def render_align_audio_controls(
    current_speed:float=1.0, # Current playback speed
    auto_navigate:bool=False, # Whether auto-navigate is enabled
    speed_url:str='', # URL for speed changes (server persistence)
    oob:bool=False, # Whether to render as OOB swap
)->Any: # Combined audio controls component

Render alignment audio controls (speed selector + auto-navigate toggle).

Tests

from fasthtml.common import to_xml
import re

def _get_toggle_classes(html):
    """Extract class attribute from the toggle input element."""
    m = re.search(r'id="sd-align-auto-nav-toggle"[^>]*class="([^"]*)"', html)
    return m.group(1) if m else ""

# Test enabled toggle — green background, checked
html = to_xml(render_align_auto_navigate_toggle(enabled=True))
assert ' checked' in html
assert 'sd-align-auto-nav-toggle' in html
assert 'setAlignAutoNavigate' in html
assert 'hx-post' not in html  # No server persistence
toggle_cls = _get_toggle_classes(html)
assert 'bg-success' in toggle_cls
assert 'bg-error' not in toggle_cls

# Test disabled state — red background, no checked
html_off = to_xml(render_align_auto_navigate_toggle(enabled=False))
assert ' checked' not in html_off
toggle_cls_off = _get_toggle_classes(html_off)
assert 'bg-error' in toggle_cls_off
assert 'bg-success' not in toggle_cls_off

# Test color JS is in onchange (classList swap logic)
assert 'classList.remove' in html
assert 'classList.add' in html

# Container delegates speed selector to cjm-fasthtml-web-audio's render_speed_selector.
# Verify the container wires the library correctly at the integration boundary:
# namespace-derived IDs/functions present, persisted speed flows through, OOB attr applied.

# Default speed + no change_url: select rendered, no HTMX persistence, no sync script
html_default = to_xml(render_align_audio_controls(current_speed=1.0, auto_navigate=False))
assert 'sd-align-speed-select' in html_default  # Library-derived ID
assert 'setAlignSpeed' in html_default           # Library-derived onchange JS
assert 'sd-align-auto-nav-toggle' in html_default
assert 'sd-align-audio-controls' in html_default
assert 'hx-post' not in html_default             # speed_url empty → no HTMX
assert 'setAlignSpeed(1.0)' not in html_default  # speed==1.0 → sync script is no-op

# Non-default speed + change_url: HTMX persistence wired, sync script fires, selected option matches
html_wired = to_xml(render_align_audio_controls(current_speed=2.0, auto_navigate=True, speed_url="/x/speed"))
assert 'hx-post="/x/speed"' in html_wired
assert 'hx-trigger="change"' in html_wired
assert 'setAlignSpeed(2.0)' in html_wired  # Initial sync script
assert re.search(r'<option[^>]*value="2.0"[^>]*selected', html_wired)

# OOB wrapper
html_oob = to_xml(render_align_audio_controls(auto_navigate=True, oob=True))
assert 'hx-swap-oob' in html_oob
assert 'sd-align-audio-controls' in html_oob

print('Alignment audio controls tests passed')

Alignment audio controls tests passed