@100mslive/react-native-room-kit 1.2.2 → 1.3.0

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;
+  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/HMSSendMessageInput.tsx

@@ -32,7 +32,7 @@ export const HMSSendMessageInput: React.FC<HMSSendMessageInputProps> = ({
       onChangeText={setMessage}
       placeholder="Send a message..."
       autoCapitalize="sentences"
-      autoCompleteType="off"
+      autoComplete="off"
       containerStyle={[
         styles.inputContainer,
         hmsRoomStyles.containerStyle,

package/src/components/HMSTextInput.tsx

@@ -123,7 +123,7 @@ export const HMSTextInput: React.FC<HMSTextInputProps> = ({
       onChangeText={onChangeText}
       placeholder={resetProps.placeholder ?? 'Enter Name...'}
       autoCapitalize={resetProps.autoCapitalize ?? 'words'}
-      autoCompleteType={resetProps.autoCompleteType ?? 'name'}
+      autoComplete={resetProps.autoComplete ?? 'name'}
       placeholderTextColor={
         resetProps.placeholderTextColor ?? onSurfaceMediumColor
       }

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/PollQuestion.tsx

@@ -363,7 +363,7 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
         value={pollQuestion.title}
         autoFocus={false}
         autoCapitalize="none"
-        autoCompleteType="off"
+        autoComplete="off"
         onChangeText={(value) =>
           onQuestionFieldChange(currentQuestionIndex, 'title', value)
         }
@@ -419,7 +419,7 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
                     style={hmsRoomStyles.optionText}
                     value={option[1]}
                     autoCapitalize="none"
-                    autoCompleteType="off"
+                    autoComplete="off"
                     autoFocus={false}
                     onChangeText={(value) =>
                       onEditPollQuestionOption(currentQuestionIndex, idx, value)
@@ -503,7 +503,7 @@ export const PollQuestion: React.FC<PollQuestionProps> = ({
             value={pollQuestion.pointWeightage}
             autoFocus={false}
             autoCapitalize="none"
-            autoCompleteType="off"
+            autoComplete="off"
             keyboardType={Platform.OS === 'android' ? 'numeric' : 'number-pad'}
             onChangeText={(value) =>
               onQuestionFieldChange(

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,
@@ -152,7 +164,7 @@ function computeTileWidthAndHeight(
 ): {
   width?: ViewStyle['width'];
   height?: ViewStyle['height'];
-  aspectRatio?: ViewStyle['aspectRatio'];
+  aspectRatio?: number | undefined;
 } {
   const { type, isLandscapeOrientation } = config || {
     type: 'default',
@@ -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}>

package/src/hooks-sdk.ts

@@ -44,7 +44,7 @@ export const useHMSActions = () => {
   const store = useStore();
 
   const setLocalAudioEnabled = useCallback(async (enable: boolean) => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const localPeer = state.hmsStates.localPeer;
 
     if (!localPeer) {
@@ -66,7 +66,7 @@ export const useHMSActions = () => {
   }, []);
 
   const setLocalVideoEnabled = useCallback(async (enable: boolean) => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const localPeer = state.hmsStates.localPeer;
 
     if (!localPeer) {
@@ -88,7 +88,7 @@ export const useHMSActions = () => {
   }, []);
 
   const switchCamera = useCallback(async () => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const localPeer = state.hmsStates.localPeer;
 
     if (!localPeer) {
@@ -105,7 +105,7 @@ export const useHMSActions = () => {
   }, []);
 
   const setScreenShareEnabled = useCallback(async (enable: boolean) => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const hmsInstance = state.user.hmsInstance;
 
     if (!hmsInstance) {
@@ -133,7 +133,7 @@ export const useHMSActions = () => {
   }, []);
 
   const changeMetadata = useCallback(async (metadata: string | object) => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const hmsInstance = state.user.hmsInstance;
 
     if (!hmsInstance) {
@@ -152,7 +152,7 @@ export const useHMSActions = () => {
   }, []);
 
   const changeName = useCallback(async (name: string): Promise<void> => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const hmsInstance = state.user.hmsInstance;
 
     if (!hmsInstance) {
@@ -169,7 +169,7 @@ export const useHMSActions = () => {
   }, []);
 
   const raiseLocalPeerHand = useCallback(async (): Promise<void> => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const hmsInstance = state.user.hmsInstance;
 
     if (!hmsInstance) {
@@ -186,7 +186,7 @@ export const useHMSActions = () => {
   }, []);
 
   const lowerLocalPeerHand = useCallback(async (): Promise<void> => {
-    const state: RootState = store.getState();
+    const state = store.getState() as RootState;
     const hmsInstance = state.user.hmsInstance;
 
     if (!hmsInstance) {
@@ -204,7 +204,7 @@ export const useHMSActions = () => {
 
   const lowerRemotePeerHand = useCallback(
     async (peer: HMSPeer): Promise<void> => {
-      const state: RootState = store.getState();
+      const state = store.getState() as RootState;
       const hmsInstance = state.user.hmsInstance;
 
       if (!hmsInstance) {
@@ -224,7 +224,7 @@ export const useHMSActions = () => {
 
   const setRoomMuteLocally = useCallback(
     async (mute: boolean): Promise<void> => {
-      const state: RootState = store.getState();
+      const state = store.getState() as RootState;
       const hmsInstance = state.user.hmsInstance;
 
       if (!hmsInstance) {

package/src/hooks-util.ts

@@ -1936,7 +1936,7 @@ export const useHMSConfig = () => {
     hmsConfig = new HMSConfig({
       authToken: token,
       username: storeState.user.userName,
-      captureNetworkQualityInPreview: true,
+      captureNetworkQualityInPreview: false,
       endpoint: storeState.user.endPoints?.init,
     });
 
@@ -2666,14 +2666,7 @@ export const useBackButtonPress = () => {
       );
 
       return () => {
-        if (typeof subscription.remove === 'function') {
-          subscription.remove();
-        } else {
-          BackHandler.removeEventListener(
-            'hardwareBackPress',
-            backPressHandler
-          );
-        }
+        subscription.remove();
       };
     }
   }, [handleBackPress, handleModalVisibleType]);
@@ -3030,16 +3023,8 @@ export const useKeyboardState = () => {
       if (didHideTimeoutId !== null) {
         clearTimeout(didHideTimeoutId);
       }
-      if ('remove' in didShowSubscription) {
-        didShowSubscription.remove();
-      } else {
-        Keyboard.removeSubscription(didShowSubscription);
-      }
-      if ('remove' in didHideSubscription) {
-        didHideSubscription.remove();
-      } else {
-        Keyboard.removeSubscription(didHideSubscription);
-      }
+      didShowSubscription.remove();
+      didHideSubscription.remove();
     };
   }, []);