@100mslive/react-native-room-kit 1.1.8 → 1.1.9-beta.1

package/src/components/HLSDescriptionPane.tsx

@@ -16,6 +16,7 @@ import {
 import { HLSAnimatedDescriptionPane } from './HLSAnimatedDescriptionPane';
 import { setHlsDescriptionPaneVisible } from '../redux/actions';
 import type { RootState } from '../redux';
+import { splitLinksAndContent } from '../utils/functions';
 
 interface HLSDescriptionPaneProps {}
 
@@ -74,7 +75,7 @@ export const HLSDescriptionPane: React.FC<HLSDescriptionPaneProps> = () => {
   const handleLinkPress = async (url: string) => {
     const canOpen = await Linking.canOpenURL(url);
     if (canOpen) {
-      Linking.openURL(url);
+      await Linking.openURL(url);
     }
   };
 
@@ -134,35 +135,3 @@ const styles = StyleSheet.create({
     marginHorizontal: 16,
   },
 });
-
-function splitLinksAndContent(
-  text: string,
-  { pressHandler, style }: any
-): string | (string | React.ReactElement)[] {
-  // Regular expression to find links in a string
-  const pattern = /http[s]?:\/\/\S+/g;
-
-  // Find all links in the text
-  const links = text.match(pattern) || [];
-
-  if (links.length <= 0) {
-    return text;
-  }
-
-  // Split the text into an array of links and content
-  const parts = text.replace(pattern, '^<link>^').split('^');
-
-  return parts.map((p, i) => {
-    if (p !== '<link>') {
-      return p;
-    }
-    const link = links.pop();
-    return link ? (
-      <Text key={link + i} onPress={() => pressHandler(link)} style={style}>
-        {link}
-      </Text>
-    ) : (
-      p
-    );
-  });
-}

package/src/components/HMSHLSMessage.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Platform,
   TouchableOpacity,
+  Linking,
 } from 'react-native';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 
@@ -19,6 +20,7 @@ import { PinIcon, ThreeDotsIcon } from '../Icons';
 import { setSelectedMessageForAction } from '../redux/actions';
 import { ModalTypes } from '../utils/types';
 import type { RootState } from '../redux';
+import { splitLinksAndContent } from '../utils/functions';
 
 interface HMSHLSMessageProps {
   message: HMSMessage;
@@ -63,6 +65,9 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
       pinnedLabel: {
         color: '#ffffff',
       },
+      link: {
+        color: theme.palette.primary_bright,
+      },
     }),
     []
   );
