@applicaster/zapp-react-native-utils 16.0.0-alpha.9183418480 → 16.0.0-alpha.9506982263

package/playerUtils/__tests__/resolvePlayerTitleSubtitle.test.ts

@@ -0,0 +1,180 @@
+import {
+  resolvePlayerTitleSubtitle,
+  getPlayerContentDataKeys,
+} from "../resolvePlayerTitleSubtitle";
+import {
+  VIDEO_PLAYER_CONTENT_DATA_KEYS,
+  AUDIO_PLAYER_CONTENT_DATA_KEYS,
+} from "../contentDataKeys";
+
+const entry = {
+  id: "1",
+  title: "Default Title",
+  summary: "Default Summary",
+  extensions: {
+    episode_name: "Custom Episode",
+    episode_subtitle: "Custom Subtitle",
+  },
+} as unknown as ZappEntry;
+
+describe("resolvePlayerTitleSubtitle", () => {
+  it("returns entry.title/entry.summary when nothing is configured", () => {
+    expect(
+      resolvePlayerTitleSubtitle({ entry, pluginConfiguration: {} })
+    ).toEqual({
+      title: "Default Title",
+      summary: "Default Summary",
+    });
+  });
+
+  it("returns entry.title/entry.summary when pluginConfiguration is undefined", () => {
+    expect(
+      resolvePlayerTitleSubtitle({ entry, pluginConfiguration: undefined })
+    ).toEqual({
+      title: "Default Title",
+      summary: "Default Summary",
+    });
+  });
+
+  it("returns null for both fields without throwing when entry is missing", () => {
+    expect(
+      resolvePlayerTitleSubtitle({
+        entry: undefined,
+        pluginConfiguration: {
+          title_data_key_source: "other",
+          title_custom_data_key: "extensions.episode_name",
+        },
+      })
+    ).toEqual({ title: null, summary: null });
+  });
+
+  it("does not mutate the entry it is given", () => {
+    const original = JSON.parse(JSON.stringify(entry));
+
+    resolvePlayerTitleSubtitle({
+      entry,
+      pluginConfiguration: {
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.episode_name",
+      },
+    });
+
+    expect(entry).toEqual(original);
+  });
+
+  describe("default (mobile) key set", () => {
+    it("resolves the title from the default (mobile) custom data key", () => {
+      expect(
+        resolvePlayerTitleSubtitle({
+          entry,
+          pluginConfiguration: {
+            title_data_key_source: "other",
+            title_custom_data_key: "extensions.episode_name",
+          },
+        })
+      ).toEqual({
+        title: "Custom Episode",
+        summary: "Default Summary",
+      });
+    });
+
+    it("ignores TV-only custom data keys", () => {
+      expect(
+        resolvePlayerTitleSubtitle({
+          entry,
+          pluginConfiguration: {
+            video_player_title_data_key_source: "other",
+            video_player_title_custom_data_key: "extensions.episode_name",
+          },
+        })
+      ).toEqual({
+        title: "Default Title",
+        summary: "Default Summary",
+      });
+    });
+  });
+
+  describe("dataKeys parameter (e.g. VIDEO_PLAYER_CONTENT_DATA_KEYS)", () => {
+    it("resolves the title from the TV video custom data key when dataKeys is VIDEO_PLAYER_CONTENT_DATA_KEYS", () => {
+      expect(
+        resolvePlayerTitleSubtitle({
+          entry,
+          pluginConfiguration: {
+            video_player_title_data_key_source: "other",
+            video_player_title_custom_data_key: "extensions.episode_name",
+            video_player_summary_data_key_source: "other",
+            video_player_summary_custom_data_key: "extensions.episode_subtitle",
+          },
+          dataKeys: VIDEO_PLAYER_CONTENT_DATA_KEYS,
+        })
+      ).toEqual({
+        title: "Custom Episode",
+        summary: "Custom Subtitle",
+      });
+    });
+
+    it("ignores mobile custom data keys when dataKeys is VIDEO_PLAYER_CONTENT_DATA_KEYS", () => {
+      expect(
+        resolvePlayerTitleSubtitle({
+          entry,
+          pluginConfiguration: {
+            title_data_key_source: "other",
+            title_custom_data_key: "extensions.episode_name",
+          },
+          dataKeys: VIDEO_PLAYER_CONTENT_DATA_KEYS,
+        })
+      ).toEqual({
+        title: "Default Title",
+        summary: "Default Summary",
+      });
+    });
+
+    it("produces a different resolved title than the default key set for the same configuration object", () => {
+      const pluginConfiguration = {
+        title_data_key_source: "other",
+        title_custom_data_key: "extensions.episode_name",
+        video_player_title_data_key_source: "other",
+        video_player_title_custom_data_key: "extensions.episode_subtitle",
+      };
+
+      const defaultResolved = resolvePlayerTitleSubtitle({
+        entry,
+        pluginConfiguration,
+      });
+
+      const tvResolved = resolvePlayerTitleSubtitle({
+        entry,
+        pluginConfiguration,
+        dataKeys: VIDEO_PLAYER_CONTENT_DATA_KEYS,
+      });
+
+      expect(defaultResolved.title).toBe("Custom Episode");
+      expect(tvResolved.title).toBe("Custom Subtitle");
+      expect(defaultResolved.title).not.toBe(tvResolved.title);
+    });
+  });
+});
+
+describe("getPlayerContentDataKeys", () => {
+  it("returns AUDIO_PLAYER_CONTENT_DATA_KEYS for TV audio content", () => {
+    expect(getPlayerContentDataKeys({ isTV: true, isAudioContent: true })).toBe(
+      AUDIO_PLAYER_CONTENT_DATA_KEYS
+    );
+  });
+
+  it("returns VIDEO_PLAYER_CONTENT_DATA_KEYS for TV video content", () => {
+    expect(
+      getPlayerContentDataKeys({ isTV: true, isAudioContent: false })
+    ).toBe(VIDEO_PLAYER_CONTENT_DATA_KEYS);
+  });
+
+  it("returns undefined (the default/mobile key set) on mobile, regardless of content type", () => {
+    expect(
+      getPlayerContentDataKeys({ isTV: false, isAudioContent: true })
+    ).toBeUndefined();
+
+    expect(
+      getPlayerContentDataKeys({ isTV: false, isAudioContent: false })
+    ).toBeUndefined();
+  });
+});

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

