diff --git a/react/features/recording/components/AbstractRecordingLabel.js b/react/features/recording/components/AbstractRecordingLabel.js index 412a93197..78fcb5c34 100644 --- a/react/features/recording/components/AbstractRecordingLabel.js +++ b/react/features/recording/components/AbstractRecordingLabel.js @@ -32,11 +32,51 @@ type Props = { t: Function }; +/** + * State of the component. + */ +type State = { + + /** + * True if the label status is stale, so it needs to be removed. + */ + staleLabel: boolean +}; + +/** + * The timeout after a label is considered stale. See {@code _updateStaleStatus} + * for more details. + */ +const STALE_TIMEOUT = 10 * 1000; + /** * Abstract class for the {@code RecordingLabel} component. */ export default class AbstractRecordingLabel - extends Component { + extends Component { + /** + * Initializes a new {@code AbstractRecordingLabel} component. + * + * @inheritdoc + */ + constructor(props: Props) { + super(props); + + this.state = { + staleLabel: false + }; + + this._updateStaleStatus({}, props); + } + + /** + * Implements {@code Component#componentWillReceiveProps}. + * + * @inheritdoc + */ + componentWillReceiveProps(newProps: Props) { + this._updateStaleStatus(this.props, newProps); + } /** * Implements React {@code Component}'s render. @@ -44,7 +84,8 @@ export default class AbstractRecordingLabel * @inheritdoc */ render() { - return this.props._status ? this._renderLabel() : null; + return this.props._status && !this.state.staleLabel + ? this._renderLabel() : null; } _getLabelKey: () => ?string @@ -75,6 +116,34 @@ export default class AbstractRecordingLabel */ _renderLabel: () => React$Element<*> + /** + * Updates the stale status of the label on a prop change. A label is stale + * if it's in a {@code _status} that doesn't need to be rendered anymore. + * + * @param {Props} oldProps - The previous props of the component. + * @param {Props} newProps - The new props of the component. + * @returns {void} + */ + _updateStaleStatus(oldProps, newProps) { + if (newProps._status === JitsiRecordingConstants.status.OFF) { + if (oldProps._status !== JitsiRecordingConstants.status.OFF) { + setTimeout(() => { + // Only if it's still OFF. + if (this.props._status + === JitsiRecordingConstants.status.OFF) { + this.setState({ + staleLabel: true + }); + } + }, STALE_TIMEOUT); + } + } else if (this.state.staleLabel) { + this.setState({ + staleLabel: false + }); + } + } + } /** diff --git a/react/features/recording/components/RecordingLabel.web.js b/react/features/recording/components/RecordingLabel.web.js index 998b168f0..d66096536 100644 --- a/react/features/recording/components/RecordingLabel.web.js +++ b/react/features/recording/components/RecordingLabel.web.js @@ -4,6 +4,7 @@ import React from 'react'; import { connect } from 'react-redux'; import { CircularLabel } from '../../base/label'; +import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet'; import { translate } from '../../base/i18n'; import AbstractRecordingLabel, { @@ -23,6 +24,12 @@ class RecordingLabel extends AbstractRecordingLabel { * @inheritdoc */ _renderLabel() { + if (this.props._status !== JitsiRecordingConstants.status.ON) { + // Since there are no expanded labels on web, we only render this + // label when the recording status is ON. + return null; + } + return (