@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3788876021 → 12.0.0-alpha.3849101242

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -58,6 +60,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +73,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -290,15 +299,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -3,6 +3,8 @@ import { Animated, StyleSheet } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -35,9 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
     { useNativeDriver: true }
@@ -53,7 +60,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
       if (videoModalState.mode === "MAXIMIZED") {
         if (translationY > 0) {
           const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
           let destSnapPoint = modalSnapPoints[0];
 
@@ -127,7 +134,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   return (
     <PanGestureHandler
-      enabled={isMaximazedModal || isMinimizedModal}
+      enabled={isEnablePanGesture}
       shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -1,7 +1,10 @@
 import React, { useContext } from "react";
 import { Animated } from "react-native";
 
-import { useSafeAreaFrame } from "react-native-safe-area-context";
+import {
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from "react-native-safe-area-context";
 import { useGetBottomTabBarHeight } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 import { useConfiguration } from "../utils";
@@ -91,8 +94,16 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const dragVideoPlayerY = React.useRef(new Animated.Value(0)).current;
 
   const { height } = useSafeAreaFrame();
+  const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
-  const minValue = height - minimisedHeight - bottomTabBarHeight;
+
+  /*
+    If bottomTabBarHeight is equal 0 it means an app does not use bottomTabBar.
+    Because of this we need to minus bottom SafeArea offset.
+  */
+  const minValue =
+    height - minimisedHeight - (bottomTabBarHeight || bottomSafeArea);
+
   const modalSnapPoints = React.useMemo(() => [0, minValue], [minValue]);
   // Last snap state which will helps us to make smooth responder to scrollview animation
   const [lastSnap, setLastSnap] = React.useState<number>(modalSnapPoints[0]);

package/Components/VideoModal/PlayerDetails.tsx

@@ -42,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(100)).current;
+  const translateY = useRef(new Animated.Value(50)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: 0,
+      toValue: -30,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -63,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1000);
+      setTimeout(() => runAnimation(), 1500);
     }
   }, [isAudioPlayer]);
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -14,12 +14,13 @@ import { PlayerDetails } from "./PlayerDetails";
 import { playerDimesionsHack } from "./utils";
 import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtils/routeTypes";
 
 import {
-  AnimationComponent,
-  ComponentAnimationType,
   AnimatedScrollModal,
   AnimatedVideoPlayerComponent,
+  AnimationComponent,
+  ComponentAnimationType,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type DimensionsT = {
@@ -180,65 +181,71 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
+
   return (
-    <WrapperView
-      edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
-      style={[
-        safeAreaStyles(configuration, isTablet),
-        style,
-        playerDimesionsHack,
-      ]}
-    >
-      <AnimationComponent
-        animationType={ComponentAnimationType.moveUpComponent}
-        additionalData={{ saveArea: true }}
-        style={directionStyles(isTabletLandscape)}
-      >
-        <ScreenContextProvider pathname={"videoModal"}>
-          <PathnameContext.Provider value={"videoModal"}>
-            <View
-              testID={`${entry?.id}-player-container`}
-              style={[
-                defaultStyles.playerContainer,
-                containerDimensions,
-                containerStyle,
-                playerDimesionsHack,
-              ]}
-            >
-              <AnimationComponent
-                animationType={ComponentAnimationType.moveUpComponent}
-                style={isTabletLandscape ? defaultStyles.flex : undefined}
-                additionalData={{
-                  useLayoutMeasure: isTabletLandscape,
-                  disableAnimatedComponent: !isTabletLandscape,
-                  resetAnimationValue: isTabletLandscape && docked,
-                }}
-              >
-                <AnimatedVideoPlayerComponent>
-                  {children(childrenStyles)}
-                </AnimatedVideoPlayerComponent>
-              </AnimationComponent>
-            </View>
-            <AnimatedScrollModal>
-              {isInlineModal ? (
-                <AnimationComponent
-                  animationType={ComponentAnimationType.componentFade}
-                  style={defaultStyles.flex}
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        <WrapperView
+          edges={getEdges(isTablet, isInlineModal) as readonly Edge[]}
+          style={[
+            safeAreaStyles(configuration, isTablet),
+            style,
+            playerDimesionsHack,
+          ]}
+        >
+          <AnimationComponent
+            animationType={ComponentAnimationType.moveUpComponent}
+            additionalData={{ saveArea: true }}
+            style={directionStyles(isTabletLandscape)}
+          >
+            <ScreenContextProvider pathname={pathname}>
+              <PathnameContext.Provider value={pathname}>
+                <View
+                  testID={`${entry?.id}-player-container`}
+                  style={[
+                    defaultStyles.playerContainer,
+                    containerDimensions,
+                    containerStyle,
+                    playerDimesionsHack,
+                  ]}
                 >
-                  <PlayerDetails
-                    configuration={configuration}
-                    style={defaultStyles.playerDetails}
-                    entry={entry}
-                    isTabletLandscape={isTabletLandscape}
-                  />
-                </AnimationComponent>
-              ) : (
-                <View style={defaultStyles.playerDetails} />
-              )}
-            </AnimatedScrollModal>
-          </PathnameContext.Provider>
-        </ScreenContextProvider>
-      </AnimationComponent>
-    </WrapperView>
+                  <AnimationComponent
+                    animationType={ComponentAnimationType.moveUpComponent}
+                    style={isTabletLandscape ? defaultStyles.flex : undefined}
+                    additionalData={{
+                      useLayoutMeasure: isTabletLandscape,
+                      disableAnimatedComponent: !isTabletLandscape,
+                      resetAnimationValue: isTabletLandscape && docked,
+                    }}
+                  >
+                    <AnimatedVideoPlayerComponent>
+                      {children(childrenStyles)}
+                    </AnimatedVideoPlayerComponent>
+                  </AnimationComponent>
+                </View>
+                <AnimatedScrollModal>
+                  {isInlineModal ? (
+                    <AnimationComponent
+                      animationType={ComponentAnimationType.componentFade}
+                      style={defaultStyles.flex}
+                    >
+                      <PlayerDetails
+                        configuration={configuration}
+                        style={defaultStyles.playerDetails}
+                        entry={entry}
+                        isTabletLandscape={isTabletLandscape}
+                      />
+                    </AnimationComponent>
+                  ) : (
+                    <View style={defaultStyles.playerDetails} />
+                  )}
+                </AnimatedScrollModal>
+              </PathnameContext.Provider>
+            </ScreenContextProvider>
+          </AnimationComponent>
+        </WrapperView>
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };

package/Components/VideoModal/VideoModal.tsx

@@ -129,17 +129,17 @@ const VideoModalComponent = () => {
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${item?.id}`;
 
   return (
-    <AnimatedPlayerModalWrapper
-      style={[
-        styles.container,
-        {
-          backgroundColor,
-        },
-      ]}
-    >
-      <ScreenContextProvider pathname={pathname}>
-        <PathnameContext.Provider value={pathname}>
-          {itemIdHooksFinished === item?.id ? (
+    <ScreenContextProvider pathname={pathname}>
+      <PathnameContext.Provider value={pathname}>
+        {itemIdHooksFinished === item?.id ? (
+          <AnimatedPlayerModalWrapper
+            style={[
+              styles.container,
+              {
+                backgroundColor,
+              },
+            ]}
+          >
             <HandlePlayable
               item={item}
               isModal={mode !== "PIP"}
@@ -147,14 +147,14 @@ const VideoModalComponent = () => {
               modalWidth={modalSize.width}
               mode={mode}
             />
-          ) : (
-            <View style={styles.loaderContainer}>
-              <Spinner />
-            </View>
-          )}
-        </PathnameContext.Provider>
-      </ScreenContextProvider>
-    </AnimatedPlayerModalWrapper>
+          </AnimatedPlayerModalWrapper>
+        ) : (
+          <View style={styles.loaderContainer}>
+            <Spinner />
+          </View>
+        )}
+      </PathnameContext.Provider>
+    </ScreenContextProvider>
   );
 };
 

package/Components/VideoModal/__tests__/PlayerWrapper.test.tsx

@@ -25,6 +25,13 @@ jest.mock("react-native-gesture-handler");
 
 jest.mock("../PlayerDetails", () => ({ PlayerDetails: View }));
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext",
+  () => ({
+    useScreenContext: jest.fn().mockReturnValue({ screen: {}, entry: {} }),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/device", () => ({
   useIsTablet,
 }));

package/Components/Viewport/ViewportTracker/ViewportTracker.tsx

@@ -6,23 +6,23 @@ import { callOnChildren } from "../utils";
 
 export function ViewportTracker(props) {
   const viewportEvents = useViewportEventsContext();
-  const { children } = props;
-  const [width, setWidth] = React.useState(0);
-  const [height, setHeight] = React.useState(0);
-  const [offsetX, setOffsetX] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
   const [nodeHandle, setNodeHandle] = React.useState(null);
 
-  const assignRef = React.useCallback(
-    (ref) => {
-      callOnChildren(children, "ref", ref);
-      setNodeHandle(findNodeHandle(ref));
-    },
-    [children]
-  );
+  const childrenRef = React.useRef(props.children);
+
+  const dimensionsRef = React.useRef({ width: 0, height: 0 });
+  const offsetRef = React.useRef({ offsetX: 0, offsetY: 0 });
+
+  const assignRef = React.useCallback((ref) => {
+    childrenRef.current?.ref?.(ref);
+    setNodeHandle(findNodeHandle(ref));
+  }, []);
 
   const onViewportChange = React.useCallback(
-    (event, shouldMeasureLayout = true) => {
+    ({
+      event = { ...dimensionsRef.current, ...offsetRef.current },
+      shouldMeasureLayout = true,
+    } = {}) => {
       if (nodeHandle && event?.width > 0 && event?.height > 0) {
         viewportEvents?.notify?.({
           parentHandle: nodeHandle,
@@ -36,54 +36,45 @@ export function ViewportTracker(props) {
 
   const onLayout = React.useCallback(
     (event) => {
-      callOnChildren(children, "onLayout", event);
-      setWidth(event?.nativeEvent?.layout?.width);
-      setHeight(event?.nativeEvent?.layout?.height);
+      callOnChildren(childrenRef.current, "onLayout", event);
+      dimensionsRef.current = event?.nativeEvent?.layout;
 
-      onViewportChange({
-        width: event?.nativeEvent?.layout?.width,
-        height: event?.nativeEvent?.layout?.height,
-        offsetX,
-        offsetY,
-      });
+      onViewportChange();
     },
-    [offsetX, offsetY, children, onViewportChange]
+    [onViewportChange]
   );
 
   const onContentSizeChange = React.useCallback(
     (contentWidth, contentHeight) => {
       callOnChildren(
-        children,
+        childrenRef.current,
         "onContentSizeChange",
         contentWidth,
         contentHeight
       );
 
-      onViewportChange({ width, height, offsetX, offsetY });
+      onViewportChange();
     },
-    [onViewportChange, children, width, height, offsetX, offsetY]
+    [onViewportChange]
   );
 
   const onScroll = React.useCallback(
     (event) => {
-      callOnChildren(children, "onScroll", event);
-      setOffsetX(event?.nativeEvent?.contentOffset?.x);
-      setOffsetY(event?.nativeEvent?.contentOffset?.y);
+      callOnChildren(childrenRef.current, "onScroll", event);
+      offsetRef.current = event?.nativeEvent?.contentOffset;
 
-      onViewportChange(
-        {
-          width,
-          height,
-          offsetX: event?.nativeEvent?.contentOffset?.x,
-          offsetY: event?.nativeEvent?.contentOffset?.y,
-        },
-        false
-      );
+      onViewportChange({
+        shouldMeasureLayout: false,
+      });
     },
-    [onViewportChange, width, height, children]
+    [onViewportChange]
   );
 
-  return React.cloneElement(React.Children.only(children), {
+  React.useEffect(() => {
+    childrenRef.current = props.children;
+  }, [props.children]);
+
+  return React.cloneElement(React.Children.only(props.children), {
     ref: assignRef,
     onLayout,
     onContentSizeChange,

package/Components/Viewport/ViewportTracker/index.tsx

@@ -6,6 +6,7 @@ import { ViewportEventContext, ViewportEvents } from "../ViewportEvents";
 type Props = {
   viewportEventsManager?: any;
   children: React.ReactNode;
+  flatListRef?: any; // this ref is used to bind to children component
 };
 
 export function ViewportTracker(props: Props) {

package/Components/Viewport/utils.js

@@ -2,7 +2,7 @@ import * as React from "react";
 
 export function callOnChildren(children, method, ...args) {
   const childMethod = React.Children.only(children).props[method];
-  childMethod && childMethod(...args);
+  typeof childMethod === "function" && childMethod?.(...args);
 }
 
 export function isInViewport(

package/Contexts/MenuToggleContext/{index.js → index.ts}

@@ -1,4 +1,5 @@
 import { createContext } from "@applicaster/zapp-react-native-utils/reactUtils/createContext";
+import React from "react";
 
 const initialContext = { toggleMenu: {}, closeMenu: {}, openMenu: {} };
 
@@ -16,3 +17,18 @@ const stateValidator = ({ property }) =>
   property === "openMenu";
 
 export const MenuToggleContext = createContext(initialContext, stateValidator);
+
+export type MenuToggleContextType = {
+  toggleMenu: any;
+  setToggleMenu: () => void;
+  openMenu: any;
+  setOpenMenu: () => void;
+  closeMenu: any;
+  setCloseMenu: () => void;
+};
+
+export const useMenuToggleContext = () => {
+  return React.useContext<MenuToggleContextType>(
+    MenuToggleContext.ReactContext
+  );
+};

package/Contexts/ScreenContext/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScreenContext withScreenContext should return the context 1`] = `null`;

package/Contexts/ScreenContext/__tests__/index.test.tsx

@@ -0,0 +1,27 @@
+import { render } from "@testing-library/react-native";
+import { ScreenContext, ScreenContextProvider, withScreenContext } from "../";
+import React from "react";
+
+describe("ScreenContext", () => {
+  describe("ScreneContext context", () => {
+    it("should return the context", () => {
+      expect(ScreenContext).toBeDefined();
+    });
+  });
+
+  describe("ScreenContextProvider", () => {
+    it("should return the provider", () => {
+      expect(ScreenContextProvider).toBeDefined();
+    });
+  });
+
+  describe("withScreenContext", () => {
+    it("should return the context", () => {
+      const Component = () => null;
+      const WrappedComponent = withScreenContext(Component);
+      const { toJSON } = render(<WrappedComponent />);
+
+      expect(toJSON()).toMatchSnapshot();
+    });
+  });
+});