@100mslive/roomkit-react 0.4.3-alpha.2 → 0.4.3-alpha.4

package/src/Diagnostics/BrowserTest.tsx

@@ -1,141 +0,0 @@
-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 { DiagnosticsStep, useDiagnostics } from './DiagnosticsContext';
-
-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`,
-  },
-  'mobile 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', mr: '$4' }}>
-          <img style={{ objectFit: 'contain', width: '2rem' }} src={iconURL} alt={value} />
-        </Box>
-      )}
-      <Text>{value}</Text>
-    </Flex>
-  </Box>
-);
-
-export const BrowserTest = () => {
-  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, updateStep]);
-  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

@@ -1,383 +0,0 @@
-import React, { useState } from 'react';
-import { ConnectivityCheckResult, ConnectivityState, DiagnosticsRTCStats } from '@100mslive/react-sdk';
-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',
-  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,
-  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>
-      {success ? (
-        <Flex>
-          <Text css={{ c: '$alert_success' }}>
-            <CheckCircleIcon width="1.5rem" height="1.5rem" />
-          </Text>
-          <Text variant="lg" css={{ ml: '$4' }}>
-            {status}
-          </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>
-      )}
-      <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>
-  );
-};
-
-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" status="Received" 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`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} ms`} />
-        </Flex>
-      )}
-    </ConnectivityTestStepResult>
-  );
-};
-
-const VideoStats = ({ stats }: { stats: DiagnosticsRTCStats | undefined }) => {
-  return (
-    <ConnectivityTestStepResult title="Video" status="Received" 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`} />
-          <DetailedInfo title="Jitter" value={`${stats.jitter * 1000} 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', display: 'flex', justifyContent: '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 { 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 = () => {
-    updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: false, isCompleted: false });
-    setError(undefined);
-    setResult(undefined);
-    hmsDiagnostics
-      ?.startConnectivityCheck(
-        state => {
-          setProgress(state);
-        },
-        result => {
-          updateStep(DiagnosticsStep.CONNECTIVITY, { isCompleted: true });
-          setResult(result);
-        },
-        region,
-      )
-      .catch(error => {
-        updateStep(DiagnosticsStep.CONNECTIVITY, { hasFailed: true });
-        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

@@ -1,71 +0,0 @@
-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,
-};