@applicaster/zapp-react-native-ui-components 15.0.0-alpha.8680244503 → 15.0.0-alpha.9102699023

package/Components/River/TV/River.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { Text } from "react-native";
-import * as R from "ramda";
+
+import { mergeRight } from "@applicaster/zapp-react-native-utils/utils";
 
 import { GeneralContentScreen } from "../../GeneralContentScreen";
 import { ScreenResolver } from "@applicaster/zapp-react-native-ui-components/Components/ScreenResolver";
@@ -13,6 +14,8 @@ import {
 } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { useRivers } from "@applicaster/zapp-react-native-utils/reactHooks/state";
 
+import { toStringOrEmpty } from "./utils";
+
 type Props = {
   screenId: string;
   screenData: ZappRiver | ZappEntry;
@@ -24,6 +27,7 @@ type Props = {
   isInsideContainer?: boolean;
   extraAnchorPointYOffset: number;
   river?: ZappRiver | ZappEntry;
+  groupId: string;
 };
 
 export const River = (props: Props) => {
@@ -35,6 +39,7 @@ export const River = (props: Props) => {
     componentsMapExtraProps,
     isInsideContainer,
     extraAnchorPointYOffset,
+    groupId,
   } = props;
 
   const { title: screenTitle, summary: screenSummary } = useNavbarState();
@@ -51,28 +56,41 @@ export const River = (props: Props) => {
     [screenId]
   );
 
-  const stringOrEmpty = (value: string | number | undefined): string =>
-    R.isNil(value) ? "" : String(value);
+  const screenResolverData = React.useMemo(() => {
+    const extraData = mergeRight(extraProps, screenResolverExtraProps);
+
+    return {
+      extraData,
+      screenData: mergeRight(river, { groupId: extraData?.groupId }),
+      componentsMapExtraProps: mergeRight(componentsMapExtraProps, { groupId }),
+    };
+  }, [
+    extraProps,
+    screenResolverExtraProps,
+    river,
+    componentsMapExtraProps,
+    groupId,
+  ]);
 
   React.useEffect(() => {
     if (!isInsideContainer) {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [screenData.id]);
 
   React.useEffect(() => {
     if (feedData && !isInsideContainer) {
       if (feedData.title && feedData.title !== screenTitle) {
-        setScreenTitle(stringOrEmpty(feedData.title));
+        setScreenTitle(toStringOrEmpty(feedData.title));
       }
 
       if (feedData.summary && feedData.summary !== screenSummary) {
-        setScreenSummary(stringOrEmpty(feedData.summary));
+        setScreenSummary(toStringOrEmpty(feedData.summary));
       }
     } else {
-      setScreenTitle(stringOrEmpty(screenData?.title));
-      setScreenSummary(stringOrEmpty(screenData?.summary));
+      setScreenTitle(toStringOrEmpty(screenData?.title));
+      setScreenSummary(toStringOrEmpty(screenData?.summary));
     }
   }, [feedData, screenData, screenTitle, screenSummary]);
 
@@ -86,15 +104,13 @@ export const River = (props: Props) => {
   }
 
   if (river.type !== "general_content") {
-    const extraData = { ...R.mergeRight(extraProps, screenResolverExtraProps) };
-
     return (
       <ScreenResolver
         screenType={river.type}
         screenId={screenId}
-        screenData={R.merge(river, { groupId: extraData?.groupId })}
-        componentsMapExtraProps={componentsMapExtraProps}
-        {...extraData}
+        screenData={screenResolverData.screenData}
+        componentsMapExtraProps={screenResolverData.componentsMapExtraProps}
+        {...screenResolverData.extraData}
       />
     );
   }
@@ -106,6 +122,7 @@ export const River = (props: Props) => {
       isScreenWrappedInContainer={isInsideContainer}
       extraAnchorPointYOffset={extraAnchorPointYOffset}
       componentsMapExtraProps={componentsMapExtraProps}
+      groupId={groupId}
     />
   );
 };

package/Components/River/TV/index.tsx

@@ -1,11 +1,15 @@
-import { compose } from "ramda";
+import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
+import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
+
 import { River as RiverComponent } from "./River";
-import { withTvEventHandler } from "./withTVEventHandler";
 import { withComponentsMapOffsetContext } from "../../../Contexts/ComponentsMapOffsetContext";
 import { withRiverDataLoader } from "./withRiverDataLoader";
+import { withFocusableGroupForContent } from "./withFocusableGroupForContent";
+
+const isTVOS = isTvOSPlatform();
 
 export const River = compose(
-  withTvEventHandler,
   withComponentsMapOffsetContext,
-  withRiverDataLoader
+  withRiverDataLoader,
+  isTVOS ? withFocusableGroupForContent : identity
 )(RiverComponent);

package/Components/River/TV/utils/__tests__/toStringOrEmpty.test.ts

@@ -0,0 +1,30 @@
+import { toStringOrEmpty } from "..";
+
+describe("toStringOrEmpty", () => {
+  test("returns empty string for undefined", () => {
+    expect(toStringOrEmpty(undefined)).toBe("");
+  });
+
+  test("returns empty string for null", () => {
+    expect(toStringOrEmpty(null)).toBe("");
+  });
+
+  test("converts number to string", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+    expect(toStringOrEmpty(123)).toBe("123");
+    expect(toStringOrEmpty(-42)).toBe("-42");
+  });
+
+  test("returns string as is", () => {
+    expect(toStringOrEmpty("hello")).toBe("hello");
+    expect(toStringOrEmpty("")).toBe("");
+  });
+
+  test("works with numeric strings", () => {
+    expect(toStringOrEmpty("123")).toBe("123");
+  });
+
+  test("does not throw on falsy values like 0", () => {
+    expect(toStringOrEmpty(0)).toBe("0");
+  });
+});

package/Components/River/TV/utils/index.ts

@@ -0,0 +1,4 @@
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+
+export const toStringOrEmpty = (value: unknown): string =>
+  isNil(value) ? "" : String(value);

package/Components/River/TV/withFocusableGroupForContent.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { FocusableGroup } from "@applicaster/zapp-react-native-ui-components/Components/FocusableGroup";
+import { riverFocusManager } from "@applicaster/zapp-react-native-utils/appUtils/RiverFocusManager";
+
+import { topMenuLayoutChange$ } from "@applicaster/zapp-react-native-tvos-app/Layout/topMenu";
+
+const styles = StyleSheet.create({
+  flexOne: {
+    flex: 1,
+  },
+});
+
+export const withFocusableGroupForContent = (Component) => {
+  return function WithFocusableGroupForContent(props) {
+    const { screenId, isInsideContainer } = props;
+
+    const [topMenuHeight, setTopMenuHeight] = React.useState(0);
+
+    React.useEffect(() => {
+      const subscription = topMenuLayoutChange$.subscribe((layout) => {
+        setTopMenuHeight(layout.height);
+      });
+
+      return () => {
+        subscription.unsubscribe();
+      };
+    }, []);
+
+    const focusableId = React.useMemo(
+      () =>
+        riverFocusManager.screenFocusableGroupId({
+          screenId,
+          isInsideContainer,
+        }),
+      [screenId, isInsideContainer]
+    );
+
+    if (isInsideContainer) {
+      return <Component {...props} />;
+    }
+
+    return (
+      <FocusableGroup
+        key={focusableId}
+        id={focusableId}
+        // The top menu is rendered in its own FocusableGroup, anchored at the top of the screen.
+        // When the "content" FocusableGroup starts at y = 0 as well, the two groups visually overlap.
+        // On TvOS platform this overlap can confuse the focus engine, because the focusable bounds of
+        // the top-menu group and the content group intersect, leading to erratic navigation between
+        // the menu and the content (e.g. unexpected jumps or focus getting "stuck").
+        //
+        // To avoid this, we shift the entire content FocusableGroup down by the dynamic top menu
+        // height (marginTop: topMenuHeight). This separates the focus regions of the two groups in
+        // focus space, so they no longer intersect.
+        //
+        // The inner <View> below then applies the inverse margin (marginTop: -topMenuHeight) so that
+        // the actual visual position of the content on screen does not change; only the focusable
+        // bounds of the outer group are offset.
+        style={[styles.flexOne, { marginTop: topMenuHeight }]}
+        // this group does not have parent
+        groupId={undefined}
+      >
+        <View style={[styles.flexOne, { marginTop: -1 * topMenuHeight }]}>
+          <Component {...props} groupId={focusableId} />
+        </View>
+      </FocusableGroup>
+    );
+  };
+};

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

@@ -137,6 +137,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}
@@ -154,6 +155,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         }
       }
       stickyHeaderIndices={[]}
