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

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

* tweak colors and border radius

css/_toolbars.scss

@@ -133,6 +133,17 @@
             }
         }
 
+        .beta-tag {
+            background: #B8C7E0;
+            border-radius: 2px;
+            color: $newToolbarBackgroundColor;
+            font-family: -apple-system, BlinkMacSystemFont, $baseFontFamily;
+            font-size: 11px;
+            font-weight: bold;
+            margin-left: 8px;
+            padding: 0 6px;
+        }
+
         .overflow-menu-item-icon {
             margin-right: 10px;
 

lang/main.json

@@ -290,11 +290,11 @@
         "sorryFeedback": "We're sorry to hear that. Would you like to tell us more?",
         "liveStreaming": "Live Streaming",
         "streamKey": "Live stream key",
-        "startLiveStreaming": "Go live now",
+        "startLiveStreaming": "Start live stream",
         "startRecording": "Start recording",
         "stopStreamingWarning": "Are you sure you would like to stop the live streaming?",
         "stopRecordingWarning": "Are you sure you would like to stop the recording?",
-        "stopLiveStreaming": "Stop live streaming",
+        "stopLiveStreaming": "Stop live stream",
         "stopRecording": "Stop recording",
         "doNotShowMessageAgain": "Don't show this message again",
         "permissionDenied": "Permission Denied",
@@ -386,6 +386,7 @@
     },
     "recording":
     {
+        "beta": "BETA",
         "busy": "We're working on freeing recording resources. Please try again in a few minutes.",
         "busyTitle": "All recorders are currently busy",
         "buttonTooltip": "Start / Stop recording",

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(),