diff --git a/react/features/toolbox/constants.ts b/react/features/toolbox/constants.ts index 5116c6e573b8..e57ea7ee5635 100644 --- a/react/features/toolbox/constants.ts +++ b/react/features/toolbox/constants.ts @@ -61,31 +61,67 @@ export const THRESHOLDS = [ ]; /** - * Thresholds for displaying native toolbox buttons. + * Thresholds for displaying native toolbox buttons on iOS devices. + * Breakpoints match real iPhone screen widths (points): + * 500 - above all iPhones (8+ buttons) + * 428 - iPhone Pro Max + * 390 - iPhone 14/15 + * 375 - iPhone SE / 8 + * 320 - fallback */ -export const NATIVE_THRESHOLDS = [ +export const IOS_THRESHOLDS = [ { - width: 560, - order: [ 'microphone', 'camera', 'chat', 'desktop', 'raisehand', 'tileview', 'overflowmenu', 'hangup' ] + width: 500, + order: [ 'microphone', 'camera', 'chat', 'screensharing', 'raisehand', 'tileview', 'overflowmenu', 'hangup' ] }, { - width: 500, + width: 428, order: [ 'microphone', 'camera', 'chat', 'raisehand', 'tileview', 'overflowmenu', 'hangup' ] }, { - width: 440, + width: 375, order: [ 'microphone', 'camera', 'chat', 'raisehand', 'overflowmenu', 'hangup' ] }, { - width: 380, + width: 320, order: [ 'microphone', 'camera', 'chat', 'overflowmenu', 'hangup' ] + } +]; + +/** + * Thresholds for displaying native toolbox buttons on Android devices. + * Breakpoints match common Android screen widths (dp): + * 500 - large tablets / foldables unfolded + * 412 - Pixel / Samsung flagship (e.g. Pixel 7, Galaxy S24+) + * 393 - Samsung Galaxy S24 + * 360 - mid-range Android (e.g. Samsung A-series) + * 320 - fallback + */ +export const ANDROID_THRESHOLDS = [ + { + width: 500, + order: [ 'microphone', 'camera', 'chat', 'screensharing', 'raisehand', 'tileview', 'overflowmenu', 'hangup' ] + }, + { + width: 412, + order: [ 'microphone', 'camera', 'chat', 'raisehand', 'tileview', 'overflowmenu', 'hangup' ] + }, + { + width: 360, + order: [ 'microphone', 'camera', 'chat', 'raisehand', 'overflowmenu', 'hangup' ] }, { width: 320, - order: [ 'microphone', 'camera', 'overflowmenu', 'hangup' ] + order: [ 'microphone', 'camera', 'chat', 'overflowmenu', 'hangup' ] } ]; +/** + * Default native thresholds (iOS). Used as initial Redux state before + * middleware overrides with platform-specific thresholds. + */ +export const NATIVE_THRESHOLDS = IOS_THRESHOLDS; + /** * Main toolbar buttons priority used to determine which button should be picked to fill empty spaces for disabled * buttons. diff --git a/react/features/toolbox/functions.native.ts b/react/features/toolbox/functions.native.ts index 0345ba3bb927..e3342ca30449 100644 --- a/react/features/toolbox/functions.native.ts +++ b/react/features/toolbox/functions.native.ts @@ -79,7 +79,7 @@ export function getVisibleNativeButtons( filteredButtons = VISITORS_MODE_BUTTONS.filter(button => filteredButtons.indexOf(button) > -1); } - const { order } = mainToolbarButtonsThresholds.find(({ width }) => clientWidth > width) + const { order } = mainToolbarButtonsThresholds.find(({ width }) => clientWidth >= width) || mainToolbarButtonsThresholds[mainToolbarButtonsThresholds.length - 1]; const mainToolbarButtonKeysOrder = [ @@ -99,11 +99,11 @@ export function getVisibleNativeButtons( // if we have 1 button in the overflow menu it is better to directly display it in the main toolbar by replacing // the "More" menu button with it. - if (overflowMenuButtons.length === 1) { - const button = overflowMenuButtons.shift()?.key; + //if (overflowMenuButtons.length === 1) { + // const button = overflowMenuButtons.shift()?.key; - button && mainButtonsKeys.push(button); - } + // button && mainButtonsKeys.push(button); + //} const mainMenuButtons = mainButtonsKeys.map(key => allButtons[key]).sort((a, b) => { diff --git a/react/features/toolbox/middleware.native.ts b/react/features/toolbox/middleware.native.ts index 0821c66dd2a3..3c040598e61b 100644 --- a/react/features/toolbox/middleware.native.ts +++ b/react/features/toolbox/middleware.native.ts @@ -1,12 +1,16 @@ +import { Platform } from 'react-native'; + import { OVERWRITE_CONFIG, SET_CONFIG, UPDATE_CONFIG } from '../base/config/actionTypes'; import MiddlewareRegistry from '../base/redux/MiddlewareRegistry'; import { I_AM_VISITOR_MODE } from '../visitors/actionTypes'; import { SET_TOOLBAR_BUTTONS } from './actionTypes'; import { setMainToolbarThresholds } from './actions.native'; -import { NATIVE_THRESHOLDS, NATIVE_TOOLBAR_BUTTONS } from './constants'; +import { ANDROID_THRESHOLDS, IOS_THRESHOLDS, NATIVE_TOOLBAR_BUTTONS } from './constants'; import { getToolbarButtons } from './functions.native'; +const PLATFORM_THRESHOLDS = Platform.OS === 'ios' ? IOS_THRESHOLDS : ANDROID_THRESHOLDS; + /** * Middleware which intercepts Toolbox actions to handle changes to the @@ -30,7 +34,7 @@ MiddlewareRegistry.register(store => next => action => { const toolbarButtons = getToolbarButtons(state, NATIVE_TOOLBAR_BUTTONS); if (action.type !== I_AM_VISITOR_MODE) { - dispatch(setMainToolbarThresholds(NATIVE_THRESHOLDS)); + dispatch(setMainToolbarThresholds(PLATFORM_THRESHOLDS)); } dispatch({