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

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;