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

package/src/Diagnostics/Diagnostics.tsx

@@ -0,0 +1,112 @@
+import React, { useContext } from 'react';
+import { HMSRoomProvider } from '@100mslive/react-sdk';
+import { 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 { 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: '155px',
+      py: '160px',
+      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 === '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%', '@lg': { w: '100%' } }}>
+      <DiagnosticsStepHeader />
+      <DiagnosticsStepTest />
+    </Box>
+  );
+};
+
+const DiagnosticsStepsList = () => {
+  const { activeStep } = 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>
+    </Box>
+  );
+};
+
+export const Diagnostics = () => {
+  const [activeStep, setActiveStep] = React.useState(Object.keys(DiagnosticsSteps)[0]);
+  return (
+    <HMSRoomProvider store={hmsStore} actions={hmsActions} notifications={hmsNotifications} stats={hmsStats}>
+      <HMSThemeProvider themeType="default">
+        <DiagnosticsContext.Provider value={{ activeStep, setActiveStep }}>
+          <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,60 @@
+import React, { useEffect, useState } from 'react';
+import { selectDevices, selectLocalMediaSettings, selectLocalVideoTrackID, useHMSStore } from '@100mslive/react-sdk';
+import { VideoOnIcon } from '@100mslive/react-icons';
+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<Error | undefined>();
+
+  useEffect(() => {
+    hmsDiagnostics.startCameraCheck().catch(err => setError(err));
+  }, []);
+
+  return (
+    <>
+      <TestContainer css={{ display: 'flex', '@lg': { flexDirection: 'column', alignItems: 'center' } }}>
+        {trackID && (
+          <StyledVideoTile.Container
+            css={{
+              w: '90%',
+              height: '$48',
+              mr: '$10',
+              '@lg': { mr: 0, mb: '$10' },
+            }}
+          >
+            <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?" />
+    </>
+  );
+};

package/src/Diagnostics/components.tsx

@@ -0,0 +1,84 @@
+import React, { useContext } from 'react';
+import { Button } from '../Button';
+import { Box, Flex } from '../Layout';
+import { Text } from '../Text';
+import { CSS } from '../Theme';
+import { hmsDiagnostics } from './hms';
+
+export const DiagnosticsSteps: Record<string, string> = {
+  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>>;
+}>({
+  activeStep: 'video',
+  setActiveStep: () => {
+    return;
+  },
+});
+
+export const TestContainer = ({ css, children }: { css?: CSS; children: React.ReactNode }) => {
+  return <Box css={{ p: '$10', ...css }}>{children}</Box>;
+};
+
+export const TestFooter = ({
+  error,
+  ctaText,
+  children,
+}: {
+  ctaText?: string;
+  error?: Error;
+  children?: React.ReactNode;
+}) => {
+  const { activeStep, setActiveStep } = useContext(DiagnosticsContext);
+
+  const onNextStep = () => {
+    if (activeStep === 'audio') {
+      hmsDiagnostics.stopMicCheck();
+    } else if (activeStep === 'video') {
+      hmsDiagnostics.stopCameraCheck();
+    } else if (activeStep === 'connectivity') {
+      hmsDiagnostics.stopConnectivityCheck();
+    }
+
+    const keys = Object.keys(DiagnosticsSteps);
+    setActiveStep(step => keys[keys.indexOf(step) + 1]);
+  };
+
+  return (
+    <Flex
+      css={{
+        py: '$8',
+        px: '$10',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        borderTop: '1px solid $border_default',
+        fontSize: '$sm',
+        lineHeight: '$sm',
+        '@lg': { flexDirection: 'column', gap: '$8' },
+      }}
+    >
+      <Box>{error && <Text css={{ c: '$alert_error_default' }}>Error: {error.message}</Text>}</Box>
+      {children ? (
+        children
+      ) : (
+        <Flex align="center" css={{ gap: '$8', '@lg': { flexDirection: 'column' } }}>
+          <Text css={{ c: '$on_primary_medium' }}>{ctaText}</Text>
+          <Flex align="center" gap="4">
+            <Button onClick={onNextStep} variant="standard" outlined={true}>
+              Skip
+            </Button>
+            <Button disabled={!!error} onClick={onNextStep}>
+              Yes
+            </Button>
+          </Flex>
+        </Flex>
+      )}
+    </Flex>
+  );
+};

package/src/Diagnostics/hms.ts

@@ -0,0 +1,9 @@
+// @ts-check
+import { HMSReactiveStore } from '@100mslive/hms-video-store';
+
+const hms = new HMSReactiveStore();
+export const hmsStore = hms.getStore();
+export const hmsActions = hms.getActions();
+export const hmsNotifications = hms.getNotifications();
+export const hmsStats = hms.getStats();
+export const hmsDiagnostics = hms.getDiagnosticsSDK();

package/src/Diagnostics/index.ts

@@ -0,0 +1 @@
+export { Diagnostics } from './Diagnostics';

package/src/Prebuilt/App.tsx

@@ -1,5 +1,10 @@
 import React, { MutableRefObject, useEffect, useRef } from 'react';
-import { HMSStatsStoreWrapper, HMSStoreWrapper, IHMSNotifications } from '@100mslive/hms-video-store';
+import {
+  HMSDiagnosticsInterface,
+  HMSStatsStoreWrapper,
+  HMSStoreWrapper,
+  IHMSNotifications,
+} from '@100mslive/hms-video-store';
 import { Layout, Logo, Screens, Theme, Typography } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
@@ -65,6 +70,7 @@ export type HMSPrebuiltProps = {
   options?: HMSPrebuiltOptions;
   screens?: Screens;
   authToken?: string;
+  leaveOnUnload?: boolean;
   onLeave?: () => void;
   onJoin?: () => void;
   /**
@@ -79,6 +85,7 @@ export type HMSPrebuiltRefType = {
   hmsStore: HMSStoreWrapper;
   hmsStats: HMSStatsStoreWrapper;
   hmsNotifications: IHMSNotifications;
+  hmsDiagnostics: HMSDiagnosticsInterface;
 };
 
 export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
@@ -92,6 +99,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       themes,
       options: { userName = '', userId = '', endpoints } = {},
       screens,
+      leaveOnUnload = true,
       onLeave,
       onJoin,
     },
@@ -107,6 +115,7 @@ 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 = {
@@ -114,6 +123,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         hmsStats,
         hmsStore,
         hmsNotifications,
+        hmsDiagnostics,
       };
     }, []);
 
@@ -188,6 +198,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             store={reactiveStore.current?.hmsStore}
             notifications={reactiveStore.current?.hmsNotifications}
             stats={reactiveStore.current?.hmsStats}
+            leaveOnUnload={leaveOnUnload}
           >
             <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
               <RoomLayoutContext.Consumer>

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

@@ -22,6 +22,8 @@ import { useEmojiPickerStyles } from './useEmojiPickerStyles';
 import { useDefaultChatSelection, useLandscapeHLSStream, useMobileHLSStream } from '../../common/hooks';
 import { CHAT_SELECTOR, SESSION_STORE_KEY } from '../../common/constants';
 
+const CHAT_MESSAGE_LIMIT = 2000;
+
 const TextArea = styled('textarea', {
   width: '100%',
   bg: 'transparent',
@@ -90,6 +92,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
   const isMwebHLSStream = useMobileHLSStream();
+  const [messageLengthExceeded, setMessageLengthExceeded] = useState(false);
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
   useEffect(() => {
@@ -146,6 +149,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
     if (messageElement) {
       messageElement.value = draftMessage;
       updateInputHeight();
+      setMessageLengthExceeded(draftMessage.length > CHAT_MESSAGE_LIMIT);
     }
   }, [draftMessage]);
 
@@ -230,6 +234,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
           >
             {children}
             <TextArea
+              maxLength={CHAT_MESSAGE_LIMIT + 10}
               css={{
                 c: '$on_surface_high',
                 '&:valid ~ .send-msg': { color: '$on_surface_high' },
@@ -243,7 +248,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               autoFocus={!(isMobile || isLandscapeHLSStream)}
               onKeyPress={async event => {
                 if (event.key === 'Enter') {
-                  if (!event.shiftKey) {
+                  if (!event.shiftKey && !messageLengthExceeded) {
                     event.preventDefault();
                     await sendMessage();
                   }
@@ -251,7 +256,10 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
               }}
               autoComplete="off"
               aria-autocomplete="none"
-              onChange={updateInputHeight}
+              onChange={e => {
+                updateInputHeight();
+                setMessageLengthExceeded(e.target.value.length > CHAT_MESSAGE_LIMIT);
+              }}
               onBlur={resetInputHeight}
               onPaste={e => e.stopPropagation()}
               onCut={e => e.stopPropagation()}
@@ -269,6 +277,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
             <BaseIconButton
               className="send-msg"
               onClick={sendMessage}
+              disabled={messageLengthExceeded}
               css={{
                 ml: 'auto',
                 height: 'max-content',
@@ -295,6 +304,11 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
           )}
         </Flex>
       )}
+      {messageLengthExceeded && (
+        <Text variant="xs" css={{ color: '$alert_error_default', fontWeight: '$semiBold', mt: '$1', ml: '$7' }}>
+          Message cannot exceed 2000 characters
+        </Text>
+      )}
     </Box>
   );
 };

package/src/Prebuilt/components/StatsForNerds.jsx

@@ -13,6 +13,7 @@ import { Dropdown } from '../../Dropdown';
 import { Label } from '../../Label';
 import { Box, Flex } from '../../Layout';
 import { Dialog } from '../../Modal';
+import { formatBytes } from '../../Stats';
 import { Switch } from '../../Switch';
 import { Text } from '../../Text';
 import { DialogDropdownTrigger } from '../primitives/DropdownTrigger';
@@ -245,16 +246,3 @@ const StatsRow = React.memo(({ label, value }) => (
     </Text>
   </Box>
 ));
-
-const formatBytes = (bytes, unit = 'B', decimals = 2) => {
-  if (bytes === undefined) return '-';
-  if (bytes === 0) return '0 ' + unit;
-
-  const k = 1024;
-  const dm = decimals < 0 ? 0 : decimals;
-  const sizes = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'].map(size => size + unit);
-
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
-};

package/src/Stats/index.tsx

@@ -1 +1,2 @@
 export { VideoTileStats } from './Stats';
+export { formatBytes } from './formatBytes';

package/src/index.ts

@@ -38,3 +38,4 @@ export * from './Prebuilt';
 export * from './Progress';
 export * from './context/DialogContext';
 export * from './TextArea';
+export * from './Diagnostics';