@applicaster/zapp-react-native-ui-components 16.0.0-rc.2 → 16.0.0-rc.20

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

@@ -0,0 +1,124 @@
+import {
+  parseKeyEntries,
+  getKeyToSkipHook,
+  shouldSkipHook,
+} from "../validationHelper";
+
+const mockSessionGetItem = jest.fn();
+const mockLocalGetItem = jest.fn();
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage",
+  () => ({
+    sessionStorage: { getItem: (...args) => mockSessionGetItem(...args) },
+  })
+);
+
+jest.mock(
+  "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage",
+  () => ({
+    localStorage: { getItem: (...args) => mockLocalGetItem(...args) },
+  })
+);
+
+jest.mock("../logger", () => ({
+  log_debug: jest.fn(),
+  log_error: jest.fn(),
+  log_info: jest.fn(),
+}));
+
+describe("parseKeyEntries", () => {
+  it("parses a namespaced key as namespace.key", () => {
+    expect(parseKeyEntries("myNamespace.myKey")).toEqual([
+      { namespace: "myNamespace", key: "myKey" },
+    ]);
+  });
+
+  it("treats everything before the last dot as the namespace", () => {
+    expect(parseKeyEntries("com.applicaster.feature.someKey")).toEqual([
+      { namespace: "com.applicaster.feature", key: "someKey" },
+    ]);
+  });
+
+  it("falls back to the default namespace when there is no dot", () => {
+    expect(parseKeyEntries("plainKey")).toEqual([
+      { namespace: "applicaster.v2", key: "plainKey" },
+    ]);
+  });
+
+  it("splits comma-separated entries, trimming whitespace and empty items", () => {
+    expect(parseKeyEntries(" ns1.key1 , , ns2.key2 ,")).toEqual([
+      { namespace: "ns1", key: "key1" },
+      { namespace: "ns2", key: "key2" },
+    ]);
+  });
+});
+
+describe("getKeyToSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns the session storage value when present, without hitting local storage", async () => {
+    mockSessionGetItem.mockResolvedValue("session-value");
+
+    const value = await getKeyToSkipHook("myKey", "myNamespace");
+
+    expect(value).toBe("session-value");
+    expect(mockSessionGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+    expect(mockLocalGetItem).not.toHaveBeenCalled();
+  });
+
+  it("falls back to local storage when session storage is empty", async () => {
+    mockSessionGetItem.mockResolvedValue(null);
+    mockLocalGetItem.mockResolvedValue("local-value");
+
+    const value = await getKeyToSkipHook("myKey", "myNamespace");
+
+    expect(value).toBe("local-value");
+    expect(mockLocalGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+  });
+});
+
+describe("shouldSkipHook", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockSessionGetItem.mockResolvedValue(null);
+    mockLocalGetItem.mockResolvedValue(null);
+  });
+
+  it("returns false when no condition is provided", async () => {
+    await expect(shouldSkipHook(undefined)).resolves.toBe(false);
+    await expect(shouldSkipHook("")).resolves.toBe(false);
+    await expect(shouldSkipHook("   ")).resolves.toBe(false);
+  });
+
+  it("returns true when a key is found in storage, querying with parsed namespace and key", async () => {
+    mockSessionGetItem.mockResolvedValue("value");
+
+    await expect(shouldSkipHook("myNamespace.myKey")).resolves.toBe(true);
+    expect(mockSessionGetItem).toHaveBeenCalledWith("myKey", "myNamespace");
+  });
+
+  it("returns true when any of the comma-separated keys is found", async () => {
+    mockLocalGetItem.mockImplementation((key) =>
+      Promise.resolve(key === "key2" ? "value" : null)
+    );
+
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(true);
+  });
+
+  it("returns false when none of the keys are found", async () => {
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(false);
+    expect(mockSessionGetItem).toHaveBeenCalledTimes(2);
+    expect(mockLocalGetItem).toHaveBeenCalledTimes(2);
+  });
+
+  it("continues to the next key when a storage read throws", async () => {
+    mockSessionGetItem
+      .mockRejectedValueOnce(new Error("storage error"))
+      .mockResolvedValueOnce("value");
+
+    await expect(shouldSkipHook("ns1.key1, ns2.key2")).resolves.toBe(true);
+  });
+});

package/Components/GeneralContentScreen/hookAdapter/logger.ts

@@ -0,0 +1,6 @@
+import { createLogger } from "@applicaster/zapp-react-native-utils/logger";
+
+export const { log_debug, log_error, log_info } = createLogger({
+  category: "runInBackground",
+  subsystem: "GeneralContentScreenHookAdapter",
+});

