@applicaster/zapp-react-native-utils 15.1.13-alpha.1034774223 → 15.1.13

package/configurationUtils/manifestKeyParser.ts

@@ -11,30 +11,17 @@ const currentPlatform = platformSelect({
   android_tv: "android",
 });
 
-// Do not change the order: focused_selected must be first, and "focus" must
-// come *after* "focused". Matching uses startsWith(state + "_"), so putting
-// "focus" first would steal focused_* / focused_selected_* keys. Adding
-// "focus" here affects every getAllSpecificStyles consumer (not only modals);
-// property names that themselves start with focus_ (e.g. focus_font_color as
-// a non-state style) would also be classified as the focus state.
-const states = [
-  "focused_selected",
-  "pressed",
-  "focused",
-  "focus",
-  "selected",
-  "default",
-];
+// Do not change the order, focused_selected should be first
+const states = ["focused_selected", "pressed", "focused", "selected"];
 
 const platformSuffixes = ["ios", "tvos", "samsung", "lg", "android"];
-type StateKey = (typeof states)[number];
+type StateKey = (typeof states)[number] | "default";
 
 export type GetAllSpecificStylesProps = {
   componentName: string;
   subComponentName: string;
   configuration: Record<string, any>;
   outStyles: Record<string, any>;
-  styleSeparator?: string;
 };
 
 /*
@@ -48,23 +35,14 @@ export const getAllSpecificStyles = ({
   componentName,
   subComponentName,
   outStyles,
-  styleSeparator = "_style_",
 }: GetAllSpecificStylesProps) => {
   if (!outStyles) throw new Error("outStyles is required");
   if (!componentName) throw new Error("componentName is required");
 
-  const prefixes =
+  const prefix =
     subComponentName?.length > 0
-      ? [
-          styleSeparator
-            ? `${componentName}${styleSeparator}${subComponentName}_`
-            : `${subComponentName}_`,
-          `${componentName}_style_${subComponentName}_`,
-        ]
-      : [
-          styleSeparator ? `${componentName}${styleSeparator}` : "",
-          `${componentName}_style_`,
-        ];
+      ? `${componentName}_style_${subComponentName}_`
+      : `${componentName}_style_`;
 
   const defaultKey = "default";
 
@@ -73,24 +51,12 @@ export const getAllSpecificStyles = ({
   const tmpGenericDict: Record<StateKey, Record<string, any>> = {};
   const tmpPlatformDict: Record<StateKey, Record<string, any>> = {};
 
-  const parseKey = (key: string, originalKey: string, value: any) => {
-    const matchedPrefix = prefixes.find((p) => p && key.startsWith(p));
-
-    if (!matchedPrefix) {
-      return;
-    }
-
-    // Guard: for empty styleSeparator, if matching modern prefix, require dot in originalKey
-    if (
-      styleSeparator === "" &&
-      matchedPrefix === `${subComponentName}_` &&
-      !originalKey.includes(".")
-    ) {
+  const parseKey = (key: string, value: any) => {
+    if (!key.startsWith(prefix)) {
       return;
     }
 
-    let styleName = key.slice(matchedPrefix.length);
-
+    let styleName = key.slice(prefix.length);
     if (!styleName || styleName.startsWith("_")) return;
 
     const platform = platformSuffixes.find((prefix) =>
@@ -118,11 +84,6 @@ export const getAllSpecificStyles = ({
       state = defaultKey;
     }
 
-    // Normalize Studio "focus" keys onto the runtime "focused" state bucket.
-    if (state === "focus") {
-      state = "focused";
-    }
-
     if (!styleName) return;
 
     const camelCaseKey = toCamelCase(styleName);
@@ -132,8 +93,7 @@ export const getAllSpecificStyles = ({
   };
 
   for (const [key, value] of Object.entries(configuration)) {
-    const formattedKey = key.replace(/\./g, "_");
-    parseKey(formattedKey, key, value);
+    parseKey(key, value);
   }
 
   const allStates = Array.from(

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -204,20 +204,6 @@ function getPlayerConfiguration({ platform, version }) {
         label_tooltip: "Label for close button accessibility",
         type: "text_input",
       },
-      {
-        key: "accessibility_overflow_label",
-        label: "Accessibility overflow label",
-        initial_value: "More actions",
-        label_tooltip: "Label for the overflow (…) button accessibility",
-        type: "text_input",
-      },
-      {
-        key: "accessibility_overflow_hint",
-        label: "Accessibility overflow hint",
-        initial_value: "Opens the remaining player actions",
-        label_tooltip: "Hint for the overflow (…) button accessibility",
-        type: "text_input",
-      },
       {
         key: "accessibility_close_hint",
         label: "Accessibility close hint",
@@ -761,7 +747,7 @@ function getPlayerConfiguration({ platform, version }) {
         label: "Player action buttons",
         initial_value: null,
         label_tooltip:
-          "Comma-separated action identifiers. The entry_actions token expands from the playing entry's extensions.entry_action. When more than 2 actions resolve, the video and fullscreen audio players show Overflow (…) plus one companion - the first action that did not come from the entry, otherwise the first one - and the Overflow sheet lists every resolved action. A repeated identifier is counted once. No extra plugin is required.",
+          "type here the identifiers of the action buttons you want to show on the player, separated by commas. Only 2 action buttons may be added at the same time",
         type: "text_input",
       },
       {
@@ -1061,13 +1047,6 @@ function getPlayerConfiguration({ platform, version }) {
             type: "uploader",
             label_tooltip: "Override default close badge / icon",
           },
-          {
-            key: "overflow",
-            label: "Overflow badge",
-            type: "uploader",
-            label_tooltip:
-              "Override default overflow (…) badge / icon, shown when more action buttons resolve than fit on the player overlay",
-          },
           {
             key: "lock",
             label: "Lock player badge",

package/manifestUtils/index.js

@@ -23,7 +23,6 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
-const { getModalBlockStyles, getModalLocalizations } = require("./modalBlocks");
 
 const {
   secondaryImage,
@@ -53,6 +52,4 @@ module.exports = {
   getUpdatedSecondaryImageKeys,
   DEFAULT_GRADIENT_IMAGE,
   compact,
-  getModalBlockStyles,
-  getModalLocalizations,
 };

package/modalState/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { modalStore, getMenuItemActions } from "../";
+import { modalStore } from "../";
 
 describe("Modal State", () => {
   it("should have initial state", () => {
@@ -48,33 +48,4 @@ describe("Modal State", () => {
       });
     });
   });
-
-  describe("getMenuItemActions", () => {
-    it("returns actions array when actions is provided", () => {
-      const actions = [{ type: "action1" }, { type: "action2" }];
-      const item = { id: "1", title: "Item", actions };
-
-      expect(getMenuItemActions(item)).toEqual(actions);
-    });
-
-    it("returns [action] when single action is provided", () => {
-      const action = { type: "action1" };
-      const item = { id: "1", title: "Item", action };
-
-      expect(getMenuItemActions(item)).toEqual([action]);
-    });
-
-    it("returns action when action is passed as an array", () => {
-      const actions = [{ type: "action1" }];
-      const item = { id: "1", title: "Item", action: actions as any };
-
-      expect(getMenuItemActions(item)).toEqual(actions);
-    });
-
-    it("returns empty array when no action or actions are provided", () => {
-      expect(getMenuItemActions({ id: "1", title: "Item" })).toEqual([]);
-      expect(getMenuItemActions(null)).toEqual([]);
-      expect(getMenuItemActions(undefined)).toEqual([]);
-    });
-  });
 });

package/modalState/index.ts

@@ -1,35 +1,83 @@
-export {
-  modalStore,
-  useModalStore,
-  openModal,
-  dismissModal,
-  openBottomSheetModal,
-  useModalStoreState,
-} from "./store";
-
-export type { ModalState, ModalStore } from "./store";
-
-export { modalOrchestrator } from "./ModalOrchestrator";
-
-export { ContentViewModel } from "./ContentViewModel";
-
-export type {
-  Menu,
-  MenuItem,
-  Header,
-  Content,
-  Action,
-  PresentSubMenuAction,
-  SecondaryAction,
-  SelectMode,
-  SelectionBehavior,
-} from "./types";
-
-export {
-  isPresentSubMenuAction,
-  getMenuItemActions,
-  OPERATIONS,
-  hasOperation,
-} from "./types";
-
-export { useBottomSheetContent } from "./useBottomSheetContent";
+import { useStore, createStore } from "zustand";
+
+interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+interface ModalStore {
+  modalState: ModalState;
+  setModalState: (newState: Partial<ModalState>) => void;
+  openModal: (
+    item: any,
+    options?: Record<string, unknown>,
+    props?: Record<string, unknown>
+  ) => void;
+  dismissModal: () => void;
+}
+
+const initialModalState: ModalState = {
+  visible: false,
+  screen: null,
+  options: {},
+  props: {},
+};
+
+export const modalStore = createStore<ModalStore>((set) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({ item, options = {}, props }: OpenModalArg) =>
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...options,
+          onDismiss: () => set({ modalState: initialModalState }),
+          onRequestClose: () => set({ modalState: initialModalState }),
+        },
+        props,
+      },
+    }),
+  dismissModal: () => set(() => ({ modalState: initialModalState })),
+}));
+
+export const useModalStore = <T>(selector: (state: ModalStore) => T) =>
+  useStore(modalStore, selector);
+
+export const openModal = modalStore.getInitialState().openModal;
+
+export const dismissModal = modalStore.getInitialState().dismissModal;
+
+export const openBottomSheetModal = ({
+  ModalBottomSheetContent,
+  modalBottomSheetContentProps,
+  props = {},
+  options = {},
+}: OpenModalBottomSheetArgs) => {
+  openModal({
+    item: {
+      ModalBottomSheetContent,
+      modalBottomSheetContentProps,
+    },
+    props,
+    options: {
+      animationType: "none",
+      animated: false,
+      ...options,
+    },
+  });
+};
+
+export const useModalStoreState = (): ModalState =>
+  useModalStore<ModalState>((state) => state.modalState);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "15.1.13-alpha.1034774223",
+  "version": "15.1.13",
   "description": "Applicaster Zapp React Native utilities package",
   "main": "index.js",
   "types": "index.d.ts",
@@ -27,7 +27,7 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "15.1.13-alpha.1034774223",
+    "@applicaster/applicaster-types": "15.1.13",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/__tests__/getPlayerActionButtons.test.ts

@@ -0,0 +1,54 @@
+import { getPlayerActionButtons } from "../getPlayerActionButtons";
+import { selectActionButtons } from "../../conf/player/selectors";
+
+jest.mock("../../conf/player/selectors", () => ({
+  selectActionButtons: jest.fn(),
+}));
+
+describe("getPlayerActionButtons", () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it("returns an empty array if selectActionButtons returns undefined", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue(undefined);
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual([]);
+  });
+
+  it("returns an empty array if selectActionButtons returns null", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue(null);
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual([]);
+  });
+
+  it("returns an empty array if selectActionButtons returns empty string", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue("");
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual([]);
+  });
+
+  it("returns the first two trimmed action buttons", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue(" play , pause , stop ");
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual(["play", "pause"]);
+  });
+
+  it("returns only one button if only one is present", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue(" play ");
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual(["play"]);
+  });
+
+  it("trims whitespace from button names", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue("  play  ,   pause  ");
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual(["play", "pause"]);
+  });
+
+  it("returns an empty array if selectActionButtons returns only commas", () => {
+    (selectActionButtons as jest.Mock).mockReturnValue(" , , ");
+    const result = getPlayerActionButtons({});
+    expect(result).toEqual(["", ""]);
+  });
+});

package/playerUtils/getPlayerActionButtons.ts

@@ -0,0 +1,17 @@
+import { map, take, trim } from "../utils";
+import { selectActionButtons } from "../conf/player/selectors";
+
+/**
+ * Returns the first two action buttons from the configuration.
+ * @param {Object} configuration - The player configuration object.
+ * @returns {Array} An array containing the first two action buttons.
+ */
+export const getPlayerActionButtons = (configuration: any) => {
+  const buttonsString = selectActionButtons(configuration);
+
+  if (!buttonsString) {
+    return [];
+  }
+
+  return take(2, map(buttonsString.split(","), trim));
+};

