@applicaster/zapp-react-native-utils 16.0.0-rc.8 → 16.0.0-rc.80

package/reactHooks/feed/useBatchLoading.ts

@@ -159,9 +159,17 @@ export const useBatchLoading = (
     options.riverId,
   ]);
 
+  // Initial preload only. Batch loading warms the first batch of component
+  // feeds and signals readiness; the feed set is frozen at mount on purpose.
+  // Per-component loads and reloads (including stale revalidation) are owned by
+  // useFeedLoader in ZappPipesDataConnector. Re-running on `feeds`/input changes
+  // would re-fire on every store update and cause redundant dispatch storms, so
+  // this intentionally runs once on mount.
+  /* eslint-disable @wogns3623/better-exhaustive-deps/exhaustive-deps */
   React.useEffect(() => {
     runBatchLoading();
-  }, [runBatchLoading]); // Adding runBatchLoading as a dependency to ensure that it reloads feeds when clearPipesData is called
+  }, []);
+  /* eslint-enable @wogns3623/better-exhaustive-deps/exhaustive-deps */
 
   React.useEffect(() => {
     // check if all feeds are ready and set hasEverBeenReady to true

package/reactHooks/feed/{usePipesCacheReset.ts → useMarkPipesDataStale.ts}

@@ -2,17 +2,19 @@ import React from "react";
 
 import { getDatasourceUrl } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/getDatasourceUrl";
 import { usePipesContexts } from "@applicaster/zapp-react-native-ui-components/Decorators/RiverFeedLoader/utils/usePipesContexts";
-import { clearPipesData } from "@applicaster/zapp-react-native-redux/ZappPipes";
+import { markPipesDataStale } from "@applicaster/zapp-react-native-redux/ZappPipes";
 
 import { useRoute } from "../navigation";
 import { useAppDispatch } from "@applicaster/zapp-react-native-redux";
 
 /**
- * reset river components cache when screen is unmounted
+ * Mark a river's `clear_cache_on_reload` feeds as stale when the screen is
+ * unmounted. The cached data is kept (so a screen sharing the same feed does
+ * not lose it mid-mount) and revalidated on next access.
  * @param {string} riverId screen id
  * @param {Array} riverComponents list of UI components
  */
-export const usePipesCacheReset = (riverId, riverComponents) => {
+export const useMarkPipesDataStale = (riverId, riverComponents) => {
   const dispatch = useAppDispatch();
   const { screenData, pathname } = useRoute();
   const pipesContexts = usePipesContexts(riverId, pathname);
@@ -35,10 +37,16 @@ export const usePipesCacheReset = (riverId, riverComponents) => {
           );
 
           if (url) {
-            dispatch(clearPipesData(url, { riverId }));
+            dispatch(markPipesDataStale(url, { riverId }));
           }
         }
       });
     };
   }, []);
 };
+
+/**
+ * @deprecated Renamed to `useMarkPipesDataStale`. Kept as an alias for backward
+ * compatibility with external consumers.
+ */
+export const usePipesCacheReset = useMarkPipesDataStale;

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/navigation/__mocks__/index.ts

@@ -38,3 +38,7 @@ export const useNavigationPluginData = jest.fn().mockReturnValue(mockMenu);
 export const useIsNavBarVisible = jest.fn().mockReturnValue(true);
 
 export const useIsScreenActive = jest.fn().mockReturnValue(true);
+
+export const isScreenActiveForRoute = jest.fn(
+  (route, currentRoute) => route === currentRoute
+);

package/reactHooks/navigation/__tests__/useIsScreenActive.test.ts

