@applicaster/zapp-react-native-ui-components 15.0.0-rc.99 → 15.1.0-rc.2

package/Decorators/ZappPipesDataConnector/__tests__/ResolverSelector.test.tsx

@@ -7,15 +7,30 @@ import { UrlFeedResolver } from "../resolvers/UrlFeedResolver";
 import { NullFeedResolver } from "../resolvers/NullFeedResolver";
 
 jest.mock("../resolvers/StaticFeedResolver", () => ({
-  StaticFeedResolver: jest.fn(() => null),
+  StaticFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/UrlFeedResolver", () => ({
-  UrlFeedResolver: jest.fn(() => null),
+  UrlFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: true, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 jest.mock("../resolvers/NullFeedResolver", () => ({
-  NullFeedResolver: jest.fn(() => null),
+  NullFeedResolver: jest.fn(({ children }) =>
+    children({
+      zappPipesData: { loading: false, data: null, error: null },
+      reloadData: jest.fn(),
+    })
+  ),
 }));
 
 const testPlugin = {
@@ -52,7 +67,7 @@ describe("ResolverSelector", () => {
       expect.objectContaining({
         getStaticComponentFeed: props.getStaticComponentFeed,
         component: mockComponent,
-        children: mockChildren,
+        children: expect.any(Function),
       }),
       expect.anything()
     );
@@ -151,7 +166,10 @@ describe("ResolverSelector", () => {
     render(<ResolverSelector {...props} />);
 
     expect(StaticFeedResolver).toHaveBeenCalledWith(
-      expect.objectContaining(props),
+      expect.objectContaining({
+        ...props,
+        children: expect.any(Function),
+      }),
       expect.anything()
     );
   });
@@ -202,4 +220,193 @@ describe("ResolverSelector", () => {
     expect(UrlFeedResolver).not.toHaveBeenCalled();
     expect(NullFeedResolver).not.toHaveBeenCalled();
   });
+
+  describe("Fallback Logic", () => {
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and feedUrl is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          feedUrl: props.feedUrl,
+          component: mockComponent,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to UrlFeedResolver when StaticFeedResolver returns null and component.data.source is present", () => {
+      const componentWithSource = {
+        ...mockComponent,
+        data: {
+          source: "data-source",
+        },
+      };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: componentWithSource,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+
+      expect(UrlFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          component: componentWithSource,
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should fallback to NullFeedResolver when StaticFeedResolver returns null and no feedUrl/source is present", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(NullFeedResolver).toHaveBeenCalledWith(
+        expect.objectContaining({
+          children: mockChildren,
+        }),
+        expect.anything()
+      );
+    });
+
+    it("should NOT fallback and call children with static data when StaticFeedResolver returns data", () => {
+      const staticData = { entry: [{ id: "1" }] };
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: staticData, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            data: staticData,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with loading state when StaticFeedResolver is loading", () => {
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: true, data: null, error: null },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            loading: true,
+          }),
+        })
+      );
+    });
+
+    it("should NOT fallback and call children with error when StaticFeedResolver returns error", () => {
+      const error = new Error("Static error");
+
+      const props = {
+        getStaticComponentFeed: jest.fn(),
+        feedUrl: "https://example.com/feed",
+        component: mockComponent,
+        children: mockChildren,
+        riverId: "test-river",
+      };
+
+      (StaticFeedResolver as jest.Mock).mockImplementation(({ children }) =>
+        children({
+          zappPipesData: { loading: false, data: null, error },
+          reloadData: jest.fn(),
+        })
+      );
+
+      render(<ResolverSelector {...props} />);
+
+      expect(StaticFeedResolver).toHaveBeenCalled();
+      expect(UrlFeedResolver).not.toHaveBeenCalled();
+
+      expect(mockChildren).toHaveBeenCalledWith(
+        expect.objectContaining({
+          zappPipesData: expect.objectContaining({
+            error,
+          }),
+        })
+      );
+    });
+  });
 });

package/Decorators/ZappPipesDataConnector/__tests__/zappPipesDataConnector.test.js

@@ -3,7 +3,7 @@ import { renderWithProviders } from "@applicaster/zapp-react-native-utils/testUt
 
 import * as zappPipesRedux from "@applicaster/zapp-react-native-redux/ZappPipes";
 import configureStore from "redux-mock-store";
-import { thunk } from "redux-thunk";
+import thunk from "redux-thunk";
 
 import { zappPipesDataConnector } from "../index";
 

package/Decorators/ZappPipesDataConnector/index.tsx

