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

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -4,6 +4,7 @@ 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";
@@ -12,7 +13,7 @@ type Props = {
     src: {
       active: string;
       inactive: string;
-    } & Record<string, string>;
+    };
     style: {};
     type: "Image" | "Svg" | "Lottie";
   };
@@ -32,6 +33,9 @@ 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;
@@ -60,26 +64,33 @@ 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
-      : actionContext.initialEntryState(item)
+    actionDisabled || !actionContext ? null : getActionEntryState()
   );
 
   useEffect(() => {
     if (!((actionDisabled || !actionContext) && actionState !== null)) {
-      setActionState(actionContext.initialEntryState(item));
+      setActionState(getActionEntryState());
     }
-  }, [actionDisabled, item?.id, actionContext, action, setActionState]);
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [actionDisabled, item?.id, actionContext, getActionEntryState]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
-      updateState: (state) => {
-        setActionState(state);
+      updateState: () => {
+        setActionState(getActionEntryState());
       },
     });
-  }, [actionState, actionContext?.state, item?.id]);
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [actionContext, item?.id, getActionEntryState]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {

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

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

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

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

package/Components/VideoLive/LiveImageManager.ts

@@ -624,7 +624,48 @@ export class LiveImage implements QuickBrickPlayer.SharedPlayerCallBacks {
       return this._preparePromise;
     }
 
-    this._preparePromise = this.createPreparedPlayer()
+    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;
+    })()
       .then((result) => {
         this._preparePromise = null;
 
@@ -644,45 +685,6 @@ 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.5652127751",
+  "version": "16.0.0-alpha.5803191443",
   "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.5652127751",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-alpha.5652127751",
-    "@applicaster/zapp-react-native-redux": "16.0.0-alpha.5652127751",
-    "@applicaster/zapp-react-native-utils": "16.0.0-alpha.5652127751",
+    "@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",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",