@100mslive/react-native-room-kit 1.2.3 → 1.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -117,7 +117,7 @@
     "ai"
   ],
   "repository": "https://github.com/100mslive/react-native-hms",
-  "author": "Yogesh <yogesh@100ms.live> (https://www.100ms.live/), Jatin <jatin.nagar@100ms.live> (https://www.100ms.live/)",
+  "author": "Yogesh Singh (https://www.100ms.live/)",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/100mslive/react-native-hms/issues"
@@ -127,20 +127,16 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@100mslive/types-prebuilt": "^0.12.11",
-    "@react-navigation/native": "^6.0.8",
-    "react-redux": "^7.2.4",
-    "redux": "^4.1.0"
+    "@100mslive/types-prebuilt": "0.12.12"
   },
   "devDependencies": {
-    "@100mslive/react-native-video-plugin": "1.0.0",
+    "@100mslive/react-native-video-plugin": "1.1.3",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
     "@release-it/conventional-changelog": "^5.0.0",
     "@types/jest": "^28.1.2",
-    "@types/react": "~17.0.21",
-    "@types/react-native": "^0.64.5",
+    "@types/react": "^18.3.1",
     "commitlint": "^17.0.2",
     "del-cli": "^5.0.0",
     "eslint": "^8.4.1",
@@ -149,35 +145,46 @@
     "jest": "^28.1.1",
     "pod-install": "^0.1.0",
     "prettier": "^2.0.5",
-    "react": "18.2.0",
-    "react-native": "0.71.19",
+    "react": "18.3.1",
+    "react-native": "0.77.3",
     "react-native-builder-bob": "^0.21.2",
     "react-native-image-picker": "^7.1.2",
     "release-it": "^15.0.0",
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.11.0",
-    "@react-native-community/blur": "^4.3.2",
-    "@react-native-masked-view/masked-view": "^0.2.9",
-    "@shopify/flash-list": "^1.4.3",
-    "lottie-react-native": "5.1.6",
+    "@100mslive/react-native-hms": "1.12.1",
+    "@react-native-community/blur": "^4.4.0",
+    "@react-native-masked-view/masked-view": "^0.3.0",
+    "@react-navigation/native": "^6.1.0",
+    "@shopify/flash-list": "^1.7.0",
+    "lottie-react-native": ">=7.0.0",
     "react": "*",
-    "react-native": "*",
-    "react-native-gesture-handler": "~2.15.0",
-    "react-native-linear-gradient": "^2.7.3",
+    "react-native": ">=0.77.3",
+    "react-native-gesture-handler": ">=2.22.0",
+    "react-native-linear-gradient": "^2.8.0",
     "react-native-modal": "^13.0.1",
-    "react-native-reanimated": ">=2.17.0",
-    "react-native-safe-area-context": "^3.3.0",
+    "react-native-reanimated": ">=3.0.0",
+    "react-native-safe-area-context": "^5.0.0",
     "react-native-simple-toast": "^1.1.3",
-    "react-native-webview": "^13.8.7"
+    "react-native-webview": "^13.12.0",
+    "react-redux": "^8.0.0",
+    "redux": "^4.2.0"
   },
   "additionalDependencies": {
-    "@100mslive/react-native-video-plugin": "1.0.0",
+    "@100mslive/react-native-video-plugin": "1.1.0",
     "react-native-image-picker": "^7.1.2"
   },
