Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(toolbox): add custom buttons if overflow menu is disabled #15506

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
+75 −32
Draft

feat(toolbox): add custom buttons if overflow menu is disabled #15506

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
107 changes: 75 additions & 32 deletions react/features/toolbox/components/native/Toolbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,32 @@
import React from 'react';
import { View, ViewStyle } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { connect } from 'react-redux';
import { connect, useDispatch, useSelector, useStore } from 'react-redux';

import { IReduxState } from '../../../app/types';
import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry';
import { OVERFLOW_MENU_ENABLED } from '../../../base/flags/constants';
import { getFeatureFlag } from '../../../base/flags/functions';
import Platform from '../../../base/react/Platform.native';
import ChatButton from '../../../chat/components/native/ChatButton';
import ReactionsMenuButton from '../../../reactions/components/native/ReactionsMenuButton';
import { shouldDisplayReactionsButtons } from '../../../reactions/functions.any';
import TileViewButton from '../../../video-layout/components/TileViewButton';
import { iAmVisitor } from '../../../visitors/functions';
import { customOverflowMenuButtonPressed } from '../../actions.native';
import { getMovableButtons, isToolboxVisible } from '../../functions.native';
import HangupButton from '../HangupButton';

import AudioMuteButton from './AudioMuteButton';
import CustomOptionButton from './CustomOptionButton';
import HangupMenuButton from './HangupMenuButton';
import OverflowMenuButton from './OverflowMenuButton';
import RaiseHandButton from './RaiseHandButton';
import ScreenSharingButton from './ScreenSharingButton';
import VideoMuteButton from './VideoMuteButton';
import styles from './styles';


/**
* The type of {@link Toolbox}'s React {@code Component} props.
*/
Expand Down Expand Up @@ -89,6 +94,37 @@
style.justifyContent = 'center';
}

const store = useStore();
const state = store.getState();
const overflowMenuEnabledFlag = getFeatureFlag(state, OVERFLOW_MENU_ENABLED, true);
const { customToolbarButtons } = useSelector((state: IReduxState) => state['features/base/config']);

Check failure on line 100 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

'state' is already declared in the upper scope on line 98 column 11

const renderCustomToolbarButtons = () => {
const dispatch = useDispatch();

if (!customToolbarButtons?.length) {
return;
}

return (
<>
{
customToolbarButtons.map(({ id, text, icon, backgroundColor }) => (
<CustomOptionButton
backgroundColor = { backgroundColor }
/* eslint-disable react/jsx-no-bind */
handleClick = { () =>
dispatch(customOverflowMenuButtonPressed(id, text))
}
icon = { icon }
key = { id }
text = { text } />
))
}
</>
);
}

Check failure on line 126 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Missing semicolon

return (
<View
style = { styles.toolboxContainer as ViewStyle }>
Expand All @@ -99,38 +135,45 @@
edges = { [ bottomEdge && 'bottom' ].filter(Boolean) }
pointerEvents = 'box-none'
style = { style as ViewStyle }>
{!_iAmVisitor && <AudioMuteButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{!_iAmVisitor && <VideoMuteButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{additionalButtons.has('chat')
&& <ChatButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />
}
{!_iAmVisitor && additionalButtons.has('screensharing')
&& <ScreenSharingButton styles = { buttonStylesBorderless } />}
{additionalButtons.has('raisehand') && (_shouldDisplayReactionsButtons
? <ReactionsMenuButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />
: <RaiseHandButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />)}
{additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
{!_iAmVisitor && <OverflowMenuButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{ _endConferenceSupported
? <HangupMenuButton />
: <HangupButton
styles = { hangupButtonStyles } />
{
!overflowMenuEnabledFlag && customToolbarButtons
? renderCustomToolbarButtons()

Check failure on line 140 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 spaces but found 20

Check failure on line 140 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 spaces but found 20
: <>

Check failure on line 141 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 spaces but found 20

Check failure on line 141 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 spaces but found 20
{!_iAmVisitor && <AudioMuteButton

Check failure on line 142 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 space characters but found 28
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{!_iAmVisitor && <VideoMuteButton

Check failure on line 146 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 space characters but found 28
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{additionalButtons.has('chat')

Check failure on line 150 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 space characters but found 28
&& <ChatButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />
}
{!_iAmVisitor && additionalButtons.has('screensharing')

Check failure on line 155 in react/features/toolbox/components/native/Toolbox.tsx

View workflow job for this annotation

GitHub Actions / Lint 

Expected indentation of 24 space characters but found 28
&& <ScreenSharingButton styles = { buttonStylesBorderless } />}
{additionalButtons.has('raisehand') && (_shouldDisplayReactionsButtons
? <ReactionsMenuButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />
: <RaiseHandButton
styles = { buttonStylesBorderless }
toggledStyles = { backgroundToggledStyle } />)}
{additionalButtons.has('tileview') && <TileViewButton styles = { buttonStylesBorderless } />}
{(!_iAmVisitor) && <OverflowMenuButton
styles = { buttonStylesBorderless }
toggledStyles = { toggledButtonStyles } />
}
{ _endConferenceSupported
? <HangupMenuButton />
: <HangupButton
styles = { hangupButtonStyles } />
}
</>
}

</SafeAreaView>
</View>
);
Expand Down
Loading