@@ -2,7 +2,7 @@
 /// <reference types="@applicaster/zapp-react-native-ui-components" />
 import React from "react";
 import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
 import { ZappPipesSearchContext } from "@applicaster/zapp-react-native-ui-components/Contexts";
 import { useScreenContext } from "@applicaster/zapp-react-native-utils/reactHooks/screen/useScreenContext";
 import { ResolverSelector } from "./ResolverSelector";
@@ -23,7 +23,7 @@ export function zappPipesDataConnector(
 ) {
   return function WrappedWithZappPipesData(props: Props) {
     const { screenData } = useRoute();
-    const plugins = usePlugins();
+    const { plugins } = usePickFromState(["plugins"]);
     const screenContextData = useScreenContext();
 
     const {

package/Decorators/ZappPipesDataConnector/resolvers/StaticFeedResolver.tsx

@@ -76,7 +76,7 @@ export function StaticFeedResolver({
 
   const zappPipesDataProps = useMemo(
     () => ({
-      zappPipesData: { url, loading, data, error }, // todo: add applyItemLimit
+      zappPipesData: { url, loading, data, error },
       reloadData,
       loadNextData: undefined, // Static resolver doesn't support pagination
     }),

package/Helpers/DataSourceHelper/index.js

@@ -0,0 +1,19 @@
+import * as R from "ramda";
+
+export function itemLimitForData(entry = [], component) {
+  const itemLimitValue = Number(R.path(["rules", "item_limit"], component));
+
+  const itemLimit =
+    itemLimitValue && itemLimitValue > 0
+      ? itemLimitValue
+      : Number.MAX_SAFE_INTEGER;
+
+  const isInRange = (min, max) => R.both(R.gte(R.__, min), R.lt(R.__, max));
+
+  const entryShouldBeSliced = (entry) =>
+    isInRange(0, R.length(entry))(itemLimit);
+
+  const sliceEntriesUpToItemLimit = R.slice(0, itemLimit);
+
+  return R.when(entryShouldBeSliced, sliceEntriesUpToItemLimit)(entry);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "15.0.0-rc.99",
+  "version": "15.1.0-rc.2",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-bridge": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-redux": "15.0.0-rc.99",
-    "@applicaster/zapp-react-native-utils": "15.0.0-rc.99",
+    "@applicaster/applicaster-types": "15.1.0-rc.2",
+    "@applicaster/zapp-react-native-bridge": "15.1.0-rc.2",
+    "@applicaster/zapp-react-native-redux": "15.1.0-rc.2",
+    "@applicaster/zapp-react-native-utils": "15.1.0-rc.2",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/MasterCell/DefaultComponents/Text/utils/__tests__/withAdjustedLineHeight.test.ts

@@ -1,46 +0,0 @@
-import { PixelRatio } from "react-native";
-import { withAdjustedLineHeight } from "..";
-
-const FONT_SCALE = 1.118;
-jest.spyOn(PixelRatio, "getFontScale").mockReturnValue(FONT_SCALE);
-
-describe("withAdjustedLineHeight", () => {
-  it("with provided fontScale and styles", () => {
-    // setup
-    const styles = {
-      lineHeight: 10,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual({
-      lineHeight: styles.lineHeight * FONT_SCALE,
-    });
-  });
-
-  it("with provided fontScale and empty styles", () => {
-    // setup
-    const styles = {};
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-
-  it("with non-number lineHeight", () => {
-    // setup
-    const styles = {
-      lineHeight: NaN,
-    };
-
-    // run
-    const result = withAdjustedLineHeight(styles);
-
-    // verify
-    expect(result).toEqual(styles);
-  });
-});

package/Components/MasterCell/DefaultComponents/Text/utils/index.ts

@@ -1,21 +0,0 @@
-import { PixelRatio } from "react-native";
-import { isNil, identity } from "ramda";
-import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-// HACK - to prevent text flickering
-export const withAdjustedLineHeight = (styles) => {
-  const fontScale = PixelRatio.getFontScale();
-  const lineHeight = toNumber(styles.lineHeight);
-
-  if (isNil(lineHeight)) {
-    return styles;
-  }
-
-  return { ...styles, lineHeight: lineHeight * fontScale };
-};
-
-export const withScaledLineHeight = platformSelect({
-  ios: withAdjustedLineHeight,
-  default: identity,
-});

package/Components/PlayerContainer/ErrorDisplay/ErrorDisplay.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import * as R from "ramda";
-import { Text, TextStyle, View, ViewStyle } from "react-native";
-
-import { getLocalizations } from "@applicaster/zapp-react-native-utils/localizationUtils";
-import { getAppStylesColor } from "@applicaster/zapp-react-native-utils/stylesUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { styleKeys } from "@applicaster/zapp-react-native-utils/styleKeysUtils";
-
-type Props = {
-  styles: {};
-  error: {};
-  remoteConfigurations: { localizations: {} };
-};
-
-const defaultAppStyles = {
-  loading_error_label: {
-    color: "#aaa",
-  },
-};
-
-const textStyles = (appStyles = defaultAppStyles): TextStyle => ({
-  color: getAppStylesColor("loading_error_label", appStyles),
-  fontSize: 36,
-  textAlign: "center",
-});
-
-const errorStyles = ({ backgroundColor }): ViewStyle => ({
-  flex: 1,
-  width: "100%",
-  height: "100%",
-  justifyContent: "center",
-  alignItems: "center",
-  position: "absolute",
-  zIndex: 100,
-  backgroundColor,
-});
-
-export function ErrorDisplayComponent({
-  styles,
-  remoteConfigurations: { localizations },
-}: Props) {
-  const theme = useTheme();
-  const backgroundColor = theme?.app_background_color;
-
-  const { stream_error_message = "Cannot play stream" } = getLocalizations({
-    localizations,
-  });
-
-  const appStyles = R.prop(styleKeys.style_namespace, styles);
-
-  return (
-    <View style={errorStyles({ backgroundColor })}>
-      <Text style={textStyles(appStyles)}>{stream_error_message}</Text>
-    </View>
-  );
-}

package/Components/PlayerContainer/ErrorDisplay/index.ts

@@ -1,9 +0,0 @@
-import * as R from "ramda";
-
-import { connectToStore } from "@applicaster/zapp-react-native-redux/utils/connectToStore";
-
-import { ErrorDisplayComponent } from "./ErrorDisplay";
-
-export const ErrorDisplay = R.compose(
-  connectToStore(R.pick(["remoteConfigurations"]))
-)(ErrorDisplayComponent);

package/Components/PlayerContainer/useRestrictMobilePlayback.tsx

@@ -1,101 +0,0 @@
-import { Player } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/player";
-import NetInfo from "@react-native-community/netinfo";
-
-import { useEffect, useMemo, useRef, useState } from "react";
-import { showAlertDialog } from "@applicaster/zapp-react-native-utils/alertUtils";
-import { useTheme } from "@applicaster/zapp-react-native-utils/theme";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { log_info } from "./logger";
-
-type RestrictMobilePlaybackProps = {
-  player?: Player;
-  entry?: ZappEntry;
-  pluginConfiguration?: Record<string, string>;
-  close: () => void;
-};
-
-export const useRestrictMobilePlayback = ({
-  player,
-  entry,
-  pluginConfiguration,
-  close,
-}: RestrictMobilePlaybackProps): { isRestricted: boolean } => {
-  const dialogVisibleRef = useRef<boolean>(false);
-  const theme = useTheme();
-
-  useEffect(() => {
-    return () => {
-      if (isTV()) {
-        return;
-      }
-
-      dialogVisibleRef.current = false;
-    };
-  }, []);
-
-  const isConnectionRestricted = useMemo(() => {
-    if (isTV()) {
-      return false;
-    }
-
-    return player && entry?.extensions?.connection_restricted;
-  }, [player, entry]);
-
-  const [isRestricted, setIsRestricted] = useState<boolean>(
-    isConnectionRestricted
-  );
-
-  useEffect(() => {
-    if (!isConnectionRestricted) {
-      return;
-    }
-
-    const stopPlayer = () => {
-      log_info(
-        "Stopping player due to mobile restriction, connection_restricted: true"
-      );
-
-      player?.close();
-
-      dialogVisibleRef.current = true;
-
-      showAlertDialog({
-        title:
-          pluginConfiguration?.mobile_connection_restricted_alert_title ||
-          "Restricted Connection Type",
-        message:
-          pluginConfiguration?.mobile_connection_restricted_alert_message ||
-          "This content can only be viewed over a Wi-Fi or LAN network.",
-        okButtonText: theme.ok_button || "OK",
-        completion: () => {
-          dialogVisibleRef.current = false;
-
-          close();
-        },
-      });
-    };
-
-    return NetInfo.addEventListener((state) => {
-      if (state.type === "cellular") {
-        setIsRestricted(true);
-
-        if (dialogVisibleRef.current) {
-          return;
-        }
-
-        stopPlayer();
-      } else {
-        setIsRestricted(false);
-      }
-    });
-  }, [
-    close,
-    entry?.extensions?.connection_restricted,
-    pluginConfiguration,
-    player,
-    theme.ok_button,
-    isConnectionRestricted,
-  ]);
-
-  return { isRestricted };
-};

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

@@ -1,30 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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>
-    );
-  };
-};