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

package/src/components/GridView.tsx

@@ -21,7 +21,10 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
-import { useSafeAreaFrame } from 'react-native-safe-area-context';
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -144,7 +147,7 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     );
 
     return (
-      <View style={styles.container}>
+      <View style={[styles.container]}>
         <View onLayout={_handleLayoutChange} style={styles.measureLayoutView} />
 
         {screenshareTilesAvailable ? (
@@ -258,7 +261,11 @@ const RegularTiles = React.forwardRef<
       <FlatList
         ref={flatlistRef}
         horizontal={true}
-        style={Platform.OS === 'ios' ? { maxHeight: safeHeight - 16 } : null}
+        style={
+          Platform.OS === 'ios'
+            ? { maxHeight: safeHeight - (isLandscapeOrientation ? 0 : 16) }
+            : null
+        }
         data={pairedPeers}
         initialNumToRender={1}
         maxToRenderPerBatch={1}
@@ -297,6 +304,7 @@ const ScreenshareTiles = React.forwardRef<
   ScreenshareTilesProps
 >(({ onPeerTileMorePress, setHmsViewRefs }, flatlistRef) => {
   const { width } = useWindowDimensions();
+  const { left, right } = useSafeAreaInsets();
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const [activePage, setActivePage] = useState(0);
   const screensharePeerTrackNodes = useSelector(
@@ -318,20 +326,21 @@ const ScreenshareTiles = React.forwardRef<
     },
     []
   );
+  const tileWidth = width + left + right;
 
   const _renderItem = React.useCallback(
     ({ item }) => {
       return (
         <Tile
           height={'100%'}
-          width={width}
+          width={tileWidth}
           peerTrackNode={item}
           onPeerTileMorePress={onPeerTileMorePress}
           setHmsViewRefs={setHmsViewRefs}
         />
       );
     },
-    [width, onPeerTileMorePress, setHmsViewRefs]
+    [tileWidth, onPeerTileMorePress, setHmsViewRefs]
   );
 
   return (

package/src/components/Meeting.tsx

@@ -15,6 +15,7 @@ import {
   useHMSReconnection,
   useHMSRemovedFromRoomUpdate,
   useHMSRoomStyle,
+  useLandscapeImmersiveMode,
   usePIPListener,
   useSetDefaultChatRecipient,
 } from '../hooks-util';
@@ -61,6 +62,8 @@ export const Meeting: React.FC<MeetingProps> = ({ peerTrackNodes }) => {
   // Handle Back button press and show leave room modal
   useBackButtonPress();
 
+  useLandscapeImmersiveMode();
+
   // Clearing any pending modal opening tasks
   React.useEffect(() => {
     return () => {

package/src/components/OverlayContainer.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 type OverlayContainerProps = {};
 
@@ -9,10 +12,16 @@ export const OverlayContainer: React.FC<OverlayContainerProps> & {
   return <View style={styles.container}>{children}</View>;
 };
 
-type OverlayProps = {};
+export type OverlayProps = {
+  animatedStyle?: StyleProp<AnimatedStyle<StyleProp<ViewStyle>>>;
+};
 
-const Overlay: React.FC<OverlayProps> = ({ children }) => {
-  return <View style={styles.absoluteContainer}>{children}</View>;
+const Overlay: React.FC<OverlayProps> = ({ children, animatedStyle }) => {
+  return (
+    <Animated.View style={[styles.absoluteContainer, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
 };
 
 OverlayContainer.Overlay = Overlay;

package/src/components/OverlayedViews.tsx

@@ -3,18 +3,22 @@ import type { SharedValue } from 'react-native-reanimated';
 
 import { HMSNotifications } from './HMSNotifications';
 import { OverlayContainer } from './OverlayContainer';
+import type { OverlayProps } from './OverlayContainer';
 import { HLSChatView } from './HMSOverlayChatView';
 import { useShowChatAndParticipants } from '../hooks-util';
 
 export type OverlayedViewsProps = {
   offset: SharedValue<number>;
-};
+} & OverlayProps;
 
-const _OverlayedViews: React.FC<OverlayedViewsProps> = ({ offset }) => {
+const _OverlayedViews: React.FC<OverlayedViewsProps> = ({
+  offset,
+  animatedStyle,
+}) => {
   const { overlayChatVisible } = useShowChatAndParticipants();
 
   return (
-    <OverlayContainer.Overlay>
+    <OverlayContainer.Overlay animatedStyle={animatedStyle}>
       {overlayChatVisible ? <HLSChatView offset={offset} /> : null}
 
       <HMSNotifications />

package/src/components/PeerVideoTile/HMSPinchGesture.tsx

@@ -21,25 +21,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
    */
   const dimensions = useSharedValue({ width: 0, height: 0 });
 
-  /**
-   * - Tracking number of active pointers in pinch gesture
-   * "Focal point" is used as an origin point for scaling the view
-   * when active number of pointers change, focal point is also changed causing a flicker effect
-   *
-   * To remove flicker effect, when `numberOfPointers` change, we calculate the amount of change in focal point
-   * and use the `(new focal point) + (amount of change in focal point)` to apply transformations
-   */
-  const numberOfPointers = useSharedValue(0);
-
-  /**
-   * - Current focal point to apply scaling
-   * "Focal point" is used as an origin point for scaling the view
-   * > We transform the "center of View" to the "focal point", "apply scaling" and then "undo the transformation"
-   */
-  const focalPoint = useSharedValue({ x: 0, y: 0 });
-
-  const adjustedFocalPoint = useSharedValue({ x: 0, y: 0 });
-
   /**
    * - focal point captured at the start of the pinch gesture
    * We use this point to calculate the amount of translation of focal point
@@ -51,17 +32,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
    */
   const focalPointAtStart = useSharedValue({ x: 0, y: 0 });
 
-  /**
-   * - x,y coords representing the amount by which focal point shifted due to change in `numberOfPointers`
-   * e.g. focal point when `numberOfPointers = 2`            - (20, 100)
-   *      focal point when `numberOfPointers` reduced to `1` - (40, 300)
-   *
-   *      focal point got shifted by `20` points on x-axis and `200` points on y-axis. Thus, `focalShift = (20, 200)`
-   *
-   * Usage: TODO
-   */
-  const focalShift = useSharedValue({ x: 0, y: 0 });
-
   const scale = useSharedValue(1);
   const savedScale = useSharedValue(1);
   const translation = useSharedValue({ x: 0, y: 0 });
@@ -80,9 +50,22 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
   const panGesture = Gesture.Pan()
     .maxPointers(1)
     .onUpdate((e) => {
+      if (savedScale.value <= 1) {
+        return;
+      }
+      const swipeOnXAxis = e.translationX + savedTranslation.value.x;
+      const swipeOnYAxis = e.translationY + savedTranslation.value.y;
+
+      const diffX =
+        (dimensions.value.width * savedScale.value - dimensions.value.width) /
+        2;
+      const diffY =
+        (dimensions.value.height * savedScale.value - dimensions.value.height) /
+        2;
+
       translation.value = {
-        x: e.translationX + savedTranslation.value.x,
-        y: e.translationY + savedTranslation.value.y,
+        x: Math.max(Math.min(swipeOnXAxis, diffX), -diffX),
+        y: Math.max(Math.min(swipeOnYAxis, diffY), -diffY),
       };
     })
     .onEnd(() => {
@@ -91,45 +74,26 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
 
   const pinchGesture = Gesture.Pinch()
     .onStart((e) => {
-      numberOfPointers.value = e.numberOfPointers;
       focalPointAtStart.value = { x: e.focalX, y: e.focalY };
-
-      adjustedFocalPoint.value = {
-        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-      };
     })
     .onUpdate((e) => {
-      // Calculating `focal point` shift values when `numberOfPointers` changes
-      if (numberOfPointers.value !== e.numberOfPointers) {
-        numberOfPointers.value = e.numberOfPointers;
-
-        focalShift.value = {
-          x: e.focalX - (focalPoint.value.x - focalShift.value.x),
-          y: e.focalY - (focalPoint.value.y - focalShift.value.y),
-        };
-      }
+      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
 
-      adjustedFocalPoint.value = {
-        x: e.focalX - focalShift.value.x, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-        y: e.focalY - focalShift.value.y, // subtracting "focal point shift" value from "current focal point", we will get "focal point before the shift", and apply transformations on the that focal point
-      };
+      const offsetX = dimensions.value.width / 2 - focalPointAtStart.value.x;
+      const offsetY = dimensions.value.height / 2 - focalPointAtStart.value.y;
+
+      const swipeOnXAxis = offsetX * scale.value + savedTranslation.value.x;
+      const swipeOnYAxis = offsetY * scale.value + savedTranslation.value.y;
+
+      const diffX =
+        (dimensions.value.width * scale.value - dimensions.value.width) / 2;
+      const diffY =
+        (dimensions.value.height * scale.value - dimensions.value.height) / 2;
 
-      // Applying translations
       translation.value = {
-        x:
-          adjustedFocalPoint.value.x -
-          focalPointAtStart.value.x + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
-          savedTranslation.value.x, // Adding current translation to previous Translation to make it a continuous gesture
-        y:
-          adjustedFocalPoint.value.y -
-          focalPointAtStart.value.y + // subtracting "focal point position capturred at start of gesture" from "adjusted focal point position" we will get the translation value
-          savedTranslation.value.y, // Adding current translation to previous Translation to make it a continuous gesture
+        x: Math.max(Math.min(swipeOnXAxis, diffX), -diffX),
+        y: Math.max(Math.min(swipeOnYAxis, diffY), -diffY),
       };
-
-      // saving focal point to apply scaling on correct position
-      focalPoint.value = { x: e.focalX, y: e.focalY };
-      scale.value = Math.min(Math.max(savedScale.value * e.scale, 0.94), 5.2);
     })
     .onEnd(() => {
       if (scale.value < 1) {
@@ -143,7 +107,6 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
         savedScale.value = scale.value;
       }
 
-      focalShift.value = { x: 0, y: 0 };
       savedTranslation.value = translation.value;
     });
 
@@ -151,13 +114,7 @@ export const HMSPinchGesture: React.FC<HMSPinchGestureProps> = ({
     transform: [
       { translateX: translation.value.x },
       { translateY: translation.value.y },
-      { translateX: focalPointAtStart.value.x - dimensions.value.width / 2 },
-      { translateY: focalPointAtStart.value.y - dimensions.value.height / 2 },
       { scale: scale.value },
-      { translateX: -(focalPointAtStart.value.x - dimensions.value.width / 2) },
-      {
-        translateY: -(focalPointAtStart.value.y - dimensions.value.height / 2),
-      },
     ],
   }));
 

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';
@@ -2535,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