@applicaster/zapp-react-native-ui-components 16.0.0-alpha.3112220329 → 16.0.0-alpha.3202041045

package/Components/LinkHandler/LinkHandler.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import * as R from "ramda";
 
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { usePlugins } from "@applicaster/zapp-react-native-redux/hooks";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import {
   inflateString,
   objectToReadableString,
@@ -40,12 +39,8 @@ export async function inflateUrl(url) {
 
 export function LinkHandler(props: Props) {
   const screenData = props?.screenData;
-  const plugins = usePlugins();
 
-  const ScreenPlugin = findPluginByIdentifier(
-    WEBVIEW_SCREEN_IDENTIFIER,
-    plugins
-  );
+  const ScreenPlugin = getPluginByIdentifier(WEBVIEW_SCREEN_IDENTIFIER);
 
   const Component =
     R.path(["module", "Component"], ScreenPlugin) ||

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -2,6 +2,7 @@ import React, { useCallback, useEffect } from "react";
 import { TouchableOpacity, ViewStyle } from "react-native";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import Image from "./Image";
 type Props = {
@@ -57,6 +58,7 @@ export const ActionButton = React.memo(function ActionButtonComponent(
 ) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
+  const component = useUIComponentContext();
 
   // TODO: add subscription API for action availability
   const actionDisabled =
@@ -81,8 +83,9 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       updateState: (state) => {
         setActionState(state);
       },
+      ...(component ? { component } : {}),
     });
-  }, [actionState, actionContext?.state, item?.id]);
+  }, [actionState, actionContext?.state, item, component]);
 
   useEffect(() => {
     if (typeof actionContext?.addListener === "function") {
@@ -93,6 +96,14 @@ export const ActionButton = React.memo(function ActionButtonComponent(
   }, [item?.id, setActionState, actionContext]);
 
   if (actionDisabled || !actionContext) return null;
+
+  if (
+    actionState?.visibleInCells &&
+    !actionState.visibleInCells.includes(cellUUID)
+  ) {
+    return null;
+  }
+
   const AssetComponent = actionState?.asset;
 
   // Default state is not yet ready
@@ -106,6 +117,11 @@ export const ActionButton = React.memo(function ActionButtonComponent(
       accessibilityLabel={props?.accessibilityLabel || `${item?.id}`}
       accessibilityHint={props?.accessibilityHint}
       accessibilityRole="button"
+      accessibilityState={
+        typeof actionState.checked === "boolean"
+          ? { checked: actionState.checked }
+          : undefined
+      }
       accessible={!!(props?.testID || props?.accessibilityLabel)}
       style={props?.style}
     >

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/ActionButtonController.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from "react";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 type ActionDefinition = {
   identifier?: string;
@@ -61,6 +62,7 @@ export function ActionButtonController({
   const resolvedEntry = entry;
   const resolvedIdentifier = action?.identifier || pluginIdentifier || "";
   const actionContext = useActions(resolvedIdentifier);
+  const component = useUIComponentContext();
 
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
@@ -128,20 +130,33 @@ export function ActionButtonController({
       return;
     }
 
+    const invokeOptions: InvokeArgsOptions = {
+      ...(component ? { component } : {}),
+    };
+
     if (supportsEntryState) {
       return actionContext.invokeAction?.(resolvedEntry, {
+        ...invokeOptions,
         updateState: setActionState,
       });
     }
 
+    if (typeof actionContext.invokeAction === "function") {
+      return actionContext.invokeAction(resolvedEntry, invokeOptions);
+    }
+
     const favouritesAction = legacySelected
       ? actionContext.removeFavourite
       : actionContext.addFavourite;
 
-    const toggleAction = actionContext?.invokeAction ?? favouritesAction;
-
-    return toggleAction?.(resolvedEntry);
-  }, [actionContext, supportsEntryState, resolvedEntry, legacySelected]);
+    return favouritesAction?.(resolvedEntry);
+  }, [
+    actionContext,
+    supportsEntryState,
+    resolvedEntry,
+    legacySelected,
+    component,
+  ]);
 
   if (!actionContext || actionDisabled) {
     if (!actionContext) {

package/Components/MasterCell/DefaultComponents/ActionButtonsCore/components/__tests__/ActionButtonController.test.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Text } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
+import { UIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 
 import { ActionButtonController } from "../ActionButtonController";
 
@@ -89,6 +90,47 @@ describe("ActionButtonController", () => {
     );
   });
 
+  it("passes the List UIComponentContext into invokeAction so the sheet can refresh it", () => {
+    const listComponent = {
+      id: "list-1",
+      data: { source: "https://example.com/user/collections/abc" },
+    };
+
+    const actionContext = {
+      isActionAvailable: jest.fn(() => true),
+      initialEntryState: jest.fn(() => ({ active: false })),
+      invokeAction: jest.fn(),
+      addListener: jest.fn(() => jest.fn()),
+    };
+
+    mockUseActions.mockReturnValue(actionContext);
+
+    const { getByTestId } = render(
+      <UIComponentContext.Provider value={listComponent}>
+        <ActionButtonController
+          action={{ identifier: "open-modal-bottom-sheet-cell-action" }}
+          entry={entry}
+        >
+          {({ onPress }) => (
+            <Text testID="content" onPress={onPress}>
+              press
+            </Text>
+          )}
+        </ActionButtonController>
+      </UIComponentContext.Provider>
+    );
+
+    fireEvent.press(getByTestId("content"));
+
+    expect(actionContext.invokeAction).toHaveBeenCalledWith(
+      entry,
+      expect.objectContaining({
+        updateState: expect.any(Function),
+        component: listComponent,
+      })
+    );
+  });
+
   it("updates state from addListener", () => {
     let listener;
 
@@ -328,7 +370,7 @@ describe("ActionButtonController", () => {
 
     fireEvent.press(getByTestId("content"));
 
-    expect(invokeAction).toHaveBeenCalledWith(entry);
+    expect(invokeAction).toHaveBeenCalledWith(entry, {});
     expect(addFavourite).not.toHaveBeenCalled();
     expect(removeFavourite).not.toHaveBeenCalled();
   });

package/Components/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

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

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -245,13 +245,21 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   const isCurrentlyFocused = useTrackCurrentAutoScrollingElement(componentId);
 
-  const { playerPluginId, screenConfig, preloadHooks } =
-    getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
+  // New object identities here restart PlayerLiveImage's register effect,
+  // which throws away the in-flight player and runs preload hooks again.
+  const playerConfig = React.useMemo(
+    () => getPlayerConfig(player_screen_id, actionIdentifier),
+    [player_screen_id, actionIdentifier]
+  );
+
+  const { playerPluginId, screenConfig, preloadHooks } = playerConfig ?? {};
 
-  const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
+  const playableEntry = React.useMemo(
+    () => (playerPluginId ? getPlayableEntry(item) : null),
+    [playerPluginId, item?.id]
+  );
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/MasterCell/DefaultComponents/PressableView.tsx

@@ -11,6 +11,7 @@ type Props = {
   accessibilityHint?: string;
   onPress?: () => void;
   testOnly_pressed?: boolean;
+  checked?: boolean;
 };
 
 export function PressableView({
@@ -22,11 +23,13 @@ export function PressableView({
   pressedStyle,
   onPress,
   testOnly_pressed = false,
+  checked,
 }: Props) {
   return (
     <Pressable
       testOnly_pressed={testOnly_pressed}
       onPress={onPress}
+      accessibilityState={checked === undefined ? undefined : { checked }}
       testID={testID}
       accessibilityLabel={accessibilityLabel}
       accessibilityHint={accessibilityHint}

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

@@ -0,0 +1,288 @@
+import React from "react";
+import { act, fireEvent, render } from "@testing-library/react-native";
+
+import { ActionButton } from "../ActionButton";
+import { ActionButton as MobileActionButton } from "../mobile/MobileActionButtons/ActionButton";
+import { Text } from "react-native";
+
+type EntryStateListener = (state: CellActionEntryState) => void;
+
+const PLUGIN_ASSETS = {
+  mute: ["plugin_mute_1", "plugin_mute_2"],
+  unmute: ["plugin_unmute_1", "plugin_unmute_2"],
+};
+
+// Fake of the mute_unmute_action context, following its entry state contract.
+type FakeState = {
+  available: boolean;
+  muted: boolean;
+  visibleInCells?: string[];
+};
+
+const createFakeContext = (initial: FakeState) => {
+  let current = initial;
+  const listeners = new Set<EntryStateListener>();
+
+  const toEntryState = ({
+    available,
+    muted,
+    visibleInCells,
+  }: FakeState): CellActionEntryState => ({
+    state: muted ? 1 : 0,
+    asset: available
+      ? muted
+        ? PLUGIN_ASSETS.unmute
+        : PLUGIN_ASSETS.mute
+      : undefined,
+    label: muted ? "Unmute" : "Mute",
+    mobileButtonAssets: muted ? PLUGIN_ASSETS.unmute : PLUGIN_ASSETS.mute,
+    visibleInCells,
+  });
+
+  const emit = (next: FakeState) => {
+    current = next;
+    listeners.forEach((listener) => listener(toEntryState(current)));
+  };
+
+  const context = {
+    initialEntryState: jest.fn(() => toEntryState(current)),
+    addListener: jest.fn((_id: string, listener: EntryStateListener) => {
+      listeners.add(listener);
+
+      return () => listeners.delete(listener);
+    }),
+    invokeAction: jest.fn((_item, options) => {
+      if (!current.available) return;
+
+      current = { ...current, muted: !current.muted };
+      options?.updateState?.(toEntryState(current));
+      listeners.forEach((listener) => listener(toEntryState(current)));
+    }),
+  };
+
+  return { context, emit, listeners };
+};
+
+let mockContext: ReturnType<typeof createFakeContext>["context"];
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/actions", () => ({
+  useActions: jest.fn(() => mockContext),
+}));
+
+jest.mock(
+  "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext",
+  () => ({ useUIComponentContext: jest.fn(() => undefined) })
+);
+
+jest.mock("../Image", () => {
+  const { Text: MockText } = require("react-native");
+
+  return {
+    __esModule: true,
+    default: ({ uri }) => <MockText testID="asset">{uri}</MockText>,
+  };
+});
+
+const item = { id: "entry-1" } as unknown as ZappEntry;
+
+it("keeps the standalone button visible and limits actions to the playing cell instance", () => {
+  const fake = createFakeContext({
+    available: true,
+    muted: true,
+    visibleInCells: [],
+  });
+
+  mockContext = fake.context;
+
+  const Label = ({
+    children,
+    testID,
+  }: {
+    children?: React.ReactNode;
+    testID?: string;
+    mobileActionRole?: string;
+  }) => <Text testID={testID}>{children}</Text>;
+
+  const { getByTestId, queryByTestId } = render(
+    <>
+      {["first", "second"].map((cellUUID) => (
+        <ActionButton
+          key={cellUUID}
+          item={item}
+          action={{ identifier: "mute_unmute_action" }}
+          cellUUID={cellUUID}
+          testID={`cell-${cellUUID}`}
+          style={{}}
+        />
+      ))}
+      <MobileActionButton
+        action={{ identifier: "mute_unmute_action" }}
+        entry={item}
+        testID="standalone"
+        style={{}}
+        focusedStyles={{}}
+      >
+        <Label mobileActionRole="label">Toggle sound</Label>
+      </MobileActionButton>
+    </>
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+  fireEvent.press(getByTestId("standalone"));
+  expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["first"] })
+  );
+
+  expect(getByTestId("cell-first")).toBeTruthy();
+  expect(queryByTestId("cell-second")).toBeNull();
+
+  act(() =>
+    fake.emit({ available: true, muted: false, visibleInCells: ["second"] })
+  );
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(getByTestId("cell-second")).toBeTruthy();
+
+  act(() => fake.emit({ available: true, muted: false, visibleInCells: [] }));
+
+  expect(queryByTestId("cell-first")).toBeNull();
+  expect(queryByTestId("cell-second")).toBeNull();
+  expect(getByTestId("standalone")).toBeTruthy();
+});
+
+const renderButton = (
+  flavour: "flavour_1" | "flavour_2",
+  asset?: React.ComponentProps<typeof ActionButton>["asset"]
+) =>
+  render(
+    <ActionButton
+      item={item}
+      flavour={flavour}
+      action={{ identifier: "mute_unmute_action" }}
+      asset={asset}
+      style={{}}
+      testID="mute-button"
+    />
+  );
+
+const cellAsset = {
+  props: {},
+  src: { active: "cell_selected", inactive: "cell_unselected" },
+  style: {},
+  type: "Image",
+} as const;
+
+describe.each([
+  ["flavour_1", 0],
+  ["flavour_2", 1],
+] as const)("mute_unmute_action cell action (%s)", (flavour, index) => {
+  let fake: ReturnType<typeof createFakeContext>;
+
+  const setup = (state: { available: boolean; muted: boolean }, asset?) => {
+    fake = createFakeContext(state);
+    mockContext = fake.context;
+
+    return renderButton(flavour, asset);
+  };
+
+  it("renders nothing while the preview has not started", () => {
+    const { queryByTestId } = setup({ available: false, muted: false });
+
+    expect(queryByTestId("mute-button")).toBeNull();
+    expect(queryByTestId("asset")).toBeNull();
+  });
+
+  it("shows the Mute icon while the preview plays with sound on", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("shows the Unmute icon while the preview plays muted", () => {
+    const { getByTestId } = setup({ available: true, muted: true });
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+  });
+
+  it("toggles the sound and updates the icon on tap", () => {
+    const { getByTestId } = setup({ available: true, muted: false });
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(fake.context.invokeAction).toHaveBeenCalledTimes(1);
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    fireEvent.press(getByTestId("mute-button"));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+
+  it("follows state emitted through addListener", () => {
+    const { getByTestId, queryByTestId } = setup({
+      available: false,
+      muted: false,
+    });
+
+    act(() => fake.emit({ available: true, muted: false }));
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+
+    act(() => fake.emit({ available: true, muted: true }));
+
+    expect(getByTestId("asset").props.children).toBe(
+      PLUGIN_ASSETS.unmute[index]
+    );
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+  });
+
+  it("hides again when the preview stops or another cell starts", () => {
+    const { queryByTestId } = setup({ available: true, muted: false });
+
+    expect(queryByTestId("mute-button")).not.toBeNull();
+
+    act(() => fake.emit({ available: false, muted: false }));
+
+    expect(queryByTestId("mute-button")).toBeNull();
+  });
+
+  it("unsubscribes from the context on unmount", () => {
+    const { unmount } = setup({ available: true, muted: false });
+
+    expect(fake.listeners.size).toBe(1);
+
+    unmount();
+
+    expect(fake.listeners.size).toBe(0);
+  });
+
+  it("prefers the cell's selected icon when muted (state 1)", () => {
+    const { getByTestId } = setup({ available: true, muted: true }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_selected");
+  });
+
+  it("prefers the cell's unselected icon when sound is on (state 0)", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, cellAsset);
+
+    expect(getByTestId("asset").props.children).toBe("cell_unselected");
+  });
+
+  it("uses the plugin asset when the cell has no icons", () => {
+    const { getByTestId } = setup({ available: true, muted: false }, {
+      ...cellAsset,
+      src: { active: undefined, inactive: undefined },
+    } as any);
+
+    expect(getByTestId("asset").props.children).toBe(PLUGIN_ASSETS.mute[index]);
+  });
+});

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/ActionButton.tsx

@@ -166,9 +166,10 @@ export const ActionButton = ({
         <PressableView
           testOnly_pressed={props.testOnly_pressed}
           testID={props.testID || `${entry?.id}`}
-          style={style}
+          style={[style, props.alignment]}
           pressedStyle={focusedStyles}
           onPress={renderProps.onPress}
+          checked={renderProps.actionState?.checked}
           accessibilityLabel={props.accessibilityLabel || `${entry?.id}`}
           accessibilityHint={props.accessibilityHint}
         >

package/Components/MasterCell/DefaultComponents/mobile/MobileActionButtons/__tests__/PressableView.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Pressable, Text as RNText, View } from "react-native";
+import { Pressable, StyleSheet, Text as RNText, View } from "react-native";
 import { render, fireEvent } from "@testing-library/react-native";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 
@@ -282,7 +282,9 @@ describe("MobileActionButton", () => {
     expect(pressable.props.testID).toBe("mobile_action_button_1");
     expect(pressable.props.accessibilityLabel).toBe("entry-1");
 
-    expect(pressable.props.style({ pressed: false })[0]).toMatchObject({
+    expect(
+      StyleSheet.flatten(pressable.props.style({ pressed: false }))
+    ).toMatchObject({
       backgroundColor: "rgba(1,1,1,1)",
       borderColor: "rgba(2,2,2,1)",
       borderWidth: 1,

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/__tests__/factory.test.ts

@@ -0,0 +1,32 @@
+import { CollapsibleTextContainer } from "../index";
+
+const getValue = (key: string) => {
+  const values: Record<string, unknown> = {
+    text_alignment: "left",
+    margin_top: 0,
+    margin_right: 0,
+    margin_bottom: 0,
+    margin_left: 0,
+    padding_top: 0,
+    padding_right: 0,
+    padding_bottom: 0,
+    padding_left: 0,
+    corner_radius: 0,
+    data_key: "title",
+    custom_data_key: undefined,
+  };
+
+  return values[key];
+};
+
+describe("CollapsibleTextContainer view tree", () => {
+  it("aligns the label to the text alignment instead of stretching the cell", () => {
+    const result = CollapsibleTextContainer({
+      getValue,
+      elements: [],
+      additionalStyles: { backgroundColor: "transparent" },
+    });
+
+    expect(result.style.alignSelf).toBe("flex-start");
+  });
+});