init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
import { type CSSProperties, type FC, useMemo, useRef } from "react";
import { IconVolumeFull, IconVolumeHalf, IconVolumeMute } from "@humansignal/icons";
import { Range } from "../../../common/Range/Range";
import { WS_VOLUME } from "../../../tags/object/Audio/constants";
import type { TimelineSideControlProps } from "../Types";
 
export const AudioVolumeControl: FC<TimelineSideControlProps> = ({ volume = 0.5, onVolumeChange }) => {
  const storedVolume = useRef(volume);
  const style: CSSProperties = { color: "#99A0AE" };
  const icon = useMemo(() => {
    if (volume > 0.5) return <IconVolumeFull style={style} />;
    if (volume > 0) return <IconVolumeHalf style={style} />;
    return <IconVolumeMute style={style} />;
  }, [volume]);
 
  return (
    <Range
      continuous
      min={WS_VOLUME.min}
      max={WS_VOLUME.max}
      step={WS_VOLUME.step}
      value={volume}
      minIcon={icon}
      onChange={(volume) => onVolumeChange?.(Number(volume))}
      onMinIconClick={() => {
        if (volume === 0) {
          onVolumeChange?.(storedVolume.current);
        } else {
          storedVolume.current = volume;
          onVolumeChange?.(0);
        }
      }}
    />
  );
};