feat(toolbar): Enable 9th and 10th button

react/features/toolbox/actions.any.ts

@@ -12,7 +12,8 @@ import {
     SET_TOOLBOX_VISIBLE,
     TOGGLE_TOOLBOX_VISIBLE
 } from './actionTypes';
-import { IMainToolbarButtonThresholds } from './types';
+import { DUMMY_10_BUTTONS_THRESHOLD_VALUE, DUMMY_9_BUTTONS_THRESHOLD_VALUE } from './constants';
+import { IMainToolbarButtonThresholds, IMainToolbarButtonThresholdsUnfiltered } from './types';
 
 /**
  * Enables/disables the toolbox.
@@ -127,7 +128,7 @@ export function setShiftUp(shiftUp: boolean) {
  * @param {IMainToolbarButtonThresholds} thresholds - Thresholds for screen size and visible main toolbar buttons.
  * @returns {Function}
  */
-export function setMainToolbarThresholds(thresholds: IMainToolbarButtonThresholds) {
+export function setMainToolbarThresholds(thresholds: IMainToolbarButtonThresholdsUnfiltered) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const { mainToolbarButtons } = getState()['features/base/config'];
 
@@ -149,12 +150,27 @@ export function setMainToolbarThresholds(thresholds: IMainToolbarButtonThreshold
         });
 
         thresholds.forEach(({ width, order }) => {
-            let finalOrder = mainToolbarButtonsLengthMap.get(order.length);
+            let numberOfButtons = 0;
+
+            if (Array.isArray(order)) {
+                numberOfButtons = order.length;
+            } else if (order === DUMMY_9_BUTTONS_THRESHOLD_VALUE) {
+                numberOfButtons = 9;
+            } else if (order === DUMMY_10_BUTTONS_THRESHOLD_VALUE) {
+                numberOfButtons = 10;
+            } else { // Unexpected value. Ignore it.
+                return;
+            }
+
+            let finalOrder = mainToolbarButtonsLengthMap.get(numberOfButtons);
 
             if (finalOrder) {
                 orderIsChanged = true;
-            } else {
+            } else if (Array.isArray(order)) {
                 finalOrder = order;
+            } else {
+                // Ignore dummy (symbol) values.
+                return;
             }
 
             mainToolbarButtonsThresholds.push({

react/features/toolbox/constants.ts

@@ -1,9 +1,33 @@
 import { NativeToolbarButton, ToolbarButton } from './types';
 
+/**
+ * Dummy toolbar threschold value for 9 buttons. It is used as a placeholder in THRESHOLDS that would work only when
+ * this value is overiden.
+ */
+export const DUMMY_9_BUTTONS_THRESHOLD_VALUE = Symbol('9_BUTTONS_THRESHOLD_VALUE');
+
+/**
+ * Dummy toolbar threschold value for 10 buttons. It is used as a placeholder in THRESHOLDS that would work only when
+ * this value is overiden.
+ */
+export const DUMMY_10_BUTTONS_THRESHOLD_VALUE = Symbol('10_BUTTONS_THRESHOLD_VALUE');
+
 /**
  * Thresholds for displaying toolbox buttons.
  */
 export const THRESHOLDS = [
+
+    // This entry won't be used unless the order is overridden trough the mainToolbarButtons config prop.
+    {
+        width: 675,
+        order: DUMMY_10_BUTTONS_THRESHOLD_VALUE
+    },
+
+    // This entry won't be used unless the order is overridden trough the mainToolbarButtons config prop.
+    {
+        width: 625,
+        order: DUMMY_9_BUTTONS_THRESHOLD_VALUE
+    },
     {
         width: 565,
         order: [ 'microphone', 'camera', 'desktop', 'chat', 'raisehand', 'reactions', 'participants-pane', 'tileview' ]

react/features/toolbox/functions.native.ts

@@ -66,8 +66,8 @@ export function isVideoMuteButtonDisabled(state: IReduxState) {
  * @param {IGetVisibleButtonsParams} params - The parameters needed to extract the visible buttons.
  * @returns {Object} - The visible buttons arrays .
  */
-export function getVisibleNativeButtons({ allButtons, clientWidth, mainToolbarButtonsThresholds, toolbarButtons
-}: IGetVisibleNativeButtonsParams) {
+export function getVisibleNativeButtons(
+        { allButtons, clientWidth, mainToolbarButtonsThresholds, toolbarButtons }: IGetVisibleNativeButtonsParams) {
     const filteredButtons = Object.keys(allButtons).filter(key =>
         typeof key !== 'undefined' // filter invalid buttons that may be coming from config.mainToolbarButtons override
         && isButtonEnabled(key, toolbarButtons));

react/features/toolbox/reducer.ts

@@ -21,6 +21,15 @@ import {
 import { NATIVE_THRESHOLDS, THRESHOLDS } from './constants';
 import { IMainToolbarButtonThresholds, NOTIFY_CLICK_MODE } from './types';
 
+/**
+ * Array of thresholds for the main toolbar buttons that will inlude only the usable entries from  THRESHOLDS array.
+ *
+ * Note: THRESHOLDS array includes some dummy values that enables users of the iframe API to override and use.
+ * Note2: Casting is needed because it seems isArray guard is not working well in TS. See:
+ * https://github.com/microsoft/TypeScript/issues/17002.
+ */
+const FILTERED_THRESHOLDS = THRESHOLDS.filter(({ order }) => Array.isArray(order)) as IMainToolbarButtonThresholds;
+
 /**
  * Initial state of toolbox's part of Redux store.
  */
@@ -52,7 +61,7 @@ const INITIAL_STATE = {
     /**
      * The thresholds for screen size and visible main toolbar buttons.
      */
-    mainToolbarButtonsThresholds: navigator.product === 'ReactNative' ? NATIVE_THRESHOLDS : THRESHOLDS,
+    mainToolbarButtonsThresholds: navigator.product === 'ReactNative' ? NATIVE_THRESHOLDS : FILTERED_THRESHOLDS,
 
     participantMenuButtonsWithNotifyClick: new Map(),
 

react/features/toolbox/types.ts

@@ -65,6 +65,11 @@ export type IMainToolbarButtonThresholds = Array<{
     width: number;
 }>;
 
+export type IMainToolbarButtonThresholdsUnfiltered = Array<{
+    order: Array<ToolbarButton | NativeToolbarButton | string> | Symbol;
+    width: number;
+}>;
+
 export interface ICustomToolbarButton {
     Content?: ComponentType<any>;
     backgroundColor?: string;