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

react/features/filmstrip/components/web/ThumbnailAudioIndicator.tsx

@@ -0,0 +1,46 @@
+import React, { useEffect, useState } from 'react';
+
+import AudioLevelIndicator from '../../../audio-level-indicator/components/AudioLevelIndicator';
+import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
+import { ITrack } from '../../../base/tracks/types';
+
+const JitsiTrackEvents = JitsiMeetJS.events.track;
+
+interface IProps {
+
+    /**
+     * The audio track related to the participant.
+     */
+    _audioTrack?: ITrack;
+}
+
+const ThumbnailAudioIndicator = ({
+    _audioTrack
+}: IProps) => {
+    const [ audioLevel, setAudioLevel ] = useState(0);
+
+    useEffect(() => {
+        setAudioLevel(0);
+        if (_audioTrack) {
+            const { jitsiTrack } = _audioTrack;
+
+            jitsiTrack?.on(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+        }
+
+        return () => {
+            if (_audioTrack) {
+                const { jitsiTrack } = _audioTrack;
+
+                jitsiTrack?.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, setAudioLevel);
+            }
+        };
+    }, [ _audioTrack ]);
+
+    return (
+        <span className = 'audioindicator-container'>
+            <AudioLevelIndicator audioLevel = { audioLevel } />
+        </span>
+    );
+};
+
+export default ThumbnailAudioIndicator;