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/base/premeeting/components/web/ActionButton.tsx
+++ b/react/features/base/premeeting/components/web/ActionButton.tsx
@@ -0,0 +1,242 @@
+import React, { ReactNode, useCallback } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../../icons/components/Icon';
+import { IconArrowDown } from '../../../icons/svg';
+
+interface IProps {
+
+    /**
+     * Icon to display in the options section.
+     */
+    OptionsIcon?: Function;
+
+    /**
+     * The Label of the child element.
+     */
+    ariaDropDownLabel?: string;
+
+    /**
+     * The Label of the current element.
+     */
+    ariaLabel?: string;
+
+    /**
+     * To give a aria-pressed to the icon.
+     */
+    ariaPressed?: boolean;
+
+    /**
+     * Text of the button.
+     */
+    children: ReactNode;
+
+    /**
+     * Text css class of the button.
+     */
+    className?: string;
+
+    /**
+     * If the button is disabled or not.
+     */
+    disabled?: boolean;
+
+    /**
+     * If the button has options.
+     */
+    hasOptions?: boolean;
+
+
+    /**
+     * OnClick button handler.
+     */
+    onClick?: (e?: React.MouseEvent) => void;
+
+    /**
+     * Click handler for options.
+     */
+    onOptionsClick?: (e?: React.KeyboardEvent | React.MouseEvent) => void;
+
+    /**
+     * To give a role to the icon.
+     */
+    role?: string;
+
+    /**
+     * To navigate with the keyboard.
+     */
+    tabIndex?: number;
+
+    /**
+     * TestId of the button. Can be used to locate element when testing UI.
+     */
+    testId?: string;
+
+    /**
+     * The type of th button: primary, secondary, text.
+     */
+    type: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        actionButton: {
+            ...theme.typography.bodyLongBold,
+            borderRadius: theme.shape.borderRadius,
+            boxSizing: 'border-box',
+            color: theme.palette.actionButtonText,
+            cursor: 'pointer',
+            display: 'inline-block',
+            marginBottom: '16px',
+            padding: '7px 16px',
+            position: 'relative' as const,
+            textAlign: 'center',
+            width: '100%',
+            border: 0,
+
+            '&.primary': {
+                background: theme.palette.prejoinActionButtonPrimary,
+                color: theme.palette.prejoinActionButtonPrimaryText,
+
+                '&:hover': {
+                    backgroundColor: theme.palette.prejoinActionButtonPrimaryHover
+                }
+            },
+
+            '&.secondary': {
+                background: theme.palette.prejoinActionButtonSecondary,
+                color: theme.palette.prejoinActionButtonSecondaryText,
+
+                '&:hover': {
+                    backgroundColor: theme.palette.prejoinActionButtonSecondaryHover
+                }
+            },
+
+            '&.text': {
+                width: 'auto',
+                fontSize: '0.875rem',
+                margin: '0',
+                padding: '0'
+            },
+
+            '&.disabled': {
+                background: theme.palette.prejoinActionButtonDisabled,
+                border: '1px solid #5E6D7A',
+                color: '#AFB6BC',
+                cursor: 'initial',
+
+                '.icon': {
+                    '& > svg': {
+                        fill: '#AFB6BC'
+                    }
+                }
+            },
+
+
+            [theme.breakpoints.down(400)]: {
+                fontSize: '1rem',
+                marginBottom: 8,
+                padding: '11px 16px'
+            }
+        },
+        options: {
+            borderRadius: Number(theme.shape.borderRadius) / 2,
+            alignItems: 'center',
+            display: 'flex',
+            height: '100%',
+            justifyContent: 'center',
+            position: 'absolute' as const,
+            right: 0,
+            top: 0,
+            width: 36,
+
+            '&:hover': {
+                backgroundColor: '#0262B6'
+            },
+
+            '& svg': {
+                pointerEvents: 'none'
+            }
+        }
+    };
+});
+
+/**
+ * Button used for pre meeting actions.
+ *
+ * @returns {ReactElement}
+ */
+function ActionButton({
+    children,
+    className = '',
+    disabled,
+    hasOptions,
+    OptionsIcon = IconArrowDown,
+    testId,
+    type = 'primary',
+    onClick,
+    onOptionsClick,
+    tabIndex,
+    role,
+    ariaPressed,
+    ariaLabel,
+    ariaDropDownLabel
+}: IProps) {
+    const { classes, cx } = useStyles();
+
+    const onKeyPressHandler = useCallback(e => {
+        if (onClick && !disabled && (e.key === ' ' || e.key === 'Enter')) {
+            e.preventDefault();
+            onClick(e);
+        }
+    }, [ onClick, disabled ]);
+
+    const onOptionsKeyPressHandler = useCallback(e => {
+        if (onOptionsClick && !disabled && (e.key === ' ' || e.key === 'Enter')) {
+            e.preventDefault();
+            e.stopPropagation();
+            onOptionsClick(e);
+        }
+    }, [ onOptionsClick, disabled ]);
+
+    const containerClasses = cx(
+        classes.actionButton,
+        className && className,
+        type,
+        disabled && 'disabled'
+    );
+
+    return (
+        <div
+            aria-disabled = { disabled }
+            aria-label = { ariaLabel }
+            className = { containerClasses }
+            data-testid = { testId ? testId : undefined }
+            onClick = { disabled ? undefined : onClick }
+            onKeyPress = { onKeyPressHandler }
+            role = 'button'
+            tabIndex = { 0 } >
+            {children}
+            { hasOptions
+                && <div
+                    aria-disabled = { disabled }
+                    aria-haspopup = 'true'
+                    aria-label = { ariaDropDownLabel }
+                    aria-pressed = { ariaPressed }
+                    className = { classes.options }
+                    data-testid = 'prejoin.joinOptions'
+                    onClick = { disabled ? undefined : onOptionsClick }
+                    onKeyPress = { onOptionsKeyPressHandler }
+                    role = { role }
+                    tabIndex = { tabIndex }>
+                    <Icon
+                        className = 'icon'
+                        size = { 24 }
+                        src = { OptionsIcon } />
+                </div>
+            }
+        </div>
+    );
+}
+
+export default ActionButton;