fix: prominent layout, emoji reaction

packages/roomkit-react/src/Prebuilt/components/EmojiReaction.jsx

@@ -46,6 +46,7 @@ export const EmojiReaction = () => {
     };
     // TODO: RT find a way to figure out hls-viewer roles
     sendEvent(data, { roleNames: roles });
+    window.showFlyingEmoji?.({ emojiId, senderId: localPeerId });
     /* if (isStreamingOn) {
       try {
         await hmsActions.sendHLSTimedMetadata([

packages/roomkit-react/src/Prebuilt/components/Header/common.jsx

@@ -117,6 +117,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch
           {outputDevices.map(audioDevice => {
             return (
               <SelectWithLabel
+                key={audioDevice.deviceId}
                 label={audioDevice.label}
                 id={audioDevice.deviceId}
                 checked={audioDevice.deviceId === outputSelected}

packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -85,13 +85,13 @@ export const DesktopOptions = ({
         onOpenChange={value => updateState(MODALS.MORE_SETTINGS, value)}
         modal={false}
       >
-        <Dropdown.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
+        <Tooltip title="More options">
+          <Dropdown.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
               <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Dropdown.Trigger>
+            </IconButton>
+          </Dropdown.Trigger>
+        </Tooltip>
 
         <Dropdown.Content
           sideOffset={5}

packages/roomkit-react/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -105,13 +105,13 @@ export const MwebOptions = ({
   return (
     <>
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
-        <Sheet.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
+        <Tooltip title="More options">
+          <Sheet.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
               <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Sheet.Trigger>
+            </IconButton>
+          </Sheet.Trigger>
+        </Tooltip>
         <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
           <Sheet.Title
             css={{

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -29,18 +29,21 @@ export const GridLayout = ({
 }: GridLayoutProps) => {
   const peerSharing = useHMSStore(selectPeerScreenSharing);
   const pinnedTrack = usePinnedTrack();
-  let peers = useHMSStore(selectPeers);
+  const peers = useHMSStore(selectPeers);
   const isRoleProminence =
     (prominentRoles.length &&
       peers.some(
         peer => peer.roleName && prominentRoles.includes(peer.roleName) && (peer.videoTrack || peer.audioTrack),
       )) ||
     pinnedTrack;
-  if (isInsetEnabled && !isRoleProminence && !peerSharing) {
-    peers = peers.filter(peer => !peer.isLocal);
-  }
+  const updatedPeers = useMemo(() => {
+    if (isInsetEnabled && !isRoleProminence && !peerSharing) {
+      return peers.filter(peer => !peer.isLocal);
+    }
+    return peers;
+  }, [isInsetEnabled, isRoleProminence, peerSharing, peers]);
   const vanillaStore = useHMSVanillaStore();
-  const [sortedPeers, setSortedPeers] = useState(peers);
+  const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
   const [pageSize, setPageSize] = useState(0);
   const [mainPage, setMainPage] = useState(0);
@@ -57,11 +60,11 @@ export const GridLayout = ({
       return;
     }
     peersSorter.setPeersAndTilesPerPage({
-      peers,
+      peers: updatedPeers,
       tilesPerPage: pageSize,
     });
     peersSorter.onUpdate(setSortedPeers);
-  }, [mainPage, peersSorter, peers, pageSize]);
+  }, [mainPage, peersSorter, updatedPeers, pageSize]);
 
   if (peerSharing) {
     return (

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
-import { Flex } from '../../../Layout';
+import { Box, Flex } from '../../../Layout';
 import { CSS } from '../../../Theme';
 // @ts-ignore: No implicit Any
 import VideoTile from '../VideoTile';
 import { useVideoTileContext } from '../hooks/useVideoTileLayout';
 
 const Root = ({ children, edgeToEdge }: React.PropsWithChildren<{ edgeToEdge?: boolean }>) => (
-  <Flex direction="column" css={{ size: '100%', gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}>
+  <Flex
+    direction="column"
+    css={{ h: '100%', flex: '1 1 0', minWidth: 0, gap: '$6', '@md': { gap: edgeToEdge ? 0 : '$6' } }}
+  >
     {children}
   </Flex>
 );
@@ -26,38 +29,39 @@ const SecondarySection = ({
   edgeToEdge,
 }: React.PropsWithChildren<{ tiles: TrackWithPeerAndDimensions[]; edgeToEdge?: boolean }>) => {
   const tileLayoutProps = useVideoTileContext();
+  if (!tiles?.length) {
+    return null;
+  }
   return (
-    <Flex direction="column" css={{ flexBasis: tiles?.length > 0 ? 154 : 0, minHeight: 0, gap: '$2' }}>
-      <Flex
-        justify="center"
-        align="center"
-        css={{ gap: '$4', minHeight: 0, margin: '0 auto', '@md': { gap: edgeToEdge ? 0 : '$4' } }}
-      >
-        {tiles?.map(tile => {
-          return (
-            <VideoTile
-              key={tile.track?.id || tile.peer?.id}
-              height="100%"
-              peerId={tile.peer?.id}
-              trackId={tile.track?.id}
-              rootCSS={{
-                padding: 0,
-                flex: '1 1 0',
-                maxWidth: 'max-content',
-              }}
-              containerCSS={{
-                width: 'unset',
-                aspectRatio: 16 / 9,
-                '@md': { aspectRatio: 1 },
-              }}
-              objectFit="contain"
-              {...tileLayoutProps}
-            />
-          );
-        })}
-      </Flex>
-      {children}
-    </Flex>
+    <Box
+      css={{
+        display: 'grid',
+        gridTemplateRows: React.Children.count(children) > 0 ? '136px auto' : '154px',
+        gridTemplateColumns: `repeat(${tiles.length}, 1fr)`,
+        gap: '$2 $4',
+        placeItems: 'center',
+        '@md': { gap: edgeToEdge ? 0 : '$4' },
+      }}
+    >
+      {tiles.map(tile => {
+        return (
+          <VideoTile
+            key={tile.track?.id || tile.peer?.id}
+            peerId={tile.peer?.id}
+            trackId={tile.track?.id}
+            rootCSS={{
+              padding: 0,
+              maxWidth: 240,
+              aspectRatio: 16 / 9,
+              '@md': { aspectRatio: 1 },
+            }}
+            objectFit="contain"
+            {...tileLayoutProps}
+          />
+        );
+      })}
+      <Box css={{ gridColumn: `1/span ${tiles.length}` }}>{children}</Box>
+    </Box>
   );
 };
 

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx

@@ -22,7 +22,9 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   const secondaryPeers = useMemo(
     () =>
       isMobile
-        ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)] //keep active sharing peer as first tile
+        ? activeSharePeer
+          ? [activeSharePeer, ...peers.filter(p => p.id !== activeSharePeer?.id)]
+          : peers //keep active sharing peer as first tile
         : peers.filter(p => p.id !== activeSharePeer?.id),
     [activeSharePeer, peers, isMobile],
   );
@@ -36,7 +38,7 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   return (
     <ProminenceLayout.Root edgeToEdge={edgeToEdge}>
       <ProminenceLayout.ProminentSection>
-        <ScreenshareTile peerId={peersSharing[page].id} />
+        <ScreenshareTile peerId={peersSharing[page]?.id} />
         {!edgeToEdge && <Pagination page={page} onPageChange={setPage} numPages={peersSharing.length} />}
       </ProminenceLayout.ProminentSection>
       <SecondaryTiles