fix(MainToolbar): replace hidden buttons.

Currently if a button in the main toolbar is not visible, the button is
not replaced by another button from the overflow menu.

react/features/embed-meeting/hooks.ts

@@ -0,0 +1,25 @@
+import { useSelector } from 'react-redux';
+
+import { isMobileBrowser } from '../base/environment/utils';
+import { isVpaasMeeting } from '../jaas/functions';
+
+import EmbedMeetingButton from './components/EmbedMeetingButton';
+
+const embed = {
+    key: 'embedmeeting',
+    Content: EmbedMeetingButton,
+    group: 4
+};
+
+/**
+ * A hook that returns the embed button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useEmbedButton() {
+    const _isVpaasMeeting = useSelector(isVpaasMeeting);
+
+    if (!isMobileBrowser() && _isVpaasMeeting) {
+        return embed;
+    }
+}

react/features/etherpad/hooks.ts

@@ -0,0 +1,24 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+
+import SharedDocumentButtonWeb from './components/SharedDocumentButton.web';
+
+const etherpad = {
+    key: 'etherpad',
+    Content: SharedDocumentButtonWeb,
+    group: 3
+};
+
+/**
+ * A hook that returns the etherpad button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useEtherpadButton() {
+    const visible = useSelector((state: IReduxState) => Boolean(state['features/etherpad'].documentUrl));
+
+    if (visible) {
+        return etherpad;
+    }
+}

react/features/feedback/hooks.web.ts

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+import FeedbackButtonWeb from './components/FeedbackButton.web';
+import { shouldSendJaaSFeedbackMetadata } from './functions.web';
+
+const feedback = {
+    key: 'feedback',
+    Content: FeedbackButtonWeb,
+    group: 4
+};
+
+/**
+ * A hook that returns the feedback button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useFeedbackButton() {
+    const visible = useSelector(shouldSendJaaSFeedbackMetadata);
+
+    if (visible) {
+        return feedback;
+    }
+}

react/features/keyboard-shortcuts/hooks.web.ts

@@ -0,0 +1,25 @@
+import { useSelector } from 'react-redux';
+
+import { isMobileBrowser } from '../base/environment/utils';
+
+import KeyboardShortcutsButton from './components/web/KeyboardShortcutsButton';
+import { areKeyboardShortcutsEnabled } from './functions';
+
+const shortcuts = {
+    key: 'shortcuts',
+    Content: KeyboardShortcutsButton,
+    group: 4
+};
+
+/**
+ * A hook that returns the keyboard shortcuts button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useKeyboardShortcutsButton() {
+    const _areKeyboardShortcutsEnabled = useSelector(areKeyboardShortcutsEnabled);
+
+    if (!isMobileBrowser() && _areKeyboardShortcutsEnabled) {
+        return shortcuts;
+    }
+}

react/features/participants-pane/hooks.web.ts

@@ -1,14 +1,23 @@
 import { useCallback, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { handleLobbyChatInitialized } from '../chat/actions.web';
 import { approveKnockingParticipant, rejectKnockingParticipant } from '../lobby/actions.web';
 
+import ParticipantsPaneButton from './components/web/ParticipantsPaneButton';
+import { isParticipantsPaneEnabled } from './functions';
+
 interface IDrawerParticipant {
     displayName?: string;
     participantID: string;
 }
 
+const participants = {
+    key: 'participants-pane',
+    Content: ParticipantsPaneButton,
+    group: 2
+};
+
 /**
  * Hook used to create admit/reject lobby actions.
  *
@@ -57,3 +66,16 @@ export function useParticipantDrawer(): [
         openDrawerForParticipant
     ];
 }
+
+/**
+ * A hook that returns the participants pane button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useParticipantPaneButton() {
+    const participantsPaneEnabled = useSelector(isParticipantsPaneEnabled);
+
+    if (participantsPaneEnabled) {
+        return participants;
+    }
+}

react/features/reactions/hooks.ts

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+import ReactionsMenuButton from './components/web/ReactionsMenuButton';
+import { isReactionsButtonEnabled } from './functions.web';
+
+const reactions = {
+    key: 'reactions',
+    Content: ReactionsMenuButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the reactions button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useReactionsButton() {
+    const reactionsButtonEnabled = useSelector(isReactionsButtonEnabled);
+
+    if (reactionsButtonEnabled) {
+        return reactions;
+    }
+}

react/features/recording/components/LiveStream/AbstractLiveStreamButton.ts

@@ -8,7 +8,7 @@ import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/too
 import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
 import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
 import { isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
-import { getActiveSession, isCloudRecordingRunning } from '../../functions';
+import { getActiveSession, isCloudRecordingRunning, isLiveStreamingButtonVisible } from '../../functions';
 
 import { getLiveStreaming } from './functions';
 
@@ -133,11 +133,9 @@ export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
         const isModerator = isLocalParticipantModerator(state);
         const liveStreaming = getLiveStreaming(state);
 
-        if (isModerator) {
-            visible = liveStreaming.enabled ? isJwtFeatureEnabled(state, 'livestreaming', true) : false;
-        } else {
-            visible = false;
-        }
+        visible = isLiveStreamingButtonVisible(
+            isModerator, liveStreaming?.enabled, isJwtFeatureEnabled(state, 'livestreaming', true),
+            isInBreakoutRoom(state));
     }
 
     // disable the button if the recording is running.
@@ -149,7 +147,6 @@ export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
     // disable the button if we are in a breakout room.
     if (isInBreakoutRoom(state)) {
         _disabled = true;
-        visible = false;
     }
 
     return {

react/features/recording/functions.ts

@@ -404,3 +404,31 @@ export function registerRecordingAudioFiles(dispatch: IStore['dispatch'], should
         RECORDING_ON_SOUND_ID,
         getSoundFileSrc(RECORDING_ON_SOUND_FILE, language)));
 }
+
+/**
+ * Returns true if the live streaming button should be visible.
+ *
+ * @param {boolean} localParticipantIsModerator - True if the local participant is moderator.
+ * @param {boolean} liveStreamingEnabled - True if the live streaming is enabled.
+ * @param {boolean} liveStreamingEnabledInJwt - True if the lives treaming feature is enabled in JWT.
+ * @returns {boolean}
+ */
+export function isLiveStreamingButtonVisible({
+    localParticipantIsModerator,
+    liveStreamingEnabled,
+    liveStreamingEnabledInJwt,
+    isInBreakoutRoom
+}: {
+    localParticipantIsModerator: boolean;
+    liveStreamingEnabled: boolean;
+    liveStreamingEnabledInJwt: boolean;
+    isInBreakoutRoom: boolean;
+}) {
+    let visible = false;
+
+    if (localParticipantIsModerator && !isInBreakoutRoom) {
+        visible = liveStreamingEnabled ? liveStreamingEnabledInJwt : false;
+    }
+
+    return visible;
+}

