@100mslive/react-native-room-kit 1.0.8 → 1.1.0

package/src/components/PeerVideoTile/PeerVideoTileView.tsx

@@ -28,6 +28,7 @@ import {
 import { useHMSRoomStyleSheet } from '../../hooks-util';
 import { HMSFullScreenButton } from './HMSFullScreenButton';
 import { TestIds } from '../../utils/constants';
+import { useIsLandscapeOrientation } from '../../utils/dimension';
 
 export interface PeerVideoTileViewProps {
   peerTrackNode: PeerTrackNode;
@@ -146,6 +147,8 @@ export const _PeerVideoTileView = React.forwardRef<
       !canTakeActionOnPeer || // If local peer can't take action on peer, Or
       !allowedToPublish; // If local peer can't publish tracks
 
+    const isLandscapeOrientation = useIsLandscapeOrientation();
+
     return (
       <View style={styles.container}>
         <AvatarView
@@ -181,7 +184,7 @@ export const _PeerVideoTileView = React.forwardRef<
 
         {/* Handling Peer Audio Mute indicator */}
         {screenShareTile && showingVideoTrack ? (
-          isPipModeActive ? null : (
+          isPipModeActive || isLandscapeOrientation ? null : (
             <HMSFullScreenButton peerTrackNode={peerTrackNode} />
           )
         ) : peerCanPublishAudio ? (

package/src/components/TilesContainer.tsx

@@ -55,7 +55,7 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
               ? 'row'
               : 'column',
         },
-        { width: Dimensions.get('window').width - left - right },
+        { width: Dimensions.get('window').width + left + right },
       ]}
     >
       {peerTrackNodes.length <= 3 ? (

package/src/components/WebrtcView.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { useSelector } from 'react-redux';
 import {
-  SafeAreaView,
   useSafeAreaFrame,
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
@@ -25,6 +24,7 @@ import { OverlayContainer } from './OverlayContainer';
 import { OverlayedViews } from './OverlayedViews';
 import { useFooterHeight } from './Footer';
 import { useHeaderHeight } from './Header';
+import { View } from 'react-native';
 
 interface WebrtcViewProps {
   offset: SharedValue<number>;
@@ -72,21 +72,36 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
         !state.app.localPeerTrackNode && pairedPeers.length === 0
     );
 
+    const fullHeight = height - top - (isPortrait ? bottom : 0);
+    const smallHeight = isPortrait
+      ? height - headerHeight - footerHeight
+      : height;
+
     const animatedStyles = useAnimatedStyle(() => {
+      return {
+        height: interpolate(offset.value, [0, 1], [fullHeight, smallHeight]),
+      };
+    }, [fullHeight, smallHeight]);
+
+    const headerPlaceholderAnimatedStyles = useAnimatedStyle(() => {
       return {
         height: interpolate(
           offset.value,
           [0, 1],
-          [height - top - bottom, height - headerHeight - footerHeight]
+          [top, isPortrait ? headerHeight : top]
         ),
       };
-    }, [height, top, bottom, footerHeight, headerHeight]);
+    }, [headerHeight, top, isPortrait]);
 
-    const headerPlaceholderAnimatedStyles = useAnimatedStyle(() => {
+    const overlayedAnimatedStyles = useAnimatedStyle(() => {
       return {
-        height: interpolate(offset.value, [0, 1], [top, headerHeight]),
+        bottom: interpolate(
+          offset.value,
+          [0, 1],
+          [!isPortrait ? bottom : 0, 0]
+        ),
       };
-    }, [headerHeight, top]);
+    }, [isPortrait, bottom]);
 
     if (isPipModeActive) {
       return (
@@ -104,7 +119,7 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
     }
 
     return (
-      <SafeAreaView edges={['left', 'right']} style={{ flex: 1 }}>
+      <View style={{ flex: 1 }}>
         <Animated.View style={headerPlaceholderAnimatedStyles} />
 
         <Animated.View style={animatedStyles}>
@@ -123,10 +138,13 @@ export const WebrtcView = React.forwardRef<GridViewRefAttrs, WebrtcViewProps>(
               />
             )}
 
-            <OverlayedViews offset={offset} />
+            <OverlayedViews
+              animatedStyle={overlayedAnimatedStyles}
+              offset={offset}
+            />
           </OverlayContainer>
         </Animated.View>
-      </SafeAreaView>
+      </View>
     );
   }
 );

package/src/hooks-util.ts

@@ -21,6 +21,7 @@ import {
   useHmsViewsResolutionsState,
   setSoftInputMode,
   getSoftInputMode,
+  WindowController,
   // useHMSPeerUpdates,
 } from '@100mslive/react-native-hms';
 import type { Chat as ChatConfig } from '@100mslive/types-prebuilt/elements/chat';
@@ -2149,18 +2150,17 @@ export const useLeaveMethods = () => {
         const onLeave = reduxStore.getState().user.onLeave;
 
         if (typeof onLeave === 'function') {
+          dispatch(changeMeetingState(MeetingState.EXITED));
           onLeave(reason);
-          dispatch(clearStore());
         } else if (
           navigation &&
           typeof navigation.canGoBack === 'function' &&
           navigation.canGoBack()
         ) {
+          dispatch(changeMeetingState(MeetingState.EXITED));
           navigation.goBack();
-          dispatch(clearStore());
         } else {
           // Otherwise default action is to show "Meeting Ended" screen
-          dispatch(clearStore()); // TODO: We need different clearStore for MeetingEnded
           dispatch(changeMeetingState(MeetingState.MEETING_ENDED));
         }
       } catch (e) {
@@ -2536,6 +2536,18 @@ export const useBackButtonPress = () => {
   }, [handleBackPress, handleModalVisibleType]);
 };
 
+export const useLandscapeImmersiveMode = () => {
+  const isLandscapeOrientation = useIsLandscapeOrientation();
+
+  useEffect(() => {
+    if (isLandscapeOrientation) {
+      WindowController.hideSystemBars();
+
+      return WindowController.showSystemBars;
+    }
+  }, [isLandscapeOrientation]);
+};
+
 export const useSavePropsToStore = (
   props: HMSPrebuiltProps,
   dispatch: AppDispatch

package/src/redux/reducers/hmsStates.ts

@@ -177,20 +177,40 @@ const hmsStatesReducer = (
       let updatedGroupedParticipants = state.groupedParticipants;
 
       if (action.localPeer !== null) {
-        const savedLocalPeer = Object.values(state.groupedParticipants)
-          .flat()
-          .find(
-            (participant) => participant.peerID === action.localPeer?.peerID
-          );
+        let previousRoleName: HMSRole['name'] | null = null;
+        let savedLocalPeer: HMSLocalPeer | HMSPeer | null = null;
+
+        for (const groupName in state.groupedParticipants) {
+          if (
+            Object.prototype.hasOwnProperty.call(
+              state.groupedParticipants,
+              groupName
+            )
+          ) {
+            const participantsList = state.groupedParticipants[groupName];
+
+            if (Array.isArray(participantsList)) {
+              const result = participantsList.find(
+                (participant) => participant.peerID === action.localPeer?.peerID
+              );
+
+              if (result) {
+                previousRoleName = groupName;
+                savedLocalPeer = result;
+                break;
+              }
+            }
+          }
+        }
 
         // update peer or check if  role change happened
         if (savedLocalPeer) {
-          const previousRoleName = savedLocalPeer.role?.name!;
           const currentRoleName = action.localPeer.role?.name!;
 
-          const roleChanged = previousRoleName !== currentRoleName;
+          const roleChanged =
+            previousRoleName && previousRoleName !== currentRoleName;
 
-          if (roleChanged) {
+          if (roleChanged && previousRoleName) {
             const previousList = state.groupedParticipants[previousRoleName];
             const currentList = state.groupedParticipants[currentRoleName];
 
@@ -405,7 +425,12 @@ const hmsStatesReducer = (
       let previousRoleName: HMSRole['name'] | null = null;
 
       for (const groupName in state.groupedParticipants) {
-        if (Object.prototype.hasOwnProperty.call(state.groupedParticipants, groupName)) {
+        if (
+          Object.prototype.hasOwnProperty.call(
+            state.groupedParticipants,
+            groupName
+          )
+        ) {
           const participantsList = state.groupedParticipants[groupName];
 
           if (Array.isArray(participantsList)) {
@@ -460,9 +485,7 @@ const hmsStatesReducer = (
           ...state.groupedParticipants,
           [currentRoleName]: Array.isArray(currentList)
             ? currentList.map((p) =>
-                p.peerID === action.participant.peerID
-                  ? action.participant
-                  : p
+                p.peerID === action.participant.peerID ? action.participant : p
               )
             : [action.participant],
         },
@@ -473,7 +496,7 @@ const hmsStatesReducer = (
         ...state,
         groupedParticipants: {
           ...state.groupedParticipants,
-          [action.roleName]: action.participants
+          [action.roleName]: action.participants,
         },
       };
     }

package/src/types.ts

@@ -5,6 +5,7 @@ export enum MeetingState {
   NOT_JOINED,
   IN_PREVIEW,
   IN_MEETING,
+  EXITED,
   MEETING_ENDED,
   ERROR,
 }