@applicaster/zapp-react-native-utils 15.1.0-rc.9 → 15.1.0

package/actionsExecutor/ActionExecutorContext.tsx

@@ -7,6 +7,7 @@ import {
 } from "./ActionExecutor";
 import {
   batchRemoveAllFromNamespaceForStorage,
+  batchRemoveFromStorage,
   batchSave,
 } from "../zappFrameworkUtils/localStorageHelper";
 import { sessionStorage } from "@applicaster/zapp-react-native-bridge/ZappStorage/SessionStorage";
@@ -37,6 +38,10 @@ import {
 } from "./StorageActions";
 
 import { screenSetVariable, screenToggleFlag } from "./ScreenActions";
+import {
+  StorageValuesToAdd,
+  StorageValuesToRemove,
+} from "../zappFrameworkUtils/types";
 
 export const { log_error, log_info, log_debug } = createLogger({
   subsystem: "ActionExecutorContext",
@@ -87,7 +92,7 @@ function findParentComponent(
 
 const prepareDefaultActions = (actionExecutor) => {
   actionExecutor.registerAction("localStorageSet", async (action) => {
-    const namespaces = action.options.content;
+    const namespaces: StorageValuesToAdd = action.options.content;
     await batchSave(namespaces, localStorage);
     // TODO: Add support for ownershipKey and ownershipNamespace
 
@@ -95,13 +100,29 @@ const prepareDefaultActions = (actionExecutor) => {
   });
 
   actionExecutor.registerAction("sessionStorageSet", async (action) => {
-    const namespaces = action.options.content;
+    const namespaces: StorageValuesToAdd = action.options.content;
     await batchSave(namespaces, sessionStorage);
     // TODO: Add support for ownershipKey and ownershipNamespace
 
     return ActionResult.Success;
   });
 
+  actionExecutor.registerAction("localStorageRemove", async (action) => {
+    const namespaces: StorageValuesToRemove = action.options.content;
+    await batchRemoveFromStorage(namespaces, localStorage);
+    // TODO: Add support for ownershipKey and ownershipNamespace
+
+    return ActionResult.Success;
+  });
+
+  actionExecutor.registerAction("sessionStorageRemove", async (action) => {
+    const namespaces: StorageValuesToRemove = action.options.content;
+    await batchRemoveFromStorage(namespaces, sessionStorage);
+    // TODO: Add support for ownershipKey and ownershipNamespace
+
+    return ActionResult.Success;
+  });
+
   actionExecutor.registerAction(
     "refreshComponent",
     async (_action, context) => {

package/analyticsUtils/AnalyticsEvents/sendMenuClickEvent.ts

@@ -6,9 +6,9 @@ import { postAnalyticEvent } from "../manager";
 import { ANALYTICS_CORE_EVENTS } from "../events";
 
 type AnalyticsDefaultHelperProperties = {
-  analyticsScreenData: AnalyticsScreenProperties;
+  analyticsScreenData?: AnalyticsScreenProperties;
   extraProps: any;
-  props;
+  props?: any;
 };
 
 export const sendMenuClickEvent = ({

package/analyticsUtils/PlayerAnalyticsManager.ts

@@ -23,6 +23,15 @@ class PlayerAnalyticsTrackerFactory {
         return new PlayerAnalyticsTracker();
     }
   }
+
+  onPlayerRegistered(tracker: PlayerAnalyticsTrackerI, player: Player) {
+    tracker.setPlayer(player);
+    tracker.onPlayerPresented();
+  }
+
+  onPlayerUnRegistered(tracker?: PlayerAnalyticsTrackerI) {
+    tracker?.onPlayerClosed();
+  }
 }
 
 export class PlayerAnalyticsManager implements PlayerLifecycleListener {
@@ -70,7 +79,7 @@ export class PlayerAnalyticsManager implements PlayerLifecycleListener {
     }
 
     const tracker = this.getTracker(player.playerId);
-    tracker.setPlayer(player);
+    this.trackerFactory.onPlayerRegistered(tracker, player);
 
     const analyticsListener = new AnalyticPlayerListener({
       analyticsTracker: tracker,
@@ -84,6 +93,7 @@ export class PlayerAnalyticsManager implements PlayerLifecycleListener {
   };
 
   onUnRegistered = (player: Player) => {
+    this.trackerFactory.onPlayerUnRegistered(this.trackers[player.playerId]);
     player.removeListener(AnalyticPlayerListener.analyticsListenerID);
     delete this.trackers[player.playerId];
   };

package/analyticsUtils/__tests__/analyticsMapper.test.ts

@@ -74,4 +74,39 @@ describe("Analytics Mapper", () => {
     const rules = fixtures.ACPEventRules;
     await setConfigRunMapTest(rules, fixtures.ACPEventEvents);
   });
+
+  it("Does not let an ignore rule short-circuit later events", async () => {
+    await setConfigRunMapTest(
+      fixtures.ignoreOrderingRules,
+      fixtures.ignoreOrderingEvents
+    );
+  });
+
+  it("Keeps the original name when rename is empty", async () => {
+    await setConfigRunMapTest(
+      fixtures.emptyRenameRules,
+      fixtures.emptyRenameEvents
+    );
+  });
+
+  it("Renames via a regex with no named groups", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexNonNamedFullMatchRules,
+      fixtures.regexNonNamedFullMatchEvents
+    );
+  });
+
+  it("Substitutes every named group in a regex rename", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexMultiGroupRenameRules,
+      fixtures.regexMultiGroupRenameEvents
+    );
+  });
+
+  it("Does not fall back to event match when a regex rule does not match", async () => {
+    await setConfigRunMapTest(
+      fixtures.regexEventNoFallbackRules,
+      fixtures.regexEventNoFallbackEvents
+    );
+  });
 });

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testACP_events.json

@@ -23,7 +23,7 @@
     "second": {
       "name": "EventName",
       "params": {
-        "acp": 1
+        "acp": "1"
       }
     }
   }

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testBlockUnlistedParams_rules.json

@@ -12,4 +12,4 @@
     }
   ],
   "strategy": "allowUnlisted"
-}
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "keep_me", "params": {} },
+    "second": { "name": "keep_me", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEmptyRenameKeepsName_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "event": "keep_me", "ignore": false, "rename": "", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testEventRegex_events.json

@@ -2,17 +2,11 @@
   {
     "first": {
       "name": "Screen viewed: Ads & redirects",
-      "params": {
-        "ignored_param": "removed_value",
-        "kept_param": "kept_value"
-      }
+      "params": {}
     },
     "second": {
       "name": "Screen Ads & redirects",
-      "params": {
-        "ignored_param": "removed_value",
-        "kept_param": "kept_value"
-      }
+      "params": {}
     }
   }
-]
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_events.json

