@applicaster/zapp-react-native-utils 15.1.14 → 15.1.15-alpha.4236143002

package/entryActions/buildEntryActions.ts

@@ -0,0 +1,167 @@
+/// <reference types="@applicaster/applicaster-types" />
+import { createLogger } from "../logger";
+import { ActionExecutionContext } from "../actionsExecutor/types";
+import { RegisteredAction } from "../uiActionsRegistrator";
+
+import {
+  resolveButtonAsset,
+  resolveButtonLabel,
+  resolveExplicitLabel,
+} from "./aliasPresentation";
+import { EntryAction, EntryActionDeps } from "./types";
+
+const { log_info, log_warning, log_error } = createLogger({
+  subsystem: "EntryActions",
+  category: "EntryAction",
+});
+
+const ENTRY_ACTION_IDENTIFIER_PREFIX = "entry_action";
+
+/** True for actions inflated from `entry.extensions.entry_action`. */
+export function isEntryAction(item: RegisteredAction): boolean {
+  return item?.source === "entry";
+}
+
+function isValidEntryAction(value: unknown): value is EntryAction {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+
+  const { button, actions } = value as EntryAction;
+
+  return (
+    (typeof button?.title === "string" ||
+      typeof button?.label === "string" ||
+      typeof button?.alias === "string") &&
+    Array.isArray(actions)
+  );
+}
+
+function createEntryAction(
+  entryAction: EntryAction,
+  index: number,
+  entry: ZappEntry | ZappFeed,
+  deps: EntryActionDeps
+): RegisteredAction {
+  const { button, actions, dismiss_on_action } = entryAction;
+
+  const identifier = `${ENTRY_ACTION_IDENTIFIER_PREFIX}_${index}`;
+  const primaryAction = actions.length > 0 ? actions[0] : null;
+
+  const actionState = primaryAction
+    ? deps.actionExecutor?.getActionState?.(primaryAction.type, entry)
+    : null;
+
+  // An explicit title/label outranks the executor's action state; the
+  // alias-derived defaults only fill in when neither produced anything.
+  const label: CellActionEntryState["label"] =
+    resolveExplicitLabel(button) ||
+    actionState?.label ||
+    resolveButtonLabel(button, deps.aliasPresentation);
+
+  const asset: CellActionEntryState["asset"] =
+    button?.iconURL ||
+    actionState?.asset ||
+    resolveButtonAsset(button, deps.aliasPresentation);
+
+  const initialState = { state: 0, label, asset };
+
+  return {
+    identifier,
+    source: "entry",
+    action: {
+      initialEntryState: () => initialState,
+      invokeAction: async (
+        invokedEntry: ZappEntry,
+        options: InvokeArgsOptions = {}
+      ) => {
+        if (dismiss_on_action === true) {
+          options.dismiss?.();
+        }
+
+        log_info(
+          `invokeAction: entry action "${identifier}" triggered for entry "${invokedEntry?.id}"`,
+          { identifier, entryId: invokedEntry?.id, actionCount: actions.length }
+        );
+
+        // Both of these leave the user with a button that does nothing when
+        // tapped, and neither throws, so they would otherwise be invisible.
+        if (actions.length === 0) {
+          log_warning(
+            `invokeAction: entry action "${identifier}" on entry "${invokedEntry?.id}" declares no actions - the tap does nothing`,
+            { identifier, entryId: invokedEntry?.id }
+          );
+        }
+
+        if (typeof deps.actionExecutor?.handleActions !== "function") {
+          log_warning(
+            `invokeAction: no action executor available for entry action "${identifier}" - the tap does nothing`,
+            { identifier, entryId: invokedEntry?.id }
+          );
+        }
+
+        try {
+          await deps.actionExecutor?.handleActions(actions, {
+            entry: invokedEntry,
+            entryContext: invokedEntry,
+            ...deps.actionContext,
+            ...(options.component ? { component: options.component } : {}),
+          } as ActionExecutionContext);
+        } catch (error) {
+          log_error(
+            `invokeAction: entry action "${identifier}" failed for entry "${invokedEntry?.id}"`,
+            {
+              identifier,
+              entryId: invokedEntry?.id,
+              // Types only - the action payloads are backend supplied and may
+              // carry user data.
+              actionTypes: actions.map((action) => action?.type),
+              error,
+            }
+          );
+        }
+      },
+    },
+  };
+}
+
+/**
+ * Builds the list of actions declared on an entry via
+ * `entry.extensions.entry_action`.
+ */
+export function buildEntryActions(
+  entry: ZappEntry | ZappFeed,
+  deps: EntryActionDeps
+): RegisteredAction[] {
+  const entryId = (entry as ZappEntry)?.id;
+  const raw = (entry as any)?.extensions?.entry_action;
+
+  // Most entries simply declare no actions. This provider is resolved for
+  // every entry on every render, so saying so would drown everything else.
+  if (raw === undefined || raw === null) {
+    return [];
+  }
+
+  if (!Array.isArray(raw)) {
+    log_warning(
+      `buildEntryActions: entry "${entryId}" has extensions.entry_action of type ${typeof raw} instead of an array - no entry actions will be shown`,
+      { entryId, receivedType: typeof raw }
+    );
+
+    return [];
+  }
+
+  const valid = raw.filter(isValidEntryAction);
+  const invalid = raw.length - valid.length;
+
+  if (invalid > 0) {
+    log_warning(
+      `buildEntryActions: ${invalid} invalid entry action(s) skipped for entry "${entryId}"`,
+      { entryId, total: raw.length, invalid }
+    );
+  }
+
+  return valid.map((entryAction, index) =>
+    createEntryAction(entryAction, index, entry, deps)
+  );
+}

