@100mslive/roomkit-react 0.3.14-alpha.1 → 0.3.14-alpha.11

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?" />
+    </>
+  );
+};

package/src/Diagnostics/ConnectivityTest.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
+import React, { useContext, 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 { DiagnosticsContext, TestContainer, TestFooter } from './components';
 import { Button } from '../Button';
 import { Box, Flex } from '../Layout';
 import { Loading } from '../Loading';
@@ -218,6 +218,8 @@ const ConnectivityTestReport = ({
   }
 
   if (result) {
+    // for debugging and quick view of results
+    console.log(result);
     return (
       <>
         <TestContainer>
@@ -232,10 +234,10 @@ const ConnectivityTestReport = ({
     );
   }
 
-  if (progress) {
+  if (progress !== undefined) {
     return (
       <TestContainer css={{ textAlign: 'center' }}>
-        <Text css={{ c: '$primary_bright' }}>
+        <Text css={{ c: '$primary_bright', textAlign: 'center' }}>
           <Loading size="3.5rem" color="currentColor" />
         </Text>
         <Text variant="h6" css={{ mt: '$8' }}>
@@ -308,14 +310,15 @@ const RegionSelector = ({
 };
 
 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);
-    setProgress(ConnectivityState.STARTING);
     setResult(undefined);
     hmsDiagnostics
       .startConnectivityCheck(
@@ -323,6 +326,7 @@ export const ConnectivityTest = () => {
           setProgress(state);
         },
         result => {
+          setConnectivityTested(true);
           setResult(result);
         },
         region,
@@ -337,7 +341,7 @@ export const ConnectivityTest = () => {
       <RegionSelector
         region={region}
         setRegion={setRegion}
-        startTest={!progress || progress === ConnectivityState.COMPLETED ? startTest : undefined}
+        startTest={progress === undefined || progress === ConnectivityState.COMPLETED ? startTest : undefined}
       />
       <ConnectivityTestReport error={error} result={result} progress={progress} startTest={startTest} />
     </>

package/src/Diagnostics/Diagnostics.tsx

@@ -1,11 +1,12 @@
 import React, { useContext } from 'react';
 import { HMSRoomProvider } from '@100mslive/react-sdk';
-import { ConnectivityIcon, GlobeIcon, MicOnIcon, VideoOnIcon } from '@100mslive/react-icons';
+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';
@@ -20,8 +21,8 @@ const DiagnosticsStepIcon: Record<string, React.ReactNode> = {
 const Container = ({ children }: { children: React.ReactNode }) => (
   <Box
     css={{
-      px: '155px',
-      py: '160px',
+      px: '120px',
+      py: '120px',
       bg: '$background_dim',
       lineHeight: '1.5',
       '-webkit-text-size-adjust': '100%',
@@ -45,6 +46,8 @@ const DiagnosticsStepTest = () => {
     TestComponent = AudioTest;
   } else if (activeStep === 'video') {
     TestComponent = VideoTest;
+  } else if (activeStep === 'browser') {
+    TestComponent = BrowserTest;
   } else if (activeStep === 'connectivity') {
     TestComponent = ConnectivityTest;
   }
@@ -64,37 +67,56 @@ const DiagnosticsStepHeader = () => {
 
 const DiagnosticsStep = () => {
   return (
-    <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', '@lg': { w: '100%' } }}>
+    <Box css={{ border: '1px solid $border_default', r: '$1', w: '75%', maxWidth: '65rem', '@lg': { w: '100%' } }}>
       <DiagnosticsStepHeader />
-      <DiagnosticsStepTest />
+      <Box css={{ maxHeight: '55vh', overflowY: 'auto' }}>
+        <DiagnosticsStepTest />
+      </Box>
     </Box>
   );
 };
 
 const DiagnosticsStepsList = () => {
-  const { activeStep } = useContext(DiagnosticsContext);
+  const { activeStep, connectivityTested } = useContext(DiagnosticsContext);
 
   return (
     <Box css={{ w: '25%', '@lg': { display: 'none' } }}>
-      <ul>
-        {Object.keys(DiagnosticsSteps).map(key => (
-          <li key={key}>
-            <Text variant="md" css={{ mb: '$10', c: activeStep === key ? '$on_primary_high' : '$on_primary_low' }}>
-              {DiagnosticsSteps[key]}
-            </Text>
-          </li>
-        ))}
-      </ul>
+      {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 }}>
+        <DiagnosticsContext.Provider value={{ activeStep, setActiveStep, connectivityTested, setConnectivityTested }}>
           <Container>
             <Text variant="h4">Pre-call Test</Text>
             <Text variant="md" css={{ c: '$on_primary_medium' }}>

package/src/Diagnostics/VideoTest.tsx

@@ -1,6 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import { selectDevices, selectLocalMediaSettings, selectLocalVideoTrackID, useHMSStore } from '@100mslive/react-sdk';
+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';
@@ -15,7 +22,7 @@ export const VideoTest = () => {
   const { videoInput } = allDevices;
   const trackID = useHMSStore(selectLocalVideoTrackID);
   const sdkSelectedDevices = useHMSStore(selectLocalMediaSettings);
-  const [error, setError] = useState<Error | undefined>();
+  const [error, setError] = useState<HMSException | undefined>();
 
   useEffect(() => {
     hmsDiagnostics.startCameraCheck().catch(err => setError(err));
@@ -27,10 +34,10 @@ export const VideoTest = () => {
         {trackID && (
           <StyledVideoTile.Container
             css={{
-              w: '90%',
-              height: '$48',
+              width: '90%',
+              aspectRatio: '16/9',
               mr: '$10',
-              '@lg': { mr: 0, mb: '$10' },
+              '@lg': { mr: 0, mb: '$10', aspectRatio: '1/1' },
             }}
           >
             <Video mirror={true} trackId={trackID} />
@@ -55,6 +62,7 @@ export const VideoTest = () => {
         </Flex>
       </TestContainer>
       <TestFooter error={error} ctaText="Does your video look good?" />
+      <PermissionErrorModal error={error} />
     </>
   );
 };

package/src/Diagnostics/components.tsx

@@ -6,20 +6,26 @@ import { CSS } from '../Theme';
 import { hmsDiagnostics } from './hms';
 
 export const DiagnosticsSteps: Record<string, string> = {
+  browser: 'Browser Support',
   video: 'Test Video',
   audio: 'Test Audio',
-  // browser: 'Browser Support',
   connectivity: 'Connection Quality',
 };
 
 export const DiagnosticsContext = React.createContext<{
   activeStep: string;
   setActiveStep: React.Dispatch<React.SetStateAction<string>>;
+  connectivityTested: boolean;
+  setConnectivityTested: React.Dispatch<React.SetStateAction<boolean>>;
 }>({
   activeStep: 'video',
   setActiveStep: () => {
     return;
   },
+  connectivityTested: false,
+  setConnectivityTested: () => {
+    return;
+  },
 });
 
 export const TestContainer = ({ css, children }: { css?: CSS; children: React.ReactNode }) => {
@@ -55,11 +61,17 @@ export const TestFooter = ({
       css={{
         py: '$8',
         px: '$10',
+        position: 'sticky',
+        bottom: '0',
+        background: '$background_dim',
         justifyContent: 'space-between',
         alignItems: 'center',
         borderTop: '1px solid $border_default',
         fontSize: '$sm',
+        borderBottomLeftRadius: '$1',
+        borderBottomRightRadius: '$1',
         lineHeight: '$sm',
+        zIndex: 1001,
         '@lg': { flexDirection: 'column', gap: '$8' },
       }}
     >

package/src/Prebuilt/App.tsx

@@ -1,10 +1,5 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
-import {
-  HMSDiagnosticsInterface,
-  HMSStatsStoreWrapper,
-  HMSStoreWrapper,
-  IHMSNotifications,
-} from '@100mslive/hms-video-store';
+import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
@@ -85,7 +80,6 @@ export type HMSPrebuiltRefType = {
   hmsStore: HMSStoreWrapper;
   hmsStats: HMSStatsStoreWrapper;
   hmsNotifications: IHMSNotifications;
-  hmsDiagnostics: HMSDiagnosticsInterface;
 };
 
 export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
@@ -115,7 +109,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       const hmsActions = hms.getActions();
       const hmsNotifications = hms.getNotifications();
       const hmsStats = hms.getStats();
-      const hmsDiagnostics = hms.getDiagnosticsSDK();
       hms.triggerOnSubscribe();
 
       reactiveStore.current = {
@@ -123,7 +116,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         hmsStats,
         hmsStore,
         hmsNotifications,
-        hmsDiagnostics,
       };
     }, []);
 

package/src/Prebuilt/components/Chat/ChatFooter.tsx

@@ -108,7 +108,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
 
   const resetInputHeight = useCallback(() => {
     if (inputRef.current) {
-      inputRef.current.style.height = `${Math.max(32, inputRef.current.value ? inputRef.current.scrollHeight : 0)}px`;
+      inputRef.current.style.height = `${Math.max(
+        32,
+        inputRef.current.value ? Math.min(inputRef.current.scrollHeight, 24 * 4) : 0,
+      )}px`;
     }
   }, []);
 

package/src/Prebuilt/components/Header/common.jsx

@@ -15,6 +15,7 @@ import {
   CrossIcon,
   HeadphonesIcon,
   SpeakerIcon,
+  TelePhoneIcon,
 } from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { Label } from '../../../Label';
@@ -82,6 +83,8 @@ export const AudioActions = () => {
     AudioIcon = <BluetoothIcon />;
   } else if (currentSelection && currentSelection.label.toLowerCase().includes('wired')) {
     AudioIcon = <HeadphonesIcon />;
+  } else if (currentSelection && currentSelection.label.toLowerCase().includes('earpiece')) {
+    AudioIcon = <TelePhoneIcon />;
   }
   return (
     <AudioSelectionSheet

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -24,7 +24,7 @@ import { ChatNotifications } from './ChatNotifications';
 import { HandRaisedNotifications } from './HandRaisedNotifications';
 import { InitErrorModal } from './InitErrorModal';
 import { PeerNotifications } from './PeerNotifications';
-import { PermissionErrorModal } from './PermissionErrorModal';
+import { PermissionErrorNotificationModal } from './PermissionErrorModal';
 import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
@@ -197,7 +197,7 @@ export function Notifications() {
       {roomState === HMSRoomState.Connected ? <PeerNotifications /> : null}
       <ReconnectNotifications />
       <AutoplayBlockedModal />
-      <PermissionErrorModal />
+      <PermissionErrorNotificationModal />
       <InitErrorModal />
       <ChatNotifications />
       <HandRaisedNotifications />

package/src/Prebuilt/components/Notifications/PermissionErrorModal.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import { HMSException, HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Button, config as cssConfig, Dialog, Flex, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import androidPermissionAlert from '../../images/android-perm-1.png';
@@ -9,22 +9,24 @@ import iosPermissions from '../../images/ios-perm-0.png';
 // @ts-ignore: No implicit Any
 import { isAndroid, isIOS } from '../../common/constants';
 
-export function PermissionErrorModal() {
+export function PermissionErrorNotificationModal() {
   const notification = useHMSNotifications(HMSNotificationTypes.ERROR);
+  return <PermissionErrorModal error={notification?.data} />;
+}
+
+export const PermissionErrorModal = ({ error }: { error?: HMSException }) => {
   const [deviceType, setDeviceType] = useState('');
   const [isSystemError, setIsSystemError] = useState(false);
   const isMobile = useMedia(cssConfig.media.md);
-
   useEffect(() => {
     if (
-      !notification ||
-      (notification.data?.code !== 3001 && notification.data?.code !== 3011) ||
-      (notification.data?.code === 3001 && notification.data?.message.includes('screen'))
+      !error ||
+      (error?.code !== 3001 && error?.code !== 3011) ||
+      (error?.code === 3001 && error?.message.includes('screen'))
     ) {
       return;
     }
-    console.error(`[${notification.type}]`, notification);
-    const errorMessage = notification.data?.message;
+    const errorMessage = error?.message;
     const hasAudio = errorMessage.includes('audio');
     const hasVideo = errorMessage.includes('video');
     const hasScreen = errorMessage.includes('screen');
@@ -37,8 +39,8 @@ export function PermissionErrorModal() {
     } else if (hasScreen) {
       setDeviceType('screen');
     }
-    setIsSystemError(notification.data.code === 3011);
-  }, [notification]);
+    setIsSystemError(error.code === 3011);
+  }, [error]);
 
   return deviceType ? (
     <Dialog.Root open={!!deviceType}>
@@ -131,4 +133,4 @@ export function PermissionErrorModal() {
       </Dialog.Portal>
     </Dialog.Root>
   ) : null;
-}
+};