@applicaster/zapp-react-native-ui-components 13.0.0-alpha.7330390362 → 13.0.0-alpha.7620873141

package/Components/TopMarginApplicator/TopMarginApplicator.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { View, ViewProps, ViewStyle } from "react-native";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useCurrentScreenData } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
 
 interface IProps {
   targetScreenId?: string;
@@ -31,11 +32,9 @@ export const useMarginTop = (targetScreenId: string): number => {
    * ScreenPicker is a component but should really be a screen.
    * We need to skip margin top for it as it's already applied to the target screen
    **/
-  const isScreenPicker =
-    screenData?.ui_components?.[0]?.component_type === "screen-picker-qb-tv";
 
   // ignore margin on screenPicker
-  if (isScreenPicker) {
+  if (isFirstComponentScreenPicker(screenData?.ui_components)) {
     return 0;
   }
 

package/Components/TrackedView/index.tsx

@@ -12,6 +12,7 @@ type TrackedViewProps = {
   onPositionUpdated: (props: { rect?: Record<string, number> }) => void;
   testId?: string | undefined;
   groupId?: string;
+  clipThreshold?: number;
 };
 
 export const TrackedView = memo(function TrackedView(props: TrackedViewProps) {

package/Components/Transitioner/AnimationManager.js

@@ -2,21 +2,21 @@ import { Animated } from "react-native";
 
 import { NAV_ACTION_PUSH, NAV_ACTION_BACK } from "./Transitioner";
 
-type TransitionConfig = {
-  duration: number;
-  easing: any;
-  from: {
-    style: any;
-  };
-  to: {
-    style: any;
-  };
-};
+// type TransitionConfig = {
+//   duration: number;
+//   easing: any;
+//   from: {
+//     style: any;
+//   };
+//   to: {
+//     style: any;
+//   };
+// };
 
-type Props = {
-  transitionConfig: TransitionConfig;
-  contentStyle: { [string]: any };
-};
+// type Props = {
+//   transitionConfig: TransitionConfig;
+//   contentStyle: { [string]: any };
+// };
 
 /**
  * Manages animation for the Transitioner,
@@ -25,7 +25,7 @@ type Props = {
  * which must have a proper structure, see types above ^.
  */
 export class AnimationManager {
-  constructor(props: Props) {
+  constructor(props) {
     this.animatedValue = new Animated.Value(0.0);
 
     this.config = props.transitionConfig(

package/Components/Transitioner/Scene.tsx

@@ -105,7 +105,7 @@ function SceneComponent({
       style={[style, contentStyle, dimensions]}
     >
       {children}
-      {isAnimating && <Animated.View style={overlayStyle} />}
+      {isAnimating ? <Animated.View style={overlayStyle} /> : null}
     </Animated.View>
   );
 }

package/Components/Transitioner/Transitioner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { View } from "react-native";
-import { update, compose, tail, append, take, identity, isNil } from "ramda";
+import { append, compose, identity, isNil, tail, take, update } from "ramda";
 
 import { AnimationManager } from "./AnimationManager";
 import { Scene } from "./Scene";
@@ -289,7 +289,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
 
     return (
       <View style={styles.container}>
-        {scenes[to.index] && (
+        {scenes[to.index] ? (
           <Scene
             {...{ style: to?.style || {} }}
             pathname={pathname}
@@ -301,7 +301,7 @@ export class TransitionerComponent extends React.PureComponent<Props, State> {
           >
             {scenes[to.index].children}
           </Scene>
-        )}
+        ) : null}
       </View>
     );
   }

package/Components/Transitioner/__tests__/Scene.test.js

@@ -1,6 +1,7 @@
 import React from "react";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
+import { render } from "@testing-library/react-native";
+
+import { Scene } from "../Scene";
 
 const overlayStyle = { opacity: 1 };
 const contentStyle = { paddingBottom: 49 };
@@ -23,28 +24,38 @@ jest.mock(
   })
 );
 
-const { Scene } = require("../Scene");
+jest.mock("../../../Contexts/PathnameContext", () => ({
+  PathnameContext: jest.requireActual("react").createContext({ pathname: "" }),
+}));
 
-const wrapper = shallow(
-  <Scene
-    style={style}
-    overlayStyle={overlayStyle}
-    contentStyle={contentStyle}
-  />
-);
+jest.mock("../../../Contexts/ScreenDataContext", () => ({
+  ScreenDataContext: jest.requireActual("react").createContext({}),
+}));
+
+jest.mock("../../../Contexts/ScreenContext", () => ({
+  ScreenContextProvider: jest.requireActual("react-native").View,
+}));
 
 describe("<Scene />", () => {
+  const wrapper = render(
+    <Scene
+      style={style}
+      overlayStyle={overlayStyle}
+      contentStyle={contentStyle}
+    />
+  );
+
   it("renders correctly", () => {
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 
   // skipped - this isn't a very useful test, and it doesn't work as it used to on the new version of RN
   it.skip("renders children surrounded by AnimatedComponent", () => {
-    expect(shallowToJson(wrapper).type).toEqual("AnimatedComponent");
+    expect(wrapper.toJSON()).toEqual("AnimatedComponent");
   });
 
   it("renders the overlay while animating", () => {
-    const wrapperWithOverlay = shallow(
+    const wrapperWithOverlay = render(
       <Scene
         style={style}
         overlayStyle={overlayStyle}
@@ -53,6 +64,6 @@ describe("<Scene />", () => {
       />
     );
 
-    expect(shallowToJson(wrapperWithOverlay)).toMatchSnapshot();
+    expect(wrapperWithOverlay.toJSON).toMatchSnapshot();
   });
 });

package/Components/Transitioner/__tests__/__snapshots__/Scene.test.js.snap

@@ -1,79 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Scene /> renders correctly 1`] = `
-<CurrentScreenContextProvider
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    contentStyle={
-      {
-        "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
-      {
-        "opacity": 1,
-      }
-    }
+<View>
+  <View
+    collapsable={false}
+    pointerEvents="auto"
     style={
       {
         "flex": 1,
-      }
-    }
-  />
-</CurrentScreenContextProvider>
-`;
-
-exports[`<Scene /> renders the overlay while animating 1`] = `
-<CurrentScreenContextProvider
-  animating={true}
-  contentStyle={
-    {
-      "paddingBottom": 49,
-    }
-  }
-  overlayStyle={
-    {
-      "opacity": 1,
-    }
-  }
-  style={
-    {
-      "flex": 1,
-    }
-  }
->
-  <SceneComponent
-    animating={true}
-    contentStyle={
-      {
+        "fontScale": 2,
+        "height": 1334,
         "paddingBottom": 49,
-      }
-    }
-    overlayStyle={
-      {
-        "opacity": 1,
-      }
-    }
-    style={
-      {
-        "flex": 1,
+        "scale": 2,
+        "statusBarHeight": null,
+        "width": 750,
       }
     }
   />
-</CurrentScreenContextProvider>
+</View>
 `;
+
+exports[`<Scene /> renders the overlay while animating 1`] = `[Function]`;

package/Components/Transitioner/__tests__/__snapshots__/transitioner.test.js.snap

@@ -9,7 +9,7 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
     }
   }
 >
-  <SceneComponent
+  <View
     isActive={true}
     screenUniqueId="mocked-uuid"
     style={{}}
@@ -23,6 +23,6 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
         children
       </Text>
     </View>
-  </SceneComponent>
+  </View>
 </View>
 `;

package/Components/Transitioner/__tests__/transitioner.test.js

@@ -1,9 +1,18 @@
 import React from "react";
 import { Text, View } from "react-native";
-import { shallow } from "enzyme";
-import { shallowToJson } from "enzyme-to-json";
 
 import { TransitionerComponent } from "../Transitioner";
+import { render } from "@testing-library/react-native";
+
+jest.mock("../Scene", () => {
+  const View = jest.requireActual("react-native").View;
+
+  return {
+    Scene(props) {
+      return <View {...props} />;
+    },
+  };
+});
 
 const children = (
   <View foo="bar">
@@ -33,12 +42,12 @@ jest.mock("uuid");
 
 describe("<TransitionerComponent />", () => {
   it("renders correctly", () => {
-    const wrapper = shallow(
+    const wrapper = render(
       <TransitionerComponent {...transitionerComponentProps}>
         {children}
       </TransitionerComponent>
     );
 
-    expect(shallowToJson(wrapper)).toMatchSnapshot();
+    expect(wrapper.toJSON()).toMatchSnapshot();
   });
 });

package/Components/VideoLive/PlayerLiveImageComponent.tsx

@@ -1,6 +1,7 @@
 // /// <reference types="@applicaster/applicaster-types" />
 //
 import * as React from "react";
+import { useEffect } from "react";
 
 import { AppState, AppStateStatus, View } from "react-native";
 import { TrackedView } from "../TrackedView";
@@ -25,13 +26,15 @@ import { PlayerRole } from "@applicaster/zapp-react-native-utils/appUtils/player
 import { getAutoplaySettings } from "./utils";
 import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
 import { BufferAnimation } from "../PlayerContainer/BufferAnimation";
-import { useEffect } from "react";
 
 const { log_error, log_debug } = loggerLiveImageComponent;
 
 const isMeasurement = (item: ZappEntry) =>
   isString(item.id) && item.id.startsWith("pre-measurement-");
 
+// Pixels by which the view can slightly extend outside the viewport and still be considered fully visible.
+const CLIP_THRESHOLD = 10;
+
 type Props = {
   item: ZappEntry;
   style: Record<string, any>;
@@ -328,9 +331,10 @@ const PlayerLiveImageComponent = (props: Props) => {
     <TrackedView
       testId={`tracked-view-${playerId}-${item.title}`}
       onPositionUpdated={onPositionUpdated}
+      clipThreshold={CLIP_THRESHOLD}
     >
       <View ref={trackViewRef}>
-        {isVideoMode && (
+        {isVideoMode ? (
           <Player
             autoplay={false}
             ref={_assignRoot}
@@ -342,7 +346,7 @@ const PlayerLiveImageComponent = (props: Props) => {
             resizeMode={"cover"}
             {...platformSpecificProps}
           />
-        )}
+        ) : null}
         {
           <AnimatedInOut
             visible={isBackgroundImageVisible}

package/Components/VideoLive/__tests__/__snapshots__/PlayerLiveImageComponent.test.tsx.snap

@@ -2,6 +2,7 @@
 
 exports[`PlayerLiveImageComponent should render correctly with default props 1`] = `
 <TrackedView
+  clipThreshold={10}
   onPositionUpdated={[Function]}
   testId="tracked-view-player1-Test"
 >

package/Components/VideoModal/ModalAnimation/AnimatedPlayerModalWrapper.tsx

@@ -46,7 +46,7 @@ export const AnimatedPlayerModalWrapper = (props: Props) => {
 
   React.useEffect(() => {
     (playerAnimationState === PlayerAnimationStateEnum.minimize ||
-      playerAnimationState === PlayerAnimationStateEnum.maximaze) &&
+      playerAnimationState === PlayerAnimationStateEnum.maximize) &&
       setStartComponentsAnimation(true);
   }, [playerAnimationState]);
 

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -1,32 +1,34 @@
 import React from "react";
-import { Animated, StyleSheet, View, Platform } from "react-native";
+import { Animated, Platform, StyleSheet, View } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import {
+  GestureHandlerRootView,
   NativeViewGestureHandler,
   PanGestureHandler,
   State,
   TapGestureHandler,
-  GestureHandlerRootView,
 } from "react-native-gesture-handler";
 
 import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
-  useModalAnimationContext,
   PlayerAnimationStateEnum,
+  useModalAnimationContext,
 } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 
 import {
-  setScrollModalAnimatedValue,
   resetScrollAnimatedValues,
+  setScrollModalAnimatedValue,
 } from "./utils";
 
+import { DURATION_TO_MINIMIZE } from "./const";
+
 const getAnimatedConfig = (toValue) => {
   return {
     toValue,
-    duration: 200,
+    duration: DURATION_TO_MINIMIZE,
     useNativeDriver: true,
   };
 };
@@ -70,21 +72,26 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
-  const { mode: videoModalMode, item: videoModalItem } = videoModalState;
-  const isMaximazedModal = videoModalMode === "MAXIMIZED";
-  const isMinimizedModal = videoModalMode === "MINIMIZED";
+  const {
+    mode: videoModalMode,
+    previousMode: previousVideoModalMode,
+    item: videoModalItem,
+  } = videoModalState;
+
+  const isMaximizedModal: boolean = videoModalMode === "MAXIMIZED";
+  const isMinimizedModal: boolean = videoModalMode === "MINIMIZED";
   const previousItemId = usePrevious(videoModalItem?.id);
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     enableGesture &&
     !isLanguageOverlayVisible &&
     isNotMinimizeMaximazeAnimation &&
     !isSeekBarTouch &&
-    (isMaximazedModal || isMinimizedModal);
+    (isMaximizedModal || isMinimizedModal);
 
   const isAudioItem = React.useMemo(
     () =>
@@ -121,7 +128,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
         const preparedTranslationY =
           Math.abs(translationY) - lastScrollYValue.current;
 
-        if (videoModalMode === "MAXIMIZED") {
+        if (isMaximizedModal) {
           const endOffsetY =
             lastSnap + preparedTranslationY + dragToss * velocityY + 150;
 
@@ -143,8 +150,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             translateYOffset.flattenOffset();
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
-          } else {
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
+          } else if (destSnapPoint !== modalSnapPoints[0] && isMaximizedModal) {
             setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
           }
         } else {
@@ -158,7 +165,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
             dragScrollY.setValue(0);
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }
@@ -168,7 +175,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
           resetPlayerAnimationState();
       }
     },
-    [lastSnap, modalSnapPoints, playerAnimationState, videoModalMode]
+    [
+      lastSnap,
+      modalSnapPoints,
+      playerAnimationState,
+      isMinimizedModal,
+      isMaximizedModal,
+    ]
   );
 
   const onScroll = React.useCallback(({ nativeEvent }) => {
@@ -219,17 +232,18 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
   }, []);
 
   React.useEffect(() => {
-    const { mode, previousMode, item } = videoModalState;
-
     if (
-      mode === "MAXIMIZED" &&
+      videoModalMode === "MAXIMIZED" &&
       !enableGesture &&
       scrollPosition.current === 0
     ) {
       setIEnableGesture(true);
     }
 
-    if (mode === "MINIMIZED" && previousMode === "MAXIMIZED") {
+    if (
+      videoModalMode === "MINIMIZED" &&
+      previousVideoModalMode === "MAXIMIZED"
+    ) {
       // set animation to the minimize values if moving from the player to another screen
       if (playerAnimationState === null) {
         setScrollModalAnimatedValue(
@@ -247,14 +261,16 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       }
     } else if (
       playerAnimationState === null &&
-      ((previousItemId === item?.id &&
-        mode === "MAXIMIZED" &&
-        (previousMode === "MINIMIZED" || previousMode === "MAXIMIZED")) ||
-        (previousItemId !== item?.id && mode !== "FULLSCREEN"))
+      ((previousItemId === videoModalItem?.id &&
+        videoModalMode === "MAXIMIZED" &&
+        (previousVideoModalMode === "MINIMIZED" ||
+          previousVideoModalMode === "MAXIMIZED")) ||
+        (previousItemId !== videoModalItem?.id &&
+          videoModalMode !== "FULLSCREEN"))
     ) {
-      setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+      setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
     }
-  }, [videoModalState]);
+  }, [videoModalMode, previousVideoModalMode, videoModalItem]);
 
   React.useEffect(() => {
     if (playerAnimationState === PlayerAnimationStateEnum.minimize) {
@@ -296,7 +312,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
 
         resetPlayerAnimationState();
       });
-    } else if (playerAnimationState === PlayerAnimationStateEnum.maximaze) {
+    } else if (playerAnimationState === PlayerAnimationStateEnum.maximize) {
       Animated.timing(translateYOffset, getAnimatedConfig(0)).start(() => {
         maximiseVideoModal();
         setScrollModalAnimatedValue(translateYOffset, 0, setLastSnap);
@@ -346,6 +362,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     []
   );
 
+  const scrollEnabled = isMaximizedModal && isNotMinimizeMaximazeAnimation;
+
   return (
     <Wrapper style={generalStyles.container}>
       <TapGestureHandler
@@ -359,7 +377,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
             enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
-            shouldCancelWhenOutside={isMaximazedModal}
+            shouldCancelWhenOutside={isMaximizedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
             activeOffsetY={[-5, 5]}
@@ -371,9 +389,7 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
                 simultaneousHandlers={panHandlerRef}
               >
                 <Animated.ScrollView
-                  scrollEnabled={
-                    isMaximazedModal && isNotMinimizeMaximazeAnimation
-                  }
+                  scrollEnabled={scrollEnabled}
                   bounces={false}
                   onScrollBeginDrag={onRegisterLastScroll}
                   onScroll={onScroll}

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -50,7 +50,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   const isNotMinimizeMaximazeAnimation =
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
-    playerAnimationState !== PlayerAnimationStateEnum.maximaze;
+    playerAnimationState !== PlayerAnimationStateEnum.maximize;
 
   const isEnablePanGesture =
     !isLanguageOverlayVisible &&
@@ -89,7 +89,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
             setLastSnap(destSnapPoint);
 
             if (destSnapPoint === modalSnapPoints[0]) {
-              setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+              setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
             } else {
               lastScrollY.setValue(0);
               lastScrollYValue.current = 0;
@@ -105,7 +105,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
               modalSnapPoints[1] - preparedTranslationY
             );
 
-            setPlayerAnimationState(PlayerAnimationStateEnum.maximaze);
+            setPlayerAnimationState(PlayerAnimationStateEnum.maximize);
           } else {
             resetPlayerAnimationState();
           }