Highlight speaker on group calls

This commit is contained in:
Alvaro 2023-02-28 13:01:52 -07:00 committed by GitHub
parent 3d4248e070
commit 23cbd2c8b3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 25 deletions

View file

@ -4,8 +4,12 @@
import React, { useState, useEffect } from 'react';
import { boolean } from '@storybook/addon-knobs';
import { CallingAudioIndicator } from './CallingAudioIndicator';
import {
CallingAudioIndicator,
SPEAKING_LINGER_MS,
} from './CallingAudioIndicator';
import { AUDIO_LEVEL_INTERVAL_MS } from '../calling/constants';
import { useValueAtFixedRate } from '../hooks/useValueAtFixedRate';
export default {
title: 'Components/CallingAudioIndicator',
@ -24,10 +28,13 @@ export function Extreme(): JSX.Element {
};
}, [audioLevel, setAudioLevel]);
const isSpeaking = useValueAtFixedRate(audioLevel > 0, SPEAKING_LINGER_MS);
return (
<CallingAudioIndicator
hasAudio={boolean('hasAudio', true)}
audioLevel={audioLevel}
shouldShowSpeaking={isSpeaking}
/>
);
}
@ -45,10 +52,13 @@ export function Random(): JSX.Element {
};
}, [audioLevel, setAudioLevel]);
const isSpeaking = useValueAtFixedRate(audioLevel > 0, SPEAKING_LINGER_MS);
return (
<CallingAudioIndicator
hasAudio={boolean('hasAudio', true)}
audioLevel={audioLevel}
shouldShowSpeaking={isSpeaking}
/>
);
}