31 lines
937 B
TypeScript
31 lines
937 B
TypeScript
import { useSound } from '../audio/SoundContext';
|
|
import { musicTracks } from '../theme/assets';
|
|
import styles from './MusicTracks.module.css';
|
|
|
|
/** One checkbox per registered music track; unchecked tracks are skipped by the playlist. */
|
|
export function MusicTracks() {
|
|
const { settings, setSettings } = useSound();
|
|
|
|
const toggleTrack = (id: string, enabled: boolean) =>
|
|
setSettings({
|
|
disabledTracks: enabled ? settings.disabledTracks.filter((t) => t !== id) : [...settings.disabledTracks, id],
|
|
});
|
|
|
|
return (
|
|
<ul className={styles.tracks}>
|
|
{musicTracks.map((track) => (
|
|
<li key={track.id}>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={!settings.disabledTracks.includes(track.id)}
|
|
onChange={(e) => toggleTrack(track.id, e.target.checked)}
|
|
/>
|
|
{track.title}
|
|
</label>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|