@100mslive/roomkit-react 0.3.15-alpha.2 → 0.3.15-alpha.4

package/dist/meta.esbuild.json

@@ -4951,7 +4951,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 356558,
+      "bytes": 356613,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10943,7 +10943,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
+    "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965e22/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -10993,7 +10993,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
+    "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965890/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11002,7 +11002,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965e22/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11077,7 +11077,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css",
+          "path": "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965890/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -14099,8 +14099,8 @@
       ],
       "format": "esm"
     },
-    "src/Diagnostics/components.tsx": {
-      "bytes": 2724,
+    "src/Diagnostics/DiagnosticsContext.ts": {
+      "bytes": 1230,
       "imports": [
         {
           "path": "react",
@@ -14112,6 +14112,27 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
+    "src/Diagnostics/components.tsx": {
+      "bytes": 2075,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/Button/index.tsx",
           "kind": "import-statement",
@@ -14132,6 +14153,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -14362,7 +14388,7 @@
       "format": "esm"
     },
     "src/Diagnostics/AudioTest.tsx": {
-      "bytes": 5958,
+      "bytes": 6167,
       "imports": [
         {
           "path": "react",
@@ -14414,6 +14440,11 @@
           "kind": "import-statement",
           "original": "./DeviceSelector"
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "src/Prebuilt/components/hooks/useAudioOutputTest.tsx",
           "kind": "import-statement",
@@ -14433,7 +14464,7 @@
       "format": "esm"
     },
     "src/Diagnostics/BrowserTest.tsx": {
-      "bytes": 4252,
+      "bytes": 4366,
       "imports": [
         {
           "path": "react",
@@ -14460,6 +14491,11 @@
           "kind": "import-statement",
           "original": "../Text"
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -14469,7 +14505,7 @@
       "format": "esm"
     },
     "src/Diagnostics/ConnectivityTest.tsx": {
-      "bytes": 11975,
+      "bytes": 12150,
       "imports": [
         {
           "path": "react",
@@ -14516,6 +14552,11 @@
           "kind": "import-statement",
           "original": "../Text"
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -14525,7 +14566,7 @@
       "format": "esm"
     },
     "src/Diagnostics/VideoTest.tsx": {
-      "bytes": 2591,
+      "bytes": 2718,
       "imports": [
         {
           "path": "react",
@@ -14577,6 +14618,11 @@
           "kind": "import-statement",
           "original": "./DeviceSelector"
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -14591,7 +14637,7 @@
       "format": "esm"
     },
     "src/Diagnostics/Diagnostics.tsx": {
-      "bytes": 5171,
+      "bytes": 5845,
       "imports": [
         {
           "path": "react",
@@ -14608,11 +14654,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "src/Diagnostics/components.tsx",
-          "kind": "import-statement",
-          "original": "./components"
-        },
         {
           "path": "src/Layout/index.tsx",
           "kind": "import-statement",
@@ -14643,6 +14684,11 @@
           "kind": "import-statement",
           "original": "./ConnectivityTest"
         },
+        {
+          "path": "src/Diagnostics/DiagnosticsContext.ts",
+          "kind": "import-statement",
+          "original": "./DiagnosticsContext"
+        },
         {
           "path": "src/Diagnostics/VideoTest.tsx",
           "kind": "import-statement",
@@ -14652,6 +14698,11 @@
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "format": "esm"
@@ -14899,7 +14950,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-25Y7QR25.js",
+          "path": "dist/chunk-3RS665CV.js",
           "kind": "import-statement"
         }
       ],
@@ -14975,16 +15026,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-IBBAZRGB.js.map": {
+    "dist/HLSView-HMRFCBTS.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-IBBAZRGB.js": {
+    "dist/HLSView-HMRFCBTS.js": {
       "imports": [
         {
-          "path": "dist/chunk-25Y7QR25.js",
+          "path": "dist/chunk-3RS665CV.js",
           "kind": "import-statement"
         },
         {
@@ -15162,7 +15213,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-PFCSCJTH.css",
+      "cssBundle": "dist/HLSView-UZREPPDA.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15221,13 +15272,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-25Y7QR25.js.map": {
+    "dist/chunk-3RS665CV.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3439867
+      "bytes": 3442935
     },
-    "dist/chunk-25Y7QR25.js": {
+    "dist/chunk-3RS665CV.js": {
       "imports": [
         {
           "path": "react",
@@ -17700,7 +17751,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-IBBAZRGB.js",
+          "path": "dist/HLSView-HMRFCBTS.js",
           "kind": "dynamic-import"
         },
         {
@@ -18129,17 +18180,22 @@
           "external": true
         },
         {
-          "path": "react",
+          "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-sdk",
+          "path": "@100mslive/react-icons",
           "kind": "import-statement",
           "external": true
         },
         {
-          "path": "@100mslive/react-icons",
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
           "kind": "import-statement",
           "external": true
         },
@@ -18284,7 +18340,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17912
+          "bytesInOutput": 17940
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224289
@@ -19153,7 +19209,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
+        "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965890/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19298,28 +19354,31 @@
           "bytesInOutput": 27
         },
         "src/Diagnostics/Diagnostics.tsx": {
-          "bytesInOutput": 5593
+          "bytesInOutput": 6183
+        },
+        "src/Diagnostics/AudioTest.tsx": {
+          "bytesInOutput": 6444
         },
         "src/Diagnostics/components.tsx": {
-          "bytesInOutput": 2444
+          "bytesInOutput": 2027
         },
-        "src/Diagnostics/AudioTest.tsx": {
-          "bytesInOutput": 6270
+        "src/Diagnostics/DiagnosticsContext.ts": {
+          "bytesInOutput": 1076
         },
         "src/Diagnostics/DeviceSelector.jsx": {
           "bytesInOutput": 2155
         },
         "src/Diagnostics/BrowserTest.tsx": {
-          "bytesInOutput": 4380
+          "bytesInOutput": 4418
         },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 13489
+          "bytesInOutput": 13570
         },
         "src/Diagnostics/VideoTest.tsx": {
-          "bytesInOutput": 2577
+          "bytesInOutput": 2628
         }
       },
-      "bytes": 1424074
+      "bytes": 1425772
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19381,22 +19440,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
+        "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965e22/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
+        "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965890/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-PFCSCJTH.css.map": {
+    "dist/HLSView-UZREPPDA.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-PFCSCJTH.css": {
+    "dist/HLSView-UZREPPDA.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19450,10 +19509,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
+        "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965e22/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
+        "../../../../../../../tmp/tmp-2901-v3OIW4zyFLWA/19081d965890/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.15-alpha.2",
+  "version": "0.3.15-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.15-alpha.2",
+    "@100mslive/hls-player": "0.3.15-alpha.4",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.15-alpha.2",
-    "@100mslive/hms-whiteboard": "0.0.5-alpha.2",
-    "@100mslive/react-icons": "0.10.15-alpha.2",
-    "@100mslive/react-sdk": "0.10.15-alpha.2",
+    "@100mslive/hms-virtual-background": "1.13.15-alpha.4",
+    "@100mslive/hms-whiteboard": "0.0.5-alpha.4",
+    "@100mslive/react-icons": "0.10.15-alpha.4",
+    "@100mslive/react-sdk": "0.10.15-alpha.4",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -116,5 +116,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "da2cd3ce25b00c03fd1305ff2f151fcb5e0840e8"
+  "gitHead": "f7dd781ff1065f5b13e42d24f63b7ae74c2dac6b"
 }

package/src/Diagnostics/AudioTest.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   HMSException,
   selectDevices,
@@ -11,13 +11,14 @@ import {
 } from '@100mslive/react-sdk';
 import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
 import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { DiagnosticsContext, TestContainer, TestFooter } from './components';
+import { TestContainer, TestFooter } from './components';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Progress } from '../Progress';
 import { Text } from '../Text';
 // @ts-ignore: No implicit any
 import { DeviceSelector } from './DeviceSelector';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
 import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
 
@@ -25,8 +26,8 @@ const SelectContainer = ({ children }: { children: React.ReactNode }) => (
   <Box css={{ w: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
 );
 
-const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<Error | undefined>> }) => {
-  const { hmsDiagnostics } = useContext(DiagnosticsContext);
+const MicTest = ({ setError }: { setError: (err?: Error) => void }) => {
+  const { hmsDiagnostics } = useDiagnostics();
   const devices = useHMSStore(selectDevices);
   const [isRecording, setIsRecording] = useState(false);
   const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
@@ -142,11 +143,20 @@ const SpeakerTest = () => {
 };
 
 export const AudioTest = () => {
-  const { hmsDiagnostics } = useContext(DiagnosticsContext);
-  const [error, setError] = useState<Error | undefined>();
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
+  const [error, setErrorAlone] = useState<Error | undefined>();
+
+  const setError = useCallback(
+    (err?: Error) => {
+      updateStep(DiagnosticsStep.AUDIO, { hasFailed: !!err });
+      setErrorAlone(err);
+    },
+    [updateStep, setErrorAlone],
+  );
+
   useEffect(() => {
     hmsDiagnostics?.requestPermission({ audio: true }).catch(error => setError(error));
-  }, [hmsDiagnostics]);
+  }, [hmsDiagnostics, setError]);
 
   return (
     <>

package/src/Diagnostics/BrowserTest.tsx

@@ -1,8 +1,9 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { parsedUserAgent } from '@100mslive/react-sdk';
-import { DiagnosticsContext, TestContainer, TestFooter } from './components';
+import { TestContainer, TestFooter } from './components';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 const CMS_MEDIA_SERVER = 'https://storage.googleapis.com/100ms-cms-prod/';
 
@@ -102,15 +103,16 @@ const CheckDetails = ({ title, value, iconURL }: { title: string; value: string;
 );
 
 export const BrowserTest = () => {
-  const { hmsDiagnostics } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
   const [error, setError] = useState<Error | undefined>();
   useEffect(() => {
     try {
       hmsDiagnostics?.checkBrowserSupport();
     } catch (err) {
+      updateStep(DiagnosticsStep.BROWSER, { hasFailed: true });
       setError(err as Error);
     }
-  }, [hmsDiagnostics]);
+  }, [hmsDiagnostics, updateStep]);
   return (
     <>
       <TestContainer css={{ display: 'flex', gap: '$8', '@lg': { display: 'block' } }}>

package/src/Diagnostics/ConnectivityTest.tsx

@@ -1,12 +1,13 @@
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import { ConnectivityCheckResult, ConnectivityState, DiagnosticsRTCStats } from '@100mslive/react-sdk';
 import { CheckCircleIcon, CrossCircleIcon, EyeCloseIcon, EyeOpenIcon, LinkIcon } from '@100mslive/react-icons';
-import { DiagnosticsContext, TestContainer, TestFooter } from './components';
+import { TestContainer, TestFooter } from './components';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Loading } from '../Loading';
 import { formatBytes } from '../Stats';
 import { Text } from '../Text';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 const Regions = {
   in: 'India',
@@ -35,7 +36,7 @@ export const ConnectivityTestStepResult = ({
   success?: boolean;
   children: React.ReactNode;
 }) => {
-  const [hideDetails, setHideDetails] = useState(false);
+  const [hideDetails, setHideDetails] = useState(true);
 
   return (
     <Box css={{ my: '$10', p: '$10', r: '$1', bg: '$surface_bright' }}>
@@ -331,14 +332,14 @@ const RegionSelector = ({
 };
 
 export const ConnectivityTest = () => {
-  const { hmsDiagnostics, setConnectivityTested } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
   const [region, setRegion] = useState<string | undefined>(Object.keys(Regions)[0]);
   const [error, setError] = useState<Error | undefined>();
   const [progress, setProgress] = useState<ConnectivityState>();
   const [result, setResult] = useState<ConnectivityCheckResult | undefined>();
 
   const startTest = () => {
-    setConnectivityTested(false);
+    updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: false, isCompleted: false });
     setError(undefined);
     setResult(undefined);
     hmsDiagnostics
@@ -347,12 +348,13 @@ export const ConnectivityTest = () => {
           setProgress(state);
         },
         result => {
-          setConnectivityTested(true);
+          updateStep(DiagnosticsStep.CONNECTIVITY, { isCompleted: true });
           setResult(result);
         },
         region,
       )
       .catch(error => {
+        updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: true });
         setError(error);
       });
   };