audio_controls

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

HTML IDs

HTML ID constants for alignment audio control elements.

---

source

AlignAudioControlIds

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

HTML ID constants for alignment audio control elements.

Auto-Navigate Toggle

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

---

source

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.

---

source

render_align_audio_controls

def render_align_audio_controls(
    auto_navigate:bool=False, # Whether auto-navigate is enabled
    oob:bool=False, # Whether to render as OOB swap
)->Any: # Combined audio controls component

Render alignment audio controls (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 container with OOB
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

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

print('Alignment audio controls tests passed')

Alignment audio controls tests passed