Fix sticky recording labels

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<Props> {
+    extends Component<Props, State> {
+    /**
+     * 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
+            });
+        }
+    }
+
 }
 
 /**

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 (
             <div>
                 <CircularLabel