@applicaster/zapp-react-native-ui-components 16.0.0-alpha.5803191443 → 16.0.0-alpha.6466900632

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/MasterCell/DefaultComponents/ActionButton.tsx

@@ -4,7 +4,6 @@ import { TouchableOpacity, ViewStyle } from "react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
 import Image from "./Image";
-
 type Props = {
   item: ZappEntry | ZappFeed;
   flavour?: "flavour_1" | "flavour_2";
@@ -13,7 +12,7 @@ type Props = {
     src: {
       active: string;
       inactive: string;
-    };
+    } & Record<string, string>;
     style: {};
     type: "Image" | "Svg" | "Lottie";
   };
@@ -33,21 +32,21 @@ function isStringAsset(asset) {
   return typeof asset === "string" || Array.isArray(asset);
 }
 
-/** return asset based on the asset, flavour, and fallbackAsset
- *  usully fallback asset is set on cell configuration, while the asset is configured on action plugin configuration
- */
 function getAssetValue(asset, flavour, fallbackAsset = null) {
   if (!asset) {
     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;
@@ -64,33 +63,26 @@ export const ActionButton = React.memo(function ActionButtonComponent(
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
 
-  const getActionEntryState = useCallback(() => {
-    return actionContext.initialEntryState(item, {
-      fallbackAssetSrc: asset?.src,
-    });
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-  }, [actionContext, item?.id, asset?.src]);
-
   // Note: in theory initialization is not needed anymore, we are using useEffect
   const [actionState, setActionState] = React.useState(
-    actionDisabled || !actionContext ? null : getActionEntryState()
+    actionDisabled || !actionContext
+      ? null
+      : actionContext.initialEntryState(item)
   );
 
   useEffect(() => {
     if (!((actionDisabled || !actionContext) && actionState !== null)) {
-      setActionState(getActionEntryState());
+      setActionState(actionContext.initialEntryState(item));
     }
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-  }, [actionDisabled, item?.id, actionContext, getActionEntryState]);
+  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
-      updateState: () => {
-        setActionState(getActionEntryState());
+      updateState: (state) => {
+        setActionState(state);
       },
     });
-    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
-  }, [actionContext, item?.id, getActionEntryState]);
+  }, [actionState, actionContext?.state, item?.id]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
@@ -120,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/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

@@ -21,7 +21,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";
@@ -157,6 +157,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 +174,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/VideoLive/LiveImageManager.ts

@@ -624,48 +624,7 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
       return this._preparePromise;
     }
 
