Pārlūkot izejas kodu

Fix sticky recording labels

master
Bettenbuk Zoltan 7 gadus atpakaļ
vecāks
revīzija
6953569629

+ 71
- 2
react/features/recording/components/AbstractRecordingLabel.js Parādīt failu

32
     t: Function
32
     t: Function
33
 };
33
 };
34
 
34
 
35
+/**
36
+ * State of the component.
37
+ */
38
+type State = {
39
+
40
+    /**
41
+     * True if the label status is stale, so it needs to be removed.
42
+     */
43
+    staleLabel: boolean
44
+};
45
+
46
+/**
47
+ * The timeout after a label is considered stale. See {@code _updateStaleStatus}
48
+ * for more details.
49
+ */
50
+const STALE_TIMEOUT = 10 * 1000;
51
+
35
 /**
52
 /**
36
  * Abstract class for the {@code RecordingLabel} component.
53
  * Abstract class for the {@code RecordingLabel} component.
37
  */
54
  */
38
 export default class AbstractRecordingLabel
55
 export default class AbstractRecordingLabel
39
-    extends Component<Props> {
56
+    extends Component<Props, State> {
57
+    /**
58
+     * Initializes a new {@code AbstractRecordingLabel} component.
59
+     *
60
+     * @inheritdoc
61
+     */
62
+    constructor(props: Props) {
63
+        super(props);
64
+
65
+        this.state = {
66
+            staleLabel: false
67
+        };
68
+
69
+        this._updateStaleStatus({}, props);
70
+    }
71
+
72
+    /**
73
+     * Implements {@code Component#componentWillReceiveProps}.
74
+     *
75
+     * @inheritdoc
76
+     */
77
+    componentWillReceiveProps(newProps: Props) {
78
+        this._updateStaleStatus(this.props, newProps);
79
+    }
40
 
80
 
41
     /**
81
     /**
42
      * Implements React {@code Component}'s render.
82
      * Implements React {@code Component}'s render.
44
      * @inheritdoc
84
      * @inheritdoc
45
      */
85
      */
46
     render() {
86
     render() {
47
-        return this.props._status ? this._renderLabel() : null;
87
+        return this.props._status && !this.state.staleLabel
88
+            ? this._renderLabel() : null;
48
     }
89
     }
49
 
90
 
50
     _getLabelKey: () => ?string
91
     _getLabelKey: () => ?string
75
      */
116
      */
76
     _renderLabel: () => React$Element<*>
117
     _renderLabel: () => React$Element<*>
77
 
118
 
119
+    /**
120
+     * Updates the stale status of the label on a prop change. A label is stale
121
+     * if it's in a {@code _status} that doesn't need to be rendered anymore.
122
+     *
123
+     * @param {Props} oldProps - The previous props of the component.
124
+     * @param {Props} newProps - The new props of the component.
125
+     * @returns {void}
126
+     */
127
+    _updateStaleStatus(oldProps, newProps) {
128
+        if (newProps._status === JitsiRecordingConstants.status.OFF) {
129
+            if (oldProps._status !== JitsiRecordingConstants.status.OFF) {
130
+                setTimeout(() => {
131
+                    // Only if it's still OFF.
132
+                    if (this.props._status
133
+                            === JitsiRecordingConstants.status.OFF) {
134
+                        this.setState({
135
+                            staleLabel: true
136
+                        });
137
+                    }
138
+                }, STALE_TIMEOUT);
139
+            }
140
+        } else if (this.state.staleLabel) {
141
+            this.setState({
142
+                staleLabel: false
143
+            });
144
+        }
145
+    }
146
+
78
 }
147
 }
79
 
148
 
80
 /**
149
 /**

+ 7
- 0
react/features/recording/components/RecordingLabel.web.js Parādīt failu

4
 import { connect } from 'react-redux';
4
 import { connect } from 'react-redux';
5
 
5
 
6
 import { CircularLabel } from '../../base/label';
6
 import { CircularLabel } from '../../base/label';
7
+import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
7
 import { translate } from '../../base/i18n';
8
 import { translate } from '../../base/i18n';
8
 
9
 
9
 import AbstractRecordingLabel, {
10
 import AbstractRecordingLabel, {
23
      * @inheritdoc
24
      * @inheritdoc
24
      */
25
      */
25
     _renderLabel() {
26
     _renderLabel() {
27
+        if (this.props._status !== JitsiRecordingConstants.status.ON) {
28
+            // Since there are no expanded labels on web, we only render this
29
+            // label when the recording status is ON.
30
+            return null;
31
+        }
32
+
26
         return (
33
         return (
27
             <div>
34
             <div>
28
                 <CircularLabel
35
                 <CircularLabel

Notiek ielāde…
Atcelt
Saglabāt