96 lines
2.7 KiB
TypeScript
Executable File
96 lines
2.7 KiB
TypeScript
Executable File
import {Slider} from '@common/ui/forms/slider/slider';
|
|
import {usePlayerActions} from '@common/player/hooks/use-player-actions';
|
|
import {usePlayerStore} from '@common/player/hooks/use-player-store';
|
|
import {IconButton} from '@common/ui/buttons/icon-button';
|
|
import {BaseSliderProps} from '@common/ui/forms/slider/base-slider';
|
|
import {ButtonProps} from '@common/ui/buttons/button';
|
|
import {MediaMuteIcon} from '@common/icons/media/media-mute';
|
|
import {MediaVolumeLowIcon} from '@common/icons/media/media-volume-low';
|
|
import {MediaVolumeHighIcon} from '@common/icons/media/media-volume-high';
|
|
import {Tooltip} from '@common/ui/tooltip/tooltip';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import clsx from 'clsx';
|
|
|
|
interface Props {
|
|
trackColor?: BaseSliderProps['trackColor'];
|
|
fillColor?: BaseSliderProps['fillColor'];
|
|
buttonColor?: ButtonProps['color'];
|
|
className?: string;
|
|
}
|
|
export function VolumeControls({
|
|
trackColor,
|
|
fillColor,
|
|
buttonColor,
|
|
className,
|
|
}: Props) {
|
|
const volume = usePlayerStore(s => s.volume);
|
|
const player = usePlayerActions();
|
|
const playerReady = usePlayerStore(s => s.providerReady);
|
|
|
|
return (
|
|
<div className={clsx('flex w-min items-center gap-4', className)}>
|
|
<ToggleMuteButton color={buttonColor} />
|
|
<Slider
|
|
isDisabled={!playerReady}
|
|
showThumbOnHoverOnly
|
|
thumbSize="w-14 h-14"
|
|
trackColor={trackColor}
|
|
fillColor={fillColor}
|
|
minValue={0}
|
|
maxValue={100}
|
|
className="flex-auto"
|
|
width="w-96"
|
|
value={volume}
|
|
onChange={value => {
|
|
player.setVolume(value);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
interface ToggleMuteButtonProps {
|
|
color?: ButtonProps['color'];
|
|
size?: ButtonProps['size'];
|
|
iconSize?: ButtonProps['size'];
|
|
}
|
|
export function ToggleMuteButton({
|
|
color,
|
|
size = 'sm',
|
|
iconSize = 'md',
|
|
}: ToggleMuteButtonProps) {
|
|
const isMuted = usePlayerStore(s => s.muted);
|
|
const volume = usePlayerStore(s => s.volume);
|
|
const player = usePlayerActions();
|
|
const playerReady = usePlayerStore(s => s.providerReady);
|
|
|
|
if (isMuted) {
|
|
return (
|
|
<Tooltip label={<Trans message="Unmute" />} usePortal={false}>
|
|
<IconButton
|
|
disabled={!playerReady}
|
|
color={color}
|
|
size={size}
|
|
iconSize={iconSize}
|
|
onClick={() => player.setMuted(false)}
|
|
>
|
|
<MediaMuteIcon />
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|
|
return (
|
|
<Tooltip label={<Trans message="Mute" />}>
|
|
<IconButton
|
|
disabled={!playerReady}
|
|
color={color}
|
|
size={size}
|
|
iconSize={iconSize}
|
|
onClick={() => player.setMuted(true)}
|
|
>
|
|
{volume < 40 ? <MediaVolumeLowIcon /> : <MediaVolumeHighIcon />}
|
|
</IconButton>
|
|
</Tooltip>
|
|
);
|
|
}
|