0c6e53cda4
Previously, dragging it all the way to the left would *not* mute the participant but rather bottom out at 10% volume, and people have found this unintuitive. Let's make it less silly by giving the slider a range of 0% to 100%, and making the mute toggle button have the same effect as dragging the slider to zero. When unmuting, it will reset to the last non-zero "committed" volume, similar to how the volume sliders in desktop environments work.
67 lines
1.4 KiB
TypeScript
67 lines
1.4 KiB
TypeScript
/*
|
|
Copyright 2023, 2024 New Vector Ltd.
|
|
|
|
SPDX-License-Identifier: AGPL-3.0-only
|
|
Please see LICENSE in the repository root for full details.
|
|
*/
|
|
|
|
import { FC, useCallback } from "react";
|
|
import { Root, Track, Range, Thumb } from "@radix-ui/react-slider";
|
|
import classNames from "classnames";
|
|
|
|
import styles from "./Slider.module.css";
|
|
|
|
interface Props {
|
|
className?: string;
|
|
label: string;
|
|
value: number;
|
|
onValueChange: (value: number) => void;
|
|
onValueCommit?: (value: number) => void;
|
|
min: number;
|
|
max: number;
|
|
step: number;
|
|
disabled?: boolean;
|
|
}
|
|
|
|
/**
|
|
* A slider control allowing a value to be selected from a range.
|
|
*/
|
|
export const Slider: FC<Props> = ({
|
|
className,
|
|
label,
|
|
value,
|
|
onValueChange: onValueChangeProp,
|
|
onValueCommit: onValueCommitProp,
|
|
min,
|
|
max,
|
|
step,
|
|
disabled,
|
|
}) => {
|
|
const onValueChange = useCallback(
|
|
([v]: number[]) => onValueChangeProp(v),
|
|
[onValueChangeProp],
|
|
);
|
|
const onValueCommit = useCallback(
|
|
([v]: number[]) => onValueCommitProp?.(v),
|
|
[onValueCommitProp],
|
|
);
|
|
|
|
return (
|
|
<Root
|
|
className={classNames(className, styles.slider)}
|
|
value={[value]}
|
|
onValueChange={onValueChange}
|
|
onValueCommit={onValueCommit}
|
|
min={min}
|
|
max={max}
|
|
step={step}
|
|
disabled={disabled}
|
|
>
|
|
<Track className={styles.track}>
|
|
<Range className={styles.highlight} />
|
|
</Track>
|
|
<Thumb className={styles.handle} aria-label={label} />
|
|
</Root>
|
|
);
|
|
};
|