snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/device-selection/components/AudioInputPreview.web.tsx

@@ -0,0 +1,102 @@
+import React, { useEffect, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import JitsiMeetJS from '../../base/lib-jitsi-meet/_.web';
+
+const JitsiTrackEvents = JitsiMeetJS.events.track;
+
+/**
+ * The type of the React {@code Component} props of {@link AudioInputPreview}.
+ */
+interface IProps {
+
+    /**
+     * The JitsiLocalTrack to show an audio level meter for.
+     */
+    track: any;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            display: 'flex'
+        },
+
+        section: {
+            flex: 1,
+            height: '4px',
+            borderRadius: '1px',
+            backgroundColor: theme.palette.labelBackground,
+            marginRight: theme.spacing(1),
+
+            '&:last-of-type': {
+                marginRight: 0
+            }
+        },
+
+        activeSection: {
+            backgroundColor: theme.palette.success01
+        }
+    };
+});
+
+const NO_OF_PREVIEW_SECTIONS = 11;
+
+const AudioInputPreview = (props: IProps) => {
+    const [ audioLevel, setAudioLevel ] = useState(0);
+    const { classes, cx } = useStyles();
+
+    /**
+     * Starts listening for audio level updates from the library.
+     *
+     * @param {JitsiLocalTrack} track - The track to listen to for audio level
+     * updates.
+     * @private
+     * @returns {void}
+     */
+    function _listenForAudioUpdates(track: any) {
+        _stopListeningForAudioUpdates();
+
+        track?.on(
+            JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED,
+            setAudioLevel);
+    }
+
+    /**
+     * Stops listening to further updates from the current track.
+     *
+     * @private
+     * @returns {void}
+     */
+    function _stopListeningForAudioUpdates() {
+        props.track?.off(
+            JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED,
+            setAudioLevel);
+    }
+
+    useEffect(() => {
+        _listenForAudioUpdates(props.track);
+
+        return _stopListeningForAudioUpdates;
+    }, []);
+
+    useEffect(() => {
+        _listenForAudioUpdates(props.track);
+        setAudioLevel(0);
+    }, [ props.track ]);
+
+    const audioMeterFill = Math.ceil(Math.floor(audioLevel * 100) / (100 / NO_OF_PREVIEW_SECTIONS));
+
+    return (
+        <div className = { classes.container } >
+            {new Array(NO_OF_PREVIEW_SECTIONS).fill(0)
+                    .map((_, idx) =>
+                        (<div
+                            className = { cx(classes.section, idx < audioMeterFill && classes.activeSection) }
+                            key = { idx } />)
+                    )}
+        </div>
+    );
+};
+
+export default AudioInputPreview;