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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.14-alpha.0",
+  "version": "0.3.14-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.14-alpha.0",
+    "@100mslive/hls-player": "0.3.14-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.14-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.4-alpha.0",
-    "@100mslive/react-icons": "0.10.14-alpha.0",
-    "@100mslive/react-sdk": "0.10.14-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.14-alpha.2",
+    "@100mslive/hms-whiteboard": "0.0.4-alpha.2",
+    "@100mslive/react-icons": "0.10.14-alpha.2",
+    "@100mslive/react-sdk": "0.10.14-alpha.2",
     "@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": "8e40f00818c7057c6cdf817982d7ded8a4d44426"
+  "gitHead": "3ef383402ec24ac3a20df2a932179c29cd1c834b"
 }

package/src/Diagnostics/AudioTest.tsx

@@ -0,0 +1,153 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import {
+  selectDevices,
+  selectLocalAudioTrackID,
+  selectLocalMediaSettings,
+  selectTrackAudioByID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { MicOnIcon, SpeakerIcon } from '@100mslive/react-icons';
+import { TestContainer, TestFooter } from './components';
+import { Button } from '../Button';
+import { Box, Flex } from '../Layout';
+import { Progress } from '../Progress';
+import { Text } from '../Text';
+// @ts-ignore: No implicit any
+import { DeviceSelector } from './DeviceSelector';
+import { hmsDiagnostics } from './hms';
+import { useAudioOutputTest } from '../Prebuilt/components/hooks/useAudioOutputTest';
+import { TEST_AUDIO_URL } from '../Prebuilt/common/constants';
+
+const SelectContainer = ({ children }: { children: React.ReactNode }) => (
+  <Box css={{ w: '50%', '@lg': { w: '100%' } }}>{children}</Box>
+);
+
+const MicTest = () => {
+  const devices = useHMSStore(selectDevices);
+  const [isRecording, setIsRecording] = useState(false);
+  const { audioInputDeviceId } = useHMSStore(selectLocalMediaSettings);
+  const [selectedMic, setSelectedMic] = useState(audioInputDeviceId || 'default');
+  const trackID = useHMSStore(selectLocalAudioTrackID);
+  const audioLevel = useHMSStore(selectTrackAudioByID(trackID));
+
+  return (
+    <SelectContainer>
+      <DeviceSelector
+        title="Microphone(Input)"
+        devices={devices.audioInput}
+        selection={selectedMic}
+        icon={<MicOnIcon />}
+        onChange={(deviceId: string) => {
+          setSelectedMic(deviceId);
+          hmsDiagnostics.stopMicCheck();
+          setIsRecording(false);
+        }}
+      />
+      <Flex css={{ gap: '$6', alignItems: 'center' }}>
+        <Button
+          onClick={() =>
+            hmsDiagnostics
+              .startMicCheck(selectedMic, () => {
+                setIsRecording(false);
+              })
+              .then(() => {
+                setIsRecording(true);
+              })
+          }
+          disabled={isRecording}
+        >
+          {isRecording ? 'Recording...' : 'Record'}
+        </Button>
+        {isRecording && (
+          <>
+            <Text>
+              <MicOnIcon />
+            </Text>
+            <Progress.Root value={audioLevel} css={{ h: '$2' }}>
+              <Progress.Content
+                style={{
+                  transform: `translateX(-${100 - audioLevel}%)`,
+                  transition: 'transform 0.3s',
+                }}
+              />
+            </Progress.Root>
+          </>
+        )}
+      </Flex>
+    </SelectContainer>
+  );
+};
+
+const SpeakerTest = () => {
+  const actions = useHMSActions();
+  const devices = useHMSStore(selectDevices);
+  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
+  const { playing, setPlaying, audioRef } = useAudioOutputTest({ deviceId: audioOutputDeviceId || 'default' });
+
+  return (
+    <SelectContainer>
+      <DeviceSelector
+        title="Speaker(output)"
+        devices={devices.audioOutput}
+        selection={audioOutputDeviceId || 'default'}
+        icon={<SpeakerIcon />}
+        onChange={(deviceId: string) => {
+          actions.setAudioOutputDevice(deviceId);
+        }}
+      />
+      <Button
+        onClick={() => {
+          if (audioRef.current) {
+            audioRef.current.src = hmsDiagnostics.getRecordedAudio() || TEST_AUDIO_URL;
+            audioRef.current.play();
+          }
+        }}
+        disabled={playing}
+      >
+        <SpeakerIcon />
+        <Text css={{ ml: '$4' }}>{playing ? 'Playing' : 'Playback'}</Text>
+      </Button>
+      <audio
+        ref={audioRef}
+        onEnded={() => setPlaying(false)}
+        onPlay={() => setPlaying(true)}
+        style={{ display: 'none' }}
+      />
+    </SelectContainer>
+  );
+};
+
+export const AudioTest = () => {
+  const [error, setError] = useState<Error | undefined>();
+  useEffect(() => {
+    hmsDiagnostics.requestPermission({ audio: true }).catch(error => setError(error));
+  }, []);
+
+  return (
+    <>
+      <TestContainer>
+        <Text variant="body2" css={{ c: '$on_primary_medium' }}>
+          Record an audio clip and play it back to check that your microphone and speaker are working. If they aren't,
+          make sure your volume is turned up, try a different speaker or microphone, or check your bluetooth settings.
+        </Text>
+
+        <Flex
+          css={{
+            mt: '$10',
+            gap: '$10',
+            '@lg': {
+              flexDirection: 'column',
+              gap: '$8',
+            },
+          }}
+        >
+          {!error && <MicTest />}
+          <SpeakerTest />
+        </Flex>
+      </TestContainer>
+      <TestFooter error={error} ctaText="Does your audio sound good?" />
+    </>
+  );
+};

package/src/Diagnostics/ConnectivityTest.tsx

@@ -0,0 +1,355 @@
+import React, { useState } from 'react';
+import { ConnectivityCheckResult, ConnectivityState, DiagnosticsRTCStats } from '@100mslive/react-sdk';
+import { CheckCircleIcon, CrossCircleIcon, 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 { 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) {
+    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) {
+    return (
+      <TestContainer css={{ textAlign: 'center' }}>
+        <Text css={{ c: '$primary_bright' }}>
+          <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 [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 = () => {
+    setError(undefined);
+    setProgress(ConnectivityState.STARTING);
+    setResult(undefined);
+    hmsDiagnostics
+      .startConnectivityCheck(
+        state => {
+          setProgress(state);
+        },
+        result => {
+          setResult(result);
+        },
+        region,
+      )
+      .catch(error => {
+        setError(error);
+      });
+  };
+
+  return (
+    <>
+      <RegionSelector
+        region={region}
+        setRegion={setRegion}
+        startTest={!progress || 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,
+};