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

package/src/components/PeerSettingsModalContent.tsx

@@ -41,6 +41,7 @@ export const PeerSettingsModalContent: React.FC<
   const spotlightTrackId = useSelector(
     (state: RootState) => state.user.spotlightTrackId
   );
+  const debugMode = useSelector((state: RootState) => state.user.debugMode);
   const { handleModalVisibleType: setModalVisible } = useModalType();
 
   const removePeer = () => {
@@ -241,9 +242,10 @@ export const PeerSettingsModalContent: React.FC<
         ) : null}
 
         {/* Don't show Capture Screenshot option, if track is screenshare of local peer */}
-        {peerTrackNode.peer.isLocal &&
-        peerTrackNode.track &&
-        peerTrackNode.track.source === HMSTrackSource.SCREEN ? null : (
+        {!debugMode ||
+        (peerTrackNode.peer.isLocal &&
+          peerTrackNode.track &&
+          peerTrackNode.track.source === HMSTrackSource.SCREEN) ? null : (
           <SettingItem
             text="Capture Screenshot"
             IconType={MaterialCommunityIcons}
@@ -254,7 +256,7 @@ export const PeerSettingsModalContent: React.FC<
         )}
 
         {/* Local Image Capture is only available for local peer */}
-        {peerTrackNode.peer.isLocal ? (
+        {debugMode && peerTrackNode.peer.isLocal ? (
           <SettingItem
             text="Local Image Capture"
             IconType={MaterialCommunityIcons}
@@ -267,7 +269,7 @@ export const PeerSettingsModalContent: React.FC<
         ) : null}
 
         {/* Don't show Streaming Quality option for local peer */}
-        {!peer.isLocal ? (
+        {debugMode && !peer.isLocal ? (
           <SettingItem
             text="Streaming Quality"
             IconType={Ionicons}

package/src/components/RoomSettingsModalContent.tsx

@@ -435,7 +435,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.hlsStreaming ? (
+        {debugMode && localPeerRole?.permissions?.hlsStreaming ? (
           <SettingItem
             onPress={handleHLSStreaming}
             text={`${isHLSStreaming === true ? 'Stop' : 'Start'} HLS Streaming`}
@@ -444,7 +444,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.rtmpStreaming ? (
+        {debugMode && localPeerRole?.permissions?.rtmpStreaming ? (
           <SettingItem
             onPress={handleRTMPAndRecording}
             text={
@@ -457,7 +457,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.changeRole ? (
+        {debugMode && localPeerRole?.permissions?.changeRole ? (
           <SettingItem
             onPress={changeBulkRole}
             text="Bulk Role Change"
@@ -466,7 +466,7 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.mute ? (
+        {debugMode && localPeerRole?.permissions?.mute ? (
           <SettingItem
             onPress={handleRemoteAudiosMute}
             text="Remote Mute All Audio Tracks"
@@ -475,8 +475,9 @@ export const RoomSettingsModalContent: React.FC<
           />
         ) : null}
 
-        {localPeerRole?.permissions?.mute ||
-        localPeerRole?.permissions?.unmute ? (
+        {debugMode &&
+        (localPeerRole?.permissions?.mute ||
+          localPeerRole?.permissions?.unmute) ? (
           <SettingItem
             onPress={changeTrackState}
             text="Change Track State For Role"

package/src/hooks-util.ts

@@ -5,7 +5,7 @@ import {
   HMSMessage,
   HMSPIPListenerActions,
   HMSPeer,
-  // HMSPeerUpdate,
+  HMSPeerUpdate,
   HMSRemotePeer,
   HMSRoleChangeRequest,
   HMSRoom,
@@ -45,9 +45,9 @@ import {
 } from './redux/actions';
 import {
   degradeOrRestorePeerTrackNodes,
-  // peerTrackNodeExistForPeer,
+  peerTrackNodeExistForPeer,
   peerTrackNodeExistForPeerAndTrack,
-  // removePeerTrackNodes,
+  removePeerTrackNodes,
   removePeerTrackNodesWithTrack,
   replacePeerTrackNodes,
   replacePeerTrackNodesWithTrack,
@@ -79,7 +79,7 @@ export const useHMSListeners = (
 
   useHMSRoomUpdate(hmsInstance, setMeetingState);
 
-  // useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
+  useHMSPeersUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 
   useHMSTrackUpdate(hmsInstance, updateLocalPeer, setPeerTrackNodes);
 };
@@ -198,72 +198,136 @@ const useHMSRoomUpdate = (
   }, [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]
-//   );
-// };
+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]
+  // );
+
+  useEffect(() => {
+    const peerUpdateHandler = ({ 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.addEventListener(
+      HMSUpdateListenerActions.ON_PEER_UPDATE,
+      peerUpdateHandler
+    );
+
+    return () => {
+      hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_PEER_UPDATE);
+    };
+  }, [hmsInstance]);
+};
 
 type TrackUpdate = {
   peer: HMSPeer;
@@ -527,7 +591,7 @@ export const useHMSSessionStoreListeners = () => {
   useEffect(() => {
     // Check if instance of HMSSessionStore is available
     if (hmsSessionStore) {
-      let toastTimeoutId: NodeJS.Timeout | null = null;
+      // let toastTimeoutId: NodeJS.Timeout | null = null;
 
       const addSessionStoreListeners = () => {
         // Handle 'spotlight' key values
@@ -575,8 +639,8 @@ export const useHMSSessionStoreListeners = () => {
             )
           );
 
-        let lastSpotlightValue: HMSSessionStoreValue = null;
-        let lastPinnedMessageValue: HMSSessionStoreValue = null;
+        // let lastSpotlightValue: HMSSessionStoreValue = null;
+        // let lastPinnedMessageValue: HMSSessionStoreValue = null;
 
         // Add subscription for `spotlight` & `pinnedMessage` keys updates on Session Store
         const subscription = hmsSessionStore.addKeyChangeListener<
@@ -598,41 +662,41 @@ export const useHMSSessionStoreListeners = () => {
                 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;
+                // 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;
+                // 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;
               }
             }
@@ -651,7 +715,7 @@ export const useHMSSessionStoreListeners = () => {
           listener.remove()
         );
 
-        if (toastTimeoutId !== null) clearTimeout(toastTimeoutId);
+        // if (toastTimeoutId !== null) clearTimeout(toastTimeoutId);
       };
     }
   }, [hmsSessionStore]);

package/src/redux/reducers/userState.ts

@@ -75,7 +75,7 @@ const userReducer = (
       state.userId = action.payload.options.userId;
       state.endPoints = action.payload.options.endPoints;
       state.debugMode = action.payload.options.debugMode ?? false;
-      state.iosBuildConfig = action.payload.options.iosBuildConfig ?? null;
+      state.iosBuildConfig = action.payload.options.ios ?? null;
 
       return state;
     case HmsStateActionTypes.CLEAR_STATES: