Add microphone cutoff option

locales/en/app.json

@@ -206,6 +206,11 @@
     "audio_tab": {
       "effect_volume_description": "Adjust the volume at which reactions and hand raised effects play.",
       "effect_volume_label": "Sound effect volume",
+      "mic_cutoff_description": "Sound quieter than the cutoff volume will not be sent to other participants.",
+      "mic_cutoff_header": "Microphone cutoff",
+      "mic_cutoff_label": "Mute microphone input below a volume cutoff",
+      "mic_cutoff_not_supported": "(Microphone cutoff is not supported by this browser.)",
+      "mic_cutoff_threshold_label": "Cutoff volume",
       "rnnoise_header": "Noise suppression",
       "rnnoise_label": "Enable enhanced noise suppression (RNNoise)",
       "rnnoise_not_supported": "(Enhanced noise suppression is not supported by this browser.)",

src/Slider.module.css

@@ -40,6 +40,22 @@ Please see LICENSE in the repository root for full details.
   background: var(--cpd-color-bg-action-primary-disabled);
 }
 
+.level {
+  position: absolute;
+  block-size: 100%;
+  inline-size: 0;
+  border-radius: var(--cpd-radius-pill-effect);
+  background: var(--cpd-color-icon-quaternary);
+  transition:
+    inline-size 0.06s linear,
+    background-color 0.1s ease;
+  pointer-events: none;
+}
+
+.levelAbove {
+  background: var(--cpd-color-icon-success-primary);
+}
+
 .handle {
   display: block;
   block-size: var(--cpd-space-4x);

src/Slider.tsx

@@ -36,6 +36,12 @@ interface Props {
    * displayed as a percentage.
    */
   tooltipFormatter?: (value: number) => string;
+  /**
+   * Live input level to render as a meter inside the track, as a fraction
+   * (0-1) of the slider's range. The meter is highlighted while the level
+   * exceeds the slider's current value.
+   */
+  level?: number;
 }
 
 /**
@@ -52,6 +58,7 @@ export const Slider: FC<Props> = ({
   step,
   disabled,
   tooltipFormatter,
+  level,
 }) => {
   const onValueChange = useCallback(
     ([v]: number[]) => onValueChangeProp(v),
@@ -61,6 +68,8 @@ export const Slider: FC<Props> = ({
     ([v]: number[]) => onValueCommitProp?.(v),
     [onValueCommitProp],
   );
+  const levelAboveValue =
+    level !== undefined && max > min && level >= (value - min) / (max - min);
 
   return (
     <Root
@@ -75,6 +84,15 @@ export const Slider: FC<Props> = ({
     >
       <Track className={styles.track}>
         <Range className={styles.highlight} />
+        {level !== undefined && (
+          <div
+            data-testid="slider-level-meter"
+            className={classNames(styles.level, {
+              [styles.levelAbove]: levelAboveValue,
+            })}
+            style={{ inlineSize: `${Math.max(0, Math.min(1, level)) * 100}%` }}
+          />
+        )}
       </Track>
       {/* Note: This is expected not to be visible on mobile.*/}
       <Tooltip