@applicaster/zapp-react-native-ui-components 15.1.4 → 16.0.0-alpha.1042942411

package/Components/BackgroundImage/index.ts

@@ -1,8 +1 @@
-import { platformSelect } from "@applicaster/zapp-react-native-utils/reactUtils";
-
-export const BackgroundImage = platformSelect({
-  tvos: require("./BackgroundImage.tv.ios").BackgroundImage,
-  android_tv: require("./BackgroundImage.tv.android").BackgroundImage,
-  amazon: require("./BackgroundImage.tv.android").BackgroundImage,
-  web: require("./BackgroundImage.tv.web").BackgroundImage,
-});
+export { BackgroundImage } from "./BackgroundImage";

package/Components/BaseFocusable/index.ios.ts

@@ -22,6 +22,7 @@ type Props = {
   onFocus?: FocusManager.FocusEventCB;
   onBlur?: FocusManager.FocusEventCB;
   selected?: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class BaseFocusable<
@@ -61,10 +62,14 @@ export class BaseFocusable<
   }
 
   componentDidMount() {
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
     const component = this;
     this.node = this.ref.current;
 
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.register({
       id,
       component: component,
@@ -118,7 +123,12 @@ export class BaseFocusable<
 
   componentWillUnmount() {
     this._isMounted = false;
-    const { id } = this.props;
+    const { id, skipFocusManagerRegistration } = this.props;
+
+    if (skipFocusManagerRegistration) {
+      return;
+    }
+
     focusManager.unregister(id, { group: this.isGroup || false });
   }
 

package/Components/Cell/FocusableWrapper.tsx

@@ -10,6 +10,7 @@ type Props = {
   children: (focused: boolean) => React.ReactNode;
   onFocus: (arg1: any, index?: number) => void;
   onBlur: Callback;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export const FocusableWrapper = ({
@@ -20,6 +21,7 @@ export const FocusableWrapper = ({
   applyWrapper,
   onFocus,
   onBlur,
+  skipFocusManagerRegistration,
 }: Props) => {
   if (applyWrapper) {
     return (
@@ -34,6 +36,7 @@ export const FocusableWrapper = ({
         // @ts-ignore
         offsetUpdater={noop}
         isFocusable
+        skipFocusManagerRegistration={skipFocusManagerRegistration}
       >
         {(focused) => children(focused)}
       </Focusable>

package/Components/Cell/TvOSCellComponent.tsx

@@ -80,6 +80,7 @@ type Props = {
   componentsMapOffset: number;
   applyFocusableWrapper: boolean;
   hasFocusableInside: boolean;
+  skipFocusManagerRegistration?: boolean;
 };
 
 type State = {
@@ -194,7 +195,6 @@ class TvOSCell extends React.Component<Props, State> {
       groupId,
       component,
       index,
-      componentsMapOffset,
     } = this.props;
 
     this.setScreenLayout(componentAnchorPointY, screenLayout);
@@ -221,8 +221,7 @@ class TvOSCell extends React.Component<Props, State> {
       const totalOffset =
         headerOffset +
         toNumberWithDefaultZero(componentAnchorPointY) +
-        extraAnchorPointYOffset -
-        toNumberWithDefaultZero(componentsMapOffset) +
+        extraAnchorPointYOffset +
         componentMarginTop +
         componentPaddingTop;
 
@@ -266,6 +265,7 @@ class TvOSCell extends React.Component<Props, State> {
       behavior,
       applyFocusableWrapper,
       hasFocusableInside,
+      skipFocusManagerRegistration,
     } = this.props;
 
     const { id } = item;
@@ -291,6 +291,7 @@ class TvOSCell extends React.Component<Props, State> {
             onFocus={handleFocus}
             onBlur={onBlur || this.onBlur}
             applyWrapper={applyFocusableWrapper}
+            skipFocusManagerRegistration={skipFocusManagerRegistration}
           >
             {(focused) => (
               <CellWithFocusable
@@ -305,6 +306,7 @@ class TvOSCell extends React.Component<Props, State> {
                 focused={focused || this.props.focused}
                 behavior={behavior}
                 isFocusable={isFocusable}
+                skipFocusManagerRegistration={skipFocusManagerRegistration}
               />
             )}
           </FocusableWrapper>
@@ -327,6 +329,7 @@ class TvOSCell extends React.Component<Props, State> {
           offsetUpdater={offsetUpdater}
           style={baseCellStyles}
           isFocusable={isFocusable}
+          skipFocusManagerRegistration={skipFocusManagerRegistration}
         >
           {(focused) => (
             <FocusableCell

package/Components/CellRendererResolver/index.ts

@@ -92,7 +92,7 @@ export function CellRendererResolver({
     component,
     styles,
     cellStyles,
-    cellOptions,
+    cellOptions: { ...cellOptions, component },
     ...cellOptions, // fallback for existing plugins
   });
 }

package/Components/Focusable/Focusable.tsx

@@ -8,6 +8,8 @@ import { withFocusableContext } from "../../Contexts/FocusableGroupContext/withF
 import { StyleSheet, ViewStyle } from "react-native";
 import { AccessibilityManager } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager";
 
+import { isSearchInputId } from "@applicaster/zapp-react-native-utils/searchUtils";
+
 type Props = {
   initialFocus?: boolean;
   id: string;
@@ -106,7 +108,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseEnter() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = true;
       this.props?.handleFocus?.({ mouse: true });
 
@@ -120,7 +122,7 @@ class Focusable extends BaseFocusable<Props> {
   onMouseLeave() {
     const { id } = this.props;
 
-    if (id !== "search_input_group_id") {
+    if (!isSearchInputId(id)) {
       this.mouse = false;
       this.blur(null);
     }

package/Components/Focusable/FocusableTvOS.tsx

@@ -10,8 +10,12 @@ import {
   forceFocusableFocus,
 } from "@applicaster/zapp-react-native-utils/appUtils/focusManager/index.ios";
 import { findNodeHandle, ViewStyle } from "react-native";
+import { noop } from "@applicaster/zapp-react-native-utils/functionUtils";
 
-function noop() {}
+import {
+  emitFocused,
+  emitNativeRegistered,
+} from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 type Props = {
   id: string;
@@ -39,6 +43,7 @@ type Props = {
   hasReceivedFocus: () => void;
   offsetUpdater: (arg1: string, arg2: number) => number;
   style: ViewStyle;
+  skipFocusManagerRegistration?: boolean;
 };
 
 export class Focusable extends BaseFocusable<Props> {
@@ -53,6 +58,7 @@ export class Focusable extends BaseFocusable<Props> {
     this.nextFocusableReactTags = {};
     this.preferredFocus = this.preferredFocus.bind(this);
     this.measureView = this.measureView.bind(this);
+    this.onRegistered = this.onRegistered.bind(this);
   }
 
   /**
@@ -84,6 +90,9 @@ export class Focusable extends BaseFocusable<Props> {
       });
     }
 
+    const id: string = nativeEvent.itemID;
+    emitFocused(id);
+
     onFocus(nativeEvent);
   }
 
@@ -169,6 +178,13 @@ export class Focusable extends BaseFocusable<Props> {
     });
   }
 
+  onRegistered({ nativeEvent }) {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: false });
+  }
+
   render() {
     const {
       children,
@@ -203,6 +219,7 @@ export class Focusable extends BaseFocusable<Props> {
         focusable={isFocusable}
         {...this.nextFocusableReactTags}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {typeof children === "function" ? children(focused) : children}
       </FocusableItemNative>

package/Components/Focusable/__tests__/__snapshots__/FocusableTvOS.test.tsx.snap

@@ -5,6 +5,7 @@ exports[`FocusableTvOS should render correctly 1`] = `
   groupId={null}
   itemId={null}
   onLayout={[Function]}
+  onRegistered={[Function]}
   onViewBlur={[Function]}
   onViewFocus={[Function]}
   onViewPress={[Function]}

package/Components/FocusableGroup/FocusableTvOS.tsx

@@ -3,6 +3,10 @@ import { FocusableGroupNative } from "@applicaster/zapp-react-native-ui-componen
 import { BaseFocusable } from "@applicaster/zapp-react-native-ui-components/Components/BaseFocusable";
 // TODO: Enable when will be feature flags
 // import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+import { LayoutContext } from "@applicaster/zapp-react-native-tvos-app/Context/LayoutContext";
+import { useRoute } from "@applicaster/zapp-react-native-utils/reactHooks/navigation/useRoute";
+import { isScreenPlayable } from "@applicaster/zapp-react-native-utils/navigationUtils/itemTypes";
+import { emitNativeRegistered } from "@applicaster/zapp-react-native-utils/appUtils/focusManagerAux/utils/utils.ios";
 
 // TODO: Enable when will be feature flags
 // const { log_verbose } = createLogger({
@@ -35,9 +39,16 @@ type Props = {
   screenData: { screenId: string; parentScreenId: string };
 };
 
-export class FocusableGroup extends BaseFocusable<Props> {
+class FocusableGroupComponent extends BaseFocusable<Props> {
   public readonly isGroup: boolean = true;
 
+  onRegistered = ({ nativeEvent }) => {
+    const groupId = nativeEvent?.groupId;
+    const id = nativeEvent?.itemId;
+
+    emitNativeRegistered({ id, groupId, isGroup: true });
+  };
+
   render() {
     const {
       children,
@@ -72,9 +83,27 @@ export class FocusableGroup extends BaseFocusable<Props> {
         onGroupBlur={onGroupBlur}
         style={style}
         {...otherProps}
+        onRegistered={this.onRegistered}
       >
         {children}
       </FocusableGroupNative>
     );
   }
 }
+
+export const withFocusDisabled = (Component) => {
+  return function WithFocusDisabled(props) {
+    // @ts-ignore
+    const { screenFocusBlocked } = React.useContext(LayoutContext.ReactContext);
+
+    const { pathname } = useRoute();
+
+    const isPlayerPresented = isScreenPlayable(pathname);
+
+    const blockScreenFocus = isPlayerPresented === false && screenFocusBlocked;
+
+    return <Component {...props} isFocusDisabled={blockScreenFocus} />;
+  };
+};
+
+export const FocusableGroup = withFocusDisabled(FocusableGroupComponent);

package/Components/GeneralContentScreen/GeneralContentScreenHookAdapter.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { GeneralContentScreen } from "./GeneralContentScreen";
+import { HookContentFocusGroup } from "./hookFocus";
+import { runInBackground } from "./hookAdapter/runInBackground";
+import { log_error } from "./hookAdapter/logger";
+
+type HookComponentProps = HookPluginProps & {
+  configuration?: unknown;
+};
+
+function GeneralContentScreenHookComponent(props: HookComponentProps) {
+  const { hookPlugin, focused, parentFocus } = props;
+
+  if (!hookPlugin?.screen_id) {
+    log_error(
+      "GeneralContentScreenHookAdapter: This component should only be used as a hook, but no hookPlugin was provided."
+    );
+
+    return null;
+  }
+
+  return (
+    <HookContentFocusGroup>
+      <GeneralContentScreen
+        screenId={hookPlugin.screen_id}
+        isScreenWrappedInContainer={false}
+        focused={focused}
+        parentFocus={parentFocus}
+      />
+    </HookContentFocusGroup>
+  );
+}
+
+export const GeneralContentScreenHookAdapter = {
+  isFlowBlocker: () => true,
+  presentFullScreen: true,
+  Component: GeneralContentScreenHookComponent,
+  runInBackground,
+};

package/Components/GeneralContentScreen/__tests__/GeneralContentScreenHookAdapter.test.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { GeneralContentScreenHookAdapter } from "../GeneralContentScreenHookAdapter";
+import { log_error } from "../hookAdapter/logger";
+
+const mockScreenSpy = jest.fn();
+
+jest.mock("../GeneralContentScreen", () => ({
+  GeneralContentScreen: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockScreenSpy(props);
+
+    return <View testID="general-content-screen" />;
+  },
+}));
+
+jest.mock("../hookAdapter/runInBackground", () => ({
+  runInBackground: jest.fn(),
+}));
+
+jest.mock("../hookAdapter/logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const { Component } = GeneralContentScreenHookAdapter;
+
+describe("GeneralContentScreenHookAdapter", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("renders GeneralContentScreen with the hook plugin screen id", () => {
+    const { getByTestId } = render(
+      <Component hookPlugin={{ screen_id: "screen-1" }} focused />
+    );
+
+    expect(getByTestId("general-content-screen")).toBeDefined();
+
+    expect(mockScreenSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        screenId: "screen-1",
+        isScreenWrappedInContainer: false,
+      })
+    );
+  });
+
+  it("renders nothing and logs an error when hookPlugin is missing", () => {
+    const { toJSON } = render(<Component />);
+
+    expect(toJSON()).toBeNull();
+    expect(mockScreenSpy).not.toHaveBeenCalled();
+    expect(log_error).toHaveBeenCalled();
+  });
+
+  it("renders nothing when hookPlugin has no screen_id", () => {
+    const { toJSON } = render(<Component hookPlugin={{}} />);
+
+    expect(toJSON()).toBeNull();
+  });
+});

package/Components/GeneralContentScreen/__tests__/HookContentFocusGroup.web.test.tsx

@@ -0,0 +1,91 @@
+import React from "react";
+import { render } from "@testing-library/react-native";
+import { View } from "react-native";
+
+import { HookContentFocusGroup } from "../hookFocus/index.web";
+
+const mockFocusableGroupSpy = jest.fn();
+const mockUseInitialFocusSpy = jest.fn();
+
+const mockModalState = { isRunningInBackground: false };
+
+jest.mock("../../FocusableGroup", () => ({
+  FocusableGroup: (props) => {
+    const React = require("react");
+    const { View } = require("react-native");
+
+    mockFocusableGroupSpy(props);
+
+    return <View testID="focusable-group">{props.children}</View>;
+  },
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/navigation", () => ({
+  useContentId: () => "quick-brick-content___route",
+  useNavbarId: () => "quick-brick-navbar___route",
+  usePathname: () => "hooks-modal/profile-select",
+}));
+
+jest.mock("../../Screen/TV/hooks", () => ({
+  useInitialFocus: () => mockUseInitialFocusSpy(),
+}));
+
+jest.mock("../../../Contexts/ZappHookModalContext", () => ({
+  useZappHookModalStore: (selector) => selector(mockModalState),
+}));
+
+describe("HookContentFocusGroup (web)", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockModalState.isRunningInBackground = false;
+  });
+
+  it("wraps content in a preferred-focus content group and triggers initial focus when presented full screen", () => {
+    const { getByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("focusable-group")).toBeDefined();
+    expect(getByTestId("child")).toBeDefined();
+    expect(mockUseInitialFocusSpy).toHaveBeenCalledTimes(1);
+
+    expect(mockFocusableGroupSpy).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: "quick-brick-content___route",
+        groupId: "hooks-modal/profile-select",
+        nextFocusUp: "quick-brick-navbar___route",
+        preferredFocus: true,
+        shouldUsePreferredFocus: true,
+      })
+    );
+  });
+
+  it("injects the content group id into the wrapped child so its cells register under it", () => {
+    render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    const child = mockFocusableGroupSpy.mock.calls[0][0].children;
+
+    expect(child.props.groupId).toBe("quick-brick-content___route");
+  });
+
+  it("renders the child without focus handling when running in background (not full screen)", () => {
+    mockModalState.isRunningInBackground = true;
+
+    const { getByTestId, queryByTestId } = render(
+      <HookContentFocusGroup>
+        <View testID="child" />
+      </HookContentFocusGroup>
+    );
+
+    expect(getByTestId("child")).toBeDefined();
+    expect(queryByTestId("focusable-group")).toBeNull();
+    expect(mockUseInitialFocusSpy).not.toHaveBeenCalled();
+    expect(mockFocusableGroupSpy).not.toHaveBeenCalled();
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/__tests__/networkService.test.ts

@@ -0,0 +1,74 @@
+import { requestToSkipHook } from "../networkService";
+
+const mockCall = jest.fn();
+const mockBuildAxiosRequest = jest.fn();
+let mockHelper: Record<string, any>;
+
+jest.mock("@applicaster/zapp-pipes-v2-client", () => ({
+  RequestBuilder: jest.fn().mockImplementation(() => ({
+    setEntryContext: jest.fn().mockReturnThis(),
+    setScreenContext: jest.fn().mockReturnThis(),
+    setUrl: jest.fn().mockReturnThis(),
+    buildAxiosRequest: (...args) => mockBuildAxiosRequest(...args),
+    call: (...args) => mockCall(...args),
+  })),
+  PipesClientResponseHelper: jest.fn().mockImplementation(() => mockHelper),
+}));
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+const dataSource = { source: "https://skip-endpoint", mapping: {} };
+const payload = { id: "entry-1" };
+
+describe("requestToSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockBuildAxiosRequest.mockResolvedValue({ url: "https://skip-endpoint" });
+    mockCall.mockResolvedValue({});
+
+    mockHelper = {
+      error: null,
+      statusCode: 200,
+      responseData: null,
+      getLogsData: jest.fn(() => ({})),
+    };
+  });
+
+  it("returns true when the endpoint returns a non-empty body", async () => {
+    mockHelper.responseData = true;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("treats any truthy payload as skip (hook-screen-wrapper contract)", async () => {
+    mockHelper.responseData = { entry: [] };
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(true);
+  });
+
+  it("returns false when the endpoint returns an empty body", async () => {
+    mockHelper.responseData = null;
+
+    await expect(requestToSkipHook(dataSource, payload)).resolves.toBe(false);
+  });
+
+  it("throws when the response contains an error", async () => {
+    mockHelper.error = new Error("server error");
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "server error"
+    );
+  });
+
+  it("throws when the request itself fails", async () => {
+    mockCall.mockRejectedValue(new Error("network down"));
+
+    await expect(requestToSkipHook(dataSource, payload)).rejects.toThrow(
+      "network down"
+    );
+  });
+});