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

package/src/Diagnostics/Diagnostics.tsx

@@ -1,35 +1,68 @@
-import React, { useContext, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { HMSRoomProvider, useHMSActions } from '@100mslive/react-sdk';
-import { CheckCircleIcon, ConnectivityIcon, GlobeIcon, MicOnIcon, VideoOnIcon } from '@100mslive/react-icons';
-import { DiagnosticsContext, DiagnosticsSteps } from './components';
+import {
+  CheckCircleIcon,
+  ConnectivityIcon,
+  CrossCircleIcon,
+  GlobeIcon,
+  MicOnIcon,
+  VideoOnIcon,
+} from '@100mslive/react-icons';
 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 {
+  DiagnosticsContext,
+  DiagnosticsStep,
+  DiagnosticsStepInfo,
+  initialSteps,
+  useDiagnostics,
+} from './DiagnosticsContext';
 import { VideoTest } from './VideoTest';
 
-const DiagnosticsStepIcon: Record<string, React.ReactNode> = {
-  video: <VideoOnIcon width="2rem" height="2rem" />,
-  audio: <MicOnIcon width="2rem" height="2rem" />,
-  browser: <GlobeIcon width="2rem" height="2rem" />,
-  connectivity: <ConnectivityIcon width="2rem" height="2rem" />,
+const DiagnosticsStepIcon: Record<DiagnosticsStep, React.ReactNode> = {
+  [DiagnosticsStep.VIDEO]: <VideoOnIcon width="2rem" height="2rem" />,
+  [DiagnosticsStep.AUDIO]: <MicOnIcon width="2rem" height="2rem" />,
+  [DiagnosticsStep.BROWSER]: <GlobeIcon width="2rem" height="2rem" />,
+  [DiagnosticsStep.CONNECTIVITY]: <ConnectivityIcon width="2rem" height="2rem" />,
 };
 
 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: '100%',
       '@lg': {
         p: '$12',
       },
+      overflowY: 'auto',
+      boxSizing: 'border-box',
+      '& *': {
+        boxSizing: 'border-box',
+      },
+      '::-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}
@@ -37,92 +70,99 @@ const Container = ({ children }: { children: React.ReactNode }) => (
 );
 
 const DiagnosticsStepTest = () => {
-  const { activeStep } = useContext(DiagnosticsContext);
+  const { activeStepIndex } = useDiagnostics();
 
   let TestComponent = () => <></>;
 
-  if (activeStep === 'audio') {
+  if (activeStepIndex === DiagnosticsStep.AUDIO) {
     TestComponent = AudioTest;
-  } else if (activeStep === 'video') {
+  } else if (activeStepIndex === DiagnosticsStep.VIDEO) {
     TestComponent = VideoTest;
-  } else if (activeStep === 'browser') {
+  } else if (activeStepIndex === DiagnosticsStep.BROWSER) {
     TestComponent = BrowserTest;
-  } else if (activeStep === 'connectivity') {
+  } else if (activeStepIndex === DiagnosticsStep.CONNECTIVITY) {
     TestComponent = ConnectivityTest;
   }
 
-  return <TestComponent key={activeStep} />;
+  return <TestComponent key={activeStepIndex} />;
 };
 
 const DiagnosticsStepHeader = () => {
-  const { activeStep } = useContext(DiagnosticsContext);
+  const { activeStepIndex, activeStep } = useDiagnostics();
   return (
     <Flex css={{ py: '$8', px: '$10', alignItems: 'center', borderBottom: '1px solid $border_default' }}>
-      <Text css={{ c: '$primary_bright', mt: '$xs' }}>{DiagnosticsStepIcon[activeStep]}</Text>
-      <Text css={{ fontSize: '$h6', ml: '$9' }}>{DiagnosticsSteps[activeStep]}</Text>
+      <Text css={{ c: '$primary_bright', mt: '$xs' }}>{DiagnosticsStepIcon[activeStepIndex]}</Text>
+      <Text css={{ fontSize: '$h6', ml: '$9' }}>{activeStep.name}</Text>
     </Flex>
   );
 };
 
-const DiagnosticsStep = () => {
+const DiagnosticsStepContainer = () => {
   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>
   );
 };
 
 const DiagnosticsStepsList = () => {
-  const { activeStep, connectivityTested } = useContext(DiagnosticsContext);
+  const { activeStepIndex, activeStep, steps } = useDiagnostics();
 
   return (
     <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      {Object.keys(DiagnosticsSteps).map(key => {
-        const keys = Object.keys(DiagnosticsSteps);
-        const activeStepIndex = keys.indexOf(activeStep);
-        const keyIndex = keys.indexOf(key);
-        const isStepCompleted = activeStepIndex > keyIndex || (activeStep === 'connectivity' && connectivityTested);
-
-        let color = '$on_primary_low';
-        if (activeStep === key) {
-          color = '$on_primary_high';
-        }
-        if (isStepCompleted) {
-          color = '$primary_bright';
-        }
-
-        return (
-          <Flex key={key} 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>
-        );
-      })}
+      {Object.keys(DiagnosticsStep)
+        .filter(key => !isNaN(Number(key)))
+        .map(key => {
+          const keyIndex = Number(key);
+          const step = steps[keyIndex as DiagnosticsStep];
+          const isStepCompleted = activeStepIndex > keyIndex || activeStep.isCompleted;
+
+          let color = '$on_primary_low';
+          let icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
+
+          if (activeStepIndex === keyIndex) {
+            color = '$on_primary_high';
+            icon = <Text css={{ c: color, fontSize: '1.75rem' }}>&bull;</Text>;
+          }
+          if (isStepCompleted) {
+            color = '$primary_bright';
+            icon = <CheckCircleIcon width="1rem" height="1rem" />;
+          }
+          if (step.hasFailed) {
+            color = '$alert_error_default';
+            icon = <CrossCircleIcon width="1rem" height="1rem" />;
+          }
+
+          return (
+            <Flex key={key} css={{ mb: '$10', c: color, gap: '$4', alignItems: 'center' }}>
+              {icon}
+              <Text css={{ c: color }}>{step.name}</Text>
+            </Flex>
+          );
+        })}
     </Box>
   );
 };
 
 const DiagnosticsProvider = () => {
   const actions = useHMSActions();
-  const [activeStep, setActiveStep] = useState(Object.keys(DiagnosticsSteps)[0]);
-  const [connectivityTested, setConnectivityTested] = useState(false);
+  const [activeStep, setActiveStep] = useState(0);
+  const [steps, setSteps] = useState(initialSteps);
   const diagnosticsRef = useRef(actions.initDiagnostics());
 
+  const updateStep = useCallback((step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => {
+    setSteps(prevSteps => ({ ...prevSteps, [step]: { ...prevSteps[step], ...value } }));
+  }, []);
+
   return (
     <DiagnosticsContext.Provider
       value={{
         hmsDiagnostics: diagnosticsRef.current,
-        activeStep,
+        activeStepIndex: activeStep,
         setActiveStep,
-        connectivityTested,
-        setConnectivityTested,
+        steps,
+        updateStep,
       }}
     >
       <Container>
@@ -132,7 +172,7 @@ const DiagnosticsProvider = () => {
         </Text>
         <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
           <DiagnosticsStepsList />
-          <DiagnosticsStep />
+          <DiagnosticsStepContainer />
         </Flex>
       </Container>
     </DiagnosticsContext.Provider>

package/src/Diagnostics/DiagnosticsContext.ts

@@ -0,0 +1,46 @@
+import React, { useContext } from 'react';
+import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
+
+export enum DiagnosticsStep {
+  BROWSER,
+  VIDEO,
+  AUDIO,
+  CONNECTIVITY,
+}
+
+export const initialSteps = {
+  [DiagnosticsStep.BROWSER]: { name: 'Browser Support' },
+  [DiagnosticsStep.VIDEO]: { name: 'Test Video' },
+  [DiagnosticsStep.AUDIO]: { name: 'Test Audio' },
+  [DiagnosticsStep.CONNECTIVITY]: { name: 'Connection Quality' },
+};
+
+export interface DiagnosticsStepInfo {
+  name: string;
+  hasFailed?: boolean;
+  isCompleted?: boolean;
+}
+
+export const DiagnosticsContext = React.createContext<{
+  hmsDiagnostics?: HMSDiagnosticsInterface;
+  activeStepIndex: DiagnosticsStep;
+  setActiveStep: React.Dispatch<React.SetStateAction<DiagnosticsStep>>;
+  steps: Record<DiagnosticsStep, DiagnosticsStepInfo>;
+  updateStep: (step: DiagnosticsStep, value: Omit<DiagnosticsStepInfo, 'name'>) => void;
+}>({
+  activeStepIndex: 0,
+  setActiveStep: () => {
+    return;
+  },
+  steps: initialSteps,
+  updateStep: () => {
+    return;
+  },
+});
+
+export const useDiagnostics = () => {
+  const context = useContext(DiagnosticsContext);
+  const activeStep = context.steps[context.activeStepIndex];
+
+  return { ...context, activeStep };
+};

package/src/Diagnostics/VideoTest.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   HMSException,
   selectDevices,
@@ -8,16 +8,17 @@ import {
 } from '@100mslive/react-sdk';
 import { VideoOnIcon } from '@100mslive/react-icons';
 import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
-import { DiagnosticsContext, TestContainer, TestFooter } from './components';
+import { TestContainer, TestFooter } from './components';
 import { Flex } from '../Layout';
 import { Text } from '../Text';
 import { Video } from '../Video';
 import { StyledVideoTile } from '../VideoTile';
 // @ts-ignore: No implicit any
 import { DeviceSelector } from './DeviceSelector';
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 export const VideoTest = () => {
-  const { hmsDiagnostics } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, updateStep } = useDiagnostics();
   const allDevices = useHMSStore(selectDevices);
   const { videoInput } = allDevices;
   const trackID = useHMSStore(selectLocalVideoTrackID);
@@ -25,8 +26,11 @@ export const VideoTest = () => {
   const [error, setError] = useState<HMSException | undefined>();
 
   useEffect(() => {
-    hmsDiagnostics?.startCameraCheck().catch(err => setError(err));
-  }, [hmsDiagnostics]);
+    hmsDiagnostics?.startCameraCheck().catch(err => {
+      updateStep(DiagnosticsStep.VIDEO, { hasFailed: true });
+      setError(err);
+    });
+  }, [hmsDiagnostics, updateStep]);
 
   return (
     <>

package/src/Diagnostics/components.tsx

@@ -1,33 +1,9 @@
-import React, { useContext } from 'react';
-import { HMSDiagnosticsInterface } from '@100mslive/react-sdk';
+import React from 'react';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Text } from '../Text';
 import { CSS } from '../Theme';
-
-export const DiagnosticsSteps: Record<string, string> = {
-  browser: 'Browser Support',
-  video: 'Test Video',
-  audio: 'Test Audio',
-  connectivity: 'Connection Quality',
-};
-
-export const DiagnosticsContext = React.createContext<{
-  hmsDiagnostics?: HMSDiagnosticsInterface;
-  activeStep: string;
-  setActiveStep: React.Dispatch<React.SetStateAction<string>>;
-  connectivityTested: boolean;
-  setConnectivityTested: React.Dispatch<React.SetStateAction<boolean>>;
-}>({
-  activeStep: 'video',
-  setActiveStep: () => {
-    return;
-  },
-  connectivityTested: false,
-  setConnectivityTested: () => {
-    return;
-  },
-});
+import { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
 
 export const TestContainer = ({ css, children }: { css?: CSS; children: React.ReactNode }) => {
   return <Box css={{ p: '$10', ...css }}>{children}</Box>;
@@ -42,19 +18,18 @@ export const TestFooter = ({
   error?: Error;
   children?: React.ReactNode;
 }) => {
-  const { hmsDiagnostics, activeStep, setActiveStep } = useContext(DiagnosticsContext);
+  const { hmsDiagnostics, activeStepIndex: activeStep, setActiveStep } = useDiagnostics();
 
   const onNextStep = () => {
-    if (activeStep === 'audio') {
+    if (activeStep === DiagnosticsStep.AUDIO) {
       hmsDiagnostics?.stopMicCheck();
-    } else if (activeStep === 'video') {
+    } else if (activeStep === DiagnosticsStep.VIDEO) {
       hmsDiagnostics?.stopCameraCheck();
-    } else if (activeStep === 'connectivity') {
+    } else if (activeStep === DiagnosticsStep.CONNECTIVITY) {
       hmsDiagnostics?.stopConnectivityCheck();
     }
 
-    const keys = Object.keys(DiagnosticsSteps);
-    setActiveStep(step => keys[keys.indexOf(step) + 1]);
+    setActiveStep(step => step + 1);
   };
 
   return (
@@ -62,8 +37,6 @@ export const TestFooter = ({
       css={{
         py: '$8',
         px: '$10',
-        position: 'sticky',
-        bottom: '0',
         background: '$background_dim',
         justifyContent: 'space-between',
         alignItems: 'center',