37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { faVolumeHigh, faVolumeXmark } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { useSoundEnabled } from "react-sounds";
|
|
import { useCameraBlackboard } from "../../hooks/useCameraBlackboard";
|
|
import { useEffect } from "react";
|
|
|
|
const SoundBtn = () => {
|
|
const { mutation, query } = useCameraBlackboard();
|
|
const [enabled, setEnabled] = useSoundEnabled();
|
|
|
|
const handleClick = async () => {
|
|
const newEnabled = !enabled;
|
|
setEnabled(newEnabled);
|
|
await mutation.mutateAsync({
|
|
operation: "INSERT",
|
|
path: "soundEnabled",
|
|
value: { enabled: newEnabled },
|
|
});
|
|
await mutation.mutateAsync({
|
|
operation: "SAVE",
|
|
path: "",
|
|
value: null,
|
|
});
|
|
};
|
|
useEffect(() => {
|
|
setEnabled(query?.data?.soundEnabled?.enabled);
|
|
}, [query?.data?.soundEnabled?.enabled, setEnabled]);
|
|
|
|
return (
|
|
<button onClick={handleClick}>
|
|
<FontAwesomeIcon icon={enabled ? faVolumeHigh : faVolumeXmark} size="2x" />
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default SoundBtn;
|