apple2js/js/components/AudioControl.tsx
Will Scullin e525e12c3c
React linters (#117)
* React hook linter

* React linting

* Simplify config
2022-05-29 13:48:51 -07:00

52 lines
1.5 KiB
TypeScript

import { h } from 'preact';
import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
import { ControlButton } from './ControlButton';
import { OptionsContext } from './OptionsContext';
import { Audio, SOUND_ENABLED_OPTION } from '../ui/audio';
import { Apple2 as Apple2Impl } from '../apple2';
/**
* AudioControl component properties.
*/
export interface AudioControlProps {
apple2: Apple2Impl | undefined;
}
/**
* Control that instantiates the Audio object and provides
* a control to mute and unmute audio.
*
* @param apple2 The Apple2 object
* @returns AudioControl component
*/
export const AudioControl = ({ apple2 }: AudioControlProps) => {
const [audioEnabled, setAudioEnabled] = useState(false);
const [audio, setAudio] = useState<Audio>();
const options = useContext(OptionsContext);
useEffect(() => {
if (apple2) {
const io = apple2.getIO();
const audio = new Audio(io);
options.addOptions(audio);
setAudio(audio);
setAudioEnabled(audio.isEnabled());
}
}, [apple2, options]);
const doToggleSound = useCallback(() => {
const on = !audio?.isEnabled();
options.setOption(SOUND_ENABLED_OPTION, on);
setAudioEnabled(on);
}, [audio, options]);
return (
<ControlButton
onClick={doToggleSound}
title="Toggle Sound"
disabled={!audio}
icon={audioEnabled ? 'volume-up' : 'volume-off'}
/>
);
};