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

package/lib/module/hooks-util.js

@@ -1,4 +1,4 @@
-import { HMSConfig, HMSMessage, HMSMessageRecipientType, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSMessageRecipient, useHMSHLSPlayerResolution, useHmsViewsResolutionsState, setSoftInputMode, getSoftInputMode, WindowController, useHMSHLSPlayerCue, HMSPollUpdateType } from '@100mslive/react-native-hms';
+import { HMSConfig, HMSMessage, HMSMessageRecipientType, HMSPIPListenerActions, HMSPeerUpdate, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions, HMSMessageRecipient, useHMSHLSPlayerResolution, useHmsViewsResolutionsState, setSoftInputMode, getSoftInputMode, WindowController, useHMSHLSPlayerCue, HMSPollUpdateType, useHMSHLSPlayerPlaybackState, HMSHLSPlayerPlaybackState } from '@100mslive/react-native-hms';
 import { SoftInputModes } from '@100mslive/react-native-hms';
 import Toast from 'react-native-simple-toast';
 import { useRef, useCallback, useEffect, useState, useMemo, useContext } from 'react';
@@ -6,7 +6,7 @@ import { MaxTilesInOnePage, ModalTypes, OnLeaveReason, PeerListRefreshInterval,
 import { ChatBroadcastFilter } from './utils/types';
 import { createPeerTrackNode, parseMetadata } from './utils/functions';
 import { batch, shallowEqual, useDispatch, useSelector, useStore } from 'react-redux';
-import { addCuedPollId, addMessage, addNotification, addParticipant, addParticipants, addPinnedMessages, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, filterOutMsgsFromBlockedPeers, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setAutoEnterPipMode, setChatPeerBlacklist, setChatState, setEditUsernameDisabled, setFullScreenPeerTrackNode, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setHandleBackButton, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setOnLeaveHandler, setPrebuiltData, setReconnecting, setRoleChangeRequest, setStartingOrStoppingRecording, updateFullScreenPeerTrackNode, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode, updateScreenshareTile } from './redux/actions';
+import { addCuedPollId, addMessage, addNotification, addParticipant, addParticipants, addPinnedMessages, addScreenshareTile, addUpdateParticipant, changeMeetingState, changePipModeStatus, changeStartingHLSStream, clearStore, filterOutMsgsFromBlockedPeers, removeNotification, removeParticipant, removeParticipants, removeScreenshareTile, replaceParticipantsList, saveUserData, setActiveChatBottomSheetTab, setActiveSpeakers, setAndroidHLSStreamPaused, setAutoEnterPipMode, setChatPeerBlacklist, setChatState, setEditUsernameDisabled, setFullScreenPeerTrackNode, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setHandleBackButton, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setLayoutConfig, setLocalPeerTrackNode, setMiniViewPeerTrackNode, setModalType, setOnLeaveHandler, setPrebuiltData, setReconnecting, setRoleChangeRequest, setStartingOrStoppingRecording, updateFullScreenPeerTrackNode, updateLocalPeerTrackNode, updateMiniViewPeerTrackNode, updateScreenshareTile } from './redux/actions';
 import { createPeerTrackNodeUniqueId, degradeOrRestorePeerTrackNodes, peerTrackNodeExistForPeer, peerTrackNodeExistForPeerAndTrack, removePeerTrackNodes, removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
 import { MeetingState } from './types';
 import { BackHandler, InteractionManager, Keyboard, Platform } from 'react-native';
@@ -17,7 +17,8 @@ import { getRoomLayout } from './modules/HMSManager';
 import { DEFAULT_THEME, DEFAULT_TYPOGRAPHY } from './utils/theme';
 import { NotificationTypes } from './types';
 import { KeyboardState, useSharedValue } from 'react-native-reanimated';
-import { useHMSActions } from './hooks-sdk';
+import { useCanPublishAudio, useCanPublishScreen, useCanPublishVideo, useHMSActions } from './hooks-sdk';
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
 export const useHMSListeners = setPeerTrackNodes => {
   const hmsInstance = useHMSInstance();
   const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
@@ -668,7 +669,7 @@ export const useHMSSessionStoreListeners = gridViewRef => {
               spotlightTrackId: id
             }));
             // Scroll to start of the list
-            (_gridViewRef$current = gridViewRef.current) === null || _gridViewRef$current === void 0 || (_gridViewRef$current = _gridViewRef$current.getRegularTilesFlatlistRef().current) === null || _gridViewRef$current === void 0 || _gridViewRef$current.scrollToOffset({
+            gridViewRef === null || gridViewRef === void 0 || (_gridViewRef$current = gridViewRef.current) === null || _gridViewRef$current === void 0 || (_gridViewRef$current = _gridViewRef$current.getRegularTilesFlatlistRef().current) === null || _gridViewRef$current === void 0 || _gridViewRef$current.scrollToOffset({
               animated: true,
               offset: 0
             });
@@ -1208,6 +1209,7 @@ export const useHMSConfig = () => {
   };
 };
 export const useShowChatAndParticipants = () => {
+  const isHLSViewer = useIsHLSViewer();
   const dispatch = useDispatch();
   const {
     modalVisibleType,
@@ -1216,7 +1218,7 @@ export const useShowChatAndParticipants = () => {
   const overlayChatLayout = useHMSChatLayoutConfig(chatConfig => chatConfig === null || chatConfig === void 0 ? void 0 : chatConfig.is_overlay);
   const canShowChat = useHMSConferencingScreenConfig(conferencingScreenConfig => {
     var _conferencingScreenCo2;
-    return !!(conferencingScreenConfig !== null && conferencingScreenConfig !== void 0 && (_conferencingScreenCo2 = conferencingScreenConfig.elements) !== null && _conferencingScreenCo2 !== void 0 && _conferencingScreenCo2.chat);
+    return !!(conferencingScreenConfig !== null && conferencingScreenConfig !== void 0 && (_conferencingScreenCo2 = conferencingScreenConfig.elements) !== null && _conferencingScreenCo2 !== void 0 && _conferencingScreenCo2.chat) && !isHLSViewer;
   });
   const canShowParticipants = useHMSConferencingScreenConfig(conferencingScreenConfig => {
     var _conferencingScreenCo3;
@@ -1708,13 +1710,14 @@ export const useBackButtonPress = () => {
   }, [handleBackPress, handleModalVisibleType]);
 };
 export const useLandscapeImmersiveMode = () => {
+  const isHLSViewer = useIsHLSViewer();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   useEffect(() => {
-    if (isLandscapeOrientation) {
+    if (!isHLSViewer && isLandscapeOrientation) {
       WindowController.hideSystemBars();
       return WindowController.showSystemBars;
     }
-  }, [isLandscapeOrientation]);
+  }, [isHLSViewer, isLandscapeOrientation]);
 };
 export const useHLSCuedPolls = () => {
   const dispatch = useDispatch();
@@ -2087,4 +2090,148 @@ export const useAllowBlockingPeerFromChat = () => {
     return (config === null || config === void 0 || (_config$real_time_con = config.real_time_controls) === null || _config$real_time_con === void 0 ? void 0 : _config$real_time_con.can_block_user) ?? false;
   });
 };
+export const useCanShowRoomOptionsButton = () => {
+  const canPublishAudio = useCanPublishAudio();
+  const canPublishVideo = useCanPublishVideo();
+  const canPublishScreen = useCanPublishScreen();
+  const isViewer = !(canPublishAudio || canPublishVideo || canPublishScreen);
+  const editUsernameDisabled = useSelector(state => state.app.editUsernameDisabled);
+  const [isNoiseCancellationAvailable, setIsNoiseCancellationAvailable] = useState(false);
+  const noiseCancellationPlugin = useSelector(state => state.hmsStates.noiseCancellationPlugin);
+  useEffect(() => {
+    if (noiseCancellationPlugin) {
+      let mounted = true;
+      noiseCancellationPlugin.isNoiseCancellationAvailable().then(isAvailable => {
+        if (mounted) {
+          setIsNoiseCancellationAvailable(isAvailable);
+        }
+      });
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [noiseCancellationPlugin]);
+  const canShowBRB = useHMSLayoutConfig(layoutConfig => {
+    var _layoutConfig$screens3;
+    return !!(layoutConfig !== null && layoutConfig !== void 0 && (_layoutConfig$screens3 = layoutConfig.screens) !== null && _layoutConfig$screens3 !== void 0 && (_layoutConfig$screens3 = _layoutConfig$screens3.conferencing) !== null && _layoutConfig$screens3 !== void 0 && (_layoutConfig$screens3 = _layoutConfig$screens3.default) !== null && _layoutConfig$screens3 !== void 0 && (_layoutConfig$screens3 = _layoutConfig$screens3.elements) !== null && _layoutConfig$screens3 !== void 0 && _layoutConfig$screens3.brb);
+  });
+  const canStartRecording = useSelector(state => {
+    var _state$hmsStates$loca9;
+    return !!((_state$hmsStates$loca9 = state.hmsStates.localPeer) !== null && _state$hmsStates$loca9 !== void 0 && (_state$hmsStates$loca9 = _state$hmsStates$loca9.role) !== null && _state$hmsStates$loca9 !== void 0 && (_state$hmsStates$loca9 = _state$hmsStates$loca9.permissions) !== null && _state$hmsStates$loca9 !== void 0 && _state$hmsStates$loca9.browserRecording);
+  });
+  const canReadOrWritePoll = useSelector(state => {
+    var _state$hmsStates$loca10;
+    const permissions = (_state$hmsStates$loca10 = state.hmsStates.localPeer) === null || _state$hmsStates$loca10 === void 0 || (_state$hmsStates$loca10 = _state$hmsStates$loca10.role) === null || _state$hmsStates$loca10 === void 0 ? void 0 : _state$hmsStates$loca10.permissions;
+    return (permissions === null || permissions === void 0 ? void 0 : permissions.pollRead) || (permissions === null || permissions === void 0 ? void 0 : permissions.pollWrite);
+  });
+  const {
+    canShowParticipants
+  } = useShowChatAndParticipants();
+  const canEditUsernameFromRoomModal = isViewer && !editUsernameDisabled;
+  const canShowOptions = canShowParticipants || canPublishScreen || canShowBRB || canStartRecording || canEditUsernameFromRoomModal || canReadOrWritePoll || isNoiseCancellationAvailable;
+  return canShowOptions;
+};
+export const useHLSViewsConstraints = () => {
+  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const {
+    width: safeAreaWidthFrame,
+    height: safeAreaHeightFrame
+  } = useSafeAreaFrame();
+  const {
+    top: topInset,
+    bottom: bottomInset,
+    left: leftInset,
+    right: rightInset
+  } = useSafeAreaInsets();
+  const playerWrapperConstraints = hlsFullScreen ? {
+    width: safeAreaWidthFrame - leftInset - rightInset,
+    height: isLandscapeOrientation ? safeAreaHeightFrame : safeAreaHeightFrame - topInset - bottomInset
+  } : {
+    width: isLandscapeOrientation ? (safeAreaWidthFrame - leftInset - rightInset) * 0.6 : safeAreaWidthFrame,
+    height: isLandscapeOrientation ? safeAreaHeightFrame : safeAreaWidthFrame * 9 / 16
+  };
+  const chatWrapperConstraints = {
+    width: isLandscapeOrientation ? safeAreaWidthFrame - playerWrapperConstraints.width - leftInset : playerWrapperConstraints.width,
+    height: isLandscapeOrientation ? playerWrapperConstraints.height : safeAreaHeightFrame - playerWrapperConstraints.height - topInset
+  };
+  const descriptionPaneConstraints = chatWrapperConstraints;
+  return {
+    playerWrapperConstraints,
+    chatWrapperConstraints,
+    descriptionPaneConstraints
+  };
+};
+export const useHLSPlayerConstraints = () => {
+  const hlsFullScreen = useSelector(state => state.app.hlsFullScreen);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const resolution = useHMSHLSPlayerResolution();
+  const {
+    playerWrapperConstraints
+  } = useHLSViewsConstraints();
+  const wrapperWidth = playerWrapperConstraints.width;
+  const wrapperHeight = playerWrapperConstraints.height;
+  if (!resolution) {
+    return {
+      width: wrapperWidth,
+      height: wrapperHeight
+    };
+  }
+  const sr = resolution.width / resolution.height; // stream width/height ratio
+  const wr = wrapperWidth / wrapperHeight; // Wrapper width/height ratio
+
+  /**
+   * Handling Landscape Orientation for both Full and Normal screen
+   */
+  if (isLandscapeOrientation) {
+    return sr > wr ? {
+      width: wrapperWidth,
+      height: wrapperWidth / sr
+    } : {
+      width: sr * wrapperHeight,
+      height: wrapperHeight
+    };
+  }
+
+  /**
+   * Handling Portrait Orientation
+   */
+  if (hlsFullScreen) {
+    return {
+      width: sr > wr ? wrapperWidth : wrapperHeight * sr,
+      height: sr > wr ? wrapperWidth / sr : wrapperHeight
+    };
+  }
+  return {
+    width: wrapperHeight * sr,
+    height: wrapperHeight
+  };
+};
+export const useHLSStreamResumePause = playerRef => {
+  const dispatch = useDispatch();
+  const isPaused = Platform.select({
+    android: useSelector(state => state.app.hlsStreamPaused_android),
+    ios: useHMSHLSPlayerPlaybackState() === HMSHLSPlayerPlaybackState.PAUSED,
+    default: false
+  });
+  const resumeStream = useCallback(() => {
+    var _playerRef$current;
+    (_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 || _playerRef$current.resume();
+    if (Platform.OS === 'android') {
+      dispatch(setAndroidHLSStreamPaused(false));
+    }
+  }, []);
+  const pauseStream = useCallback(() => {
+    var _playerRef$current2;
+    (_playerRef$current2 = playerRef.current) === null || _playerRef$current2 === void 0 || _playerRef$current2.pause();
+    if (Platform.OS === 'android') {
+      dispatch(setAndroidHLSStreamPaused(true));
+    }
+  }, []);
+  return {
+    isPaused,
+    resumeStream,
+    pauseStream
+  };
+};
 //# sourceMappingURL=hooks-util.js.map