@100mslive/roomkit-react 0.3.19-alpha.0 → 0.3.19-alpha.2

package/dist/meta.esbuild.json

@@ -1074,7 +1074,7 @@
       "format": "esm"
     },
     "src/Video/Video.tsx": {
-      "bytes": 1629,
+      "bytes": 1585,
       "imports": [
         {
           "path": "react",
@@ -4332,7 +4332,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/PIP/PIPChat.tsx": {
-      "bytes": 9811,
+      "bytes": 10270,
       "imports": [
         {
           "path": "react",
@@ -5729,7 +5729,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 363324,
+      "bytes": 364814,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -6674,13 +6674,18 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-      "bytes": 1353,
+      "bytes": 1791,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/hms-virtual-background",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -6706,6 +6711,11 @@
           "kind": "import-statement",
           "original": "../../IconButton"
         },
+        {
+          "path": "src/Prebuilt/components/VirtualBackground/VBHandler.tsx",
+          "kind": "import-statement",
+          "original": "./VBHandler"
+        },
         {
           "path": "src/Prebuilt/components/AppData/useSidepane.js",
           "kind": "import-statement",
@@ -11277,7 +11287,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b922/tldraw.css": {
+    "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd8e2/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11327,7 +11337,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b2a1/index.css": {
+    "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd210/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11336,7 +11346,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b922/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd8e2/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11411,7 +11421,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b2a1/index.css",
+          "path": "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd210/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -15211,7 +15221,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-O3I4DN7I.js",
+          "path": "dist/chunk-KR2DZJO5.js",
           "kind": "import-statement"
         }
       ],
@@ -15287,16 +15297,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-LJQ65VXH.js.map": {
+    "dist/HLSView-BRZ2FW7O.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-LJQ65VXH.js": {
+    "dist/HLSView-BRZ2FW7O.js": {
       "imports": [
         {
-          "path": "dist/chunk-O3I4DN7I.js",
+          "path": "dist/chunk-KR2DZJO5.js",
           "kind": "import-statement"
         },
         {
@@ -15474,7 +15484,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-6CQOPAJJ.css",
+      "cssBundle": "dist/HLSView-UXA322ED.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15533,13 +15543,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-O3I4DN7I.js.map": {
+    "dist/chunk-KR2DZJO5.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3483285
+      "bytes": 3487223
     },
-    "dist/chunk-O3I4DN7I.js": {
+    "dist/chunk-KR2DZJO5.js": {
       "imports": [
         {
           "path": "react",
@@ -16886,6 +16896,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "@100mslive/hms-virtual-background",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -18072,7 +18087,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-LJQ65VXH.js",
+          "path": "dist/HLSView-BRZ2FW7O.js",
           "kind": "dynamic-import"
         },
         {
@@ -18646,10 +18661,10 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17966
+          "bytesInOutput": 18026
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224289
+          "bytesInOutput": 224291
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
           "bytesInOutput": 42491
@@ -18658,7 +18673,7 @@
           "bytesInOutput": 26591
         },
         "../../node_modules/sdp/sdp.js": {
-          "bytesInOutput": 22279
+          "bytesInOutput": 22292
         },
         "../../node_modules/sdp-transform/lib/grammar.js": {
           "bytesInOutput": 16120
@@ -18682,7 +18697,7 @@
           "bytesInOutput": 373
         },
         "../../node_modules/object-assign/index.js": {
-          "bytesInOutput": 2167
+          "bytesInOutput": 2163
         },
         "../../node_modules/prop-types/lib/ReactPropTypesSecret.js": {
           "bytesInOutput": 308
@@ -18844,7 +18859,7 @@
           "bytesInOutput": 27
         },
         "src/Video/Video.tsx": {
-          "bytesInOutput": 1257
+          "bytesInOutput": 1192
         },
         "src/TileMenu/index.tsx": {
           "bytesInOutput": 27
@@ -18988,7 +19003,7 @@
           "bytesInOutput": 489
         },
         "src/Prebuilt/components/PIP/PIPManager.ts": {
-          "bytesInOutput": 9818
+          "bytesInOutput": 9820
         },
         "src/Prebuilt/components/PIP/pipUtils.js": {
           "bytesInOutput": 4289
@@ -19093,7 +19108,7 @@
           "bytesInOutput": 2509
         },
         "src/Prebuilt/components/PIP/PIPChat.tsx": {
-          "bytesInOutput": 9621
+          "bytesInOutput": 10026
         },
         "src/TextArea/index.tsx": {
           "bytesInOutput": 27
@@ -19189,7 +19204,7 @@
           "bytesInOutput": 9861
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 50270
+          "bytesInOutput": 50504
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2539
@@ -19207,7 +19222,7 @@
           "bytesInOutput": 22678
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6078
+          "bytesInOutput": 6086
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1256
@@ -19273,7 +19288,7 @@
           "bytesInOutput": 823
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-          "bytesInOutput": 1280
+          "bytesInOutput": 1805
         },
         "src/Prebuilt/components/Footer/ChatToggle.tsx": {
           "bytesInOutput": 1564
@@ -19542,7 +19557,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b2a1/index.css": {
+        "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd210/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19597,7 +19612,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 8176
+          "bytesInOutput": 8179
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -19702,7 +19717,7 @@
           "bytesInOutput": 2628
         }
       },
-      "bytes": 1441928
+      "bytes": 1443107
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19764,22 +19779,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b922/tldraw.css": {
+        "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd8e2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b2a1/index.css": {
+        "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd210/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-6CQOPAJJ.css.map": {
+    "dist/HLSView-UXA322ED.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-6CQOPAJJ.css": {
+    "dist/HLSView-UXA322ED.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19833,10 +19848,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b922/tldraw.css": {
+        "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd8e2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2832-c0B4C98IX1ak/1916e2c4b2a1/index.css": {
+        "../../../../../../../tmp/tmp-2790-CtzuXp4m7Mya/19197fbfd210/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.19-alpha.0",
+  "version": "0.3.19-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.19-alpha.0",
+    "@100mslive/hls-player": "0.3.19-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.19-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.9-alpha.0",
-    "@100mslive/react-icons": "0.10.19-alpha.0",
-    "@100mslive/react-sdk": "0.10.19-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.19-alpha.2",
+    "@100mslive/hms-whiteboard": "0.0.9-alpha.2",
+    "@100mslive/react-icons": "0.10.19-alpha.2",
+    "@100mslive/react-sdk": "0.10.19-alpha.2",
     "@100mslive/types-prebuilt": "0.12.11",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5de66a04a026c41273f2e5c7726569cf75ee4bc4"
+  "gitHead": "88c8ac68235961d5352322c7be3efedad27f6d92"
 }

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

@@ -102,9 +102,21 @@ export const PIPChat = () => {
         )}
         {filteredMessages.length === 0 ? (
           <div
-            style={{ display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
-            <Text>No messages here yet</Text>
+            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+              {canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
+            </Text>
+            <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
+              There are no messages here yet. Start a conversation by sending a message.
+            </Text>
           </div>
         ) : (
           filteredMessages.map(message => (

package/src/Prebuilt/components/VirtualBackground/VBToggle.tsx

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import {
   selectAppData,
   selectIsEffectsEnabled,
   selectIsLocalVideoEnabled,
   selectIsVBEnabled,
+  useAVToggle,
+  useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
+import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { APP_DATA, isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -21,6 +25,15 @@ export const VBToggle = () => {
   const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
+  const hmsActions = useHMSActions();
+  const { toggleVideo } = useAVToggle();
+
+  useEffect(() => {
+    if (!toggleVideo) {
+      VBHandler?.reset();
+      hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+    }
+  }, [hmsActions, toggleVideo]);
 
   if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;

package/src/Video/Video.tsx

@@ -57,5 +57,5 @@ interface Props {
 
 export const Video: React.FC<Props & StyledProps> = ({ trackId, attach, ...props }) => {
   const { videoRef } = useVideo({ trackId, attach });
-  return <StyledVideo autoPlay muted playsInline controls={false} ref={videoRef} {...props} />;
+  return <StyledVideo ref={videoRef} {...props} />;
 };