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

react/features/device-selection/components/DeviceSelector.web.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import Select from '../../base/ui/components/web/Select';
+
+/**
+ * The type of the React {@code Component} props of {@link DeviceSelector}.
+ */
+interface IProps {
+
+    /**
+     * MediaDeviceInfos used for display in the select element.
+     */
+    devices: Array<MediaDeviceInfo> | undefined;
+
+    /**
+     * If false, will return a selector with no selection options.
+     */
+    hasPermission: boolean;
+
+    /**
+     * CSS class for the icon to the left of the dropdown trigger.
+     */
+    icon: string;
+
+    /**
+     * The id of the dropdown element.
+     */
+    id: string;
+
+    /**
+     * If true, will render the selector disabled with a default selection.
+     */
+    isDisabled: boolean;
+
+    /**
+     * The translation key to display as a menu label.
+     */
+    label: string;
+
+    /**
+     * The callback to invoke when a selection is made.
+     */
+    onSelect: Function;
+
+    /**
+     * The default device to display as selected.
+     */
+    selectedDeviceId: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        textSelector: {
+            width: '100%',
+            boxSizing: 'border-box',
+            borderRadius: theme.shape.borderRadius,
+            backgroundColor: theme.palette.deviceSelectorTextBackground,
+            padding: '10px 16px',
+            textAlign: 'center',
+            ...theme.typography.bodyShortRegular,
+            border: `1px solid ${theme.palette.deviceSelectorBorder}`
+        }
+    };
+});
+
+const DeviceSelector = ({
+    devices,
+    hasPermission,
+    id,
+    isDisabled,
+    label,
+    onSelect,
+    selectedDeviceId
+}: IProps) => {
+    const { classes } = useStyles();
+    const { t } = useTranslation();
+
+    const _onSelect = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+        const deviceId = e.target.value;
+
+        if (selectedDeviceId !== deviceId) {
+            onSelect(deviceId);
+        }
+    }, [ selectedDeviceId, onSelect ]);
+
+    const _createDropdown = (options: {
+        defaultSelected?: MediaDeviceInfo; isDisabled: boolean;
+        items?: Array<{ label: string; value: string; }>; placeholder: string;
+    }) => {
+        const triggerText
+            = (options.defaultSelected && (options.defaultSelected.label || options.defaultSelected.deviceId))
+            || options.placeholder;
+
+        if (options.isDisabled || !options.items?.length) {
+            return (
+                <div className = { classes.textSelector }>
+                    {triggerText}
+                </div>
+            );
+        }
+
+        return (
+            <Select
+                id = { id }
+                label = { t(label) }
+                onChange = { _onSelect }
+                options = { options.items }
+                value = { selectedDeviceId } />
+        );
+    };
+
+    const _renderNoDevices = () => _createDropdown({
+        isDisabled: true,
+        placeholder: t('settings.noDevice')
+    });
+
+    const _renderNoPermission = () => _createDropdown({
+        isDisabled: true,
+        placeholder: t('deviceSelection.noPermission')
+    });
+
+    if (hasPermission === undefined) {
+        return null;
+    }
+
+    if (!hasPermission) {
+        return _renderNoPermission();
+    }
+
+    if (!devices?.length) {
+        return _renderNoDevices();
+    }
+
+    const items = devices.map(device => {
+        return {
+            value: device.deviceId,
+            label: device.label || device.deviceId
+        };
+    });
+    const defaultSelected = devices.find(item =>
+        item.deviceId === selectedDeviceId
+    );
+
+    return _createDropdown({
+        defaultSelected,
+        isDisabled,
+        items,
+        placeholder: t('deviceSelection.selectADevice')
+    });
+};
+
+export default DeviceSelector;