@100mslive/roomkit-react 0.3.25-alpha.5 → 0.3.25-alpha.6

package/dist/meta.cjs.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",
@@ -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-2850-gK6MwlEulps0/193620695a23/tldraw.css": {
+    "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5d72/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11381,7 +11371,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/1936206959f2/index.css": {
+    "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5590/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11390,7 +11380,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/193620695a23/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5d72/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11465,7 +11455,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/1936206959f2/index.css",
+          "path": "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5590/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15729,7 +15719,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3624707
+      "bytes": 3624022
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15873,11 +15863,6 @@
           "kind": "require-call",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "require-call",
-          "external": true
-        },
         {
           "path": "@radix-ui/react-dropdown-menu",
           "kind": "require-call",
@@ -18113,11 +18098,6 @@
           "kind": "require-call",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "require-call",
-          "external": true
-        },
         {
           "path": "react",
           "kind": "require-call",
@@ -19077,7 +19057,7 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18100
+          "bytesInOutput": 18041
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224306
@@ -19251,7 +19231,7 @@
           "bytesInOutput": 27
         },
         "src/VideoTile/StyledVideoTile.tsx": {
-          "bytesInOutput": 2753
+          "bytesInOutput": 2481
         },
         "src/VideoList/index.tsx": {
           "bytesInOutput": 27
@@ -19923,7 +19903,7 @@
           "bytesInOutput": 1796
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-          "bytesInOutput": 1422
+          "bytesInOutput": 1268
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
           "bytesInOutput": 3866
@@ -19955,7 +19935,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/1936206959f2/index.css": {
+        "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5590/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20190,7 +20170,7 @@
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1504890
+      "bytes": 1504405
     },
     "dist/index.cjs.css.map": {
       "imports": [],
@@ -20252,10 +20232,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/193620695a23/tldraw.css": {
+        "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5d72/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2850-gK6MwlEulps0/1936206959f2/index.css": {
+        "../../../../../../../tmp/tmp-2818-oB6vj1kKCmoZ/1937275e5590/index.css": {
           "bytesInOutput": 401
         }
       },

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",
@@ -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-2850-wPuV5bZvLYyI/193620694fb1/tldraw.css": {
+    "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e6453/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11381,7 +11371,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694950/index.css": {
+    "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e5cb1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11390,7 +11380,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694fb1/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e6453/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11465,7 +11455,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694950/index.css",
+          "path": "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e5cb1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15729,7 +15719,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3664606
+      "bytes": 3663945
     },
     "dist/index.js": {
       "imports": [
@@ -15873,11 +15863,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 +18098,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "framer-motion",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -19143,7 +19123,7 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18100
+          "bytesInOutput": 18041
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224301
@@ -19317,7 +19297,7 @@
           "bytesInOutput": 27
         },
         "src/VideoTile/StyledVideoTile.tsx": {
-          "bytesInOutput": 2714
+          "bytesInOutput": 2481
         },
         "src/VideoList/index.tsx": {
           "bytesInOutput": 27
@@ -19989,7 +19969,7 @@
           "bytesInOutput": 1698
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-          "bytesInOutput": 1316
+          "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
           "bytesInOutput": 3834
@@ -20021,7 +20001,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694950/index.css": {
+        "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e5cb1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20256,7 +20236,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1449894
+      "bytes": 1449490
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20318,10 +20298,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694fb1/tldraw.css": {
+        "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e6453/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2850-wPuV5bZvLYyI/193620694950/index.css": {
+        "../../../../../../../tmp/tmp-2818-N5QtmU3NbPS5/1937275e5cb1/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.25-alpha.5",
+  "version": "0.3.25-alpha.6",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.25-alpha.5",
-    "@100mslive/hms-noise-cancellation": "0.0.2-alpha.7",
-    "@100mslive/hms-virtual-background": "1.13.25-alpha.5",
-    "@100mslive/hms-whiteboard": "0.0.15-alpha.5",
-    "@100mslive/react-icons": "0.10.25-alpha.5",
-    "@100mslive/react-sdk": "0.10.25-alpha.5",
+    "@100mslive/hls-player": "0.3.25-alpha.6",
+    "@100mslive/hms-noise-cancellation": "0.0.1",
+    "@100mslive/hms-virtual-background": "1.13.25-alpha.6",
+    "@100mslive/hms-whiteboard": "0.0.15-alpha.6",
+    "@100mslive/react-icons": "0.10.25-alpha.6",
+    "@100mslive/react-sdk": "0.10.25-alpha.6",
     "@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": "0249eaabc39f8911a178a8cb5445cf7887639ab6"
+  "gitHead": "9d7dcf30165c3a75bbe97b82f2c6af5fb5d69c88"
 }

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>
     );
   },
 );

package/src/VideoTile/StyledVideoTile.tsx

@@ -1,4 +1,3 @@
-import { motion } from 'framer-motion';
 import { Box } from '../Layout';
 import { styled } from '../Theme';
 import { flexCenter } from '../utils';
@@ -7,18 +6,6 @@ export const Root = styled('div', {
   padding: '0.75rem',
 });
 
-const MotionRoot = motion(Root);
-MotionRoot.defaultProps = {
-  layout: true,
-  transition: {
-    type: 'spring',
-    stiffness: 300,
-    damping: 30,
-    mass: 1,
-    duration: 0.15,
-  },
-};
-
 const Container = styled('div', {
   width: '100%',
   height: '100%',
@@ -137,7 +124,7 @@ const AvatarContainer = styled(Box, {
 });
 
 interface VideoTileType {
-  Root: typeof MotionRoot;
+  Root: typeof Root;
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
@@ -148,7 +135,7 @@ interface VideoTileType {
 }
 
 export const StyledVideoTile: VideoTileType = {
-  Root: MotionRoot,
+  Root,
   Container,
   Overlay,
   Info,