@100mslive/react-native-room-kit 1.1.7 → 1.1.8

package/src/components/WebrtcView.tsx

@@ -49,8 +49,10 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
       (state: RootState) => state.user.spotlightTrackId
     );
 
-    const screenshareTilesAvailable = useSelector(
-      (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+    const screenshareTilesOrWhiteboardAcive = useSelector(
+      (state: RootState) =>
+        state.app.screensharePeerTrackNodes.length > 0 ||
+        !!state.hmsStates.whiteboard
     );
 
     const pairedPeers = useMemo(
@@ -58,13 +60,18 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
         pairData(
           peerTrackNodes,
           isPortrait
-            ? screenshareTilesAvailable
+            ? screenshareTilesOrWhiteboardAcive
               ? MaxTilesInOnePage.IN_PORTRAIT_WITH_SCREENSHARES
               : MaxTilesInOnePage.IN_PORTRAIT
             : MaxTilesInOnePage.IN_LANDSCAPE,
           spotlightTrackId
         ),
-      [peerTrackNodes, screenshareTilesAvailable, spotlightTrackId, isPortrait]
+      [
+        peerTrackNodes,
+        screenshareTilesOrWhiteboardAcive,
+        spotlightTrackId,
+        isPortrait,
+      ]
     );
 
     const showWelcomeBanner = useSelector(

package/src/components/Whiteboard.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { useSelector } from 'react-redux';
+import { WebView } from 'react-native-webview';
+import type { WebViewProps } from 'react-native-webview';
+
+import type { RootState } from '../redux';
+import { PipModes } from '../utils/types';
+import { useIsLandscapeOrientation } from '../utils/dimension';
+import { WhiteboardFullScreenButton } from './WhiteboardFullScreenButton';
+import type {
+  WebViewError,
+  WebViewErrorEvent,
+} from 'react-native-webview/lib/WebViewTypes';
+
+export type WhiteboardProps = {};
+
+export const _Whiteboard = React.forwardRef<
+  React.Ref<React.ElementRef<typeof WebView> | null>,
+  WhiteboardProps
+>((_props, webviewRef) => {
+  const localWebviewRef = React.useRef<null | React.ElementRef<typeof WebView>>(
+    null
+  );
+  React.useImperativeHandle(webviewRef, () => localWebviewRef, []);
+
+  const whiteboardUrl = useSelector(
+    (state: RootState) => state.hmsStates.whiteboard?.url
+  );
+
+  //#region reconnection handling
+  let webviewError = React.useRef<WebViewError | null>(null);
+  const webviewErrorHandler = React.useCallback((e: WebViewErrorEvent) => {
+    webviewError.current = e.nativeEvent;
+  }, []);
+
+  if (Platform.OS === 'ios') {
+    const prevReconnecting = React.useRef<boolean | null>(null);
+    const reconnecting = useSelector(
+      (state: RootState) => state.hmsStates.reconnecting
+    );
+    if (
+      whiteboardUrl &&
+      localWebviewRef.current !== null &&
+      webviewError.current !== null &&
+      prevReconnecting.current === true &&
+      reconnecting === false
+    ) {
+      localWebviewRef.current.reload();
+    }
+    prevReconnecting.current = reconnecting;
+  }
+  //#endregion reconnection handling
+
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  if (!whiteboardUrl) return null;
+
+  return (
+    <View style={{ flex: 1, position: 'relative' }}>
+      <HMSWebView
+        ref={localWebviewRef}
+        url={whiteboardUrl}
+        onError={webviewErrorHandler}
+      />
+
+      {isPipModeActive || isLandscapeOrientation ? null : (
+        <WhiteboardFullScreenButton />
+      )}
+    </View>
+  );
+});
+
+export const Whiteboard = React.memo(_Whiteboard);
+
+//# Memoized Webview
+
+interface HMSWebViewProps extends WebViewProps {
+  url: string;
+}
+
+const _HMSWebView = React.forwardRef<
+  React.ElementRef<typeof WebView>,
+  HMSWebViewProps
+>((props, webviewRef) => {
+  return (
+    <WebView
+      ref={webviewRef}
+      source={{ uri: props.url }}
+      style={{ flex: 1 }}
+      javaScriptEnabled={true}
+      domStorageEnabled={true}
+      {...props}
+    />
+  );
+});
+
+const HMSWebView = React.memo(_HMSWebView);

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/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';
@@ -143,6 +145,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,
@@ -195,6 +198,7 @@ export enum HmsStateActionTypes {
   SET_ACTIVE_SPEAKERS = 'SET_ACTIVE_SPEAKERS',
   SET_RECONNECTING = 'SET_RECONNECTING',
   SET_NOISE_CANCELLATION_PLUGIN = 'SET_NOISE_CANCELLATION_PLUGIN',
+  SET_WHITEBOARD = 'SET_WHITEBOARD',
   SET_INITIAL_ROLE = 'SET_INITIAL_ROLE',
 }
 

package/src/redux/actions/index.ts

@@ -14,6 +14,7 @@ import type {
   HMSSDK,
   HMSSessionStore,
   HMSSpeaker,
+  HMSWhiteboard,
 } from '@100mslive/react-native-hms';
 import type { Layout } from '@100mslive/types-prebuilt';
 
@@ -285,6 +286,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 +445,11 @@ export const setNoiseCancellationPlugin = (
   noiseCancellationPlugin,
 });
 
+export const setWhiteboard = (whiteboard: HMSWhiteboard | null) => ({
+  type: HmsStateActionTypes.SET_WHITEBOARD,
+  whiteboard,
+});
+
 export const setHandleBackButton = (handleBackButton?: boolean) => ({
   type: actionTypes.SET_HANDLE_BACK_BUTTON,
   payload: { handleBackButton },

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];
@@ -90,6 +91,7 @@ const INITIAL_STATE: IntialStateType = {
   gridViewActivePage: 0,
   startingOrStoppingRecording: false,
   fullScreenPeerTrackNode: null,
+  fullScreenWhiteboard: false,
   screensharePeerTrackNodes: [],
   notifications: [],
   activeChatBottomSheetTab: ChatBottomSheetTabs[0],
@@ -242,6 +244,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:

package/src/redux/reducers/hmsStates.ts

@@ -6,6 +6,7 @@ import type {
   HMSRoleChangeRequest,
   HMSRoom,
   HMSSpeaker,
+  HMSWhiteboard,
 } from '@100mslive/react-native-hms';
 import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
@@ -31,7 +32,8 @@ type ActionType =
   | ReplaceParticipantsList
   | SetActiveSpeakers
   | SetReconnecting
-  | SetNoiseCancellationPlugin;
+  | SetNoiseCancellationPlugin
+  | SetWhiteboard;
 
 type SetRoomAction = {
   type: HmsStateActionTypes.SET_ROOM_STATE;
@@ -138,6 +140,11 @@ type SetNoiseCancellationPlugin = {
   noiseCancellationPlugin: HMSNoiseCancellationPlugin;
 };
 
+type SetWhiteboard = {
+  type: HmsStateActionTypes.SET_WHITEBOARD;
+  whiteboard: HMSWhiteboard | null;
+};
+
 type IntialStateType = {
   isLocalAudioMuted: boolean | undefined;
   isLocalVideoMuted: boolean | undefined;
@@ -153,6 +160,7 @@ type IntialStateType = {
   layoutConfig: Layout[] | null;
   roleChangeRequest: HMSRoleChangeRequest | null;
   noiseCancellationPlugin: HMSNoiseCancellationPlugin | null;
+  whiteboard: HMSWhiteboard | null;
 };
 
 const INITIAL_STATE: IntialStateType = {
@@ -170,6 +178,7 @@ const INITIAL_STATE: IntialStateType = {
   layoutConfig: null,
   roleChangeRequest: null,
   noiseCancellationPlugin: null,
+  whiteboard: null,
 };
 
 const hmsStatesReducer = (
@@ -571,6 +580,11 @@ const hmsStatesReducer = (
         ...state,
         noiseCancellationPlugin: action.noiseCancellationPlugin,
       };
+    case HmsStateActionTypes.SET_WHITEBOARD:
+      return {
+        ...state,
+        whiteboard: action.whiteboard,
+      };
     case HmsStateActionTypes.CLEAR_STATES:
       return INITIAL_STATE;
     default: