[MM-53118] Dynamically sized participants grid

standalone/src/recording/components/recording_view/index.tsx

@@ -4,7 +4,7 @@
 import {GlobalState} from '@mattermost/types/store';
 import {UserProfile} from '@mattermost/types/users';
 import Avatar from 'plugin/components/avatar/avatar';
-import CallParticipant from 'plugin/components/expanded_view/call_participant';
+import ParticipantsGrid from 'plugin/components/expanded_view/participants_grid';
 import {logErr} from 'plugin/log';
 import {alphaSortSessions, getUserDisplayName, stateSortSessions, untranslatable} from 'plugin/utils';
 import React, {useCallback, useEffect, useState} from 'react';
@@ -21,8 +21,6 @@ import {
     sessionsInCurrentCall,
 } from 'src/selectors';
 
-const MaxParticipantsPerRow = 10;
-
 const RecordingView = () => {
     const {formatMessage} = useIntl();
     const [screenPlayerNode, setScreenPlayerNode] = useState<HTMLVideoElement | null>(null);
@@ -134,37 +132,6 @@ const RecordingView = () => {
         );
     };
 
-    const renderParticipants = () => {
-        return sessions.map((session) => {
-            const isMuted = !session.unmuted;
-            const isSpeaking = Boolean(session.voice);
-            const isHandRaised = Boolean(session.raised_hand > 0);
-
-            const profile = profiles[session.user_id];
-            if (!profile) {
-                return null;
-            }
-
-            return (
-                <CallParticipant
-                    key={session.session_id}
-                    name={getUserDisplayName(profile)}
-                    pictureURL={profileImages[profile.id]}
-                    isMuted={isMuted}
-                    isSpeaking={isSpeaking}
-                    isHandRaised={isHandRaised}
-                    reaction={session?.reaction}
-                    isHost={profile.id === hostID}
-                    iAmHost={false}
-                    isYou={false}
-                    userID={session.user_id}
-                    sessionID={session.session_id}
-                    onRemove={() => null}
-                />
-            );
-        });
-    };
-
     const renderSpeaking = () => {
         let speakingProfile;
         for (let i = 0; i < sessions.length; i++) {
@@ -210,17 +177,13 @@ const RecordingView = () => {
             style={style.root}
         >
             {!hasScreenShare &&
-                <div style={style.main}>
-                    <ul
-                        id='calls-recording-view-participants-grid'
-                        style={{
-                            ...style.participants,
-                            gridTemplateColumns: `repeat(${Math.min(sessions.length, MaxParticipantsPerRow)}, 1fr)`,
-                        }}
-                    >
-                        {renderParticipants()}
-                    </ul>
-                </div>
+            <ParticipantsGrid
+                callID={callsClient.channelID}
+                callHostID={hostID}
+                profiles={profiles}
+                sessions={sessions}
+                profileImages={profileImages}
+            />
             }
             {hasScreenShare && renderScreenSharingPlayer()}
 
@@ -255,17 +218,6 @@ const style = {
         background: '#1E1E1E',
         color: 'white',
     },
-    main: {
-        display: 'flex',
-        flex: '1',
-        overflow: 'auto',
-    },
-    participants: {
-        display: 'grid',
-        overflow: 'auto',
-        margin: 'auto',
-        padding: '0',
-    },
     screenContainer: {
         position: 'relative',
         display: 'flex',

webapp/src/components/call_widget/component.tsx

@@ -2319,6 +2319,8 @@ const LeaveCallButton = styled(DotMenuButton)<{ $isActive: boolean }>`
     background: var(--dnd-indicator);
     padding: 5px;
     app-region: no-drag;
+    width: 28px;
+    height: 28px;
 
     &:hover {
         background: linear-gradient(0deg, var(--error-text), var(--error-text)), linear-gradient(0deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08));

webapp/src/components/dot_menu/dot_menu.tsx

@@ -12,11 +12,9 @@ import Dropdown from './dropdown';
 
 export const DotMenuButton = styled.div<{ $isActive: boolean }>`
     display: inline-flex;
-    padding: 0;
     border: none;
     border-radius: 4px;
-    width: 28px;
-    height: 28px;
+    padding: 4px;
     align-items: center;
     justify-content: center;
     fill: rgba(var(--center-channel-color-rgb), 0.56);