@100mslive/roomkit-react 0.3.14-alpha.0 → 0.3.14-alpha.10

package/src/Diagnostics/ConnectivityTest.tsx

@@ -0,0 +1,359 @@
+import React, { useContext, 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 { Button } from '../Button';
+import { Box, Flex } from '../Layout';
+import { Loading } from '../Loading';
+import { formatBytes } from '../Stats';
+import { Text } from '../Text';
+import { hmsDiagnostics } from './hms';
+
+const Regions = {
+  in: 'India',
+  eu: 'Europe',
+  us: 'United States',
+};
+
+const ConnectivityStateMessage = {
+  [ConnectivityState.STARTING]: 'Fetching Init',
+  [ConnectivityState.INIT_FETCHED]: 'Connecting to signal server',
+  [ConnectivityState.SIGNAL_CONNECTED]: 'Establishing ICE connection',
+  [ConnectivityState.ICE_ESTABLISHED]: 'Capturing Media',
+  [ConnectivityState.MEDIA_CAPTURED]: 'Publishing Media',
+  [ConnectivityState.MEDIA_PUBLISHED]: 'Finishing Up',
+  [ConnectivityState.COMPLETED]: 'Completed',
+};
+
+export const ConnectivityTestStepResult = ({
+  title,
+  success,
+  children,
+}: {
+  title: string;
+  success?: boolean;
+  children: React.ReactNode;
+}) => {
+  return (
+    <Box css={{ my: '$10', p: '$10', r: '$1', bg: '$surface_bright' }}>
+      <Text css={{ c: '$on_primary_medium', mb: '$6' }}>{title}</Text>
+      {success ? (
+        <Flex>
+          <Text css={{ c: '$alert_success' }}>
+            <CheckCircleIcon width="1.5rem" height="1.5rem" />
+          </Text>
+          <Text variant="lg" css={{ ml: '$4' }}>
+            Connected
+          </Text>
+        </Flex>
+      ) : (
+        <Flex>
+          <Text css={{ c: '$alert_error_bright' }}>
+            <CrossCircleIcon width="1.5rem" height="1.5rem" />
+          </Text>
+          <Text variant="lg" css={{ ml: '$4' }}>
+            Failed
+          </Text>
+        </Flex>
+      )}
+      <Box>{children}</Box>
+    </Box>
+  );
+};
+
+const DetailedInfo = ({
+  title,
+  value,
+  Icon,
+}: {
+  title: string;
+  value: string;
+  Icon?: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+}) => {
+  return (
+    <Box css={{ flex: '50%', mt: '$6' }}>
+      <Text variant="caption" css={{ fontWeight: '$semiBold', c: '$on_primary_medium' }}>
+        {title}
+      </Text>
+      <Flex css={{ mt: '$xs', alignItems: 'flex-start' }}>
+        {Icon && (
+          <Text css={{ mr: '$4' }}>
+            <Icon width="1rem" height="1rem" />
+          </Text>
+        )}
+        <Text variant="caption">{value}</Text>
+      </Flex>
+    </Box>
+  );
+};
+
+const MediaServerResult = ({ result }: { result?: ConnectivityCheckResult['mediaServerReport'] }) => {
+  return (
+    <ConnectivityTestStepResult
+      title="Media server connection test"
+      success={result?.isPublishICEConnected && result.isSubscribeICEConnected}
+    >
+      <Flex css={{ flexWrap: 'wrap' }}>
+        <DetailedInfo
+          title="Media Captured"
+          value={result?.stats?.audio.bytesSent ? 'Yes' : 'No'}
+          Icon={result?.stats?.audio.bytesSent ? CheckCircleIcon : CrossCircleIcon}
+        />
+        <DetailedInfo
+          title="Media Published"
+          value={result?.stats?.audio.bitrateSent ? 'Yes' : 'No'}
+          Icon={result?.stats?.audio.bytesSent ? CheckCircleIcon : CrossCircleIcon}
+        />
+        {result?.connectionQualityScore ? (
+          <DetailedInfo
+            title="Connection Quality Score (CQS)"
+            value={`${result.connectionQualityScore.toFixed(2)} (out of 5)`}
+          />
+        ) : null}
+      </Flex>
+    </ConnectivityTestStepResult>
+  );
+};
+
+const SignallingResult = ({ result }: { result?: ConnectivityCheckResult['signallingReport'] }) => {
+  return (
+    <ConnectivityTestStepResult title="Signalling server connection test" success={result?.isConnected}>
+      <Flex css={{ flexWrap: 'wrap' }}>
+        <DetailedInfo
+          title="Signalling Gateway"
+          value={result?.isConnected ? 'Reachable' : 'Unreachable'}
+          Icon={result?.isConnected ? CheckCircleIcon : CrossCircleIcon}
+        />
+        <DetailedInfo title="Websocket URL" value={result?.websocketUrl || 'N/A'} Icon={LinkIcon} />
+      </Flex>
+    </ConnectivityTestStepResult>
+  );
+};
+
+const AudioStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
+  return (
+    <ConnectivityTestStepResult title="Audio" success={!!stats?.bytesSent}>
+      {stats && (
+        <Flex css={{ flexWrap: 'wrap' }}>
+          <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
+          <DetailedInfo title="Bytes Received" value={formatBytes(stats.bytesReceived)} />
+          <DetailedInfo title="Packets Received" value={stats.packetsReceived.toString()} />
+          <DetailedInfo title="Packets Lost" value={stats.packetsLost.toString()} />
+          <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
+          <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
+          <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+        </Flex>
+      )}
+    </ConnectivityTestStepResult>
+  );
+};
+
+const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
+  return (
+    <ConnectivityTestStepResult title="Video" success={!!stats?.bytesSent}>
+      {stats && (
+        <Flex css={{ flexWrap: 'wrap' }}>
+          <DetailedInfo title="Bytes Sent" value={formatBytes(stats.bytesSent)} />
+          <DetailedInfo title="Bytes Received" value={formatBytes(stats.bytesReceived)} />
+          <DetailedInfo title="Packets Received" value={stats.packetsReceived.toString()} />
+          <DetailedInfo title="Packets Lost" value={stats.packetsLost.toString()} />
+          <DetailedInfo title="Bitrate Sent" value={formatBytes(stats.bitrateSent, 'b/s')} />
+          <DetailedInfo title="Bitrate Received" value={formatBytes(stats.bitrateReceived, 'b/s')} />
+          <DetailedInfo title="Round Trip Time" value={`${stats.roundTripTime} ms`} />
+        </Flex>
+      )}
+    </ConnectivityTestStepResult>
+  );
+};
+
+const Footer = ({
+  error,
+  result,
+  restart,
+}: {
+  result?: ConnectivityCheckResult;
+  restart: () => void;
+  error?: Error;
+}) => {
+  return (
+    <TestFooter error={error}>
+      <Flex css={{ gap: '$8', '@lg': { flexDirection: 'column' } }}>
+        <Button variant="standard" onClick={restart}>
+          Restart Test
+        </Button>
+        <Button disabled={!result} onClick={() => result && downloadJson(result, 'hms_diagnostics_results')}>
+          Download Test Report
+        </Button>
+      </Flex>
+    </TestFooter>
+  );
+};
+
+const ConnectivityTestReport = ({
+  error,
+  result,
+  progress,
+  startTest,
+}: {
+  error?: Error;
+  result?: ConnectivityCheckResult;
+  progress?: ConnectivityState;
+  startTest: () => void;
+}) => {
+  if (error) {
+    return (
+      <>
+        <TestContainer css={{ textAlign: 'center' }}>
+          <Text css={{ c: '$alert_error_default', mb: '$4' }}>
+            <CrossCircleIcon />
+          </Text>
+          <Text variant="h6">Connectivity Test Failed</Text>
+          <Text variant="body2" css={{ c: '$on_primary_medium' }}>
+            {error.message}
+          </Text>
+        </TestContainer>
+        <Footer restart={startTest} error={error} />
+      </>
+    );
+  }
+
+  if (result) {
+    // for debugging and quick view of results
+    console.log(result);
+    return (
+      <>
+        <TestContainer>
+          <Text css={{ c: '$on_primary_medium' }}>Connectivity test has been completed.</Text>
+          <SignallingResult result={result?.signallingReport} />
+          <MediaServerResult result={result?.mediaServerReport} />
+          <AudioStats stats={result?.mediaServerReport?.stats?.audio} />
+          <VideoStats stats={result?.mediaServerReport?.stats?.video} />
+        </TestContainer>
+        <Footer result={result} restart={startTest} error={error} />
+      </>
+    );
+  }
+
+  if (progress !== undefined) {
+    return (
+      <TestContainer css={{ textAlign: 'center' }}>
+        <Text css={{ c: '$primary_bright', textAlign: 'center' }}>
+          <Loading size="3.5rem" color="currentColor" />
+        </Text>
+        <Text variant="h6" css={{ mt: '$8' }}>
+          Checking your connection...
+        </Text>
+        <Text
+          variant="body2"
+          css={{ c: '$on_primary_medium', mt: '$4' }}
+        >{`${ConnectivityStateMessage[progress]}...`}</Text>
+      </TestContainer>
+    );
+  }
+
+  return null;
+};
+
+const RegionSelector = ({
+  region,
+  setRegion,
+  startTest,
+}: {
+  region?: string;
+  startTest?: () => void;
+  setRegion: (region: string) => void;
+}) => {
+  return (
+    <TestContainer css={{ borderBottom: '1px solid $border_default' }}>
+      <Text variant="body1">Select a region</Text>
+      <Text variant="body2" css={{ c: '$on_secondary_low' }}>
+        Select the closest region for best results
+      </Text>
+      <Flex
+        justify="between"
+        css={{
+          mt: '$md',
+          '@lg': {
+            flexDirection: 'column',
+            gap: '$8',
+          },
+        }}
+      >
+        <Flex
+          css={{
+            gap: '$4',
+            '@lg': {
+              flexDirection: 'column',
+            },
+          }}
+        >
+          {Object.entries(Regions).map(([key, value]) => (
+            <Button
+              key={key}
+              outlined={region !== key}
+              variant={region === key ? 'primary' : 'standard'}
+              css={region === key ? { bg: '$primary_dim' } : {}}
+              onClick={() => setRegion(key)}
+            >
+              {value}
+            </Button>
+          ))}
+        </Flex>
+        <Flex css={{ '@lg': { flexDirection: 'column' } }}>
+          <Button variant="primary" onClick={startTest} disabled={!startTest}>
+            {startTest ? 'Start Test' : 'Testing...'}
+          </Button>
+        </Flex>
+      </Flex>
+    </TestContainer>
+  );
+};
+
+export const ConnectivityTest = () => {
+  const { setConnectivityTested } = useContext(DiagnosticsContext);
+  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);
+    setError(undefined);
+    setResult(undefined);
+    hmsDiagnostics
+      .startConnectivityCheck(
+        state => {
+          setProgress(state);
+        },
+        result => {
+          setConnectivityTested(true);
+          setResult(result);
+        },
+        region,
+      )
+      .catch(error => {
+        setError(error);
+      });
+  };
+
+  return (
+    <>
+      <RegionSelector
+        region={region}
+        setRegion={setRegion}
+        startTest={progress === undefined || progress === ConnectivityState.COMPLETED ? startTest : undefined}
+      />
+      <ConnectivityTestReport error={error} result={result} progress={progress} startTest={startTest} />
+    </>
+  );
+};
+
+const downloadJson = (obj: object, fileName: string) => {
+  const a = document.createElement('a');
+  const file = new Blob([JSON.stringify(obj, null, 2)], {
+    type: 'application/json',
+  });
+  a.href = URL.createObjectURL(file);
+  a.download = `${fileName}.json`;
+  a.click();
+};

