fix(blur): add beta label to toolbar button

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

@@ -0,0 +1,36 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { translate } from '../../i18n';
+import { Container, Text } from '../../react';
+
+type Props = {
+    t: Function
+};
+
+/**
+ * Creates a ReactElement for showing a ToolboxItem is for a beta feature.
+ *
+ * @extends {Component}
+ */
+class BetaTag extends Component<Props> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <Container className = 'beta-tag'>
+                <Text>
+                    { this.props.t('recording.beta') }
+                </Text>
+            </Container>
+        );
+    }
+}
+
+export default translate(BetaTag);

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

@@ -5,4 +5,5 @@ export { default as AbstractButton } from './AbstractButton';
 export type { Props as AbstractButtonProps } from './AbstractButton';
 export { default as AbstractHangupButton } from './AbstractHangupButton';
 export { default as AbstractVideoMuteButton } from './AbstractVideoMuteButton';
+export { default as BetaTag } from './BetaTag';
 export { default as OverflowMenuItem } from './OverflowMenuItem';

react/features/blur/components/VideoBlurButton.js

@@ -1,9 +1,11 @@
 // @flow
 
+import React from 'react';
+
 import { createVideoBlurEvent, sendAnalytics } from '../../analytics';
 import { translate } from '../../base/i18n';
 import { connect } from '../../base/redux';
-import { AbstractButton } from '../../base/toolbox';
+import { AbstractButton, BetaTag } from '../../base/toolbox';
 import type { AbstractButtonProps } from '../../base/toolbox';
 
 import { toggleBlurEffect } from '../actions';
@@ -35,6 +37,18 @@ class VideoBlurButton extends AbstractButton<Props, *> {
     tooltip = 'toolbar.startvideoblur';
     toggledLabel = 'toolbar.stopvideoblur';
 
+    /**
+     * 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 {ReactElement}
+     */
+    _getElementAfter() {
+        return <BetaTag />;
+    }
+
     /**
      * Handles clicking / pressing the button, and toggles the blur effect
      * state accordingly.

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

@@ -3,8 +3,8 @@
 import React from 'react';
 
 import { translate } from '../../../../base/i18n';
-import { Container, Text } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
+import { BetaTag } from '../../../../base/toolbox';
 
 import AbstractLiveStreamButton, {
     _mapStateToProps as _abstractMapStateToProps,
@@ -46,14 +46,7 @@ class LiveStreamButton extends AbstractLiveStreamButton<Props> {
      * @returns {ReactElement}
      */
     _getElementAfter() {
-        return (
-            <Container
-                className = { 'beta-tag' }>
-                <Text>
-                    { this.props.t('recording.beta') }
-                </Text>
-            </Container>
-        );
+        return <BetaTag />;
     }
 
     /**