@100mslive/react-native-room-kit 1.1.7 → 1.1.9-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.7",
+  "version": "1.1.9-beta.0",
   "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",
@@ -118,6 +118,7 @@
     "redux": "^4.1.0"
   },
   "devDependencies": {
+    "@100mslive/react-native-video-plugin": "git+https://github.com/100mslive/react-native-video-plugin.git",
     "@commitlint/config-conventional": "^17.0.2",
     "@evilmartians/lefthook": "^1.2.2",
     "@react-native-community/eslint-config": "^3.0.2",
@@ -136,11 +137,12 @@
     "react": "17.0.1",
     "react-native": "0.64.4",
     "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.10.4",
+    "@100mslive/react-native-hms": "1.10.6-beta.0",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",
@@ -152,7 +154,12 @@
     "react-native-modal": "^12.1.0",
     "react-native-reanimated": ">=2.17.0",
     "react-native-safe-area-context": "^3.3.0",
-    "react-native-simple-toast": "^1.1.3"
+    "react-native-simple-toast": "^1.1.3",
+    "react-native-webview": "^13.8.7"
+  },
+  "optionalDependencies": {
+    "@100mslive/react-native-video-plugin": "git+https://github.com/100mslive/react-native-video-plugin.git",
+    "react-native-image-picker": "^7.1.2"
   },
   "resolutions": {
     "@types/react": "17.0.21"

package/src/HMSInstanceSetup.tsx

@@ -15,11 +15,15 @@ import {
 import React, { useEffect } from 'react';
 import { batch, useDispatch } from 'react-redux';
 
+import { VideoPlugin } from './modules/videoPluginWrapper';
+import type { HMSVirtualBackgroundPlugin } from './modules/videoPluginWrapper';
+
 import { getJoinConfig } from './utils';
 import {
   saveUserData,
   setHMSInstance,
   setNoiseCancellationPlugin,
+  setVideoPlugin,
 } from './redux/actions';
 import { FullScreenIndicator } from './components/FullScreenIndicator';
 import { clearConfig } from './hooks-util';
@@ -27,7 +31,8 @@ import { store } from './redux';
 import type { HMSIOSScreenShareConfig } from './utils/types';
 
 const getTrackSettings = (
-  noiseCancellationPlugin: HMSNoiseCancellationPlugin
+  noiseCancellationPlugin: HMSNoiseCancellationPlugin,
+  videoPlugin: HMSVirtualBackgroundPlugin | null
 ) => {
   const joinConfig = getJoinConfig();
 
@@ -72,6 +77,7 @@ const getTrackSettings = (
     cameraFacing: HMSCameraFacing.FRONT,
     disableAutoResize: !joinConfig.autoResize,
     forceSoftwareDecoder: joinConfig.softwareDecoder,
+    videoPlugin: videoPlugin || undefined,
   });
 
   return new HMSTrackSettings({
@@ -97,14 +103,15 @@ const getIOSBuildConfig = (): Partial<HMSIOSScreenShareConfig> =>
  * @returns
  */
 const getHmsInstance = async (
-  noiseCancellationPlugin: HMSNoiseCancellationPlugin
+  noiseCancellationPlugin: HMSNoiseCancellationPlugin,
+  videoPlugin: HMSVirtualBackgroundPlugin | null
 ): Promise<HMSSDK> => {
   /**
    * Only required for advanced use-case features like iOS Screen/Audio Share, Android Software Echo Cancellation, etc
    * NOT required for any other features.
    * @link https://www.100ms.live/docs/react-native/v2/advanced-features/track-settings
    */
-  const trackSettings = getTrackSettings(noiseCancellationPlugin);
+  const trackSettings = getTrackSettings(noiseCancellationPlugin, videoPlugin);
 
   /**
    * Regular Usage:
@@ -156,8 +163,11 @@ export const HMSInstanceSetup = () => {
       clearConfig();
 
       const noiseCancellationPlugin = new HMSNoiseCancellationPlugin();
+      const videoPlugin = VideoPlugin
+        ? new VideoPlugin.HMSVirtualBackgroundPlugin()
+        : null;
 
-      getHmsInstance(noiseCancellationPlugin)
+      getHmsInstance(noiseCancellationPlugin, videoPlugin)
         .then((hmssdkInstance) => {
           if (!ignore) {
             // If this component is mounted
@@ -165,6 +175,9 @@ export const HMSInstanceSetup = () => {
             batch(() => {
               dispatch(setHMSInstance(hmssdkInstance));
               dispatch(setNoiseCancellationPlugin(noiseCancellationPlugin));
+              if (videoPlugin) {
+                dispatch(setVideoPlugin(videoPlugin));
+              }
               // TODO: remove this from user reducer
               dispatch(saveUserData({ hmsInstance: hmssdkInstance }));
             });

package/src/HMSRoomSetup.tsx

@@ -4,6 +4,7 @@ import {
   HMSRoom,
   HMSTrack,
   HMSUpdateListenerActions,
+  HMSWhiteboardUpdateType,
 } from '@100mslive/react-native-hms';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Alert, Keyboard, StatusBar, StyleSheet, View } from 'react-native';
@@ -22,6 +23,7 @@ import {
   setInitialRole,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
+  setWhiteboard,
   updateLocalPeerTrackNode,
 } from './redux/actions';
 import { createPeerTrackNode, getRandomUserId } from './utils/functions';
@@ -482,6 +484,25 @@ export const HMSRoomSetup = () => {
     };
   }, [isHLSViewer]);
 
+  useEffect(() => {
+    const subscription =
+      hmsInstance.interactivityCenter.addWhiteboardUpdateListener(
+        async (hmsWhiteboard, updateType) => {
+          dispatch(
+            setWhiteboard(
+              updateType === HMSWhiteboardUpdateType.STARTED
+                ? hmsWhiteboard
+                : null
+            )
+          );
+        }
+      );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   // Syncs showing Polls with HLS Player onCue event
   useHLSCuedPolls();
 

package/src/Icons/AddImage/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface AddImageIconProps extends Omit<ImageProps, 'source'> {}
+
+export const AddImageIcon: React.FC<AddImageIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/add-image.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/BlurPeople/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface BlurPeopleIconProps extends Omit<ImageProps, 'source'> {}
+
+export const BlurPeopleIcon: React.FC<BlurPeopleIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/blur-people.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 40,
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/CrossCircle/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface CrossCircleIconProps extends Omit<ImageProps, 'source'> {}
+interface CrossCircleIconProps extends Omit<ImageProps, 'source'> {
+  size?: 'normal' | 'large';
+}
 
 export const CrossCircleIcon: React.FC<CrossCircleIconProps> = ({
   style,
+  size = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,8 +19,17 @@ export const CrossCircleIcon: React.FC<CrossCircleIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/cross-circle.png')}
-      style={[styles.icon, iconStyles, style]}
+      source={
+        size === 'large'
+          ? require('./assets/cross-circle-large.png')
+          : require('./assets/cross-circle.png')
+      }
+      style={[
+        styles.icon,
+        iconStyles,
+        size === 'large' ? styles.largeIcon : null,
+        style,
+      ]}
       {...restProps}
     />
   );
@@ -30,4 +42,8 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  largeIcon: {
+    width: 40,
+    height: 40,
+  },
 });

package/src/Icons/Pencil/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface PencilIconProps extends Omit<ImageProps, 'source'> {}
+interface PencilIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'normal' | 'board';
+}
 
 export const PencilIcon: React.FC<PencilIconProps> = ({
   style,
+  type = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,7 +19,11 @@ export const PencilIcon: React.FC<PencilIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/pencil.png')}
+      source={
+        type === 'board'
+          ? require('./assets/pencil-board.png')
+          : require('./assets/pencil.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/Icons/VirtualBackground/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Image, StyleSheet } from 'react-native';
+import type { ImageProps } from 'react-native';
+
+import { useHMSRoomStyle } from '../../hooks-util';
+
+interface VirtualBackgroundIconProps extends Omit<ImageProps, 'source'> {}
+
+export const VirtualBackgroundIcon: React.FC<VirtualBackgroundIconProps> = ({
+  style,
+  ...restProps
+}) => {
+  const iconStyles = useHMSRoomStyle((theme) => ({
+    tintColor: theme.palette.on_surface_high,
+  }));
+
+  return (
+    <Image
+      source={require('./assets/virtual-background.png')}
+      style={[styles.icon, iconStyles, style]}
+      {...restProps}
+    />
+  );
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+});

package/src/Icons/index.ts

@@ -51,3 +51,6 @@ export * from './CC';
 export * from './Pause';
 export * from './Play';
 export * from './SeekArrow';
+export * from './VirtualBackground';
+export * from './BlurPeople';
+export * from './AddImage';

package/src/components/Chat/ChatMessage.tsx

@@ -5,6 +5,7 @@ import {
   StyleSheet,
   Platform,
   TouchableOpacity,
+  Linking,
 } from 'react-native';
 import { useDispatch, useSelector } from 'react-redux';
 import { HMSMessage } from '@100mslive/react-native-hms';
@@ -14,7 +15,10 @@ import {
   useAllowPinningMessage,
   useHMSRoomStyleSheet,
 } from '../../hooks-util';
-import { getTimeStringin12HourFormat } from '../../utils/functions';
+import {
+  getTimeStringin12HourFormat,
+  splitLinksAndContent,
+} from '../../utils/functions';
 import { PinIcon, ThreeDotsIcon } from '../../Icons';
 import type { RootState } from '../../redux';
 import { setSelectedMessageForAction } from '../../redux/actions';
@@ -63,6 +67,9 @@ const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
         color: theme.palette.on_surface_low,
         fontFamily: `${typography.font_family}-SemiBold`,
       },
+      link: {
+        color: theme.palette.primary_bright,
+      },
     }),
     []
   );
@@ -82,6 +89,13 @@ const _ChatMessage: 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 ? (
@@ -126,7 +140,10 @@ const _ChatMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
       </View>
 
       <Text style={[styles.message, hmsRoomStyles.message]}>
-        {message.message}
+        {splitLinksAndContent(message.message, {
+          pressHandler: handleLinkPress,
+          style: hmsRoomStyles.link,
+        })}
       </Text>
     </View>
   );

package/src/components/DisplayView.tsx

@@ -31,6 +31,7 @@ import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
 import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
 import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
 import { EndRoomModal } from './EndRoomModal';
+import { FullScreenWhiteboard } from './FullScreenWhiteboard';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -143,6 +144,8 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
           <FullScreenVideoView />
 
+          <FullScreenWhiteboard />
+
           <ChatAndParticipantsBottomSheet />
 
           <BottomSheet

package/src/components/Footer.tsx

@@ -118,8 +118,11 @@ export const useFooterHeight = (excludeSafeArea: boolean = false) => {
   const { bottom } = useSafeAreaInsets();
 
   return (
-    (excludeSafeArea ? 0 : bottom) + (Platform.OS === 'android' ? 16 : 0) + 40
-  ); // bottomSafeArea + marginBottom + content
+    (excludeSafeArea ? 0 : bottom) +
+    (Platform.OS === 'android' ? 16 : 0) +
+    42 +
+    16
+  ); // bottomSafeArea + marginBottom + content + contentTopPadding
 };
 
 const styles = StyleSheet.create({

package/src/components/FullScreenWhiteboard.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { RootState } from '../redux';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+import { setFullScreenWhiteboard } from '../redux/actions';
+import { Whiteboard } from './Whiteboard';
+
+export const FullScreenWhiteboard = () => {
+  const dispatch = useDispatch();
+  const fullScreenWhiteboard = useSelector(
+    (state: RootState) => state.app.fullScreenWhiteboard
+  );
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const contentContainerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
+  const handleClosingFullScreenView = () => {
+    dispatch(setFullScreenWhiteboard(false));
+  };
+
+  return (
+    <Modal
+      isVisible={fullScreenWhiteboard}
+      animationIn={'fadeInUp'}
+      animationInTiming={100}
+      animationOutTiming={100}
+      animationOut={'fadeOutDown'}
+      backdropColor={backgroundDimColor}
+      backdropOpacity={0.3}
+      onBackButtonPress={handleClosingFullScreenView}
+      onBackdropPress={handleClosingFullScreenView}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={styles.modal}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <SafeAreaView style={[contentContainerStyles, styles.container]}>
+        <Whiteboard />
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flexGrow: 1,
+  },
+});

package/src/components/GridView.tsx

@@ -16,6 +16,7 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { WhiteboardContainer } from './WhiteboardContainer';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -52,6 +53,9 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const whiteboardActive = useSelector(
+      (state: RootState) => !!state.hmsStates.whiteboard
+    );
     const regularTilesAvailable = pairedPeers.length > 0;
 
     const isLandscapeOrientation = useIsLandscapeOrientation();
@@ -147,9 +151,12 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
             setHmsViewRefs={setHmsViewRefs}
             onPeerTileMorePress={onPeerTileMorePress}
           />
+        ) : whiteboardActive ? (
+          <WhiteboardContainer />
         ) : null}
 
-        {screenshareTilesAvailable && isLandscapeOrientation ? null : (
+        {(whiteboardActive || screenshareTilesAvailable) &&
+        isLandscapeOrientation ? null : (
           <RegularTiles
             ref={regularTilesFlatlistRef}
             pairedPeers={pairedPeers}
@@ -209,8 +216,10 @@ const RegularTiles = React.forwardRef<
   const dispatch = useDispatch();
   const { height: safeHeight } = useSafeAreaFrame();
 
-  const screenshareTilesAvailable = useSelector(
-    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  const screenshareTilesOrWhiteboardActive = useSelector(
+    (state: RootState) =>
+      state.app.screensharePeerTrackNodes.length > 0 ||
+      !!state.hmsStates.whiteboard
   );
   const activeIndex = useSelector(
     (state: RootState) => state.app.gridViewActivePage
@@ -248,7 +257,7 @@ const RegularTiles = React.forwardRef<
   );
 
   return (
-    <View style={{ flex: screenshareTilesAvailable ? undefined : 1 }}>
+    <View style={{ flex: screenshareTilesOrWhiteboardActive ? undefined : 1 }}>
       <FlatList
         ref={flatlistRef}
         horizontal={true}
@@ -275,7 +284,7 @@ const RegularTiles = React.forwardRef<
           list={pairedPeers}
           activeIndex={activeIndex}
           style={
-            screenshareTilesAvailable || isLandscapeOrientation
+            screenshareTilesOrWhiteboardActive || isLandscapeOrientation
               ? { marginVertical: isLandscapeOrientation ? 4 : 8 }
               : null
           }

package/src/components/HLSChatView.tsx

@@ -10,13 +10,16 @@ import { HLSDescriptionPane } from './HLSDescriptionPane';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import type { RootState } from '../redux';
 import { HLSNotifications } from './HLSNotifications';
+import { PipModes } from '../utils/types';
 
 export const HLSChatView = () => {
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const { chatWrapperConstraints } = useHLSViewsConstraints();
-  const hlsFullScreen = useSelector(
-    (state: RootState) => state.app.hlsFullScreen
-  );
+  const fullScreenMode = useSelector((state: RootState) => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     wrapper: {
@@ -24,7 +27,7 @@ export const HLSChatView = () => {
     },
   }));
 
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return null;
   }
 

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
-    );
-  });
-}