@100mslive/roomkit-react 0.3.24 → 0.3.25-alpha.1

package/dist/meta.cjs.json

@@ -915,8 +915,13 @@
       "format": "esm"
     },
     "src/VideoTile/StyledVideoTile.tsx": {
-      "bytes": 2968,
+      "bytes": 3105,
       "imports": [
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -5779,7 +5784,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 373860,
+      "bytes": 374174,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10701,13 +10706,18 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-      "bytes": 1272,
+      "bytes": 1428,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -11321,7 +11331,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be0167c1/tldraw.css": {
+    "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848fe63/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11371,7 +11381,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be015f10/index.css": {
+    "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848f7b1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11380,7 +11390,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be0167c1/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848fe63/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11455,7 +11465,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be015f10/index.css",
+          "path": "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848f7b1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12813,7 +12823,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8262,
+      "bytes": 7133,
       "imports": [
         {
           "path": "react",
@@ -15719,7 +15729,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3622096
+      "bytes": 3621806
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15863,6 +15873,11 @@
           "kind": "require-call",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "require-call",
+          "external": true
+        },
         {
           "path": "@radix-ui/react-dropdown-menu",
           "kind": "require-call",
@@ -18098,6 +18113,11 @@
           "kind": "require-call",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "require-call",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "require-call",
@@ -19057,7 +19077,7 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17919
+          "bytesInOutput": 18074
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224296
@@ -19135,7 +19155,7 @@
           "bytesInOutput": 5035
         },
         "src/Prebuilt/common/constants.ts": {
-          "bytesInOutput": 3715
+          "bytesInOutput": 3693
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 2005
@@ -19231,7 +19251,7 @@
           "bytesInOutput": 27
         },
         "src/VideoTile/StyledVideoTile.tsx": {
-          "bytesInOutput": 2594
+          "bytesInOutput": 2753
         },
         "src/VideoList/index.tsx": {
           "bytesInOutput": 27
@@ -19405,7 +19425,7 @@
           "bytesInOutput": 1053
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7859
+          "bytesInOutput": 6684
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 3740
@@ -19591,7 +19611,7 @@
           "bytesInOutput": 10613
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 54392
+          "bytesInOutput": 54400
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19903,7 +19923,7 @@
           "bytesInOutput": 1796
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-          "bytesInOutput": 1268
+          "bytesInOutput": 1422
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
           "bytesInOutput": 3866
@@ -19935,7 +19955,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be015f10/index.css": {
+        "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848f7b1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20170,7 +20190,7 @@
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1505609
+      "bytes": 1504888
     },
     "dist/index.cjs.css.map": {
       "imports": [],
@@ -20232,10 +20252,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be0167c1/tldraw.css": {
+        "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848fe63/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2792-syn0Gf89RRcC/1931be015f10/index.css": {
+        "../../../../../../../tmp/tmp-2861-Z4uSR5j8R7ap/1933e848f7b1/index.css": {
           "bytesInOutput": 401
         }
       },

package/dist/meta.esbuild.json

@@ -915,8 +915,13 @@
       "format": "esm"
     },
     "src/VideoTile/StyledVideoTile.tsx": {
-      "bytes": 2968,
+      "bytes": 3105,
       "imports": [
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -5779,7 +5784,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 373860,
+      "bytes": 374174,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10701,13 +10706,18 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-      "bytes": 1272,
+      "bytes": 1428,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -11321,7 +11331,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017163/tldraw.css": {
+    "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f852/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11371,7 +11381,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017122/index.css": {
+    "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f150/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11380,7 +11390,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017163/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f852/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11455,7 +11465,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017122/index.css",
+          "path": "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f150/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12813,7 +12823,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ConferenceScreen.tsx": {
-      "bytes": 8262,
+      "bytes": 7133,
       "imports": [
         {
           "path": "react",
@@ -15719,7 +15729,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3662111
+      "bytes": 3661705
     },
     "dist/index.js": {
       "imports": [
@@ -15863,6 +15873,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@radix-ui/react-dropdown-menu",
           "kind": "import-statement",
@@ -18098,6 +18113,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "framer-motion",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react",
           "kind": "import-statement",
@@ -19123,7 +19143,7 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17919
+          "bytesInOutput": 18074
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224291
@@ -19201,7 +19221,7 @@
           "bytesInOutput": 5061
         },
         "src/Prebuilt/common/constants.ts": {
-          "bytesInOutput": 3613
+          "bytesInOutput": 3591
         },
         "src/Theme/ThemeProvider.tsx": {
           "bytesInOutput": 1926
@@ -19297,7 +19317,7 @@
           "bytesInOutput": 27
         },
         "src/VideoTile/StyledVideoTile.tsx": {
-          "bytesInOutput": 2594
+          "bytesInOutput": 2714
         },
         "src/VideoList/index.tsx": {
           "bytesInOutput": 27
@@ -19471,7 +19491,7 @@
           "bytesInOutput": 1028
         },
         "src/Prebuilt/components/ConferenceScreen.tsx": {
-          "bytesInOutput": 7439
+          "bytesInOutput": 6307
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
           "bytesInOutput": 3306
@@ -19657,7 +19677,7 @@
           "bytesInOutput": 9861
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 54280
+          "bytesInOutput": 54288
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19969,7 +19989,7 @@
           "bytesInOutput": 1698
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
-          "bytesInOutput": 1204
+          "bytesInOutput": 1316
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
           "bytesInOutput": 3834
@@ -20001,7 +20021,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017122/index.css": {
+        "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f150/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -20236,7 +20256,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1450651
+      "bytes": 1449892
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20298,10 +20318,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017163/tldraw.css": {
+        "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f852/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2792-ichNzF0hFphw/1931be017122/index.css": {
+        "../../../../../../../tmp/tmp-2861-8gqp3uHH6jg6/1933e848f150/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.24",
+  "version": "0.3.25-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.24",
+    "@100mslive/hls-player": "0.3.25-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.24",
-    "@100mslive/hms-whiteboard": "0.0.14",
-    "@100mslive/react-icons": "0.10.24",
-    "@100mslive/react-sdk": "0.10.24",
+    "@100mslive/hms-virtual-background": "1.13.25-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.15-alpha.1",
+    "@100mslive/react-icons": "0.10.25-alpha.1",
+    "@100mslive/react-sdk": "0.10.25-alpha.1",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -102,6 +102,7 @@
     "@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",
@@ -117,5 +118,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5fa06e76860c048811f0ba23e372a048bfd93fa4"
+  "gitHead": "40bd24d7d8405df6618586e51ec17448e1c4a16f"
 }

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/VideoLayouts/Grid.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { AnimatePresence } from 'framer-motion';
 import { TrackWithPeerAndDimensions } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 // @ts-ignore: No implicit Any
@@ -9,35 +10,37 @@ export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDi
   ({ tiles, edgeToEdge }, ref) => {
     const videoTileProps = useVideoTileContext();
     return (
-      <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>
+      </AnimatePresence>
     );
   },
 );

package/src/VideoTile/StyledVideoTile.tsx

@@ -1,15 +1,24 @@
+import { motion } from 'framer-motion';
 import { Box } from '../Layout';
 import { styled } from '../Theme';
 import { flexCenter } from '../utils';
 
 export const Root = styled('div', {
   padding: '0.75rem',
-  // show videotile context menu on hover
-  // [`&:hover .tile-menu`]: {
-  //   display: 'inline-block',
-  // },
 });
 
+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%',
@@ -128,7 +137,7 @@ const AvatarContainer = styled(Box, {
 });
 
 interface VideoTileType {
-  Root: typeof Root;
+  Root: typeof MotionRoot;
   Container: typeof Container;
   Overlay: typeof Overlay;
   Info: typeof Info;
@@ -139,7 +148,7 @@ interface VideoTileType {
 }
 
 export const StyledVideoTile: VideoTileType = {
-  Root,
+  Root: MotionRoot,
   Container,
   Overlay,
   Info,