+  "overrides": {
+    "fast-xml-parser": "^5.3.4",
+    "vm2": ">=3.10.2",
+    "node-forge": ">=1.3.2"
+  },
   "resolutions": {
-    "@types/react": "17.0.21"
+    "@types/react": "^18.3.1",
+    "fast-xml-parser": "^5.3.4",
+    "vm2": ">=3.10.2",
+    "node-forge": ">=1.3.2"
   },
   "engines": {
     "node": ">= 16.0.0"

package/src/components/AnimatedFooter.tsx

@@ -10,6 +10,7 @@ import { useFooterHeight } from './Footer';
 
 interface AnimatedFooterProps {
   offset: SharedValue<number>;
+  children?: React.ReactNode;
 }
 
 export const AnimatedFooter: React.FC<AnimatedFooterProps> = ({

package/src/components/AnimatedHLSFooter.tsx

@@ -4,13 +4,14 @@ import Animated, {
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated';
-import type { SharedValue } from 'react-native-reanimated';
+import type { SharedValue, AnimatedStyle } from 'react-native-reanimated';
 
 import { useFooterHeight } from './Footer';
 
 interface AnimatedHLSFooterProps {
   offset: SharedValue<number>;
-  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
+  children?: React.ReactNode;
 }
 
 export const AnimatedHLSFooter: React.FC<AnimatedHLSFooterProps> = ({

package/src/components/AnimatedHeader.tsx

@@ -11,6 +11,7 @@ import { useHeaderHeight } from './Header';
 
 export interface AnimatedHeaderProps {
   offset: SharedValue<number>;
+  children?: React.ReactNode;
 }
 
 export const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({

package/src/components/Chat/PinnedMessages.tsx

@@ -286,7 +286,7 @@ export const _PinnedMessages: React.FC<PinnedMessagesProps> = ({
   const _keyExtractor = React.useCallback((item: PinnedMessage) => item.id, []);
 
   const _onContentSizeChange = React.useCallback(
-    (_w, _h) => {
+    (_w: number, _h: number) => {
       listRef.current?.scrollToOffset({
         offset: listHeight * selectedPinnedMessageIndexRef.current,
         animated: false,

package/src/components/DefaultModal.tsx

@@ -11,6 +11,7 @@ import { CloseIcon } from '../Icons';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 
 export interface DefaultModalProps {
+  children?: React.ReactNode;
   modalVisible: boolean;
   setModalVisible: any;
   animationIn?: SupportedAnimation;

package/src/components/GridView.tsx

@@ -227,7 +227,10 @@ const RegularTiles = React.forwardRef<
 
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const _keyExtractor = React.useCallback((item) => item[0]?.id, []);
+  const _keyExtractor = React.useCallback(
+    (item: PeerTrackNode[]) => item[0]?.id || '',
+    []
+  );
 
   const _handleViewableItemsChanged = React.useCallback(
     (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
@@ -244,7 +247,7 @@ const RegularTiles = React.forwardRef<
   );
 
   const _renderItem = React.useCallback(
-    ({ item }) => {
+    ({ item }: { item: PeerTrackNode[] }) => {
       return (
         <TilesContainer
           onPeerTileMorePress={onPeerTileMorePress}
@@ -310,7 +313,7 @@ const ScreenshareTiles = React.forwardRef<
     (state: RootState) => state.app.screensharePeerTrackNodes
   );
 
-  const _keyExtractor = React.useCallback((item) => item.id, []);
+  const _keyExtractor = React.useCallback((item: PeerTrackNode) => item.id, []);
 
   const _handleViewableItemsChanged = React.useCallback(
     (info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
@@ -328,7 +331,7 @@ const ScreenshareTiles = React.forwardRef<
   const tileWidth = safeWidth;
 
   const _renderItem = React.useCallback(
-    ({ item }) => {
+    ({ item }: { item: PeerTrackNode }) => {
       return (
         <Tile
           height={'100%'}

package/src/components/HLSAnimatedDescriptionPane.tsx

@@ -11,6 +11,7 @@ export interface HLSAnimatedDescriptionPaneProps {
   sharedValue: SharedValue<number>;
   height: number;
   style?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  children?: React.ReactNode;
 }
 
 export const HLSAnimatedDescriptionPane: React.FC<

package/src/components/HLSManageChatTextInput.tsx

@@ -39,7 +39,7 @@ export const HLSManageChatTextInput = () => {
   const keyboardAvoidingStyles = React.useMemo(
     () => ({
       active: { width: chatWrapperConstraints.width - 32 },
-      inactive: { width: '100%' },
+      inactive: { width: '100%' as const },
     }),
     [chatWrapperConstraints]
   );

package/src/components/HMSBaseButton.tsx

@@ -45,7 +45,9 @@ export const HMSBaseButton: React.FC<HMSBaseButtonProps> = ({
   wrapWithGestureDetector,
   useTouchableOpacity,
 }) => {
-  const Touchable = (useTouchableOpacity ? TouchableOpacity : TouchableHighlight) as React.ElementType;
+  const Touchable = (
+    useTouchableOpacity ? TouchableOpacity : TouchableHighlight
+  ) as React.ElementType;
 
   const button = (
     <Touchable

package/src/components/HMSKeyboardAvoidingView.android.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import Animated from 'react-native-reanimated'; // useDerivedValue, // useAnimatedStyle, // useAnimatedKeyboard,
+import type { AnimatedStyle } from 'react-native-reanimated';
 
 export interface HMSKeyboardAvoidingViewProps {
-  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  children?: React.ReactNode;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   bottomOffset?: number;
 }
 

package/src/components/HMSKeyboardAvoidingView.tsx

@@ -6,12 +6,13 @@ import Animated, {
   useAnimatedStyle,
   useDerivedValue,
 } from 'react-native-reanimated';
-import type { SharedValue } from 'react-native-reanimated';
+import type { SharedValue, AnimatedStyle } from 'react-native-reanimated';
 
 import { useKeyboardState } from '../hooks-util';
 
 export interface HMSKeyboardAvoidingViewProps {
-  style?: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>>;
+  children?: React.ReactNode;
+  style?: StyleProp<AnimatedStyle<ViewStyle>>;
   styleWhenInactive?: ViewStyle;
   styleWhenActive?: ViewStyle;
   bottomOffset?: number | SharedValue<number>;

package/src/components/OverlayContainer.tsx

@@ -4,7 +4,9 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 import Animated from 'react-native-reanimated';
 
-type OverlayContainerProps = {};
+type OverlayContainerProps = {
+  children?: React.ReactNode;
+};
 
 export const OverlayContainer: React.FC<OverlayContainerProps> & {
   Overlay: typeof Overlay;
@@ -14,6 +16,7 @@ export const OverlayContainer: React.FC<OverlayContainerProps> & {
 
 export type OverlayProps = {
   animatedStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+  children?: React.ReactNode;
 };
 
 const Overlay: React.FC<OverlayProps> = ({ children, animatedStyle }) => {

package/src/components/PeerRTCStatsView.tsx

@@ -35,7 +35,7 @@ const PeerRTCStatsView: React.FC<PeerRTCStatsViewProps> = ({
   return (
     <View>
       {videoTrackStats && 'layer' in videoTrackStats ? (
-        <Text style={styles.statsTitle}>{videoTrackStats.layer}</Text>
+        <Text style={styles.statsTitle}>{String(videoTrackStats.layer)}</Text>
       ) : null}
 
       <Text style={styles.statsText}>

package/src/components/PeerVideoTile/HMSPinchGesture.tsx

@@ -8,6 +8,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 export interface HMSPinchGestureProps {
+  children?: React.ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 

package/src/components/PressableIcon.tsx

@@ -6,7 +6,7 @@ import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { useHMSRoomStyleSheet, useIsHLSViewer } from '../hooks-util';
 
 interface PressableIconProps extends Omit<TouchableOpacityProps, 'children'> {
-  children: Pick<TouchableOpacityProps, 'children'>;
+  children?: React.ReactNode;
   active?: boolean;
   rounded?: boolean;
   border?: boolean;

package/src/components/TilesContainer.tsx

@@ -131,17 +131,29 @@ export { TilesContainer };
 
 // Utility Functions
 
-const oneTileStyle = { width: '100%', height: '100%' }; // 1 Column Layout
-const twoTileStyle = { width: '100%', height: '49.7222%' }; // 1 Column Layout
-const threeTileStyle = { width: '100%', height: '33%' }; // 1 Column Layout
+const oneTileStyle = { width: '100%' as const, height: '100%' as const }; // 1 Column Layout
+const twoTileStyle = { width: '100%' as const, height: '49.7222%' as const }; // 1 Column Layout
+const threeTileStyle = { width: '100%' as const, height: '33%' as const }; // 1 Column Layout
 
-const fourTileStyle = { width: '49.5%', height: '100%' }; // Grid Layout when Width and Height has no-correlatiom
-const fiveAndSixTileStyle = { width: '49.5%', aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
+const fourTileStyle = { width: '49.5%' as const, height: '100%' as const }; // Grid Layout when Width and Height has no-correlatiom
+const fiveAndSixTileStyle = { width: '49.5%' as const, aspectRatio: 1 }; // Grid Layout when width and Height as fixed aspectRatio
 
-const oneTileStyleLandscape = { width: '100%', height: '100%' };
-const twoTileStyleLandscape = { width: '49.7222%', height: '100%' };
-const threeTileStyleLandscape = { width: '33%', height: '100%' };
-const fourTileStyleLandscape = { width: '50%', height: '50%' };
+const oneTileStyleLandscape = {
+  width: '100%' as const,
+  height: '100%' as const,
+};
+const twoTileStyleLandscape = {
+  width: '49.7222%' as const,
+  height: '100%' as const,
+};
+const threeTileStyleLandscape = {
+  width: '33%' as const,
+  height: '100%' as const,
+};
+const fourTileStyleLandscape = {
+  width: '50%' as const,
+  height: '50%' as const,
+};
 
 function computeTileWidthAndHeight(
   totalTiles: number,
@@ -166,7 +178,10 @@ function computeTileWidthAndHeight(
         twoTileStyleLandscape,
         threeTileStyleLandscape,
         fourTileStyleLandscape,
-      ][Math.min(totalTiles - 1, 3)] || { width: '100%', height: '100%' }
+      ][Math.min(totalTiles - 1, 3)] || {
+        width: '100%' as const,
+        height: '100%' as const,
+      }
     );
   }
 
@@ -181,6 +196,9 @@ function computeTileWidthAndHeight(
       threeTileStyle,
       fourTileStyle,
       fiveAndSixTileStyle,
-    ][Math.min(totalTiles - 1, 4)] || { width: '100%', height: '100%' }
+    ][Math.min(totalTiles - 1, 4)] || {
+      width: '100%' as const,
+      height: '100%' as const,
+    }
   );
 }

package/src/components/VirtualBackgroundModalContent.tsx

@@ -8,11 +8,12 @@ import {
   TouchableOpacity,
   ActivityIndicator,
 } from 'react-native';
-import type { ImageRequireSource } from 'react-native';
+import type { ImageRequireSource, ImageURISource } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { HMSTrackType, HMSVideoViewMode } from '@100mslive/react-native-hms';
 import type { HMSVirtualBackgroundPlugin } from '../modules/videoPluginWrapper';
 import { ImagePicker } from '../modules/imagePickerWrapper';
+import { selectLayoutConfigForRole } from '../hooks-util-selectors';
 
 import { BottomSheet } from './BottomSheet';
 import {
@@ -54,6 +55,20 @@ export const VirtualBackgroundModalContent: React.FC<
   );
   const disableAutoPip = useDisableAutoPip();
 
+  // Get layout config for virtual background images
+  const layoutConfig = useSelector((state: RootState) => {
+    try {
+      const currentRole = state.hmsStates.localPeer?.role || null;
+      return selectLayoutConfigForRole(
+        state.hmsStates.layoutConfig,
+        currentRole
+      );
+    } catch (error) {
+      console.warn('[VirtualBackground] Error selecting layout config:', error);
+      return null;
+    }
+  });
+
   const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
     semiBoldSurfaceHigh: {
       color: theme.palette.on_surface_high,
@@ -181,16 +196,91 @@ export const VirtualBackgroundModalContent: React.FC<
     try {
       if (videoPlugin) {
         setShowLoading(true);
+        console.log(
+          '[VirtualBackground] Setting background with asset:',
+          JSON.stringify(asset.src, null, 2)
+        );
+
+        // Check if it's a remote URL that needs dimensions
+        const isRemoteURL =
+          typeof asset.src === 'object' &&
+          'uri' in asset.src &&
+          asset.src.uri &&
+          (asset.src.uri.startsWith('http://') ||
+            asset.src.uri.startsWith('https://'));
+
+        let imageSource = asset.src;
+
+        // For remote URLs, get dimensions if not already present
+        if (isRemoteURL) {
+          const src = asset.src as ImageURISource;
+
+          // Check if width and height are already present
+          if (!src.width || !src.height) {
+            console.log(
+              '[VirtualBackground] Getting dimensions for remote URL:',
+              src.uri
+            );
+
+            try {
+              // Use Image.getSize to get dimensions from remote URL
+              const dimensions = await new Promise<{
+                width: number;
+                height: number;
+              }>((resolve, reject) => {
+                Image.getSize(
+                  src.uri!,
+                  (width, height) => resolve({ width, height }),
+                  (error) => reject(error)
+                );
+              });
+
+              console.log('[VirtualBackground] Got dimensions:', dimensions);
+
+              // Create new source with dimensions
+              imageSource = {
+                uri: src.uri,
+                width: dimensions.width,
+                height: dimensions.height,
+              };
+            } catch (dimensionError) {
+              console.error(
+                '[VirtualBackground] Failed to get image dimensions:',
+                dimensionError
+              );
+              // Continue with original source, might still work
+            }
+          }
+        }
+
         if (selectedVirtualBG === null) {
           await videoPlugin.enable();
         }
-        await videoPlugin.setBackground(asset.src);
+
+        console.log(
+          '[VirtualBackground] Calling setBackground with source:',
+          JSON.stringify(imageSource, null, 2)
+        );
+        await videoPlugin.setBackground(imageSource);
+
         setShowLoading(false);
         dispatch(setSelectedVirtualBackground(asset.label));
+        console.log(
+          '[VirtualBackground] Successfully set background:',
+          asset.label
+        );
       }
     } catch (error) {
       setShowLoading(false);
-      console.error('Error setting virtual background', error);
+      console.error(
+        '[VirtualBackground] Error setting virtual background for:',
+        asset.label
+      );
+      console.error(
+        '[VirtualBackground] Asset source:',
+        JSON.stringify(asset.src, null, 2)
+      );
+      console.error('[VirtualBackground] Error details:', error);
     }
   };
 
@@ -201,6 +291,71 @@ export const VirtualBackgroundModalContent: React.FC<
     localPeer.videoTrack.type === HMSTrackType.VIDEO &&
     !isLocalVideoMuted;
 
+  // Memoize backgrounds from layout config
+  const configBackgrounds = React.useMemo(() => {
+    const bgArray: Array<{
+      label: string;
+      src: ImageRequireSource | { uri: string };
+    }> = [];
+
+    try {
+      // Add virtual background images from layout config
+      if (!layoutConfig) {
+        console.log('[VirtualBackground] No layout config available');
+        return bgArray;
+      }
+
+      const virtualBackgroundConfig =
+        layoutConfig?.screens?.conferencing?.default?.elements
+          ?.virtual_background;
+
+      if (!virtualBackgroundConfig) {
+        console.log(
+          '[VirtualBackground] No virtual background config in layout'
+        );
+        return bgArray;
+      }
+
+      const backgroundMediaList =
+        virtualBackgroundConfig?.background_media || [];
+
+      console.log(
+        '[VirtualBackground] Found',
+        backgroundMediaList.length,
+        'background images in config'
+      );
+
+      // Process each background image
+      backgroundMediaList.forEach((media, index) => {
+        if (media?.url) {
+          // Extract filename from URL or use a generic label
+          const urlParts = media.url.split('/');
+          const filename =
+            urlParts[urlParts.length - 1] || `Background ${index + 1}`;
+
+          console.log(
+            `[VirtualBackground] Adding image ${index + 1}:`,
+            media.url
+          );
+
+          // Add the image - remote URLs will be handled with Image.getSize on demand
+          bgArray.push({
+            label: filename,
+            src: { uri: media.url },
+          });
+        }
+      });
+    } catch (error) {
+      console.error(
+        '[VirtualBackground] Error processing background images:',
+        error
+      );
+    }
+
+    return bgArray;
+  }, [layoutConfig]);
+
+  // Combine config backgrounds with upload button
   const backgrounds: Array<
     | {
         icon: React.JSX.Element;
@@ -212,21 +367,20 @@ export const VirtualBackgroundModalContent: React.FC<
         icon?: undefined;
         onPress?: undefined;
         label: string;
-        src: ImageRequireSource;
+        src: ImageRequireSource | { uri: string };
       }
-  > = [];
-
-  if (ImagePicker) {
-    // backgrounds.push({
-    //   label: 'Camera',
-    //   onPress: handleCameraPress,
-    // });
-    backgrounds.push({
-      icon: <AddImageIcon />,
-      label: 'Upload',
-      onPress: handlePhotoLibraryPress,
-    });
-  }
+  > = [
+    ...configBackgrounds,
+    ...(ImagePicker
+      ? [
+          {
+            icon: <AddImageIcon />,
+            label: 'Upload',
+            onPress: handlePhotoLibraryPress,
+          },
+        ]
+      : []),
+  ];
 
   return (
     <View style={styles.flexView}>