package/Components/GeneralContentScreen/hookAdapter/networkService.ts

@@ -0,0 +1,53 @@
+import {
+  PipesClientResponseHelper,
+  RequestBuilder,
+} from "@applicaster/zapp-pipes-v2-client";
+import { log_debug, log_error } from "./logger";
+
+export const requestToSkipHook = async (
+  dataSource: ZappDataSource,
+  payload: ZappEntry
+): Promise<boolean> => {
+  try {
+    const requestBuilder = new RequestBuilder()
+      .setEntryContext(payload)
+      // @ts-ignore: empty screen context is acceptable for this request
+      .setScreenContext({})
+      .setUrl(dataSource.source, dataSource.mapping);
+
+    const request = await requestBuilder.buildAxiosRequest();
+
+    log_debug(
+      `requestToSkipHook: Request built for source: ${
+        request?.url || dataSource.source
+      }`,
+      { ...request, source: dataSource.source }
+    );
+
+    const responseObject = await requestBuilder.call<boolean>();
+    const responseHelper = new PipesClientResponseHelper(responseObject);
+
+    const error = responseHelper.error;
+    const logData = responseHelper.getLogsData();
+
+    if (error) {
+      log_error(`requestToSkipHook: Error: ${error.message}`, {
+        response: logData,
+      });
+
+      throw error;
+    }
+
+    log_debug(
+      `requestToSkipHook: Request received successfully. Status: ${responseHelper.statusCode}`,
+      { response: logData }
+    );
+
+    // Non-empty body = skip the hook (same contract as hook-screen-wrapper)
+    return Boolean(responseHelper.responseData);
+  } catch (error) {
+    log_error(`requestToSkipHook: Error: ${error.message}`, { error });
+
+    throw error;
+  }
+};

package/Components/GeneralContentScreen/hookAdapter/runInBackground.ts

@@ -0,0 +1,48 @@
+import { shouldSkipHook } from "./validationHelper";
+import { requestToSkipHook } from "./networkService";
+import { log_debug, log_error } from "./logger";
+
+/**
+ * Headless pre-hook for the General Content Screen. `configuration` is the
+ * Hook object with the screen merged in; skip-hook fields live under `rules`.
+ */
+export const runInBackground = async (
+  item,
+  callback,
+  configuration,
+  presentUI
+) => {
+  try {
+    const skipHookIfKeysExist = configuration?.rules?.skip_hook_storage_key;
+
+    if (skipHookIfKeysExist) {
+      const shouldSkip = await shouldSkipHook(skipHookIfKeysExist);
+
+      if (shouldSkip) {
+        log_debug(
+          `runInBackground: Storage key found: ${skipHookIfKeysExist}. Skipping hook.`
+        );
+
+        return callback({ success: true, error: null, payload: item });
+      }
+    }
+
+    const skipHookEndpoint = configuration?.rules?.skip_hook_endpoint;
+
+    if (skipHookEndpoint?.source) {
+      const success = await requestToSkipHook(skipHookEndpoint, item);
+
+      if (success) {
+        log_debug(
+          "runInBackground: Network call forced to finish hook. Skipping hook."
+        );
+
+        return callback({ success: true, error: null, payload: item });
+      }
+    }
+  } catch (error) {
+    log_error(`runInBackground: Error: ${error.message}`);
+  }
+
+  return presentUI();
+};

package/Components/GeneralContentScreen/hookAdapter/validationHelper.ts