package/src/Diagnostics/DeviceSelector.jsx

@@ -0,0 +1,71 @@
+import React, { useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown } from '../Dropdown';
+import { Box, Flex } from '../Layout';
+import { DialogDropdownTrigger } from '../Prebuilt/primitives/DropdownTrigger';
+import { Text } from '../Text';
+
+export const DeviceSelector = ({ title, devices, selection, onChange, icon, children = null }) => {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  return (
+    <Box css={{ mb: '$6' }}>
+      <Text css={{ mb: '$4' }}>{title}</Text>
+      <Flex
+        align="center"
+        css={{
+          gap: '$4',
+          '@md': {
+            flexDirection: children ? 'column' : 'row',
+            alignItems: children ? 'start' : 'center',
+          },
+        }}
+      >
+        <Dropdown.Root open={open} onOpenChange={setOpen}>
+          <DialogDropdownTrigger
+            ref={ref}
+            icon={icon}
+            title={devices.find(({ deviceId }) => deviceId === selection)?.label || 'Select device from list'}
+            open={open}
+          />
+          <Dropdown.Portal>
+            <Dropdown.Content
+              align="start"
+              sideOffset={8}
+              css={{
+                w:
+                  // @ts-ignore
+                  ref.current?.clientWidth,
+                zIndex: 1001,
+              }}
+            >
+              {devices.map(device => {
+                return (
+                  <Dropdown.Item
+                    key={device.label}
+                    onSelect={() => onChange(device.deviceId)}
+                    css={{
+                      px: '$9',
+                    }}
+                  >
+                    {device.label}
+                  </Dropdown.Item>
+                );
+              })}
+            </Dropdown.Content>
+          </Dropdown.Portal>
+        </Dropdown.Root>
+        {children}
+      </Flex>
+    </Box>
+  );
+};
+
+DeviceSelector.propTypes = {
+  title: PropTypes.string.isRequired,
+  devices: PropTypes.array.isRequired,
+  selection: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  icon: PropTypes.node,
+  children: PropTypes.node,
+};

