@applicaster/zapp-react-native-utils 15.0.0-alpha.1107527841 → 15.0.0-alpha.1123384087

package/README.md

@@ -245,12 +245,6 @@ const connectionType = useConnectionInfo(true);
 
 `@applicaster/zapp-react-native/reactHooks`
 
-- `useFeedRefresh: ({ reloadData: function, component: { id: boolean | string, rules: {enable_data_refreshing: boolean, refreshing_interval: number} } }) => void` - Hook will call `reloadData` function, in the specified intervals if `enable_data_refreshing` is set to true;
-
-```javascript
-useFeedRefresh({ reloadData, component });
-```
-
 - `useFeedLoader: ({ feedUrl: string, pipesOptions?: { clearCache?: boolean, loadLocalFavourites?: boolean, silentRefresh?: boolean} }) => ({data: ?ApplicasterFeed, loading: boolean, url: string, error: Error,reloadData: (silentRefresh?: boolean) => void, loadNext: () => void})` - Hook will load data to the redux store and return a feed for the provided DSP URL. If the data for the provided url was already loaded, it will return that value
 
 ```javascript

package/appUtils/focusManager/treeDataStructure/Tree/__tests__/Tree.test.js

@@ -373,3 +373,49 @@ describe("addNode", () => {
     checkParents(tree.root);
   });
 });
+
+describe("findInTree", () => {
+  function createNode(id, children) {
+    return {
+      id,
+      children,
+    };
+  }
+
+  it("returns a direct child match from root children", () => {
+    const tree = new Tree(treeLoaded);
+    const direct = createNode("direct-node");
+
+    tree.root.children = [direct];
+
+    expect(tree.findInTree("direct-node")).toEqual(direct);
+  });
+
+  it("returns a nested descendant match", () => {
+    const tree = new Tree(treeLoaded);
+    const nested = createNode("nested-node");
+    const intermediate = createNode("intermediate-node", [nested]);
+    const rootNode = createNode("root-node", [intermediate]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("nested-node")).toEqual(nested);
+  });
+
+  it("returns null when node id does not exist", () => {
+    const tree = new Tree(treeLoaded);
+    const leaf = createNode("leaf-node");
+    const rootNode = createNode("root-node", [leaf]);
+
+    tree.root.children = [rootNode];
+
+    expect(tree.findInTree("missing-node")).toEqual(null);
+  });
+
+  it("returns null when tree has no children", () => {
+    const tree = new Tree(treeLoaded);
+    tree.root.children = null;
+
+    expect(tree.findInTree("any-node")).toEqual(null);
+  });
+});

package/appUtils/focusManager/treeDataStructure/Tree/index.js

@@ -205,31 +205,31 @@ export class Tree {
    * @returns founded node or null
    */
   findInTree(id) {
-    const retVal = null;
-
-    return this.findInArray(id, this.root.children, retVal);
+    return this.findInArray(id, this.root.children);
   }
 
-  findInArray(id, children, retVal) {
-    if (!retVal && children) {
-      retVal = children.find((obj) => obj.id === id);
+  findInArray(id, children) {
+    if (!children) {
+      return null;
+    }
 
-      if (!retVal) {
-        children.forEach((child) => {
-          if (child.children) {
-            retVal = this.findInArray(id, child.children, retVal);
+    const directMatch = children.find((obj) => obj.id === id);
 
-            if (retVal) {
-              return retVal;
-            }
-          }
-        });
-      } else {
-        return retVal;
+    if (directMatch) {
+      return directMatch;
+    }
+
+    for (const child of children) {
+      if (child.children) {
+        const nestedMatch = this.findInArray(id, child.children);
+
+        if (nestedMatch) {
+          return nestedMatch;
+        }
       }
     }
 
-    return retVal;
+    return null;
   }
 
   /**

package/appUtils/focusManagerAux/utils/index.ts

@@ -13,7 +13,7 @@ import {
 
 import {
   getFocusableId,
-  SCREEN_PICKER_CONTAINER,
+  isTabsScreenContentContainerId,
 } from "@applicaster/zapp-react-native-utils/screenPickerUtils";
 
 // run check each 300 ms
@@ -24,8 +24,6 @@ const isTopMenu = (node) => startsWith(QUICK_BRICK_NAVBAR, node?.id);
 const isContent = (node) => startsWith(QUICK_BRICK_CONTENT, node?.id);
 const isRoot = (node) => node?.id === "root";
 
-const isScrenPicker = (node) => startsWith(SCREEN_PICKER_CONTAINER, node?.id);
-
 type Props = {
   maxTimeout: number;
   conditionFn: () => boolean;
@@ -136,7 +134,7 @@ export const isTabsScreenOnContentFocused = (node) => {
     return false;
   }
 
-  if (isScrenPicker(node)) {
+  if (isTabsScreenContentContainerId(node?.id)) {
     return true;
   }
 

package/appUtils/focusManagerAux/utils/utils.ios.ts

@@ -106,9 +106,8 @@ const focusableNativeViewRegistration = ({ focusableView, focusableGroup }) => {
   );
 };
 
-export const firstFocusableViewRegistrationFactory = () =>
+export const firstFocusableViewInContentRegistrationFactory = () =>
   focusableViewRegistrationSubject$.pipe(
-    take(1), // we care about only first FocusableView registration
     switchMap((focusableView) =>
       // start waiting registration of its parent FocusableGroup
       focusableGroupRegistrationSubject$.pipe(
@@ -126,7 +125,11 @@ export const firstFocusableViewRegistrationFactory = () =>
         focusableView,
         focusableGroup,
       })
-    )
+    ),
+    filter(({ focusableView }) =>
+      isPartOfContent(focusManager.focusableTree, focusableView.id)
+    ),
+    take(1) // we care about only first FocusableView registration
   );
 
 // registration on RN level(into RN focusManager)

package/appUtils/playerManager/playerNative.ts

@@ -229,8 +229,9 @@ export class PlayerNative extends Player {
   };
 
   closeNativePlayer = () => {
-    // TODO: Delete does not work
+    // TODO: Delete, does not work (component is null)
     this.currentPlayerComponent()?.closeNativePlayer?.();
+    this.getPlayerModule()?.stopBackgroundPlayback?.();
   };
 
   togglePlayPause = () => {

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/defaultManifestConfigurations/player.js

@@ -707,22 +707,6 @@ function getPlayerConfiguration({ platform, version }) {
   }
 
   if (isMobile(platform)) {
-    localizations.fields.push(
-      {
-        type: "text_input",
-        label: "Restrict playback on mobile networks alert title",
-        key: "mobile_connection_restricted_alert_title",
-        initial_value: "Restricted Connection Type",
-      },
-      {
-        type: "text_input",
-        label: "Restrict playback on mobile networks alert message",
-        key: "mobile_connection_restricted_alert_message",
-        initial_value:
-          "This content can only be viewed over a Wi-Fi or LAN network.",
-      }
-    );
-
     general.fields.push(
       {
         section: "Default Timestamp Type",

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,9 @@ const {
 
 const { tvActionButtonsContainer } = require("./tvAction/container");
 const { tvActionButton } = require("./tvAction/button");
+const { mobileActionButtonsContainer } = require("./mobileAction/container");
+const { mobileActionButton } = require("./mobileAction/button");
+const { buildMobileActionButtonGroups } = require("./mobileAction/groups");
 const { compact } = require("./_internals");
 
 const { spacingKey, absolutePositionElement } = require("./containers");
@@ -43,6 +46,9 @@ module.exports = {
   tvMenuLabel,
   tvActionButtonsContainer,
   tvActionButton,
+  mobileActionButtonsContainer,
+  mobileActionButton,
+  buildMobileActionButtonGroups,
   mobileCellLabel,
   tvCellLabel,
   tvBadges,

package/manifestUtils/keys.js

@@ -406,6 +406,244 @@ const TV_ACTION_BUTTON_FIELDS = [
   },
 ];
 
+const mobileActionButtonContainerFields = (positionOptions) => [
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "buttons enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "enable cell action",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "position",
+    options: positionOptions,
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "align",
+    options: ["left", "center", "right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "over image position",
+    options: ["center", "top_left", "top_right", "bottom_left", "bottom_right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "stacking",
+    options: ["horizontal", "vertical"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "horizontal gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "vertical gutter",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "cell action",
+    options: [
+      { text: "primary navigation", value: "navigation_action" },
+      { text: "secondary navigation", value: "secondary_navigation" },
+    ],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "independent styles",
+  },
+];
+
+const MOBILE_ACTION_BUTTON_FIELDS = [
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "button enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "assign action",
+    options: [
+      { text: "primary navigation", value: "navigation_action" },
+      { text: "secondary navigation", value: "secondary_navigation" },
+      { text: "favorite", value: "local_storage_favourites_action" },
+      { text: "more", value: "more" },
+      { text: "add to calendar", value: "add_to_calendar" },
+      { text: "share", value: "share" },
+      { text: "downloads", value: "downloads" },
+      { text: "trailer", value: "trailer_action" },
+      { text: "mute/unmute", value: "mute_unmute" },
+    ],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "display mode",
+    options: ["dynamic", "fixed", "fill"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "width",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "contents alignment",
+    options: ["left", "center", "right"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "background color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused background color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "border color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused border color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "border size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "corner radius",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "padding left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "asset enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "action asset flavor",
+    options: ["flavor_1", "flavor_2"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "asset alignment",
+    options: ["left", "right", "above", "below"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset height",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset width",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "asset margin left",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.switch,
+    suffix: "label enabled",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "font color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.color_picker,
+    suffix: "focused font color",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.ios,
+    suffix: "iOS font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.font_selector.android,
+    suffix: "android font family",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "font size",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "line height",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "iOS letter spacing",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "android letter spacing",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.select,
+    suffix: "text transform",
+    options: ["default", "lowercase", "uppercase", "capitalize"],
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin top",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin right",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin bottom",
+  },
+  {
+    type: ZAPPIFEST_FIELDS.number_input,
+    suffix: "margin left",
+  },
+];
+
 const TV_MENU_LABEL_FIELDS = [
   {
     type: ZAPPIFEST_FIELDS.switch,
@@ -2134,6 +2372,8 @@ module.exports = {
   TV_COLOR_STATES,
   TV_ACTION_BUTTON_FIELDS,
   tvActionButtonContainerFields,
+  MOBILE_ACTION_BUTTON_FIELDS,
+  mobileActionButtonContainerFields,
   MOBILE_CELL_LABEL_FIELDS,
   TV_CELL_LABEL_FIELDS,
   TV_CELL_BADGE_FIELDS,