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

package/src/Diagnostics/components.tsx

@@ -0,0 +1,96 @@
+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> = {
+  browser: 'Browser Support',
+  video: 'Test Video',
+  audio: 'Test Audio',
+  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 }) => {
+  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',
+        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' },
+      }}
+    >
+      <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

@@ -65,6 +65,7 @@ export type HMSPrebuiltProps = {
   options?: HMSPrebuiltOptions;
   screens?: Screens;
   authToken?: string;
+  leaveOnUnload?: boolean;
   onLeave?: () => void;
   onJoin?: () => void;
   /**
@@ -92,6 +93,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       themes,
       options: { userName = '', userId = '', endpoints } = {},
       screens,
+      leaveOnUnload = true,
       onLeave,
       onJoin,
     },
@@ -188,6 +190,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(() => {
@@ -105,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`;
     }
   }, []);
 
@@ -146,6 +152,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 +237,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 +251,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 +259,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 +280,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 +307,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/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;
-}
+};

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';