@applicaster/zapp-react-native-utils 16.0.0-alpha.3683430391 → 16.0.0-alpha.4004661200

package/playerUtils/contentDataKeys.ts

@@ -0,0 +1,134 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+import { isNotEmptyString } from "@applicaster/zapp-react-native-utils/stringUtils";
+
+type GetValue = <T = string | number | null>(key: string) => T;
+
+export type PlayerContentField = "title" | "subtitle";
+
+const CUSTOM_SOURCE = "other";
+
+const DEFAULT_ENTRY_PATH: Record<PlayerContentField, string> = {
+  title: "title",
+  subtitle: "summary",
+};
+
+/**
+ * Configuration keys backing each field, exported so callers can build a
+ * stable configuration getter without duplicating the key strings.
+ */
+export const PLAYER_CONTENT_DATA_KEYS: Record<
+  PlayerContentField,
+  { source: string; custom: string }
+> = {
+  title: {
+    source: "title_data_key_source",
+    custom: "title_custom_data_key",
+  },
+  subtitle: {
+    source: "subtitle_data_key_source",
+    custom: "subtitle_custom_data_key",
+  },
+};
+
+export type PlayerContentDataKeys = Record<
+  PlayerContentField,
+  { source: string; custom: string }
+>;
+
+/**
+ * TV keeps separate Title/Summary configuration per media type. Mobile has
+ * no equivalent split - it shares a single `PLAYER_CONTENT_DATA_KEYS` set
+ * for both video and audio - which is why these sets carry a media-type
+ * prefix (`video_player_*` / `audio_player_*`) and mobile's doesn't.
+ */
+export const VIDEO_PLAYER_CONTENT_DATA_KEYS: PlayerContentDataKeys = {
+  title: {
+    source: "video_player_title_data_key_source",
+    custom: "video_player_title_custom_data_key",
+  },
+  subtitle: {
+    source: "video_player_summary_data_key_source",
+    custom: "video_player_summary_custom_data_key",
+  },
+};
+
+export const AUDIO_PLAYER_CONTENT_DATA_KEYS: PlayerContentDataKeys = {
+  title: {
+    source: "audio_player_title_data_key_source",
+    custom: "audio_player_title_custom_data_key",
+  },
+  subtitle: {
+    source: "audio_player_summary_data_key_source",
+    custom: "audio_player_summary_custom_data_key",
+  },
+};
+
+/**
+ * Builds a GetValue over a plugin configuration object. Callers that hold a
+ * configuration rather than a `value` closure use this instead of hand-rolling
+ * the lookup.
+ */
+export const createConfigValueGetter =
+  (configuration: Option<Record<string, any>>): GetValue =>
+  <T>(key: string) =>
+    (configuration?.[key] ?? null) as T;
+
+type ResolvePlayerContentTextParams = {
+  entry: Option<ZappEntry>;
+  field: PlayerContentField;
+  value: GetValue;
+  dataKeys?: PlayerContentDataKeys;
+};
+
+/**
+ * Resolves the text shown for the player's Title or Subtitle.
+ *
+ * Unless the customer explicitly selected the "Other" data key source and
+ * supplied a resolvable key, this returns the hardcoded entry field the
+ * player has always used, which keeps existing apps unchanged.
+ */
+export const resolvePlayerContentText = ({
+  entry,
+  field,
+  value,
+  dataKeys,
+}: ResolvePlayerContentTextParams): Option<string | number> => {
+  if (!entry) {
+    return undefined;
+  }
+
+  const defaultValue = get(entry, DEFAULT_ENTRY_PATH[field]);
+
+  const { source, custom } = (dataKeys ?? PLAYER_CONTENT_DATA_KEYS)[field];
+
+  if (value(source) !== CUSTOM_SOURCE) {
+    return defaultValue;
+  }
+
+  const customKey = value<Option<string>>(custom);
+
+  // Only trim when the config value really is a string - it comes from
+  // free-text Studio configuration and can be a non-string (or null/undefined),
+  // and calling .trim() on that would throw.
+  const trimmedKey = isNotEmptyString(customKey) ? customKey.trim() : customKey;
+
+  if (!isNotEmptyString(trimmedKey)) {
+    return defaultValue;
+  }
+
+  const customValue = get(entry, trimmedKey);
+
+  if (customValue === null || customValue === undefined || customValue === "") {
+    return defaultValue;
+  }
+
+  // The key is free text in the Studio, so it can easily land on an object or
+  // an array (`extensions.show` instead of `extensions.show.name`). Those
+  // reach <Text> untouched and throw "Objects are not valid as a React child",
+  // so they fall back like every other unusable key.
+  if (typeof customValue !== "string" && typeof customValue !== "number") {
+    return defaultValue;
+  }
+
+  return customValue;
+};

package/playerUtils/index.ts