package/entryActions/index.ts

@@ -0,0 +1,17 @@
+export { buildEntryActions, isEntryAction } from "./buildEntryActions";
+
+export {
+  ALIAS_ASSETS,
+  ALIAS_LABELS,
+  resolveButtonAsset,
+  resolveButtonLabel,
+  resolveExplicitLabel,
+} from "./aliasPresentation";
+
+export type {
+  EntryAction,
+  EntryActionDeps,
+  EntryActionExecutionContext,
+} from "./types";
+
+export type { AliasPresentation } from "./aliasPresentation";

package/entryActions/types.ts

@@ -0,0 +1,39 @@
+/// <reference types="@applicaster/applicaster-types" />
+import type { ActionExecutorContextType } from "../actionsExecutor/ActionExecutorContext";
+import type { AliasPresentation } from "./aliasPresentation";
+
+/**
+ * A single action declared by the backend on an entry, under
+ * `entry.extensions.entry_action`.
+ */
+export type EntryAction = {
+  button: {
+    title?: string;
+    label?: string;
+    alias?: string;
+    iconURL?: string;
+  };
+  actions: ZappActionType[];
+  dismiss_on_action?: boolean;
+};
+
+/**
+ * Everything `buildEntryActions` needs from the surrounding React tree in order
+ * to execute an entry action. Supplied lazily so the registered provider always
+ * reads the freshest screen context.
+ */
+export type EntryActionDeps = {
+  actionExecutor: ActionExecutorContextType;
+  actionContext: EntryActionExecutionContext;
+  /** App-supplied labels/icons for backend aliases; defaults are used without it. */
+  aliasPresentation?: AliasPresentation;
+};
+
+/** The screen the action is executed against, spread into the execution context. */
+export type EntryActionExecutionContext = {
+  screenData?: unknown;
+  screenState?: unknown;
+  screenRoute?: string;
+  screenStateStore?: unknown;
+  screenEntry?: unknown;
+};

package/manifestUtils/defaultManifestConfigurations/player.js