@@ -0,0 +1,18 @@
+[
+  {
+    "first": {
+      "name": "screen_view",
+      "params": {}
+    },
+    "second": {
+      "name": "page_view",
+      "params": {}
+    }
+  },
+  {
+    "first": {
+      "name": "player_presented",
+      "params": {}
+    }
+  }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testIgnoreOrdering_rules.json

@@ -0,0 +1,16 @@
+{
+  "rules": [
+    {
+      "event": "player_presented",
+      "ignore": true,
+      "strategy": "allowUnlisted"
+    },
+    {
+      "event": "screen_view",
+      "ignore": false,
+      "rename": "page_view",
+      "strategy": "allowUnlisted"
+    }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "my_event", "params": {} },
+    "second": { "name": "my_event", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexEventNoFallback_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "event": "my_event", "ignore": false, "rename": "should_not_apply", "regex": "wont_match_.*", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "play-video", "params": {} },
+    "second": { "name": "play_video", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexMultiGroupRename_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "ignore": false, "rename": "$<first>_$<second>", "regex": "(?<first>[a-z]+)-(?<second>[a-z]+)", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_events.json

@@ -0,0 +1,4 @@
+[
+  { "first": { "name": "screen_view", "params": {} },
+    "second": { "name": "renamed", "params": {} } }
+]

package/analyticsUtils/__tests__/fixtures/analytics_mapper_testRegexNonNamedFullMatch_rules.json

@@ -0,0 +1,6 @@
+{
+  "rules": [
+    { "ignore": false, "rename": "renamed", "regex": "screen_view", "strategy": "allowUnlisted" }
+  ],
+  "strategy": "allowUnlisted"
+}

package/analyticsUtils/__tests__/fixtures/index.js

@@ -14,6 +14,16 @@ import blockUnlistedEventEvents from "./analytics_mapper_testBlockUnlistedEvents
 import blockUnlistedEventRules from "./analytics_mapper_testBlockUnlistedEvents_rules.json";
 import ACPEventEvents from "./analytics_mapper_testACP_events.json";
 import ACPEventRules from "./analytics_mapper_testACP_rules.json";
+import emptyRenameRules from "./analytics_mapper_testEmptyRenameKeepsName_rules.json";
+import emptyRenameEvents from "./analytics_mapper_testEmptyRenameKeepsName_events.json";
+import ignoreOrderingRules from "./analytics_mapper_testIgnoreOrdering_rules.json";
+import ignoreOrderingEvents from "./analytics_mapper_testIgnoreOrdering_events.json";
+import regexEventNoFallbackRules from "./analytics_mapper_testRegexEventNoFallback_rules.json";
+import regexEventNoFallbackEvents from "./analytics_mapper_testRegexEventNoFallback_events.json";
+import regexMultiGroupRenameRules from "./analytics_mapper_testRegexMultiGroupRename_rules.json";
+import regexMultiGroupRenameEvents from "./analytics_mapper_testRegexMultiGroupRename_events.json";
+import regexNonNamedFullMatchRules from "./analytics_mapper_testRegexNonNamedFullMatch_rules.json";
+import regexNonNamedFullMatchEvents from "./analytics_mapper_testRegexNonNamedFullMatch_events.json";
 
 export const fixtures = {
   renameRules,
@@ -32,4 +42,14 @@ export const fixtures = {
   blockUnlistedEventRules,
   ACPEventEvents,
   ACPEventRules,
+  emptyRenameRules,
+  emptyRenameEvents,
+  ignoreOrderingRules,
+  ignoreOrderingEvents,
+  regexEventNoFallbackRules,
+  regexEventNoFallbackEvents,
+  regexMultiGroupRenameRules,
+  regexMultiGroupRenameEvents,
+  regexNonNamedFullMatchRules,
+  regexNonNamedFullMatchEvents,
 };

package/analyticsUtils/analyticsMapper.ts

@@ -76,7 +76,10 @@ class StateHolder {
       delete this.pluckedParams[prefix];
     }
 
-    return this._cap?.[suffix];
+    // Stringify so values match the native iOS/Android mappers (which coerce
+    // analyticsCustomProperties values to strings) — keeps GA4 data consistent
+    // across web/LG/Samsung and native platforms.
+    return this._cap?.[suffix]?.toString() ?? null;
   }
 
   private async getFromLocalAndSession(

package/analyticsUtils/playerAnalyticsTracker.ts

@@ -4,8 +4,14 @@ import { isTrue } from "@applicaster/zapp-react-native-utils/booleanUtils";
 import { postAnalyticEvent } from "./manager";
 import { isLive } from "../playerUtils";
 import { extensionsEvents } from "./AnalyticsEvents/helper";
-import { AD_EVENT, EVENT_TYPES, PLAYER_DISPLAY_STATES } from "./events";
+import {
+  AD_EVENT,
+  EVENT_TYPES,
+  GENERAL_EVENT,
+  PLAYER_DISPLAY_STATES,
+} from "./events";
 import { Player } from "../appUtils/playerManager/player";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
 
 export interface PlayerAnalyticsTrackerI {
   handleAnalyticEvent(
@@ -13,6 +19,8 @@ export interface PlayerAnalyticsTrackerI {
     eventData?: QuickBrickPlayer.EventData
   ): void;
   setPlayer(player: Player): void;
+  onPlayerPresented(): void;
+  onPlayerClosed(): void;
 }
 
 export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
@@ -26,6 +34,15 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
     this.player = player;
   }
 
+  onPlayerPresented() {
+    this.handleAnalyticEvent(GENERAL_EVENT.player_presented);
+  }
+
+  onPlayerClosed() {
+    this.handleAnalyticEvent(GENERAL_EVENT.session_end);
+    this.handleAnalyticEvent(GENERAL_EVENT.player_closed);
+  }
+
   isAdBreak(event: string): boolean {
     const adBreakEvents = [
       AD_EVENT.ad_break_start,
@@ -180,7 +197,8 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
       this.entry?.extensions?.free || this.entry?.extensions?.isFree;
 
     const title = this.entry?.title;
-    const streamType = isLive(this.entry) ? "live" : "vod"; // Todo: determine other types, channel, podcast, aod
+    const isStreamLive = isLive(this.entry);
+    const streamType = isStreamLive ? "live" : "vod"; // Todo: determine other types, channel, podcast, aod
 
     const currentPosition = this.getCurrentPosition(
       event,
@@ -201,6 +219,7 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
     );
 
     const playerState = this.getPlayerState();
+    const playerType = this.player?.playerPluginId;
 
     const analyticsCustomProperties = extensionsEvents(this.entry?.extensions);
 
@@ -210,7 +229,11 @@ export class PlayerAnalyticsTracker implements PlayerAnalyticsTrackerI {
       name: title,
       media_type: mediaType,
       stream_type: streamType,
-      duration: mediaDuration,
+      player_type: playerType,
+      // We do not pass duration for live streams anymore (it's now seekableDuration),
+      //  but we can't mark it as optional in Analytics Mapper yet,
+      //  so we set it to -1 for live streams
+      duration: isStreamLive && isNil(mediaDuration) ? -1 : mediaDuration,
       current_position: currentPosition,
       player_state: playerState,
       stream_format: contentType,

package/cellUtils/index.ts

@@ -1,7 +1,7 @@
 import * as R from "ramda";
 import { dayjs } from "../dateUtils";
-import validateColor from "validate-color";
 
+import { isValidColor } from "@applicaster/zapp-react-native-utils/colorUtils";
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
 import {
   capitalize,
@@ -468,15 +468,13 @@ export const getColorFromData = ({
   data,
   valueFromLayout,
 }: GetColorFromData): string => {
-  // Temporary hack to fix color validation when alpha is floating point number
-  // https://github.com/dreamyguy/validate-color/issues/44
-  if (validateColor(valueFromLayout.replace(".00", ""))) {
+  if (isValidColor(valueFromLayout)) {
     return valueFromLayout;
   }
 
   const pathValue = R.path(valueFromLayout.split("."), data);
 
-  if (pathValue && validateColor(pathValue)) {
+  if (pathValue && isValidColor(pathValue)) {
     return pathValue;
   }
 

package/colorUtils/__tests__/isTransparentColor.test.ts

@@ -0,0 +1,76 @@
+import { isTransparentColor } from "..";
+
+describe("isTransparentColor", () => {
+  it("returns true for transparent keyword and rgba colors with zero alpha", () => {
+    const transparentColors = [
+      "transparent",
+      "rgba(0,0,0,0)",
+      "rgba(255, 255, 255, 0)",
+      "rgba(0,0,0,0.0)",
+      "rgba(0,0,0,0.00)",
+      "rgba(0,0,0, 0)",
+      "hsla(0,0%,0%,0)",
+    ];
+
+    expect.assertions(transparentColors.length);
+
+    transparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(true);
+    });
+  });
+
+  it("returns false for valid colors that are not fully transparent", () => {
+    const nonTransparentColors = [
+      "red",
+      "#fff",
+      "#ffffff",
+      "rgb(0,0,0)",
+      "rgba(0,0,0)",
+      "rgba(0,0,0,0.5)",
+      "rgba(255, 255, 255, 0.3)",
+      "rgba(255, 255, 255, 1.0)",
+      "rgba(239,239,239,1.0)",
+      "currentColor",
+      "inherit",
+      "#00000000",
+      "#fff0",
+    ];
+
+    expect.assertions(nonTransparentColors.length);
+
+    nonTransparentColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for case variants of the transparent keyword", () => {
+    expect(isTransparentColor("Transparent")).toBe(false);
+    expect(isTransparentColor("TRANSPARENT")).toBe(false);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      " rgba(0,0,0,0) ",
+      "transparent ",
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isTransparentColor(color)).toBe(false);
+    });
+  });
+
+  it("returns false for nullish and non-string values", () => {
+    expect(isTransparentColor(undefined)).toBe(false);
+    expect(isTransparentColor(null)).toBe(false);
+    expect(isTransparentColor(123)).toBe(false);
+    expect(isTransparentColor({})).toBe(false);
+    expect(isTransparentColor([])).toBe(false);
+  });
+});

package/colorUtils/__tests__/isValidColor.test.ts

@@ -0,0 +1,70 @@
+import { isValidColor } from "..";
+
+describe("isValidColor", () => {
+  it("returns true for valid hex colors", () => {
+    const validHexColors = ["#fff", "#ffffff", "#FF0000", "#000", "#abc123"];
+
+    expect.assertions(validHexColors.length);
+
+    validHexColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = [
+      "rgb(255,0,0)",
+      "rgb(255, 0, 0)",
+      "rgba(255,0,0,0.5)",
+      "rgba(255, 0, 0, 0.5)",
+    ];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid named and special CSS colors", () => {
+    const validNamedColors = ["red", "transparent", "currentColor", "inherit"];
+
+    expect.assertions(validNamedColors.length);
+
+    validNamedColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+
+  it("returns true for valid hsl colors", () => {
+    expect(isValidColor("hsl(0, 100%, 50%)")).toBe(true);
+  });
+
+  it("returns false for invalid color strings", () => {
+    const invalidColors = [
+      "invalid",
+      "",
+      "#gggggg",
+      "#fff.00",
+      "unset",
+      undefined,
+      null,
+    ];
+
+    expect.assertions(invalidColors.length);
+
+    invalidColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(false);
+    });
+  });
+
+  it("returns true for valid rgb and rgba colors", () => {
+    const validRgbColors = ["rgba(239,239,239,1.0)"];
+
+    expect.assertions(validRgbColors.length);
+
+    validRgbColors.forEach((color) => {
+      expect(isValidColor(color)).toBe(true);
+    });
+  });
+});

package/colorUtils/index.ts

@@ -0,0 +1,50 @@
+import validateColor from "validate-color";
+import { isNil } from "@applicaster/zapp-react-native-utils/utils";
+import { isString } from "@applicaster/zapp-react-native-utils/stringUtils";
+
+const normalizeRgbaAlpha = (color: string): string => {
+  return color.replace(
+    /^rgba\(([^)]+),\s*(\d+(?:\.\d+)?)\s*\)$/i,
+    (_, rgb, alpha) => {
+      const alphaValue = parseFloat(alpha);
+
+      if (!Number.isFinite(alphaValue) || !Number.isInteger(alphaValue)) {
+        return color;
+      }
+
+      return `rgba(${rgb},${alphaValue})`;
+    }
+  );
+};
+
+export const isValidColor = (color: string): boolean => {
+  if (isNil(color) || !isString(color)) {
+    return false;
+  }
+
+  if (validateColor(color)) {
+    return true;
+  }
+
+  // validate-color rejects integer alpha values written as floats (e.g. 1.0)
+  // https://github.com/dreamyguy/validate-color/issues/44
+  const normalizedColor = normalizeRgbaAlpha(color);
+
+  return normalizedColor !== color && validateColor(normalizedColor);
+};
+
+function isRgbaAlphaZero(color: string): boolean {
+  const layers = color
+    .replace("rgba(", "")
+    .replace(")", "")
+    .split(",")
+    .map((layer) => layer.trim());
+
+  return Number(layers[3]) === 0;
+}
+
+export const isTransparentColor = (color: string): boolean => {
+  return (
+    isValidColor(color) && (color === "transparent" || isRgbaAlphaZero(color))
+  );
+};

package/manifestUtils/keys.js

@@ -43,6 +43,7 @@ const TV_PLATFORMS = [
   "tvos_for_quickbrick",
   "samsung_tv",
   "lg_tv",
+  "vidaa",
   "vizio",
 ];
 

package/manifestUtils/platformIsTV.js

@@ -4,6 +4,7 @@ function platformIsTV(platform) {
     "android_tv_for_quickbrick",
     "amazon_fire_tv_for_quickbrick",
     "lg_tv",
+    "vidaa",
     "samsung_tv",
     "web",
     "vizio",

package/package.json

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

package/pipesUtils/__tests__/buildUrlWithQuery.test.ts

@@ -0,0 +1,33 @@
+import { buildUrlWithQuery } from "../withPipesEndpoint";
+
+describe("buildUrlWithQuery", () => {
+  it("returns the url unchanged when requestParams is null", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", null)).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when requestParams has no params", () => {
+    expect(buildUrlWithQuery("https://foo.com/path", { headers: {} })).toBe(
+      "https://foo.com/path"
+    );
+  });
+
+  it("returns the url unchanged when url is empty", () => {
+    expect(buildUrlWithQuery("", { params: { a: "1" } })).toBe("");
+  });
+
+  it("appends params to a url with no existing query", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path", { params: { token: "abc" } })
+    ).toBe("https://foo.com/path?token=abc");
+  });
+
+  it("merges params with an existing query string", () => {
+    expect(
+      buildUrlWithQuery("https://foo.com/path?existing=1", {
+        params: { token: "abc" },
+      })
+    ).toBe("https://foo.com/path?existing=1&token=abc");
+  });
+});

package/pipesUtils/__tests__/withPipesEndpoint.test.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { render } from "@testing-library/react-native";
+import { Text } from "react-native";
+
+const mockedUseBuildPipesUrl = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/reactHooks/feed", () => ({
+  useBuildPipesUrl: (args) => mockedUseBuildPipesUrl(args),
+}));
+
+const { withPipesEndpoint } = require("../withPipesEndpoint");
+
+// eslint-disable-next-line react/display-name
+const Wrapped = React.forwardRef((props: any, _ref) => (
+  <Text testID="wrapped">{`${props.uri}|${JSON.stringify(props.headers)}`}</Text>
+));
+
+describe("withPipesEndpoint", () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it("renders nothing while the endpoint context is resolving", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: null });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { queryByTestId } = render(<Decorated uri="https://foo.com" />);
+
+    expect(queryByTestId("wrapped")).toBeNull();
+  });
+
+  it("passes the uri through unchanged when there are no params", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({ requestParams: {} });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      "https://foo.com/path|{}"
+    );
+  });
+
+  it("merges resolved params into the uri and forwards headers", () => {
+    mockedUseBuildPipesUrl.mockReturnValue({
+      requestParams: {
+        params: { token: "abc" },
+        headers: { Authorization: "Bearer xyz" },
+      },
+    });
+
+    const Decorated = withPipesEndpoint(Wrapped);
+    const { getByTestId } = render(<Decorated uri="https://foo.com/path" />);
+
+    expect(getByTestId("wrapped").props.children).toBe(
+      'https://foo.com/path?token=abc|{"Authorization":"Bearer xyz"}'
+    );
+  });
+});