@@ -0,0 +1,42 @@
+import { isScreenActiveForRoute } from "../useIsScreenActive";
+
+describe("isScreenActiveForRoute", () => {
+  const route = "/river/home/river/tabs";
+  const currentRoute = "/river/home/river/tabs";
+
+  it("returns false when route does not match", () => {
+    expect(
+      isScreenActiveForRoute(route, "/river/home", { visible: false })
+    ).toBe(false);
+  });
+
+  it("keeps underlying screen active when video modal is docked", () => {
+    expect(
+      isScreenActiveForRoute(route, currentRoute, {
+        visible: true,
+        mode: "MINIMIZED",
+      })
+    ).toBe(true);
+  });
+
+  it.each(["FULLSCREEN", "MAXIMIZED", "PIP"])(
+    "deactivates underlying screen when video modal is visible",
+    (mode) => {
+      expect(
+        isScreenActiveForRoute(route, currentRoute, {
+          visible: true,
+          mode,
+        })
+      ).toBe(false);
+    }
+  );
+
+  it("keeps video-modal route active when video modal is open", () => {
+    expect(
+      isScreenActiveForRoute("video-modal/123", currentRoute, {
+        visible: true,
+        mode: "FULLSCREEN",
+      })
+    ).toBe(true);
+  });
+});

package/reactHooks/navigation/index.ts

@@ -32,7 +32,7 @@ export { useNavigationType } from "./useNavigationType";
 
 export { useGetBottomTabBarHeight } from "./useGetBottomTabBarHeight";
 
-export { useIsScreenActive } from "./useIsScreenActive";
+export { useIsScreenActive, isScreenActiveForRoute } from "./useIsScreenActive";
 
 export { useProfilerLogging } from "./useProfilerLogging";
 

package/reactHooks/navigation/useIsScreenActive.ts

@@ -2,20 +2,41 @@ import { ROUTE_TYPES } from "@applicaster/zapp-react-native-utils/navigationUtil
 import { useNavigation } from "./useNavigation";
 import { usePathname } from "./usePathname";
 