+      testID="components-map-flat-list"
       viewabilityConfigCallbackPairs={[]}
       windowSize={12}
     >

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

@@ -139,7 +139,13 @@ jest.mock(
   })
 );
 
+jest.mock("@applicaster/zapp-react-native-ui-components/events", () => ({
+  ...jest.requireActual("@applicaster/zapp-react-native-ui-components/events"),
+  emitScrollEndReached: jest.fn(),
+}));
+
 const { View } = require("react-native");
+const events = require("@applicaster/zapp-react-native-ui-components/events");
 const { ComponentsMap } = require("../ComponentsMap/ComponentsMap");
 const theme = require("./theme-mock.json");
 
@@ -190,4 +196,36 @@ describe("componentsMap", () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it("calls emitScrollEndReached when onScroll was called and isScreenWrappedInContainer is false", () => {
+    themeSpy = jest
+      .spyOn(themeUtils, "useTheme")
+      .mockImplementation(() => () => theme);
+
+    events.emitScrollEndReached.mockClear();
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <ComponentsMap
+          {...props}
+          isScreenWrappedInContainer={false}
+          feed={{ entry: [] }}
+        />
+      </Provider>
+    );
+
+    const flatList = getByTestId("components-map-flat-list");
+
+    flatList.props.onScroll({
+      nativeEvent: {
+        contentOffset: { y: 0 },
+        layoutMeasurement: { height: 100 },
+        contentSize: { height: 200 },
+      },
+    });
+
+    flatList.props.onEndReached();
+
+    expect(events.emitScrollEndReached).toHaveBeenCalledTimes(1);
+  });
 });

