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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.14-alpha.0",
+  "version": "0.3.14-alpha.10",
   "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.10",
     "@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.10",
+    "@100mslive/hms-whiteboard": "0.0.4-alpha.10",
+    "@100mslive/react-icons": "0.10.14-alpha.10",
+    "@100mslive/react-sdk": "0.10.14-alpha.10",
     "@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": "fe81328f37cd2b5f85c060577475ca0ba7c111cc"
 }

package/src/Diagnostics/AudioTest.tsx

@@ -0,0 +1,176 @@
+/* eslint-disable react/prop-types */
+import React, { useEffect, useState } from 'react';
+import {
+  HMSException,
+  selectDevices,
+  selectLocalAudioTrackID,
+  selectLocalMediaSettings,
+  selectTrackAudioByID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { MicOnIcon, SpeakerIcon, StopIcon } from '@100mslive/react-icons';
+import { PermissionErrorModal } from '../Prebuilt/components/Notifications/PermissionErrorModal';
+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: 'calc(50% - 0.75rem)', '@lg': { w: '100%' } }}>{children}</Box>
+);
+
+const MicTest = ({ setError }: { setError: React.Dispatch<React.SetStateAction<Error | undefined>> }) => {
+  const devices = useHMSStore(selectDevices);
+  const [isRecording, setIsRecording] = useState(false);
+  const [selectedMic, setSelectedMic] = useState(devices.audioInput[0]?.deviceId || 'default');
+  const trackID = useHMSStore(selectLocalAudioTrackID);
+  const audioLevel = useHMSStore(selectTrackAudioByID(trackID));
+  const { audioOutputDeviceId } = useHMSStore(selectLocalMediaSettings);
+  const { playing, setPlaying, audioRef } = useAudioOutputTest({
+    deviceId: audioOutputDeviceId || devices.audioOutput[0]?.deviceId,
+  });
+
+  return (
+    <SelectContainer>
+      <DeviceSelector
+        title="Microphone (Input)"
+        devices={devices.audioInput}
+        selection={selectedMic}
+        icon={<MicOnIcon />}
+        onChange={(deviceId: string) => {
+          setSelectedMic(deviceId);
+          hmsDiagnostics.stopMicCheck();
+        }}
+      />
+      <Flex css={{ gap: '$6', alignItems: 'center' }}>
+        <Button
+          variant="standard"
+          icon
+          onClick={() => {
+            isRecording
+              ? hmsDiagnostics.stopMicCheck()
+              : hmsDiagnostics
+                  .startMicCheck({
+                    inputDevice: selectedMic,
+                    onError: (err: Error) => {
+                      setError(err);
+                    },
+                    onStop: () => {
+                      setIsRecording(false);
+                    },
+                  })
+                  .then(() => {
+                    setIsRecording(true);
+                  });
+          }}
+          disabled={devices.audioInput.length === 0 || playing}
+        >
+          {isRecording ? <StopIcon /> : <MicOnIcon />}
+          {isRecording ? 'Stop Recording' : 'Record'}
+        </Button>
+
+        <Button
+          icon
+          variant="standard"
+          outlined={hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+          onClick={() => {
+            if (audioRef.current) {
+              audioRef.current.src = hmsDiagnostics.getRecordedAudio() || '';
+              audioRef.current.play();
+            }
+          }}
+          disabled={playing || hmsDiagnostics.getRecordedAudio() === TEST_AUDIO_URL}
+        >
+          <SpeakerIcon />
+          {playing ? 'Playing...' : 'Playback'}
+        </Button>
+        <audio
+          ref={audioRef}
+          onEnded={() => setPlaying(false)}
+          onPlay={() => setPlaying(true)}
+          style={{ display: 'none' }}
+        />
+      </Flex>
+
+      <Flex align="center" css={{ mt: '$4', maxWidth: '10rem', opacity: isRecording ? '1' : '0', gap: '$4' }}>
+        <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);
+
+  if (devices.audioOutput.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <SelectContainer>
+      <DeviceSelector
+        title="Speaker (Output)"
+        devices={devices.audioOutput}
+        selection={audioOutputDeviceId || devices.audioOutput[0]?.deviceId}
+        icon={<SpeakerIcon />}
+        onChange={(deviceId: string) => {
+          actions.setAudioOutputDevice(deviceId);
+        }}
+      />
+    </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 a 10 second 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',
+            },
+          }}
+        >
+          <MicTest setError={setError} />
+          <SpeakerTest />
+        </Flex>
+      </TestContainer>
+      <TestFooter error={error} ctaText="Does your audio sound good?" />
+      <PermissionErrorModal error={error as HMSException} />
+    </>
+  );
+};

package/src/Diagnostics/BrowserTest.tsx

@@ -0,0 +1,139 @@
+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 { hmsDiagnostics } from './hms';
+
+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 [error, setError] = useState<Error | undefined>();
+  useEffect(() => {
+    try {
+      hmsDiagnostics.checkBrowserSupport();
+    } catch (err) {
+      setError(err as Error);
+    }
+  }, []);
+  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?" />
+    </>
+  );
+};