@@ -9,6 +9,26 @@ import { Dimensions } from "react-native";
 
 export { getPlayerActionButtons } from "./getPlayerActionButtons";
 
+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",
   "application/vnd.apple.mpegurl",
@@ -37,7 +57,7 @@ export function isLiveLegacy(content) {
   ]);
 
   const durationFromExt = R.path(["extensions", "duration"], content);
-  const durationFromMgr = playerManager.getDuration();
+  const durationFromMgr = playerManager.getInstanceController()?.getDuration();
   const duration = Math.floor(durationFromExt || durationFromMgr);
 
   const isLive = R.anyPass([isNotaValidNumber, R.lte(R.__, 0)])(duration);
@@ -81,7 +101,9 @@ function isLiveByManager(): boolean {
     return true;
   }
 
-  const durationFromPlayerManager = playerManager.getDuration();
+  const durationFromPlayerManager = playerManager
+    .getInstanceController()
+    ?.getDuration();
 
   return isLiveByDuration(durationFromPlayerManager);
 }
@@ -100,21 +122,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/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

@@ -1,8 +1,12 @@
 /// <reference types="@applicaster/applicaster-types" />
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { Context, useContext, useState } from "react";
+import { Context, useCallback, useContext, useEffect, useState } from "react";
 import { ActionsContext } from "@applicaster/zapp-react-native-ui-components/Contexts/ActionsContext";
 
+import {
+  observeEntryState,
+  RegisteredActionValue,
+} from "../../uiActionsRegistrator";
 import { reactHooksLogger } from "../logger";
 
 const logger = reactHooksLogger.addSubsystem("actions");
@@ -46,3 +50,49 @@ export function useActions<T = unknown>(plugId: string): any {
 
   return context;
 }
+
+export type UseEntryActionState = {
+  state: CellActionEntryState | undefined;
+  invokeAction: (options?: InvokeArgsOptions) => void;
+};
+
+/**
+ * Subscribes a component to a single action's state for a given `entry`.
+ *
+ * It observes state changes reactively via `observeEntryState` (which is backed
+ * by the action's `addListener`), seeds the initial value synchronously from
+ * `initialEntryState`, and returns a memoized `invokeAction` that forwards
+ * optimistic `updateState` updates back into local state.
+ *
+ * This is the single, unified way to drive an action button - it works the same
+ * for registry actions, legacy context-provider actions and entry actions.
+ */
+export function useEntryActionState(
+  action: RegisteredActionValue | undefined,
+  entry: ZappEntry | ZappFeed
+): UseEntryActionState {
+  const [state, setState] = useState<CellActionEntryState | undefined>(() =>
+    action?.initialEntryState?.(entry)
+  );
+
+  const entryId = (entry as ZappEntry)?.id;
+
+  useEffect(() => {
+    if (!action) return undefined;
+
+    const subscription = observeEntryState(action, entry).subscribe(setState);
+
+    return () => subscription.unsubscribe();
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+  }, [action, entryId]);
+
+  const invokeAction = useCallback(
+    (options: InvokeArgsOptions = {}) => {
+      action?.invokeAction?.(entry, { updateState: setState, ...options });
+    },
+    // eslint-disable-next-line @wogns3623/better-exhaustive-deps/exhaustive-deps
+    [action, entryId]
+  );
+
+  return { state, invokeAction };
+}

