diff --git a/react/features/speaker-stats/components/native/SpeakerStats.js b/react/features/speaker-stats/components/native/SpeakerStats.js index 76a0bf705..f3807ec61 100644 --- a/react/features/speaker-stats/components/native/SpeakerStats.js +++ b/react/features/speaker-stats/components/native/SpeakerStats.js @@ -1,10 +1,15 @@ // @flow -import React from 'react'; +import React, { useCallback, useEffect } from 'react'; +import { useDispatch } from 'react-redux'; import JitsiScreen from '../../../base/modal/components/JitsiScreen'; +import { escapeRegexp } from '../../../base/util'; +import { resetSearchCriteria, initSearch } from '../../actions'; + import SpeakerStatsList from './SpeakerStatsList'; +import SpeakerStatsSearch from './SpeakerStatsSearch'; import style from './styles'; /** @@ -12,11 +17,22 @@ import style from './styles'; * * @returns {React$Element} */ -const SpeakerStats = () => ( - - - -); +const SpeakerStats = () => { + const dispatch = useDispatch(); + const onSearch = useCallback((criteria = '') => { + dispatch(initSearch(escapeRegexp(criteria))); + } + , [ dispatch ]); + + useEffect(() => () => dispatch(resetSearchCriteria()), []); + + return ( + + + + + ); +}; export default SpeakerStats; diff --git a/react/features/speaker-stats/components/native/SpeakerStatsItem.js b/react/features/speaker-stats/components/native/SpeakerStatsItem.js index 8f8ae5b35..c5fa03c42 100644 --- a/react/features/speaker-stats/components/native/SpeakerStatsItem.js +++ b/react/features/speaker-stats/components/native/SpeakerStatsItem.js @@ -60,14 +60,15 @@ const SpeakerStatsItem = (props: Props) => } - + {props.displayName} diff --git a/react/features/speaker-stats/components/native/SpeakerStatsSearch.js b/react/features/speaker-stats/components/native/SpeakerStatsSearch.js new file mode 100644 index 000000000..88a50c1b6 --- /dev/null +++ b/react/features/speaker-stats/components/native/SpeakerStatsSearch.js @@ -0,0 +1,60 @@ +// @flow +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { withTheme } from 'react-native-paper'; +import { useSelector } from 'react-redux'; + +import { IconSearch, Icon } from '../../../base/icons'; +import ClearableInput from '../../../participants-pane/components/native/ClearableInput'; +import { isSpeakerStatsSearchDisabled } from '../../functions'; + +import styles from './styles'; + +/** + * The type of the React {@code Component} props of {@link SpeakerStatsSearch}. + */ +type Props = { + + /** + * The function to initiate the change in the speaker stats table. + */ + onSearch: Function, + + /** + * Theme used for styles. + */ + theme: Object +}; + +/** + * React component for display an individual user's speaker stats. + * + * @returns {React$Element} + */ +function SpeakerStatsSearch({ onSearch, theme }: Props) { + const { t } = useTranslation(); + + const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled); + + if (disableSpeakerStatsSearch) { + return null; + } + + return ( + + } + selectionColor = { theme.palette.text01 } /> + ); +} + +export default withTheme(SpeakerStatsSearch); diff --git a/react/features/speaker-stats/components/native/styles.js b/react/features/speaker-stats/components/native/styles.js index 7d785d7ef..dec740a55 100644 --- a/react/features/speaker-stats/components/native/styles.js +++ b/react/features/speaker-stats/components/native/styles.js @@ -5,7 +5,7 @@ export default { flexDirection: 'column', flex: 1, height: 'auto', - paddingHorizontal: 16, + paddingHorizontal: BaseTheme.spacing[3], backgroundColor: BaseTheme.palette.ui02 }, speakerStatsItemContainer: { @@ -17,7 +17,7 @@ export default { speakerStatsAvatar: { width: 32, height: 32, - marginRight: 16 + marginRight: BaseTheme.spacing[3] }, speakerStatsNameTime: { flexDirection: 'row', @@ -37,7 +37,25 @@ export default { }, speakerStatsDominant: { backgroundColor: BaseTheme.palette.success02 + }, + speakerStatsLeft: { + color: BaseTheme.palette.text03 + }, + speakerStatsSearch: { + wrapper: { + marginLeft: 0, + marginRight: 0, + marginVertical: BaseTheme.spacing[3], + flexDirection: 'row', + alignItems: 'center' + }, + input: { + textAlign: 'left' + }, + searchIcon: { + width: 10, + height: 20, + marginLeft: BaseTheme.spacing[3] + } } - - }; diff --git a/react/features/speaker-stats/components/web/SpeakerStatsSearch.js b/react/features/speaker-stats/components/web/SpeakerStatsSearch.js index 63a52d644..1d6b7eb27 100644 --- a/react/features/speaker-stats/components/web/SpeakerStatsSearch.js +++ b/react/features/speaker-stats/components/web/SpeakerStatsSearch.js @@ -73,9 +73,15 @@ type Props = { function SpeakerStatsSearch({ onSearch }: Props) { const classes = useStyles(); const { t } = useTranslation(); - const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled); const [ searchValue, setSearchValue ] = useState(''); + + /** + * Callback for the onChange event of the field. + * + * @param {Object} evt - The static event. + * @returns {void} + */ const onChange = useCallback((evt: Event) => { const value = getFieldValue(evt);