@100mslive/roomkit-react 0.3.24-alpha.5 → 0.3.24-alpha.7

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.24-alpha.5",
+  "version": "0.3.24-alpha.7",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.24-alpha.5",
+    "@100mslive/hls-player": "0.3.24-alpha.7",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.24-alpha.5",
-    "@100mslive/hms-whiteboard": "0.0.14-alpha.5",
-    "@100mslive/react-icons": "0.10.24-alpha.5",
-    "@100mslive/react-sdk": "0.10.24-alpha.5",
+    "@100mslive/hms-virtual-background": "1.13.24-alpha.7",
+    "@100mslive/hms-whiteboard": "0.0.14-alpha.7",
+    "@100mslive/react-icons": "0.10.24-alpha.7",
+    "@100mslive/react-sdk": "0.10.24-alpha.7",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "dc498407583217b11dc845e391849808c2ace147"
+  "gitHead": "8198b4df726edf43ed865408a68720e9bd4c9174"
 }

package/src/Layout/Flex.tsx

@@ -48,7 +48,7 @@ export const Flex = styled('div', {
       baseline: {
         alignItems: 'baseline',
       },
-      strech: {
+      stretch: {
         alignItems: 'stretch',
       },
     },

package/src/Prebuilt/App.tsx

@@ -27,7 +27,6 @@ import { PIPProvider } from './components/PIP/PIPProvider';
 import { PreviewScreen } from './components/Preview/PreviewScreen';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
-import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { Sheet } from './layouts/Sheet';
 import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { DialogContainerProvider } from '../context/DialogContext';
@@ -130,7 +129,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     useEffect(() => {
       // leave room when component unmounts
       return () => {
-        VBHandler.reset();
         reactiveStore?.current?.hmsActions.leave();
       };
     }, []);

package/src/Prebuilt/AppStateContext.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import { match, P } from 'ts-pattern';
 import { HMSRoomState, selectRoomState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
@@ -79,6 +80,7 @@ export const useAppStateManager = () => {
               .otherwise(() => PrebuiltStates.MEETING);
           });
           VBHandler.reset();
+          hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
           redirectToLeave(1000); // to clear toasts after 1 second
         },
       )
@@ -88,6 +90,6 @@ export const useAppStateManager = () => {
       .otherwise(() => {
         // do nothing
       });
-  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
+  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]);
   return { activeState, rejoin };
 };

package/src/Prebuilt/components/AuthToken.tsx

@@ -107,8 +107,8 @@ const AuthToken = React.memo<{
 const convertError = (error: HMSException) => {
   console.error('[error]', { error });
   console.warn(
-    'If you think this is a mistake on our side, please reach out to us over Discord:',
-    'https://discord.com/invite/kGdmszyzq2',
+    'If you think this is a mistake on our side, please reach out to us on Dashboard:',
+    'https://dashboard.100ms.live/dashboard',
   );
   return match([error.action, error.code])
     .with(['GET_TOKEN', 403], () => ({

package/src/Prebuilt/components/ErrorBoundary.jsx

@@ -49,8 +49,8 @@ export class ErrorBoundary extends Component {
                 <Text>Message: ${this.state.error}</Text>
                 <br />
                 Please reload to see if it works. If you think this is a mistake on our side, please reach out to us on
-                <a href="https://discord.com/invite/kGdmszyzq2" target="_blank" rel="noreferrer">
-                  Discord
+                <a href="https://dashboard.100ms.live/dashboard" target="_blank" rel="noreferrer">
+                  Dashboard
                 </a>
               </div>
               <Flex>

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

@@ -1,5 +1,10 @@
 import React, { useEffect, useState } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSNotificationTypes,
+  HMSTrackException,
+  HMSTrackExceptionTrackType,
+  useHMSNotifications,
+} from '@100mslive/react-sdk';
 import { Button, Dialog, Text } from '../../..';
 // @ts-ignore: No implicit Any
 import { DialogContent, DialogRow } from '../../primitives/DialogContent';
@@ -24,6 +29,11 @@ export function DeviceInUseError() {
     if (!error || error.code !== 3003) {
       return;
     }
+    const errorTrackExceptionType = (error as HMSTrackException)?.trackType;
+    const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO;
+    const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO;
+    const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO;
+    const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN;
 
     const errorMessage = error?.message;
     ToastManager.addToast({
@@ -35,10 +45,7 @@ export function DeviceInUseError() {
       ),
     });
 
-    const hasAudio = errorMessage.includes('audio');
-    const hasVideo = errorMessage.includes('video');
-    const hasScreen = errorMessage.includes('screen');
-    if (hasAudio && hasVideo) {
+    if (hasAudioVideo) {
       setDeviceType('camera and microphone');
     } else if (hasAudio) {
       setDeviceType('microphone');

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

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { HMSException, HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSException,
+  HMSNotificationTypes,
+  HMSTrackException,
+  HMSTrackExceptionTrackType,
+  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';
@@ -26,11 +32,13 @@ export const PermissionErrorModal = ({ error }: { error?: HMSException }) => {
     ) {
       return;
     }
-    const errorMessage = error?.message;
-    const hasAudio = errorMessage.includes('audio');
-    const hasVideo = errorMessage.includes('video');
-    const hasScreen = errorMessage.includes('screen');
-    if (hasAudio && hasVideo) {
+
+    const errorTrackExceptionType = (error as HMSTrackException)?.trackType;
+    const hasAudio = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO;
+    const hasVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.VIDEO;
+    const hasAudioVideo = errorTrackExceptionType === HMSTrackExceptionTrackType.AUDIO_VIDEO;
+    const hasScreen = errorTrackExceptionType === HMSTrackExceptionTrackType.SCREEN;
+    if (hasAudioVideo) {
       setDeviceType('camera and microphone');
     } else if (hasAudio) {
       setDeviceType('microphone');

package/src/Prebuilt/components/VideoLayouts/Grid.tsx

@@ -20,7 +20,7 @@ export const Grid = React.forwardRef<HTMLDivElement, { tiles: TrackWithPeerAndDi
           justifyContent: 'center',
           flexFlow: 'row wrap',
           minHeight: 0,
-          '@md': { gap: edgeToEdge ? 0 : '$4' },
+          '@lg': { gap: edgeToEdge ? 0 : '$4' },
         }}
       >
         {tiles?.map(tile => {

package/src/Prebuilt/components/hooks/useTileLayout.tsx

@@ -77,7 +77,7 @@ export const useTileLayout = ({
         return rowElements;
       });
 
-      const gap = edgeToEdge ? 0 : 8; // gap between flex items
+      const gap = edgeToEdge && isMobile ? 0 : 8; // gap between flex items
       const maxHeight = height - (maxRows - 1) * gap;
       const maxRowHeight = maxHeight / matrix.length;
       const aspectRatios =
@@ -115,11 +115,10 @@ export const useTileLayout = ({
             }
           }
         }
-        // Beam layout breaks at 480p resolution because the gap of $4 between tiles is not accounted for
-        // There could be more such cases, this is a generic fix
+
         for (let i = 0; i < row.length; i++) {
-          row[i].width = tileWidth - (gap / maxCols) * (maxCols - 1);
-          row[i].height = tileHeight - (gap / maxRows) * (maxRows - 1);
+          row[i].width = tileWidth;
+          row[i].height = tileHeight;
         }
       }
     }