react/features/recording/hooks.web.ts

@@ -0,0 +1,63 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+import { isJwtFeatureEnabled } from '../base/jwt/functions';
+import { isLocalParticipantModerator } from '../base/participants/functions';
+import { isInBreakoutRoom } from '../breakout-rooms/functions';
+
+import { getLiveStreaming } from './components/LiveStream/functions';
+import LiveStreamButton from './components/LiveStream/web/LiveStreamButton';
+import RecordButton from './components/Recording/web/RecordButton';
+import { getRecordButtonProps, isLiveStreamingButtonVisible } from './functions';
+
+
+const recording = {
+    key: 'recording',
+    Content: RecordButton,
+    group: 2
+};
+
+const livestreaming = {
+    key: 'livestreaming',
+    Content: LiveStreamButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the recording button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useRecordingButton() {
+    const recordingProps = useSelector(getRecordButtonProps);
+    const toolbarButtons = useSelector((state: IReduxState) => state['features/toolbox'].toolbarButtons);
+
+    if (toolbarButtons?.includes('recording') && recordingProps.visible) {
+        return recording;
+    }
+
+}
+
+/**
+ * A hook that returns the livestreaming button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useLiveStreamingButton() {
+    const toolbarButtons = useSelector((state: IReduxState) => state['features/toolbox'].toolbarButtons);
+    const localParticipantIsModerator = useSelector(isLocalParticipantModerator);
+    const liveStreaming = useSelector(getLiveStreaming);
+    const liveStreamingEnabledInJwt
+        = useSelector((state: IReduxState) => isJwtFeatureEnabled(state, 'livestreaming', true));
+    const _isInBreakoutRoom = useSelector(isInBreakoutRoom);
+
+    if (toolbarButtons?.includes('recording')
+            && isLiveStreamingButtonVisible({
+                localParticipantIsModerator,
+                liveStreamingEnabled: liveStreaming?.enabled,
+                liveStreamingEnabledInJwt,
+                isInBreakoutRoom: _isInBreakoutRoom
+            })) {
+        return livestreaming;
+    }
+}

react/features/security/components/security-dialog/AbstractSecurityDialogButton.ts

@@ -7,6 +7,7 @@ import { getFeatureFlag } from '../../../base/flags/functions';
 import { IconSecurityOff, IconSecurityOn } from '../../../base/icons/svg';
 import { isLocalParticipantModerator } from '../../../base/participants/functions';
 import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { isSecurityDialogButtonVisible } from '../../functions';
 
 export interface IProps extends AbstractButtonProps {
 
@@ -71,17 +72,21 @@ export default class AbstractSecurityDialogButton<P extends IProps, S>
  */
 export function _mapStateToProps(state: IReduxState) {
     const { conference } = state['features/base/conference'];
-    const { hideLobbyButton } = getSecurityUiConfig(state);
     const { locked } = state['features/base/conference'];
     const { lobbyEnabled } = state['features/lobby'];
-    const lobbySupported = conference?.isLobbySupported();
-    const lobby = lobbySupported && isLocalParticipantModerator(state) && !hideLobbyButton;
-    const enabledFlag = getFeatureFlag(state, SECURITY_OPTIONS_ENABLED, true);
-    const enabledLobbyModeFlag = getFeatureFlag(state, LOBBY_MODE_ENABLED, true) && lobby;
+    const enabledSecurityOptionsFlag = getFeatureFlag(state, SECURITY_OPTIONS_ENABLED, true);
+    const enabledLobbyModeFlag = getFeatureFlag(state, LOBBY_MODE_ENABLED, true);
     const enabledMeetingPassFlag = getFeatureFlag(state, MEETING_PASSWORD_ENABLED, true);
 
     return {
         _locked: Boolean(locked || lobbyEnabled),
-        visible: enabledFlag && (enabledLobbyModeFlag || enabledMeetingPassFlag)
+        visible: isSecurityDialogButtonVisible({
+            conference,
+            securityUIConfig: getSecurityUiConfig(state),
+            isModerator: isLocalParticipantModerator(state),
+            enabledLobbyModeFlag,
+            enabledMeetingPassFlag,
+            enabledSecurityOptionsFlag
+        })
     };
 }

react/features/security/functions.ts

@@ -0,0 +1,28 @@
+/**
+ * Returns true if the security dialog button should be visible and false otherwise.
+ *
+ * @param {Object} options - The parameters needed to determine the security dialog button visibility.
+ * @returns {boolean}
+ */
+export function isSecurityDialogButtonVisible({
+    conference,
+    securityUIConfig,
+    isModerator,
+    enabledLobbyModeFlag,
+    enabledSecurityOptionsFlag,
+    enabledMeetingPassFlag
+}: {
+    conference: any;
+    enabledLobbyModeFlag: boolean;
+    enabledMeetingPassFlag: boolean;
+    enabledSecurityOptionsFlag: boolean;
+    isModerator: boolean;
+    securityUIConfig: { hideLobbyButton?: boolean; };
+}) {
+    const { hideLobbyButton } = securityUIConfig;
+    const lobbySupported = conference?.isLobbySupported();
+    const lobby = lobbySupported && isModerator && !hideLobbyButton;
+
+
+    return enabledSecurityOptionsFlag && ((enabledLobbyModeFlag && lobby) || enabledMeetingPassFlag);
+}

react/features/security/hooks.ts

@@ -0,0 +1,45 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+import { getSecurityUiConfig } from '../base/config/functions.any';
+import { LOBBY_MODE_ENABLED, MEETING_PASSWORD_ENABLED, SECURITY_OPTIONS_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+import { isLocalParticipantModerator } from '../base/participants/functions';
+
+import SecurityDialogButton from './components/security-dialog/web/SecurityDialogButton';
+import { isSecurityDialogButtonVisible } from './functions';
+
+const security = {
+    key: 'security',
+    alias: 'info',
+    Content: SecurityDialogButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the security dialog button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useSecurityDialogButton() {
+    const conference = useSelector((state: IReduxState) => state['features/base/conference'].conference);
+    const securityUIConfig = useSelector(getSecurityUiConfig);
+    const isModerator = useSelector(isLocalParticipantModerator);
+    const enabledLobbyModeFlag
+        = useSelector((state: IReduxState) => getFeatureFlag(state, LOBBY_MODE_ENABLED, true));
+    const enabledSecurityOptionsFlag
+        = useSelector((state: IReduxState) => getFeatureFlag(state, SECURITY_OPTIONS_ENABLED, true));
+    const enabledMeetingPassFlag
+        = useSelector((state: IReduxState) => getFeatureFlag(state, MEETING_PASSWORD_ENABLED, true));
+
+    if (isSecurityDialogButtonVisible({
+        conference,
+        securityUIConfig,
+        isModerator,
+        enabledLobbyModeFlag,
+        enabledSecurityOptionsFlag,
+        enabledMeetingPassFlag
+    })) {
+        return security;
+    }
+}

react/features/speaker-stats/hooks.web.ts

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+import SpeakerStatsButton from './components/web/SpeakerStatsButton';
+import { isSpeakerStatsDisabled } from './functions';
+
+const speakerStats = {
+    key: 'stats',
+    Content: SpeakerStatsButton,
+    group: 3
+};
+
+/**
+ * A hook that returns the speaker stats button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useSpeakerStatsButton() {
+    const disabled = useSelector(isSpeakerStatsDisabled);
+
+    if (!disabled) {
+        return speakerStats;
+    }
+}

react/features/subtitles/hooks.web.ts

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+import ClosedCaptionButton from './components/web/ClosedCaptionButton';
+import { canStartSubtitles } from './functions.any';
+
+const cc = {
+    key: 'closedcaptions',
+    Content: ClosedCaptionButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the CC button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useClosedCaptionButton() {
+    const isStartSubtitlesButtonVisible = useSelector(canStartSubtitles);
+
+    if (isStartSubtitlesButtonVisible) {
+        return cc;
+    }
+}

react/features/toolbox/components/index.native.ts

@@ -0,0 +1 @@
+export { default as CustomOptionButton } from './native/CustomOptionButton';

react/features/toolbox/components/index.web.ts

@@ -0,0 +1 @@
+export { default as CustomOptionButton } from './web/CustomOptionButton';

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

@@ -20,7 +20,7 @@ import {
     isButtonEnabled,
     isToolboxVisible
 } from '../../functions.web';
-import { useKeyboardShortcuts } from '../../hooks.web';
+import { useKeyboardShortcuts, useToolboxButtons } from '../../hooks.web';
 import { IToolboxButton } from '../../types';
 import HangupButton from '../HangupButton';
 
@@ -105,6 +105,7 @@ export default function Toolbox({
     const toolbarVisible = useSelector(isToolboxVisible);
     const mainToolbarButtonsThresholds
         = useSelector((state: IReduxState) => state['features/toolbox'].mainToolbarButtonsThresholds);
+    const allButtons = useToolboxButtons(customToolbarButtons);
 
     useKeyboardShortcuts(toolbarButtonsToUse);
 
@@ -216,7 +217,7 @@ export default function Toolbox({
     const containerClassName = `toolbox-content${isMobile || isNarrowLayout ? ' toolbox-content-mobile' : ''}`;
 
     const { mainMenuButtons, overflowMenuButtons } = getVisibleButtons({
-        customToolbarButtons,
+        allButtons,
         buttonsWithNotifyClick,
         toolbarButtons: toolbarButtonsToUse,
         clientWidth,
@@ -225,10 +226,9 @@ export default function Toolbox({
     });
     const raiseHandInOverflowMenu = overflowMenuButtons.some(({ key }) => key === 'raisehand');
     const showReactionsInOverflowMenu = _shouldDisplayReactionsButtons
-    && (
-        (!reactionsButtonEnabled && (raiseHandInOverflowMenu || isNarrowLayout || isMobile))
-            || overflowMenuButtons.some(({ key }) => key === 'reactions')
-    );
+        && (
+            (!reactionsButtonEnabled && (raiseHandInOverflowMenu || isNarrowLayout || isMobile))
+            || overflowMenuButtons.some(({ key }) => key === 'reactions'));
     const showRaiseHandInReactionsMenu = showReactionsInOverflowMenu && raiseHandInOverflowMenu;
 
     return (

react/features/toolbox/functions.web.ts

@@ -3,41 +3,9 @@ import { hasAvailableDevices } from '../base/devices/functions';
 import { MEET_FEATURES } from '../base/jwt/constants';
 import { isJwtFeatureEnabled } from '../base/jwt/functions';
 import { IGUMPendingState } from '../base/media/types';
-import ChatButton from '../chat/components/web/ChatButton';
-import EmbedMeetingButton from '../embed-meeting/components/EmbedMeetingButton';
-import SharedDocumentButton from '../etherpad/components/SharedDocumentButton.web';
-import FeedbackButton from '../feedback/components/FeedbackButton.web';
-import InviteButton from '../invite/components/add-people-dialog/web/InviteButton';
-import KeyboardShortcutsButton from '../keyboard-shortcuts/components/web/KeyboardShortcutsButton';
-import NoiseSuppressionButton from '../noise-suppression/components/NoiseSuppressionButton';
-import ParticipantsPaneButton from '../participants-pane/components/web/ParticipantsPaneButton';
-import RaiseHandContainerButton from '../reactions/components/web/RaiseHandContainerButtons';
-import ReactionsMenuButton from '../reactions/components/web/ReactionsMenuButton';
-import LiveStreamButton from '../recording/components/LiveStream/web/LiveStreamButton';
-import RecordButton from '../recording/components/Recording/web/RecordButton';
-import ShareAudioButton from '../screen-share/components/web/ShareAudioButton';
 import { isScreenMediaShared } from '../screen-share/functions';
-import SecurityDialogButton from '../security/components/security-dialog/web/SecurityDialogButton';
-import SettingsButton from '../settings/components/web/SettingsButton';
-import SharedVideoButton from '../shared-video/components/web/SharedVideoButton';
-import SpeakerStatsButton from '../speaker-stats/components/web/SpeakerStatsButton';
-import ClosedCaptionButton from '../subtitles/components/web/ClosedCaptionButton';
-import TileViewButton from '../video-layout/components/TileViewButton';
-import VideoQualityButton from '../video-quality/components/VideoQualityButton.web';
-import VideoBackgroundButton from '../virtual-background/components/VideoBackgroundButton';
-import WhiteboardButton from '../whiteboard/components/web/WhiteboardButton';
 import { isWhiteboardVisible } from '../whiteboard/functions';
 
-import DownloadButton from './components/DownloadButton';
-import HelpButton from './components/HelpButton';
-import AudioSettingsButton from './components/web/AudioSettingsButton';
-import CustomOptionButton from './components/web/CustomOptionButton';
-import FullscreenButton from './components/web/FullscreenButton';
-import LinkToSalesforceButton from './components/web/LinkToSalesforceButton';
-import ProfileButton from './components/web/ProfileButton';
-import ShareDesktopButton from './components/web/ShareDesktopButton';
-import ToggleCameraButton from './components/web/ToggleCameraButton';
-import VideoSettingsButton from './components/web/VideoSettingsButton';
 import { MAIN_TOOLBAR_BUTTONS_PRIORITY, TOOLBAR_TIMEOUT } from './constants';
 import { IMainToolbarButtonThresholds, IToolboxButton, NOTIFY_CLICK_MODE } from './types';
 
@@ -189,261 +157,6 @@ export function getToolbarTimeout(state: IReduxState) {
     return toolbarConfig?.timeout || TOOLBAR_TIMEOUT;
 }
 
-interface ICustomToolbarButton {
-    backgroundColor?: string;
-    icon: string;
-    id: string;
-    text: string;
-}
-
-/**
-    * Returns all buttons that could be rendered.
-    *
-    * @param {Object} _customToolbarButtons - An array containing custom buttons objects.
-    * @returns {Object} The button maps mainMenuButtons and overflowMenuButtons.
-    */
-export function getAllToolboxButtons(
-        _customToolbarButtons?: ICustomToolbarButton[]): { [key: string]: IToolboxButton; } {
-    const microphone = {
-        key: 'microphone',
-        Content: AudioSettingsButton,
-        group: 0
-    };
-
-    const camera = {
-        key: 'camera',
-        Content: VideoSettingsButton,
-        group: 0
-    };
-
-    const profile = {
-        key: 'profile',
-        Content: ProfileButton,
-        group: 1
-    };
-
-    const chat = {
-        key: 'chat',
-        Content: ChatButton,
-        group: 2
-    };
-
-    const desktop = {
-        key: 'desktop',
-        Content: ShareDesktopButton,
-        group: 2
-    };
-
-    // In Narrow layout and mobile web we are using drawer for popups and that is why it is better to include
-    // all forms of reactions in the overflow menu. Otherwise the toolbox will be hidden and the reactions popup
-    // misaligned.
-    const raisehand = {
-        key: 'raisehand',
-        Content: RaiseHandContainerButton,
-        group: 2
-    };
-
-    const reactions = {
-        key: 'reactions',
-        Content: ReactionsMenuButton,
-        group: 2
-    };
-
-    const participants = {
-        key: 'participants-pane',
-        Content: ParticipantsPaneButton,
-        group: 2
-    };
-
-    const invite = {
-        key: 'invite',
-        Content: InviteButton,
-        group: 2
-    };
-
-    const tileview = {
-        key: 'tileview',
-        Content: TileViewButton,
-        group: 2
-    };
-
-    const toggleCamera = {
-        key: 'toggle-camera',
-        Content: ToggleCameraButton,
-        group: 2
-    };
-
-    const videoquality = {
-        key: 'videoquality',
-        Content: VideoQualityButton,
-        group: 2
-    };
-
-    const fullscreen = {
-        key: 'fullscreen',
-        Content: FullscreenButton,
-        group: 2
-    };
-
-    const security = {
-        key: 'security',
-        Content: SecurityDialogButton,
-        group: 2
-    };
-
-    const closedcaptions = {
-        key: 'closedcaptions',
-        Content: ClosedCaptionButton,
-        group: 2
-    };
-
-    const recording = {
-        key: 'recording',
-        Content: RecordButton,
-        group: 2
-    };
-
-    const livestreaming = {
-        key: 'livestreaming',
-        Content: LiveStreamButton,
-        group: 2
-    };
-
-    const linktosalesforce = {
-        key: 'linktosalesforce',
-        Content: LinkToSalesforceButton,
-        group: 2
-    };
-
-    const sharedvideo = {
-        key: 'sharedvideo',
-        Content: SharedVideoButton,
-        group: 3
-    };
-
-    const shareaudio = {
-        key: 'shareaudio',
-        Content: ShareAudioButton,
-        group: 3
-    };
-
-    const noisesuppression = {
-        key: 'noisesuppression',
-        Content: NoiseSuppressionButton,
-        group: 3
-    };
-
-
-    const whiteboard = {
-        key: 'whiteboard',
-        Content: WhiteboardButton,
-        group: 3
-    };
-
-    const etherpad = {
-        key: 'etherpad',
-        Content: SharedDocumentButton,
-        group: 3
-    };
-
-    const virtualBackground = {
-        key: 'select-background',
-        Content: VideoBackgroundButton,
-        group: 3
-    };
-
-    const stats = {
-        key: 'stats',
-        Content: SpeakerStatsButton,
-        group: 3
-    };
-
-    const settings = {
-        key: 'settings',
-        Content: SettingsButton,
-        group: 4
-    };
-
-    const shortcuts = {
-        key: 'shortcuts',
-        Content: KeyboardShortcutsButton,
-        group: 4
-    };
-
-    const embedmeeting = {
-        key: 'embedmeeting',
-        Content: EmbedMeetingButton,
-        group: 4
-    };
-
-    const feedback = {
-        key: 'feedback',
-        Content: FeedbackButton,
-        group: 4
-    };
-
-    const download = {
-        key: 'download',
-        Content: DownloadButton,
-        group: 4
-    };
-
-    const help = {
-        key: 'help',
-        Content: HelpButton,
-        group: 4
-    };
-
-    const customButtons = _customToolbarButtons?.reduce((prev, { backgroundColor, icon, id, text }) => {
-        return {
-            ...prev,
-            [id]: {
-                backgroundColor,
-                key: id,
-                Content: CustomOptionButton,
-                group: 4,
-                icon,
-                text
-            }
-        };
-    }, {});
-
-    return {
-        microphone,
-        camera,
-        profile,
-        desktop,
-        chat,
-        raisehand,
-        reactions,
-        'participants-pane': participants,
-        invite,
-        tileview,
-        'toggle-camera': toggleCamera,
-        videoquality,
-        fullscreen,
-        security,
-        closedcaptions,
-        recording,
-        livestreaming,
-        linktosalesforce,
-        sharedvideo,
-        shareaudio,
-        noisesuppression,
-        whiteboard,
-        etherpad,
-        'select-background': virtualBackground,
-        stats,
-        settings,
-        shortcuts,
-        embedmeeting,
-        feedback,
-        download,
-        help,
-        ...customButtons
-    };
-}
-
 /**
  * Sets the notify click mode for the buttons.
  *
@@ -464,9 +177,9 @@ function setButtonsNotifyClickMode(buttons: Object, buttonsWithNotifyClick: Map<
 }
 
 interface IGetVisibleButtonsParams {
+    allButtons: { [key: string]: IToolboxButton; };
     buttonsWithNotifyClick: Map<string, NOTIFY_CLICK_MODE>;
     clientWidth: number;
-    customToolbarButtons?: ICustomToolbarButton[];
     jwtDisabledButtons: string[];
     mainToolbarButtonsThresholds: IMainToolbarButtonThresholds;
     toolbarButtons: string[];
@@ -479,22 +192,22 @@ interface IGetVisibleButtonsParams {
  * @returns {Object} - The visible buttons arrays .
  */
 export function getVisibleButtons({
-    customToolbarButtons,
+    allButtons,
     buttonsWithNotifyClick,
     toolbarButtons,
     clientWidth,
     jwtDisabledButtons,
     mainToolbarButtonsThresholds
 }: IGetVisibleButtonsParams) {
-    const buttons = getAllToolboxButtons(customToolbarButtons);
+    setButtonsNotifyClickMode(allButtons, buttonsWithNotifyClick);
 
-    const filteredButtons = Object.keys(buttons).filter(key =>
+    const filteredButtons = Object.keys(allButtons).filter(key =>
         typeof key !== 'undefined' // filter invalid buttons that may be comming from config.mainToolbarButtons
         // override
         && !jwtDisabledButtons.includes(key)
         && isButtonEnabled(key, toolbarButtons));
 
-    setButtonsNotifyClickMode(buttons, buttonsWithNotifyClick);
+
     const { order } = mainToolbarButtonsThresholds.find(({ width }) => clientWidth > width)
         || mainToolbarButtonsThresholds[mainToolbarButtonsThresholds.length - 1];
 
@@ -507,7 +220,7 @@ export function getVisibleButtons({
     const mainButtonsKeys = mainToolbarButtonKeysOrder.slice(0, order.length);
     const overflowMenuButtons = filteredButtons.reduce((acc, key) => {
         if (!mainButtonsKeys.includes(key)) {
-            acc.push(buttons[key]);
+            acc.push(allButtons[key]);
         }
 
         return acc;
@@ -522,7 +235,7 @@ export function getVisibleButtons({
     }
 
     return {
-        mainMenuButtons: mainButtonsKeys.map(key => buttons[key]),
+        mainMenuButtons: mainButtonsKeys.map(key => allButtons[key]),
         overflowMenuButtons
     };
 }

react/features/toolbox/hooks.web.ts

@@ -5,13 +5,24 @@ import { ACTION_SHORTCUT_TRIGGERED, createShortcutEvent } from '../analytics/Ana
 import { sendAnalytics } from '../analytics/functions';
 import { IReduxState } from '../app/types';
 import { toggleDialog } from '../base/dialog/actions';
+import { isIosMobileBrowser } from '../base/environment/utils';
+import { HELP_BUTTON_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
 import JitsiMeetJS from '../base/lib-jitsi-meet';
 import { raiseHand } from '../base/participants/actions';
 import { getLocalParticipant, hasRaisedHand } from '../base/participants/functions';
+import { isToggleCameraEnabled } from '../base/tracks/functions.web';
 import { toggleChat } from '../chat/actions.web';
+import ChatButton from '../chat/components/web/ChatButton';
+import { useEmbedButton } from '../embed-meeting/hooks';
+import { useEtherpadButton } from '../etherpad/hooks';
+import { useFeedbackButton } from '../feedback/hooks.web';
 import { setGifMenuVisibility } from '../gifs/actions';
 import { isGifEnabled } from '../gifs/function.any';
+import InviteButton from '../invite/components/add-people-dialog/web/InviteButton';
 import { registerShortcut, unregisterShortcut } from '../keyboard-shortcuts/actions.any';
+import { useKeyboardShortcutsButton } from '../keyboard-shortcuts/hooks.web';
+import NoiseSuppressionButton from '../noise-suppression/components/NoiseSuppressionButton';
 import {
     close as closeParticipantsPane,
     open as openParticipantsPane
@@ -20,20 +31,326 @@ import {
     getParticipantsPaneOpen,
     isParticipantsPaneEnabled
 } from '../participants-pane/functions';
+import { useParticipantPaneButton } from '../participants-pane/hooks.web';
 import { addReactionToBuffer } from '../reactions/actions.any';
 import { toggleReactionsMenuVisibility } from '../reactions/actions.web';
+import RaiseHandContainerButton from '../reactions/components/web/RaiseHandContainerButtons';
 import { REACTIONS } from '../reactions/constants';
 import { shouldDisplayReactionsButtons } from '../reactions/functions.any';
+import { useReactionsButton } from '../reactions/hooks';
+import { useLiveStreamingButton, useRecordingButton } from '../recording/hooks.web';
+import { isSalesforceEnabled } from '../salesforce/functions';
 import { startScreenShareFlow } from '../screen-share/actions.web';
-import { isScreenVideoShared } from '../screen-share/functions';
+import ShareAudioButton from '../screen-share/components/web/ShareAudioButton';
+import { isScreenAudioSupported, isScreenVideoShared } from '../screen-share/functions';
+import { useSecurityDialogButton } from '../security/hooks';
+import SettingsButton from '../settings/components/web/SettingsButton';
+import SharedVideoButton from '../shared-video/components/web/SharedVideoButton';
 import SpeakerStats from '../speaker-stats/components/web/SpeakerStats';
 import { isSpeakerStatsDisabled } from '../speaker-stats/functions';
+import { useSpeakerStatsButton } from '../speaker-stats/hooks.web';
+import { useClosedCaptionButton } from '../subtitles/hooks.web';
 import { toggleTileView } from '../video-layout/actions.any';
 import { shouldDisplayTileView } from '../video-layout/functions.any';
+import { useTileViewButton } from '../video-layout/hooks';
+import VideoQualityButton from '../video-quality/components/VideoQualityButton.web';
 import VideoQualityDialog from '../video-quality/components/VideoQualityDialog.web';
+import { useVirtualBackgroundButton } from '../virtual-background/hooks';
+import { useWhiteboardButton } from '../whiteboard/hooks';
 
 import { setFullScreen } from './actions.web';
+import DownloadButton from './components/DownloadButton';
+import HelpButton from './components/HelpButton';
+import AudioSettingsButton from './components/web/AudioSettingsButton';
+import CustomOptionButton from './components/web/CustomOptionButton';
+import FullscreenButton from './components/web/FullscreenButton';
+import LinkToSalesforceButton from './components/web/LinkToSalesforceButton';
+import ProfileButton from './components/web/ProfileButton';
+import ShareDesktopButton from './components/web/ShareDesktopButton';
+import ToggleCameraButton from './components/web/ToggleCameraButton';
+import VideoSettingsButton from './components/web/VideoSettingsButton';
 import { isButtonEnabled, isDesktopShareButtonDisabled } from './functions.web';
+import { ICustomToolbarButton, IToolboxButton, ToolbarButton } from './types';
+
+const microphone = {
+    key: 'microphone',
+    Content: AudioSettingsButton,
+    group: 0
+};
+
+const camera = {
+    key: 'camera',
+    Content: VideoSettingsButton,
+    group: 0
+};
+
+const profile = {
+    key: 'profile',
+    Content: ProfileButton,
+    group: 1
+};
+
+const chat = {
+    key: 'chat',
+    Content: ChatButton,
+    group: 2
+};
+
+const desktop = {
+    key: 'desktop',
+    Content: ShareDesktopButton,
+    group: 2
+};
+
+// In Narrow layout and mobile web we are using drawer for popups and that is why it is better to include
+// all forms of reactions in the overflow menu. Otherwise the toolbox will be hidden and the reactions popup
+// misaligned.
+const raisehand = {
+    key: 'raisehand',
+    Content: RaiseHandContainerButton,
+    group: 2
+};
+
+const invite = {
+    key: 'invite',
+    Content: InviteButton,
+    group: 2
+};
+
+const toggleCamera = {
+    key: 'toggle-camera',
+    Content: ToggleCameraButton,
+    group: 2
+};
+
+const videoQuality = {
+    key: 'videoquality',
+    Content: VideoQualityButton,
+    group: 2
+};
+
+const fullscreen = {
+    key: 'fullscreen',
+    Content: FullscreenButton,
+    group: 2
+};
+
+const linkToSalesforce = {
+    key: 'linktosalesforce',
+    Content: LinkToSalesforceButton,
+    group: 2
+};
+
+const shareVideo = {
+    key: 'sharedvideo',
+    Content: SharedVideoButton,
+    group: 3
+};
+
+const shareAudio = {
+    key: 'shareaudio',
+    Content: ShareAudioButton,
+    group: 3
+};
+
+const noiseSuppression = {
+    key: 'noisesuppression',
+    Content: NoiseSuppressionButton,
+    group: 3
+};
+
+const settings = {
+    key: 'settings',
+    Content: SettingsButton,
+    group: 4
+};
+
+const download = {
+    key: 'download',
+    Content: DownloadButton,
+    group: 4
+};
+
+const help = {
+    key: 'help',
+    Content: HelpButton,
+    group: 4
+};
+
+/**
+ * A hook that returns the toggle camera button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function useToggleCameraButton() {
+    const toggleCameraEnabled = useSelector(isToggleCameraEnabled);
+
+    if (toggleCameraEnabled) {
+        return toggleCamera;
+    }
+}
+
+/**
+ * A hook that returns the desktop sharing button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function getDesktopSharingButton() {
+    if (JitsiMeetJS.isDesktopSharingEnabled()) {
+        return desktop;
+    }
+}
+
+/**
+ * A hook that returns the fullscreen button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function getFullscreenButton() {
+    if (!isIosMobileBrowser()) {
+        return fullscreen;
+    }
+}
+
+/**
+ * A hook that returns the "link to salesforce" button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function useLinkToSalesforceButton() {
+    const _isSalesforceEnabled = useSelector(isSalesforceEnabled);
+
+    if (_isSalesforceEnabled) {
+        return linkToSalesforce;
+    }
+}
+
+
+/**
+ * A hook that returns the share audio button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function getShareAudioButton() {
+    if (JitsiMeetJS.isDesktopSharingEnabled() && isScreenAudioSupported()) {
+        return shareAudio;
+    }
+}
+
+/**
+ * A hook that returns the download button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function useDownloadButton() {
+    const visible = useSelector(
+        (state: IReduxState) => typeof state['features/base/config'].deploymentUrls?.downloadAppsUrl === 'string');
+
+    if (visible) {
+        return download;
+    }
+}
+
+/**
+ * A hook that returns the help button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+function useHelpButton() {
+    const visible = useSelector(
+        (state: IReduxState) =>
+            typeof state['features/base/config'].deploymentUrls?.userDocumentationURL === 'string'
+                && getFeatureFlag(state, HELP_BUTTON_ENABLED, true));
+
+    if (visible) {
+        return help;
+    }
+}
+
+/**
+* Returns all buttons that could be rendered.
+*
+* @param {Object} _customToolbarButtons - An array containing custom buttons objects.
+* @returns {Object} The button maps mainMenuButtons and overflowMenuButtons.
+*/
+export function useToolboxButtons(
+        _customToolbarButtons?: ICustomToolbarButton[]): { [key: string]: IToolboxButton; } {
+    const dekstopSharing = getDesktopSharingButton();
+    const toggleCameraButton = useToggleCameraButton();
+    const _fullscreen = getFullscreenButton();
+    const security = useSecurityDialogButton();
+    const reactions = useReactionsButton();
+    const participants = useParticipantPaneButton();
+    const tileview = useTileViewButton();
+    const cc = useClosedCaptionButton();
+    const recording = useRecordingButton();
+    const liveStreaming = useLiveStreamingButton();
+    const linktosalesforce = useLinkToSalesforceButton();
+    const shareaudio = getShareAudioButton();
+    const whiteboard = useWhiteboardButton();
+    const etherpad = useEtherpadButton();
+    const virtualBackground = useVirtualBackgroundButton();
+    const speakerStats = useSpeakerStatsButton();
+    const shortcuts = useKeyboardShortcutsButton();
+    const embed = useEmbedButton();
+    const feedback = useFeedbackButton();
+    const _download = useDownloadButton();
+    const _help = useHelpButton();
+
+    const buttons: { [key in ToolbarButton]?: IToolboxButton; } = {
+        microphone,
+        camera,
+        profile,
+        desktop: dekstopSharing,
+        chat,
+        raisehand,
+        reactions,
+        'participants-pane': participants,
+        invite,
+        tileview,
+        'toggle-camera': toggleCameraButton,
+        videoquality: videoQuality,
+        fullscreen: _fullscreen,
+        security,
+        closedcaptions: cc,
+        recording,
+        livestreaming: liveStreaming,
+        linktosalesforce,
+        sharedvideo: shareVideo,
+        shareaudio,
+        noisesuppression: noiseSuppression,
+        whiteboard,
+        etherpad,
+        'select-background': virtualBackground,
+        stats: speakerStats,
+        settings,
+        shortcuts,
+        embedmeeting: embed,
+        feedback,
+        download: _download,
+        help: _help
+    };
+
+    const customButtons = _customToolbarButtons?.reduce((prev, { backgroundColor, icon, id, text }) => {
+        prev[id] = {
+            backgroundColor,
+            key: id,
+            id,
+            Content: CustomOptionButton,
+            group: 4,
+            icon,
+            text
+        };
+
+        return prev;
+    }, {} as { [key: string]: ICustomToolbarButton; });
+
+    return {
+        ...buttons,
+        ...customButtons
+    };
+}
+
 
 export const useKeyboardShortcuts = (toolbarButtons: Array<string>) => {
     const dispatch = useDispatch();

react/features/toolbox/types.ts

@@ -1,5 +1,7 @@
 import { ComponentType } from 'react';
 
+import { CustomOptionButton } from './components';
+
 export interface IToolboxButton {
     Content: ComponentType<any>;
     group: number;
@@ -53,3 +55,13 @@ export type IMainToolbarButtonThresholds = Array<{
     order: Array<ToolbarButton | string>;
     width: number;
 }>;
+
+export interface ICustomToolbarButton {
+    Content?: typeof CustomOptionButton;
+    backgroundColor?: string;
+    group?: number;
+    icon: string;
+    id: string;
+    key?: string;
+    text: string;
+}

react/features/video-layout/hooks.ts

@@ -0,0 +1,26 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+import { TILE_VIEW_ENABLED } from '../base/flags/constants';
+import { getFeatureFlag } from '../base/flags/functions';
+
+import TileViewButton from './components/TileViewButton';
+
+const tileview = {
+    key: 'tileview',
+    Content: TileViewButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the tile view button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useTileViewButton() {
+    const tileViewEnabled = useSelector((state: IReduxState) => getFeatureFlag(state, TILE_VIEW_ENABLED, true));
+
+    if (tileViewEnabled) {
+        return tileview;
+    }
+}

react/features/virtual-background/hooks.ts

@@ -0,0 +1,27 @@
+import { useSelector } from 'react-redux';
+
+import { isScreenVideoShared } from '../screen-share/functions';
+
+import VideoBackgroundButton from './components/VideoBackgroundButton';
+import { checkBlurSupport, checkVirtualBackgroundEnabled } from './functions';
+
+const virtualBackground = {
+    key: 'select-background',
+    Content: VideoBackgroundButton,
+    group: 3
+};
+
+/**
+ * A hook that returns the virtual background button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useVirtualBackgroundButton() {
+    const _checkBlurSupport = checkBlurSupport();
+    const _isScreenVideoShared = useSelector(isScreenVideoShared);
+    const _checkVirtualBackgroundEnabled = useSelector(checkVirtualBackgroundEnabled);
+
+    if (_checkBlurSupport && !_isScreenVideoShared && _checkVirtualBackgroundEnabled) {
+        return virtualBackground;
+    }
+}

react/features/whiteboard/hooks.ts

@@ -0,0 +1,23 @@
+import { useSelector } from 'react-redux';
+
+import WhiteboardButton from './components/web/WhiteboardButton';
+import { isWhiteboardButtonVisible } from './functions';
+
+const whiteboard = {
+    key: 'whiteboard',
+    Content: WhiteboardButton,
+    group: 3
+};
+
+/**
+ * A hook that returns the whiteboard button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useWhiteboardButton() {
+    const _isWhiteboardButtonVisible = useSelector(isWhiteboardButtonVisible);
+
+    if (_isWhiteboardButtonVisible) {
+        return whiteboard;
+    }
+}