@applicaster/zapp-react-native-ui-components 13.0.0-rc.14 → 13.0.0-rc.140

package/Components/Transitioner/Scene.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { equals } from "ramda";
 import { Animated, ViewProps, ViewStyle } from "react-native";
 import { useSafeAreaFrame } from "react-native-safe-area-context";
 
@@ -8,6 +9,11 @@ import { PathnameContext } from "../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../Contexts/ScreenContext";
 
+const fullWidthDimensions = {
+  height: "100%",
+  width: "100%",
+};
+
 type Props = {
   children: any;
   style: any;
@@ -20,6 +26,47 @@ type Props = {
   screenData: NavigationScreenData;
 };
 
+export function CurrentScreenContextProvider({
+  children,
+  ...props
+}: {
+  children: any;
+  pathname: string;
+  isActive: boolean;
+  screenData: NavigationScreenData;
+}) {
+  const { pathname, isActive = false, screenData } = props;
+
+  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
+
+  React.useLayoutEffect(() => {
+    const screenDataChanged = !equals(initialScreenData, screenData);
+
+    if (isActive && screenDataChanged) {
+      setInitialScreenData(screenData);
+    }
+  }, [initialScreenData, screenData, isActive]);
+
+  return (
+    <ScreenDataContext.Provider value={initialScreenData}>
+      <PathnameContext.Provider value={pathname}>
+        <ScreenContextProvider pathname={pathname}>
+          {children}
+        </ScreenContextProvider>
+      </PathnameContext.Provider>
+    </ScreenDataContext.Provider>
+  );
+}
+
+const withCurrentScreenContext = (Component) =>
+  function SceneComponent(props: Props) {
+    return (
+      <CurrentScreenContextProvider {...props}>
+        <Component {...props} />
+      </CurrentScreenContextProvider>
+    );
+  };
+
 /**
  * Animated View container for any purpose.
  * Renders given children with given style object.
@@ -32,53 +79,35 @@ type Props = {
  * @param contentStyle
  * @param screenUniqueId
  */
-export function Scene({
+function SceneComponent({
   children,
   style,
   pointerEvents = "auto",
   overlayStyle,
   animating,
   contentStyle,
-  pathname,
   isActive = false,
   screenData,
 }: Props) {
-  const [initialScreenData, setInitialScreenData] = React.useState(screenData);
-
   useScreenOrientationHandler({
     screenData,
     isActive,
   });
 
-  React.useLayoutEffect(() => {
-    if (isActive) {
-      setInitialScreenData(screenData);
-    }
-  }, [screenData, isActive]);
-
   const frame = useSafeAreaFrame();
   const isAnimating = animating && overlayStyle;
 
-  const dimensions = isAnimating
-    ? {
-        width: "100%",
-        height: "100%",
-      }
-    : frame;
+  const dimensions = isAnimating ? fullWidthDimensions : frame;
 
   return (
     <Animated.View
       pointerEvents={pointerEvents}
       style={[style, contentStyle, dimensions]}
     >
-      <ScreenDataContext.Provider value={initialScreenData}>
-        <PathnameContext.Provider value={pathname}>
-          <ScreenContextProvider pathname={pathname}>
-            {children}
-          </ScreenContextProvider>
-        </PathnameContext.Provider>
-      </ScreenDataContext.Provider>
-      {isAnimating && <Animated.View style={overlayStyle} />}
+      {children}
+      {isAnimating ? <Animated.View style={overlayStyle} /> : null}
     </Animated.View>
   );
 }
+
+export const Scene = withCurrentScreenContext(SceneComponent);

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__/AnimationManager.test.js.snap

@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AnimationManager initialState() returns a state composed from the initial configuration 1`] = `
-Object {
+{
   "animating": false,
   "duration": 123,
   "easing": [MockFunction],
-  "from": Object {
+  "from": {
     "index": 0,
   },
-  "to": Object {
+  "to": {
     "index": 0,
-    "style": Object {},
+    "style": {},
   },
 }
 `;
@@ -18,25 +18,25 @@ Object {
 exports[`AnimationManager returns the animation manager with the injected transition configuration 1`] = `
 AnimationManager {
   "animatedValue": 0,
-  "config": Object {
-    "back": Object {
+  "config": {
+    "back": {
       "duration": 123,
       "easing": [MockFunction],
-      "from": Object {
-        "style": Object {},
+      "from": {
+        "style": {},
       },
-      "to": Object {
-        "style": Object {},
+      "to": {
+        "style": {},
       },
     },
-    "push": Object {
+    "push": {
       "duration": 123,
       "easing": [MockFunction],
-      "from": Object {
-        "style": Object {},
+      "from": {
+        "style": {},
       },
-      "to": Object {
-        "style": Object {},
+      "to": {
+        "style": {},
       },
     },
   },
@@ -44,25 +44,25 @@ AnimationManager {
 `;
 
 exports[`AnimationManager returns the animation manager with the injected transition configuration 2`] = `
-Object {
-  "back": Object {
+{
+  "back": {
     "duration": 123,
     "easing": [MockFunction],
-    "from": Object {
-      "style": Object {},
+    "from": {
+      "style": {},
     },
-    "to": Object {
-      "style": Object {},
+    "to": {
+      "style": {},
     },
   },
-  "push": Object {
+  "push": {
     "duration": 123,
     "easing": [MockFunction],
-    "from": Object {
-      "style": Object {},
+    "from": {
+      "style": {},
     },
-    "to": Object {
-      "style": Object {},
+    "to": {
+      "style": {},
     },
   },
 }

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

@@ -1,63 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Scene /> renders correctly 1`] = `
-<ForwardRef(AnimatedComponentWrapper)
-  pointerEvents="auto"
-  style={
-    Array [
-      Object {
+<View>
+  <View
+    collapsable={false}
+    pointerEvents="auto"
+    style={
+      {
         "flex": 1,
-      },
-      Object {
-        "paddingBottom": 49,
-      },
-      Object {
         "fontScale": 2,
         "height": 1334,
+        "paddingBottom": 49,
         "scale": 2,
         "statusBarHeight": null,
         "width": 750,
-      },
-    ]
-  }
->
-  <ContextProvider>
-    <ContextProvider>
-      <ScreenContextProvider />
-    </ContextProvider>
-  </ContextProvider>
-</ForwardRef(AnimatedComponentWrapper)>
-`;
-
-exports[`<Scene /> renders the overlay while animating 1`] = `
-<ForwardRef(AnimatedComponentWrapper)
-  pointerEvents="auto"
-  style={
-    Array [
-      Object {
-        "flex": 1,
-      },
-      Object {
-        "paddingBottom": 49,
-      },
-      Object {
-        "height": "100%",
-        "width": "100%",
-      },
-    ]
-  }
->
-  <ContextProvider>
-    <ContextProvider>
-      <ScreenContextProvider />
-    </ContextProvider>
-  </ContextProvider>
-  <ForwardRef(AnimatedComponentWrapper)
-    style={
-      Object {
-        "opacity": 1,
       }
     }
   />
-</ForwardRef(AnimatedComponentWrapper)>
+</View>
 `;
+
+exports[`<Scene /> renders the overlay while animating 1`] = `[Function]`;

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

@@ -5,34 +5,34 @@ exports[`transitionConfig accepts an Animated.Value as a parameter 1`] = `"Canno
 exports[`transitionConfig accepts an Animated.Value as a parameter 2`] = `[Function]`;
 
 exports[`transitionConfig returns a back object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "style": Object {
+  "from": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "overlayStyle": Object {
+  "to": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0.35,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": -1,
         },
       ],
@@ -43,34 +43,34 @@ Object {
 `;
 
 exports[`transitionConfig returns a push object is valid 1`] = `
-Object {
+{
   "duration": 350,
   "easing": [Function],
-  "from": Object {
-    "overlayStyle": Object {
+  "from": {
+    "overlayStyle": {
       "backgroundColor": "black",
       "height": 1334,
       "opacity": 0,
       "position": "absolute",
       "width": 750,
     },
-    "style": Object {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 0,
         },
       ],
       "width": 750,
     },
   },
-  "to": Object {
-    "style": Object {
+  "to": {
+    "style": {
       "height": 1334,
       "position": "absolute",
-      "transform": Array [
-        Object {
+      "transform": [
+        {
           "translateX": 750,
         },
       ],

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

@@ -3,16 +3,16 @@
 exports[`<TransitionerComponent /> renders correctly 1`] = `
 <View
   style={
-    Object {
+    {
       "flex": 1,
       "overflow": "hidden",
     }
   }
 >
-  <Scene
+  <View
     isActive={true}
     screenUniqueId="mocked-uuid"
-    style={Object {}}
+    style={{}}
   >
     <View
       foo="bar"
@@ -23,6 +23,6 @@ exports[`<TransitionerComponent /> renders correctly 1`] = `
         children
       </Text>
     </View>
-  </Scene>
+  </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/Transitioner/index.js

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { useWindowDimensions } from "react-native";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
 import { useDimensions } from "@applicaster/zapp-react-native-utils/reactHooks/layout";
 import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
@@ -7,10 +6,15 @@ import { TransitionerComponent } from "./Transitioner";
 
 export const Transitioner = (props) => {
   const navigator = useNavigation();
-  const { height, width } = useWindowDimensions();
 
-  const dimensions = useDimensions("window", { deviceInfo: true });
-  const isTablet = dimensions?.deviceInfo?.isTablet;
+  const {
+    width,
+    height,
+    deviceInfo: { isTablet },
+  } = useDimensions("window", {
+    updateForInactiveScreens: false,
+    deviceInfo: true,
+  });
 
   const { appData } = usePickFromState(["appData"]);
   const isTabletPortrait = appData?.isTabletPortrait;

package/Components/VideoLive/LiveImageManager.ts

@@ -8,6 +8,8 @@ import { loggerLiveImageManager } from "./loggerHelper";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { Component } from "react";
 
+const TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION = 500; // ms
+
 const { log_debug, log_info, log_error } = loggerLiveImageManager;
 
 export type LiveImageManagerEvent =
@@ -62,6 +64,9 @@ export class LiveImageManager implements PlayerLifecycleListener {
   protected currentlyPlaying: LiveImage | null = null;
   protected primaryPlayer: Player | null = null;
 
+  private checkPlayerPositionTimeout: ReturnType<typeof setTimeout> | null =
+    null;
+
   protected listeners: Record<
     string,
     Record<LiveImageManagerEvent, (event?: Record<string, any>) => void>
@@ -118,6 +123,11 @@ export class LiveImageManager implements PlayerLifecycleListener {
     });
   };
 
+  private cancelCheckPlayerPositionTimeout = () => {
+    clearTimeout(this.checkPlayerPositionTimeout);
+    this.checkPlayerPositionTimeout = null;
+  };
+
   public onViewportEnter = (item: LiveImage) => {
     log_debug(
       `onViewportEnter: live-image ${playerInfo(
@@ -125,7 +135,21 @@ export class LiveImageManager implements PlayerLifecycleListener {
       )}, primary ${playerInfo(this.primaryPlayer)}`
     );
 
-    this.checkPlayerPosition(item);
+    if (!isTV()) {
+      // mobile only
+      // we have to delay running checkPlayerPosition, because sometimes on fast scrolling we get wrong order onEnter, then onLeave.
+      // which could cause select wrong item to play
+
+      this.cancelCheckPlayerPositionTimeout();
+
+      this.checkPlayerPositionTimeout = setTimeout(() => {
+        this.cancelCheckPlayerPositionTimeout();
+
+        this.checkPlayerPosition(item);
+      }, TIMEOUT_FOR_DELAY_CHECK_PLAYER_POSITION);
+    } else {
+      this.checkPlayerPosition(item);
+    }
   };
 
   public onViewportLeave = (item: LiveImage) => {
@@ -246,6 +270,8 @@ export class LiveImageManager implements PlayerLifecycleListener {
   };
 
   public checkPlayerPosition = (item: LiveImage) => {
+    this.cancelCheckPlayerPositionTimeout();
+
     log_debug(
       `checkPlayerPosition: live-image playerId: ${playerInfo(
         item.player