@@ -7,7 +7,43 @@ import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { getBoolFromConfigValue } from "../configurationUtils";
 import { Dimensions } from "react-native";
 
-export { getPlayerActionButtons } from "./getPlayerActionButtons";
+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 {
+  resolvePlayerContentText,
+  PLAYER_CONTENT_DATA_KEYS,
+  VIDEO_PLAYER_CONTENT_DATA_KEYS,
+  AUDIO_PLAYER_CONTENT_DATA_KEYS,
+  createConfigValueGetter,
+} from "./contentDataKeys";
+
+export type {
+  PlayerContentField,
+  PlayerContentDataKeys,
+} from "./contentDataKeys";
+
+export {
+  resolvePlayerTitleSubtitle,
+  getPlayerContentDataKeys,
+} from "./resolvePlayerTitleSubtitle";
+
+export { isAudioItem } from "./isAudioItem";
 
 export const HLS_MIME_TYPES = [
   "application/x-mpegURL",
@@ -102,21 +138,6 @@ export const isVideoItem = (item: Option<ZappEntry>) => {
   );
 };
 
-export const isAudioItem = (item: Option<ZappEntry>) => {
-  if (
-    isString(item?.content?.type) &&
-    item?.content?.type?.includes?.("audio")
-  ) {
-    return true;
-  }
-
-  if (isString(item?.type?.value) && item?.type?.value?.includes?.("audio")) {
-    return true;
-  }
-
-  return false;
-};
-
 export const isInlineTV = (screenData) => {
   return isTV() && isFilledArray(screenData?.ui_components);
 };

package/playerUtils/isAudioItem.ts

@@ -0,0 +1,26 @@
+import { isString } from "@applicaster/zapp-react-native-utils/typeGuards";
+
+/**
+ * Lives in its own module rather than in `playerUtils/index.ts` because that
+ * barrel imports `playerManager`, and files inside `appUtils/playerManager/`
+ * need this helper. Importing it from the barrel there would create a require
+ * cycle:
+ *
+ *   playerManager/index -> player -> playerUtils/index -> playerManager/index
+ *
+ * Re-exported from the barrel, so existing importers are unaffected.
+ */
+export const isAudioItem = (item: Option<ZappEntry>) => {
+  if (
+    isString(item?.content?.type) &&
+    item?.content?.type?.includes?.("audio")
+  ) {
+    return true;
+  }
+
+  if (isString(item?.type?.value) && item?.type?.value?.includes?.("audio")) {
+    return true;
+  }
+
+  return false;
+};

package/playerUtils/resolvePlayerActions.ts

@@ -0,0 +1,71 @@
+import { selectActionButtons } from "../conf/player/selectors";
+import {
+  usableActionItems,
+  RegisteredAction,
+  resolveActionIdentifiers,
+} from "../uiActionsRegistrator";
+
+export type ResolvePlayerActionsParams = {
+  configuration: any;
+  entry: ZappEntry | ZappFeed;
+  /** Expands the `entry_actions` token; see `resolveActionIdentifiers`. */
+  expandEntryActions?: (entry: ZappEntry | ZappFeed) => RegisteredAction[];
+};
+
+/**
+ * The player's action buttons, resolved against the entry.
+ *
+ * Every `player_action_buttons` token goes through `uiActionsRegistry`, except
+ * `entry_actions`, which the caller expands from the entry itself. The list is
+ * not capped; the overlay decides how many fit and sends the rest to the sheet.
+ */
+export function resolvePlayerActions({
+  configuration,
+  entry,
+  expandEntryActions,
+}: ResolvePlayerActionsParams): RegisteredAction[] {
+  const buttonsString = selectActionButtons(configuration);
+
+  if (!buttonsString) {
+    return [];
+  }
+
+  // Deduped at the source: `player_action_buttons` is a hand-typed string, so
+  // the same identifier can legitimately appear twice. Left alone, a repeat
+  // would be counted twice against the inline limit, rendered twice on the
+  // overlay, and collide as a React key. Items with no `invokeAction` are
+  // dropped here too - they can never do anything.
+  return usableActionItems(
+    resolveActionIdentifiers({
+      identifiers: buttonsString,
+      entry,
+      expandEntryActions,
+    })
+  );
+}
+
+/** One control on the player overlay, before overflow is applied. */
+export type ActionButtonDescriptor =
+  | { kind: "subtitle" }
+  | { kind: "close" }
+  | { kind: "airplay" }
+  | { kind: "action"; action: RegisteredAction };
+
+/**
+ * The Overflow control, produced by `splitOverflow` when more content actions
+ * resolve than fit on the overlay.
+ */
+export type OverflowDescriptor = {
+  kind: "overflow";
+  /**
+   * Every content action, the overlay companion included. An overlay button
+   * renders nothing when its action has no icon, so the companion needs the
+   * sheet as a second home or it could be reachable from nowhere.
+   */
+  additionalActions: RegisteredAction[];
+};
+
+/** What the overlay actually renders, once overflow has been applied. */
+export type PlayerControlDescriptor =
+  | ActionButtonDescriptor
+  | OverflowDescriptor;

