@100mslive/roomkit-react 0.3.25-alpha.0 → 0.3.25-alpha.10

package/dist/meta.esbuild.json

@@ -915,13 +915,8 @@
       "format": "esm"
     },
     "src/VideoTile/StyledVideoTile.tsx": {
-      "bytes": 3105,
+      "bytes": 2855,
       "imports": [
-        {
-          "path": "framer-motion",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -3107,7 +3102,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 13759,
+      "bytes": 13760,
       "imports": [
         {
           "path": "react",
@@ -4362,7 +4357,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PIP/PIPChat.tsx": {
-      "bytes": 10417,
+      "bytes": 10418,
       "imports": [
         {
           "path": "react",
@@ -5784,7 +5779,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 374174,
+      "bytes": 375694,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10706,18 +10701,13 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-      "bytes": 1428,
+      "bytes": 1272,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -11331,7 +11321,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bf82/tldraw.css": {
+    "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2c32/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11381,7 +11371,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bd61/index.css": {
+    "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2620/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11390,7 +11380,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bf82/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2c32/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11465,7 +11455,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bd61/index.css",
+          "path": "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2620/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12823,7 +12813,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8262,
+      "bytes": 7133,
       "imports": [
         {
           "path": "react",
@@ -14606,18 +14596,13 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10957,
+      "bytes": 10920,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "@100mslive/hms-video-store",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/types-prebuilt",
           "kind": "import-statement",
@@ -15219,7 +15204,7 @@
       "format": "esm"
     },
     "src/Diagnostics/ConnectivityTest.tsx": {
-      "bytes": 12150,
+      "bytes": 12290,
       "imports": [
         {
           "path": "react",
@@ -15729,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3663636
+      "bytes": 3664418
     },
     "dist/index.js": {
       "imports": [
@@ -15873,11 +15858,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@radix-ui/react-dropdown-menu",
           "kind": "import-statement",
@@ -18113,11 +18093,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -19143,13 +19118,13 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18073
+          "bytesInOutput": 18055
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224291
+          "bytesInOutput": 224301
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
-          "bytesInOutput": 42466
+          "bytesInOutput": 42449
         },
         "../../node_modules/lodash.isequal/index.js": {
           "bytesInOutput": 26591
@@ -19164,13 +19139,13 @@
           "bytesInOutput": 3491
         },
         "../../node_modules/sdp-transform/lib/writer.js": {
-          "bytesInOutput": 3068
+          "bytesInOutput": 3071
         },
         "../../node_modules/sdp-transform/lib/index.js": {
           "bytesInOutput": 615
         },
         "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.production.min.js": {
-          "bytesInOutput": 3850
+          "bytesInOutput": 3852
         },
         "../../node_modules/prop-types/node_modules/react-is/cjs/react-is.development.js": {
           "bytesInOutput": 7630
@@ -19179,7 +19154,7 @@
           "bytesInOutput": 373
         },
         "../../node_modules/object-assign/index.js": {
-          "bytesInOutput": 2167
+          "bytesInOutput": 2163
         },
         "../../node_modules/prop-types/lib/ReactPropTypesSecret.js": {
           "bytesInOutput": 308
@@ -19188,10 +19163,10 @@
           "bytesInOutput": 208
         },
         "../../node_modules/prop-types/checkPropTypes.js": {
-          "bytesInOutput": 2825
+          "bytesInOutput": 2826
         },
         "../../node_modules/prop-types/factoryWithTypeCheckers.js": {
-          "bytesInOutput": 19837
+          "bytesInOutput": 19842
         },
         "../../node_modules/prop-types/factoryWithThrowingShims.js": {
           "bytesInOutput": 1646
@@ -19221,7 +19196,7 @@
           "bytesInOutput": 5061
         },
         "src/Prebuilt/common/constants.ts": {
-          "bytesInOutput": 3613
+          "bytesInOutput": 3591
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 1926
@@ -19317,7 +19292,7 @@
           "bytesInOutput": 27
         },
         "src/VideoTile/StyledVideoTile.tsx": {
-          "bytesInOutput": 2714
+          "bytesInOutput": 2481
         },
         "src/VideoList/index.tsx": {
           "bytesInOutput": 27
@@ -19368,7 +19343,7 @@
           "bytesInOutput": 8580
         },
         "src/Stats/formatBytes.ts": {
-          "bytesInOutput": 473
+          "bytesInOutput": 471
         },
         "src/Stats/StyledStats.tsx": {
           "bytesInOutput": 708
@@ -19425,7 +19400,7 @@
           "bytesInOutput": 887
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8034
+          "bytesInOutput": 8036
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6633
@@ -19491,13 +19466,13 @@
           "bytesInOutput": 1028
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7439
+          "bytesInOutput": 6307
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 3306
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 14235
+          "bytesInOutput": 14236
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
           "bytesInOutput": 3293
@@ -19584,7 +19559,7 @@
           "bytesInOutput": 2509
         },
         "src/Prebuilt/components/PIP/PIPChat.tsx": {
-          "bytesInOutput": 10156
+          "bytesInOutput": 10157
         },
         "src/TextArea/index.tsx": {
           "bytesInOutput": 27
@@ -19677,7 +19652,7 @@
           "bytesInOutput": 9861
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 54288
+          "bytesInOutput": 54291
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19692,7 +19667,7 @@
           "bytesInOutput": 6313
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/chrome_shim.js": {
-          "bytesInOutput": 22691
+          "bytesInOutput": 22676
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
           "bytesInOutput": 6093
@@ -19710,10 +19685,10 @@
           "bytesInOutput": 842
         },
         "../../node_modules/webrtc-adapter/src/js/safari/safari_shim.js": {
-          "bytesInOutput": 11873
+          "bytesInOutput": 11866
         },
         "../../node_modules/webrtc-adapter/src/js/common_shim.js": {
-          "bytesInOutput": 12468
+          "bytesInOutput": 12458
         },
         "src/Prebuilt/components/MoreSettings/ChangeNameModal.tsx": {
           "bytesInOutput": 2272
@@ -19893,7 +19868,7 @@
           "bytesInOutput": 7557
         },
         "src/Prebuilt/components/Chat/Chat.tsx": {
-          "bytesInOutput": 5648
+          "bytesInOutput": 5651
         },
         "src/Prebuilt/components/Chat/ChatFooter.tsx": {
           "bytesInOutput": 10898
@@ -19989,7 +19964,7 @@
           "bytesInOutput": 1698
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-          "bytesInOutput": 1316
+          "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
           "bytesInOutput": 3834
@@ -20021,7 +19996,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bd61/index.css": {
+        "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2620/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20031,7 +20006,7 @@
           "bytesInOutput": 2787
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 28042
+          "bytesInOutput": 28045
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3592
@@ -20250,13 +20225,13 @@
           "bytesInOutput": 4418
         },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 13570
+          "bytesInOutput": 13776
         },
         "src/Diagnostics/VideoTest.tsx": {
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1451045
+      "bytes": 1449718
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20318,10 +20293,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bf82/tldraw.css": {
+        "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2c32/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2773-6RMsN9ZT6He3/1932f8a9bd61/index.css": {
+        "../../../../../../../tmp/tmp-2744-BnTgP3RtcjHE/1939bb1d2620/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.25-alpha.0",
+  "version": "0.3.25-alpha.10",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.25-alpha.0",
-    "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.25-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.15-alpha.0",
-    "@100mslive/react-icons": "0.10.25-alpha.0",
-    "@100mslive/react-sdk": "0.10.25-alpha.0",
+    "@100mslive/hls-player": "0.3.25-alpha.10",
+    "@100mslive/hms-noise-cancellation": "0.0.2-alpha.9",
+    "@100mslive/hms-virtual-background": "1.13.25-alpha.10",
+    "@100mslive/hms-whiteboard": "0.0.15-alpha.10",
+    "@100mslive/react-icons": "0.10.25-alpha.10",
+    "@100mslive/react-sdk": "0.10.25-alpha.10",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -102,7 +102,6 @@
     "@stitches/react": "1.3.1-1",
     "emoji-mart": "^5.2.2",
     "eventemitter2": "^6.4.9",
-    "framer-motion": "^11.11.0",
     "lodash.merge": "^4.6.2",
     "qrcode.react": "^3.1.0",
     "react-dom": "^18.2.0",
@@ -118,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "b9a15a40498feb37cf34dc6fab790cb9dcfcd775"
+  "gitHead": "b501de9d52ebead7150aaeaeed746c0ed1ac2c6d"
 }

package/src/Diagnostics/ConnectivityTest.tsx

@@ -164,6 +164,7 @@ const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>
@@ -182,6 +183,7 @@ const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
           <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
           <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
           <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+          <DetailedInfo title="Jitter" value={`${stats.jitter} s`} />
         </Flex>
       )}
     </ConnectivityTestStepResult>

package/src/Prebuilt/App.tsx

@@ -1,11 +1,13 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
-import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
   HMSActions,
   HMSReactiveStore,
   HMSRoomProvider,
+  HMSStatsStoreWrapper,
+  HMSStoreWrapper,
+  IHMSNotifications,
   selectIsConnectedToRoom,
   useHMSActions,
   useHMSStore,
@@ -207,15 +209,15 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
 
                   return (
                     <HMSThemeProvider
-                      // issue is with stichtes caching the theme using the theme name / class
+                      // issue is with stitches caching the theme using the theme name / class
                       // no updates to the themes are fired if the name is same.
                       // TODO: cache the theme and do deep check to trigger name change in the theme
                       themeType={`${theme.name}-${Date.now()}`}
                       theme={{
-                        //@ts-ignore: Prebuilt theme to match stiches theme
+                        //@ts-ignore: Prebuilt theme to match stitches theme
                         colors: theme.palette,
                         fonts: {
-                          //@ts-ignore: font list to match token types of stiches
+                          //@ts-ignore: font list to match token types of stitches
                           sans: fontFamily,
                         },
                       }}

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -155,7 +155,7 @@ export const NoiseCancellation = ({
     return (
       <ActionTile.Root
         active={isNoiseCancellationEnabled && isKrispPluginAdded}
-        disable={inProgress}
+        disabled={inProgress}
         onClick={async () => {
           await setNoiseCancellationWithPlugin(!isNoiseCancellationEnabled);
           setOpenOptionsSheet?.(false);

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { v4 as uuid } from 'uuid';
 import {
   HMSRoomState,
-  selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
   useAwayNotifications,
@@ -34,7 +33,7 @@ import {
 // @ts-ignore: No implicit Any
 import { useAuthToken, useSetAppDataByKey } from './AppData/useUISettings';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../common/hooks';
-import { APP_DATA, isAndroid, isIOS, isIPadOS } from '../common/constants';
+import { APP_DATA } from '../common/constants';
 
 export const ConferenceScreen = () => {
   const { userName, endpoints, onJoin: onJoinFunc } = useHMSPrebuiltContext();
@@ -43,13 +42,11 @@ export const ConferenceScreen = () => {
   const roomState = useHMSStore(selectRoomState);
   const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
   const hmsActions = useHMSActions();
-  const [hideControls, setHideControls] = useState(false);
-  const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
+
   const authTokenInAppData = useAuthToken();
   const headerRef = useRef<HTMLDivElement | null>(null);
   const footerRef = useRef<HTMLDivElement | null>(null);
-  const isMobileDevice = isAndroid || isIOS || isIPadOS;
-  const dropdownListRef = useRef<string[]>();
+
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
   const { requestPermission } = useAwayNotifications();
 
@@ -60,28 +57,6 @@ export const ConferenceScreen = () => {
   const isLandscapeHLSStream = useLandscapeHLSStream();
   const isMwebHLSStream = isMobileHLSStream || isLandscapeHLSStream;
 
-  const toggleControls = () => {
-    if (dropdownListRef.current?.length === 0 && isMobileDevice && !isMwebHLSStream) {
-      setHideControls(value => !value);
-    }
-  };
-
-  useEffect(() => {
-    let timeout: undefined | ReturnType<typeof setTimeout>;
-    dropdownListRef.current = dropdownList || [];
-    if (dropdownListRef.current && dropdownListRef.current.length === 0) {
-      clearTimeout(timeout);
-      timeout = setTimeout(() => {
-        if (dropdownListRef.current && dropdownListRef.current.length === 0) {
-          setHideControls(isMobileDevice);
-        }
-      }, 5000);
-    }
-    return () => {
-      clearTimeout(timeout);
-    };
-  }, [dropdownList, hideControls, isMobileDevice]);
-
   useEffect(() => {
     if (
       authTokenInAppData &&
@@ -128,8 +103,6 @@ export const ConferenceScreen = () => {
     return <FullPageProgress text={roomState === HMSRoomState.Connecting ? 'Joining...' : ''} />;
   }
 
-  const hideControlsForStreaming = isMwebHLSStream ? true : hideControls;
-
   return (
     <>
       {isHLSStarted ? (
@@ -144,7 +117,7 @@ export const ConferenceScreen = () => {
             css={{
               h: '$18',
               transition: 'margin 0.3s ease-in-out',
-              marginTop: hideControlsForStreaming ? `-${headerRef.current?.clientHeight}px` : 'none',
+              marginTop: isMwebHLSStream ? `-${headerRef.current?.clientHeight}px` : 'none',
               '@md': {
                 h: '$17',
               },
@@ -170,13 +143,12 @@ export const ConferenceScreen = () => {
           }}
           id="conferencing"
           data-testid="conferencing"
-          onClick={toggleControls}
         >
           {screenProps.elements ? (
             <VideoStreamingSection
               screenType={screenProps.screenType}
               elements={screenProps.elements}
-              hideControls={hideControlsForStreaming}
+              hideControls={isMwebHLSStream}
             />
           ) : null}
         </Box>
@@ -188,7 +160,7 @@ export const ConferenceScreen = () => {
               maxHeight: '$24',
               transition: 'margin 0.3s ease-in-out',
               bg: '$background_dim',
-              marginBottom: hideControlsForStreaming ? `-${footerRef.current?.clientHeight}px` : undefined,
+              marginBottom: isMwebHLSStream ? `-${footerRef.current?.clientHeight}px` : undefined,
               '@md': {
                 maxHeight: 'unset',
                 bg: screenProps.screenType === 'hls_live_streaming' ? 'transparent' : '$background_dim',

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -72,7 +72,7 @@ export const PIPChat = () => {
   ]);
 
   return (
-    <div style={{ height: '100%' }}>
+    <div style={{ height: '100vh' }}>
       <Box
         id="chat-container"
         css={{

package/src/Prebuilt/components/VideoLayouts/Grid.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { AnimatePresence } from 'framer-motion';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 // @ts-ignore: No implicit Any
@@ -10,37 +9,35 @@ export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDi
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
     return (
-      <AnimatePresence>
-        <Box
-          ref={ref}
-          css={{
-            flex: '1 1 0',
-            gap: '$4',
-            display: 'flex',
-            placeContent: 'center',
-            alignItems: 'center',
-            justifyContent: 'center',
-            flexFlow: 'row wrap',
-            minHeight: 0,
-            '@lg': { gap: edgeToEdge ? 0 : '$4' },
-          }}
-        >
-          {tiles?.map(tile => {
-            return (
-              <VideoTile
-                key={tile.track?.id || tile.peer?.id}
-                width={tile.width}
-                height={tile.height}
-                peerId={tile.peer?.id}
-                trackId={tile.track?.id}
-                rootCSS={{ padding: 0 }}
-                objectFit="contain"
-                {...videoTileProps}
-              />
-            );
-          })}
-        </Box>
-      </AnimatePresence>
+      <Box
+        ref={ref}
+        css={{
+          flex: '1 1 0',
+          gap: '$4',
+          display: 'flex',
+          placeContent: 'center',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexFlow: 'row wrap',
+          minHeight: 0,
+          '@lg': { gap: edgeToEdge ? 0 : '$4' },
+        }}
+      >
+        {tiles?.map(tile => {
+          return (
+            <VideoTile
+              key={tile.track?.id || tile.peer?.id}
+              width={tile.width}
+              height={tile.height}
+              peerId={tile.peer?.id}
+              trackId={tile.track?.id}
+              rootCSS={{ padding: 0 }}
+              objectFit="contain"
+              {...videoTileProps}
+            />
+          );
+        })}
+      </Box>
     );
   },
 );