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
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import type React from "react";
import { type FC, type MouseEvent, useEffect, useState } from "react";
import { cn } from "../../../utils/bem";
 
import "./AudioControl.scss";
import { IconSoundConfig, IconSoundMutedConfig } from "@humansignal/ui";
import { ControlButton } from "../Controls";
import { Slider } from "./Slider";
 
const MAX_VOL = 100;
 
export interface AudioControlProps {
  volume: number;
  audioModal: boolean;
  onVolumeChange?: (volume: number) => void;
  onSetModal?: (e: MouseEvent<HTMLButtonElement>) => void;
}
 
export const AudioControl: FC<AudioControlProps> = ({ volume, onVolumeChange, onSetModal, audioModal }) => {
  const [isMuted, setMute] = useState(false);
 
  useEffect(() => {
    if (volume <= 0) {
      setMute(true);
    } else {
      setMute(false);
    }
  }, [volume]);
 
  const handleSetVolume = (e: React.FormEvent<HTMLInputElement>) => {
    const _volumeValue = Number.parseInt(e.currentTarget.value);
 
    if (!_volumeValue) {
      onVolumeChange?.(0);
      return;
    }
    if (_volumeValue > MAX_VOL) {
      onVolumeChange?.(MAX_VOL / 100);
      return;
    }
    if (_volumeValue < 0) {
      onVolumeChange?.(0);
      return;
    }
 
    onVolumeChange?.(_volumeValue / MAX_VOL);
  };
 
  const handleSetMute = () => {
    setMute(!isMuted);
    onVolumeChange?.(!isMuted ? 0 : 1);
  };
 
  const renderModal = () => {
    return (
      <div className={cn("audio-control").elem("modal").toClassName()}>
        <Slider
          min={0}
          max={MAX_VOL}
          value={Math.round(volume * MAX_VOL)}
          onChange={handleSetVolume}
          description={"Volume"}
          info={"Increase or decrease the volume of the audio"}
        />
        {renderMuteButton()}
      </div>
    );
  };
 
  const renderMuteButton = () => {
    return (
      <div className={cn("audio-control").elem("mute").toClassName()}>
        <div className={cn("audio-control").elem("mute-button").toClassName()} onClick={handleSetMute}>
          {isMuted ? "Unmute" : "Mute"}
        </div>
      </div>
    );
  };
 
  return (
    <div
      className={cn("audio-control").toClassName()}
      onClick={(e: MouseEvent<HTMLButtonElement>) => e.stopPropagation()}
    >
      <ControlButton look={audioModal ? "filled" : undefined} onClick={onSetModal}>
        {isMuted ? <IconSoundMutedConfig /> : <IconSoundConfig />}
      </ControlButton>
      {audioModal && renderModal()}
    </div>
  );
};