package/playerUtils/resolvePlayerTitleSubtitle.ts

@@ -0,0 +1,76 @@
+import {
+  createConfigValueGetter,
+  resolvePlayerContentText,
+  VIDEO_PLAYER_CONTENT_DATA_KEYS,
+  AUDIO_PLAYER_CONTENT_DATA_KEYS,
+} from "./contentDataKeys";
+import type { PlayerContentDataKeys } from "./contentDataKeys";
+
+/**
+ * Resolves the player's Title/Subtitle text as raw values (string | number |
+ * null). Called by `Player.getContent()`, which publishes the result on the
+ * player's content channel; every consumer - the mobile/TV transport
+ * controls, `ProgramInfo`, the TV audio player, the Chromecast controller and
+ * the native bridge - reads it from there rather than resolving for itself.
+ *
+ * `dataKeys` selects which Studio-configured key set backs the resolution:
+ * omit it for the default (mobile) `PLAYER_CONTENT_DATA_KEYS` set, or pass
+ * an explicit set (e.g. `VIDEO_PLAYER_CONTENT_DATA_KEYS`) for platforms/content
+ * types that keep separate Studio configuration for this text. Getting the
+ * key set backwards would make one platform read another platform's
+ * configuration, so every caller must be explicit about which set it wants.
+ *
+ * Keeping this in one place is what stops the dot-path / key-set resolution
+ * logic (`resolvePlayerContentText`) from being duplicated per caller.
+ */
+export const resolvePlayerTitleSubtitle = ({
+  entry,
+  pluginConfiguration,
+  dataKeys,
+}: {
+  entry: Option<ZappEntry>;
+  pluginConfiguration: Option<Record<string, any>>;
+  dataKeys?: PlayerContentDataKeys;
+}): {
+  title: Option<string | number>;
+  summary: Option<string | number>;
+} => {
+  const value = createConfigValueGetter(pluginConfiguration);
+
+  const title =
+    resolvePlayerContentText({ entry, field: "title", value, dataKeys }) ??
+    null;
+
+  const summary =
+    resolvePlayerContentText({
+      entry,
+      field: "subtitle",
+      value,
+      dataKeys,
+    }) ?? null;
+
+  return { title, summary };
+};
+
+/**
+ * Picks which Studio-configured key set backs a Title/Subtitle resolution,
+ * from the full three-way choice: TV audio, TV video, or mobile. Each of
+ * those ships separate Studio configuration for this text; getting this
+ * backwards would make one platform (or content type) read another's
+ * configuration.
+ */
+export const getPlayerContentDataKeys = ({
+  isTV,
+  isAudioContent,
+}: {
+  isTV: boolean;
+  isAudioContent: boolean;
+}): PlayerContentDataKeys | undefined => {
+  if (!isTV) {
+    return undefined;
+  }
+
+  return isAudioContent
+    ? AUDIO_PLAYER_CONTENT_DATA_KEYS
+    : VIDEO_PLAYER_CONTENT_DATA_KEYS;
+};

package/reactHooks/actions/index.ts

@@ -6,6 +6,7 @@ import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Con
 import {
   observeEntryState,
   RegisteredActionValue,
+  uiActionsRegistry,
 } from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