-// If current screen is active/focused (visible to the user)
-export const useIsScreenActive = () => {
-  const pathname = usePathname();
-  const { currentRoute, videoModalState } = useNavigation();
+type VideoModalState = {
+  visible?: boolean;
+  mode?: string;
+} | null;
 
-  if (videoModalState.visible) {
-    if (pathname.includes(ROUTE_TYPES.VIDEO_MODAL)) {
+/**
+ * Whether a navigation route should be treated as the active/focused screen.
+ * Docked (MINIMIZED) video modal does not deactivate the underlying screen —
+ * only FULLSCREEN / MAXIMIZED / PIP do.
+ */
+export function isScreenActiveForRoute(
+  route: string,
+  currentRoute: string,
+  videoModalState: VideoModalState
+) {
+  if (videoModalState?.visible) {
+    if (route.includes(ROUTE_TYPES.VIDEO_MODAL)) {
       return true;
     }
 
-    if (["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode)) {
+    if (
+      ["FULLSCREEN", "MAXIMIZED", "PIP"].includes(videoModalState.mode ?? "")
+    ) {
       return false;
     }
+    // MINIMIZED (docked): fall through — underlying screen stays active
   }
 
-  return pathname === currentRoute;
+  return route === currentRoute;
+}
+
+// If current screen is active/focused (visible to the user)
+export const useIsScreenActive = () => {
+  const pathname = usePathname();
+  const { currentRoute, videoModalState } = useNavigation();
+
+  return isScreenActiveForRoute(pathname, currentRoute, videoModalState);
 };

package/reactHooks/state/useComponentScreenState.ts

@@ -41,5 +41,5 @@ export const useComponentScreenState = <T = unknown>(
     [componentId, store]
   );
 
-  return [value, setValue] as const;
+  return [value, setValue];
 };

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 { useRef, useEffect } 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 = (
@@ -40,6 +50,7 @@ export const shouldDispatchData = (
 ) => {
   const currentFeedHasData = feed?.data;
   const isLocalFeed = checkIsLocalFeed(url);
+  const isFeedStale = feed?.stale;
 
-  return !currentFeedHasData || clearCache || isLocalFeed;
+  return !currentFeedHasData || clearCache || isFeedStale || isLocalFeed;
 };

package/reactHooks/videoModal/hooks/useVideoModalScreenData.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { useRivers } from "../../state";
+import { createLogger } from "../../../logger";
+
+const { log_warning } = createLogger({
+  subsystem: "zapp-react-native-utils/reactHooks/videoModal",
+  category: "useVideoModalScreenData",
+});
 
 export const useVideoModalScreenData = ():
   | (ZappEntry & { targetScreen: any }) // TODO: fix ZappEntry type ( was ZappRiver but conflict )
@@ -14,10 +20,22 @@ export const useVideoModalScreenData = ():
   const rivers = useRivers();
 
   return React.useMemo(() => {
-    if (item?.type?.value) {
-      const screenId = contentTypes[item?.type?.value].screen_id;
+    const itemType = item?.type?.value;
+
+    if (!itemType) {
+      return;
+    }
 
-      return { ...item, targetScreen: rivers?.[screenId] };
+    const screenId = contentTypes[itemType]?.screen_id;
+
+    if (!screenId) {
+      log_warning(
+        `Type mapping is missing for item type: ${itemType}, title: ${item.title}`
+      );
+
+      return;
     }
-  }, [item]);
+
+    return { ...item, targetScreen: rivers?.[screenId] };
+  }, [contentTypes, item, rivers]);
 };

package/riverComponetsMeasurementProvider/index.tsx

@@ -1,10 +1,20 @@
 import * as React from "react";
-import { NativeModules, StyleSheet, View } from "react-native";
+import { NativeModules, View, StyleSheet } from "react-native";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
 
-import { isApplePlatform, isWeb } from "../reactUtils";
+import { isApplePlatform, isWeb, isTV } from "../reactUtils";
 import { useRivers } from "../reactHooks";
 
+const isTVPlatform = isTV();
+
+const styles = StyleSheet.create({
+  container: isTVPlatform
+    ? {
+        flex: 1,
+      }
+    : {},
+});
+
 const layoutReducer = (state, { payload }) => {
   return state.map((item, index, _state) => ({
     height: index === payload.index ? payload.height : item.height,
@@ -30,12 +40,6 @@ type MeasurementContext = {
   onLayout: (index: number) => (event) => void;
 };
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-});
-
 const { Logger } = getXray();
 
 const logger = new Logger("general", "ui");

package/stringUtils/__tests__/stringUtils.test.js

@@ -122,6 +122,48 @@ describe("inflate string", () => {
       "this is a string with custom separators"
     );
   });
+
+  it("does not HTML-escape search variables containing single quotes or apostrophes", () => {
+    const string = "https://api.example.com/search?q={{search.query}}";
+    const data = { search: { query: "L'aventure" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.example.com/search?q=L'aventure"
+    );
+  });
+
+  it("search context with straight apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l'a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l'a"
+    );
+  });
+
+  it("search context with backtick apostrophe", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l`a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l`a"
+    );
+  });
+
+  it("search context with right single quotation mark", () => {
+    const string =
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q={{search.q}}";
+
+    const data = { search: { q: "l’a" } };
+
+    expect(inflateString({ string, data })).toBe(
+      "https://api.pc-cms.tele.quebec/api/applicaster/v1/tv/search?q=l’a"
+    );
+  });
 });
 
 describe("objectToReadableString", () => {

package/stringUtils/index.ts

@@ -72,8 +72,8 @@ const valueIsNull = (value) => () => value === null;
 const encodeHelper = "encodeURL";
 
 const encodeHandlebarsExpressions = R.compose(
-  R.replace(/{{([^}]+)}}/g, (match, p1) =>
-    p1.includes("search") ? match : `{{{${encodeHelper} ${p1}}}}`
+  R.replace(/{{([^}]+)}}/g, (_, p1) =>
+    p1.includes("search") ? `{{{${p1}}}}` : `{{{${encodeHelper} ${p1}}}}`
   )
 );
 

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([]);
+  });
+});

package/uiActionsRegistrator/__tests__/subscribe.test.ts

