@100mslive/roomkit-react 0.3.15-alpha.1 → 0.3.15-alpha.3

package/dist/meta.esbuild.json

@@ -10943,7 +10943,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db139552/tldraw.css": {
+    "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686d5b2/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -10993,7 +10993,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db138f00/index.css": {
+    "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686ce80/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11002,7 +11002,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db139552/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686d5b2/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11077,7 +11077,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db138f00/index.css",
+          "path": "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686ce80/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -14099,8 +14099,8 @@
       ],
       "format": "esm"
     },
-    "src/Diagnostics/components.tsx": {
-      "bytes": 2773,
+    "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": 11342,
+      "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": 4759,
+      "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-MTS2LMGT.js",
+          "path": "dist/chunk-BVSFQTDX.js",
           "kind": "import-statement"
         }
       ],
@@ -14975,16 +15026,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-33JUAQ33.js.map": {
+    "dist/HLSView-B4LXRW3N.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-33JUAQ33.js": {
+    "dist/HLSView-B4LXRW3N.js": {
       "imports": [
         {
-          "path": "dist/chunk-MTS2LMGT.js",
+          "path": "dist/chunk-BVSFQTDX.js",
           "kind": "import-statement"
         },
         {
@@ -15162,7 +15213,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-KKS3ZEYM.css",
+      "cssBundle": "dist/HLSView-7HFHBF6S.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15221,13 +15272,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-MTS2LMGT.js.map": {
+    "dist/chunk-BVSFQTDX.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3438128
+      "bytes": 3442830
     },
-    "dist/chunk-MTS2LMGT.js": {
+    "dist/chunk-BVSFQTDX.js": {
       "imports": [
         {
           "path": "react",
@@ -17700,7 +17751,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-33JUAQ33.js",
+          "path": "dist/HLSView-B4LXRW3N.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": 17911
+          "bytesInOutput": 17931
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224289
@@ -19153,7 +19209,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db138f00/index.css": {
+        "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686ce80/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19298,28 +19354,31 @@
           "bytesInOutput": 27
         },
         "src/Diagnostics/Diagnostics.tsx": {
-          "bytesInOutput": 5206
+          "bytesInOutput": 6183
+        },
+        "src/Diagnostics/AudioTest.tsx": {
+          "bytesInOutput": 6444
         },
         "src/Diagnostics/components.tsx": {
-          "bytesInOutput": 2493
+          "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": 12703
+          "bytesInOutput": 13570
         },
         "src/Diagnostics/VideoTest.tsx": {
-          "bytesInOutput": 2577
+          "bytesInOutput": 2628
         }
       },
-      "bytes": 1422949
+      "bytes": 1425763
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19381,22 +19440,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db139552/tldraw.css": {
+        "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686d5b2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db138f00/index.css": {
+        "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686ce80/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-KKS3ZEYM.css.map": {
+    "dist/HLSView-7HFHBF6S.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-KKS3ZEYM.css": {
+    "dist/HLSView-7HFHBF6S.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19450,10 +19509,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db139552/tldraw.css": {
+        "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686d5b2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2781-YBKA2awaceXN/1906db138f00/index.css": {
+        "../../../../../../../tmp/tmp-2795-Q1b2Apl72oYu/19073686ce80/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.15-alpha.1",
+  "version": "0.3.15-alpha.3",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.15-alpha.1",
+    "@100mslive/hls-player": "0.3.15-alpha.3",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.15-alpha.1",
-    "@100mslive/hms-whiteboard": "0.0.5-alpha.1",
-    "@100mslive/react-icons": "0.10.15-alpha.1",
-    "@100mslive/react-sdk": "0.10.15-alpha.1",
+    "@100mslive/hms-virtual-background": "1.13.15-alpha.3",
+    "@100mslive/hms-whiteboard": "0.0.5-alpha.3",
+    "@100mslive/react-icons": "0.10.15-alpha.3",
+    "@100mslive/react-sdk": "0.10.15-alpha.3",
     "@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": "d841ae70e97bfd176bcfc86b44f6ad939832fe13"
+  "gitHead": "810df7bc6d978b45e2c3052343692e982bad600a"
 }

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, LinkIcon } from '@100mslive/react-icons';
-import { DiagnosticsContext, TestContainer, TestFooter } from './components';
+import { CheckCircleIcon, CrossCircleIcon, EyeCloseIcon, EyeOpenIcon, LinkIcon } from '@100mslive/react-icons';
+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',
@@ -26,13 +27,17 @@ const ConnectivityStateMessage = {
 
 export const ConnectivityTestStepResult = ({
   title,
+  status = 'Connected',
   success,
   children,
 }: {
   title: string;
+  status?: string;
   success?: boolean;
   children: React.ReactNode;
 }) => {
+  const [hideDetails, setHideDetails] = useState(true);
+
   return (
     <Box css={{ my: '$10', p: '$10', r: '$1', bg: '$surface_bright' }}>
       <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
@@ -42,7 +47,7 @@ export const ConnectivityTestStepResult = ({
             <CheckCircleIcon width="1.5rem" height="1.5rem" />
           </Text>
           <Text variant="lg" css={{ ml: '$4' }}>
-            Connected
+            {status}
           </Text>
         </Flex>
       ) : (
@@ -55,7 +60,25 @@ export const ConnectivityTestStepResult = ({
           </Text>
         </Flex>
       )}
-      <Box>{children}</Box>
+      <Flex
+        onClick={() => setHideDetails(!hideDetails)}
+        align="center"
+        gap="2"
+        css={{
+          color: '$primary_bright',
+        }}
+      >
+        {hideDetails ? <EyeOpenIcon /> : <EyeCloseIcon />}
+        <Text
+          variant="caption"
+          css={{
+            color: '$primary_bright',
+          }}
+        >
+          {hideDetails ? 'View' : 'Hide'} detailed information
+        </Text>
+      </Flex>
+      {!hideDetails ? <Box>{children}</Box> : null}
     </Box>
   );
 };
@@ -131,7 +154,7 @@ const SignallingResult = ({ result }: { result?: ConnectivityCheckResult['signal
 
 const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
   return (
-    <ConnectivityTestStepResult title="Audio" success={!!stats?.bytesSent}>
+    <ConnectivityTestStepResult title="Audio" status="Received" success={!!stats?.bytesSent}>
       {stats && (
         <Flex css={{ flexWrap: 'wrap' }}>
           <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
@@ -149,7 +172,7 @@ const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
 
 const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
   return (
-    <ConnectivityTestStepResult title="Video" success={!!stats?.bytesSent}>
+    <ConnectivityTestStepResult title="Video" status="Received" success={!!stats?.bytesSent}>
       {stats && (
         <Flex css={{ flexWrap: 'wrap' }}>
           <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
@@ -309,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
@@ -325,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);
       });
   };