@applicaster/zapp-react-native-ui-components 15.0.0-rc.98 → 15.1.0-alpha.1852552014

package/Components/River/RefreshControl.tsx

@@ -5,6 +5,8 @@ import {
   StyleSheet,
 } from "react-native";
 import * as R from "ramda";
+import { path } from "@applicaster/zapp-react-native-utils/utils";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
 import { useLocalizedStrings } from "@applicaster/zapp-react-native-utils/localizationUtils";
 import { useAnalytics } from "@applicaster/zapp-react-native-utils/analyticsUtils";
@@ -62,9 +64,13 @@ export const usePullToRefresh = (
 
   const [refreshing, setRefreshing] = React.useState(false);
 
-  const feeds: string[] =
-    riverComponents?.map(R.path(["data", "source"])).filter((feed) => !!feed) ??
-    [];
+  const feeds: string[] = React.useMemo(
+    () =>
+      (riverComponents || [])
+        .map((riverComponent) => path(["data", "source"], riverComponent))
+        .filter((feed) => !isNilOrEmpty(feed)),
+    [riverComponents]
+  );
 
   const feedsLength = feeds.length;
 

package/Components/River/RiverItem.tsx

@@ -14,6 +14,7 @@ import { tvPluginsWithCellRenderer } from "../../const";
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import type { BehaviorSubject } from "rxjs";
 import { useCallbackActions } from "@applicaster/zapp-react-native-utils/zappFrameworkUtils/HookCallback/useCallbackActions";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 export type RiverItemType = {
   item: ZappUIComponent;
@@ -112,33 +113,38 @@ function RiverItemComponent(props: RiverItemType) {
     CellRenderer = undefined;
   }
 
-  React.useEffect(() => {
-    riverLogger.log({
-      message: "mounting component",
-      data: { item, feedUrl, Component, CellRenderer },
-      jsOnly: true,
-    });
+  const isComponentMissing = isNilOrEmpty(Component);
 
-    if (!CellRenderer && !isGroup(item)) {
+  /**
+   * TODO: Move this plugin existence check further up the stack (before ComponentsMap).
+   * Filtering items at the list-rendering or data-processing level would prevent
+   * mounting RiverItem entirely for missing components.
+   */
+  React.useEffect(() => {
+    if (isComponentMissing) {
       riverLogger.warning({
-        message: "Cell Renderer is null - will fallback to default cell",
-        data: { item, CellRenderer },
+        message: `Component ${item.component_type} is null - skipping rendering`,
+      });
+
+      onLoadFinished(index);
+    } else {
+      riverLogger.log({
+        message: "mounting component",
+        data: { item, feedUrl, Component, CellRenderer },
         jsOnly: true,
       });
+
+      if (!CellRenderer && !isGroup(item)) {
+        riverLogger.warning({
+          message: "Cell Renderer is null - will fallback to default cell",
+          data: { item, CellRenderer },
+          jsOnly: true,
+        });
+      }
     }
   }, []);
 
-  if (!readyToBeDisplayed) {
-    return null;
-  }
-
-  if (Component === null || typeof Component === "undefined") {
-    riverLogger.warning({
-      message: `Component ${item.component_type} is null - skipping rendering`,
-    });
-
-    onLoadFinished(index);
-
+  if (!readyToBeDisplayed || isComponentMissing) {
     return null;
   }
 

package/Components/River/TV/River.tsx

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

package/Components/River/TV/index.tsx

@@ -1,15 +1,11 @@
-import { compose, identity } from "@applicaster/zapp-react-native-utils/utils";
-import { isTvOSPlatform } from "@applicaster/zapp-react-native-utils/reactUtils";
-
+import { compose } from "ramda";
 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,
-  isTVOS ? withFocusableGroupForContent : identity
+  withRiverDataLoader
 )(RiverComponent);

package/Components/River/TV/withTVEventHandler.tsx

@@ -0,0 +1,36 @@
+/* eslint max-len: off */
+
+import React from "react";
+import { TVEventHandlerComponent } from "@applicaster/zapp-react-native-tvos-ui-components/Components/TVEventHandlerComponent";
+import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
+import { useIsStandaloneFullscreen } from "@applicaster/zapp-react-native-utils/reactHooks/screen";
+
+export const withTvEventHandler = (Component) => {
+  return function WithTVEventHandler(props) {
+    const navigator = useNavigation();
+
+    const isStandaloneFullscreen = useIsStandaloneFullscreen();
+
+    const remoteHandler = (event) => {
+      const { eventType } = event;
+
+      const canGoBack = navigator.canGoBack();
+
+      if (eventType === "menu" && isStandaloneFullscreen) {
+        navigator.goHome();
+
+        return;
+      }
+
+      if (eventType === "menu" && canGoBack) {
+        navigator.goBack();
+      }
+    };
+
+    return (
+      <TVEventHandlerComponent tvEventHandler={remoteHandler}>
+        <Component {...props} />
+      </TVEventHandlerComponent>
+    );
+  };
+};

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

@@ -10,11 +10,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
 >
   <View
     onLayout={[Function]}
-    style={
-      {
-        "flex": 1,
-      }
-    }
   >
     <RCTScrollView
       ListFooterComponent={
@@ -137,6 +132,7 @@ exports[`componentsMap renders renders components map correctly 1`] = `
       keyExtractor={[Function]}
       maxToRenderPerBatch={10}
       onContentSizeChange={[Function]}
+      onEndReached={[Function]}
       onLayout={[Function]}
       onMomentumScrollBegin={[Function]}
       onMomentumScrollEnd={[Function]}
@@ -165,11 +161,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           >
             <View />
           </View>
@@ -181,11 +172,6 @@ exports[`componentsMap renders renders components map correctly 1`] = `
         >
           <View
             onLayout={[Function]}
-            style={
-              {
-                "flex": 1,
-              }
-            }
           />
         </View>
         <View

package/Components/Screen/TV/hooks/__tests__/useAfterPaint.test.ts

@@ -0,0 +1,60 @@
+import { renderHook, act } from "@testing-library/react-native";
+
+import { useAfterPaint } from "../useAfterPaint";
+
+describe("useAfterPaint", () => {
+  let frameCallbacks: FrameRequestCallback[];
+  let originalRaf: typeof requestAnimationFrame;
+  let originalCancelRaf: typeof cancelAnimationFrame;
+
+  const flushFrame = () => {
+    const callbacks = frameCallbacks;
+    frameCallbacks = [];
+
+    act(() => {
+      callbacks.forEach((cb) => cb(0));
+    });
+  };
+
+  beforeEach(() => {
+    frameCallbacks = [];
+    originalRaf = global.requestAnimationFrame;
+    originalCancelRaf = global.cancelAnimationFrame;
+
+    global.requestAnimationFrame = jest.fn((cb: FrameRequestCallback) => {
+      frameCallbacks.push(cb);
+
+      return frameCallbacks.length;
+    }) as unknown as typeof requestAnimationFrame;
+
+    global.cancelAnimationFrame = jest.fn();
+  });
+
+  afterEach(() => {
+    global.requestAnimationFrame = originalRaf;
+    global.cancelAnimationFrame = originalCancelRaf;
+  });
+
+  it("returns false on the initial render", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    expect(result.current).toBe(false);
+  });
+
+  it("stays false after only one animation frame (before paint completes)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+
+    expect(result.current).toBe(false);
+  });
+
+  it("returns true after two animation frames (a real post-paint boundary)", () => {
+    const { result } = renderHook(() => useAfterPaint());
+
+    flushFrame();
+    flushFrame();
+
+    expect(result.current).toBe(true);
+  });
+});

package/Components/Screen/TV/hooks/index.ts

@@ -1 +1,3 @@
 export { useInitialFocus } from "./useInitialFocus";
+
+export { useAfterPaint } from "./useAfterPaint";

package/Components/Screen/TV/hooks/useAfterPaint.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export const useAfterPaint = (): boolean => {
+  const [painted, setPainted] = React.useState(false);
+
+  React.useEffect(() => {
+    let secondFrame: number | undefined;
+
+    const firstFrame = requestAnimationFrame(() => {
+      secondFrame = requestAnimationFrame(() => setPainted(true));
+    });
+
+    return () => {
+      cancelAnimationFrame(firstFrame);
+
+      if (secondFrame !== undefined) {
+        cancelAnimationFrame(secondFrame);
+      }
+    };
+  }, []);
+
+  return painted;
+};

package/Components/Screen/TV/index.web.tsx

@@ -9,10 +9,9 @@ import {
 import {
   useIsScreenActive,
   useNavigation,
-  useRivers,
 } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import {
   useNavbarState,
   useScreenBackgroundColor,
@@ -21,7 +20,7 @@ import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/he
 
 import { NavBarContainer } from "../../Layout/TV/NavBarContainer";
 import { ScreenResolver } from "../../ScreenResolver";
-import { useInitialFocus } from "./hooks";
+import { useInitialFocus, useAfterPaint } from "./hooks";
 import { isPlayerPlugin } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { focusManager } from "@applicaster/zapp-react-native-utils/appUtils";
 import { FreezeWithCallback } from "../../FreezeWithCallback";
@@ -103,8 +102,7 @@ export const Screen = ({ route, Components }: Props) => {
   }
 
   const navigator = useNavigation();
-  const plugins = usePlugins();
-  const rivers = useRivers();
+  const { plugins = [], rivers = [] } = usePickFromState(["plugins", "rivers"]);
 
   const pathAttributes = getPathAttributes({ pathname: route });
   const routeState = navigator.getStackForPathname(route);
@@ -157,6 +155,13 @@ export const Screen = ({ route, Components }: Props) => {
 
   const isScreenActive = useIsScreenActive();
 
+  // We need to render menu first and then proceed with screen content,
+  // otherwise screen will stay black until everything is loaded and screen
+  // rendering put huge load the CPU pushing rendering even further.
+  // With this approach, menu will be rendered immediately and screen content
+  // will be rendered after paint, which makes it more responsive and prevents black screen.
+  const isContentReady = useAfterPaint();
+
   return (
     <FreezeWithCallback freeze={!isScreenActive} onRelease={onRelease}>
       <View style={[styles.container, { backgroundColor }]}>
@@ -167,12 +172,14 @@ export const Screen = ({ route, Components }: Props) => {
             navigationProps={navigationProps}
           />
         </NavBarContainer>
-        <ScreenResolver
-          screenType={screenType}
-          screenId={screenId}
-          screenData={screenData}
-          groupId={route}
-        />
+        {isContentReady ? (
+          <ScreenResolver
+            screenType={screenType}
+            screenId={screenId}
+            screenData={screenData}
+            groupId={route}
+          />
+        ) : null}
       </View>
     </FreezeWithCallback>
   );

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

@@ -1,16 +1,20 @@
 import * as React from "react";
 import { View } from "react-native";
-import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUtils";
+import { render } from "@testing-library/react-native";
 
 const Mocked_RouteManager = jest.fn((props) => (
   <View testID="routeManager" {...props} />
 ));
 
+const mock_navBarVisibleFlag = true;
+
+const mockIsNavBarVisible = jest.fn(() => mock_navBarVisibleFlag);
+
 const mockIsOrientationCompatible = jest.fn(() => true);
 
 jest.mock("react-native-safe-area-context", () => ({
-  ...jest.requireActual("react-native-safe-area-context"),
   useSafeAreaInsets: () => ({ top: 44 }),
+  useSafeAreaFrame: () => ({ x: 0, y: 0, width: 375, height: 812 }),
 }));
 
 jest.mock("../../RouteManager", () => ({
@@ -32,14 +36,12 @@ jest.mock(
 );
 
 jest.mock("@applicaster/zapp-react-native-utils/analyticsUtils", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/analyticsUtils"),
   useAnalytics: jest.fn(() => ({
     sendScreenEvent: jest.fn(),
   })),
 }));
 
 jest.mock("@applicaster/zapp-react-native-utils/theme", () => ({
-  ...jest.requireActual("@applicaster/zapp-react-native-utils/theme"),
   useTheme: jest.fn(() => ({
     app_background_color: "blue",
   })),
@@ -76,44 +78,21 @@ jest.mock(
   })
 );
 
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useNavigation"
-    ),
-    useNavigation: jest.fn(() => ({
-      canGoBack: () => false,
-      currentRoute: "/river/testId",
-      activeRiver: { id: "testId" },
-      screenData: { id: "testId" },
-      data: { screen: { id: "testId" } },
-    })),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useIsScreenActive"
-    ),
-    useIsScreenActive: jest.fn().mockReturnValue(true),
-  })
-);
-
-jest.mock(
-  "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute",
-  () => ({
-    ...jest.requireActual(
-      "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute"
-    ),
-    useRoute: jest.fn(() => ({
-      pathname: "/river/testId",
-      screenData: { id: "testId" },
-    })),
-  })
-);
+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"),
@@ -134,6 +113,26 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks", () => ({
   useIsTablet: jest.fn(() => false),
 }));
 
+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: [
+        {
+          name: "Offline Plugin",
+          identifier: "offline-experience",
+          type: "general",
+          module: {
+            OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
+          },
+        },
+      ],
+    }),
+  };
+});
+
 const {
   allowedOrientationsForScreen,
   getOrientation,
@@ -153,19 +152,6 @@ const screenProps = {
 
 const { Screen } = require("..");
 
-const store = {
-  plugins: [
-    {
-      name: "Offline Plugin",
-      identifier: "offline-experience",
-      type: "general",
-      module: {
-        OfflineFallbackScreen: ({ children }) => <View>{children}</View>, // eslint-disable-line
-      },
-    },
-  ],
-};
-
 describe("<Screen Component />", () => {
   beforeEach(() => {
     allowedOrientationsForScreen.mockClear();
@@ -175,22 +161,14 @@ describe("<Screen Component />", () => {
 
   describe("when the navbar should show", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });
 
   describe("when the navbar should be hidden", () => {
     it("renders correctly", () => {
-      const { toJSON } = renderWithProviders(
-        <Screen {...screenProps} />,
-        store
-      );
-
+      const { toJSON } = render(<Screen {...screenProps} />);
       expect(toJSON()).toMatchSnapshot();
     });
   });