init

react/features/display-name/actions.ts

@@ -0,0 +1,21 @@
+import { openDialog } from '../base/dialog/actions';
+
+import { DisplayNamePrompt } from './components';
+
+/**
+ * Signals to open a dialog with the {@code DisplayNamePrompt} component.
+ *
+ * @param {Object} params - Map containing the callbacks to be executed in the prompt:
+ * - onPostSubmit - The function to invoke after a successful submit of the dialog.
+ * - validateInput - The function to invoke after a change in the display name value.
+ * @returns {Object}
+ */
+export function openDisplayNamePrompt({ onPostSubmit, validateInput }: {
+    onPostSubmit?: Function;
+    validateInput?: Function;
+}) {
+    return openDialog(DisplayNamePrompt, {
+        onPostSubmit,
+        validateInput
+    });
+}

react/features/display-name/components/index.native.ts

@@ -0,0 +1 @@
+export { default as DisplayNamePrompt } from './native/DisplayNamePrompt';

react/features/display-name/components/index.web.ts

@@ -0,0 +1 @@
+export { default as DisplayNamePrompt } from './web/DisplayNamePrompt';

react/features/display-name/components/native/DisplayNameLabel.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { Text, TextStyle, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import {
+    getParticipantById,
+    getParticipantDisplayName,
+    isScreenShareParticipant
+} from '../../../base/participants/functions';
+
+import styles from './styles';
+
+interface IProps {
+
+    /**
+     * The name of the participant to render.
+     */
+    _participantName: string;
+
+    /**
+     * True of the label needs to be rendered. False otherwise.
+     */
+    _render: boolean;
+
+    /**
+     * Whether or not the name is in a container.
+     */
+    contained?: boolean;
+
+    /**
+     * The ID of the participant to render the label for.
+     */
+    participantId: string;
+}
+
+/**
+ * Renders a label with the display name of the on-stage participant.
+ */
+class DisplayNameLabel extends React.Component<IProps> {
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        if (!this.props._render) {
+            return null;
+        }
+
+        return (
+            <View
+                style = { (this.props.contained ? styles.displayNamePadding : styles.displayNameBackdrop
+                ) as ViewStyle }>
+                <Text
+                    numberOfLines = { 1 }
+                    style = { styles.displayNameText as TextStyle }>
+                    { this.props._participantName }
+                </Text>
+            </View>
+        );
+    }
+}
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {any} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the component.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
+    const participant = getParticipantById(state, ownProps.participantId ?? '');
+
+    return {
+        _participantName: getParticipantDisplayName(state, ownProps.participantId ?? ''),
+        _render: Boolean(participant && (!participant?.local || ownProps.contained)
+            && (!participant?.fakeParticipant || isScreenShareParticipant(participant)))
+    };
+}
+
+export default connect(_mapStateToProps)(DisplayNameLabel);

react/features/display-name/components/native/DisplayNamePrompt.tsx

