jiti-meet/react/features/filmstrip/components/web/ThumbnailAudioIndicator.js

48 lines
1.1 KiB
JavaScript

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