@applicaster/zapp-react-native-utils 16.0.0-alpha.7845362739 → 16.0.0-alpha.8101951023

package/modalState/store.ts

@@ -0,0 +1,109 @@
+import { createStore, useStore } from "zustand";
+
+export interface ModalState {
+  visible: boolean;
+  screen: any;
+  options: Record<string, unknown>;
+  props: Record<string, unknown>;
+}
+
+export 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, get) => ({
+  modalState: initialModalState,
+  setModalState: (newState) =>
+    set((state) => ({
+      modalState: { ...state.modalState, ...newState },
+    })),
+  openModal: ({ item, options = {}, props }: OpenModalArg) => {
+    const resetStore = () => set({ modalState: initialModalState });
+    const { onDismiss, onRequestClose, ...restOptions } = options as any;
+
+    set({
+      modalState: {
+        visible: true,
+        screen: item,
+        options: {
+          animated: true,
+          animationType: "slide",
+          onShow: () => {},
+          presentationStyle: "overFullScreen",
+          transparent: true,
+          ...restOptions,
+          // Compose caller-provided callbacks with the store reset so both run
+          onDismiss: () => {
+            resetStore();
+            onDismiss?.();
+          },
+          onRequestClose: () => {
+            resetStore();
+            onRequestClose?.();
+          },
+        },
+        props,
+      },
+    });
+  },
+  dismissModal: () => {
+    const onDismiss = (get().modalState?.options as any)?.onDismiss;
+
+    if (typeof onDismiss === "function") {
+      onDismiss();
+    } else {
+      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,
+    },
+  });
+};
+
+/**
+ * Pass `skipSubscription` from callers that render outside of a modal: the
+ * selector then returns the stable `initialModalState` reference, so the
+ * component is never re-rendered by modal state it does not read.
+ */
+export const useModalStoreState = (skipSubscription = false): ModalState =>
+  useModalStore<ModalState>((state) =>
+    skipSubscription ? initialModalState : state.modalState
+  );

package/modalState/types.ts

@@ -0,0 +1,160 @@
+export interface Header {
+  title: string;
+  subtitle?: string;
+  icon?: string;
+}
+
+export interface Action {
+  type: string;
+  payload?: any;
+  options?: any;
+}
+
+// Represented as 3 dots icon on top menu (opens new second level menu on desktop
+// or a new bottom sheet on mobile)
+export interface PresentSubMenuAction extends Action {
+  menu: Menu;
+}
+
+export interface SecondaryAction {
+  action: Action | PresentSubMenuAction;
+  icon?: string;
+}
+
+/**
+ * A group of actions attached to an entry, keyed by a button alias
+ * (e.g. "remove_item", "reorder_item"). Injected by the feed decorator and
+ * dispatched by the remote EditableCollection when an operation runs.
+ */
+export interface EntryActionGroup {
+  button?: { alias?: string };
+  actions?: Action[];
+}
+
+export interface MenuItem {
+  id: string;
+  title: string;
+  summary?: string;
+  icon?: string;
+  isSelected?: boolean;
+  actions?: (Action | PresentSubMenuAction)[];
+  /** @deprecated Use `actions` array instead. Maintained for backwards compatibility. */
+  action?: Action | PresentSubMenuAction;
+  secondaryAction?: SecondaryAction;
+  trailingButton?: any;
+  entryActions?: EntryActionGroup[];
+}
+
+export type SelectMode = "single" | "multi" | "none";
+
+export interface SelectionBehavior {
+  selectMode?: SelectMode;
+  currentSelection?: string[];
+  selector?: string;
+}
+
+/**
+ * Operations that act on a specific item in the collection.
+ * Their action payloads are looked up on the item's entryActions (e.g. "remove_item", "reorder_item").
+ */
+export type ItemScopedOperation = "remove" | "reorder";
+
+/**
+ * Operations that act on the collection as a whole.
+ * Their action payloads are looked up on dynamicCollection.events (e.g. events.add, events.clearAll, events.delete).
+ */
+export type CollectionScopedOperation = "add" | "clearAll" | "delete";
+
+/**
+ * UI display or behavior flags that do not require action payloads.
+ */
+export type UIOperation = "nowPlaying";
+
+export const OPERATIONS = {
+  REMOVE: "remove",
+  REORDER: "reorder",
+  ADD: "add",
+  CLEAR_ALL: "clearAll",
+  DELETE: "delete",
+  NOW_PLAYING: "nowPlaying",
+} as const;
+
+export function hasOperation(
+  operations: string[] | undefined,
+  target: string
+): boolean {
+  if (!Array.isArray(operations)) return false;
+
+  const targetLower = target.toLowerCase();
+
+  return operations.some(
+    (op) => typeof op === "string" && op.toLowerCase() === targetLower
+  );
+}
+
+export type Operation =
+  | ItemScopedOperation
+  | CollectionScopedOperation
+  | UIOperation;
+
+export interface DynamicCollectionOptions {
+  operations: Operation[];
+  postUrl?: string;
+  provider?: string;
+  /**
+   * Action handlers for CollectionScopedOperations (e.g. "add", "clearAll", "delete").
+   */
+  events?: Record<CollectionScopedOperation | string, Action[]>;
+}
+
+export interface Content {
+  title: string;
+  stickyTitle?: boolean;
+  items: MenuItem[];
+  itemsUrl?: string;
+  action?: Action;
+  role?: string;
+  behavior?: SelectionBehavior;
+  dynamicCollection?: DynamicCollectionOptions;
+  themePluginId?: string;
+  styleOverrides?: Record<string, any>;
+  context?: Record<string, any>;
+}
+
+export interface Menu {
+  header?: Header;
+  content: Content;
+  closeButton?: boolean;
+}
+
+export function isPresentSubMenuAction(
+  action: any
+): action is PresentSubMenuAction {
+  return !!action && typeof action === "object" && "menu" in action;
+}
+
+/**
+ * Normalizes an item's action/actions into an array of Action items.
+ * Supports canonical `actions: Action[]` and backwards-compatible `action: Action | Action[]`.
+ */
+export function getMenuItemActions(
+  item?: Partial<MenuItem> | null
+): (Action | PresentSubMenuAction)[] {
+  if (!item) {
+    return [];
+  }
+
+  if (Array.isArray(item.actions) && item.actions.length > 0) {
+    return item.actions;
+  }
+
+  if (Array.isArray((item as any).action)) {
+    return (item as any).action;
+  }
+
+  if (item.action) {
+    return [item.action];
+  }
+
+  return [];
+}

