Calling participants list

ts/components/CallingParticipantsList.tsx

@@ -0,0 +1,104 @@
+/* eslint-disable react/no-array-index-key */
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Avatar } from './Avatar';
+import { ColorType } from '../types/Colors';
+import { ContactName } from './conversation/ContactName';
+import { LocalizerType } from '../types/Util';
+
+type ParticipantType = {
+  audioMuted?: boolean;
+  avatarPath?: string;
+  color?: ColorType;
+  profileName?: string;
+  title: string;
+  videoMuted?: boolean;
+};
+
+export type PropsType = {
+  readonly i18n: LocalizerType;
+  readonly onClose: () => void;
+  readonly participants: Array<ParticipantType>;
+};
+
+export const CallingParticipantsList = React.memo(
+  ({ i18n, onClose, participants }: PropsType) => {
+    const [root, setRoot] = React.useState<HTMLElement | null>(null);
+
+    React.useEffect(() => {
+      const div = document.createElement('div');
+      document.body.appendChild(div);
+      setRoot(div);
+
+      return () => {
+        document.body.removeChild(div);
+        setRoot(null);
+      };
+    }, []);
+
+    if (!root) {
+      return null;
+    }
+
+    return createPortal(
+      <div
+        role="presentation"
+        className="module-calling-participants-list__overlay"
+      >
+        <div className="module-calling-participants-list">
+          <div className="module-calling-participants-list__header">
+            <div className="module-calling-participants-list__title">
+              {participants.length > 1
+                ? i18n('calling__in-this-call--many', [
+                    String(participants.length),
+                  ])
+                : i18n('calling__in-this-call--one')}
+            </div>
+            <button
+              type="button"
+              className="module-calling-participants-list__close"
+              onClick={onClose}
+              tabIndex={0}
+              aria-label={i18n('close')}
+            />
+          </div>
+          <ul className="module-calling-participants-list__list">
+            {participants.map((participant: ParticipantType, index: number) => (
+              <li
+                className="module-calling-participants-list__contact"
+                key={index}
+              >
+                <div>
+                  <Avatar
+                    avatarPath={participant.avatarPath}
+                    color={participant.color}
+                    conversationType="direct"
+                    i18n={i18n}
+                    profileName={participant.profileName}
+                    title={participant.title}
+                    size={32}
+                  />
+                  <ContactName
+                    i18n={i18n}
+                    module="module-calling-participants-list__name"
+                    title={participant.title}
+                  />
+                </div>
+                <div>
+                  {participant.audioMuted ? (
+                    <span className="module-calling-participants-list__muted--audio" />
+                  ) : null}
+                  {participant.videoMuted ? (
+                    <span className="module-calling-participants-list__muted--video" />
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>,
+      root
+    );
+  }
+);