ref(toolbar): allow OverflowMenuItem to show beta tag

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

@@ -1,14 +1,62 @@
+// @flow
+
 import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 
+/**
+ * The type of the React {@code Component} props of {@link OverflowMenuItem}.
+ */
+type Props = {
+
+    /**
+     * A succinct description of what the item does. Used by accessibility tools
+     * and torture tests.
+     */
+    accessibilityLabel: string,
+
+    /**
+     * Whether menu item is disabled or not.
+     */
+    disabled: boolean,
+
+    /**
+     * A React Element to display at the end of {@code OverflowMenuItem}.
+     */
+    elementAfter?: React$Node,
+
+    /**
+     * The icon class to use for displaying an icon before the link text.
+     */
+    icon: string,
+
+    /**
+     * The callback to invoke when {@code OverflowMenuItem} is clicked.
+     */
+    onClick: Function,
+
+    /**
+     * The text to display in the {@code OverflowMenuItem}.
+     */
+    text: string,
+
+    /**
+     * The text to display in the tooltip.
+     */
+    tooltip?: string,
+
+    /**
+     * From which direction the tooltip should appear, relative to the button.
+     */
+    tooltipPosition: string
+};
+
 /**
  * A React {@code Component} for displaying a link to interact with other
  * features of the application.
  *
  * @extends Component
  */
-class OverflowMenuItem extends Component {
+class OverflowMenuItem extends Component<Props> {
     /**
      * Default values for {@code OverflowMenuItem} component's properties.
      *
@@ -19,50 +67,6 @@ class OverflowMenuItem extends Component {
         disabled: false
     };
 
-    /**
-     * {@code OverflowMenuItem} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        /**
-         * A succinct description of what the item does. Used by accessibility
-         * tools and torture tests.
-         */
-        accessibilityLabel: PropTypes.string,
-
-        /**
-         * Whether menu item is disabled or not.
-         */
-        disabled: PropTypes.bool,
-
-        /**
-         * The icon class to use for displaying an icon before the link text.
-         */
-        icon: PropTypes.string,
-
-        /**
-         * The callback to invoke when {@code OverflowMenuItem} is clicked.
-         */
-        onClick: PropTypes.func,
-
-        /**
-         * The text to display in the {@code OverflowMenuItem}.
-         */
-        text: PropTypes.string,
-
-        /**
-         * The text to display in the tooltip.
-         */
-        tooltip: PropTypes.string,
-
-        /**
-         * From which direction the tooltip should appear, relative to the
-         * button.
-         */
-        tooltipPosition: PropTypes.string
-    };
-
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -82,16 +86,39 @@ class OverflowMenuItem extends Component {
                 <span className = 'overflow-menu-item-icon'>
                     <i className = { this.props.icon } />
                 </span>
-                { this.props.tooltip
+                { this._renderText() }
-                    ? <Tooltip
+                {
-                        content = { this.props.tooltip }
+                    this.props.elementAfter || null
-                        position = { this.props.tooltipPosition }>
+                }
-                        <span>{ this.props.text }</span>
-                    </Tooltip>
-                    : this.props.text }
             </li>
         );
     }
