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/device-selection/components/DeviceHidContainer.web.tsx
+++ b/react/features/device-selection/components/DeviceHidContainer.web.tsx
@@ -0,0 +1,107 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../base/icons/components/Icon';
+import { IconTrash } from '../../base/icons/svg';
+import Button from '../../base/ui/components/web/Button';
+import { BUTTON_TYPES } from '../../base/ui/constants.any';
+import { closeHidDevice, requestHidDevice } from '../../web-hid/actions';
+import { getDeviceInfo, shouldRequestHIDDevice } from '../../web-hid/functions';
+
+const useStyles = makeStyles()(theme => {
+    return {
+        callControlContainer: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'flex-start'
+        },
+
+        label: {
+            ...theme.typography.bodyShortRegular,
+            color: theme.palette.deviceSelectorText,
+            marginBottom: theme.spacing(2)
+        },
+
+        deviceRow: {
+            display: 'flex',
+            justifyContent: 'space-between'
+        },
+
+        deleteDevice: {
+            cursor: 'pointer',
+            textAlign: 'center'
+        },
+
+        headerConnectedDevice: {
+            fontWeight: 600
+        },
+
+        hidContainer: {
+            '> span': {
+                marginLeft: '16px'
+            }
+        }
+    };
+});
+
+/**
+ * Device hid container.
+ *
+ * @param {IProps} props - The props of the component.
+ * @returns {ReactElement}
+ */
+function DeviceHidContainer() {
+    const { t } = useTranslation();
+    const deviceInfo = useSelector(getDeviceInfo);
+    const showRequestDeviceInfo = shouldRequestHIDDevice(deviceInfo);
+    const { classes } = useStyles();
+    const dispatch = useDispatch();
+
+    const onRequestControl = useCallback(() => {
+        dispatch(requestHidDevice());
+    }, [ dispatch ]);
+
+    const onDeleteHid = useCallback(() => {
+        dispatch(closeHidDevice());
+    }, [ dispatch ]);
+
+    return (
+        <div
+            className = { classes.callControlContainer }
+            key = 'callControl'>
+            <label
+                className = { classes.label }
+                htmlFor = 'callControl'>
+                {t('deviceSelection.hid.callControl')}
+            </label>
+            {showRequestDeviceInfo && (
+                <Button
+                    accessibilityLabel = { t('deviceSelection.hid.pairDevice') }
+                    id = 'request-control-btn'
+                    key = 'request-control-btn'
+                    label = { t('deviceSelection.hid.pairDevice') }
+                    onClick = { onRequestControl }
+                    type = { BUTTON_TYPES.SECONDARY } />
+            )}
+            {!showRequestDeviceInfo && (
+                <div className = { classes.hidContainer }>
+                    <p className = { classes.headerConnectedDevice }>{t('deviceSelection.hid.connectedDevices')}</p>
+                    <div className = { classes.deviceRow }>
+                        <span>{deviceInfo.device?.productName}</span>
+                        <Icon
+                            ariaLabel = { t('deviceSelection.hid.deleteDevice') }
+                            className = { classes.deleteDevice }
+                            onClick = { onDeleteHid }
+                            role = 'button'
+                            src = { IconTrash }
+                            tabIndex = { 0 } />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}
+
+export default DeviceHidContainer;