@100mslive/react-native-room-kit 0.0.1

package/lib/module/hooks-util.js

@@ -0,0 +1,772 @@
+import { HMSConfig, HMSPIPListenerActions
+
+// HMSPeerUpdate,
+, HMSRoomUpdate, HMSTrackSource, HMSTrackType, HMSTrackUpdate, HMSUpdateListenerActions
+// useHMSPeerUpdates,
+} from '@100mslive/react-native-hms';
+import Toast from 'react-native-simple-toast';
+import { useRef, useCallback, useEffect, useState, useMemo } from 'react';
+import { ModalTypes, PipModes } from './utils/types';
+import { createPeerTrackNode, parseMetadata } from './utils/functions';
+import { useDispatch, useSelector, useStore } from 'react-redux';
+import { addMessage, addPinnedMessage, changePipModeStatus, clearStore, saveUserData, setHMSLocalPeerState, setHMSRoleState, setHMSRoomState, setIsLocalAudioMutedState, setIsLocalVideoMutedState, setModalType } from './redux/actions';
+import { degradeOrRestorePeerTrackNodes,
+// peerTrackNodeExistForPeer,
+peerTrackNodeExistForPeerAndTrack,
+// removePeerTrackNodes,
+removePeerTrackNodesWithTrack, replacePeerTrackNodes, replacePeerTrackNodesWithTrack } from './peerTrackNodeUtils';
+import { MeetingState } from './types';
+import { AppState, InteractionManager, LayoutAnimation, Platform } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useIsLandscapeOrientation, useIsPortraitOrientation } from './utils/dimension';
+import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { selectIsHLSViewer } from './hooks-util-selectors';
+export const useHMSListeners = (setPeerTrackNodes, setMeetingState) => {
+  const hmsInstance = useHMSInstance();
+  const updateLocalPeer = useUpdateHMSLocalPeer(hmsInstance);
+  useHMSRoomUpdate(hmsInstance, setMeetingState);
+
+  // useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+
+  useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+};
+const useHMSRoomUpdate = (hmsInstance, setMeetingState) => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const roomUpdateHandler = data => {
+      var _room$localPeer$role;
+      const {
+        room,
+        type
+      } = data;
+      dispatch(setHMSRoomState(room));
+
+      /**
+       * Handle case when User is joining as HLSViewer,
+       * before ON_JOIN, if ON_ROOM comes then we can show Meeting screen to user, instead of Loader or Preview
+       */
+      if (((_room$localPeer$role = room.localPeer.role) === null || _room$localPeer$role === void 0 || (_room$localPeer$role = _room$localPeer$role.name) === null || _room$localPeer$role === void 0 ? void 0 : _room$localPeer$role.includes('hls-')) ?? false) {
+        dispatch(setHMSLocalPeerState(room.localPeer));
+        setMeetingState(prevMeetingScreen => {
+          if (prevMeetingScreen !== MeetingState.IN_MEETING) {
+            return MeetingState.IN_MEETING;
+          }
+          return prevMeetingScreen;
+        });
+      }
+      if (type === HMSRoomUpdate.BROWSER_RECORDING_STATE_UPDATED) {
+        var _room$browserRecordin, _room$browserRecordin2;
+        let streaming = room === null || room === void 0 || (_room$browserRecordin = room.browserRecordingState) === null || _room$browserRecordin === void 0 ? void 0 : _room$browserRecordin.running;
+        const startAtDate = room === null || room === void 0 || (_room$browserRecordin2 = room.browserRecordingState) === null || _room$browserRecordin2 === void 0 ? void 0 : _room$browserRecordin2.startedAt;
+        let startTime = null;
+        if (startAtDate) {
+          var _startAtDate$getMinut;
+          let hours = startAtDate.getHours().toString();
+          let minutes = (_startAtDate$getMinut = startAtDate.getMinutes()) === null || _startAtDate$getMinut === void 0 ? void 0 : _startAtDate$getMinut.toString();
+          startTime = hours + ':' + minutes;
+        }
+        Toast.showWithGravity(`Browser Recording ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, Toast.LONG, Toast.TOP);
+      } else if (type === HMSRoomUpdate.HLS_STREAMING_STATE_UPDATED) {
+        var _room$hlsStreamingSta;
+        let streaming = room === null || room === void 0 || (_room$hlsStreamingSta = room.hlsStreamingState) === null || _room$hlsStreamingSta === void 0 ? void 0 : _room$hlsStreamingSta.running;
+        Toast.showWithGravity(`HLS Streaming ${streaming ? 'Started' : 'Stopped'}`, Toast.LONG, Toast.TOP);
+      } else if (type === HMSRoomUpdate.RTMP_STREAMING_STATE_UPDATED) {
+        var _room$rtmpHMSRtmpStre, _room$rtmpHMSRtmpStre2;
+        let streaming = room === null || room === void 0 || (_room$rtmpHMSRtmpStre = room.rtmpHMSRtmpStreamingState) === null || _room$rtmpHMSRtmpStre === void 0 ? void 0 : _room$rtmpHMSRtmpStre.running;
+        const startAtDate = room === null || room === void 0 || (_room$rtmpHMSRtmpStre2 = room.rtmpHMSRtmpStreamingState) === null || _room$rtmpHMSRtmpStre2 === void 0 ? void 0 : _room$rtmpHMSRtmpStre2.startedAt;
+        let startTime = null;
+        if (startAtDate) {
+          var _startAtDate$getMinut2;
+          let hours = startAtDate.getHours().toString();
+          let minutes = (_startAtDate$getMinut2 = startAtDate.getMinutes()) === null || _startAtDate$getMinut2 === void 0 ? void 0 : _startAtDate$getMinut2.toString();
+          startTime = hours + ':' + minutes;
+        }
+        Toast.showWithGravity(`RTMP Streaming ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, Toast.LONG, Toast.TOP);
+      } else if (type === HMSRoomUpdate.SERVER_RECORDING_STATE_UPDATED) {
+        var _room$serverRecording, _room$serverRecording2;
+        let streaming = room === null || room === void 0 || (_room$serverRecording = room.serverRecordingState) === null || _room$serverRecording === void 0 ? void 0 : _room$serverRecording.running;
+        const startAtDate = room === null || room === void 0 || (_room$serverRecording2 = room.serverRecordingState) === null || _room$serverRecording2 === void 0 ? void 0 : _room$serverRecording2.startedAt;
+        let startTime = null;
+        if (startAtDate) {
+          var _startAtDate$getMinut3;
+          let hours = startAtDate.getHours().toString();
+          let minutes = (_startAtDate$getMinut3 = startAtDate.getMinutes()) === null || _startAtDate$getMinut3 === void 0 ? void 0 : _startAtDate$getMinut3.toString();
+          startTime = hours + ':' + minutes;
+        }
+        Toast.showWithGravity(`Server Recording ${streaming ? `Started ${startTime ? 'At ' + startTime : ''}` : 'Stopped'}`, Toast.LONG, Toast.TOP);
+      }
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ROOM_UPDATE, roomUpdateHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_ROOM_UPDATE);
+    };
+  }, [hmsInstance]);
+};
+
+// type PeerUpdate = {
+//   peer: HMSPeer;
+//   type: HMSPeerUpdate;
+// };
+
+// const useHMSPeersUpdate = (
+//   hmsInstance: HMSSDK,
+//   updateLocalPeer: () => void,
+//   setPeerTrackNodes: React.Dispatch<React.SetStateAction<PeerTrackNode[]>>
+// ) => {
+//   useHMSPeerUpdates(
+//     ({ peer, type }: PeerUpdate) => {
+//       if (type === HMSPeerUpdate.PEER_JOINED) {
+//         return;
+//       }
+//       if (type === HMSPeerUpdate.PEER_LEFT) {
+//         setPeerTrackNodes((prevPeerTrackNodes) =>
+//           removePeerTrackNodes(prevPeerTrackNodes, peer)
+//         );
+//         return;
+//       }
+//       if (peer.isLocal) {
+//         setPeerTrackNodes((prevPeerTrackNodes) => {
+//           if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+//             return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+//           }
+//           return prevPeerTrackNodes;
+//         });
+
+//         // - TODO: update local localPeer state
+//         // - Pass this updated data to Meeting component -> DisplayView component
+//         updateLocalPeer();
+//         return;
+//       }
+//       if (type === HMSPeerUpdate.ROLE_CHANGED) {
+//         if (
+//           peer.role?.publishSettings?.allowed === undefined ||
+//           (peer.role?.publishSettings?.allowed &&
+//             peer.role?.publishSettings?.allowed.length < 1)
+//         ) {
+//           setPeerTrackNodes((prevPeerTrackNodes) => {
+//             if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+//               return removePeerTrackNodes(prevPeerTrackNodes, peer);
+//             }
+//             return prevPeerTrackNodes;
+//           });
+//         }
+//         return;
+//       }
+//       if (
+//         type === HMSPeerUpdate.METADATA_CHANGED ||
+//         type === HMSPeerUpdate.NAME_CHANGED ||
+//         type === HMSPeerUpdate.NETWORK_QUALITY_UPDATED
+//       ) {
+//         setPeerTrackNodes((prevPeerTrackNodes) => {
+//           if (peerTrackNodeExistForPeer(prevPeerTrackNodes, peer)) {
+//             return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+//           }
+//           return prevPeerTrackNodes;
+//         });
+//         return;
+//       }
+//     },
+//     [hmsInstance]
+//   );
+// };
+const useHMSTrackUpdate = (hmsInstance, updateLocalPeer, setPeerTrackNodes) => {
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const trackUpdateHandler = _ref => {
+      let {
+        peer,
+        track,
+        type
+      } = _ref;
+      if (type === HMSTrackUpdate.TRACK_ADDED) {
+        setPeerTrackNodes(prevPeerTrackNodes => {
+          if (peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)) {
+            if (track.type === HMSTrackType.VIDEO) {
+              return replacePeerTrackNodesWithTrack(prevPeerTrackNodes, peer, track);
+            }
+            return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+          }
+          const newPeerTrackNode = createPeerTrackNode(peer, track);
+          return [...prevPeerTrackNodes, newPeerTrackNode];
+        });
+
+        // - TODO: update local localPeer state
+        // - Pass this updated data to Meeting component -> DisplayView component
+        if (peer.isLocal) {
+          updateLocalPeer();
+        }
+        return;
+      }
+      if (type === HMSTrackUpdate.TRACK_REMOVED) {
+        var _peer$audioTrack, _peer$videoTrack;
+        if (track.source !== HMSTrackSource.REGULAR || ((_peer$audioTrack = peer.audioTrack) === null || _peer$audioTrack === void 0 ? void 0 : _peer$audioTrack.trackId) === undefined && ((_peer$videoTrack = peer.videoTrack) === null || _peer$videoTrack === void 0 ? void 0 : _peer$videoTrack.trackId) === undefined) {
+          setPeerTrackNodes(prevPeerTrackNodes => removePeerTrackNodesWithTrack(prevPeerTrackNodes, peer, track));
+        }
+
+        // - TODO: update local localPeer state
+        // - Pass this updated data to Meeting component -> DisplayView component
+        if (peer.isLocal) {
+          updateLocalPeer();
+        }
+        return;
+      }
+      if (type === HMSTrackUpdate.TRACK_MUTED || type === HMSTrackUpdate.TRACK_UNMUTED) {
+        // - TODO: update local mute states
+        // - Pass this updated data to Meeting component -> DisplayView component
+        if (peer.isLocal) {
+          if (track.type === HMSTrackType.AUDIO) {
+            dispatch(setIsLocalAudioMutedState(track.isMute()));
+          } else if (track.type === HMSTrackType.VIDEO) {
+            dispatch(setIsLocalVideoMutedState(track.isMute()));
+          }
+        }
+        setPeerTrackNodes(prevPeerTrackNodes => {
+          if (peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)) {
+            if (track.type === HMSTrackType.VIDEO) {
+              return replacePeerTrackNodesWithTrack(prevPeerTrackNodes, peer, track);
+            }
+            return replacePeerTrackNodes(prevPeerTrackNodes, peer);
+          }
+          return prevPeerTrackNodes;
+        });
+
+        // - TODO: update local localPeer state
+        // - Pass this updated data to Meeting component -> DisplayView component
+        if (peer.isLocal) {
+          updateLocalPeer();
+        }
+        return;
+      }
+      if (type === HMSTrackUpdate.TRACK_RESTORED || type === HMSTrackUpdate.TRACK_DEGRADED) {
+        setPeerTrackNodes(prevPeerTrackNodes => {
+          if (peerTrackNodeExistForPeerAndTrack(prevPeerTrackNodes, peer, track)) {
+            return degradeOrRestorePeerTrackNodes(prevPeerTrackNodes, peer, track, type === HMSTrackUpdate.TRACK_DEGRADED);
+          }
+          return prevPeerTrackNodes;
+        });
+        return;
+      }
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_TRACK_UPDATE, trackUpdateHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_TRACK_UPDATE);
+    };
+  }, [hmsInstance]);
+};
+const useUpdateHMSLocalPeer = hmsInstance => {
+  const mountRef = useRef(false);
+  const dispatch = useDispatch();
+  const updateLocalPeer = useCallback(() => {
+    hmsInstance.getLocalPeer().then(latestLocalPeer => {
+      if (mountRef.current) {
+        dispatch(setHMSLocalPeerState(latestLocalPeer));
+      }
+    });
+  }, [hmsInstance]);
+  useEffect(() => {
+    mountRef.current = true;
+    updateLocalPeer();
+    return () => {
+      mountRef.current = false;
+    };
+  }, [updateLocalPeer]);
+  return updateLocalPeer;
+};
+export const useHMSInstance = () => {
+  const hmsInstance = useSelector(state => state.user.hmsInstance);
+  if (!hmsInstance) {
+    throw new Error('HMS Instance not available');
+  }
+  return hmsInstance;
+};
+export const useIsHLSViewer = () => {
+  return useSelector(state => selectIsHLSViewer(state.hmsStates.localPeer));
+};
+export const useHMSChangeTrackStateRequest = (callback, deps) => {
+  const hmsInstance = useHMSInstance();
+  const [trackStateChangeRequest, setTrackStateChangeRequest] = useState(null);
+  useEffect(() => {
+    const changeTrackStateRequestHandler = request => {
+      if (!(request !== null && request !== void 0 && request.mute)) {
+        var _request$requestedBy;
+        setTrackStateChangeRequest({
+          requestedBy: request === null || request === void 0 || (_request$requestedBy = request.requestedBy) === null || _request$requestedBy === void 0 ? void 0 : _request$requestedBy.name,
+          suggestedRole: request === null || request === void 0 ? void 0 : request.trackType
+        });
+        callback === null || callback === void 0 ? void 0 : callback(request);
+      } else {
+        var _request$requestedBy2;
+        Toast.showWithGravity(`Track Muted: ${request === null || request === void 0 || (_request$requestedBy2 = request.requestedBy) === null || _request$requestedBy2 === void 0 ? void 0 : _request$requestedBy2.name} Muted Your ${request === null || request === void 0 ? void 0 : request.trackType}`, Toast.LONG, Toast.TOP);
+      }
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_CHANGE_TRACK_STATE_REQUEST, changeTrackStateRequestHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_CHANGE_TRACK_STATE_REQUEST);
+    };
+  }, [...(deps || []), hmsInstance]);
+  return trackStateChangeRequest;
+};
+export const useHMSRoleChangeRequest = (callback, deps) => {
+  const hmsInstance = useHMSInstance();
+  const [roleChangeRequest, setRoleChangeRequest] = useState(null);
+  useEffect(() => {
+    const changeRoleRequestHandler = request => {
+      var _request$requestedBy3, _request$suggestedRol;
+      setRoleChangeRequest({
+        requestedBy: request === null || request === void 0 || (_request$requestedBy3 = request.requestedBy) === null || _request$requestedBy3 === void 0 ? void 0 : _request$requestedBy3.name,
+        suggestedRole: request === null || request === void 0 || (_request$suggestedRol = request.suggestedRole) === null || _request$suggestedRol === void 0 ? void 0 : _request$suggestedRol.name
+      });
+      callback === null || callback === void 0 ? void 0 : callback(request);
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_ROLE_CHANGE_REQUEST, changeRoleRequestHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_ROLE_CHANGE_REQUEST);
+    };
+  }, [...(deps || []), hmsInstance]);
+  return roleChangeRequest;
+};
+export const useHMSSessionStoreListeners = () => {
+  const dispatch = useDispatch();
+  const hmsSessionStore = useSelector(state => state.user.hmsSessionStore);
+  const sessionStoreListenersRef = useRef([]);
+  useEffect(() => {
+    // Check if instance of HMSSessionStore is available
+    if (hmsSessionStore) {
+      let toastTimeoutId = null;
+      const addSessionStoreListeners = () => {
+        // Handle 'spotlight' key values
+        const handleSpotlightIdChange = id => {
+          // set value to the state to rerender the component to reflect changes
+          dispatch(saveUserData({
+            spotlightTrackId: id
+          }));
+        };
+
+        // Handle 'pinnedMessage' key values
+        const handlePinnedMessageChange = data => {
+          dispatch(addPinnedMessage(data));
+        };
+
+        // Getting value for 'spotlight' key by using `get` method on HMSSessionStore instance
+        hmsSessionStore.get('spotlight').then(data => {
+          console.log('Session Store get `spotlight` key value success: ', data);
+          handleSpotlightIdChange(data);
+        }).catch(error => console.log('Session Store get `spotlight` key value error: ', error));
+
+        // Getting value for 'pinnedMessage' key by using `get` method on HMSSessionStore instance
+        hmsSessionStore.get('pinnedMessage').then(data => {
+          console.log('Session Store get `pinnedMessage` key value success: ', data);
+          handlePinnedMessageChange(data);
+        }).catch(error => console.log('Session Store get `pinnedMessage` key value error: ', error));
+        let lastSpotlightValue = null;
+        let lastPinnedMessageValue = null;
+
+        // Add subscription for `spotlight` & `pinnedMessage` keys updates on Session Store
+        const subscription = hmsSessionStore.addKeyChangeListener(['spotlight', 'pinnedMessage'], (error, data) => {
+          // If error occurs, handle error and return early
+          if (error !== null) {
+            console.log('`spotlight` & `pinnedMessage` key listener Error -> ', error);
+            return;
+          }
+
+          // If no error, handle data
+          if (data !== null) {
+            switch (data.key) {
+              case 'spotlight':
+                {
+                  handleSpotlightIdChange(data.value);
+
+                  // Showing Toast message if value has actually changed
+                  if (data.value !== lastSpotlightValue && (data.value || lastSpotlightValue)) {
+                    Toast.showWithGravity(`SessionStore: \`spotlight\` key's value changed to ${data.value}`, Toast.LONG, Toast.TOP);
+                  }
+                  lastSpotlightValue = data.value;
+                  break;
+                }
+              case 'pinnedMessage':
+                {
+                  handlePinnedMessageChange(data.value);
+
+                  // Showing Toast message if value has actually changed
+                  if (data.value !== lastPinnedMessageValue && (data.value || lastPinnedMessageValue)) {
+                    if (toastTimeoutId !== null) {
+                      clearTimeout(toastTimeoutId);
+                    }
+                    toastTimeoutId = setTimeout(() => {
+                      Toast.showWithGravity(`SessionStore: \`pinnedMessage\` key's value changed to ${data.value}`, Toast.LONG, Toast.TOP);
+                    }, 1500);
+                  }
+                  lastPinnedMessageValue = data.value;
+                  break;
+                }
+            }
+          }
+        });
+
+        // Save reference of `subscription` in a ref
+        sessionStoreListenersRef.current.push(subscription);
+      };
+      addSessionStoreListeners();
+      return () => {
+        // remove Session Store key update listener on cleanup
+        sessionStoreListenersRef.current.forEach(listener => listener.remove());
+        if (toastTimeoutId !== null) clearTimeout(toastTimeoutId);
+      };
+    }
+  }, [hmsSessionStore]);
+};
+export const useHMSSessionStore = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const onSessionStoreAvailableListener = _ref2 => {
+      let {
+        sessionStore
+      } = _ref2;
+      // Saving `sessionStore` reference in `redux`
+      dispatch(saveUserData({
+        hmsSessionStore: sessionStore
+      }));
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE, onSessionStoreAvailableListener);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_SESSION_STORE_AVAILABLE);
+    };
+  }, [hmsInstance]);
+};
+export const useHMSMessages = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  useEffect(() => {
+    const onMessageListener = message => {
+      dispatch(addMessage(message));
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_MESSAGE, onMessageListener);
+    return () => {
+      // TODO: Remove this listener when user leaves, removed or room is ended
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_MESSAGE);
+    };
+  }, [hmsInstance]);
+};
+export const useHMSPIPRoomLeave = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  // TODO: What if this is undefined?
+  const navigation = useNavigation();
+  useEffect(() => {
+    const pipRoomLeaveHandler = () => {
+      hmsInstance.destroy().then(s => {
+        console.log('Destroy Success: ', s);
+        // TODOS:
+        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
+        //    - Reset Redux States
+        //    - HMSInstance will not be available now
+        //    - When your presses "Re Join" Action button, restart process from root component
+        //    - When your presses "Done" Action button
+        //        - If we have callback fn, call it
+        //        - Otherwise try our best to navigate away from current screen
+        //
+        // - No screen to show
+        //    - No need to reset redux state?
+        //    - HMSInstance will be available till this point
+        //    - If we have callback fn, call it
+        //    - Otherwise try our best to navigate away from current screen
+        //    - When we are navigated away from screen, HMSInstance will be not available
+
+        // dispatch(clearMessageData());
+        // dispatch(clearPeerData());
+        // dispatch(clearHmsReference());
+
+        // if (navigation.canGoBack()) {
+        //   navigation.goBack();
+        // } else {
+        // TODO: remove this later
+        navigation.navigate('QRCodeScreen');
+        dispatch(clearStore());
+        // }
+      }).catch(e => {
+        console.log(`Destroy HMS instance Error: ${e}`);
+        Toast.showWithGravity(`Destroy HMS instance Error: ${e}`, Toast.LONG, Toast.TOP);
+      });
+    };
+    hmsInstance.addEventListener(HMSPIPListenerActions.ON_PIP_ROOM_LEAVE, pipRoomLeaveHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSPIPListenerActions.ON_PIP_ROOM_LEAVE);
+    };
+  }, [hmsInstance]);
+};
+export const useHMSRemovedFromRoomUpdate = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  // TODO: What if this is undefined?
+  const navigation = useNavigation();
+  useEffect(() => {
+    const removedFromRoomHandler = () => {
+      hmsInstance.destroy().then(s => {
+        console.log('Destroy Success: ', s);
+        // TODOS:
+        // - If show `Meeting_Ended` is true, show Meeting screen by setting state to MEETING_ENDED
+        //    - Reset Redux States
+        //    - HMSInstance will not be available now
+        //    - When your presses "Re Join" Action button, restart process from root component
+        //    - When your presses "Done" Action button
+        //        - If we have callback fn, call it
+        //        - Otherwise try our best to navigate away from current screen
+        //
+        // - No screen to show
+        //    - No need to reset redux state?
+        //    - HMSInstance will be available till this point
+        //    - If we have callback fn, call it
+        //    - Otherwise try our best to navigate away from current screen
+        //    - When we are navigated away from screen, HMSInstance will be not available
+
+        // dispatch(clearMessageData());
+        // dispatch(clearPeerData());
+        // dispatch(clearHmsReference());
+
+        // if (navigation.canGoBack()) {
+        //   navigation.goBack();
+        // } else {
+        // TODO: remove this later
+        navigation.navigate('QRCodeScreen');
+        dispatch(clearStore());
+        // }
+      }).catch(e => {
+        console.log(`Destroy HMS instance Error: ${e}`);
+        Toast.showWithGravity(`Destroy HMS instance Error: ${e}`, Toast.LONG, Toast.TOP);
+      });
+    };
+    hmsInstance.addEventListener(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM, removedFromRoomHandler);
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_REMOVED_FROM_ROOM);
+    };
+  }, [hmsInstance]);
+};
+export const usePIPListener = () => {
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
+  const isPipModeActive = useSelector(state => state.app.pipModeStatus === PipModes.ACTIVE);
+  useEffect(() => {
+    if (isPipModeActive) {
+      const appStateListener = () => {
+        LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+        dispatch(changePipModeStatus(PipModes.INACTIVE));
+      };
+      AppState.addEventListener('focus', appStateListener);
+      return () => {
+        AppState.removeEventListener('focus', appStateListener);
+        dispatch(changePipModeStatus(PipModes.INACTIVE));
+      };
+    }
+  }, [isPipModeActive]);
+
+  // Check if PIP is supported or not
+  useEffect(() => {
+    // Only check for PIP support if PIP is not active
+    if (hmsInstance && !isPipModeActive) {
+      const check = async () => {
+        try {
+          const isSupported = await hmsInstance.isPipModeSupported();
+          if (!isSupported) {
+            dispatch(changePipModeStatus(PipModes.NOT_AVAILABLE));
+          }
+        } catch (error) {
+          dispatch(changePipModeStatus(PipModes.NOT_AVAILABLE));
+        }
+      };
+      check();
+    }
+  }, [isPipModeActive, hmsInstance]);
+};
+let modalTaskRef = {
+  current: null
+};
+export const clearPendingModalTasks = () => {
+  if (Platform.OS === 'android') {
+    var _modalTaskRef$current;
+    (_modalTaskRef$current = modalTaskRef.current) === null || _modalTaskRef$current === void 0 ? void 0 : _modalTaskRef$current.cancel();
+  } else {
+    clearTimeout(modalTaskRef.current);
+  }
+};
+const addModalTask = task => {
+  clearPendingModalTasks();
+  if (Platform.OS === 'android') {
+    modalTaskRef.current = InteractionManager.runAfterInteractions(task);
+  } else {
+    modalTaskRef.current = setTimeout(task, 500);
+  }
+};
+export const useModalType = () => {
+  const dispatch = useDispatch();
+  const modalType = useSelector(state => state.app.modalType);
+  const setModalVisible = modalType => {
+    dispatch(setModalType(modalType));
+  };
+  const handleModalVisible = useCallback(function (modalType) {
+    let delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (delay) {
+      setModalVisible(ModalTypes.DEFAULT);
+      const task = () => {
+        setModalVisible(modalType);
+      };
+      addModalTask(task);
+    } else {
+      setModalVisible(modalType);
+    }
+  }, []);
+  return {
+    modalVisibleType: modalType,
+    handleModalVisibleType: handleModalVisible
+  };
+};
+export const useFetchHMSRoles = () => {
+  const dispatch = useDispatch();
+  const hmsInstance = useHMSInstance();
+  useEffect(() => {
+    let ignore = false;
+    hmsInstance.getRoles().then(roles => {
+      if (!ignore) {
+        dispatch(setHMSRoleState(roles));
+      }
+    });
+    return () => {
+      ignore = true;
+    };
+  }, [hmsInstance]);
+};
+export const useShowLandscapeLayout = () => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  const localPeerRoleName = useSelector(state => {
+    var _state$hmsStates$loca;
+    return (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 || (_state$hmsStates$loca = _state$hmsStates$loca.role) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.name;
+  });
+  return isLandscapeOrientation && !!localPeerRoleName && localPeerRoleName.includes('hls-');
+};
+let hmsConfig = null;
+export const clearConfig = () => {
+  hmsConfig = null;
+};
+export const useHMSConfig = () => {
+  const hmsInstance = useHMSInstance();
+  const store = useStore();
+  const getConfig = useCallback(async () => {
+    var _storeState$user$endP, _storeState$user$endP2;
+    if (hmsConfig) return hmsConfig;
+    const storeState = store.getState();
+    const token = await hmsInstance.getAuthTokenByRoomCode(storeState.user.roomCode, storeState.user.userId, (_storeState$user$endP = storeState.user.endPoints) === null || _storeState$user$endP === void 0 ? void 0 : _storeState$user$endP.token);
+    hmsConfig = new HMSConfig({
+      authToken: token,
+      username: storeState.user.userName,
+      captureNetworkQualityInPreview: true,
+      endpoint: (_storeState$user$endP2 = storeState.user.endPoints) === null || _storeState$user$endP2 === void 0 ? void 0 : _storeState$user$endP2.init
+      // metadata: JSON.stringify({isHandRaised: true}), // To join with hand raised
+    });
+
+    return hmsConfig;
+  }, [hmsInstance]);
+  return {
+    clearConfig,
+    getConfig
+  };
+};
+export const useSafeDimensions = () => {
+  const {
+    height,
+    width
+  } = useSafeAreaFrame();
+  const safeAreaInsets = useSafeAreaInsets();
+  return {
+    safeWidth: width - safeAreaInsets.left - safeAreaInsets.right,
+    safeHeight: height - safeAreaInsets.top - safeAreaInsets.bottom
+  };
+};
+export const useShowChat = () => {
+  const dispatch = useDispatch();
+  const isHLSViewer = useIsHLSViewer();
+  const showChatView = useSelector(state => state.chatWindow.showChatView);
+  const hlsAspectRatio = useSelector(state => state.app.hlsAspectRatio);
+  const chatVisible = useMemo(() => {
+    if (!showChatView) return 'none';
+    if (isHLSViewer && ['16:9', '4:3'].includes(hlsAspectRatio.id)) return 'inset';
+
+    // TODO: handle case when type modal is selected, but chat modal is not shown because aspect ration modal was just closed
+    return 'modal';
+  }, [showChatView, hlsAspectRatio.id, isHLSViewer]);
+  const isChatVisibleInsetType = chatVisible === 'inset';
+  const showChat = useCallback(show => {
+    if (isChatVisibleInsetType) {
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
+    }
+    dispatch({
+      type: 'SET_SHOW_CHAT_VIEW',
+      showChatView: show
+    });
+  }, [isChatVisibleInsetType]);
+  return [chatVisible, showChat];
+};
+export const usePortraitChatViewVisible = () => {
+  const [chatVisible] = useShowChat();
+  const pipModeNotActive = useSelector(state => state.app.pipModeStatus !== PipModes.ACTIVE);
+  const isPortraitOrientation = useIsPortraitOrientation();
+  return pipModeNotActive && isPortraitOrientation && chatVisible === 'inset';
+};
+export const useLandscapeChatViewVisible = () => {
+  const [chatVisible] = useShowChat();
+  const pipModeNotActive = useSelector(state => state.app.pipModeStatus !== PipModes.ACTIVE);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+  return pipModeNotActive && isLandscapeOrientation && chatVisible === 'inset';
+};
+export const useFilteredParticipants = () => {
+  const hmsInstance = useHMSInstance();
+  const localPeer = useSelector(state => state.hmsStates.localPeer);
+  const [filter, setFilter] = useState('everyone');
+  const [participantsSearchInput, setParticipantsSearchInput] = useState('');
+  const [hmsPeers, setHmsPeers] = useState(localPeer ? [localPeer] : []);
+  const filteredPeerTrackNodes = useMemo(() => {
+    const newFilteredPeerTrackNodes = hmsPeers === null || hmsPeers === void 0 ? void 0 : hmsPeers.filter(peer => {
+      var _peer$role;
+      if (participantsSearchInput.length < 1 || peer.name.includes(participantsSearchInput) || (_peer$role = peer.role) !== null && _peer$role !== void 0 && (_peer$role = _peer$role.name) !== null && _peer$role !== void 0 && _peer$role.includes(participantsSearchInput)) {
+        return true;
+      }
+      return false;
+    });
+    if (filter === 'everyone') {
+      return newFilteredPeerTrackNodes;
+    }
+    if (filter === 'raised hand') {
+      return newFilteredPeerTrackNodes.filter(peer => {
+        const parsedMetaData = parseMetadata(peer.metadata);
+        return parsedMetaData.isHandRaised === true;
+      });
+    }
+    return newFilteredPeerTrackNodes.filter(peer => {
+      var _peer$role2;
+      return ((_peer$role2 = peer.role) === null || _peer$role2 === void 0 ? void 0 : _peer$role2.name) === filter;
+    });
+  }, [participantsSearchInput, filter, hmsPeers]);
+  useEffect(() => {
+    let ignore = false;
+    hmsInstance.getRemotePeers().then(peers => {
+      if (localPeer) {
+        InteractionManager.runAfterInteractions(() => {
+          if (!ignore) {
+            setHmsPeers([localPeer, ...peers]);
+          }
+        });
+      }
+    });
+    return () => {
+      ignore = true;
+    };
+  }, [localPeer, hmsInstance]);
+  return {
+    allParticipants: hmsPeers,
+    filteredParticipants: filteredPeerTrackNodes,
+    selectedFilter: filter,
+    changeFilter: setFilter,
+    searchText: participantsSearchInput,
+    setSearchText: setParticipantsSearchInput
+  };
+};
+//# sourceMappingURL=hooks-util.js.map