package/reactHooks/cell-click/index.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 import * as R from "ramda";
 import { handleActionSchemeUrl } from "@applicaster/quick-brick-core/App/DeepLinking/URLSchemeHandler/SchemeHandlerHooks/useUrlSchemeHandler";
 import { CellTapContext } from "@applicaster/zapp-react-native-ui-components/Contexts/CellTapContext";
+import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import {
   useNavigation,
   useProfilerLogging,
@@ -28,7 +29,6 @@ import { useScreenStateStore } from "../navigation/useScreenStateStore";
 type Props = {
   item?: ZappEntry;
   index?: number;
-  component?: ZappUIComponent;
   zappPipesData?: ZappPipesData;
 };
 
@@ -37,24 +37,25 @@ type onPressReturnFn =
   | (() => void);
 
 export const useCellClick = ({
-  component,
   zappPipesData,
   item,
-}: Props): onPressReturnFn => {
+}: Props = {}): onPressReturnFn => {
   const { push, currentRoute } = useNavigation();
   const { pathname } = useRoute();
   const screenStateStore = useScreenStateStore();
 
   const onCellTap: Option<Function> = React.useContext(CellTapContext);
   const actionExecutor = React.useContext(ActionExecutorContext);
+  const component = useUIComponentContext();
   const screenData = useCurrentScreenData();
   const screenState = useScreenContext()?.options;
+  const entry = useScreenContext()?.entry;
 
   const cellSelectable = toBooleanWithDefaultTrue(
     component?.rules?.component_cells_selectable
   );
 
-  const [entryContext, setEntryContext] =
+  const [_entryContext, setEntryContext] =
     ZappPipesEntryContext.useZappPipesContext(pathname);
 
   const logTimestamp = useProfilerLogging();
@@ -89,7 +90,8 @@ export const useCellClick = ({
           screenState,
           screenRoute: pathname,
           screenStateStore,
-          entryContext,
+          entryContext: selectedItem,
+          screenEntry: entry,
         });
       }
 
@@ -117,14 +119,20 @@ export const useCellClick = ({
       }
     },
     [
-      onCellTap,
-      currentRoute,
+      item,
       setEntryContext,
-      pathname,
-      push,
       sendAnalyticsOnPress,
+      logTimestamp,
+      pathname,
+      component,
+      onCellTap,
+      entry,
+      actionExecutor,
       screenData,
       screenState,
+      screenStateStore,
+      currentRoute,
+      push,
     ]
   );
 
@@ -138,5 +146,5 @@ export const useCellClick = ({
     onPressRef.current = onPress;
   }
 
-  return React.useCallback(onPressRef.current, []);
+  return React.useCallback(onPressRef.current, [item]);
 };

package/reactHooks/feed/__mocks__/useMarkPipesDataStale.ts

@@ -0,0 +1,4 @@
+export const useMarkPipesDataStale = jest.fn();
+
+/** @deprecated alias of useMarkPipesDataStale */
+export const usePipesCacheReset = useMarkPipesDataStale;

package/reactHooks/feed/__tests__/useInflatedUrl.test.tsx

@@ -242,4 +242,29 @@ describe("useGetUrlInflater", () => {
     const url = result.current(source, mapping);
     expect(url).toBe("https://foo.com/shows/A123?q=user%20query");
   });
+
+  it("handles search queries with apostrophes without HTML entity escaping or URL truncation", () => {
+    const source =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q={{q}}";
+
+    const mapping = {
+      q: { source: "search", property: "q" },
+    };
+
+    const searchContext = getSearchContext("L'aventure", mapping);
+
+    const result = getInflatedDataSourceUrl({
+      source,
+      contexts: {
+        search: searchContext,
+      },
+      mapping,
+    });
+
+    expect(result).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/mobile/search?q=L'aventure"
+    );
+
+    expect(result).not.toContain("'");
+  });
 });

package/reactHooks/feed/index.ts

@@ -6,7 +6,11 @@ export { useEntryScreenId } from "./useEntryScreenId";
 
 export { useBuildPipesUrl } from "./useBuildPipesUrl";
 
-export { usePipesCacheReset } from "./usePipesCacheReset";
+export {
+  useMarkPipesDataStale,
+  // eslint-disable-next-line @typescript-eslint/no-deprecated
+  usePipesCacheReset,
+} from "./useMarkPipesDataStale";
 
 export { useBatchLoading } from "./useBatchLoading";