@@ -0,0 +1,107 @@
+import { isActionAvailableFor, uiActionsRegistry } from "../registry";
+
+const value = { invokeAction: jest.fn() };
+
+describe("uiActionsRegistry.subscribe", () => {
+  it("fires on registration and on unregistration", () => {
+    const listener = jest.fn();
+    const unsubscribe = uiActionsRegistry.subscribe(listener);
+
+    const unregister = uiActionsRegistry.registerAction("late-action", value);
+
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unregister();
+
+    expect(listener).toHaveBeenCalledTimes(2);
+
+    unsubscribe();
+  });
+
+  it("lets a listener see the action it was told about", () => {
+    let seen: string[] = [];
+
+    const unsubscribe = uiActionsRegistry.subscribe(() => {
+      seen = uiActionsRegistry
+        .getActions("late-action", { id: "e1" } as any)
+        .map((item) => item.identifier);
+    });
+
+    const unregister = uiActionsRegistry.registerAction("late-action", value);
+
+    expect(seen).toEqual(["late-action"]);
+
+    unregister();
+    unsubscribe();
+  });
+
+  it("stops calling a listener once unsubscribed", () => {
+    const listener = jest.fn();
+
+    uiActionsRegistry.subscribe(listener)();
+
+    uiActionsRegistry.registerAction("another-action", value)();
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it("survives a listener that unsubscribes itself while being notified", () => {
+    const other = jest.fn();
+
+    const unsubscribeOther = uiActionsRegistry.subscribe(other);
+
+    const unsubscribeSelf = uiActionsRegistry.subscribe(() => {
+      unsubscribeSelf();
+    });
+
+    expect(() =>
+      uiActionsRegistry.registerAction("self-removing", value)()
+    ).not.toThrow();
+
+    expect(other).toHaveBeenCalled();
+
+    unsubscribeOther();
+  });
+});
+
+describe("isActionAvailableFor", () => {
+  const entry = { id: "e1" } as any;
+
+  it("shows an action that states no opinion", () => {
+    expect(isActionAvailableFor({ invokeAction: jest.fn() }, entry)).toBe(true);
+  });
+
+  it.each([
+    ["isSupportDownloads"],
+    ["isActionSupported"],
+    ["isActionAvailable"],
+  ])("honours %s", (predicate) => {
+    expect(
+      isActionAvailableFor(
+        { invokeAction: jest.fn(), [predicate]: () => false } as any,
+        entry
+      )
+    ).toBe(false);
+  });
+
+  it("asks only the first predicate the action defines", () => {
+    const isActionAvailable = jest.fn(() => true);
+
+    expect(
+      isActionAvailableFor(
+        {
+          invokeAction: jest.fn(),
+          isSupportDownloads: () => false,
+          isActionAvailable,
+        } as any,
+        entry
+      )
+    ).toBe(false);
+
+    expect(isActionAvailable).not.toHaveBeenCalled();
+  });
+
+  it("treats a missing action as unavailable-free", () => {
+    expect(isActionAvailableFor(undefined, entry)).toBe(true);
+  });
+});

package/uiActionsRegistrator/__tests__/usableActionItems.test.ts

@@ -0,0 +1,52 @@
+import { usableActionItems } from "../usableActionItems";
+
+const action = (identifier: string) =>
+  ({ identifier, action: { invokeAction: jest.fn() } }) as any;
+
+describe("usableActionItems", () => {
+  it("keeps a usable list untouched, in order", () => {
+    const base = [action("share"), action("favorites")];
+
+    expect(usableActionItems(base).map((item) => item.identifier)).toEqual([
+      "share",
+      "favorites",
+    ]);
+  });
+
+  it("keeps the first of a repeated identifier", () => {
+    const firstShare = action("share");
+    const secondShare = action("share");
+
+    const result = usableActionItems([
+      firstShare,
+      action("favorites"),
+      secondShare,
+    ]);
+
+    expect(result.map((item) => item.identifier)).toEqual([
+      "share",
+      "favorites",
+    ]);
+
+    expect(result[0]).toBe(firstShare);
+  });
+
+  it("drops items that cannot be invoked or have no identifier", () => {
+    const result = usableActionItems([
+      action("share"),
+      { identifier: "blank" } as any,
+      { identifier: "no-invoke", action: {} } as any,
+      { action: { invokeAction: jest.fn() } } as any,
+      action("entry_action_0"),
+    ]);
+
+    expect(result.map((item) => item.identifier)).toEqual([
+      "share",
+      "entry_action_0",
+    ]);
+  });
+
+  it("tolerates a missing list", () => {
+    expect(usableActionItems(undefined as any)).toEqual([]);
+  });
+});