Audio settings components connect directly to the audio navigator and Redux state. They render the appropriate control variant (slider, slider with presets, or number field) based on the settings.keys configuration in ThAudioPreferences.
All components accept a standalone prop. When true (the default), the component renders without additional wrapper styling — useful when embedding outside the default settings panel.
Toggle for continuous play. When enabled, the player automatically loads and plays the next track when the current one ends. When disabled, the next track is loaded but playback does not start automatically.
interface StatefulAudioAutoPlayProps {
standalone?: boolean;
}Reads and updates audioSettings.autoPlay in Redux, and submits autoPlay to the navigator preferences.
Unified skip interval control — sets both forward and backward skip durations to the same value.
interface StatefulAudioSkipIntervalProps {
standalone?: boolean;
}Renders as a preset group, slider with presets, slider, or number field depending on settings.keys.skipInterval.variant. Defaults to presetsGroup. Updates both skipForwardInterval and skipBackwardInterval in Redux simultaneously.
Note
Use either StatefulAudioSkipInterval or the pair StatefulAudioSkipBackwardInterval + StatefulAudioSkipForwardInterval — not both. Including both in settings.order will trigger a console warning from createAudioPreferences.
Independent control for the backward skip duration.
interface StatefulAudioSkipBackwardIntervalProps {
standalone?: boolean;
}Renders based on settings.keys.skipBackwardInterval.variant. Defaults to presetsGroup. Updates only skipBackwardInterval in Redux.
Independent control for the forward skip duration.
interface StatefulAudioSkipForwardIntervalProps {
standalone?: boolean;
}Renders based on settings.keys.skipForwardInterval.variant. Defaults to presetsGroup. Updates only skipForwardInterval in Redux.
All settings components share these characteristics:
- Preference Integration: Direct integration with the preferences system
- Audio Navigation: Real-time updates to the audio player
- Redux State: Centralized state management for applied settings
- Accessibility: ARIA attributes and keyboard navigation support
- Styling: Consistent styling through CSS modules