@@ -34,7 +35,13 @@ export function useActions<T = unknown>(plugId: string): any {
       if (!logged) {
         logger.warning({
           message: `useActions: Couldn't find an action for ${plugId} plugin`,
-          data: { actions: context?.actions },
+          // 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 ?? {}),
+          },
         });
 
         setLogged(true);
@@ -80,7 +87,31 @@ export function useEntryActionState(
   useEffect(() => {
     if (!action) return undefined;
 
-    const subscription = observeEntryState(action, entry).subscribe(setState);
+    // 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;
+    }
 
     return () => subscription.unsubscribe();
     // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
@@ -88,6 +119,18 @@ 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
@@ -96,3 +139,25 @@ 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/index.ts

@@ -17,3 +17,5 @@ export * from "./screen";
 export * from "./state";
 
 export * from "./events";
+
+export * from "./utils";

package/reactHooks/layout/index.ts

@@ -49,7 +49,7 @@ export function useStatusBarHeight() {
   });
 }
 
-const getNavbarHeight = () => {
+export const getNavbarHeight = () => {
   return isTV() ? 60 : platformSelect({ ios: 44, android: 56 });
 };
 

package/reactHooks/usePluginConfiguration.ts

@@ -24,7 +24,10 @@ export function parsePluginConfiguration(plugin, manifest) {
   return populateFields(plugin, manifest.custom_configuration_fields);
 }
 
-export function usePluginConfiguration<T, S>(identifier, manifest) {
+export function usePluginConfiguration<T = any, S = Record<string, any>>(
+  identifier: string,
+  manifest?: any
+) {
   const plugins = usePlugins();
 
   const plugin = useMemo(

package/reactHooks/utils/__tests__/index.test.js

@@ -1,5 +1,5 @@
-import { usePrevious, useIsInitialRender } from "../";
-import { renderHook, cleanup } from "@testing-library/react-native";
+import { usePrevious, useIsInitialRender, useForceUpdate } from "../";
+import { renderHook, cleanup, act } from "@testing-library/react-native";
 
 describe("usePrevious", () => {
   it("renders", () => {
@@ -49,3 +49,23 @@ describe("useIsInitialRender", () => {
     expect(result.current).toBe(false);
   });
 });
+
+describe("useForceUpdate", () => {
+  it("forces component to re-render when called", () => {
+    let renderCount = 0;
+
+    const { result } = renderHook(() => {
+      renderCount++;
+
+      return useForceUpdate();
+    });
+
+    expect(renderCount).toBe(1);
+
+    act(() => {
+      result.current();
+    });
+
+    expect(renderCount).toBe(2);
+  });
+});

package/reactHooks/utils/index.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useReducer, useRef } from "react";
 
 /**
  * This hook returns a previous value that was passed to it.
@@ -31,6 +31,16 @@ export const useIsInitialRender = (): boolean => {
   return isInitialRenderRef.current;
 };
 
+/**
+ * Returns a function that forces a re-render of the component when invoked.
+ * @return {() => void}
+ */
+export const useForceUpdate = (): (() => void) => {
+  const [, forceUpdate] = useReducer((n: number) => n + 1, 0);
+
+  return forceUpdate;
+};
+
 export const checkIsLocalFeed = (feedUrl) => feedUrl?.startsWith("pipesv2://");
 
 export const shouldDispatchData = (

package/uiActionsRegistrator/__tests__/resolveActionIdentifiers.test.ts

@@ -0,0 +1,93 @@
+import {
+  parseActionIdentifiers,
+  resolveActionIdentifiers,
+} from "../resolveActionIdentifiers";
+import { uiActionsRegistry } from "../registry";
+
+const action = (identifier: string) =>
+  ({ identifier, action: { invokeAction: jest.fn() } }) as any;
+
+describe("parseActionIdentifiers", () => {
+  it("parses comma-separated identifiers", () => {
+    expect(parseActionIdentifiers(" a, b , ,c ")).toEqual(["a", "b", "c"]);
+  });
+
+  it("parses identifier arrays", () => {
+    expect(parseActionIdentifiers([" a ", "", "b", "  ", "c"])).toEqual([
+      "a",
+      "b",
+      "c",
+    ]);
+  });
+
+  it("returns empty array for nil config", () => {
+    expect(parseActionIdentifiers(null)).toEqual([]);
+    expect(parseActionIdentifiers(undefined)).toEqual([]);
+  });
+});
+
+describe("resolveActionIdentifiers", () => {
+  const entry = { id: "entry-1" } as any;
+
+  beforeEach(() => {
+    jest
+      .spyOn(uiActionsRegistry, "getActions")
+      .mockImplementation((identifier) => [action(identifier)] as any);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("resolves through registry by default", () => {
+    const result = resolveActionIdentifiers({
+      identifiers: "favorites,share",
+      entry,
+    });
+
+    expect(result.map((item) => item.identifier)).toEqual([
+      "favorites",
+      "share",
+    ]);
+
+    expect(uiActionsRegistry.getActions).toHaveBeenCalledWith(
+      "favorites",
+      entry
+    );
+
+    expect(uiActionsRegistry.getActions).toHaveBeenCalledWith("share", entry);
+  });
+
+  it("expands entry_actions through the caller, not the registry", () => {
+    const expanded = [action("entry_action_0"), action("entry_action_1")];
+    const expandEntryActions = jest.fn(() => expanded);
+
+    const unregister = uiActionsRegistry.registerAction("share", {
+      invokeAction: jest.fn(),
+    });
+
+    try {
+      const result = resolveActionIdentifiers({
+        identifiers: "entry_actions,share",
+        entry,
+        expandEntryActions,
+      });
+
+      expect(expandEntryActions).toHaveBeenCalledWith(entry);
+
+      expect(result.map((item) => item.identifier)).toEqual([
+        "entry_action_0",
+        "entry_action_1",
+        "share",
+      ]);
+    } finally {
+      unregister();
+    }
+  });
+
+  it("resolves nothing for entry_actions when the caller cannot expand it", () => {
+    expect(
+      resolveActionIdentifiers({ identifiers: "entry_actions", entry })
+    ).toEqual([]);
+  });
+});