@@ -0,0 +1,72 @@
+import { getNamespaceAndKey } from "@applicaster/zapp-react-native-utils/appUtils/contextKeysManager/utils";
+import { localStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/LocalStorage";
+import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
+import { log_error, log_info } from "./logger";
+
+type ParseKey = { key: string; namespace?: string };
+
+export function parseKeyEntries(input: string): ParseKey[] {
+  return input.split(",").flatMap((item) => {
+    const trimmed = item.trim();
+
+    return trimmed ? getNamespaceAndKey(trimmed) : [];
+  });
+}
+
+export const getKeyToSkipHook = async (key: string, namespace?: string) => {
+  const value = await sessionStorage.getItem(key, namespace);
+
+  if (value) {
+    return value;
+  }
+
+  return await localStorage.getItem(key, namespace);
+};
+
+export const shouldSkipHook = async (
+  skipHookIfKeysExist?: string
+): Promise<boolean> => {
+  if (!skipHookIfKeysExist?.trim()) {
+    log_info("shouldSkipHook: No skipping condition provided");
+
+    return false;
+  }
+
+  const keyEntries = parseKeyEntries(skipHookIfKeysExist);
+
+  if (keyEntries.length === 0) {
+    log_info("shouldSkipHook: No valid keys provided");
+
+    return false;
+  }
+
+  for (const entry of keyEntries) {
+    try {
+      const value = await getKeyToSkipHook(entry.key, entry.namespace);
+
+      if (value) {
+        log_info(
+          `shouldSkipHook: Hook will be skipped due to: ${
+            entry.namespace ?? ""
+          } ${entry.key}. Finishing hook flow`
+        );
+
+        return true;
+      }
+    } catch (error) {
+      log_error(
+        `shouldSkipHook: Error: ${error.message} checking key: ${
+          entry.namespace ?? ""
+        } ${entry.key}`,
+        { error }
+      );
+    }
+  }
+
+  log_info(
+    // eslint-disable-next-line max-len
+    "shouldSkipHook: No skipping condition met, none of the provided keys found in storage, proceeding with hook"
+  );
+
+  return false;
+};

package/Components/GeneralContentScreen/hookFocus/index.tsx

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * On native platforms the river `ComponentsMap` registers its own initial focus,
+ * so a hook-presented general content screen needs no extra focus wrapper here.
+ * The web counterpart (`index.web.tsx`) recreates the content focus group that
+ * the `River` wrapper would normally provide.
+ */
+export const HookContentFocusGroup = ({ children }: Props) => <>{children}</>;

package/Components/GeneralContentScreen/hookFocus/index.web.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { StyleSheet } from "react-native";
+import { shallow } from "zustand/shallow";
+
+import { FocusableGroup } from "../../FocusableGroup";
+import {
+  useContentId,
+  useNavbarId,
+  usePathname,
+} from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { useZappHookModalStore } from "../../../Contexts/ZappHookModalContext";
+
+import { useInitialFocus } from "../../Screen/TV/hooks";
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+});
+
+type Props = {
+  children: React.ReactElement;
+};
+
+/**
+ * A general content screen presented as a full-screen hook is rendered straight
+ * through `ComponentsMap`, bypassing the web `River` wrapper. That wrapper is what
+ * normally creates the `quick-brick-content` FocusableGroup (with `preferredFocus`)
+ * the focus manager relies on and what lets initial focus land on the content.
+ *
+ * Without it the hook screen renders but nothing is focusable on web TV. This
+ * recreates that content group and triggers initial focus, mirroring `River`.
+ */
+const FocusedHookContent = ({ children }: Props) => {
+  const contentId = useContentId();
+  const navbarId = useNavbarId();
+  const pathname = usePathname();
+
+  useInitialFocus();
+
+  return (
+    <FocusableGroup
+      id={contentId}
+      // Nest under the hook-modal route so the focus manager treats this as the
+      // active screen's content node; `useInitialFocus` targets the same route.
+      groupId={pathname}
+      nextFocusUp={navbarId}
+      preferredFocus
+      shouldUsePreferredFocus
+      style={styles.container}
+    >
+      {React.cloneElement(children, { groupId: contentId })}
+    </FocusableGroup>
+  );
+};
+
+export const HookContentFocusGroup = ({ children }: Props) => {
+  const isRunningInBackground = useZappHookModalStore(
+    (state) => state.isRunningInBackground,
+    shallow
+  );
+
+  // A hook presented full screen (either as a `/hooks/<id>` screen or a
+  // full-screen modal) needs the content focus group. Only background runs,
+  // which render invisibly, must be left alone so they don't steal focus.
+  if (isRunningInBackground) {
+    return <>{children}</>;
+  }
+
+  return <FocusedHookContent>{children}</FocusedHookContent>;
+};

package/Components/GeneralContentScreen/index.ts

@@ -1 +1,3 @@
 export { GeneralContentScreen } from "./GeneralContentScreen";
+
+export { GeneralContentScreenHookAdapter } from "./GeneralContentScreenHookAdapter";

package/Components/Layout/TV/ScreenContainer.tsx

