feat(mobile/external-api): created action customOverflowMenuButtonPre…

…ssed

react/features/mobile/external-api/actionTypes.ts

@@ -18,3 +18,14 @@ export const READY_TO_CLOSE = 'READY_TO_CLOSE';
     */
 export const SCREEN_SHARE_PARTICIPANTS_UPDATED
     = 'SCREEN_SHARE_PARTICIPANTS_UPDATED';
+
+/**
+ * The type of (redux) action which signals that a custom button from the overflow menu was pressed.
+ *
+ * @returns {{
+ *      type: CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED,
+ *      id: string,
+ *      text: string
+ * }}
+ */
+export const CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED = 'CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED';

react/features/mobile/external-api/actions.ts

@@ -1,8 +1,10 @@
 import {
+    CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED,
     READY_TO_CLOSE,
     SCREEN_SHARE_PARTICIPANTS_UPDATED
 } from './actionTypes';
 
+
 /**
  * Creates a (redux) action which signals that the SDK is ready to be closed.
  *
@@ -33,3 +35,20 @@ export function setParticipantsWithScreenShare(participantIds: Array<string>) {
         participantIds
     };
 }
+
+/**
+ * Creates a (redux) action which that a custom overflow menu button was pressed.
+ *
+ * @returns {{
+ *     type: CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED,
+ *     id: string,
+ *     text: string
+ * }}
+ */
+export function customOverflowMenuButtonPressed(id: string, text: string) {
+    return {
+        type: CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED,
+        id,
+        text
+    };
+}

react/features/mobile/external-api/middleware.ts

@@ -57,7 +57,10 @@ import { ENTER_PICTURE_IN_PICTURE } from '../picture-in-picture/actionTypes';
 // @ts-ignore
 import { isExternalAPIAvailable } from '../react-native-sdk/functions';
 
-import { READY_TO_CLOSE } from './actionTypes';
+import {
+    CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED,
+    READY_TO_CLOSE
+} from './actionTypes';
 import { setParticipantsWithScreenShare } from './actions';
 import { participantToParticipantInfo, sendEvent } from './functions';
 import logger from './logger';
@@ -79,6 +82,12 @@ const CHAT_TOGGLED = 'CHAT_TOGGLED';
  */
 const CONFERENCE_TERMINATED = 'CONFERENCE_TERMINATED';
 
