@applicaster/zapp-react-native-utils 15.0.0-alpha.4225160176 → 15.0.0-alpha.4232833803

package/actionUtils/index.ts

@@ -0,0 +1,7 @@
+import { Image } from "react-native";
+import { isTV } from "../reactUtils";
+
+export const resolveDefaultAssetUri = (source: string | number): string =>
+  isTV()
+    ? (source as string)
+    : Image.resolveAssetSource(source as number)?.uri || "";

package/actionsExecutor/ActionExecutorContext.tsx

@@ -24,6 +24,10 @@ import {
   resolveObjectValues,
 } from "../appUtils/contextKeysManager/contextResolver";
 import { useNavigation, useRivers } from "../reactHooks";
+import {
+  getInflatedDataSourceUrl,
+  getSearchContext,
+} from "../reactHooks/feed/useInflatedUrl";
 
 import { useContentTypes } from "@applicaster/zapp-react-native-redux/hooks";
 import { useSubscriberFor } from "../reactHooks/useSubscriberFor";
@@ -104,12 +108,42 @@ const prepareDefaultActions = (actionExecutor) => {
     async (_action, context) => {
       const dispatch = appStore.getDispatch();
 
-      const dataSource =
-        context?.component?.data?.source ||
-        findParentComponent(context?.component.id, context?.screenData)?.data
-          ?.source;
+      const parentComponent = findParentComponent(
+        context?.component?.id,
+        context?.screenData
+      );
+
+      const componentSource = context?.component?.data?.source;
+
+      const componentData = componentSource
+        ? context.component.data
+        : parentComponent?.data;
+
+      const source = componentData?.source;
+      const mapping = componentData?.mapping;
 
-      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`);
+      let dataSource = source;
+
+      if (source && mapping) {
+        dataSource =
+          getInflatedDataSourceUrl({
+            source,
+            contexts: {
+              entry: context?.entryContext,
+              screen: context?.screenData,
+              search: getSearchContext(null, mapping),
+            },
+            mapping,
+          }) || source;
+      }
+
+      log_info(`handleAction: refreshComponent for dataSource:${dataSource}`, {
+        source,
+        inflatedUrl: dataSource,
+        mapping,
+        entryContextId: context?.entryContext?.id,
+        entryId: context?.entry?.id,
+      });
 
       // TODO: In theory we should wait callback to complete, before completing the action, but now it's not needed
       // TODO: handle focused item removal

package/appUtils/focusManagerAux/utils/index.ts

@@ -142,6 +142,10 @@ export const isTabsScreenOnContentFocused = (node) => {
 };
 
 export const isCurrentFocusOnMenu = (node) => {
+  if (isNil(node)) {
+    return false;
+  }
+
   if (isRoot(node)) {
     return false;
   }
@@ -154,10 +158,14 @@ export const isCurrentFocusOnMenu = (node) => {
     return false;
   }
 
-  return isCurrentFocusOnMenu(node.parent);
+  return isCurrentFocusOnMenu(node?.parent);
 };
 
 export const isCurrentFocusOnContent = (node) => {
+  if (isNil(node)) {
+    return false;
+  }
+
   if (isRoot(node)) {
     return false;
   }
@@ -170,7 +178,7 @@ export const isCurrentFocusOnContent = (node) => {
     return true;
   }
 
-  return isCurrentFocusOnContent(node.parent);
+  return isCurrentFocusOnContent(node?.parent);
 };
 
 export const isCurrentFocusOn = (id, node) => {

package/appUtils/playerManager/index.ts

@@ -33,6 +33,7 @@ function deprecationWarning(method) {
 export interface PlayerLifecycleListener {
   onRegistered?: (player: Player) => void;
   onUnRegistered?: (player: Player) => void;
+  onCastingChanged?: (isCasting: boolean) => void;
 }
 
 type PlayersMap = {
@@ -253,10 +254,18 @@ export class PlayerManager {
 
   public registerCastingReceiver(receiver: Player) {
     this.castingReceiver = receiver;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(true);
+    });
   }
 
   public unregisterCastingReceiver() {
     this.castingReceiver = null;
+
+    this.lifecycleListeners.forEach((listener) => {
+      listener.onCastingChanged?.(false);
+    });
   }
 
   /**

package/appUtils/playerManager/player.ts

@@ -258,7 +258,7 @@ export class Player {
   };
 
   isAd = () => {
-    return !!this.playerState.adState || this.playerState.isInAdBreak;
+    return !!this.playerState.adState || !!this.playerState.isInAdBreak;
   };
 
   isSeeking = () => {

package/appUtils/playerManager/usePlayer.tsx

@@ -22,7 +22,6 @@ export const usePlayer = (playerId?: string): Player => {
 
   const isCasting = playerManager.isCasting();
 
-  // TODO: We need to prerender when we start/stop casting, fix this
   const getPlayer = (playerId, isCasting) =>
     getControlledPlayer(playerId, isCasting);
 
@@ -46,7 +45,7 @@ export const usePlayer = (playerId?: string): Player => {
     return playerManager.addLifecycleListener({
       onRegistered: (player) => {
         if (playerIdToUse === player.playerId) {
-          setPlayer(getPlayer(playerIdToUse, isCasting));
+          setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
         }
       },
       onUnRegistered: (player) => {
@@ -54,8 +53,11 @@ export const usePlayer = (playerId?: string): Player => {
           setPlayer(null);
         }
       },
+      onCastingChanged: () => {
+        setPlayer(getPlayer(playerIdToUse, playerManager.isCasting()));
+      },
     } as PlayerLifecycleListener);
-  }, [playerIdToUse, isCasting]);
+  }, [playerIdToUse]);
 
   return player;
 };

package/cellUtils/__tests__/cellUtils.test.ts

@@ -3,6 +3,7 @@ import {
   ifEmptyUseFallback,
   textTransform,
   getKeyForLabel,
+  getDataTransformForLabel,
   getLabel,
   getAspectRatio,
   getCellWidth,
@@ -56,6 +57,44 @@ describe("getKeyForLabel", () => {
   });
 });
 
+describe("getDataTransformForLabel", () => {
+  it("returns dataKey when dataKey is not other", () => {
+    expect(getDataTransformForLabel(VAL.dataKey, VAL.customKey)).toEqual(
+      VAL.dataKey
+    );
+  });
+
+  it("returns customKey when dataKey is other", () => {
+    expect(getDataTransformForLabel(VAL.other, VAL.customKey)).toEqual(
+      VAL.customKey
+    );
+  });
+
+  it("preserves full date formats containing dots", () => {
+    expect(getDataTransformForLabel(VAL.other, "DD.MM.YYYY")).toEqual(
+      "DD.MM.YYYY"
+    );
+  });
+
+  it("returns default date format when selected key is null or undefined", () => {
+    expect(getDataTransformForLabel(EMPTY.nulls, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(EMPTY.undef, VAL.customKey)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.nulls)).toEqual(
+      "DD/MM/YYYY"
+    );
+
+    expect(getDataTransformForLabel(VAL.other, EMPTY.undef)).toEqual(
+      "DD/MM/YYYY"
+    );
+  });
+});
+
 describe("getLabel", () => {
   it("returns a string from dataKey's path", () => {
     expect(getLabel(VAL.dataKey, VAL.customKey)(entry)).toEqual(entry.id);

package/cellUtils/index.ts

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import dayjs from "dayjs";
+import { dayjs } from "../dateUtils";
 import validateColor from "validate-color";
 
 import { transformColorCode as fixColorHexCode } from "@applicaster/zapp-react-native-utils/transform";
@@ -31,6 +31,16 @@ export const getKeyForLabel = (dataKey, customKey) => {
   return keyToUse.split(".");
 };
 
+/**
+ * Provides `format` for date formatting. Returns customKey if dataKey is "other", otherwise it returns dataKey.
+ * Should consist of valid dayjs tokens - https://day.js.org/docs/en/parse/string-format#list-of-all-available-parsing-tokens
+ */
+export const getDataTransformForLabel = (dataKey, customKey) => {
+  const keyToUse = dataKey === CUSTOM_KEY ? customKey : dataKey;
+
+  return keyToUse ?? "DD/MM/YYYY";
+};
+
 /**
  * This method will return true if the argument passed to it is either empty or nil
  * The method prevents zero from being evaluated as falsey in an || condition

package/dateUtils/__tests__/dayjs.test.ts

@@ -1,7 +1,4 @@
 import { dayjs } from "../index";
-import customParseFormat from "dayjs/plugin/customParseFormat";
-
-dayjs.extend(customParseFormat);
 
 describe("dayjs", () => {
   describe("basic functionality", () => {

package/dateUtils/index.ts

@@ -4,12 +4,14 @@ import timezone from "dayjs/plugin/timezone";
 import isoWeek from "dayjs/plugin/isoWeek";
 import duration from "dayjs/plugin/duration";
 import relativeTime from "dayjs/plugin/relativeTime";
+import customParseFormat from "dayjs/plugin/customParseFormat";
 
 // Extend dayjs with plugins
 dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.extend(isoWeek);
 dayjs.extend(duration);
+dayjs.extend(customParseFormat);
 
 dayjs.extend(relativeTime, {
   thresholds: [

package/manifestUtils/_internals/__tests__/index.test.js

@@ -0,0 +1,41 @@
+const {
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
+} = require("..");
+
+describe("manifestUtils/_internals helpers", () => {
+  it("checks a key suffix", () => {
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_button_enabled")
+    ).toBe(true);
+
+    expect(
+      isKeyHasSuffix("button_enabled", "mobile_button_1_assign_action")
+    ).toBe(false);
+  });
+
+  it("checks key against multiple suffixes", () => {
+    const suffixes = ["font_color", "focused_font_color", "text_transform"];
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_text_transform")
+    ).toBe(true);
+
+    expect(
+      isKeyHasAnyOfSuffixes(suffixes, "mobile_button_1_asset_alignment")
+    ).toBe(false);
+  });
+
+  it("generates stable key names using a prefix", () => {
+    const withMobileButtonPrefix = getKeyWithPrefixGenerator("mobile_button_2");
+
+    expect(withMobileButtonPrefix("display_mode")).toBe(
+      "mobile_button_2_display_mode"
+    );
+
+    expect(withMobileButtonPrefix("asset_enabled")).toBe(
+      "mobile_button_2_asset_enabled"
+    );
+  });
+});

package/manifestUtils/_internals/index.js

@@ -174,6 +174,36 @@ function generateFieldsFromDefaultsWithoutPrefixedLabel(
   )(fields);
 }
 
+/**
+ * Checks whether a generated manifest field key ends with the given suffix.
+ *
+ * @param {string} suffix
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasSuffix = (suffix, key) => key.endsWith(`_${suffix}`);
+
+/**
+ * Checks whether a generated manifest field key ends with any supported suffix.
+ *
+ * @param {string[]} suffixes
+ * @param {string} key
+ * @returns {boolean}
+ */
+const isKeyHasAnyOfSuffixes = (suffixes, key) =>
+  suffixes.some((suffix) => key.endsWith(`_${suffix}`));
+
+/**
+ * Creates a helper that prefixes a manifest field suffix with a shared key stem.
+ *
+ * @param {string} prefix
+ * @returns {(suffix: string) => string}
+ */
+function getKeyWithPrefixGenerator(prefix) {
+  // expect prefix as lower snake case, e.g. "mobile_buttons_container"
+  return (suffix) => `${prefix}_${suffix}`;
+}
+
 module.exports = {
   toSnakeCase,
   toCamelCase,
@@ -185,4 +215,7 @@ module.exports = {
   getDefaultConfiguration,
   compact,
   replaceUnderscoreToSpace,
+  isKeyHasSuffix,
+  isKeyHasAnyOfSuffixes,
+  getKeyWithPrefixGenerator,
 };

package/manifestUtils/fieldUtils/__tests__/fieldUtils.test.js

@@ -0,0 +1,49 @@
+const {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+} = require("..");
+
+describe("manifestUtils/fieldUtils", () => {
+  it("appends conditions and adds all_conditions when there is more than one condition", () => {
+    const config = {
+      key: "mobile_button_1_width",
+      conditional_fields: [
+        { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      ],
+    };
+
+    const result = withConditional([
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ])(config);
+
+    expect(result.conditional_fields).toEqual([
+      { key: "styles/mobile_button_1_button_enabled", condition_value: true },
+      { key: "styles/mobile_button_1_display_mode", condition_value: "fixed" },
+    ]);
+
+    expect(result.rules).toBe("all_conditions");
+  });
+
+  it("creates category-prefixed conditional key", () => {
+    expect(
+      getConditionalKey("mobile_buttons_container_position", "styles")
+    ).toBe("styles/mobile_buttons_container_position");
+  });
+
+  it("creates conditional fields with default category and with raw key", () => {
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true)
+    ).toEqual({
+      key: "styles/mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+
+    expect(
+      createConditionalField("mobile_button_1_asset_enabled", true, null)
+    ).toEqual({
+      key: "mobile_button_1_asset_enabled",
+      condition_value: true,
+    });
+  });
+});

package/manifestUtils/fieldUtils/index.js

@@ -0,0 +1,54 @@
+/**
+ * Appends new conditional_fields from conditions array
+ * to config.conditional_fields
+ * if there are more than 1 condition, sets rules to "all_conditions"
+ *
+ * @param {Array<{key: string, condition_value: unknown}>} conditions
+ * @returns {(config: object) => object}
+ */
+const withConditional = (conditions) => (config) => {
+  const conditional_fields = [
+    ...(config.conditional_fields || []),
+    ...conditions,
+  ];
+
+  const next = { ...config, conditional_fields };
+
+  if (conditional_fields.length > 1) {
+    return { ...next, rules: "all_conditions" };
+  }
+
+  return next;
+};
+
+/**
+ * Builds key for conditional fields prepending category, e.g. "styles/mobile_buttons_container_position"
+ *
+ * @param {string} key
+ * @param {string} category
+ * @returns {string}
+ */
+function getConditionalKey(key, category) {
+  return `${category}/${key}`;
+}
+
+/**
+ * Returns a conditional field object for manifest visibility rules.
+ *
+ * @param {string} key
+ * @param {unknown} condition_value
+ * @param {string|null} [category="styles"] Pass `null` to use the key as-is.
+ * @returns {{key: string, condition_value: unknown}}
+ */
+function createConditionalField(key, condition_value, category = "styles") {
+  return {
+    key: category ? getConditionalKey(key, category) : key,
+    condition_value,
+  };
+}
+
+module.exports = {
+  withConditional,
+  getConditionalKey,
+  createConditionalField,
+};

package/manifestUtils/index.js

@@ -8,6 +8,7 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { buildMobileActionButtonGroups } = require("./mobileAction/groups");
 const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
@@ -43,6 +44,7 @@ module.exports = {
   tvMenuLabel,
   tvActionButtonsContainer,
   tvActionButton,
+  buildMobileActionButtonGroups,
   mobileCellLabel,
   tvCellLabel,
   tvBadges,