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

package/src/components/WhiteboardContainer.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { WebView } from 'react-native-webview';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+
+import type { RootState } from '../redux';
+import { Whiteboard } from './Whiteboard';
+
+export type WhiteboardContainerProps = {};
+
+export const _WhiteboardContainer = React.forwardRef<
+  React.RefObject<React.ElementRef<typeof WebView> | null>,
+  WhiteboardContainerProps
+>((_props, webviewRef) => {
+  const fullScreenWhiteboard = useSelector(
+    (state: RootState) => state.app.fullScreenWhiteboard
+  );
+
+  return (
+    <View style={{ flex: 1, marginBottom: 4 }}>
+      {fullScreenWhiteboard ? null : Platform.OS === 'ios' ? (
+        <GestureDetector gesture={Gesture.Tap()}>
+          <View collapsable={false} style={{ flex: 1 }}>
+            <Whiteboard ref={webviewRef} />
+          </View>
+        </GestureDetector>
+      ) : (
+        <Whiteboard ref={webviewRef} />
+      )}
+    </View>
+  );
+});
+
+export const WhiteboardContainer = React.memo(_WhiteboardContainer);

package/src/components/WhiteboardFullScreenButton.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { PressableIcon } from './PressableIcon';
+import { MaximizeIcon, MinimizeIcon } from '../Icons';
+import { useHMSRoomStyle } from '../hooks-util';
+import { hexToRgbA } from '../utils/theme';
+import type { RootState } from '../redux';
+import { setFullScreenWhiteboard } from '../redux/actions';
+
+export interface WhiteboardFullScreenButtonProps {}
+
+export const WhiteboardFullScreenButton: React.FC<
+  WhiteboardFullScreenButtonProps
+> = () => {
+  const dispatch = useDispatch();
+  const fullScreenWhiteboard = useSelector(
+    (state: RootState) => state.app.fullScreenWhiteboard
+  );
+
+  const buttonStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor:
+      theme.palette.background_dim &&
+      hexToRgbA(theme.palette.background_dim, 0.64),
+  }));
+
+  const maximizeAction = !fullScreenWhiteboard;
+
+  const handleFullScreenPress = () => {
+    dispatch(setFullScreenWhiteboard(!fullScreenWhiteboard));
+  };
+
+  return (
+    <PressableIcon
+      border={false}
+      onPress={handleFullScreenPress}
+      style={[styles.container, buttonStyles]}
+    >
+      {maximizeAction ? <MaximizeIcon /> : <MinimizeIcon />}
+    </PressableIcon>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    padding: 8,
+  },
+});

package/src/hooks-util.ts