@@ -129,6 +129,11 @@ export const ScreenContainer = React.memo(function ScreenContainer({
     []
   );
 
+  // 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 [navBarReady, setNavBarReady] = React.useState(false);
 
   const navBarContainer = (

package/Components/Layout/TV/__tests__/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,6 @@
 
 exports[`Layout TV renders 1`] = `
 <View
-  backgroundColor="#000000"
   testID="background-component"
 >
   <View

package/Components/Layout/TV/index.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
+import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 import { LayoutContainer } from "./LayoutContainer";
 import { ScreenContainer } from "./ScreenContainer";
@@ -9,8 +10,6 @@ import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { PathnameContext } from "../../../Contexts/PathnameContext";
 import { ScreenDataContext } from "../../../Contexts/ScreenDataContext";
 import { ScreenContextProvider } from "../../../Contexts/ScreenContext";
-import { LayoutBackground } from "./LayoutBackground";
-import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
   NavBar: React.ComponentType<any>;
@@ -39,7 +38,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
   return (
     <LayoutContainer>
       <ScreenLayoutContextProvider>
-        <LayoutBackground Background={Components.Background}>
+        <Components.Background>
           <ScreenDataContext.Provider value={navigator.data}>
             <PathnameContext.Provider value={navigator.currentRoute}>
               <ScreenContextProvider pathname={navigator.currentRoute}>
@@ -52,7 +51,7 @@ const Layout = ({ Components, ComponentsExtraProps, children }: Props) => {
               </ScreenContextProvider>
             </PathnameContext.Provider>
           </ScreenDataContext.Provider>
-        </LayoutBackground>
+        </Components.Background>
       </ScreenLayoutContextProvider>
     </LayoutContainer>
   );

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

@@ -4,7 +4,6 @@ import { useAppSelector } from "@applicaster/zapp-react-native-redux/hooks";
 
 import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
 import { StackNavigator } from "../../Navigator";
-import { LayoutBackground } from "./LayoutBackground";
 import { selectAppReady } from "@applicaster/zapp-react-native-redux";
 
 type Components = {
@@ -25,9 +24,9 @@ const Layout = ({ Components }: Props) => {
 
   return (
     <ScreenLayoutContextProvider>
-      <LayoutBackground Background={Components.Background}>
+      <Components.Background>
         <StackNavigator Components={Components} />
-      </LayoutBackground>
+      </Components.Background>
     </ScreenLayoutContextProvider>
   );
 };

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -37,13 +37,16 @@ function getAssetValue(asset, flavour, fallbackAsset = null) {
     return null;
   }
 
-  if (typeof asset === "string") return asset;
+  if (typeof asset === "string") return fallbackAsset || asset;
 
   if (Array.isArray(asset)) {
     const flavourIndex = Number(flavour.replace("flavour_", ""));
-    if (flavour && flavourIndex > -1) return asset[flavourIndex - 1];
 
-    return asset[0];
+    if (flavour && flavourIndex > -1) {
+      return fallbackAsset || asset[flavourIndex - 1];
+    }
+
+    return fallbackAsset || asset[0];
   }
 
   return asset.src || fallbackAsset;
@@ -109,13 +112,21 @@ export const ActionButton = React.memo(function ActionButtonComponent(
         <Image
           fadeDuration={0}
           style={asset?.style || props?.style}
-          uri={getAssetValue(actionState.asset, flavour, asset?.src)}
+          uri={getAssetValue(
+            actionState.asset,
+            flavour,
+            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
+          )}
           {...asset?.props}
         />
       ) : (
         <AssetComponent
           flavour={flavour}
-          asset={getAssetValue(asset, flavour)}
+          asset={getAssetValue(
+            asset,
+            flavour,
+            actionState.state === 1 ? asset?.src.active : asset?.src.inactive
+          )}
           cellUUID={cellUUID}
           {...(props?.extraProps ?? {})}
         />

package/Components/MasterCell/DefaultComponents/ButtonContainerView/index.tsx

@@ -8,7 +8,7 @@ export function ButtonContainerView({
   children,
 }: ContainerProps) {
   return (
-    <View style={style}>
+    <View style={style} pointerEvents="box-none">
       <View style={contentStyle}>{children}</View>
     </View>
   );

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -265,14 +265,12 @@ const PlayerContainerComponent = (props: Props) => {
     navigator.goBack();
   }, [isModal, state.playerId, showNavBar, navigator]);
 
-  const pluginConfiguration = React.useMemo(() => {
-    return (
-      playerManager.getPluginConfiguration() ||
-      R.prop("__plugin_configuration", Player)
-    );
-  }, [playerManager.isRegistered()]);
+  const pluginConfiguration = React.useMemo(
+    () => player?.getPluginConfiguration(),
+    [player]
+  );
 
-  const playEntry = (entry) => navigator.replaceTop(entry, { mode });
+  const playEntry = (entry: ZappEntry) => navigator.replaceTop(entry, { mode });
 
   const onPlayNextPerformNextVideoPlay = React.useCallback(() => {
     if (!playNextOverlayState.entry) {
@@ -468,6 +466,8 @@ const PlayerContainerComponent = (props: Props) => {
     if (isModal && mode === VideoModalMode.MAXIMIZED) {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
+      } else {
+        navigator.minimiseVideoModal();
       }
     }