Selaa lähdekoodia

fix(live-streaming): add beta tag to toolbar button (#3263)

master
virtuacoplenny 7 vuotta sitten
vanhempi
commit
b9f28a1beb
No account linked to committer's email address

+ 12
- 0
react/features/base/toolbox/components/AbstractButton.js Näytä tiedosto

@@ -140,6 +140,17 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
140 140
         // To be implemented by subclass.
141 141
     }
142 142
 
143
+    /**
144
+     * Helper function to be implemented by subclasses, which may return a new
145
+     * React Element to be appended at the end of the button.
146
+     *
147
+     * @protected
148
+     * @returns {ReactElement|null}
149
+     */
150
+    _getElementAfter() {
151
+        return null;
152
+    }
153
+
143 154
     /**
144 155
      * Gets the current icon name, taking the toggled state into account. If no
145 156
      * toggled icon is provided, the regular icon will also be used in the
@@ -243,6 +254,7 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
243 254
         const props = {
244 255
             ...this.props,
245 256
             accessibilityLabel: this.accessibilityLabel,
257
+            elementAfter: this._getElementAfter(),
246 258
             iconName: this._getIconName(),
247 259
             label: this._getLabel(),
248 260
             styles: this._getStyles(),

+ 5
- 0
react/features/base/toolbox/components/AbstractToolboxItem.js Näytä tiedosto

@@ -41,6 +41,11 @@ export type Props = {
41 41
      */
42 42
     disabled: boolean,
43 43
 
44
+    /**
45
+     * A React Element to display at the end of {@code ToolboxItem}.
46
+     */
47
+    elementAfter?: React$Node,
48
+
44 49
     /**
45 50
      * The name of the icon of this {@code ToolboxItem}.
46 51
      */

+ 2
- 0
react/features/base/toolbox/components/ToolboxItem.web.js Näytä tiedosto

@@ -22,6 +22,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
22 22
     _renderItem() {
23 23
         const {
24 24
             disabled,
25
+            elementAfter,
25 26
             onClick,
26 27
             showLabel,
27 28
             tooltipPosition
@@ -41,6 +42,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
41 42
                 { showLabel && <span>
42 43
                     { this.label }
43 44
                 </span> }
45
+                { elementAfter }
44 46
             </Fragment>
45 47
         );
46 48
 

+ 17
- 0
react/features/recording/components/LiveStream/LiveStreamButton.web.js Näytä tiedosto

@@ -1,5 +1,6 @@
1 1
 // @flow
2 2
 
3
+import React from 'react';
3 4
 import { connect } from 'react-redux';
4 5
 
5 6
 import { translate } from '../../../base/i18n';
@@ -56,6 +57,22 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
56 57
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
57 58
     }
58 59
 
60
+    /**
61
+     * Helper function to be implemented by subclasses, which returns a React
62
+     * Element to display (a beta tag) at the end of the button.
63
+     *
64
+     * @override
65
+     * @protected
66
+     * @returns {boolean}
67
+     */
68
+    _getElementAfter() {
69
+        return (
70
+            <span className = 'beta-tag'>
71
+                { this.props.t('recording.beta') }
72
+            </span>
73
+        );
74
+    }
75
+
59 76
     /**
60 77
      * Helper function to be implemented by subclasses, which must return a
61 78
      * boolean value indicating if this button is disabled or not.

Loading…
Peruuta
Tallenna