BigBlueButton/bigbluebutton-Github
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

clone unmuted input stream for usage with hark

Browse Source
This commit is contained in:
KDSBrowne 2021-01-30 17:04:07 +00:00
parent e101d037f2
commit d3fa32e111
2 changed files with 39 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
bigbluebutton-html5/imports/ui/components/audio/audio-controls/component.jsx
View File

@ -100,9 +100,15 @@ class AudioControls extends PureComponent {
const MUTE_ALERT_CONFIG = Meteor.settings.public.app.mutedAlert;
const { enabled: muteAlertEnabled } = MUTE_ALERT_CONFIG;
return (
<span className={styles.container}>
{muted && muteAlertEnabled ? <MutedAlert {...{ inputStream, isViewer, isPresenter }} /> : null}
{inputStream && muteAlertEnabled ? (
<MutedAlert {...{
muted, inputStream, isViewer, isPresenter,
}}
/>
) : null}
{showMute && isVoiceUser ? toggleMuteBtn : null}
<Button
className={cx(inAudio || styles.btn)}

48
bigbluebutton-html5/imports/ui/components/muted-alert/component.jsx
View File

@ -10,6 +10,9 @@ const MUTE_ALERT_CONFIG = Meteor.settings.public.app.mutedAlert;
const propTypes = {
inputStream: PropTypes.object.isRequired,
isPresenter: PropTypes.bool.isRequired,
isViewer: PropTypes.bool.isRequired,
muted: PropTypes.bool.isRequired,
};
class MutedAlert extends Component {
@ -20,28 +23,36 @@ class MutedAlert extends Component {
visible: false,
};
this.inputStream = null;
this.speechEvents = null;
this.timer = null;
this.cloneMediaStream = this.cloneMediaStream.bind(this);
this.resetTimer = this.resetTimer.bind(this);
}
componentDidMount() {
this._isMounted = true;
const { inputStream } = this.props;
const { interval, threshold, duration } = MUTE_ALERT_CONFIG;
this.speechEvents = hark(inputStream, { interval, threshold });
this.speechEvents.on('speaking', () => {
this.resetTimer();
if (this._isMounted) this.setState({ visible: true });
});
this.speechEvents.on('stopped_speaking', () => {
if (this._isMounted) {
this.timer = setTimeout(() => this.setState(
{ visible: false },
), duration);
}
});
this.cloneMediaStream();
if (this.inputStream) {
const { interval, threshold, duration } = MUTE_ALERT_CONFIG;
this.speechEvents = hark(this.inputStream, { interval, threshold });
this.speechEvents.on('speaking', () => {
this.resetTimer();
if (this._isMounted) this.setState({ visible: true });
});
this.speechEvents.on('stopped_speaking', () => {
if (this._isMounted) {
this.timer = setTimeout(() => this.setState(
{ visible: false },
), duration);
}
});
}
}
componentDidUpdate() {
this.cloneMediaStream();
}
componentWillUnmount() {
@ -50,18 +61,23 @@ class MutedAlert extends Component {
this.resetTimer();
}
cloneMediaStream() {
const { inputStream, muted } = this.props;
if (inputStream && !muted) this.inputStream = inputStream.clone();
}
resetTimer() {
if (this.timer) clearTimeout(this.timer);
this.timer = null;
}
render() {
const { isViewer, isPresenter } = this.props;
const { isViewer, isPresenter, muted } = this.props;
const { visible } = this.state;
const style = {};
style[styles.alignForMod] = !isViewer || isPresenter;
return visible ? (
return visible && muted ? (
<div className={cx(styles.muteWarning, style)}>
<span>
<FormattedMessage