@@ -0,0 +1,44 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import InputDialog from '../../../base/dialog/components/native/InputDialog';
+import { onSetDisplayName } from '../../functions';
+import { IProps } from '../../types';
+
+/**
+ * Implements a component to render a display name prompt.
+ */
+class DisplayNamePrompt extends Component<IProps> {
+    _onSetDisplayName: (displayName: string) => boolean;
+
+    /**
+     * Initializes a new {@code DisplayNamePrompt} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once for every instance.
+        this._onSetDisplayName = onSetDisplayName(props.dispatch, props.onPostSubmit);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <InputDialog
+                descriptionKey = 'dialog.enterDisplayName'
+                disableCancel = { true }
+                onSubmit = { this._onSetDisplayName }
+                titleKey = 'dialog.displayNameRequired'
+                validateInput = { this.props.validateInput } />
+        );
+    }
+}
+
+export default connect()(DisplayNamePrompt);

react/features/display-name/components/native/styles.ts

@@ -0,0 +1,20 @@
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+export default {
+    displayNameBackdrop: {
+        alignSelf: 'center',
+        backgroundColor: BaseTheme.palette.ui01,
+        borderRadius: BaseTheme.shape.borderRadius,
+        padding: 6
+    },
+
+    displayNamePadding: {
+        paddingRight: 6
+    },
+
+    displayNameText: {
+        color: BaseTheme.palette.text01,
+        fontSize: 14,
+        fontWeight: 'bold'
+    }
+};

react/features/display-name/components/web/DisplayName.tsx

@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import {
+    getParticipantById,
+    getParticipantDisplayName
+} from '../../../base/participants/functions';
+import { updateSettings } from '../../../base/settings/actions';
+import Tooltip from '../../../base/tooltip/components/Tooltip';
+import { getIndicatorsTooltipPosition } from '../../../filmstrip/functions.web';
+import { appendSuffix } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of {@link DisplayName}.
+ */
+interface IProps {
+
+    /**
+     * Whether or not the display name should be editable on click.
+     */
+    allowEditing: boolean;
+
+    /**
+     * A string to append to the displayName, if provided.
+     */
+    displayNameSuffix: string;
+
+    /**
+     * The ID attribute to add to the component. Useful for global querying for
+     * the component by legacy components and torture tests.
+     */
+    elementID: string;
+
+    /**
+     * The ID of the participant whose name is being displayed.
+     */
+    participantID: string;
+
+    /**
+     * The type of thumbnail.
+     */
+    thumbnailType?: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        displayName: {
+            ...theme.typography.labelBold,
+            color: theme.palette.text01,
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+
+        editDisplayName: {
+            outline: 'none',
+            border: 'none',
+            background: 'none',
+            boxShadow: 'none',
+            padding: 0,
+            ...theme.typography.labelBold,
+            color: theme.palette.text01
+        }
+    };
+});
+
+const DisplayName = ({
+    allowEditing,
+    displayNameSuffix,
+    elementID,
+    participantID,
+    thumbnailType
+}: IProps) => {
+    const { classes } = useStyles();
+    const configuredDisplayName = useSelector((state: IReduxState) =>
+        getParticipantById(state, participantID))?.name ?? '';
+    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, participantID));
+    const [ editDisplayNameValue, setEditDisplayNameValue ] = useState('');
+    const [ isEditing, setIsEditing ] = useState(false);
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const nameInputRef = useRef<HTMLInputElement | null>(null);
+
+    useEffect(() => {
+        if (isEditing && nameInputRef.current) {
+            nameInputRef.current.select();
+        }
+    }, [ isEditing ]);
+
+    const onClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+    }, []);
+
+    const onChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+        setEditDisplayNameValue(event.target.value);
+    }, []);
+
+    const onSubmit = useCallback(() => {
+        dispatch(updateSettings({
+            displayName: editDisplayNameValue
+        }));
+
+        setEditDisplayNameValue('');
+        setIsEditing(false);
+        nameInputRef.current = null;
+    }, [ editDisplayNameValue, nameInputRef ]);
+
+    const onKeyDown = useCallback((event: React.KeyboardEvent) => {
+        if (event.key === 'Enter') {
+            onSubmit();
+        }
+    }, [ onSubmit ]);
+
+    const onStartEditing = useCallback((e: React.MouseEvent) => {
+        if (allowEditing) {
+            e.stopPropagation();
+            setIsEditing(true);
+            setEditDisplayNameValue(configuredDisplayName);
+        }
+    }, [ allowEditing ]);
+
+    if (allowEditing && isEditing) {
+        return (
+            <input
+                autoFocus = { true }
+                className = { classes.editDisplayName }
+                id = 'editDisplayName'
+                onBlur = { onSubmit }
+                onChange = { onChange }
+                onClick = { onClick }
+                onKeyDown = { onKeyDown }
+                placeholder = { t('defaultNickname') }
+                ref = { nameInputRef }
+                spellCheck = { 'false' }
+                type = 'text'
+                value = { editDisplayNameValue } />
+        );
+    }
+
+    return (
+        <Tooltip
+            content = { appendSuffix(nameToDisplay, displayNameSuffix) }
+            position = { getIndicatorsTooltipPosition(thumbnailType) }>
+            <span
+                className = { `displayname ${classes.displayName}` }
+                id = { elementID }
+                onClick = { onStartEditing }>
+                {appendSuffix(nameToDisplay, displayNameSuffix)}
+            </span>
+        </Tooltip>
+    );
+};
+
+
+export default DisplayName;

