@100mslive/roomkit-react 0.3.14-alpha.3 → 0.3.14-alpha.4

package/dist/meta.esbuild.json

@@ -4951,7 +4951,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 355115,
+      "bytes": 355009,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10974,7 +10974,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2db0342/tldraw.css": {
+    "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/190300299863/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11024,7 +11024,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2dafd40/index.css": {
+    "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/1903002989c0/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11033,7 +11033,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2db0342/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/190300299863/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11108,7 +11108,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2dafd40/index.css",
+          "path": "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/1903002989c0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12312,7 +12312,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Header/common.jsx": {
-      "bytes": 5673,
+      "bytes": 5819,
       "imports": [
         {
           "path": "react",
@@ -14147,7 +14147,7 @@
       "format": "esm"
     },
     "src/Diagnostics/components.tsx": {
-      "bytes": 2320,
+      "bytes": 2317,
       "imports": [
         {
           "path": "react",
@@ -14479,8 +14479,49 @@
       ],
       "format": "esm"
     },
+    "src/Diagnostics/BrowserTest.tsx": {
+      "bytes": 4051,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "src/Diagnostics/components.tsx",
+          "kind": "import-statement",
+          "original": "./components"
+        },
+        {
+          "path": "src/Layout/index.tsx",
+          "kind": "import-statement",
+          "original": "../Layout"
+        },
+        {
+          "path": "src/Text/index.tsx",
+          "kind": "import-statement",
+          "original": "../Text"
+        },
+        {
+          "path": "src/Diagnostics/hms.ts",
+          "kind": "import-statement",
+          "original": "./hms"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
     "src/Diagnostics/ConnectivityTest.tsx": {
-      "bytes": 11095,
+      "bytes": 11149,
       "imports": [
         {
           "path": "react",
@@ -14607,7 +14648,7 @@
       "format": "esm"
     },
     "src/Diagnostics/Diagnostics.tsx": {
-      "bytes": 3662,
+      "bytes": 4440,
       "imports": [
         {
           "path": "react",
@@ -14649,6 +14690,11 @@
           "kind": "import-statement",
           "original": "./AudioTest"
         },
+        {
+          "path": "src/Diagnostics/BrowserTest.tsx",
+          "kind": "import-statement",
+          "original": "./BrowserTest"
+        },
         {
           "path": "src/Diagnostics/ConnectivityTest.tsx",
           "kind": "import-statement",
@@ -14915,7 +14961,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FVNUIIBK.js",
+          "path": "dist/chunk-MBMF75ZJ.js",
           "kind": "import-statement"
         }
       ],
@@ -14991,16 +15037,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-G5WFG7B4.js.map": {
+    "dist/HLSView-PALIXUNG.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-G5WFG7B4.js": {
+    "dist/HLSView-PALIXUNG.js": {
       "imports": [
         {
-          "path": "dist/chunk-FVNUIIBK.js",
+          "path": "dist/chunk-MBMF75ZJ.js",
           "kind": "import-statement"
         },
         {
@@ -15178,7 +15224,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-RXINQ54M.css",
+      "cssBundle": "dist/HLSView-5DK2ZOZY.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15237,13 +15283,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-FVNUIIBK.js.map": {
+    "dist/chunk-MBMF75ZJ.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3880414
+      "bytes": 3889079
     },
-    "dist/chunk-FVNUIIBK.js": {
+    "dist/chunk-MBMF75ZJ.js": {
       "imports": [
         {
           "path": "react",
@@ -17726,7 +17772,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-G5WFG7B4.js",
+          "path": "dist/HLSView-PALIXUNG.js",
           "kind": "dynamic-import"
         },
         {
@@ -18184,6 +18230,16 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-icons",
           "kind": "import-statement",
@@ -18300,7 +18356,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17865
+          "bytesInOutput": 17889
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224414
@@ -18783,7 +18839,7 @@
           "bytesInOutput": 9484
         },
         "../hms-video-store/dist/index.js": {
-          "bytesInOutput": 457631
+          "bytesInOutput": 457464
         },
         "../../node_modules/reselect/es/index.js": {
           "bytesInOutput": 2550
@@ -19181,7 +19237,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2797
         },
-        "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2dafd40/index.css": {
+        "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/1903002989c0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19209,7 +19265,7 @@
           "bytesInOutput": 1607
         },
         "src/Prebuilt/components/Header/common.jsx": {
-          "bytesInOutput": 6077
+          "bytesInOutput": 6265
         },
         "src/Prebuilt/components/PreviousRoleInMetadata.tsx": {
           "bytesInOutput": 754
@@ -19326,10 +19382,10 @@
           "bytesInOutput": 27
         },
         "src/Diagnostics/Diagnostics.tsx": {
-          "bytesInOutput": 3946
+          "bytesInOutput": 4678
         },
         "src/Diagnostics/components.tsx": {
-          "bytesInOutput": 2112
+          "bytesInOutput": 2109
         },
         "src/Diagnostics/hms.ts": {
           "bytesInOutput": 237
@@ -19340,14 +19396,17 @@
         "src/Diagnostics/DeviceSelector.jsx": {
           "bytesInOutput": 2155
         },
+        "src/Diagnostics/BrowserTest.tsx": {
+          "bytesInOutput": 4041
+        },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 12446
+          "bytesInOutput": 12447
         },
         "src/Diagnostics/VideoTest.tsx": {
           "bytesInOutput": 2265
         }
       },
-      "bytes": 1843475
+      "bytes": 1848327
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19409,22 +19468,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2db0342/tldraw.css": {
+        "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/190300299863/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2dafd40/index.css": {
+        "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/1903002989c0/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-RXINQ54M.css.map": {
+    "dist/HLSView-5DK2ZOZY.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-RXINQ54M.css": {
+    "dist/HLSView-5DK2ZOZY.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19478,10 +19537,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2db0342/tldraw.css": {
+        "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/190300299863/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2808-yiHi8dVmt1Es/1902f2dafd40/index.css": {
+        "../../../../../../../tmp/tmp-2775-z50BoQ6b5DoC/1903002989c0/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.14-alpha.3",
+  "version": "0.3.14-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.14-alpha.3",
+    "@100mslive/hls-player": "0.3.14-alpha.4",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.14-alpha.3",
-    "@100mslive/hms-whiteboard": "0.0.4-alpha.3",
-    "@100mslive/react-icons": "0.10.14-alpha.3",
-    "@100mslive/react-sdk": "0.10.14-alpha.3",
+    "@100mslive/hms-virtual-background": "1.13.14-alpha.4",
+    "@100mslive/hms-whiteboard": "0.0.4-alpha.4",
+    "@100mslive/react-icons": "0.10.14-alpha.4",
+    "@100mslive/react-sdk": "0.10.14-alpha.4",
     "@100mslive/types-prebuilt": "0.12.9",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "2f240d7e6b687be3ead9f9fb40eb5a8f538a4e09"
+  "gitHead": "870d07094ed80ee2fefe344a743b4c463b046ccb"
 }

package/src/Diagnostics/BrowserTest.tsx

@@ -0,0 +1,134 @@
+import React, { useEffect, useState } from 'react';
+import { parsedUserAgent } from '@100mslive/react-sdk';
+import { TestContainer, TestFooter } from './components';
+import { Box, Flex } from '../Layout';
+import { Text } from '../Text';
+import { hmsDiagnostics } from './hms';
+
+const CMS_MEDIA_SERVER = 'https://storage.googleapis.com/100ms-cms-prod/';
+
+export const operatingSystemIconInfo = {
+  tizen: {
+    key: 'tizen',
+    val: 'Tizen',
+    icon: `${CMS_MEDIA_SERVER}cms/Tizen_b99350214e/Tizen_b99350214e.svg`,
+  },
+  'mac os': {
+    key: 'macos',
+    val: 'Mac OS',
+    icon: `${CMS_MEDIA_SERVER}cms/mac_OS_804456afd8/mac_OS_804456afd8.png`,
+  },
+  windows: {
+    key: 'windows',
+    val: 'Windows',
+    icon: `${CMS_MEDIA_SERVER}cms/Windows_fdfe6749b6/Windows_fdfe6749b6.svg`,
+  },
+  linux: {
+    key: 'linux',
+    val: 'Linux',
+    icon: `${CMS_MEDIA_SERVER}cms/Linux_31f8353a2e/Linux_31f8353a2e.svg`,
+  },
+  chromium: {
+    key: 'chromium',
+    val: 'Chromium',
+    icon: `${CMS_MEDIA_SERVER}cms/Chromium_3df17710bd/Chromium_3df17710bd.svg`,
+  },
+  ubuntu: {
+    key: 'ubuntu',
+    val: 'Ubuntu',
+    icon: `${CMS_MEDIA_SERVER}cms/Ubuntu_966dd923c5/Ubuntu_966dd923c5.svg`,
+  },
+  ios: {
+    key: 'ios',
+    val: 'iOS',
+    icon: `${CMS_MEDIA_SERVER}cms/i_OS_3cdc9d9b71/i_OS_3cdc9d9b71.svg`,
+  },
+  android: {
+    key: 'android',
+    val: 'Android',
+    icon: `${CMS_MEDIA_SERVER}cms/Android_49dcfdc934/Android_49dcfdc934.svg`,
+  },
+};
+
+export const browserTypeIconInfo = {
+  brave: {
+    key: 'brave',
+    val: 'Brave',
+    icon: `${CMS_MEDIA_SERVER}cms/Brave_7e66131f09/Brave_7e66131f09.svg`,
+  },
+  chrome: {
+    key: 'chrome',
+    val: 'Chrome',
+    icon: `${CMS_MEDIA_SERVER}cms/Chrome_7bf77fbdd7/Chrome_7bf77fbdd7.svg`,
+  },
+  firefox: {
+    key: 'firefox',
+    val: 'Firefox',
+    icon: `${CMS_MEDIA_SERVER}cms/Firefox_30f3976fb8/Firefox_30f3976fb8.svg`,
+  },
+  safari: {
+    key: 'safari',
+    val: 'Safari',
+    icon: `${CMS_MEDIA_SERVER}cms/Safari_254e74ed94/Safari_254e74ed94.svg`,
+  },
+  edge: {
+    key: 'edge',
+    val: 'Edge',
+    icon: `${CMS_MEDIA_SERVER}cms/Edge_23add4a83f/Edge_23add4a83f.svg`,
+  },
+  opera: {
+    key: 'opera',
+    val: 'Opera',
+    icon: `${CMS_MEDIA_SERVER}cms/Opera_0f3bf4eb19/Opera_0f3bf4eb19.svg`,
+  },
+};
+
+const CheckDetails = ({ title, value, iconURL }: { title: string; value: string; iconURL?: string }) => (
+  <Box css={{ w: '100%', my: '$10', p: '$10', r: '$1', bg: '$surface_default', '@lg': { w: 'auto' } }}>
+    <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
+    <Flex align="center">
+      {iconURL && (
+        <Box css={{ size: '2rem', r: '$round', bg: '$surface_brighter' }}>
+          <img style={{ objectFit: 'contain', width: '2rem' }} src={iconURL} alt={value} />
+        </Box>
+      )}
+      <Text css={{ ml: '$4' }}>{value}</Text>
+    </Flex>
+  </Box>
+);
+
+export const BrowserTest = () => {
+  const [error, setError] = useState<Error | undefined>();
+  useEffect(() => {
+    try {
+      hmsDiagnostics.checkBrowserSupport();
+    } catch (err) {
+      setError(err as Error);
+    }
+  }, []);
+  return (
+    <>
+      <TestContainer css={{ display: 'flex', gap: '$8', '@lg': { display: 'block' } }}>
+        <CheckDetails
+          title="Browser"
+          iconURL={
+            parsedUserAgent.getBrowser().name &&
+            browserTypeIconInfo[parsedUserAgent.getBrowser().name?.toLowerCase() as keyof typeof browserTypeIconInfo]
+              .icon
+          }
+          value={`${parsedUserAgent.getBrowser().name} ${parsedUserAgent.getBrowser().version}`}
+        />
+        <CheckDetails
+          title="Operating system"
+          iconURL={
+            parsedUserAgent.getOS().name &&
+            operatingSystemIconInfo[parsedUserAgent.getOS().name?.toLowerCase() as keyof typeof operatingSystemIconInfo]
+              .icon
+          }
+          value={`${parsedUserAgent.getOS().name} ${parsedUserAgent.getOS().version}`}
+        />
+      </TestContainer>
+      <TestFooter error={error} ctaText="Is your device information correct?" />
+    </>
+  );
+};

package/src/Diagnostics/ConnectivityTest.tsx

@@ -218,6 +218,8 @@ const ConnectivityTestReport = ({
   }
 
   if (result) {
+    // for debugging and quick view of results
+    console.log(result);
     return (
       <>
         <TestContainer>
@@ -232,7 +234,7 @@ const ConnectivityTestReport = ({
     );
   }
 
-  if (progress) {
+  if (progress !== undefined) {
     return (
       <TestContainer css={{ textAlign: 'center' }}>
         <Text css={{ c: '$primary_bright' }}>
@@ -315,7 +317,6 @@ export const ConnectivityTest = () => {
 
   const startTest = () => {
     setError(undefined);
-    setProgress(ConnectivityState.STARTING);
     setResult(undefined);
     hmsDiagnostics
       .startConnectivityCheck(
@@ -337,7 +338,7 @@ export const ConnectivityTest = () => {
       <RegionSelector
         region={region}
         setRegion={setRegion}
-        startTest={!progress || progress === ConnectivityState.COMPLETED ? startTest : undefined}
+        startTest={progress === undefined || progress === ConnectivityState.COMPLETED ? startTest : undefined}
       />
       <ConnectivityTestReport error={error} result={result} progress={progress} startTest={startTest} />
     </>

package/src/Diagnostics/Diagnostics.tsx

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import { HMSRoomProvider } from '@100mslive/react-sdk';
-import { ConnectivityIcon, GlobeIcon, MicOnIcon, VideoOnIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon, ConnectivityIcon, GlobeIcon, MicOnIcon, VideoOnIcon } from '@100mslive/react-icons';
 import { DiagnosticsContext, DiagnosticsSteps } from './components';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
 import { HMSThemeProvider } from '../Theme';
 import { AudioTest } from './AudioTest';
+import { BrowserTest } from './BrowserTest';
 import { ConnectivityTest } from './ConnectivityTest';
 import { hmsActions, hmsNotifications, hmsStats, hmsStore } from './hms';
 import { VideoTest } from './VideoTest';
@@ -45,6 +46,8 @@ const DiagnosticsStepTest = () => {
     TestComponent = AudioTest;
   } else if (activeStep === 'video') {
     TestComponent = VideoTest;
+  } else if (activeStep === 'browser') {
+    TestComponent = BrowserTest;
   } else if (activeStep === 'connectivity') {
     TestComponent = ConnectivityTest;
   }
@@ -66,7 +69,9 @@ const DiagnosticsStep = () => {
   return (
     <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', '@lg': { w: '100%' } }}>
       <DiagnosticsStepHeader />
-      <DiagnosticsStepTest />
+      <Box css={{ maxHeight: '55vh', overflowY: 'auto' }}>
+        <DiagnosticsStepTest />
+      </Box>
     </Box>
   );
 };
@@ -76,15 +81,31 @@ const DiagnosticsStepsList = () => {
 
   return (
     <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      <ul>
-        {Object.keys(DiagnosticsSteps).map(key => (
-          <li key={key}>
-            <Text variant="md" css={{ mb: '$10', c: activeStep === key ? '$on_primary_high' : '$on_primary_low' }}>
-              {DiagnosticsSteps[key]}
-            </Text>
-          </li>
-        ))}
-      </ul>
+      {Object.keys(DiagnosticsSteps).map(key => {
+        const keys = Object.keys(DiagnosticsSteps);
+        const activeStepIndex = keys.indexOf(activeStep);
+        const keyIndex = keys.indexOf(key);
+        const isStepCompleted = activeStepIndex > keyIndex;
+
+        let color = '$on_primary_low';
+        if (isStepCompleted) {
+          color = '$primary_bright';
+        }
+        if (activeStep === key) {
+          color = '$on_primary_high';
+        }
+
+        return (
+          <Flex css={{ mb: '$10', c: color, gap: '$4', alignItems: 'center' }}>
+            {isStepCompleted ? (
+              <CheckCircleIcon width="1rem" height="1rem" />
+            ) : (
+              <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>
+            )}
+            <Text css={{ c: color }}>{DiagnosticsSteps[key]}</Text>
+          </Flex>
+        );
+      })}
     </Box>
   );
 };

package/src/Diagnostics/components.tsx

@@ -6,9 +6,9 @@ import { CSS } from '../Theme';
 import { hmsDiagnostics } from './hms';
 
 export const DiagnosticsSteps: Record<string, string> = {
+  browser: 'Browser Support',
   video: 'Test Video',
   audio: 'Test Audio',
-  // browser: 'Browser Support',
   connectivity: 'Connection Quality',
 };
 

package/src/Prebuilt/components/Header/common.jsx

@@ -15,6 +15,7 @@ import {
   CrossIcon,
   HeadphonesIcon,
   SpeakerIcon,
+  TelePhoneIcon,
 } from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { Label } from '../../../Label';
@@ -82,6 +83,8 @@ export const AudioActions = () => {
     AudioIcon = <BluetoothIcon />;
   } else if (currentSelection && currentSelection.label.toLowerCase().includes('wired')) {
     AudioIcon = <HeadphonesIcon />;
+  } else if (currentSelection && currentSelection.label.toLowerCase().includes('earpiece')) {
+    AudioIcon = <TelePhoneIcon />;
   }
   return (
     <AudioSelectionSheet