@@ -601,9 +601,11 @@ const useHMSTrackUpdate = (
       const miniviewPeerTrackNode = reduxState.app.miniviewPeerTrackNode;
       const localPeerTrackNode = reduxState.app.localPeerTrackNode;
 
+      const localPeerRole = reduxState.hmsStates.localPeer?.role ?? null;
+
       const currentLayoutConfig = selectLayoutConfigForRole(
         reduxState.hmsStates.layoutConfig,
-        reduxState.hmsStates.localPeer?.role ?? null
+        localPeerRole
       );
 
       const localTileInsetEnabled =
@@ -617,6 +619,26 @@ const useHMSTrackUpdate = (
           if (!peer.isLocal && track.type === HMSTrackType.VIDEO) {
             dispatch(addScreenshareTile(newPeerTrackNode));
           }
+          if (track.type === HMSTrackType.VIDEO) {
+            const whiteboard = reduxState.hmsStates.whiteboard;
+            // If white board is open and local peer is owner, close whiteboard
+            if (
+              whiteboard &&
+              // Is local peer has whiteboard admin permission
+              !!localPeerRole?.permissions?.whiteboard?.admin &&
+              // Is local peer owner of whiteboard
+              whiteboard.isOwner
+            ) {
+              hmsInstance.interactivityCenter
+                .stopWhiteboard()
+                .then((success) => {
+                  console.log('StopWhiteboard on Screenshare: ', success);
+                })
+                .catch((error) => {
+                  console.log('StopWhiteboard error: ', error);
+                });
+            }
+          }
         } else {
           setPeerTrackNodes((prevPeerTrackNodes) => {
             if (
@@ -3100,6 +3122,11 @@ export const useCanShowRoomOptionsButton = () => {
     return permissions?.pollRead || permissions?.pollWrite;
   });
 
+  const canStartStopWhiteboard = useSelector((state: RootState) => {
+    const permissions = state.hmsStates.localPeer?.role?.permissions;
+    return permissions?.whiteboard?.admin;
+  });
+
   const { canShowParticipants } = useShowChatAndParticipants();
 
   const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
@@ -3111,15 +3138,18 @@ export const useCanShowRoomOptionsButton = () => {
     canStartRecording ||
     canEditUsernameFromRoomModal ||
     canReadOrWritePoll ||
+    canStartStopWhiteboard ||
     isNoiseCancellationAvailable;
 
   return canShowOptions;
 };
 
 export const 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 isLandscapeOrientation = useIsLandscapeOrientation();
   const { width: safeAreaWidthFrame, height: safeAreaHeightFrame } =
     useSafeAreaFrame();
@@ -3130,7 +3160,7 @@ export const useHLSViewsConstraints = () => {
     right: rightInset,
   } = useSafeAreaInsets();
 
-  const playerWrapperConstraints = hlsFullScreen
+  const playerWrapperConstraints = fullScreenMode
     ? {
         width: safeAreaWidthFrame - leftInset - rightInset,
         height: isLandscapeOrientation
@@ -3165,9 +3195,11 @@ export const useHLSViewsConstraints = () => {
 };
 
 export const useHLSPlayerConstraints = () => {
-  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 isLandscapeOrientation = useIsLandscapeOrientation();
 
   const resolution = useHMSHLSPlayerResolution();
@@ -3205,7 +3237,7 @@ export const useHLSPlayerConstraints = () => {
   /**
    * Handling Portrait Orientation
    */
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return {
       width: sr > wr ? wrapperWidth : wrapperHeight * sr,
       height: sr > wr ? wrapperWidth / sr : wrapperHeight,

package/src/modules/imagePickerWrapper.ts

@@ -0,0 +1,20 @@
+let ImagePicker:
+  | {
+      launchCamera: (options: Record<string, any>) => Promise<any>;
+      launchImageLibrary: (options: Record<string, any>) => Promise<any>;
+    }
+  | undefined;
+
+try {
+  ImagePicker = require('react-native-image-picker');
+} catch (error) {
+  ImagePicker = undefined;
+}
+
+if (!ImagePicker?.launchCamera || !ImagePicker?.launchImageLibrary) {
+  // Make sure the loaded module is actually `react-native-image-picker`, if it's not
+  // reset the module to undefined so we can fallback to the default implementation
+  ImagePicker = undefined;
+}
+
+export { ImagePicker };

package/src/modules/videoPluginWrapper.ts

@@ -0,0 +1,32 @@
+import type { ImageRequireSource, ImageURISource } from 'react-native';
+
+export declare class HMSVideoPlugin {
+  protected type: string;
+  constructor(pluginType: string);
+  protected get nativeModule(): any;
+  enable(): Promise<boolean>;
+  disable(): Promise<boolean>;
+}
+
+export declare class HMSVirtualBackgroundPlugin extends HMSVideoPlugin {
+  static NAME: string;
+  constructor();
+  setBlur(blurRadius: number): Promise<boolean>;
+  setBackground(
+    backgroundImage: ImageURISource | ImageRequireSource
+  ): Promise<boolean>;
+}
+
+let VideoPlugin:
+  | {
+      HMSVirtualBackgroundPlugin: typeof HMSVirtualBackgroundPlugin;
+    }
+  | undefined;
+
+try {
+  VideoPlugin = require('@100mslive/react-native-video-plugin');
+} catch (error) {
+  VideoPlugin = undefined;
+}
+
+export { VideoPlugin };

package/src/redux/actionTypes.ts

@@ -66,6 +66,8 @@ const UPDATE_MINI_VIEW_PEERTRACKNODE = 'UPDATE_MINI_VIEW_PEERTRACKNODE';
 
 const SET_FULLSCREEN_PEERTRACKNODE = 'SET_FULLSCREEN_PEERTRACKNODE';
 
+const SET_FULLSCREEN_WHITEBOARD = 'SET_FULLSCREEN_WHITEBOARD';
+
 const UPDATE_FULLSCREEN_PEERTRACKNODE = 'UPDATE_FULLSCREEN_PEERTRACKNODE';
 
 const SET_LOCAL_PEERTRACKNODE = 'SET_LOCAL_PEERTRACKNODE';
@@ -115,6 +117,8 @@ const SET_HLS_FULL_SCREEN = 'SET_HLS_FULL_SCREEN';
 
 const SET_ANDROID_HLS_STREAM_PAUSED = 'SET_ANDROID_HLS_STREAM_PAUSED';
 
+const SET_SELECTED_VIRTUAL_BG = 'SET_SELECTED_VIRTUAL_BG';
+
 const FILTER_OUT_BLOCKED_MSGS = 'FILTER_OUT_BLOCKED_MSGS';
 
 export default {
@@ -143,6 +147,7 @@ export default {
   SET_MINI_VIEW_PEERTRACKNODE,
   UPDATE_MINI_VIEW_PEERTRACKNODE,
   SET_FULLSCREEN_PEERTRACKNODE,
+  SET_FULLSCREEN_WHITEBOARD,
   UPDATE_FULLSCREEN_PEERTRACKNODE,
   SET_LOCAL_PEERTRACKNODE,
   UPDATE_LOCAL_PEERTRACKNODE,
@@ -167,6 +172,7 @@ export default {
   SET_HLS_DESC_PANE_VISIBLE,
   SET_HLS_FULL_SCREEN,
   SET_ANDROID_HLS_STREAM_PAUSED,
+  SET_SELECTED_VIRTUAL_BG,
   FILTER_OUT_BLOCKED_MSGS,
 };
 
@@ -195,6 +201,8 @@ export enum HmsStateActionTypes {
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
   SET_NOISE_CANCELLATION_PLUGIN = 'SET_NOISE_CANCELLATION_PLUGIN',
+  SET_VIDEO_PLUGIN = 'SET_VIDEO_PLUGIN',
+  SET_WHITEBOARD = 'SET_WHITEBOARD',
   SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }
 

package/src/redux/actions/index.ts

@@ -14,7 +14,9 @@ import type {
   HMSSDK,
   HMSSessionStore,
   HMSSpeaker,
+  HMSWhiteboard,
 } from '@100mslive/react-native-hms';
+import type { HMSVirtualBackgroundPlugin } from '../../modules/videoPluginWrapper';
 import type { Layout } from '@100mslive/types-prebuilt';
 
 import type {
@@ -285,6 +287,11 @@ export const setFullScreenPeerTrackNode = (
   payload: { fullScreenPeerTrackNode },
 });
 
+export const setFullScreenWhiteboard = (fullScreenWhiteboard: boolean) => ({
+  type: actionTypes.SET_FULLSCREEN_WHITEBOARD,
+  payload: { fullScreenWhiteboard },
+});
+
 export const updateFullScreenPeerTrackNode = (
   data: Partial<Omit<PeerTrackNode, 'id'>>
 ) => ({
@@ -439,6 +446,16 @@ export const setNoiseCancellationPlugin = (
   noiseCancellationPlugin,
 });
 
+export const setVideoPlugin = (videoPlugin: HMSVirtualBackgroundPlugin) => ({
+  type: HmsStateActionTypes.SET_VIDEO_PLUGIN,
+  videoPlugin,
+});
+
+export const setWhiteboard = (whiteboard: HMSWhiteboard | null) => ({
+  type: HmsStateActionTypes.SET_WHITEBOARD,
+  whiteboard,
+});
+
 export const setHandleBackButton = (handleBackButton?: boolean) => ({
   type: actionTypes.SET_HANDLE_BACK_BUTTON,
   payload: { handleBackButton },
@@ -491,6 +508,11 @@ export const setAndroidHLSStreamPaused = (paused: boolean) => ({
   payload: { hlsStreamPaused_android: paused },
 });
 
+export const setSelectedVirtualBackground = (vb: string | null) => ({
+  type: actionTypes.SET_SELECTED_VIRTUAL_BG,
+  payload: { selectedVirtualBackground: vb },
+});
+
 /**
  * POLLS
  */

package/src/redux/reducers/appState.ts

@@ -50,6 +50,7 @@ type IntialStateType = {
   gridViewActivePage: number;
   startingOrStoppingRecording: boolean;
   fullScreenPeerTrackNode: null | PeerTrackNode;
+  fullScreenWhiteboard: boolean;
   screensharePeerTrackNodes: PeerTrackNode[];
   notifications: Notification[];
   activeChatBottomSheetTab: (typeof ChatBottomSheetTabs)[number];
@@ -65,6 +66,7 @@ type IntialStateType = {
   hlsDescriptionPaneVisible: boolean;
   hlsFullScreen: boolean;
   hlsStreamPaused_android: boolean;
+  selectedVirtualBackground: string | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -90,6 +92,7 @@ const INITIAL_STATE: IntialStateType = {
   gridViewActivePage: 0,
   startingOrStoppingRecording: false,
   fullScreenPeerTrackNode: null,
+  fullScreenWhiteboard: false,
   screensharePeerTrackNodes: [],
   notifications: [],
   activeChatBottomSheetTab: ChatBottomSheetTabs[0],
@@ -105,6 +108,7 @@ const INITIAL_STATE: IntialStateType = {
   hlsDescriptionPaneVisible: false,
   hlsFullScreen: false,
   hlsStreamPaused_android: false,
+  selectedVirtualBackground: null,
 };
 
 const appReducer = (
@@ -242,6 +246,12 @@ const appReducer = (
         },
       };
     }
+    case ActionTypes.SET_FULLSCREEN_WHITEBOARD: {
+      return {
+        ...state,
+        fullScreenWhiteboard: action.payload.fullScreenWhiteboard,
+      };
+    }
     case ActionTypes.SET_STARTING_HLS_STREAM:
       return { ...state, startingHLSStream: action.payload.startingHLSStream };
     case ActionTypes.SET_GRID_VIEW_ACTIVE_PAGE:
@@ -381,6 +391,12 @@ const appReducer = (
         hlsStreamPaused_android: action.payload.hlsStreamPaused_android,
       };
     }
+    case ActionTypes.SET_SELECTED_VIRTUAL_BG: {
+      return {
+        ...state,
+        selectedVirtualBackground: action.payload.selectedVirtualBackground,
+      };
+    }
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/redux/reducers/hmsStates.ts

@@ -6,7 +6,9 @@ import type {
   HMSRoleChangeRequest,
   HMSRoom,
   HMSSpeaker,
+  HMSWhiteboard,
 } from '@100mslive/react-native-hms';
+import type { HMSVirtualBackgroundPlugin } from '../../modules/videoPluginWrapper';
 import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
 
@@ -31,7 +33,9 @@ type ActionType =
   | ReplaceParticipantsList
   | SetActiveSpeakers
   | SetReconnecting
-  | SetNoiseCancellationPlugin;
+  | SetNoiseCancellationPlugin
+  | SetVideoPlugin
+  | SetWhiteboard;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -138,6 +142,16 @@ type SetNoiseCancellationPlugin = {
   noiseCancellationPlugin: HMSNoiseCancellationPlugin;
 };
 
+type SetVideoPlugin = {
+  type: HmsStateActionTypes.SET_VIDEO_PLUGIN;
+  videoPlugin: HMSVirtualBackgroundPlugin;
+};
+
+type SetWhiteboard = {
+  type: HmsStateActionTypes.SET_WHITEBOARD;
+  whiteboard: HMSWhiteboard | null;
+};
+
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
@@ -153,6 +167,8 @@ type IntialStateType = {
   layoutConfig: Layout[] | null;
   roleChangeRequest: HMSRoleChangeRequest | null;
   noiseCancellationPlugin: HMSNoiseCancellationPlugin | null;
+  videoPlugin: HMSVirtualBackgroundPlugin | null;
+  whiteboard: HMSWhiteboard | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -170,6 +186,8 @@ const INITIAL_STATE: IntialStateType = {
   layoutConfig: null,
   roleChangeRequest: null,
   noiseCancellationPlugin: null,
+  videoPlugin: null,
+  whiteboard: null,
 };
 
 const hmsStatesReducer = (
@@ -571,6 +589,16 @@ const hmsStatesReducer = (
         ...state,
         noiseCancellationPlugin: action.noiseCancellationPlugin,
       };
+    case HmsStateActionTypes.SET_VIDEO_PLUGIN:
+      return {
+        ...state,
+        videoPlugin: action.videoPlugin,
+      };
+    case HmsStateActionTypes.SET_WHITEBOARD:
+      return {
+        ...state,
+        whiteboard: action.whiteboard,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default:

package/src/utils/{functions.ts → functions.tsx}

@@ -3,6 +3,7 @@ import {
   Dimensions,
   PermissionsAndroid,
   StatusBar,
+  Text,
 } from 'react-native';
 import Toast from 'react-native-simple-toast';
 import {
@@ -23,6 +24,7 @@ import type {
 } from '@100mslive/react-native-hms';
 
 import type { PeerTrackNode } from './types';
+import * as React from 'react';
 
 export const getMeetingUrl = () =>
   'https://yogi.app.100ms.live/streaming/meeting/nih-bkn-vek';
@@ -570,3 +572,35 @@ export function getLabelFromPollQuestionType(
       return 'Short Answer';
   }
 }
+
+export function splitLinksAndContent(
+  text: string,
+  { pressHandler, style }: any
+): string | (string | React.ReactElement)[] {
+  // Regular expression to find links in a string
+  const pattern = /(^|\s)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/utils/types.ts

@@ -59,6 +59,7 @@ export enum ModalTypes {
   CHAT_MORE_ACTIONS = 'chatMoreActions',
   MESSAGE_OPTIONS = 'messageOptions',
   POLLS_AND_QUIZZES = 'pollsAndQuizzes',
+  VIRTUAL_BACKGROUND = 'virtualBackground',
   DEFAULT = '',
 }