package/src/Diagnostics/Diagnostics.tsx

@@ -0,0 +1,134 @@
+import React, { useContext } from 'react';
+import { HMSRoomProvider } from '@100mslive/react-sdk';
+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';
+
+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 Container = ({ children }: { children: React.ReactNode }) => (
+  <Box
+    css={{
+      px: '120px',
+      py: '120px',
+      bg: '$background_dim',
+      lineHeight: '1.5',
+      '-webkit-text-size-adjust': '100%',
+      position: 'relative',
+      minHeight: '100vh',
+      '@lg': {
+        p: '$12',
+      },
+    }}
+  >
+    {children}
+  </Box>
+);
+
+const DiagnosticsStepTest = () => {
+  const { activeStep } = useContext(DiagnosticsContext);
+
+  let TestComponent = () => <></>;
+
+  if (activeStep === 'audio') {
+    TestComponent = AudioTest;
+  } else if (activeStep === 'video') {
+    TestComponent = VideoTest;
+  } else if (activeStep === 'browser') {
+    TestComponent = BrowserTest;
+  } else if (activeStep === 'connectivity') {
+    TestComponent = ConnectivityTest;
+  }
+
+  return <TestComponent key={activeStep} />;
+};
+
+const DiagnosticsStepHeader = () => {
+  const { activeStep } = useContext(DiagnosticsContext);
+  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>
+    </Flex>
+  );
+};
+
+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>
+    </Box>
+  );
+};
+
+const DiagnosticsStepsList = () => {
+  const { activeStep, connectivityTested } = useContext(DiagnosticsContext);
+
+  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>
+        );
+      })}
+    </Box>
+  );
+};
+
+export const Diagnostics = () => {
+  const [activeStep, setActiveStep] = React.useState(Object.keys(DiagnosticsSteps)[0]);
+  const [connectivityTested, setConnectivityTested] = React.useState(false);
+  return (
+    <HMSRoomProvider store={hmsStore} actions={hmsActions} notifications={hmsNotifications} stats={hmsStats}>
+      <HMSThemeProvider themeType="default">
+        <DiagnosticsContext.Provider value={{ activeStep, setActiveStep, connectivityTested, setConnectivityTested }}>
+          <Container>
+            <Text variant="h4">Pre-call Test</Text>
+            <Text variant="md" css={{ c: '$on_primary_medium' }}>
+              Make sure your devices and network are good to go, let's get started.
+            </Text>
+            <Flex css={{ direction: 'column', mt: '$12', justifyItems: 'center' }}>
+              <DiagnosticsStepsList />
+              <DiagnosticsStep />
+            </Flex>
+          </Container>
+        </DiagnosticsContext.Provider>
+      </HMSThemeProvider>
+    </HMSRoomProvider>
+  );
+};