package/Components/Screen/orientationHandler.ts

@@ -1,18 +1,16 @@
-import React, { useLayoutEffect } from "react";
+import { useLayoutEffect } from "react";
 
 import {
   allowedOrientationsForScreen,
-  ORIENTATIONS,
   getOrientation,
+  ORIENTATIONS,
   useGetScreenOrientation,
 } from "@applicaster/zapp-react-native-utils/appUtils/orientationHelper";
 import { usePrevious } from "@applicaster/zapp-react-native-utils/reactHooks/utils";
 import { usePlugins, useAppData } from "@applicaster/zapp-react-native-redux";
 import { findPluginByType } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
-
-import { ZappHookModalContext } from "../../Contexts";
-import { HookModalContextT } from "../../Contexts/ZappHookModalContext";
+import { zappHookModalStore } from "../../Contexts/ZappHookModalContext";
 
 /**
  * This function calls the native module needed to set orientation
@@ -89,10 +87,6 @@ type Props = {
 };
 
 export function useScreenOrientationHandler({ screenData, isActive }: Props) {
-  const { isHooksExecutionInProgress } = React.useContext<HookModalContextT>(
-    ZappHookModalContext.ReactContext
-  );
-
   const prevIsActive = usePrevious(isActive);
 
   const newOrientation = useNewOrientationForScreenData({
@@ -105,6 +99,9 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
       return;
     }
 
+    // TODO: make sure it can be static getter and subscription is not needed
+    const { isHooksExecutionInProgress } = zappHookModalStore.getState();
+
     // If modal hook presented we need to skip
     // Change orientation for presenter screen
     if (isHooksExecutionInProgress) {
@@ -116,7 +113,7 @@ export function useScreenOrientationHandler({ screenData, isActive }: Props) {
 
       setOrientation(newOrientation);
     }
-  }, [newOrientation, isHooksExecutionInProgress, prevIsActive, isActive]);
+  }, [newOrientation, prevIsActive, isActive]);
 }
 
 export function useOrientationHandler({ screenData }: OrientationHookArgs) {

package/Components/Tabs/TabContent.tsx

@@ -1,11 +1,10 @@
 import React from "react";
-import { View, ViewStyle } from "react-native";
+import { View, StyleSheet } from "react-native";
 
 import { River } from "@applicaster/zapp-react-native-ui-components/Components";
 import { withNestedNavigationContextProvider } from "@applicaster/zapp-react-native-ui-components/Contexts/NestedNavigationContext";
 
 type Props = {
-  styles: Record<string, ViewStyle>;
   minHeight: number;
   changingTab: boolean;
   feedUrl: string;
@@ -14,9 +13,14 @@ type Props = {
   backgroundColor: string;
 };
 
+const styles = StyleSheet.create({
+  riverWrapper: {
+    flex: 1,
+  },
+});
+
 function TabContentComponent(props: Props) {
   const {
-    styles,
     minHeight,
     backgroundColor,
     changingTab,
@@ -29,7 +33,6 @@ function TabContentComponent(props: Props) {
     <View
       style={[
         styles.riverWrapper,
-
         {
           backgroundColor,
           minHeight,

package/Components/VideoModal/hooks/__tests__/useDelayedPlayerDetails.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { act, renderHook, waitFor } from "@testing-library/react-native";
 import { useDelayedPlayerDetails } from "../useDelayedPlayerDetails";
 import { useIsTablet } from "@applicaster/zapp-react-native-utils/reactHooks";
 
@@ -13,16 +13,20 @@ describe("useDelayedPlayerDetails", () => {
     jest.clearAllMocks();
   });
 
-  it("should return false initially, that changes after 1 second", () => {
+  it("should return false initially, that changes after 1 second", async () => {
     const { result } = renderHook(() =>
       useDelayedPlayerDetails({ isInline: true, isDocked: false, isPip: false })
     );
 
     expect(result.current).toBe(false);
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 
   it("should return false when isPip is true", () => {
@@ -41,7 +45,7 @@ describe("useDelayedPlayerDetails", () => {
     expect(result.current).toBe(false);
   });
 
-  it("should return true for tablet regardless of other flags", () => {
+  it("should return true for tablet regardless of other flags", async () => {
     (useIsTablet as jest.Mock).mockReturnValue(true);
 
     const { result } = renderHook(() =>
@@ -52,8 +56,12 @@ describe("useDelayedPlayerDetails", () => {
       })
     );
 
-    jest.advanceTimersByTime(1000);
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
 
-    expect(result.current).toBe(true);
+    await waitFor(() => {
+      expect(result.current).toBe(true);
+    });
   });
 });

package/Components/Viewport/ViewportAware/index.tsx

@@ -32,7 +32,7 @@ function getTestDimensions(testDimensions) {
   return (process.env.NODE_ENV === "test" && testDimensions) || null;
 }
 
-function ViewportAwareComponent(props: Props, ref) {
+function ViewportAwareComponent(props: Props, forwardedRef) {
   const viewportEvents = useViewportEventsContext();
 
   const {
@@ -47,13 +47,22 @@ function ViewportAwareComponent(props: Props, ref) {
     getTestDimensions(testDimensions) || initialDimensions
   );
 
+  const localRef = React.useRef(null);
+
   const [viewportChangeEvent, setViewportChangeEvent] = React.useState(null);
 
-  function assignRef(_ref) {
-    if (_ref && !ref) {
-      ref = _ref;
-    }
-  }
+  const assignRef = React.useCallback(
+    (_ref) => {
+      localRef.current = _ref;
+
+      if (typeof forwardedRef === "function") {
+        forwardedRef(_ref);
+      } else if (forwardedRef) {
+        forwardedRef.current = _ref;
+      }
+    },
+    [forwardedRef]
+  );
 
   const checkInViewport = (viewportChangeEvent, layoutEvent) => {
     const inVerticalViewport = Utils.isInViewport(
@@ -94,7 +103,7 @@ function ViewportAwareComponent(props: Props, ref) {
   const onViewportChange = (viewportChangeEvent) => {
     setViewportChangeEvent(viewportChangeEvent);
 
-    const nodeHandle = findNodeHandle(ref);
+    const nodeHandle = findNodeHandle(localRef.current);
 
     if (!nodeHandle) {
       return;

package/Components/Viewport/ViewportEvents/__tests__/viewportEvents.test.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   ViewportEvents,
   useViewportEventsContext,

package/Contexts/ScreenContext/index.tsx

@@ -16,6 +16,7 @@ import { useNestedNavigationContext } from "@applicaster/zapp-react-native-ui-co
 import { create } from "zustand";
 import { subscribeWithSelector } from "zustand/middleware";
 import { useShallow } from "zustand/react/shallow";
+
 import { Animated } from "react-native";
 
 interface NavBarStoreState {
@@ -29,6 +30,8 @@ interface NavBarStoreState {
   scrollState: number;
   contentPosition: string;
   scrollYAnimated: Animated.Value;
+  hideOnScrollAnimated: Animated.Value;
+  hideOnScroll: boolean;
 }
 
 interface NavBarState {
@@ -62,24 +65,28 @@ const createStateStore = () =>
   );
 
 const createStore = () =>
-  create<NavBarStoreState>((set) => ({
-    title: "",
-    summary: "",
-    visible: true,
-    height: 0,
-    scrollState: 0,
-    contentPosition: "",
-    scrollYAnimated: new Animated.Value(0),
-    setTitle(title) {
-      set({ title });
-    },
-    setSummary(summary) {
-      set({ summary });
-    },
-    setVisible(visible) {
-      set({ visible });
-    },
-  }));
+  create(
+    subscribeWithSelector<NavBarStoreState>((set) => ({
+      title: "",
+      summary: "",
+      visible: true,
+      height: 0,
+      scrollState: 0,
+      contentPosition: "",
+      scrollYAnimated: new Animated.Value(0),
+      hideOnScrollAnimated: new Animated.Value(0),
+      hideOnScroll: false,
+      setTitle(title) {
+        set({ title });
+      },
+      setSummary(summary) {
+        set({ summary });
+      },
+      setVisible(visible) {
+        set({ visible });
+      },
+    }))
+  );
 
 type ScreenContextType = {
   _navBarStore: ReturnType<typeof createStore>;

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

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-native";
 import {
   useScreenTrackedViewPositionsContext,
   ScreenTrackedViewPositionsContext,