react/features/display-name/components/web/DisplayNameBadge.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import { remToPixels } from '../../../base/ui/functions.any';
+
+import { DISPLAY_NAME_VERTICAL_PADDING } from './styles';
+
+const useStyles = makeStyles()(theme => {
+    const { text01 } = theme.palette;
+
+    return {
+        badge: {
+            background: 'rgba(0, 0, 0, 0.6)',
+            borderRadius: '3px',
+            color: text01,
+            maxWidth: '50%',
+            overflow: 'hidden',
+            padding: `${remToPixels(`${DISPLAY_NAME_VERTICAL_PADDING}rem`) / 2}px 16px`,
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }
+    };
+});
+
+/**
+ * Component that displays a name badge.
+ *
+ * @param {Props} props - The props of the component.
+ * @returns {ReactElement}
+ */
+const DisplayNameBadge: React.FC<{ name: string; }> = ({ name }) => {
+    const { classes } = useStyles();
+
+    return (
+        <div className = { classes.badge }>
+            { name }
+        </div>
+    );
+};
+
+export default DisplayNameBadge;

react/features/display-name/components/web/DisplayNamePrompt.tsx

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../base/i18n/functions';
+import Dialog from '../../../base/ui/components/web/Dialog';
+import Input from '../../../base/ui/components/web/Input';
+import { onSetDisplayName } from '../../functions';
+import { IProps } from '../../types';
+
+const INITIAL_DISPLAY_NAME = '';
+
+/**
+ * The type of the React {@code Component} props of {@link DisplayNamePrompt}.
+ */
+interface IState {
+
+    /**
+     * The name to show in the display name text field.
+     */
+    displayName: string;
+
+    /**
+     * The result of the input validation.
+     */
+    isValid: boolean;
+}
+
+/**
+ * Implements a React {@code Component} for displaying a dialog with an field
+ * for setting the local participant's display name.
+ *
+ * @augments Component
+ */
+class DisplayNamePrompt extends Component<IProps, IState> {
+    _onSetDisplayName: (displayName: string) => boolean;
+
+    /**
+     * Initializes a new {@code DisplayNamePrompt} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            displayName: INITIAL_DISPLAY_NAME,
+            isValid: this.props.validateInput ? this.props.validateInput(INITIAL_DISPLAY_NAME) : true
+        };
+
+        // Bind event handlers so they are only bound once for every instance.
+        this._onDisplayNameChange = this._onDisplayNameChange.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+        this._onSetDisplayName = onSetDisplayName(props.dispatch, props.onPostSubmit);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const disableCloseDialog = Boolean(this.props.validateInput);
+
+        return (
+            <Dialog
+                cancel = {{ hidden: true }}
+                disableBackdropClose = { disableCloseDialog }
+                disableEnter = { !this.state.isValid }
+                disableEscape = { disableCloseDialog }
+                hideCloseButton = { disableCloseDialog }
+                ok = {{
+                    disabled: !this.state.isValid,
+                    translationKey: 'dialog.Ok'
+                }}
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.displayNameRequired'>
+                <Input
+                    autoFocus = { true }
+                    className = 'dialog-bottom-margin'
+                    id = 'dialog-displayName'
+                    label = { this.props.t('dialog.enterDisplayName') }
+                    name = 'displayName'
+                    onChange = { this._onDisplayNameChange }
+                    type = 'text'
+                    value = { this.state.displayName } />
+            </Dialog>
+        );
+    }
+
+    /**
+     * Updates the entered display name.
+     *
+     * @param {string} value - The new value of the input.
+     * @private
+     * @returns {void}
+     */
+    _onDisplayNameChange(value: string) {
+        if (this.props.validateInput) {
+            this.setState({
+                isValid: this.props.validateInput(value),
+                displayName: value
+            });
+
+            return;
+        }
+        this.setState({
+            displayName: value
+        });
+    }
+
+    /**
+     * Dispatches an action to update the local participant's display name. A
+     * name must be entered for the action to dispatch.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _onSubmit() {
+        return this._onSetDisplayName(this.state.displayName);
+    }
+}
+
+export default translate(connect()(DisplayNamePrompt));

react/features/display-name/components/web/StageParticipantNameLabel.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { makeStyles } from 'tss-react/mui';
+
+import { IReduxState } from '../../../app/types';
+import { getParticipantDisplayName, isScreenShareParticipant } from '../../../base/participants/functions';
+import { getVideospaceFloatingElementsBottomSpacing } from '../../../base/ui/functions.web';
+import { getLargeVideoParticipant } from '../../../large-video/functions';
+import {
+    getTransitionParamsForElementsAboveToolbox,
+    isToolboxVisible,
+    toCSSTransitionValue
+} from '../../../toolbox/functions.web';
+import { isLayoutTileView } from '../../../video-layout/functions.any';
+import { shouldDisplayStageParticipantBadge } from '../../functions';
+
+import DisplayNameBadge from './DisplayNameBadge';
+import {
+    getStageParticipantFontSizeRange,
+    getStageParticipantNameLabelLineHeight,
+    getStageParticipantTypography,
+    scaleFontProperty
+} from './styles';
+
+interface IOptions {
+    clientHeight?: number;
+}
+
+const useStyles = makeStyles<IOptions, 'screenSharing'>()((theme, options: IOptions = {}, classes) => {
+    const typography = {
+        ...getStageParticipantTypography(theme)
+    };
+    const { clientHeight } = options;
+
+    if (typeof clientHeight === 'number' && clientHeight > 0) {
+        // We want to show the fontSize and lineHeight configured in theme on a screen with height 1080px. In this case
+        // the clientHeight will be 960px if there are some titlebars, toolbars, addressbars, etc visible.For any other
+        // screen size we will decrease/increase the font size based on the screen size.
+
+        typography.fontSize = `${scaleFontProperty(clientHeight, getStageParticipantFontSizeRange(theme))}rem`;
+        typography.lineHeight = `${getStageParticipantNameLabelLineHeight(theme, clientHeight)}rem`;
+    }
+
+    const toolbarVisibleTransitionProps = getTransitionParamsForElementsAboveToolbox(true);
+    const toolbarHiddenTransitionProps = getTransitionParamsForElementsAboveToolbox(false);
+    const showTransitionDuration = toolbarVisibleTransitionProps.delay + toolbarVisibleTransitionProps.duration;
+    const hideTransitionDuration = toolbarHiddenTransitionProps.delay + toolbarHiddenTransitionProps.duration;
+    const showTransition = `opacity ${showTransitionDuration}s ${toolbarVisibleTransitionProps.easingFunction}`;
+    const hideTransition = `opacity ${hideTransitionDuration}s ${toolbarHiddenTransitionProps.easingFunction}`;
+    const moveUpTransition = `margin-bottom ${toCSSTransitionValue(toolbarVisibleTransitionProps)}`;
+    const moveDownTransition = `margin-bottom ${toCSSTransitionValue(toolbarHiddenTransitionProps)}`;
+
+    return {
+        badgeContainer: {
+            ...typography,
+            alignItems: 'center',
+            display: 'inline-flex',
+            justifyContent: 'center',
+            marginBottom: getVideospaceFloatingElementsBottomSpacing(theme, false),
+            transition: moveDownTransition,
+            pointerEvents: 'none',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            width: '100%',
+            zIndex: 1
+        },
+        containerElevated: {
+            marginBottom: getVideospaceFloatingElementsBottomSpacing(theme, true),
+            transition: moveUpTransition,
+            [`&.${classes.screenSharing}`]: {
+                opacity: 1,
+                transition: `${showTransition}, ${moveUpTransition}`
+            }
+        },
+        screenSharing: {
+            opacity: 0,
+            transition: `${hideTransition}, ${moveDownTransition}`
+        }
+    };
+});
+
+/**
+ * Component that renders the dominant speaker's name as a badge above the toolbar in stage view.
+ *
+ * @returns {ReactElement|null}
+ */
+const StageParticipantNameLabel = () => {
+    const clientHeight = useSelector((state: IReduxState) => state['features/base/responsive-ui'].clientHeight);
+    const { classes, cx } = useStyles({ clientHeight });
+    const largeVideoParticipant = useSelector(getLargeVideoParticipant);
+    const selectedId = largeVideoParticipant?.id;
+    const nameToDisplay = useSelector((state: IReduxState) => getParticipantDisplayName(state, selectedId ?? ''));
+    const toolboxVisible: boolean = useSelector(isToolboxVisible);
+    const visible = useSelector(shouldDisplayStageParticipantBadge);
+    const isTileView = useSelector(isLayoutTileView);
+    const _isScreenShareParticipant = isScreenShareParticipant(largeVideoParticipant);
+
+    if (visible || (_isScreenShareParticipant && !isTileView)) {
+        // For stage participant visibility is true only when the toolbar is visible but we need to keep the element
+        // in the DOM in order to make it disappear with an animation.
+        return (
+            <div
+                className = { cx(
+                    classes.badgeContainer,
+                    toolboxVisible && classes.containerElevated,
+                    _isScreenShareParticipant && classes.screenSharing
+                ) }
+                data-testid = 'stage-display-name' >
+                <DisplayNameBadge name = { nameToDisplay } />
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export default StageParticipantNameLabel;

react/features/display-name/components/web/styles.ts

@@ -0,0 +1,123 @@
+import { Theme } from '@mui/material';
+
+/**
+ * The vertical padding for the display name.
+ */
+export const DISPLAY_NAME_VERTICAL_PADDING = 0.25;
+
+/**
+ * Returns the typography for stage participant display name badge.
+ *
+ * @param {Theme} theme - The current theme.
+ * @returns {ITypographyType}
+ */
+export function getStageParticipantTypography(theme: Theme) {
+    return theme.typography.bodyShortRegularLarge;
+}
+
+/**
+ * Returns the range of possible values for the font size for the stage participant display name badge.
+ *
+ * @param {Theme} theme - The current theme.
+ * @returns {ILimits}
+ */
+export function getStageParticipantFontSizeRange(theme: Theme) {
+    return {
+        max: theme.typography.bodyShortRegularLarge.fontSize,
+        min: theme.typography.bodyShortRegularSmall.fontSize
+    };
+}
+
+/**
+ * Returns the range of possible values for the line height for the stage participant display name badge.
+ *
+ * @param {Theme} theme - The current theme.
+ * @returns {ILimits}
+ */
+export function getStageParticipantLineHeightRange(theme: Theme) {
+    return {
+        max: theme.typography.bodyShortRegularLarge.lineHeight,
+        min: theme.typography.bodyShortRegularSmall.lineHeight
+    };
+}
+
+/**
+ * Returns the height + padding for stage participant display name badge.
+ *
+ * @param {Theme} theme - The current theme.
+ * @param {number} clientHeight - The height of the visible area.
+ * @returns {string}
+ */
+export function getStageParticipantNameLabelHeight(theme: Theme, clientHeight?: number): string {
+    const lineHeight = getStageParticipantNameLabelLineHeight(theme, clientHeight);
+
+    return `${lineHeight + DISPLAY_NAME_VERTICAL_PADDING}rem`;
+}
+
+/**
+ * Returns the height + padding for stage participant display name badge.
+ *
+ * @param {Theme} theme - The current theme.
+ * @param {number} clientHeight - The height of the visible area.
+ * @returns {number} - Value in rem units.
+ */
+export function getStageParticipantNameLabelLineHeight(theme: Theme, clientHeight?: number): number {
+    return scaleFontProperty(clientHeight, getStageParticipantLineHeightRange(theme));
+}
+
+interface ILimits {
+    max: string;
+    min: string;
+}
+
+interface INumberLimits {
+    max: number;
+    min: number;
+}
+
+/**
+ * The default clint height limits used by scaleFontProperty.
+ */
+const DEFAULT_CLIENT_HEIGHT_LIMITS = {
+    min: 300,
+    max: 960
+};
+
+/**
+ * Scales a css font property depending on the passed screen size.
+ * Note: The result will be in the range of the specified propValueLimits. Also if the current screen height is
+ * more/less than the values in screenLimits parameter the result will be the max/min of the propValuesLimits.
+ *
+ * @param {number|undefined} screenHeight - The current screen height.
+ * @param {ILimits} propValuesLimits - The max and min value for the font property that we are scaling.
+ * @param {INumberLimits} screenHeightLimits - The max and min value for screen height.
+ * @returns {number} - The scaled prop value in rem units.
+ */
+export function scaleFontProperty(
+        screenHeight: number | undefined,
+        propValuesLimits: ILimits,
+        screenHeightLimits: INumberLimits = DEFAULT_CLIENT_HEIGHT_LIMITS): number {
+    const { max: maxPropSize, min: minPropSize } = propValuesLimits;
+    const { max: maxHeight, min: minHeight } = screenHeightLimits;
+    const numericalMinRem = parseFloat(minPropSize);
+    const numericalMaxRem = parseFloat(maxPropSize);
+
+    if (typeof screenHeight !== 'number') {
+        return numericalMaxRem;
+    }
+
+    // Calculate how much the 'rem' value changes per pixel of screen height.
+    // (max 'rem' - min 'rem') / (max screen height in px - min screen height in px)
+    const propSizeRemPerPxHeight = (numericalMaxRem - numericalMinRem) / (maxHeight - minHeight);
+
+    // Clamp the screenHeight to be within the defined minHeight and maxHeight.
+    const clampedScreenHeightPx = Math.max(Math.min(screenHeight, maxHeight), minHeight);
+
+    // Calculate the scaled 'rem' value:
+    // Start with the base min 'rem' value.
+    // Add the scaled portion: (how far the current screen height is from the min height) * (rem change per pixel).
+    // (clampedScreenHeightPx - minHeigh) gives the effective height within the range.
+    const calculatedRemValue = (clampedScreenHeightPx - minHeight) * propSizeRemPerPxHeight + numericalMinRem;
+
+    return parseFloat(calculatedRemValue.toFixed(3));
+}

react/features/display-name/functions.ts

@@ -0,0 +1,78 @@
+import { IReduxState, IStore } from '../app/types';
+import { isDisplayNameVisible } from '../base/config/functions.any';
+import {
+    getLocalParticipant,
+    getParticipantDisplayName,
+    isScreenShareParticipant,
+    isWhiteboardParticipant
+} from '../base/participants/functions';
+import { updateSettings } from '../base/settings/actions';
+import { getLargeVideoParticipant } from '../large-video/functions';
+import { isToolboxVisible } from '../toolbox/functions.web';
+import { isLayoutTileView } from '../video-layout/functions.any';
+
+/**
+ * Appends a suffix to the display name.
+ *
+ * @param {string} displayName - The display name.
+ * @param {string} suffix - Suffix that will be appended.
+ * @returns {string} The formatted display name.
+ */
+export function appendSuffix(displayName: string, suffix = ''): string {
+    return `${displayName || suffix}${
+        displayName && suffix && displayName !== suffix ? ` (${suffix})` : ''}`;
+}
+
+/**
+ * Dispatches an action to update the local participant's display name. A
+ * name must be entered for the action to dispatch.
+ *
+ * It returns a boolean to comply the Dialog behaviour:
+ *     {@code true} - the dialog should be closed.
+ *     {@code false} - the dialog should be left open.
+ *
+ * @param {Function} dispatch - Redux dispatch function.
+ * @param {Function} onPostSubmit - Function to be invoked after a successful display name change.
+ * @param {string} displayName - The display name to save.
+ * @returns {boolean}
+ */
+export function onSetDisplayName(dispatch: IStore['dispatch'], onPostSubmit?: Function) {
+    return function(displayName: string) {
+        if (!displayName?.trim()) {
+            return false;
+        }
+
+        // Store display name in settings
+        dispatch(updateSettings({
+            displayName
+        }));
+
+        onPostSubmit?.();
+
+        return true;
+    };
+}
+
+/**
+ * Returns true if the stage participant badge should be displayed and false otherwise.
+ *
+ * @param {IReduxState} state - The redux state.
+ * @returns {boolean} - True if the stage participant badge should be displayed and false otherwise.
+ */
+export function shouldDisplayStageParticipantBadge(state: IReduxState) {
+    const largeVideoParticipant = getLargeVideoParticipant(state);
+    const selectedId = largeVideoParticipant?.id;
+    const nameToDisplay = getParticipantDisplayName(state, selectedId ?? '');
+    const localId = getLocalParticipant(state)?.id;
+    const isTileView = isLayoutTileView(state);
+    const toolboxVisible: boolean = isToolboxVisible(state);
+    const showDisplayName = isDisplayNameVisible(state);
+
+    return Boolean(showDisplayName
+        && nameToDisplay
+        && selectedId !== localId
+        && !isTileView
+        && !isWhiteboardParticipant(largeVideoParticipant)
+        && (!isScreenShareParticipant(largeVideoParticipant) || toolboxVisible)
+    );
+}

react/features/display-name/middleware.ts

@@ -0,0 +1,25 @@
+import { hideDialog } from '../base/dialog/actions';
+import { isDialogOpen } from '../base/dialog/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import { SETTINGS_UPDATED } from '../base/settings/actionTypes';
+
+import { DisplayNamePrompt } from './components';
+
+/**
+ * Middleware that captures actions related to display name setting.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    switch (action.type) {
+    case SETTINGS_UPDATED: {
+        if (action.settings.displayName
+            && isDialogOpen(getState, DisplayNamePrompt)) {
+            dispatch(hideDialog(DisplayNamePrompt));
+        }
+    }
+    }
+
+    return next(action);
+});

react/features/display-name/types.ts

@@ -0,0 +1,25 @@
+import { WithTranslation } from 'react-i18next';
+
+import { IStore } from '../app/types';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractDisplayNamePrompt}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * Invoked to update the local participant's display name.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Function to be invoked after a successful display name change.
+     */
+    onPostSubmit?: Function;
+
+    /**
+     * Function to be invoked after a display name change.
+     */
+    validateInput?: Function;
+}