+/**
+ * Event which will be emitted on the native side to indicate that the custom overflow menu button was pressed.
+ */
+const CUSTOM_MENU_BUTTON_PRESSED = 'CUSTOM_MENU_BUTTON_PRESSED';
+
+
 /**
  * Event which will be emitted on the native side to indicate a message was received
  * through the channel.
@@ -185,6 +194,21 @@ externalAPIEnabled && MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    case CUSTOM_OVERFLOW_MENU_BUTTON_PRESSED: {
+        const { id, text } = action;
+
+        sendEvent(
+            store,
+            CUSTOM_MENU_BUTTON_PRESSED,
+            {
+                id,
+                text
+            }
+        )
+
+        break;
+    }
+
     case ENDPOINT_MESSAGE_RECEIVED: {
         const { participant, data } = action;
 

react/features/toolbox/components/native/OverflowMenu.tsx

@@ -11,6 +11,7 @@ import SettingsButton from '../../../base/settings/components/native/SettingsBut
 import BreakoutRoomsButton
     from '../../../breakout-rooms/components/native/BreakoutRoomsButton';
 import SharedDocumentButton from '../../../etherpad/components/SharedDocumentButton.native';
+import { customOverflowMenuButtonPressed } from '../../../mobile/external-api/actions';
 import ReactionMenu from '../../../reactions/components/native/ReactionMenu';
 import { shouldDisplayReactionsButtons } from '../../../reactions/functions.any';
 import LiveStreamButton from '../../../recording/components/LiveStream/native/LiveStreamButton';
@@ -25,7 +26,6 @@ import TileViewButton from '../../../video-layout/components/TileViewButton';
 import styles from '../../../video-menu/components/native/styles';
 import WhiteboardButton from '../../../whiteboard/components/native/WhiteboardButton';
 import { getMovableButtons } from '../../functions.native';
-import { NOTIFY_CLICK_MODE } from '../../types';
 
 import AudioOnlyButton from './AudioOnlyButton';
 import CustomOptionButton from './CustomOptionButton';
@@ -40,11 +40,6 @@ import ScreenSharingButton from './ScreenSharingButton';
  */
 interface IProps {
 
-    /**
-     * Toolbar buttons which have their click exposed through the API.
-     */
-    _buttonsWithNotifyClick: Map<string, NOTIFY_CLICK_MODE>;
-
     /**
      * Custom Toolbar buttons.
      */
@@ -124,8 +119,6 @@ class OverflowMenu extends PureComponent<IProps, IState> {
      */
     render() {
         const {
-            _buttonsWithNotifyClick,
-            _customToolbarButtons,
             _isBreakoutRoomsSupported,
             _isSpeakerStatsDisabled,
             _shouldDisplayReactionsButtons,
@@ -159,15 +152,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
                 renderFooter = { _shouldDisplayReactionsButtons && !toolbarButtons.has('raisehand')
                     ? this._renderReactionMenu
                     : undefined }>
-                {
-                    _customToolbarButtons?.map(({ id, ...rest }) => (
-                        <CustomOptionButton
-                            { ...rest }
-                            { ...buttonProps }
-                            key = { id }
-                            notifyMode = { _buttonsWithNotifyClick?.get(id) } />
-                    ))
-                }
+                { this._renderCustomOverflowMenuButtons(topButtonProps) }
                 <OpenCarmodeButton { ...topButtonProps } />
                 <AudioOnlyButton { ...buttonProps } />
                 {
@@ -193,7 +178,6 @@ class OverflowMenu extends PureComponent<IProps, IState> {
                 <ClosedCaptionButton { ...buttonProps } />
                 <SharedDocumentButton { ...buttonProps } />
                 <SettingsButton { ...buttonProps } />
-                <Divider style = { styles.divider as ViewStyle } />
             </BottomSheet>
         );
     }
@@ -211,7 +195,7 @@ class OverflowMenu extends PureComponent<IProps, IState> {
     /**
      * Function to render the reaction menu as the footer of the bottom sheet.
      *
-     * @returns {React$Element}
+     * @returns {React.ReactElement}
      */
     _renderReactionMenu() {
         return (
@@ -220,6 +204,40 @@ class OverflowMenu extends PureComponent<IProps, IState> {
                 overflowMenu = { true } />
         );
     }
+
+    /**
+     * Function to render the custom buttons for the overflow menu.
+     *
+     * @param {Object} topButtonProps - Button properties.
+     * @returns {React.ReactElement}
+     */
+    _renderCustomOverflowMenuButtons( topButtonProps: Object ) {
+        const { _customToolbarButtons, dispatch } = this.props;
+
+        if (!_customToolbarButtons || !_customToolbarButtons.length) {
+            return;
+        }
+
+        return (
+            <>
+                {
+                    _customToolbarButtons.map(({ id, text, ...rest }) => (
+                        <CustomOptionButton
+                            { ...rest }
+                            { ...topButtonProps }
+
+                            /* eslint-disable react/jsx-no-bind */
+                            handleClick = { () =>
+                                dispatch(customOverflowMenuButtonPressed(id, text))
+                            }
+                            key = { id }
+                            text = { text } />
+                    ))
+                }
+                <Divider style = { styles.divider as ViewStyle } />
+            </>
+        );
+    }
 }
 
 /**
@@ -234,7 +252,6 @@ function _mapStateToProps(state: IReduxState) {
     const { customToolbarButtons } = state['features/base/config'];
 
     return {
-        _buttonsWithNotifyClick: state['features/toolbox'].buttonsWithNotifyClick,
         _customToolbarButtons: customToolbarButtons,
         _isBreakoutRoomsSupported: conference?.getBreakoutRooms()?.isSupported(),
         _isSpeakerStatsDisabled: isSpeakerStatsDisabled(state),