feat(filmstrip): refactor filmstrip only toolbar

- Move the toolbar to the filmstrip feature
- Use all the buttons from the toolbox feature

react/features/filmstrip/components/Filmstrip.web.js

@@ -5,11 +5,13 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
-import { ToolboxFilmstrip, dockToolbox } from '../../toolbox';
+import { dockToolbox } from '../../toolbox';
 
 import { setFilmstripHovered } from '../actions';
 import { shouldRemoteVideosBeVisible } from '../functions';
 
+import Toolbar from './Toolbar';
+
 declare var interfaceConfig: Object;
 
 /**
@@ -33,6 +35,11 @@ class Filmstrip extends Component<*> {
      * @static
      */
     static propTypes = {
+        /**
+         * Whether or not the conference is in filmstripOnly mode.
+         */
+        _filmStripOnly: PropTypes.bool,
+
         /**
          * Whether or not remote videos are currently being hovered over.
          */
@@ -53,12 +60,7 @@ class Filmstrip extends Component<*> {
         /**
          * Updates the redux store with filmstrip hover changes.
          */
-        dispatch: PropTypes.func,
-
-        /**
-         * Whether or not the conference is in filmstripOnly mode.
-         */
-        filmstripOnly: PropTypes.bool
+        dispatch: PropTypes.func
     };
 
     /**
@@ -95,9 +97,9 @@ class Filmstrip extends Component<*> {
      */
     render() {
         const {
+            _filmStripOnly,
             _remoteVideosVisible,
-            _toolboxVisible,
-            filmstripOnly
+            _toolboxVisible
         } = this.props;
 
         /**
@@ -115,7 +117,7 @@ class Filmstrip extends Component<*> {
 
         return (
             <div className = { filmstripClassNames }>
-                { filmstripOnly && <ToolboxFilmstrip /> }
+                { _filmStripOnly && <Toolbar /> }
                 <div
                     className = 'filmstrip__videos'
                     id = 'remoteVideos'>
@@ -190,6 +192,7 @@ class Filmstrip extends Component<*> {
  * @param {Object} state - The Redux state.
  * @private
  * @returns {{
+ *     _filmStripOnly: boolean,
  *     _hovered: boolean,
  *     _remoteVideosVisible: boolean,
  *     _toolboxVisible: boolean
@@ -199,6 +202,7 @@ function _mapStateToProps(state) {
     const { hovered } = state['features/filmstrip'];
 
     return {
+        _filmStripOnly: Boolean(interfaceConfig.filmStripOnly),
         _hovered: hovered,
         _remoteVideosVisible: shouldRemoteVideosBeVisible(state),
         _toolboxVisible: state['features/toolbox'].visible

react/features/filmstrip/components/Toolbar.web.js

@@ -0,0 +1,90 @@
+// @flow
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import {
+    AudioMuteButton,
+    HangupButton,
+    SettingsButton,
+    VideoMuteButton
+} from '../../toolbox';
+
+declare var interfaceConfig: Object;
+
+type Props = {
+
+    /**
+     * Set of buttons which should be visible in this toolbar.
+     */
+    _visibleButtons: Set<string>
+};
+
+/**
+ * Implements the conference toolbar on React/Web for filmstrip only mode.
+ *
+ * @extends Component
+ */
+class Toolbar extends Component<Props> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        return (
+            <div
+                className = 'filmstrip-toolbox'
+                id = 'new-toolbox'>
+                <AudioMuteButton
+                    tooltipPosition = 'left'
+                    visible = { this._shouldShowButton('microphone') } />
+                <HangupButton
+                    tooltipPosition = 'left'
+                    visible = { this._shouldShowButton('hangup') } />
+                <VideoMuteButton
+                    tooltipPosition = 'left'
+                    visible = { this._shouldShowButton('camera') } />
+                <SettingsButton
+                    tooltipPosition = 'left'
+                    visible = { this._shouldShowButton('fodeviceselection') } />
+            </div>
+        );
+    }
+
+    _shouldShowButton: (string) => boolean;
+
+    /**
+     * Returns if a button name has been explicitly configured to be displayed.
+     *
+     * @param {string} buttonName - The name of the button, as expected in
+     * {@link intefaceConfig}.
+     * @private
+     * @returns {boolean} True if the button should be displayed, false
+     * otherwise.
+     */
+    _shouldShowButton(buttonName) {
+        return this.props._visibleButtons.has(buttonName);
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _visibleButtons: Set<string>
+ * }}
+ */
+function _mapStateToProps(state): Object { // eslint-disable-line no-unused-vars
+    // XXX: We are not currently using state here, but in the future, when
+    // interfaceConfig is part of redux we will.
+
+    return {
+        _visibleButtons: new Set(interfaceConfig.TOOLBAR_BUTTONS)
+    };
+}
+
+export default connect(_mapStateToProps)(Toolbar);

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

