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

package/src/components/HMSOverlayMessageView.tsx

@@ -0,0 +1,189 @@
+import * as React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+  TouchableOpacity,
+} from 'react-native';
+import type { HMSMessage } from '@100mslive/react-native-hms';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+
+import {
+  useAllowBlockingPeerFromChat,
+  useAllowPinningMessage,
+  useHMSRoomStyleSheet,
+  useModalType,
+} from '../hooks-util';
+import { PinIcon, ThreeDotsIcon } from '../Icons';
+import { setSelectedMessageForAction } from '../redux/actions';
+import { ModalTypes } from '../utils/types';
+import type { RootState } from '../redux';
+
+interface HMSMessageProps {
+  message: HMSMessage;
+}
+
+const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
+  const dispatch = useDispatch();
+  const { handleModalVisibleType } = useModalType();
+  const localPeerId = useSelector(
+    (state: RootState) => state.hmsStates.localPeer?.peerID
+  );
+
+  const allowPinningMessage = useAllowPinningMessage();
+  const allowPeerBlocking = useAllowBlockingPeerFromChat();
+  const canRemoveOthers = useSelector(
+    (state: RootState) =>
+      !!state.hmsStates.localPeer?.role?.permissions?.removeOthers
+  );
+
+  const isPinned = useSelector(
+    (state: RootState) =>
+      state.messages.pinnedMessages.findIndex(
+        (pinnedMessage) => pinnedMessage.id === message.messageId
+      ) >= 0
+  );
+
+  const messageSender = message.sender;
+
+  const hmsRoomStyles = useHMSRoomStyleSheet(
+    (_theme, typography) => ({
+      senderName: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-SemiBold`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      message: {
+        color: '#ffffff',
+        fontFamily: `${typography.font_family}-Regular`,
+        textShadowColor: 'rgba(0, 0, 0, 0.5)',
+      },
+      threeDots: {
+        tintColor: '#ffffff',
+      },
+      pinnedLabel: {
+        color: '#ffffff',
+      },
+    }),
+    []
+  );
+
+  const onThreeDotsPress = () => {
+    dispatch(setSelectedMessageForAction(message));
+    handleModalVisibleType(ModalTypes.MESSAGE_OPTIONS);
+  };
+
+  const canTakeAction =
+    allowPinningMessage || // can pin message, OR
+    (allowPeerBlocking &&
+      message.sender &&
+      message.sender.peerID !== localPeerId) || // can block peers, OR
+    (canRemoveOthers &&
+      message.sender &&
+      message.sender.peerID !== localPeerId); // can remove participants
+
+  return (
+    <View style={styles.container}>
+      {isPinned ? (
+        <View style={styles.pinLabelContainer}>
+          <PinIcon
+            type="pin"
+            style={[styles.pinIcon, hmsRoomStyles.threeDots]}
+          />
+          <Text style={[styles.pinnedLabel, hmsRoomStyles.pinnedLabel]}>
+            PINNED
+          </Text>
+        </View>
+      ) : null}
+
+      <View style={styles.nameWrapper}>
+        <Text
+          style={[styles.senderName, hmsRoomStyles.senderName]}
+          numberOfLines={1}
+        >
+          {messageSender
+            ? messageSender.isLocal
+              ? 'You'
+              : messageSender.name
+            : 'Anonymous'}
+        </Text>
+
+        {canTakeAction ? (
+          <GestureDetector gesture={Gesture.Tap()}>
+            <TouchableOpacity
+              hitSlop={styles.threeDotsHitSlop}
+              onPress={onThreeDotsPress}
+            >
+              <ThreeDotsIcon
+                stack="vertical"
+                style={[styles.threeDots, hmsRoomStyles.threeDots]}
+              />
+            </TouchableOpacity>
+          </GestureDetector>
+        ) : null}
+      </View>
+
+      <Text style={[styles.message, hmsRoomStyles.message]}>
+        {message.message}
+      </Text>
+    </View>
+  );
+};
+
+export const HMSOverlayMessageView = React.memo(_HMSOverlayMessageView);
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 8,
+    width: '100%',
+  },
+  nameWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  senderName: {
+    flexGrow: 1,
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.1,
+    textShadowOffset: { height: 1, width: 1 },
+    textShadowRadius: 2,
+  },
+  message: {
+    fontSize: 14,
+    lineHeight: Platform.OS === 'android' ? 20 : undefined,
+    letterSpacing: 0.25,
+    marginTop: 2,
+    textShadowOffset: { height: 0.5, width: 0.5 },
+    textShadowRadius: 2,
+  },
+  threeDots: {
+    width: 20,
+    height: 20,
+    marginLeft: 4,
+  },
+  threeDotsHitSlop: {
+    left: 12,
+    right: 12,
+    top: 12,
+    bottom: 12,
+  },
+  pinLabelContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  pinIcon: {
+    width: 12,
+    height: 12,
+    marginRight: 4,
+  },
+  pinnedLabel: {
+    fontSize: 10,
+    textTransform: 'uppercase',
+    lineHeight: 16,
+    letterSpacing: 1.5,
+  },
+});

package/src/components/MeetingScreenContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
-import { StyleSheet, View, Keyboard } from 'react-native';
+import { StyleSheet, View, Keyboard, Platform } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
@@ -21,6 +21,7 @@ import { useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { AnimatedHeader } from './AnimatedHeader';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 // import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
@@ -33,9 +34,14 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const offset = useSharedValue(1);
   const timerIdRef = useRef<NodeJS.Timeout | null>(null);
   const [controlsHidden, setControlsHidden] = useState(false);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
+  const whiteboardActive =
+    Platform.OS === 'android'
+      ? useSelector((state: RootState) => !!state.hmsStates.whiteboard)
+      : null;
   const { keyboardState } = useKeyboardState();
 
   const dismissKeyboard = useCallback(() => {
@@ -75,9 +81,28 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     [dismissKeyboard, clearTimer]
   );
 
+  if (
+    !!whiteboardActive &&
+    (isLandscapeOrientation ? offset.value === 1 : offset.value < 1)
+  ) {
+    cancelAnimation(offset);
+    offset.value = withTiming(
+      isLandscapeOrientation ? 0 : 1,
+      { duration: 200, easing: Easing.ease },
+      (finished) => {
+        if (finished) {
+          runOnJS(setControlsHidden)(offset.value === 0);
+        }
+      }
+    );
+  }
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
   useEffect(() => {
+    if (!!whiteboardActive) {
+      return;
+    }
     clearTimer();
     timerIdRef.current = setTimeout(() => {
       timerIdRef.current = null;
@@ -85,9 +110,10 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     }, HeaderFooterHideDelayMs);
 
     return clearTimer;
-  }, [clearTimer, toggleControls]);
+  }, [clearTimer, toggleControls, !!whiteboardActive]);
 
   const tapGesture = Gesture.Tap()
+    .enabled(Platform.select({ android: !whiteboardActive, default: true }))
     .onEnd(() => toggleControls())
     .requireExternalGestureToFail();
 

package/src/components/Participants/ParticipantsList.tsx

@@ -31,7 +31,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
   const fetchedInitialDataRef = React.useRef(false);
   const hmsInstance = useHMSInstance();
 
-  // Currect is current selected group and off-stage gorup
+  // Current is current selected group and off-stage group
   const isOffStageGroup = useHMSLayoutConfig((layoutConfig) => {
     const offStageRoles =
       layoutConfig?.screens?.conferencing?.default?.elements?.on_stage_exp
@@ -39,12 +39,12 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
     return offStageRoles ? offStageRoles.includes(selectedGroupId) : false;
   });
 
-  // Getting initial data for the selected group Id
-  const dataForGroupId = useSelector(
-    (state: RootState) => {
-      return selectedGroupId === 'hand-raised' ? state.hmsStates.groupedParticipants : state.hmsStates.groupedParticipants[selectedGroupId]
-    }
-  );
+  // Getting initial data for the selected group ID
+  const dataForGroupId = useSelector((state: RootState) => {
+    return selectedGroupId === 'hand-raised'
+      ? state.hmsStates.groupedParticipants
+      : state.hmsStates.groupedParticipants[selectedGroupId];
+  });
 
   const finalDataForGroupId = React.useMemo(() => {
     if (Array.isArray(dataForGroupId)) {
@@ -52,7 +52,9 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
     }
 
     if (dataForGroupId && selectedGroupId === 'hand-raised') {
-      return Object.values(dataForGroupId).flat().filter(peer  => peer.isHandRaised);
+      return Object.values(dataForGroupId)
+        .flat()
+        .filter((peer) => peer.isHandRaised);
     }
 
     return null;
@@ -119,7 +121,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
 
   const filteredSearchText = searchText.trim().toLowerCase();
 
-  //#region Flaslist props
+  //#region FlashList props
   const data = React.useMemo(() => {
     return (isOffStageGroup ? offStageData : dataWithHeader).filter((item) =>
       'id' in item ? true : item.name.toLowerCase().includes(filteredSearchText)
@@ -186,7 +188,7 @@ export const ParticipantsList: React.FC<ParticipantsListProps> = ({
         });
     }
   }, [loading, peerListIterator]);
-  //#endregion Flaslist props
+  //#endregion FlashList props
 
   const searchTextExists = searchText.length > 0;
 

package/src/components/RoomSettingsModalContent.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
 import { HMSRecordingState } from '@100mslive/react-native-hms';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { ModalTypes } from '../utils/types';
@@ -22,6 +22,7 @@ import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSConferencingScreenConfig,
+  useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -38,6 +39,8 @@ import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeC
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 import { TestIds } from '../utils/constants';
+import { addNotification } from '../redux/actions';
+import { NotificationTypes } from '../types';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -56,6 +59,8 @@ export const RoomSettingsModalContent: React.FC<
 > = (props) => {
   const { closeRoomSettingsModal, setModalVisible } = props;
 
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
 
   const hmsActions = useHMSActions();
@@ -76,6 +81,10 @@ export const RoomSettingsModalContent: React.FC<
     return permissions?.pollRead || permissions?.pollWrite;
   });
 
+  const whiteboardAdminPermission = useSelector((state: RootState) => {
+    return !!state.hmsStates.localPeer?.role?.permissions?.whiteboard?.admin;
+  });
+
   const { registerOnModalHideAction } = useBottomSheetActions();
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
@@ -271,6 +280,61 @@ export const RoomSettingsModalContent: React.FC<
     closeRoomSettingsModal();
   };
 
+  const whiteboard = useSelector(
+    (state: RootState) => state.hmsStates.whiteboard
+  );
+  const screenShareNodesAvailable = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  );
+
+  const toggleWhiteboard = async () => {
+    if (!whiteboardAdminPermission) return;
+
+    if (whiteboard && whiteboard.isOwner) {
+      hmsInstance.interactivityCenter
+        .stopWhiteboard()
+        .then((success) => {
+          console.log('#stopWhiteboard stopped whiteboard ', success);
+        })
+        .catch((error) => {
+          console.log('#stopWhiteboard error ', error);
+        });
+    } else if (whiteboard && !whiteboard.isOwner) {
+      const uid = Math.random().toString(16).slice(2);
+      dispatch(
+        addNotification({
+          id: uid,
+          type: NotificationTypes.ERROR,
+          title:
+            'Only the peer who started the whiteboard has the ability to close it!',
+        })
+      );
+    } else if (isLocalScreenShared || screenShareNodesAvailable) {
+      const uid = Math.random().toString(16).slice(2);
+      dispatch(
+        addNotification({
+          id: uid,
+          type: NotificationTypes.ERROR,
+          title: isLocalScreenShared
+            ? 'Discontinue screenshare to open the whiteboard!'
+            : "Can't open whiteboard while screenshare is happening!",
+        })
+      );
+    } else {
+      hmsInstance.interactivityCenter
+        .startWhiteboard('Interactive Session')
+        .then((success) => {
+          console.log('#startWhiteboard started whiteboard ', success);
+        })
+        .catch((error) => {
+          console.log('#startWhiteboard error ', error);
+        });
+    }
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+
   const canShowBRB = useHMSLayoutConfig(
     (layoutConfig) =>
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
@@ -394,6 +458,17 @@ export const RoomSettingsModalContent: React.FC<
               isActive: false,
               hide: !canReadOrWritePoll,
             },
+            {
+              id: 'whiteboard',
+              icon: (
+                <PencilIcon type="board" style={{ width: 20, height: 20 }} />
+              ),
+              label: whiteboard ? 'Close Whiteboard' : 'Open Whiteboard',
+              pressHandler: toggleWhiteboard,
+              isActive: !!whiteboard && whiteboard.isOwner,
+              disabled: !!whiteboard && !whiteboard.isOwner,
+              hide: !whiteboardAdminPermission,
+            },
             {
               id: 'noise-cancellation',
               icon: <WaveIcon style={{ width: 20, height: 20 }} />,
@@ -458,7 +533,7 @@ type SettingItemProps = {
   onPress(): void;
   disabled?: TouchableOpacityProps['disabled'];
   testID?: TouchableOpacityProps['testID'];
-  isActive?: boolean;
+  isActive?: boolean | null;
 };
 
 const SettingItem: React.FC<SettingItemProps> = ({

package/src/components/TilesContainer.tsx

@@ -25,13 +25,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const screenshareTilesAvailable = useSelector(
-    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  const screenshareTilesOrWhiteboardAcive = useSelector(
+    (state: RootState) =>
+      state.app.screensharePeerTrackNodes.length > 0 ||
+      !!state.hmsStates.whiteboard
   );
 
   const stylesConfig = computeTileWidthAndHeight(peerTrackNodes.length, {
     isLandscapeOrientation,
-    type: screenshareTilesAvailable ? 'row' : 'default',
+    type: screenshareTilesOrWhiteboardAcive ? 'row' : 'default',
   });
 
   // In this layout, Tile will take as much height and width as possible
@@ -44,12 +46,12 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
         // If tile are growable, then we want whatever remaining space to be between them
         {
           justifyContent:
-            screenshareTilesAvailable && peerTrackNodes.length === 1
+            screenshareTilesOrWhiteboardAcive && peerTrackNodes.length === 1
               ? 'center'
               : growableTileLayout
                 ? 'space-between'
                 : 'center',
-          flexDirection: screenshareTilesAvailable
+          flexDirection: screenshareTilesOrWhiteboardAcive
             ? 'row'
             : isLandscapeOrientation
               ? 'row'

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