package/playerUtils/index.ts

@@ -7,23 +7,7 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { getBoolFromConfigValue } from "../configurationUtils";
 import { Dimensions } from "react-native";
 
-export { resolvePlayerActions } from "./resolvePlayerActions";
-
-export { isEntryAction } from "../entryActions";
-
-export {
-  parseActionIdentifiers,
-  resolveActionIdentifiers,
-} from "../uiActionsRegistrator";
-
-export type { ResolveActionIdentifiersParams } from "../uiActionsRegistrator";
-
-export type {
-  ActionButtonDescriptor,
-  OverflowDescriptor,
-  PlayerControlDescriptor,
-  ResolvePlayerActionsParams,
-} from "./resolvePlayerActions";
+export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
 export {
   resolvePlayerContentText,

package/reactHooks/actions/index.ts

@@ -6,7 +6,6 @@ import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Con
 import {
   observeEntryState,
   RegisteredActionValue,
-  uiActionsRegistry,
 } from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
@@ -35,13 +34,7 @@ export function useActions<T = unknown>(plugId: string): any {
       if (!logged) {
         logger.warning({
           message: `useActions: Couldn't find an action for ${plugId} plugin`,
-          // Identifiers only. The action map holds every plugin's module and
-          // live React context, which is far too large for a log line and can
-          // carry whatever state those plugins hold.
-          data: {
-            plugId,
-            availableActions: Object.keys(context?.actions ?? {}),
-          },
+          data: { actions: context?.actions },
         });
 
         setLogged(true);
@@ -87,31 +80,7 @@ export function useEntryActionState(
   useEffect(() => {
     if (!action) return undefined;
 
-    // An action's stream is third-party code. Subscribing with only a `next`
-    // handler lets RxJS rethrow an error notification asynchronously, where no
-    // error boundary catches it - one plugin faulting would take the app down
-    // rather than this one button. The button keeps its last known state.
-    let subscription;
-
-    try {
-      subscription = observeEntryState(action, entry).subscribe({
-        next: setState,
-        error: (error) =>
-          logger.warning({
-            message:
-              "useEntryActionState: the action's state stream failed - the button keeps its last state",
-            data: { entryId, error },
-          }),
-      });
-    } catch (error) {
-      logger.warning({
-        message:
-          "useEntryActionState: could not observe the action - the button keeps its initial state",
-        data: { entryId, error },
-      });
-
-      return undefined;
-    }
+    const subscription = observeEntryState(action, entry).subscribe(setState);
 
     return () => subscription.unsubscribe();
     // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
@@ -119,18 +88,6 @@ export function useEntryActionState(
 
   const invokeAction = useCallback(
     (options: InvokeArgsOptions = {}) => {
-      if (typeof action?.invokeAction !== "function") {
-        // A button was rendered and pressed, and the press goes nowhere. Only
-        // reachable on a user interaction, so it costs nothing on render. The
-        // action value carries no identifier, so the label is what locates the
-        // button that misbehaved.
-        logger.warning({
-          message:
-            "useEntryActionState: the pressed action has no invokeAction - the press did nothing",
-          data: { entryId, label: state?.label },
-        });
-      }
-
       action?.invokeAction?.(entry, { updateState: setState, ...options });
     },
     // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
@@ -139,25 +96,3 @@ export function useEntryActionState(
 
   return { state, invokeAction };
 }
-
-/**
- * A value that changes whenever a provider is added to or removed from
- * `uiActionsRegistry`.
- *
- * Providers can register after the UI that wants them has rendered - the audio
- * player registers playback speed only once its controller has state, and
- * plugin-backed actions are bridged in from an effect. Put this in the
- * dependency list of anything that resolves actions, so the list is re-read
- * instead of being frozen at first paint.
- */
-export function useRegistryRevision(): number {
-  const [revision, setRevision] = useState(0);
-
-  useEffect(
-    () =>
-      uiActionsRegistry.subscribe(() => setRevision((current) => current + 1)),
-    []
-  );
-
-  return revision;
-}

package/reactHooks/cell-click/__tests__/index.test.js

@@ -7,6 +7,7 @@ import { waitFor } from "@testing-library/react-native";
 
 const mockNavigator = {
   getPathname: () => "pathnameMock",
+  currentRoute: "pathnameMock",
   push: jest.fn(),
   data: {},
 };
@@ -31,6 +32,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactHooks/screen", () => ({
   ),
   useTargetScreenData: jest.fn(() => ({})),
   useCurrentScreenData: jest.fn(() => ({})),
+  useScreenContext: jest.fn(() => ({})),
 }));
 
 jest.mock("@applicaster/zapp-react-native-ui-components/Contexts", () => ({
@@ -68,6 +70,12 @@ const wrapper = ({ children }) => (
   </CellTapContext.Provider>
 );
 
+const actionExecutorWrapper = ({ children }) => (
+  <ActionExecutorContext.Provider value={actionExecutor}>
+    {children}
+  </ActionExecutorContext.Provider>
+);
+
 describe("useCellClick", () => {
   it("returns a function", () => {
     const { result } = renderHook(() => useCellClick(mockProps));
@@ -97,4 +105,60 @@ describe("useCellClick", () => {
 
     cleanup();
   });
+
+  it("does not push when the cell finishes a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "profile-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [
+            { type: "sessionStorageSet" },
+            { type: "finishHook", options: { success: true } },
+          ],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(actionExecutor.handleEntryActions).toHaveBeenCalled();
+    });
+
+    expect(mockNavigator.push).not.toHaveBeenCalled();
+    cleanup();
+  });
+
+  it("pushes after tap actions that do not finish a hook", async () => {
+    mockNavigator.push.mockClear();
+
+    const item = {
+      id: "episode-1",
+      type: { value: "feed" },
+      extensions: {
+        tap_actions: {
+          actions: [{ type: "sessionStorageSet" }],
+        },
+      },
+    };
+
+    const { result } = renderHook(() => useCellClick({ item }), {
+      wrapper: actionExecutorWrapper,
+    });
+
+    await result.current();
+
+    await waitFor(() => {
+      expect(mockNavigator.push).toHaveBeenCalled();
+    });
+
+    cleanup();
+  });
 });

package/reactHooks/cell-click/index.ts

@@ -82,6 +82,12 @@ export const useCellClick = ({
 
       logOnPress(selectedItem, pathname, component, onCellTap);
 
+      const tapActions = selectedItem?.extensions?.tap_actions?.actions;
+
+      const finishesHook =
+        Array.isArray(tapActions) &&
+        tapActions.some((action) => action?.type === "finishHook");
+
       if (selectedItem) {
         await actionExecutor?.handleEntryActions(selectedItem, {
           component,
@@ -99,20 +105,21 @@ export const useCellClick = ({
             url: selectedItem.link.href,
           });
         }
-      } else {
-        if (isFunction(onCellTap)) {
-          onCellTap?.(selectedItem, _index);
-        } else {
-          if (currentRoute === pathname || pathname.includes("video-modal")) {
-            const targetScreen = component?.data?.target;
-
-            push(
-              R.when(
-                () => targetScreen,
-                R.mergeLeft({ screen_type: targetScreen })
-              )(selectedItem)
-            );
-          }
+      } else if (isFunction(onCellTap)) {
+        onCellTap?.(selectedItem, _index);
+      } else if (!finishesHook) {
+        // finishHook already completes the hook and navigates to the original
+        // target. Pushing the cell as well stacks a second copy of that screen
+        // (e.g. home/home after a profile selector hook).
+        if (currentRoute === pathname || pathname.includes("video-modal")) {
+          const targetScreen = component?.data?.target;
+
+          push(
+            R.when(
+              () => targetScreen,
+              R.mergeLeft({ screen_type: targetScreen })
+            )(selectedItem)
+          );
         }
       }
     },