@@ -1,98 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-import { connect } from 'react-redux';
-
-import { createToolbarEvent, sendAnalytics } from '../../analytics';
-import { translate } from '../../base/i18n';
-import { openDeviceSelectionDialog } from '../../device-selection';
-
-import ToolbarButton from './ToolbarButton';
-import { AudioMuteButton, HangupButton, VideoMuteButton } from './buttons';
-
-declare var interfaceConfig: Object;
-
-/**
- * Implements the conference toolbox on React/Web for filmstrip only mode.
- *
- * @extends Component
- */
-class ToolboxFilmstrip extends Component<*> {
-    _visibleButtons: Object;
-
-    /**
-     * Initializes a new {@code ToolboxFilmstrip} instance.
-     *
-     * @param {Props} props - The read-only React {@code Component} props with
-     * which the new instance is to be initialized.
-     */
-    constructor(props) {
-        super(props);
-
-        this._visibleButtons = new Set(interfaceConfig.TOOLBAR_BUTTONS);
-
-        // Bind event handlers so they are only bound once per instance.
-        this._onToolbarOpenSettings = this._onToolbarOpenSettings.bind(this);
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { t } = this.props;
-
-        return (
-            <div
-                className = 'filmstrip-toolbox'
-                id = 'new-toolbox'>
-                { this._shouldShowButton('microphone')
-                    && <AudioMuteButton tooltipPosition = 'left' /> }
-                { this._shouldShowButton('camera')
-                    && <VideoMuteButton tooltipPosition = 'left' /> }
-                { this._shouldShowButton('fodeviceselection')
-                    && <ToolbarButton
-                        accessibilityLabel = 'Settings'
-                        iconName = 'icon-settings'
-                        onClick = { this._onToolbarOpenSettings }
-                        tooltip = { t('toolbar.Settings') }
-                        tooltipPosition = 'left' /> }
-                { this._shouldShowButton('hangup')
-                    && <HangupButton tooltipPosition = 'left' /> }
-            </div>
-        );
-    }
-
-    _onToolbarOpenSettings: () => void;
-
-    /**
-     * Creates an analytics toolbar event for and dispatches an action to open
-     * the device selection popup dialog.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onToolbarOpenSettings() {
-        sendAnalytics(createToolbarEvent('filmstrip.only.device.selection'));
-
-        this.props.dispatch(openDeviceSelectionDialog());
-    }
-
-    _shouldShowButton: (string) => boolean;
-
-    /**
-     * Returns if a button name has been explicitly configured to be displayed.
-     *
-     * @param {string} buttonName - The name of the button, as expected in
-     * {@link intefaceConfig}.
-     * @private
-     * @returns {boolean} True if the button should be displayed.
-     */
-    _shouldShowButton(buttonName) {
-        return this._visibleButtons.has(buttonName);
-    }
-}
-
-export default translate(connect()(ToolboxFilmstrip));

react/features/toolbox/components/index.js

@@ -1,4 +1,3 @@
 export { default as ToolbarButton } from './ToolbarButton';
-export { default as ToolboxFilmstrip } from './ToolboxFilmstrip';
 export { default as Toolbox } from './Toolbox';
 export * from './buttons';