package/modalState/useBottomSheetContent.ts

@@ -0,0 +1,109 @@
+import React, { useCallback, useEffect, useState } from "react";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
+
+import { MenuItem, modalOrchestrator } from "./ModalOrchestrator";
+
+import { ContentViewModel } from "./ContentViewModel";
+import {
+  DynamicCollectionOptions,
+  getMenuItemActions,
+  isPresentSubMenuAction,
+  SelectionBehavior,
+} from "./types";
+import type { EditableCollection } from "./EditableCollection";
+
+type Props = {
+  viewModel?: ContentViewModel | null;
+  onPress: (item: MenuItem) => void | Promise<void>;
+};
+
+type Return = {
+  items: MenuItem[];
+  isLoading: boolean;
+  error?: Error | string;
+  showCentralLoading: boolean;
+  canGoBack: boolean;
+  handleItemPress: (item: MenuItem) => Promise<void>;
+  goBackOrClose: () => void;
+  close: () => void;
+  role?: string;
+  behavior?: SelectionBehavior;
+  dynamicCollection?: DynamicCollectionOptions;
+  editableCollection: EditableCollection | null;
+  themePluginId?: string;
+};
+
+export const useBottomSheetContent = (props: Props): Return => {
+  const { onPress, viewModel } = props;
+
+  const [state, setState] = useState(viewModel?.getState());
+
+  const [editableItems, setEditableItems] = useState<MenuItem[]>(
+    () => viewModel?.getState().items || []
+  );
+
+  // Subscribe to the viewModel state changes
+  useEffect(() => {
+    return viewModel?.subscribe((nextState) => {
+      setState((state) => {
+        return state === nextState ? state : nextState;
+      });
+    });
+  }, [viewModel]);
+
+  // Subscribe to editable collection items
+  useEffect(() => {
+    if (viewModel?.editableCollection) {
+      const subscription =
+        viewModel.editableCollection.items$.subscribe(setEditableItems);
+
+      return () => subscription.unsubscribe();
+    }
+  }, [viewModel?.editableCollection]);
+
+  /**
+   * Handles an item press:
+   * - Delegates to the parent onPress (which runs the action and awaits it).
+   * - If the item was a leaf action (not a submenu), triggers viewModel.refetch()
+   *   so that checkmarks (isSelected) reflect the updated server state.
+   */
+  const handleItemPress = useCallback(
+    async (item: MenuItem) => {
+      const actions = getMenuItemActions(item);
+      const isSubMenu = actions.some(isPresentSubMenuAction);
+
+      await onPress(item);
+
+      if (!isSubMenu) {
+        await viewModel?.refetch();
+      }
+    },
+    [onPress, viewModel]
+  );
+
+  const goBackOrClose = React.useCallback(() => {
+    if (modalOrchestrator.canGoBack) {
+      modalOrchestrator.back();
+    } else {
+      modalOrchestrator.close();
+    }
+  }, []);
+
+  return {
+    items: viewModel?.editableCollection ? editableItems : state?.items,
+    isLoading: toBooleanWithDefaultFalse(state?.isLoading),
+    error: state?.error,
+    showCentralLoading: toBooleanWithDefaultFalse(
+      state?.isLoading && state?.items.length === 0
+    ),
+    canGoBack: modalOrchestrator.canGoBack,
+    handleItemPress,
+    goBackOrClose,
+    close: useCallback(() => modalOrchestrator.close(), []),
+    role: state?.role,
+    behavior: state?.behavior,
+    dynamicCollection: state?.dynamicCollection,
+    editableCollection: viewModel?.editableCollection || null,
+    themePluginId: state?.themePluginId,
+  };
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-utils",
-  "version": "16.0.0-alpha.7845362739",
+  "version": "16.0.0-alpha.8101951023",
   "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": "16.0.0-alpha.7845362739",
+    "@applicaster/applicaster-types": "16.0.0-alpha.8101951023",
     "buffer": "^5.2.1",
     "camelize": "^1.0.0",
     "dayjs": "^1.11.10",

package/playerUtils/__tests__/contentDataKeys.test.ts

@@ -0,0 +1,297 @@
+import {
+  resolvePlayerContentText,
+  VIDEO_PLAYER_CONTENT_DATA_KEYS,
+  AUDIO_PLAYER_CONTENT_DATA_KEYS,
+  createConfigValueGetter,
+} from "../contentDataKeys";
+
+const entry = {
+  id: "1",
+  type: { value: "audio" },
+  title: "Default Title",
+  summary: "Default Summary",
+  extensions: {
+    episode_name: "Custom Episode",
+    episode_subtitle: "Custom Subtitle",
+    blank: "",
+    show: { name: "Nested Show Name" },
+    genres: ["Drama", "Comedy"],
+    rating: 0,
+    is_featured: true,
+  },
+} as unknown as ZappEntry;
+
+const valueFrom =
+  (config: Record<string, unknown>): GetValue =>
+  (key: string) =>
+    (config[key] ?? null) as never;
+
+const resolveTitle = (config: Record<string, unknown>, target = entry) =>
+  resolvePlayerContentText({
+    entry: target,
+    field: "title",
+    value: valueFrom(config),
+  });
+
+const resolveSubtitle = (config: Record<string, unknown>, target = entry) =>
+  resolvePlayerContentText({
+    entry: target,
+    field: "subtitle",
+    value: valueFrom(config),
+  });
+
+describe("resolvePlayerContentText", () => {
+  describe("backward compatibility", () => {
+    it("returns entry.title when no configuration is stored", () => {
+      expect(resolveTitle({})).toBe("Default Title");
+    });
+
+    it("returns entry.summary when no configuration is stored", () => {
+      expect(resolveSubtitle({})).toBe("Default Summary");
+    });
+
+    it("returns the defaults when the source is explicitly the default option", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "title",
+          title_custom_data_key: "extensions.episode_name",
+        })
+      ).toBe("Default Title");
+
+      expect(
+        resolveSubtitle({
+          subtitle_data_key_source: "summary",
+          subtitle_custom_data_key: "extensions.episode_subtitle",
+        })
+      ).toBe("Default Summary");
+    });
+  });
+
+  describe("custom data key", () => {
+    it("resolves a dot path on the entry for the title", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.episode_name",
+        })
+      ).toBe("Custom Episode");
+    });
+
+    it("resolves a dot path on the entry for the subtitle", () => {
+      expect(
+        resolveSubtitle({
+          subtitle_data_key_source: "other",
+          subtitle_custom_data_key: "extensions.episode_subtitle",
+        })
+      ).toBe("Custom Subtitle");
+    });
+
+    it("resolves a nested dot path", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.show.name",
+        })
+      ).toBe("Nested Show Name");
+    });
+
+    it("resolves a top level entry key", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "summary",
+        })
+      ).toBe("Default Summary");
+    });
+
+    it("trims surrounding whitespace from the configured key", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "  extensions.episode_name  ",
+        })
+      ).toBe("Custom Episode");
+    });
+  });
+
+  describe("fallbacks", () => {
+    it("falls back to the default when the custom key is empty", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "",
+        })
+      ).toBe("Default Title");
+    });
+
+    it("falls back to the default when the custom key is whitespace only", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "   ",
+        })
+      ).toBe("Default Title");
+    });
+
+    it("falls back to the default when the custom key does not resolve", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.does_not_exist",
+        })
+      ).toBe("Default Title");
+    });
+
+    it("falls back to the default when the custom key resolves to an empty string", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.blank",
+        })
+      ).toBe("Default Title");
+    });
+
+    // The Studio field is free text, so a customer can easily stop one
+    // segment short (`extensions.show` rather than `extensions.show.name`)
+    // or aim the key at a list field. Rendering those would throw
+    // "Objects are not valid as a React child" and red-screen every screen
+    // containing the player.
+    it("falls back to the default when the custom key resolves to an object", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.show",
+        })
+      ).toBe("Default Title");
+    });
+
+    it("falls back to the default when the custom key resolves to an array", () => {
+      expect(
+        resolveSubtitle({
+          subtitle_data_key_source: "other",
+          subtitle_custom_data_key: "extensions.genres",
+        })
+      ).toBe("Default Summary");
+    });
+
+    it("falls back to the default when the custom key resolves to a boolean", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.is_featured",
+        })
+      ).toBe("Default Title");
+    });
+
+    // Numbers are renderable, so the guard above must not swallow them -
+    // including 0, which is falsy but perfectly displayable.
+    it("returns a numeric custom value rather than falling back", () => {
+      expect(
+        resolveTitle({
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.rating",
+        })
+      ).toBe(0);
+    });
+  });
+
+  describe("missing entry", () => {
+    it("returns undefined without throwing when the entry is undefined", () => {
+      expect(
+        resolvePlayerContentText({
+          entry: undefined,
+          field: "title",
+          value: valueFrom({}),
+        })
+      ).toBeUndefined();
+    });
+
+    it("returns undefined without throwing when a custom key is set", () => {
+      expect(
+        resolvePlayerContentText({
+          entry: undefined,
+          field: "title",
+          value: valueFrom({
+            title_data_key_source: "other",
+            title_custom_data_key: "extensions.episode_name",
+          }),
+        })
+      ).toBeUndefined();
+    });
+  });
+});
+
+describe("custom data key sets", () => {
+  it("reads the TV video keys when given that key set", () => {
+    const value = createConfigValueGetter({
+      video_player_title_data_key_source: "other",
+      video_player_title_custom_data_key: "extensions.episode_name",
+    });
+
+    expect(
+      resolvePlayerContentText({
+        entry,
+        field: "title",
+        value,
+        dataKeys: VIDEO_PLAYER_CONTENT_DATA_KEYS,
+      })
+    ).toBe("Custom Episode");
+  });
+
+  it("reads the TV audio keys when given that key set", () => {
+    const value = createConfigValueGetter({
+      audio_player_summary_data_key_source: "other",
+      audio_player_summary_custom_data_key: "extensions.episode_subtitle",
+    });
+
+    expect(
+      resolvePlayerContentText({
+        entry,
+        field: "subtitle",
+        value,
+        dataKeys: AUDIO_PLAYER_CONTENT_DATA_KEYS,
+      })
+    ).toBe("Custom Subtitle");
+  });
+
+  it("ignores the mobile keys when a TV key set is supplied", () => {
+    const value = createConfigValueGetter({
+      title_data_key_source: "other",
+      title_custom_data_key: "extensions.episode_name",
+    });
+
+    expect(
+      resolvePlayerContentText({
+        entry,
+        field: "title",
+        value,
+        dataKeys: VIDEO_PLAYER_CONTENT_DATA_KEYS,
+      })
+    ).toBe("Default Title");
+  });
+
+  it("defaults to the mobile key set when dataKeys is omitted", () => {
+    const value = createConfigValueGetter({
+      title_data_key_source: "other",
+      title_custom_data_key: "extensions.episode_name",
+    });
+
+    expect(resolvePlayerContentText({ entry, field: "title", value })).toBe(
+      "Custom Episode"
+    );
+  });
+});
+
+describe("createConfigValueGetter", () => {
+  it("returns null for a missing key", () => {
+    expect(createConfigValueGetter({})("anything")).toBeNull();
+  });
+
+  it("returns null for an undefined configuration", () => {
+    expect(createConfigValueGetter(undefined)("anything")).toBeNull();
+  });
+
+  it("returns the stored value", () => {
+    expect(createConfigValueGetter({ a: "b" })("a")).toBe("b");
+  });
+});