@@ -81,6 +86,13 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
       message.sender &&
       message.sender.peerID !== localPeerId); // can remove participants
 
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      await Linking.openURL(url);
+    }
+  };
+
   return (
     <View style={styles.container}>
       {isPinned ? (
@@ -106,7 +118,10 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
             {'   '}
           </Text>
 
-          {message.message}
+          {splitLinksAndContent(message.message, {
+            pressHandler: handleLinkPress,
+            style: hmsRoomStyles.link,
+          })}
         </Text>
 
         {canTakeAction ? (

package/src/components/HMSManageCameraRotation.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { RotateCameraIcon } from '../Icons';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
@@ -8,17 +9,25 @@ import { PressableIcon } from './PressableIcon';
 import { useHMSRoomStyle } from '../hooks-util';
 import { TestIds } from '../utils/constants';
 
-export const HMSManageCameraRotation = () => {
+interface HMSManageCameraRotationProps extends RotateCameraButtonProps {}
+
+export const HMSManageCameraRotation: React.FC<
+  HMSManageCameraRotationProps
+> = ({ style }) => {
   const canPublishVideo = useCanPublishVideo();
 
   if (!canPublishVideo) {
     return null;
   }
 
-  return <RotateCameraButton />;
+  return <RotateCameraButton style={style} />;
 };
 
-const RotateCameraButton = () => {
+interface RotateCameraButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const RotateCameraButton: React.FC<RotateCameraButtonProps> = ({ style }) => {
   const hmsActions = useHMSActions();
   // TODO: set initial `isLocalVideoMuted` state value as per initial track setting
   const isLocalVideoMuted = useSelector(
@@ -43,9 +52,14 @@ const RotateCameraButton = () => {
 
   return (
     <PressableIcon
-      testID={isLocalVideoMuted ? TestIds.switch_camera_disabled : TestIds.switch_camera}
+      testID={
+        isLocalVideoMuted
+          ? TestIds.switch_camera_disabled
+          : TestIds.switch_camera
+      }
       onPress={handleVideoMuteTogglePress}
       disabled={isLocalVideoMuted}
+      style={style}
     >
       <RotateCameraIcon style={cameraIconStyles} />
     </PressableIcon>

package/src/components/HMSManageLocalVideo.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { RootState } from '../redux';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
@@ -7,17 +8,27 @@ import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
 import { TestIds } from '../utils/constants';
 
-export const HMSManageLocalVideo = () => {
+interface HMSManageLocalVideoProps extends ToggleVideoMuteButtonProps {}
+
+export const HMSManageLocalVideo: React.FC<HMSManageLocalVideoProps> = ({
+  style,
+}) => {
   const canPublishVideo = useCanPublishVideo();
 
   if (!canPublishVideo) {
     return null;
   }
 
-  return <ToggleVideoMuteButton />;
+  return <ToggleVideoMuteButton style={style} />;
 };
 
-const ToggleVideoMuteButton = () => {
+interface ToggleVideoMuteButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const ToggleVideoMuteButton: React.FC<ToggleVideoMuteButtonProps> = ({
+  style,
+}) => {
   const hmsActions = useHMSActions();
   // TODO: set initial `isLocalVideoMuted` state value as per initial track setting
   const isLocalVideoMuted = useSelector(
@@ -32,9 +43,14 @@ const ToggleVideoMuteButton = () => {
 
   return (
     <PressableIcon
-      testID={!!isLocalVideoMuted ? TestIds.camera_muted_btn : TestIds.camera_unmuted_btn}
+      testID={
+        !!isLocalVideoMuted
+          ? TestIds.camera_muted_btn
+          : TestIds.camera_unmuted_btn
+      }
       onPress={handleVideoMuteTogglePress}
       active={isLocalVideoMuted}
+      style={style}
     >
       <CameraIcon muted={!!isLocalVideoMuted} />
     </PressableIcon>

package/src/components/HMSManageVirtualBackground.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { VirtualBackgroundIcon } from '../Icons';
+import { useCanPublishVideo } from '../hooks-sdk';
+import type { RootState } from '../redux';
+import { PressableIcon } from './PressableIcon';
+import { useHMSRoomStyle, useModalType } from '../hooks-util';
+import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
+import { ModalTypes } from '../utils/types';
+
+interface HMSManageVirtualBackgroundProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export const HMSManageVirtualBackground: React.FC<
+  HMSManageVirtualBackgroundProps
+> = ({ style }) => {
+  const canPublishVideo = useCanPublishVideo();
+  const videoPluginExists = useSelector(
+    (state: RootState) => !!state.hmsStates.videoPlugin
+  );
+
+  if (!canPublishVideo || !videoPluginExists) {
+    return null;
+  }
+
+  return <VirtualBackgroundButton style={style} />;
+};
+
+interface VirtualBackgroundButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const VirtualBackgroundButton: React.FC<VirtualBackgroundButtonProps> = ({
+  style,
+}) => {
+  const { handleModalVisibleType } = useModalType();
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const videoPluginExists = useSelector(
+    (state: RootState) => !!state.hmsStates.videoPlugin
+  );
+
+  const handleVideoMuteTogglePress = async () => {
+    if (isLocalVideoMuted || !videoPluginExists) {
+      return;
+    }
+    handleModalVisibleType(ModalTypes.VIRTUAL_BACKGROUND);
+  };
+
+  const cameraIconStyles = useHMSRoomStyle(
+    (theme) => ({
+      tintColor: isLocalVideoMuted
+        ? theme.palette.on_surface_low
+        : theme.palette.on_surface_high,
+    }),
+    [isLocalVideoMuted]
+  );
+
+  return (
+    <React.Fragment>
+      <PressableIcon
+        onPress={handleVideoMuteTogglePress}
+        disabled={isLocalVideoMuted}
+        style={style}
+      >
+        <VirtualBackgroundIcon style={cameraIconStyles} />
+      </PressableIcon>
+
+      <VirtualBackgroundBottomSheet />
+    </React.Fragment>
+  );
+};

package/src/components/HMSOverlayMessageView.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Platform,
   TouchableOpacity,
+  Linking,
 } from 'react-native';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -20,6 +21,7 @@ import { PinIcon, ThreeDotsIcon } from '../Icons';
 import { setSelectedMessageForAction } from '../redux/actions';
 import { ModalTypes } from '../utils/types';
 import type { RootState } from '../redux';
+import { splitLinksAndContent } from '../utils/functions';
 
 interface HMSMessageProps {
   message: HMSMessage;
@@ -66,6 +68,9 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       pinnedLabel: {
         color: '#ffffff',
       },
+      link: {
+        color: _theme.palette.primary_bright,
+      },
     }),
     []
   );
@@ -84,6 +89,13 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       message.sender &&
       message.sender.peerID !== localPeerId); // can remove participants
 
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      await Linking.openURL(url);
+    }
+  };
+
   return (
     <View style={styles.container}>
       {isPinned ? (
@@ -126,7 +138,10 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       </View>
 
       <Text style={[styles.message, hmsRoomStyles.message]}>
-        {message.message}
+        {splitLinksAndContent(message.message, {
+          pressHandler: handleLinkPress,
+          style: hmsRoomStyles.link,
+        })}
       </Text>
     </View>
   );

package/src/components/HMSRoomOptions.tsx

@@ -23,6 +23,7 @@ import { ChangeNameModalContent } from './ChangeNameModalContent';
 import { StopRecordingModalContent } from './StopRecordingModalContent';
 import { TestIds } from '../utils/constants';
 import { PollsAndQuizBottomSheet } from './PollsAndQuizBottomSheet';
+import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
 
 interface HMSRoomOptionsProps {}
 
@@ -74,6 +75,8 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
       <PollsAndQuizBottomSheet />
 
+      <VirtualBackgroundBottomSheet />
+
       <BottomSheet
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}

package/src/components/Preview.tsx

@@ -37,6 +37,7 @@ import { hexToRgbA } from '../utils/theme';
 import { HMSManageNoiseCancellation } from './HMSManageNoiseCancellation';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
+import { HMSManageVirtualBackground } from './HMSManageVirtualBackground';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
@@ -174,11 +175,17 @@ export const Preview = ({
                 <View style={styles.micAndCameraControls}>
                   <HMSManageLocalAudio />
 
-                  <View style={styles.manageLocalButtonWrapper}>
-                    <HMSManageLocalVideo />
-                  </View>
+                  <HMSManageLocalVideo
+                    style={styles.manageLocalButtonWrapper}
+                  />
 
-                  <HMSManageCameraRotation />
+                  <HMSManageCameraRotation
+                    style={styles.manageLocalButtonWrapper}
+                  />
+
+                  <HMSManageVirtualBackground
+                    style={styles.manageLocalButtonWrapper}
+                  />
                 </View>
 
                 {showNoiseCancellationButton && <HMSManageNoiseCancellation />}
@@ -242,7 +249,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   manageLocalButtonWrapper: {
-    marginHorizontal: 16,
+    marginLeft: 16,
   },
   joinButtonRow: {
     marginVertical: 16,

package/src/components/RoomSettingsModalContent.tsx

@@ -16,6 +16,7 @@ import {
   PollVoteIcon,
   RecordingIcon,
   ScreenShareIcon,
+  VirtualBackgroundIcon,
   WaveIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
@@ -32,6 +33,7 @@ import {
 import {
   useCanPublishAudio,
   useCanPublishScreen,
+  useCanPublishVideo,
   useHMSActions,
   useIsAnyStreamingOn,
 } from '../hooks-sdk';
@@ -261,6 +263,28 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
+  // #region Virtual Background
+  const canPublishVideo = useCanPublishVideo();
+  const videoPlugin = useSelector(
+    (state: RootState) => state.hmsStates.videoPlugin
+  );
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const virtualBackgroundApplied = useSelector(
+    (state: RootState) => state.app.selectedVirtualBackground !== null
+  );
+  const handleVirtualBackground = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      if (!videoPlugin || isLocalVideoMuted) return;
+      setModalVisible(ModalTypes.VIRTUAL_BACKGROUND);
+    });
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+  // #endregion
+
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -480,6 +504,15 @@ export const RoomSettingsModalContent: React.FC<
               hide: !showNoiseCancellationButton,
               disabled: isLocalAudioMuted,
             },
+            {
+              id: 'virtual-background',
+              icon: <VirtualBackgroundIcon style={{ width: 20, height: 20 }} />,
+              label: 'Virtual Background',
+              pressHandler: handleVirtualBackground,
+              isActive: virtualBackgroundApplied,
+              hide: !videoPlugin || !canPublishVideo,
+              disabled: isLocalVideoMuted,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {

package/src/components/VirtualBackgroundBottomSheet.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import { Platform, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
+
+import { BottomSheet } from './BottomSheet';
+import { useHMSRoomStyleSheet, useModalType } from '../hooks-util';
+import { useHeaderHeight } from './Header';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
+import { VirtualBackgroundModalContent } from './VirtualBackgroundModalContent';
+
+export const VirtualBackgroundBottomSheet = () => {
+  const headerHeight = useHeaderHeight();
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const {
+    modalVisibleType: modalVisible,
+    handleModalVisibleType: setModalVisible,
+  } = useModalType();
+
+  const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
+    contentContainer: {
+      backgroundColor: theme.palette.surface_dim,
+    },
+  }));
+
+  const dismissModal = () => {
+    setModalVisible(ModalTypes.DEFAULT);
+  };
+
+  const containerStyles = [
+    styles.bottomSheet,
+    {
+      marginTop: isLandscapeOrientation
+        ? 0
+        : headerHeight + (Platform.OS === 'android' ? 24 : 0),
+    },
+    hmsRoomStyles.contentContainer,
+  ];
+
+  return (
+    <BottomSheet
+      dismissModal={dismissModal}
+      isVisible={
+        !isLocalVideoMuted && modalVisible === ModalTypes.VIRTUAL_BACKGROUND
+      }
+      containerStyle={containerStyles}
+      bottomOffsetSpace={0}
+    >
+      <VirtualBackgroundModalContent dismissModal={dismissModal} />
+    </BottomSheet>
+  );
+};
+
+const styles = StyleSheet.create({
+  bottomSheet: {
+    flex: 1,
+  },
+});