File size: 1,403 Bytes
d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import { FC } from "react"
import ControlButton from "../input/ControlButton"
import InputSlider from "../input/InputSlider"
import IconSoundMute from "../icon/IconSoundMute"
import IconSoundDown from "../icon/IconSoundDown"
import IconSoundOff from "../icon/IconSoundOff"
import IconSoundUp from "../icon/IconSoundUp"
interface Props {
muted: boolean
setMuted: (muted: boolean) => void
volume: number
setVolume: (volume: number) => void
interaction: (touch: boolean | null) => void
}
const VolumeControl: FC<Props> = ({
muted,
setMuted,
volume,
setVolume,
interaction,
}) => {
let sound
if (muted) {
sound = <IconSoundMute />
} else if (volume < 0.3) {
sound = <IconSoundOff />
} else if (volume < 0.7) {
sound = <IconSoundDown />
} else {
sound = <IconSoundUp />
}
return (
<div className={"flex flex-row items-center"}>
<ControlButton
tooltip={muted ? "Unmute" : "Mute"}
onClick={() => {
setMuted(!muted)
}}
interaction={interaction}
>
{sound}
</ControlButton>
<InputSlider
value={muted ? 0 : volume}
onChange={(newVolume) => {
if (muted) {
setMuted(false)
}
setVolume(newVolume)
interaction(null)
}}
className={"hide-below-sm"}
/>
</div>
)
}
export default VolumeControl
|