package/pipesUtils/index.ts

@@ -0,0 +1 @@
+export { withPipesEndpoint, buildUrlWithQuery } from "./withPipesEndpoint";

package/pipesUtils/withPipesEndpoint.tsx

@@ -0,0 +1,54 @@
+import React, { forwardRef, RefObject } from "react";
+import URL from "url";
+
+import { useBuildPipesUrl } from "@applicaster/zapp-react-native-utils/reactHooks/feed";
+
+/**
+ * Merges the query params resolved from a pipes endpoint context into the url.
+ * Returns the url unchanged when there is nothing to merge.
+ */
+export function buildUrlWithQuery(url: string, requestParams): string {
+  if (!url || !requestParams?.params) {
+    return url;
+  }
+
+  const parsedURL = URL.parse(url, true);
+
+  parsedURL.query = { ...parsedURL.query, ...requestParams.params };
+  parsedURL.search = null;
+
+  return URL.format(parsedURL);
+}
+
+type Props = {
+  uri: string;
+} & Record<string, unknown>;
+
+/**
+ * HOC that resolves the wrapped component's `uri` against its matching Zapp
+ * Pipes endpoint. Endpoint context keys are added as query params (merged into
+ * the uri) and as request `headers`. Rendering is deferred until the context
+ * has been resolved so the component never loads without its required headers.
+ */
+export function withPipesEndpoint(Component) {
+  function WithPipesEndpoint(props: Props, ref: RefObject<unknown>) {
+    const { requestParams } = useBuildPipesUrl({ url: props.uri });
+
+    if (requestParams !== null) {
+      const urlWithQuery = buildUrlWithQuery(props.uri, requestParams);
+
+      return (
+        <Component
+          ref={ref}
+          {...props}
+          uri={urlWithQuery}
+          headers={requestParams.headers || {}}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return forwardRef(WithPipesEndpoint);
+}

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,
+      }
+    : undefined,
+});
+
 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");