feat: add ability to toggle toolbox from tile view

react/features/conference/components/native/Conference.js

@@ -111,13 +111,6 @@ type Props = AbstractProps & {
      */
     _toolboxVisible: boolean,
 
-    /**
-     * The indicator which determines whether the Toolbox is always visible.
-     *
-     * @private
-     */
-    _toolboxAlwaysVisible: boolean,
-
     /**
      * The redux {@code dispatch} function.
      */
@@ -298,10 +291,6 @@ class Conference extends AbstractConference<Props, *> {
      * @returns {void}
      */
     _onClick() {
-        if (this.props._toolboxAlwaysVisible) {
-            return;
-        }
-
         this._setToolboxVisible(!this.props._toolboxVisible);
     }
 
@@ -407,7 +396,7 @@ function _mapStateToProps(state) {
         leaving
     } = state['features/base/conference'];
     const { reducedUI } = state['features/base/responsive-ui'];
-    const { alwaysVisible, visible } = state['features/toolbox'];
+    const { visible } = state['features/toolbox'];
 
     // XXX There is a window of time between the successful establishment of the
     // XMPP connection and the subsequent commencement of joining the MUC during
@@ -484,15 +473,7 @@ function _mapStateToProps(state) {
          * @private
          * @type {boolean}
          */
-        _toolboxVisible: visible,
-
-        /**
-         * The indicator which determines whether the Toolbox is always visible.
-         *
-         * @private
-         * @type {boolean}
-         */
-        _toolboxAlwaysVisible: alwaysVisible
+        _toolboxVisible: visible
     };
 }
 

react/features/filmstrip/components/native/Thumbnail.js

@@ -21,6 +21,7 @@ import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
 import { ConnectionIndicator } from '../../../connection-indicator';
 import { DisplayNameLabel } from '../../../display-name';
 import { RemoteVideoMenu } from '../../../remote-video-menu';
+import { toggleToolboxVisible } from '../../../toolbox';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
 import DominantSpeakerIndicator from './DominantSpeakerIndicator';
@@ -74,12 +75,6 @@ type Props = {
      */
     _videoTrack: Object,
 
-    /**
-     * If true, tapping on the thumbnail will not pin the participant to large
-     * video. By default tapping does pin the participant.
-     */
-    disablePin?: boolean,
-
     /**
      * If true, there will be no color overlay (tint) on the thumbnail
      * indicating the participant associated with the thumbnail is displayed on
@@ -105,7 +100,12 @@ type Props = {
     /**
      * Optional styling to add or override on the Thumbnail component root.
      */
-    styleOverrides?: Object
+    styleOverrides?: Object,
+
+    /**
+     * If true, it tells the thumbnail that it needs to behave differently. E.g. react differently to a single tap.
+     */
+    tileView?: boolean
 };
 
 /**
@@ -130,10 +130,10 @@ class Thumbnail extends Component<Props> {
             _onShowRemoteVideoMenu,
             _styles,
             _videoTrack: videoTrack,
-            disablePin,
             disableTint,
             participant,
-            renderDisplayName
+            renderDisplayName,
+            tileView
         } = this.props;
 
         // We don't render audio in any of the following:
@@ -152,13 +152,13 @@ class Thumbnail extends Component<Props> {
 
         return (
             <Container
-                onClick = { disablePin ? undefined : _onClick }
+                onClick = { _onClick }
                 onLongPress = {
                     showRemoteVideoMenu
                         ? _onShowRemoteVideoMenu : undefined }
                 style = { [
                     styles.thumbnail,
-                    participant.pinned && !disablePin
+                    participant.pinned && !tileView
                         ? _styles.thumbnailPinned : null,
                     this.props.styleOverrides || null
                 ] }
@@ -234,10 +234,13 @@ function _mapDispatchToProps(dispatch: Function, ownProps): Object {
          * @returns {void}
          */
         _onClick() {
-            const { participant } = ownProps;
+            const { participant, tileView } = ownProps;
 
-            dispatch(
-                pinParticipant(participant.pinned ? null : participant.id));
+            if (tileView) {
+                dispatch(toggleToolboxVisible());
+            } else {
+                dispatch(pinParticipant(participant.pinned ? null : participant.id));
+            }
         },
 
         /**

react/features/filmstrip/components/native/TileView.js

@@ -298,12 +298,12 @@ class TileView extends Component<Props, State> {
         return this._getSortedParticipants()
             .map(participant => (
                 <Thumbnail
-                    disablePin = { true }
                     disableTint = { true }
                     key = { participant.id }
                     participant = { participant }
                     renderDisplayName = { true }
-                    styleOverrides = { styleOverrides } />));
+                    styleOverrides = { styleOverrides }
+                    tileView = { true } />));
     }
 
     /**

react/features/toolbox/actionTypes.js

@@ -102,3 +102,12 @@ export const SET_TOOLBOX_TIMEOUT_MS = 'SET_TOOLBOX_TIMEOUT_MS';
  * }
  */
 export const SET_TOOLBOX_VISIBLE = 'SET_TOOLBOX_VISIBLE';
+
+/**
+ * The type of the redux action which toggles the toolbox visibility regardless of it's current state.
+ *
+ * {
+ *     type: TOGGLE_TOOLBOX_VISIBLE
+ * }
+ */
+export const TOGGLE_TOOLBOX_VISIBLE = 'TOGGLE_TOOLBOX_VISIBLE';

react/features/toolbox/actions.native.js

@@ -8,7 +8,8 @@ import {
     SET_TOOLBOX_ENABLED,
     SET_TOOLBOX_TIMEOUT,
     SET_TOOLBOX_TIMEOUT_MS,
-    SET_TOOLBOX_VISIBLE
+    SET_TOOLBOX_VISIBLE,
+    TOGGLE_TOOLBOX_VISIBLE
 } from './actionTypes';
 
 
@@ -144,3 +145,16 @@ export function setToolboxVisible(visible: boolean): Object {
         visible
     };
 }
+
+/**
+ * Action to toggle the toolbox visibility.
+ *
+ * @returns {{
+ *     type: TOGGLE_TOOLBOX_VISIBLE
+ * }}
+ */
+export function toggleToolboxVisible() {
+    return {
+        type: TOGGLE_TOOLBOX_VISIBLE
+    };
+}

react/features/toolbox/reducer.js

@@ -11,7 +11,8 @@ import {
     SET_TOOLBOX_ENABLED,
     SET_TOOLBOX_TIMEOUT,
     SET_TOOLBOX_TIMEOUT_MS,
-    SET_TOOLBOX_VISIBLE
+    SET_TOOLBOX_VISIBLE,
+    TOGGLE_TOOLBOX_VISIBLE
 } from './actionTypes';
 
 declare var interfaceConfig: Object;
@@ -165,7 +166,10 @@ ReducerRegistry.register(
             };
 
         case SET_TOOLBOX_VISIBLE:
-            return set(state, 'visible', action.visible);
+            return set(state, 'visible', state.alwaysVisible || action.visible);
+
+        case TOGGLE_TOOLBOX_VISIBLE:
+            return set(state, 'visible', state.alwaysVisible || !state.visible);
         }
 
         return state;