-    this._preparePromise = (async (): Promise<boolean> => {
-      // 1. Run hooks if configured
-      let entry = this.factoryConfig.entry;
-
-      if (this.preloadHooks?.length) {
-        const result = await executePreloadHooks({
-          preloadHooks: this.preloadHooks,
-          entry,
-        });
-
-        if (result) {
-          this.processedEntry = result;
-          entry = result;
-        } else {
-          return false;
-        }
-      }
-
-      // 2. Create the player with the correct entry
-      const factoryItem = playerFactory({
-        player: this.factoryConfig.player,
-        playerId: this.factoryConfig.playerId,
-        autoplay: false,
-        entry,
-        muted: this.initiallyMuted,
-        playerPluginId: this.factoryConfig.playerPluginId,
-        screenConfig: this.factoryConfig.screenConfig,
-        playerRole: PlayerRole.Cell,
-      });
-
-      if (!factoryItem) {
-        throw new Error("Player factory returned null");
-      }
-
-      this.player = factoryItem.controller;
-      this.component = factoryItem.Component;
-
-      // 3. Register callbacks — player now exists
-      this.player.addListener({ id: "live-image", listener: this });
-
-      return true;
-    })()
+    this._preparePromise = this.createPreparedPlayer()
       .then((result) => {
         this._preparePromise = null;
 
@@ -685,6 +644,45 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
     return this._preparePromise;
   }
 
+  private async createPreparedPlayer(): Promise<boolean> {
+    let entry = this.factoryConfig.entry;
+
+    if (this.preloadHooks?.length) {
+      const result = await executePreloadHooks({
+        preloadHooks: this.preloadHooks,
+        entry,
+      });
+
+      if (!result) return false;
+
+      this.processedEntry = result;
+      entry = result;
+    }
+
+    const factoryItem = await playerFactory({
+      player: this.factoryConfig.player,
+      playerId: this.factoryConfig.playerId,
+      autoplay: false,
+      entry,
+      muted: this.initiallyMuted,
+      playerPluginId: this.factoryConfig.playerPluginId,
+      screenConfig: this.factoryConfig.screenConfig,
+      playerRole: PlayerRole.Cell,
+    });
+
+    if (!factoryItem) {
+      throw new Error(
+        `Player factory returned null (playerId: ${this.factoryConfig.playerId}, playerPluginId: ${this.factoryConfig.playerPluginId})`
+      );
+    }
+
+    this.player = factoryItem.controller;
+    this.component = factoryItem.Component;
+    this.player.addListener({ id: "live-image", listener: this });
+
+    return true;
+  }
+
   public getPlayer = (): Player | null => {
     return this.player;
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-alpha.5803191443",
+  "version": "16.0.0-alpha.6466900632",
   "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": "16.0.0-alpha.5803191443",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.5803191443",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.5803191443",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.5803191443",
+    "@applicaster/applicaster-types": "16.0.0-alpha.6466900632",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.6466900632",
+    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.6466900632",
+    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.6466900632",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",

package/Components/MasterCell/DefaultComponents/__tests__/ActionButton.test.tsx

@@ -1,156 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { act, fireEvent, render } from "@testing-library/react-native";
-import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
-
-import { ActionButton } from "../ActionButton";
-
-jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
-  useActions: jest.fn(),
-}));
-
-jest.mock("../Image", () => {
-  const React = require("react");
-  const { Text } = require("react-native");
-
-  return {
-    __esModule: true,
-    default: ({ uri }: { uri: string }) =>
-      React.createElement(Text, { testID: "action-button-image" }, uri),
-  };
-});
-
-const mockUseActions = useActions as jest.Mock;
-
-const item = { id: "entry-1" } as ZappEntry;
-
-const fallbackAsset = {
-  props: {},
-  src: {
-    active: "cell-active.png",
-    inactive: "cell-inactive.png",
-  },
-  style: {},
-  type: "Image" as const,
-};
-
-function renderActionButton(actionContext: any, props = {}) {
-  mockUseActions.mockReturnValue(actionContext);
-
-  return render(
-    <ActionButton
-      item={item}
-      action={{ identifier: "test-action" }}
-      asset={fallbackAsset}
-      flavour="flavour_1"
-      style={{ width: 40, height: 40 }}
-      testID="action-button"
-      {...props}
-    />
-  );
-}
-
-describe("ActionButton", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("passes cell fallback assets to initialEntryState", () => {
-    const actionContext = {
-      initialEntryState: jest.fn(() => ({ asset: ["action-1", "action-2"] })),
-      invokeAction: jest.fn(),
-    };
-
-    renderActionButton(actionContext);
-
-    expect(actionContext.initialEntryState).toHaveBeenCalledWith(item, {
-      fallbackAssetSrc: fallbackAsset.src,
-    });
-  });
-
-  it("refreshes entry state when invokeAction calls updateState", () => {
-    let stateAsset = ["initial-1.png", "initial-2.png"];
-
-    const actionContext = {
-      initialEntryState: jest.fn(() => ({ asset: stateAsset })),
-      invokeAction: jest.fn((_entry, options) => {
-        stateAsset = ["recomputed-1.png", "recomputed-2.png"];
-        options.updateState({ asset: ["ignored-1.png", "ignored-2.png"] });
-      }),
-    };
-
-    const { getByTestId, getByText, queryByText } =
-      renderActionButton(actionContext);
-
-    fireEvent.press(getByTestId("action-button"));
-
-    expect(actionContext.invokeAction).toHaveBeenCalledWith(
-      item,
-      expect.objectContaining({ updateState: expect.any(Function) })
-    );
-
-    expect(getByText("recomputed-1.png")).toBeTruthy();
-    expect(queryByText("ignored-1.png")).toBeNull();
-  });
-
-  it("updates entry state from addListener", () => {
-    let listener: (state: unknown) => void;
-
-    const actionContext = {
-      initialEntryState: jest.fn(() => ({ asset: ["initial-1.png"] })),
-      invokeAction: jest.fn(),
-      addListener: jest.fn((_entryId, callback) => {
-        listener = callback;
-
-        return jest.fn();
-      }),
-    };
-
-    const { getByText } = renderActionButton(actionContext);
-
-    act(() => {
-      listener({ asset: ["listener-1.png"] });
-    });
-
-    expect(actionContext.addListener).toHaveBeenCalledWith(
-      String(item.id),
-      expect.any(Function)
-    );
-
-    expect(getByText("listener-1.png")).toBeTruthy();
-  });
-
-  it("renders selected flavour from action state asset arrays", () => {
-    const actionContext = {
-      initialEntryState: jest.fn(() => ({
-        asset: ["flavour-1.png", "flavour-2.png"],
-      })),
-      invokeAction: jest.fn(),
-    };
-
-    const { getByText } = renderActionButton(actionContext, {
-      flavour: "flavour_2",
-    });
-
-    expect(getByText("flavour-2.png")).toBeTruthy();
-  });
-
-  it("passes fallback cell asset to component assets", () => {
-    const AssetComponent = jest.fn(() => <View testID="component-asset" />);
-
-    const actionContext = {
-      initialEntryState: jest.fn(() => ({ asset: AssetComponent })),
-      invokeAction: jest.fn(),
-    };
-
-    renderActionButton(actionContext);
-
-    expect(AssetComponent).toHaveBeenCalledWith(
-      expect.objectContaining({
-        asset: fallbackAsset.src,
-        flavour: "flavour_1",
-      }),
-      expect.anything()
-    );
-  });
-});