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

package/dist/meta.esbuild.json

@@ -4951,7 +4951,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 356541,
+      "bytes": 356558,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10943,7 +10943,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab4d2/tldraw.css": {
+    "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -10993,7 +10993,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab321/index.css": {
+    "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11002,7 +11002,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab4d2/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11077,7 +11077,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab321/index.css",
+          "path": "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -14100,7 +14100,7 @@
       "format": "esm"
     },
     "src/Diagnostics/components.tsx": {
-      "bytes": 2773,
+      "bytes": 2724,
       "imports": [
         {
           "path": "react",
@@ -14469,7 +14469,7 @@
       "format": "esm"
     },
     "src/Diagnostics/ConnectivityTest.tsx": {
-      "bytes": 11342,
+      "bytes": 11975,
       "imports": [
         {
           "path": "react",
@@ -14591,7 +14591,7 @@
       "format": "esm"
     },
     "src/Diagnostics/Diagnostics.tsx": {
-      "bytes": 4759,
+      "bytes": 5171,
       "imports": [
         {
           "path": "react",
@@ -14899,7 +14899,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-J3IYEHND.js",
+          "path": "dist/chunk-25Y7QR25.js",
           "kind": "import-statement"
         }
       ],
@@ -14975,16 +14975,16 @@
       "inputs": {},
       "bytes": 1882
     },
-    "dist/HLSView-O5Q56UX5.js.map": {
+    "dist/HLSView-IBBAZRGB.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100275
     },
-    "dist/HLSView-O5Q56UX5.js": {
+    "dist/HLSView-IBBAZRGB.js": {
       "imports": [
         {
-          "path": "dist/chunk-J3IYEHND.js",
+          "path": "dist/chunk-25Y7QR25.js",
           "kind": "import-statement"
         },
         {
@@ -15162,7 +15162,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-FF3HBXLE.css",
+      "cssBundle": "dist/HLSView-PFCSCJTH.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 27671
@@ -15221,13 +15221,13 @@
       },
       "bytes": 61702
     },
-    "dist/chunk-J3IYEHND.js.map": {
+    "dist/chunk-25Y7QR25.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3438137
+      "bytes": 3439867
     },
-    "dist/chunk-J3IYEHND.js": {
+    "dist/chunk-25Y7QR25.js": {
       "imports": [
         {
           "path": "react",
@@ -17700,7 +17700,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-O5Q56UX5.js",
+          "path": "dist/HLSView-IBBAZRGB.js",
           "kind": "dynamic-import"
         },
         {
@@ -18284,7 +18284,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17933
+          "bytesInOutput": 17912
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224289
@@ -19153,7 +19153,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab321/index.css": {
+        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19298,10 +19298,10 @@
           "bytesInOutput": 27
         },
         "src/Diagnostics/Diagnostics.tsx": {
-          "bytesInOutput": 5206
+          "bytesInOutput": 5593
         },
         "src/Diagnostics/components.tsx": {
-          "bytesInOutput": 2493
+          "bytesInOutput": 2444
         },
         "src/Diagnostics/AudioTest.tsx": {
           "bytesInOutput": 6270
@@ -19313,13 +19313,13 @@
           "bytesInOutput": 4380
         },
         "src/Diagnostics/ConnectivityTest.tsx": {
-          "bytesInOutput": 12703
+          "bytesInOutput": 13489
         },
         "src/Diagnostics/VideoTest.tsx": {
           "bytesInOutput": 2577
         }
       },
-      "bytes": 1422971
+      "bytes": 1424074
     },
     "dist/index.css.map": {
       "imports": [],
@@ -19381,22 +19381,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab4d2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab321/index.css": {
+        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-FF3HBXLE.css.map": {
+    "dist/HLSView-PFCSCJTH.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-FF3HBXLE.css": {
+    "dist/HLSView-PFCSCJTH.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -19450,10 +19450,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab4d2/tldraw.css": {
+        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fbfb3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2786-jCaV1R4jH2Cj/1906da2ab321/index.css": {
+        "../../../../../../../tmp/tmp-2786-nYumfKEcA2YY/1906ec3fb880/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

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

package/src/Diagnostics/ConnectivityTest.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import { ConnectivityCheckResult, ConnectivityState, DiagnosticsRTCStats } from '@100mslive/react-sdk';
-import { CheckCircleIcon, CrossCircleIcon, LinkIcon } from '@100mslive/react-icons';
+import { CheckCircleIcon, CrossCircleIcon, EyeCloseIcon, EyeOpenIcon, LinkIcon } from '@100mslive/react-icons';
 import { DiagnosticsContext, TestContainer, TestFooter } from './components';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
@@ -26,13 +26,17 @@ const ConnectivityStateMessage = {
 
 export const ConnectivityTestStepResult = ({
   title,
+  status = 'Connected',
   success,
   children,
 }: {
   title: string;
+  status?: string;
   success?: boolean;
   children: React.ReactNode;
 }) => {
+  const [hideDetails, setHideDetails] = useState(false);
+
   return (
     <Box css={{ my: '$10', p: '$10', r: '$1', bg: '$surface_bright' }}>
       <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
@@ -42,7 +46,7 @@ export const ConnectivityTestStepResult = ({
             <CheckCircleIcon width="1.5rem" height="1.5rem" />
           </Text>
           <Text variant="lg" css={{ ml: '$4' }}>
-            Connected
+            {status}
           </Text>
         </Flex>
       ) : (
@@ -55,7 +59,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 +153,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 +171,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)} />

package/src/Diagnostics/Diagnostics.tsx

@@ -21,15 +21,31 @@ const Container = ({ children }: { children: React.ReactNode }) => (
   <Box
     css={{
       px: '120px',
-      py: '120px',
+      pt: '120px',
+      pb: '24px',
       bg: '$background_dim',
       lineHeight: '1.5',
       '-webkit-text-size-adjust': '100%',
       position: 'relative',
-      minHeight: '100vh',
+      h: `calc(100% - 108px)`,
       '@lg': {
         p: '$12',
       },
+      overflowY: 'auto',
+      '::-webkit-scrollbar-track': {
+        WebkitBoxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+        boxShadow: 'inset 0 0 6px rgba(0, 0, 0, 0.3)',
+        backgroundColor: 'transparent',
+      },
+      '::-webkit-scrollbar': {
+        width: '6px',
+        height: '6px',
+        backgroundColor: 'transparent',
+      },
+      '::-webkit-scrollbar-thumb': {
+        backgroundColor: '#657080',
+        borderRadius: '5px',
+      },
     }}
   >
     {children}
@@ -68,9 +84,7 @@ const DiagnosticsStep = () => {
   return (
     <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', maxWidth: '65rem', '@lg': { w: '100%' } }}>
       <DiagnosticsStepHeader />
-      <Box css={{ maxHeight: '55vh', overflowY: 'auto' }}>
-        <DiagnosticsStepTest />
-      </Box>
+      <DiagnosticsStepTest />
     </Box>
   );
 };

package/src/Diagnostics/components.tsx

@@ -62,8 +62,6 @@ export const TestFooter = ({
       css={{
         py: '$8',
         px: '$10',
-        position: 'sticky',
-        bottom: '0',
         background: '$background_dim',
         justifyContent: 'space-between',
         alignItems: 'center',