feat(toolbar): add beta tag to live streaming button (#3007)

* feat(toolbar): add beta tag to live streaming button

* tweak colors and border radius

react/features/toolbox/components/web/OverflowMenuLiveStreamingItem.js

@@ -0,0 +1,69 @@
+// @flow
+
+import React, { Component } from 'react';
+
+import { translate } from '../../../base/i18n';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link OverflowMenuLiveStreamingItem}.
+ */
+type Props = {
+
+    /**
+     * The callback to invoke when {@code OverflowMenuLiveStreamingItem} is
+     * clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The current live streaming session, if any.
+     */
+    session: ?Object,
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function
+};
+
+/**
+ * React {@code Component} for starting or stopping a live streaming of the
+ * current conference and displaying the current state of live streaming.
+ *
+ * @extends Component
+ */
+class OverflowMenuLiveStreamingItem extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { onClick, session, t } = this.props;
+
+        const translationKey = session
+            ? 'dialog.stopLiveStreaming'
+            : 'dialog.startLiveStreaming';
+
+        return (
+            <li
+                aria-label = 'Live stream'
+                className = 'overflow-menu-item'
+                onClick = { onClick }>
+                <span className = 'overflow-menu-item-icon'>
+                    <i className = 'icon-public' />
+                </span>
+                <span className = 'profile-text'>
+                    { t(translationKey) }
+                </span>
+                <span className = 'beta-tag'>
+                    { t('recording.beta') }
+                </span>
+            </li>
+        );
+    }
+}
+
+export default translate(OverflowMenuLiveStreamingItem);

react/features/toolbox/components/web/Toolbox.js

@@ -53,6 +53,7 @@ import AudioMuteButton from '../AudioMuteButton';
 import HangupButton from '../HangupButton';
 import OverflowMenuButton from './OverflowMenuButton';
 import OverflowMenuItem from './OverflowMenuItem';
+import OverflowMenuLiveStreamingItem from './OverflowMenuLiveStreamingItem';
 import OverflowMenuProfileItem from './OverflowMenuProfileItem';
 import ToolbarButton from './ToolbarButton';
 import VideoMuteButton from '../VideoMuteButton';
@@ -941,30 +942,6 @@ class Toolbox extends Component<Props> {
         );
     }
 
-    /**
-     * Renders an {@code OverflowMenuItem} for starting or stopping a live
-     * streaming of the current conference.
-     *
-     * @private
-     * @returns {ReactElement}
-     */
-    _renderLiveStreamingButton() {
-        const { _liveStreamingSession, t } = this.props;
-
-        const translationKey = _liveStreamingSession
-            ? 'dialog.stopLiveStreaming'
-            : 'dialog.startLiveStreaming';
-
-        return (
-            <OverflowMenuItem
-                accessibilityLabel = 'Live stream'
-                icon = 'icon-public'
-                key = 'liveStreaming'
-                onClick = { this._onToolbarToggleLiveStreaming }
-                text = { t(translationKey) } />
-        );
-    }
-
     /**
      * Renders the list elements of the overflow menu.
      *
@@ -978,6 +955,7 @@ class Toolbox extends Component<Props> {
             _feedbackConfigured,
             _fullScreen,
             _isGuest,
+            _liveStreamingSession,
             _recordingEnabled,
             _sharingVideo,
             t
@@ -1006,7 +984,10 @@ class Toolbox extends Component<Props> {
                         : t('toolbar.enterFullScreen') } />,
             _recordingEnabled
                 && this._shouldShowButton('livestreaming')
-                && this._renderLiveStreamingButton(),
+                && <OverflowMenuLiveStreamingItem
+                    key = 'livestreaming'
+                    onClick = { this._onToolbarToggleLiveStreaming }
+                    session = { _liveStreamingSession } />,
             _recordingEnabled
                 && this._shouldShowButton('recording')
                 && this._renderRecordingButton(),