+
+    /**
+     * Renders the text label to display in the {@code OverflowMenuItem}.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderText() {
+        const textElement = ( // eslint-disable-line no-extra-parens
+            <span className = 'overflow-menu-item-text'>
+                { this.props.text }
+            </span>
+        );
+
+        if (this.props.tooltip) {
+            return (
+                <Tooltip
+                    content = { this.props.tooltip }
+                    position = { this.props.tooltipPosition }>
+                    { textElement }
+                </Tooltip>
+            );
+        }
+
+        return textElement;
+    }
 }
 
 export default OverflowMenuItem;

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

@@ -1,113 +0,0 @@
-import Tooltip from '@atlaskit/tooltip';
-import PropTypes from 'prop-types';
-import React, { Component } from 'react';
-
-import { translate } from '../../../base/i18n';
-
-/**
- * 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 {
-    /**
-     * Default values for {@code OverflowMenuLiveStreamingItem}
-     * component's properties.
-     *
-     * @static
-     */
-    static defaultProps = {
-        tooltipPosition: 'left',
-        disabled: false
-    };
-
-    /**
-     * The type of the React {@code Component} props of
-     * {@link OverflowMenuLiveStreamingItem}.
-     */
-    static propTypes = {
-
-        /**
-         * Whether menu item is disabled or not.
-         */
-        disabled: PropTypes.bool,
-
-        /**
-         * The callback to invoke when {@code OverflowMenuLiveStreamingItem} is
-         * clicked.
-         */
-        onClick: Function,
-
-        /**
-         * The current live streaming session, if any.
-         */
-        session: PropTypes.object,
-
-        /**
-         * Invoked to obtain translated strings.
-         */
-        t: Function,
-
-        /**
-         * The text to display in the tooltip.
-         */
-        tooltip: PropTypes.string,
-
-        /**
-         * From which direction the tooltip should appear, relative to the
-         * button.
-         */
-        tooltipPosition: PropTypes.string
-    };
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { disabled, onClick, session, t, tooltip, tooltipPosition }
-            = this.props;
-
-        const translationKey = session
-            ? 'dialog.stopLiveStreaming'
-            : 'dialog.startLiveStreaming';
-
-        let className = 'overflow-menu-item';
-
-        className += disabled ? ' disabled' : '';
-
-        const button = (// eslint-disable-line no-extra-parens
-            <span>
-                <span className = 'profile-text'>
-                    { t(translationKey) }
-                </span>
-                <span className = 'beta-tag'>
-                    { t('recording.beta') }
-                </span>
-            </span>
-        );
-
-        return (
-            <li
-                aria-label = { t('dialog.accessibilityLabel.liveStreaming') }
-                className = { className }
-                onClick = { disabled ? null : onClick }>
-                <span className = 'overflow-menu-item-icon'>
-                    <i className = 'icon-public' />
-                </span>
-                { tooltip
-                    ? <Tooltip
-                        content = { tooltip }
-                        position = { tooltipPosition }>
-                        { button }
-                    </Tooltip>
-                    : button }
-            </li>
-        );
-    }
-}
-
-export default translate(OverflowMenuLiveStreamingItem);

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

@@ -58,7 +58,6 @@ 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';
@@ -973,6 +972,43 @@ class Toolbox extends Component<Props> {
         );
     }
 
+    /**
+     * Renders an {@code OverflowMenuItem} to start or stop live streaming of
+     * the current conference.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderLiveStreamingButton() {
+        const {
+            _liveStreamingDisabledTooltipKey,
+            _liveStreamingEnabled,
+            _liveStreamingSession,
+            t
+        } = this.props;
+
+        const translationKey = _liveStreamingSession
+            ? 'dialog.stopLiveStreaming'
+            : 'dialog.startLiveStreaming';
+
+        return (
+            <OverflowMenuItem
+                accessibilityLabel
+                    = { t('dialog.accessibilityLabel.liveStreaming') }
+                disabled = { !_liveStreamingEnabled }
+                elementAfter = {
+                    <span className = 'beta-tag'>
+                        { t('recording.beta') }
+                    </span>
+                }
+                icon = 'icon-public'
+                key = 'livestreaming'
+                onClick = { this._onToolbarToggleLiveStreaming }
+                text = { t(translationKey) }
+                tooltip = { t(_liveStreamingDisabledTooltipKey) } />
+        );
+    }
+
     /**
      * Renders the list elements of the overflow menu.
      *
@@ -990,7 +1026,6 @@ class Toolbox extends Component<Props> {
             _isGuest,
             _liveStreamingDisabledTooltipKey,
             _liveStreamingEnabled,
-            _liveStreamingSession,
             _sharingVideo,
             t
         } = this.props;
@@ -1019,12 +1054,7 @@ class Toolbox extends Component<Props> {
                         : t('toolbar.enterFullScreen') } />,
             (_liveStreamingEnabled || _liveStreamingDisabledTooltipKey)
                 && this._shouldShowButton('livestreaming')
-                && <OverflowMenuLiveStreamingItem
+                && this._renderLiveStreamingButton(),
-                    disabled = { !_liveStreamingEnabled }
-                    key = 'livestreaming'
-                    onClick = { this._onToolbarToggleLiveStreaming }
-                    session = { _liveStreamingSession }
-                    tooltip = { t(_liveStreamingDisabledTooltipKey) } />,
             (_fileRecordingsEnabled || _fileRecordingsDisabledTooltipKey)
                 && this._shouldShowButton('recording')
                 && this._renderRecordingButton(),
@@ -1086,7 +1116,7 @@ class Toolbox extends Component<Props> {
      * current conference.
      *
      * @private
-     * @returns {ReactElement|null}
+     * @returns {ReactElement}
      */
     _renderRecordingButton() {
         const {