package/src/Diagnostics/VideoTest.tsx

@@ -0,0 +1,68 @@
+import React, { useEffect, useState } from 'react';
+import {
+  HMSException,
+  selectDevices,
+  selectLocalMediaSettings,
+  selectLocalVideoTrackID,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { VideoOnIcon } from '@100mslive/react-icons';
+import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
+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 { hmsDiagnostics } from './hms';
+
+export const VideoTest = () => {
+  const allDevices = useHMSStore(selectDevices);
+  const { videoInput } = allDevices;
+  const trackID = useHMSStore(selectLocalVideoTrackID);
+  const sdkSelectedDevices = useHMSStore(selectLocalMediaSettings);
+  const [error, setError] = useState<HMSException | undefined>();
+
+  useEffect(() => {
+    hmsDiagnostics.startCameraCheck().catch(err => setError(err));
+  }, []);
+
+  return (
+    <>
+      <TestContainer css={{ display: 'flex', '@lg': { flexDirection: 'column', alignItems: 'center' } }}>
+        {trackID && (
+          <StyledVideoTile.Container
+            css={{
+              width: '90%',
+              aspectRatio: '16/9',
+              mr: '$10',
+              '@lg': { mr: 0, mb: '$10', aspectRatio: '1/1' },
+            }}
+          >
+            <Video mirror={true} trackId={trackID} />
+          </StyledVideoTile.Container>
+        )}
+        <Flex direction="column" css={{ w: '100%' }}>
+          <Text variant="body2" css={{ c: '$on_primary_medium', mb: '$10' }}>
+            Move in front of your camera to make sure it's working. If you don't see your video, try changing the
+            selected camera. If the camera isn't part of your computer, check your settings to make sure your system
+            recognizes it.
+          </Text>
+          <DeviceSelector
+            title="Video"
+            devices={videoInput || []}
+            icon={<VideoOnIcon />}
+            selection={sdkSelectedDevices.videoInputDeviceId}
+            onChange={async (deviceId: string) => {
+              hmsDiagnostics.stopCameraCheck();
+              hmsDiagnostics.startCameraCheck(deviceId);
+            }}
+          />
+        </Flex>
+      </TestContainer>
+      <TestFooter error={error} ctaText="Does your video look good?" />
+      <PermissionErrorModal error={error} />
+    </>
+  );
+};