@applicaster/zapp-react-native-ui-components 14.0.0-alpha.9256258513 → 14.0.0-alpha.9551591420

package/Components/River/__tests__/__snapshots__/componentsMap.test.js.snap

@@ -159,6 +159,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >
@@ -174,6 +175,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={null}
         >

package/Components/River/index.tsx

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { connectToStore } from "@applicaster/zapp-react-native-redux";
+import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
 
 import { withRiver } from "../../Decorators/RiverResolver";
 import { withNavigator } from "../../Decorators/Navigator";

package/Components/Screen/__tests__/Screen.test.tsx

@@ -68,12 +68,33 @@ jest.mock(
   })
 );
 
+jest.mock(
+  "@applicaster/zapp-react-native-utils/reactHooks/state/useRivers",
+  () => ({
+    useRivers: jest.fn(() => ({
+      rivers: [{ id: "testId", name: "Test River" }],
+    })),
+  })
+);
+
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
   isNavBarVisible: mockIsNavBarVisible,
   useIsScreenActive: jest.fn().mockReturnValue(true),
+  useNavigation: jest.fn(() => ({
+    canGoBack: () => false,
+    currentRoute: "/river/testId",
+    activeRiver: { id: "testId" },
+    screenData: { id: "testId" },
+    data: { screen: { id: "testId" } },
+  })),
+  useRoute: jest.fn(() => ({
+    pathname: "/river/testId",
+    screenData: { id: "testId" },
+  })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-utils/reactHooks"),
   useCurrentScreenData: jest.fn(() => ({
     id: "testId",
   })),
@@ -84,17 +105,6 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
     id: "testId",
     navigations: [{ id: "testId", category: "nav_bar" }],
   })),