@@ -204,6 +204,20 @@ 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",
@@ -747,7 +761,7 @@ function getPlayerConfiguration({ platform, version }) {
         label: "Player action buttons",
         initial_value: null,
         label_tooltip:
-          "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",
+          "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: "text_input",
       },
       {
@@ -1047,6 +1061,13 @@ 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,6 +23,7 @@ const {
 const { buttonKey } = require("./buttons");
 const { tvBadges } = require("./tvBadges");
 const { mobileProgressBar, tvProgressBar } = require("./progressBar");
+const { getModalBlockStyles, getModalLocalizations } = require("./modalBlocks");
 
 const {
   secondaryImage,
@@ -52,4 +53,6 @@ module.exports = {
   getUpdatedSecondaryImageKeys,
   DEFAULT_GRADIENT_IMAGE,
   compact,
+  getModalBlockStyles,
+  getModalLocalizations,
 };

package/manifestUtils/modalBlocks.js

@@ -0,0 +1,304 @@
+function getModalBlockStyles({ prefix }) {
+  return [
+    {
+      group: true,
+      label: "Header Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_backgroundColor`,
+          label: "Header Background Color",
+          initial_value: "rgba(30,30,30,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_container_default_borderBottomColor`,
+          label: "Header Border Bottom Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_container_default_borderBottomSize`,
+          label: "Header Border Bottom Size",
+          initial_value: 0,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_title_default_fontColor`,
+          label: "Header Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_fontSize`,
+          label: "Header Title Font Size",
+          initial_value: 18,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_title_default_lineHeight`,
+          label: "Header Title Line Height",
+          initial_value: 32,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_default_backgroundColor`,
+          label: "Close Button Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_close_button_hover_backgroundColor`,
+          label: "Close Button Hover Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_header_close_button_asset`,
+          label: "Close Button Icon Asset",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_backgroundColor`,
+          label: "Header Action Button Background Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_hover_backgroundColor`,
+          label: "Header Action Button Hover Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_header_action_buttons_default_fontColor`,
+          label: "Header Action Button Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_fontSize`,
+          label: "Header Action Button Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_header_action_buttons_default_borderRadius`,
+          label: "Header Action Button Radius",
+          initial_value: 16,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Item Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_default_backgroundColor`,
+          label: "Item Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_background_focus_backgroundColor`,
+          label: "Item Focus/Touch Color",
+          initial_value: "rgba(62,62,62,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_borderRadius`,
+          label: "Item Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingTop`,
+          label: "Item Padding Top",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingBottom`,
+          label: "Item Padding Bottom",
+          initial_value: 8,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingLeft`,
+          label: "Item Padding Left",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_background_default_paddingRight`,
+          label: "Item Padding Right",
+          initial_value: 10,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_width`,
+          label: "Item Image Width",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_height`,
+          label: "Item Image Height",
+          initial_value: 48,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_image_default_borderRadius`,
+          label: "Item Image Radius",
+          initial_value: 6,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_1_default_fontColor`,
+          label: "Item Title Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_1_default_fontSize`,
+          label: "Item Title Font Size",
+          initial_value: 15,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_item_text_label_2_default_fontColor`,
+          label: "Item Subtitle Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_item_text_label_2_default_fontSize`,
+          label: "Item Subtitle Font Size",
+          initial_value: 13,
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Action Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_default_backgroundColor`,
+          label: "Action Background Color",
+          initial_value: "transparent",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_background_hover_backgroundColor`,
+          label: "Action Hover/Touch Color",
+          initial_value: "rgba(46,46,46,1)",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_borderRadius`,
+          label: "Action Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingTop`,
+          label: "Action Padding Top",
+          initial_value: 14,
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_background_default_paddingBottom`,
+          label: "Action Padding Bottom",
+          initial_value: 14,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_action_title_default_fontColor`,
+          label: "Action Title Color",
+          initial_value: "#EFEFEF",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_action_title_default_fontSize`,
+          label: "Action Title Font Size",
+          initial_value: 14,
+        },
+        {
+          type: "uploader",
+          key: `${prefix}_style_action_trailing_icon_chevron_asset`,
+          label: "Action Chevron Asset",
+        },
+      ],
+    },
+    {
+      group: true,
+      label: "Button Styles",
+      folded: true,
+      fields: [
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_default_backgroundColor`,
+          label: "Button Background Color",
+          initial_value: "#FFFFFF",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_focus_backgroundColor`,
+          label: "Button Focus Color",
+          initial_value: "#E0E0E0",
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_background_inactive_backgroundColor`,
+          label: "Button Inactive Color",
+          initial_value: "#999999",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_background_default_borderRadius`,
+          label: "Button Corner Radius",
+          initial_value: 12,
+        },
+        {
+          type: "color_picker_rgba",
+          key: `${prefix}_style_button_title_default_fontColor`,
+          label: "Button Title Color",
+          initial_value: "#000000",
+        },
+        {
+          type: "number_input",
+          key: `${prefix}_style_button_title_default_fontSize`,
+          label: "Button Title Font Size",
+          initial_value: 15,
+        },
+      ],
+    },
+  ];
+}
+
+function getModalLocalizations({ prefix }) {
+  return [
+    {
+      type: "text_input",
+      label: "Queue Header Title",
+      key: `${prefix}_header_title`,
+      initial_value: "Queue",
+    },
+    {
+      type: "text_input",
+      label: "Go To Queue Action Label",
+      key: `${prefix}_label_go_to_queue`,
+      initial_value: "Go To Queue",
+    },
+  ];
+}
+
+module.exports = {
+  getModalBlockStyles,
+  getModalLocalizations,
+};

package/modalState/ContentViewModel.ts

@@ -0,0 +1,113 @@
+import { BehaviorSubject, Observable } from "rxjs";
+import {
+  Content,
+  MenuItem,
+  SelectionBehavior,
+  DynamicCollectionOptions,
+} from "./types";
+import { loadItemsFromSource } from "../actionsExecutor/actions/openBottomSheet";
+import { resolveEditableCollection } from "./EditableCollectionRegistry";
+import { EditableCollection } from "./EditableCollection";
+
+export interface ContentState {
+  items: MenuItem[];
+  isLoading: boolean;
+  error?: Error | string;
+  role?: string;
+  behavior?: SelectionBehavior;
+  dynamicCollection?: DynamicCollectionOptions;
+  themePluginId?: string;
+}
+
+export class ContentViewModel {
+  private state$: BehaviorSubject<ContentState>;
+  readonly itemsUrl?: string;
+  public editableCollection: EditableCollection | null = null;
+  private content: Content;
+
+  constructor(content: Content) {
+    this.content = content;
+    this.itemsUrl = content.itemsUrl;
+
+    this.state$ = new BehaviorSubject<ContentState>({
+      items: content.items || [],
+      isLoading: false,
+      role: content.role,
+      behavior: content.behavior,
+      dynamicCollection: content.dynamicCollection,
+      themePluginId: content.themePluginId,
+    });
+
+    this.initEditableCollection(content);
+
+    if (this.itemsUrl && this.state$.value.items.length === 0) {
+      this.refetch();
+    }
+  }
+
+  private initEditableCollection(content: Content) {
+    this.editableCollection = resolveEditableCollection(content, this.refetch);
+  }
+
+  getState = (): ContentState => this.state$.value;
+
+  get stateObservable(): Observable<ContentState> {
+    return this.state$.asObservable();
+  }
+
+  subscribe = (listener: (state: ContentState) => void) => {
+    const subscription = this.state$.subscribe(listener);
+
+    return () => subscription.unsubscribe();
+  };
+
+  private updateState(partialState: Partial<ContentState>) {
+    this.state$.next({ ...this.state$.value, ...partialState });
+  }
+
+  refetch = async () => {
+    if (!this.itemsUrl) return;
+
+    this.updateState({ isLoading: true, error: undefined });
+
+    try {
+      const separator = this.itemsUrl.includes("?") ? "&" : "?";
+      const cacheBustedUrl = `${this.itemsUrl}${separator}_t=${Date.now()}`;
+
+      const { items, role, behavior, dynamicCollection } =
+        await loadItemsFromSource(cacheBustedUrl);
+
+      this.content = {
+        ...this.content,
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+      };
+
+      this.updateState({
+        items,
+        role,
+        behavior,
+        dynamicCollection,
+        isLoading: false,
+      });
+
+      if (this.editableCollection) {
+        // Reuse the existing collection instance. Pushing the freshly loaded
+        // server items replaces any optimistic local state with the
+        // authoritative result (and rolls forward a successful mutation).
+        this.editableCollection.sync?.(items);
+      } else {
+        // The collection may only become resolvable once options arrive from
+        // the feed (e.g. inline content had none). Create it lazily here.
+        this.initEditableCollection(this.content);
+      }
+    } catch (err) {
+      this.updateState({
+        error: err?.message || "Failed to load",
+        isLoading: false,
+      });
+    }
+  };
+}