snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

2026-09-15 15:56:32 +05:00
commit 1d2bfcac0c
3159 changed files with 464524 additions and 0 deletions
--- a/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx
+++ b/react/features/speaker-stats/components/web/SpeakerStatsSearch.tsx
@@ -0,0 +1,128 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../../base/icons/components/Icon';
+import { IconSearch } from '../../../base/icons/svg';
+import { getFieldValue } from '../../../base/react/functions';
+import { HiddenDescription } from '../../../base/ui/components/web/HiddenDescription';
+import { MOBILE_BREAKPOINT } from '../../constants';
+import { isSpeakerStatsSearchDisabled } from '../../functions';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        speakerStatsSearchContainer: {
+            position: 'relative'
+        },
+        searchIcon: {
+            display: 'none',
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                display: 'block',
+                position: 'absolute',
+                color: theme.palette.speakerStatsSearchPlaceholder,
+                left: 16,
+                top: 13,
+                width: 20,
+                height: 20
+            }
+        },
+        speakerStatsSearch: {
+            backgroundColor: theme.palette.speakerStatsSearchBackground,
+            border: '1px solid',
+            borderRadius: 6,
+            borderColor: theme.palette.speakerStatsSearchBorder,
+            color: theme.palette.speakerStatsSearchText,
+            padding: '10px 16px',
+            width: '100%',
+            height: 40,
+            '&::placeholder': {
+                color: theme.palette.speakerStatsSearchPlaceholder,
+                ...theme.typography.bodyShortRegular
+            },
+            [theme.breakpoints.down(MOBILE_BREAKPOINT)]: {
+                height: 48,
+                padding: '13px 16px 13px 44px',
+                '&::placeholder': {
+                    ...theme.typography.bodyShortRegular
+                }
+            }
+        }
+    };
+});
+
+/**
+ * The type of the React {@code Component} props of {@link SpeakerStatsSearch}.
+ */
+interface IProps {
+
+    /**
+     * The function to initiate the change in the speaker stats table.
+     */
+    onSearch: Function;
+
+}
+
+/**
+ * React component for display an individual user's speaker stats.
+ *
+ * @returns {React$Element<any>}
+ */
+function SpeakerStatsSearch({ onSearch }: IProps) {
+    const { classes, theme } = useStyles();
+    const { t } = useTranslation();
+    const disableSpeakerStatsSearch = useSelector(isSpeakerStatsSearchDisabled);
+    const [ searchValue, setSearchValue ] = useState<string>('');
+
+    /**
+     * Callback for the onChange event of the field.
+     *
+     * @param {Object} evt - The static event.
+     * @returns {void}
+     */
+    const onChange = useCallback((evt: React.ChangeEvent<HTMLInputElement>) => {
+        const value = getFieldValue(evt);
+
+        setSearchValue(value);
+        onSearch?.(value);
+    }, []);
+    const preventDismiss = useCallback((evt: React.KeyboardEvent) => {
+        if (evt.key === 'Enter') {
+            evt.preventDefault();
+        }
+    }, []);
+
+    if (disableSpeakerStatsSearch) {
+        return null;
+    }
+
+    const inputId = 'speaker-stats-search';
+    const inputDescriptionId = `${inputId}-hidden-description`;
+
+    return (
+        <div className = { classes.speakerStatsSearchContainer }>
+            <Icon
+                className = { classes.searchIcon }
+                color = { theme.palette.speakerStatsSearchIcon }
+                src = { IconSearch } />
+            <input
+                aria-describedby = { inputDescriptionId }
+                aria-label = { t('speakerStats.searchHint') }
+                autoComplete = 'off'
+                autoFocus = { false }
+                className = { classes.speakerStatsSearch }
+                id = { inputId }
+                name = 'speakerStatsSearch'
+                onChange = { onChange }
+                onKeyPress = { preventDismiss }
+                placeholder = { t('speakerStats.search') }
+                tabIndex = { 0 }
+                value = { searchValue } />
+            <HiddenDescription id = { inputDescriptionId }>
+                {t('speakerStats.searchDescription')}
+            </HiddenDescription>
+        </div>
+    );
+}
+
+export default SpeakerStatsSearch;