-  useNavigation: jest.fn(() => ({
-    canGoBack: () => false,
-    currentRoute: "/river/testId",
-    activeRiver: { id: "testId" },
-    screenData: { id: "testId" },
-    data: { screen: { id: "testId" } },
-  })),
-  useRoute: jest.fn(() => ({
-    pathname: "/river/testId",
-    screenData: { id: "testId" },
-  })),
   useDimensions: jest.fn(() => ({
     width: 1920,
     height: 1080,
@@ -102,10 +112,11 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
-jest.mock("@applicaster/zapp-react-native-redux/hooks/usePickFromState", () => {
+jest.mock("@applicaster/zapp-react-native-redux/hooks", () => {
   const View = jest.requireActual("react-native").View;
 
   return {
+    ...jest.requireActual("@applicaster/zapp-react-native-redux/hooks"),
     usePickFromState: () => ({
       plugins: [
         {

package/Components/ScreenRevealManager/ScreenRevealManager.ts

@@ -0,0 +1,76 @@
+import { makeListOf } from "@applicaster/zapp-react-native-utils/arrayUtils";
+import { isFirstComponentGallery } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { once } from "ramda";
+
+const INITIAL_NUMBER_TO_LOAD = 3;
+
+// Infer the values of COMPONENT_LOADING_STATE as a type
+type ComponentLoadingState =
+  (typeof COMPONENT_LOADING_STATE)[keyof typeof COMPONENT_LOADING_STATE];
+
+export const COMPONENT_LOADING_STATE = {
+  UNKNOWN: "UNKNOWN",
+  LOADED_WITH_SUCCESS: "LOADED_WITH_SUCCESS",
+  LOADED_WITH_FAILURE: "LOADED_WITH_FAILURE",
+} as const;
+
+// Function to get the number of loaded components
+const getNumberOfLoaded = (states: ComponentLoadingState[]): number => {
+  return states.filter((value) => value !== COMPONENT_LOADING_STATE.UNKNOWN)
+    .length;
+};
+
+const getNumberOfComponentsWaitToLoadBeforePresent = (
+  componentsToRender: ZappUIComponent[]
+): number => {
+  // when Gallery is the first component, no need to wait the others
+  if (isFirstComponentGallery(componentsToRender)) {
+    return 1;
+  }
+
+  return Math.min(INITIAL_NUMBER_TO_LOAD, componentsToRender.length);
+};
+
+export class ScreenRevealManager {
+  public numberOfComponentsWaitToLoadBeforePresent: number;
+  private renderingState: Array<ComponentLoadingState>;
+  private callback: Callback;
+
+  constructor(componentsToRender: ZappUIComponent[], callback: Callback) {
+    this.numberOfComponentsWaitToLoadBeforePresent =
+      getNumberOfComponentsWaitToLoadBeforePresent(componentsToRender);
+
+    this.renderingState = makeListOf<ComponentLoadingState>(
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      this.numberOfComponentsWaitToLoadBeforePresent
+    );
+
+    this.callback = once(callback);
+  }
+
+  onLoadFinished = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_SUCCESS;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  onLoadFailed = (index: number): void => {
+    this.renderingState[index] = COMPONENT_LOADING_STATE.LOADED_WITH_FAILURE;
+
+    if (
+      getNumberOfLoaded(this.renderingState) >=
+      this.numberOfComponentsWaitToLoadBeforePresent
+    ) {
+      this.setIsReadyToShow();
+    }
+  };
+
+  setIsReadyToShow = (): void => {
+    this.callback();
+  };
+}

package/Components/ScreenRevealManager/__tests__/ScreenRevealManager.test.ts

@@ -0,0 +1,107 @@
+import {
+  ScreenRevealManager,
+  COMPONENT_LOADING_STATE,
+} from "../ScreenRevealManager";
+
+describe("ScreenRevealManager", () => {
+  const mockCallback = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("should initialize with the correct number of components to wait for", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    expect(manager["numberOfComponentsWaitToLoadBeforePresent"]).toBe(3);
+
+    expect(manager["renderingState"]).toEqual([
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+      COMPONENT_LOADING_STATE.UNKNOWN,
+    ]);
+  });
+
+  it("should call the callback when the required number of components are loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFinished(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when the required number of components fail to load", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFailed(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFailed(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should call the callback when a mix of successful and failed loads meet the required number", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+    manager.onLoadFinished(2);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it("should not call the callback if the required number of components are not loaded", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "component1" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+    manager.onLoadFailed(1);
+
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  it("should call the callback when the when first component is gallery and it was loaded successfully", () => {
+    const componentsToRender: ZappUIComponent[] = [
+      { component_type: "gallery-qb" },
+      { component_type: "component2" },
+      { component_type: "component3" },
+    ];
+
+    const manager = new ScreenRevealManager(componentsToRender, mockCallback);
+
+    manager.onLoadFinished(0);
+
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+});

package/Components/ScreenRevealManager/__tests__/withScreenRevealManager.test.tsx

@@ -0,0 +1,96 @@
+/* eslint-disable react/prop-types */
+
+import * as React from "react";
+import { render, screen, act } from "@testing-library/react-native";
+import { View } from "react-native";
+import {
+  withScreenRevealManager,
+  SHOWN,
+  TIMEOUT,
+} from "../withScreenRevealManager";
+
+// jest.mock("react-native/Libraries/Animated/NativeAnimatedHelper");
+
+const MockComponent = ({
+  initialNumberToLoad,
+  onLoadFinishedFromScreenRevealManager,
+  onLoadFailedFromScreenRevealManager,
+}) => {
+  React.useEffect(() => {
+    // Simulate loading components
+    for (let i = 0; i < initialNumberToLoad; i++) {
+      onLoadFinishedFromScreenRevealManager(i);
+    }
+  }, [initialNumberToLoad, onLoadFinishedFromScreenRevealManager]);
+
+  return (
+    <View
+      testID="mock-component"
+      initialNumberToLoad={initialNumberToLoad}
+      onLoadFinishedFromScreenRevealManager={
+        onLoadFinishedFromScreenRevealManager
+      }
+      onLoadFailedFromScreenRevealManager={onLoadFailedFromScreenRevealManager}
+    />
+  );
+};
+
+const WrappedComponent = withScreenRevealManager(MockComponent);
+
+describe.skip("withScreenRevealManager", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it("should render the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    expect(screen.getByTestId("mock-component")).toBeTruthy();
+  });
+
+  it("should animate opacity when ready to show", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const animatedView = screen.getByTestId("animated-component");
+
+    act(() => {
+      jest.advanceTimersByTime(TIMEOUT + 100);
+    });
+
+    expect(animatedView.props.style.opacity).toBe(SHOWN);
+  });
+
+  it("should pass initialNumberToLoad, onLoadFinishedFromScreenRevealManager, and onLoadFailedFromScreenRevealManager to the wrapped component", () => {
+    render(
+      <WrappedComponent
+        componentsToRender={[{ id: "1" }, { id: "2" }, { id: "3" }]}
+      />
+    );
+
+    const mockComponent = screen.getByTestId("mock-component");
+
+    expect(mockComponent.props.initialNumberToLoad).toBe(3);
+
+    expect(
+      mockComponent.props.onLoadFinishedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+
+    expect(
+      mockComponent.props.onLoadFailedFromScreenRevealManager
+    ).toBeInstanceOf(Function);
+  });
+});

package/Components/ScreenRevealManager/index.ts

@@ -0,0 +1 @@
+export { withScreenRevealManager } from "./withScreenRevealManager";

package/Components/ScreenRevealManager/withScreenRevealManager.tsx

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { Animated } from "react-native";
+import { isFirstComponentScreenPicker } from "@applicaster/zapp-react-native-utils/componentsUtils";
+import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
+import { useRefWithInitialValue } from "@applicaster/zapp-react-native-utils/reactHooks/state/useRefWithInitialValue";
+
+import { ScreenRevealManager } from "./ScreenRevealManager";
+
+const flex = platformSelect({
+  tvos: 1,
+  android_tv: 1,
+  web: undefined,
+  samsung_tv: undefined,
+  lg_tv: undefined,
+  default: undefined,
+});
+
+export const TIMEOUT = 500; // 500 ms
+
+const HIDDEN = 0; // opacity = 0
+
+export const SHOWN = 1; // opacity = 1
+
+type Props = {
+  componentsToRender: ZappUIComponent[];
+};
+
+export const withScreenRevealManager = (Component) => {
+  return function WithScreenRevealManager(props: Props) {
+    const { componentsToRender } = props;
+
+    const [isReadyToShow, setIsReadyToShow] = React.useState(false);
+
+    const handleSetIsReadyToShow = React.useCallback(() => {
+      setIsReadyToShow(true);
+    }, []);
+
+    const managerRef = useRefWithInitialValue<ScreenRevealManager>(
+      () => new ScreenRevealManager(componentsToRender, handleSetIsReadyToShow)
+    );
+
+    const opacityRef = useRefWithInitialValue<Animated.Value>(
+      () => new Animated.Value(HIDDEN)
+    );
+
+    React.useEffect(() => {
+      if (isReadyToShow) {
+        Animated.timing(opacityRef.current, {
+          toValue: SHOWN,
+          duration: TIMEOUT,
+          useNativeDriver: true,
+        }).start();
+      }
+    }, [isReadyToShow]);
+
+    if (isFirstComponentScreenPicker(componentsToRender)) {
+      // for screen-picker with have additional internal ComponentsMap, no need to add this wrapper
+      return <Component {...props} />;
+    }
+
+    return (
+      <Animated.View
+        style={{ opacity: opacityRef.current, flex }}
+        testID="animated-component"
+      >
+        <Component
+          {...props}
+          initialNumberToLoad={
+            managerRef.current.numberOfComponentsWaitToLoadBeforePresent
+          }
+          onLoadFinishedFromScreenRevealManager={
+            managerRef.current.onLoadFinished
+          }
+          onLoadFailedFromScreenRevealManager={managerRef.current.onLoadFailed}
+        />
+      </Animated.View>
+    );
+  };
+};

package/Components/Tabs/TV/Tabs.android.tsx

@@ -7,7 +7,6 @@ import { isEmptyOrNil } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import Tab from "./Tab";
 import { Gutter } from "../Gutter";
-import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { ImageBackground, View } from "react-native";
 import { getStyles } from "./styles";
 import {
@@ -100,7 +99,6 @@ const TabsComponent = ({
         >
           <FocusableList
             horizontal
-            onScrollToIndexFailed={noop}
             onLayout={onLayoutChange}
             contentContainerStyle={tabsListContentContainer}
             ref={flatListRef}

package/Components/TextInputTv/__tests__/__snapshots__/TextInputTv.test.js.snap

@@ -2,19 +2,6 @@
 
 exports[`<TextInputTv /> renders 1`] = `
 <input
-  accessibilityProps={
-    {
-      "accessibilityHint": "Enter text into Search",
-      "accessibilityLabel": "Search",
-      "accessibilityRole": "textbox",
-      "accessible": true,
-      "aria-description": "Enter text into Search",
-      "aria-label": "Search",
-      "aria-role": "textbox",
-      "role": "textbox",
-      "tabindex": 0,
-    }
-  }
   testID="TextInput-tv"
 />
 `;

package/Components/TextInputTv/index.tsx

@@ -4,7 +4,6 @@ import { Appearance, Platform, StyleSheet, TextInput } from "react-native";
 import { isFunction } from "@applicaster/zapp-react-native-utils/functionUtils";
 import { isWeb } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useIsRTL } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { useAccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type Props = Partial<{
   style: any;
@@ -43,8 +42,6 @@ function TextInputTV(props: Props, ref) {
   const [colorScheme, setColorScheme] = useState(getInitialColorScheme());
   const isRTL = useIsRTL();
 
-  const accessibilityManager = useAccessibilityManager({});
-
   const onColorChange = useCallback(
     ({ colorScheme: color }) => {
       if (color !== colorScheme) {
@@ -156,13 +153,6 @@ function TextInputTV(props: Props, ref) {
       ])
     )(props);
 
-  const getAccessibilityProps = () => {
-    return {
-      accessibilityProps:
-        accessibilityManager.getInputAccessibilityProps("Search"),
-    };
-  };
-
   const inputProps = {
     ...getProps(),
     ...getStyle(),
@@ -171,7 +161,6 @@ function TextInputTV(props: Props, ref) {
     ...getSecureTextEntry(),
     ...getOnEndEditing(),
     ...getOnPress(),
-    ...getAccessibilityProps(),
   };
 
   if (

package/Components/Touchable/__tests__/__snapshots__/touchable.test.tsx.snap

@@ -3,6 +3,23 @@
 exports[`<Touchable /> when not running in automated tests environment renders correctly 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   collapsable={false}
   focusable={true}
@@ -29,6 +46,23 @@ exports[`<Touchable /> when not running in automated tests environment renders c
 exports[`<Touchable /> when running in automated tests environment has accessible flag set to false 1`] = `
 <View
   accessibilityLabel="some-test-id"
+  accessibilityState={
+    {
+      "busy": undefined,
+      "checked": undefined,
+      "disabled": undefined,
+      "expanded": undefined,
+      "selected": undefined,
+    }
+  }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={false}
   collapsable={false}
   focusable={true}

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

@@ -6,15 +6,21 @@ exports[`<Scene /> renders correctly 1`] = `
     collapsable={false}
     pointerEvents="auto"
     style={
-      {
-        "flex": 1,
-        "fontScale": 2,
-        "height": 1334,
-        "paddingBottom": 49,
-        "scale": 2,
-        "statusBarHeight": null,
-        "width": 750,
-      }
+      [
+        {
+          "flex": 1,
+        },
+        {
+          "paddingBottom": 49,
+        },
+        {
+          "fontScale": 2,
+          "height": 1334,
+          "scale": 2,
+          "statusBarHeight": null,
+          "width": 750,
+        },
+      ]
     }
   />
 </View>

package/Components/VideoLive/animationUtils.ts

@@ -1,8 +1,8 @@
 import { Animated, Easing, EasingFunction, StyleProp } from "react-native";
 
 type AnimatedInterpolatedStyle =
-  | Animated.AnimatedInterpolation
-  | [{ [Key: string]: Animated.AnimatedInterpolation }];
+  | Animated.AnimatedInterpolation<number>
+  | [{ [Key: string]: Animated.AnimatedInterpolation<number> }];
 
 type AnimationConfig = {
   duration: number;
@@ -31,7 +31,7 @@ const interpolate = (
   animatedValue: Animated.Value,
   from: number = 0,
   to: number = 1
-): Animated.AnimatedInterpolation =>
+): Animated.AnimatedInterpolation<number> =>
   animatedValue.interpolate({
     inputRange: [0, 1],
     outputRange: [from, to],

package/Components/VideoModal/ModalAnimation/ModalAnimationContext.tsx

@@ -11,6 +11,7 @@ import { isLive } from "@applicaster/zapp-react-native-utils/playerUtils";
 
 import { PROGRESS_BAR_HEIGHT } from "./utils";
 import { useConfiguration } from "../utils";
+import { useIsTabletLandscape } from "@applicaster/zapp-react-native-utils/reactHooks/device/useMemoizedIsTablet";
 
 export enum PlayerAnimationStateEnum {
   minimize = "minimize",
@@ -102,14 +103,6 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
     setStartComponentsAnimation(false);
   }, []);
 
-  useEffect(() => {
-    // Reset player animation state when video modal is closed
-    if (!visible) {
-      resetPlayerAnimationState();
-      yTranslate.current?.setValue(Dimensions.get("window").height);
-    }
-  }, [visible, resetPlayerAnimationState]);
-
   // Animated values
   const lastScrollY = React.useRef(new Animated.Value(0)).current;
   const dragScrollY = React.useRef(new Animated.Value(0)).current;
@@ -122,6 +115,29 @@ const Provider = ({ children }: { children: React.ReactNode }) => {
   const { bottom: bottomSafeArea } = useSafeAreaInsets();
   const bottomTabBarHeight = useGetBottomTabBarHeight();
   const startComponentsAnimationDistance = Math.round((height * 60) / 100);
+  const isTabletLandscape = useIsTabletLandscape();
+  const windowDimensions = Dimensions.get("window");
+
+  useEffect(() => {
+    // Reset player animation state when video modal is closed
+    if (!visible) {
+      resetPlayerAnimationState();
+
+      if (!isTabletLandscape) {
+        // restore to portrait ( in portrait mode height is bigger)
+        if (windowDimensions.height > windowDimensions.width) {
+          yTranslate.current?.setValue(windowDimensions.height);
+        }
+      } else {
+        yTranslate.current?.setValue(windowDimensions.height);
+      }
+    }
+  }, [
+    visible,
+    resetPlayerAnimationState,
+    windowDimensions.height,
+    isTabletLandscape,
+  ]);
 
   React.useEffect(() => {
     if (visible && mode === "MAXIMIZED" && height !== safeAreaFrameHeight) {