From 011972872ebee8c30465dfedcea5584e7ee37c2f Mon Sep 17 00:00:00 2001
From: Leonard Kim <leonard.kim@8x8.com>
Date: Tue, 16 Jul 2019 09:47:54 -0700
Subject: [PATCH] fix(blur): add beta label to toolbar button

---
 .../base/toolbox/components/BetaTag.js        | 36 +++++++++++++++++++
 .../features/base/toolbox/components/index.js |  1 +
 .../blur/components/VideoBlurButton.js        | 16 ++++++++-
 .../LiveStream/web/LiveStreamButton.js        | 11 ++----
 4 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 react/features/base/toolbox/components/BetaTag.js

diff --git a/react/features/base/toolbox/components/BetaTag.js b/react/features/base/toolbox/components/BetaTag.js
new file mode 100644
index 000000000..75234f3e6
--- /dev/null
+++ b/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);
diff --git a/react/features/base/toolbox/components/index.js b/react/features/base/toolbox/components/index.js
index ddceba413..3f5d2c1d0 100644
--- a/react/features/base/toolbox/components/index.js
+++ b/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';
diff --git a/react/features/blur/components/VideoBlurButton.js b/react/features/blur/components/VideoBlurButton.js
index 5c3a20d42..cbe95612b 100644
--- a/react/features/blur/components/VideoBlurButton.js
+++ b/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.
diff --git a/react/features/recording/components/LiveStream/web/LiveStreamButton.js b/react/features/recording/components/LiveStream/web/LiveStreamButton.js
index 76e431030..127f22dfa 100644
--- a/react/features/recording/components/LiveStream/web/LiveStreamButton.js
+++ b/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 />;
     }
 
     /**