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

react/features/base/toolbox/components/AbstractButton.js

@@ -140,6 +140,17 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
         // To be implemented by subclass.
     }
 
+    /**
+     * Helper function to be implemented by subclasses, which may return a new
+     * React Element to be appended at the end of the button.
+     *
+     * @protected
+     * @returns {ReactElement|null}
+     */
+    _getElementAfter() {
+        return null;
+    }
+
     /**
      * Gets the current icon name, taking the toggled state into account. If no
      * 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> {
         const props = {
             ...this.props,
             accessibilityLabel: this.accessibilityLabel,
+            elementAfter: this._getElementAfter(),
             iconName: this._getIconName(),
             label: this._getLabel(),
             styles: this._getStyles(),

react/features/base/toolbox/components/AbstractToolboxItem.js

@@ -41,6 +41,11 @@ export type Props = {
      */
     disabled: boolean,
 
+    /**
+     * A React Element to display at the end of {@code ToolboxItem}.
+     */
+    elementAfter?: React$Node,
+
     /**
      * The name of the icon of this {@code ToolboxItem}.
      */

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -22,6 +22,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
     _renderItem() {
         const {
             disabled,
+            elementAfter,
             onClick,
             showLabel,
             tooltipPosition
@@ -41,6 +42,7 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
                 { showLabel && <span>
                     { this.label }
                 </span> }
+                { elementAfter }
             </Fragment>
         );
 

react/features/recording/components/LiveStream/LiveStreamButton.web.js

@@ -1,5 +1,6 @@
 // @flow
 
+import React from 'react';
 import { connect } from 'react-redux';
 
 import { translate } from '../../../base/i18n';
@@ -56,6 +57,22 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
         this.tooltip = newProps._liveStreamDisabledTooltipKey;
     }
 
+    /**
+     * Helper function to be implemented by subclasses, which returns a React
+     * Element to display (a beta tag) at the end of the button.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _getElementAfter() {
+        return (
+            <span className = 'beta-tag'>
+                { this.props.t('recording.beta') }
+            </span>
+        );
+    }
+
     /**
      * Helper function to be implemented by subclasses, which must return a
      * boolean value indicating if this button is disabled or not.