@applicaster/zapp-react-native-utils 14.0.0-rc.8 → 15.0.0-rc.1

package/conf/player/selectors.ts

@@ -0,0 +1,10 @@
+import { get } from "@applicaster/zapp-react-native-utils/utils";
+
+/**
+ * Selects the action buttons from the player configuration.
+ * @param {Object} pluginConf - player plugin config
+ * @returns {Array|null} An array of action buttons or null if not found.
+ */
+export const selectActionButtons = (pluginConf: any) => {
+  return get(pluginConf, "player_action_buttons", null);
+};

package/configurationUtils/__tests__/configurationUtils.test.js

@@ -1,11 +1,8 @@
-import * as R from "ramda";
 import {
   populateConfigurationValues,
-  imageSrcFromMediaItem,
   getBoolFromConfigValue,
   remapUpdatedKeys,
 } from "../";
-import { entry } from "./testEntry";
 
 describe("getBoolFromConfigValue", () => {
   it('returns true if value is "true" string', () => {
@@ -57,34 +54,6 @@ describe("getBoolFromConfigValue", () => {
   });
 });
 
-describe("imageSrcFromMediaItem", () => {
-  describe("returns the src value of first media_item", () => {
-    it("when the matching key is found and the src is not empty", () => {
-      const result = imageSrcFromMediaItem(entry, ["logo_thumbnail"]);
-
-      expect(result).toEqual(entry.media_group[1].media_item[0].src);
-      expect(result).not.toEqual("");
-    });
-  });
-
-  it("returns a media item with the 'image_base' key as a fallback", () => {
-    const result = imageSrcFromMediaItem(entry, ["does_not_exist"]);
-    const fallback = entry.media_group[0].media_item[0];
-    expect(result).toEqual(fallback.src);
-    expect(fallback.key).toBe("image_base");
-  });
-
-  it("returns undefined if the key was found but the source was empty", () => {
-    const badEntry = R.set(
-      R.lensPath(["media_group", 0, "media_item", 0, "src"]),
-      "",
-      entry
-    );
-
-    expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
-  });
-});
-
 describe("populateConfigurationValues", () => {
   it("transforms and returns the valid values", () => {
     const fields = [

package/configurationUtils/__tests__/getMediaItems.test.ts

@@ -0,0 +1,65 @@
+import { getMediaItems } from "..";
+import { entry as baseEntry } from "./testEntry";
+
+describe("getMediaItems", () => {
+  it("returns both image and thumbnail media items", () => {
+    const items = getMediaItems(baseEntry);
+    expect(items).toHaveLength(2);
+    expect(items[0].key).toBe("image_base");
+    expect(items[1].key).toBe("logo_thumbnail");
+  });
+
+  it("returns only image media items if no thumbnail present", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        {
+          type: "image",
+          media_item: [
+            { key: "image_base", src: "img.png" },
+            { key: "other", src: "other.png" },
+          ],
+        },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toHaveLength(2);
+    expect(items[0].key).toBe("image_base");
+    expect(items[1].key).toBe("other");
+  });
+
+  it("returns only thumbnail media items if no image present", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        {
+          type: "thumbnail",
+          media_item: [{ key: "thumb1", src: "thumb1.png" }],
+        },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toHaveLength(1);
+    expect(items[0].key).toBe("thumb1");
+  });
+
+  it("returns undefined if no media_group present", () => {
+    const entry = { ...baseEntry };
+    delete entry.media_group;
+    expect(getMediaItems(entry)).toBeUndefined();
+  });
+
+  it("returns undefined if media_group is present but has no image or thumbnail", () => {
+    const entry = {
+      ...baseEntry,
+      media_group: [
+        { type: "audio", media_item: [{ key: "audio1", src: "audio1.mp3" }] },
+      ],
+    };
+
+    const items = getMediaItems(entry);
+    expect(items).toBeUndefined();
+  });
+});

package/configurationUtils/__tests__/imageSrcFromMediaItem.test.ts

@@ -0,0 +1,34 @@
+import * as R from "ramda";
+import { imageSrcFromMediaItem } from "../";
+import { entry } from "./testEntry";
+
+describe("imageSrcFromMediaItem", () => {
+  it("when the matching key is found and the src is not empty", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "logo_thumbnail",
+    ]);
+
+    expect(result).toEqual(entry.media_group[1].media_item[0].src);
+    expect(result).not.toEqual("");
+  });
+
+  it("returns a media item with the 'image_base' key as a fallback", () => {
+    const result = imageSrcFromMediaItem(entry as ZappEntry, [
+      "does_not_exist",
+    ]);
+
+    const fallback = entry.media_group[0].media_item[0];
+    expect(result).toEqual(fallback.src);
+    expect(fallback.key).toBe("image_base");
+  });
+
+  it("returns undefined if the key was found but the source was empty", () => {
+    const badEntry: ZappEntry = R.set(
+      R.lensPath(["media_group", 0, "media_item", 0, "src"]),
+      "",
+      entry
+    );
+
+    expect(imageSrcFromMediaItem(badEntry, ["image_base"])).toBeUndefined();
+  });
+});

package/configurationUtils/__tests__/manifestKeyParser.test.ts

@@ -0,0 +1,546 @@
+import { getAllSpecificStyles } from "../manifestKeyParser";
+
+jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
+  platformSelect: jest.fn((platforms) => platforms.samsung_tv), // Default to samsung for tests
+}));
+
+jest.mock("@applicaster/zapp-react-native-utils/stringUtils", () => ({
+  toCamelCase: jest.fn((str: string) => {
+    // Simple camelCase implementation for testing
+    return str.replace(/_([a-z])/g, (_, letter) => letter.toUpperCase());
+  }),
+}));
+
+describe("getAllSpecificStyles", () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe("Basic functionality", () => {
+    it("should throw error if outStyles is not provided", () => {
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "button",
+          subComponentName: "",
+          configuration: {},
+          outStyles: null as any,
+        });
+      }).toThrow("outStyles is required");
+    });
+
+    it("should throw error if componentName is not provided", () => {
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "",
+          subComponentName: "",
+          configuration: {},
+          outStyles: {},
+        });
+      }).toThrow("componentName is required");
+    });
+
+    it("should initialize default key if not present", () => {
+      const outStyles = {};
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration: {},
+        outStyles,
+      });
+
+      expect(outStyles).toHaveProperty("default");
+      expect(outStyles["default"]).toEqual({});
+    });
+
+    it("should handle empty configuration", () => {
+      const outStyles = { default: {} };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration: {},
+        outStyles,
+      });
+
+      expect(outStyles).toEqual({ default: {} });
+    });
+  });
+
+  describe("Style name parsing", () => {
+    it("should parse basic style without state or platform", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_border_width: 2,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        borderWidth: 2,
+      });
+    });
+
+    it("should handle subComponentName correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        player_controls_style_button_background_color: "#FF0000",
+        player_controls_style_button_text_size: 16,
+      };
+
+      getAllSpecificStyles({
+        componentName: "player_controls",
+        subComponentName: "button",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        textSize: 16,
+      });
+    });
+
+    it("should ignore keys that do not match the prefix", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        other_component_style_text_color: "#00FF00", // Should be ignored
+        random_key: "value", // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+      });
+    });
+  });
+
+  describe("State handling", () => {
+    it("should handle pressed state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_pressed_background_color: "#00FF00",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#00FF00",
+      });
+    });
+
+    it("should handle focused state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focused_border_width: 3,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        borderWidth: 3,
+      });
+    });
+
+    it("should handle selected state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_selected_opacity: 0.5,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["selected"]).toEqual({
+        opacity: 0.5,
+      });
+    });
+
+    it("should handle focused_selected state", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_focused_selected_scale: 1.2,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused_selected"]).toEqual({
+        scale: 1.2,
+      });
+    });
+
+    it("should merge default styles into other states", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_border_width: 1,
+        button_style_opacity: 1,
+        button_style_pressed_background_color: "#00FF00",
+        button_style_focused_opacity: 0.8,
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000",
+        borderWidth: 1,
+        opacity: 1,
+      });
+
+      // Pressed should have default styles merged with its specific override
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#00FF00", // Override
+        borderWidth: 1, // From default
+        opacity: 1, // From default
+      });
+
+      // Focused should have default styles merged with its specific override
+      expect(outStyles["focused"]).toEqual({
+        backgroundColor: "#FF0000", // From default
+        borderWidth: 1, // From default
+        opacity: 0.8, // Override
+      });
+    });
+
+    it("should preserve existing state values when merging", () => {
+      const outStyles = {
+        pressed: { existingKey: "existingValue" },
+      };
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+        button_style_pressed_text_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        existingKey: "existingValue", // Should be preserved
+        backgroundColor: "#FF0000", // From default
+        textColor: "#FFFFFF", // New pressed style
+      });
+    });
+  });
+
+  describe("Platform handling", () => {
+    it("should include styles for current platform (samsung)", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_samsung_background_color: "#FF0000",
+        button_style_background_color: "#00FF00",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FF0000", // Samsung-specific should be included
+      });
+    });
+
+    it("should skip styles for other platforms", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_ios_background_color: "#FF0000",
+        button_style_android_text_color: "#00FF00",
+        button_style_tvos_border_width: 2,
+        button_style_lg_opacity: 0.5,
+        button_style_background_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FFFFFF", // Only non-platform specific
+      });
+    });
+
+    it("should handle platform in middle of style name", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_text_samsung_color: "#FF0000",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "text",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        color: "#FF0000",
+      });
+    });
+
+    it("should handle platform-specific styles with states", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_samsung_pressed_background_color: "#FF0000",
+        button_style_ios_pressed_background_color: "#00FF00", // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#FF0000", // Only samsung style
+      });
+    });
+
+    it("should work correctly when platform is Samsung", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_ios_background_color: "#FF0000",
+        button_style_samsung_background_color: "#00FF00",
+        button_style_background_color: "#FFFFFF",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#00FF00", // Samsung-specific should win
+      });
+    });
+  });
+
+  describe("Complex scenarios", () => {
+    it("should handle multiple states and platforms correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        // Default styles
+        button_style_background_color: "#FFFFFF",
+        button_style_text_color: "#000000",
+        button_style_border_width: 1,
+
+        // Platform-specific default
+        button_style_samsung_padding: 10,
+
+        // State-specific
+        button_style_pressed_background_color: "#EEEEEE",
+        button_style_focused_scale: 1.1,
+
+        // Platform + state specific
+        button_style_samsung_pressed_opacity: 0.8,
+        button_style_ios_pressed_opacity: 0.6, // Should be ignored
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        backgroundColor: "#FFFFFF",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+      });
+
+      expect(outStyles["pressed"]).toEqual({
+        backgroundColor: "#EEEEEE",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+        opacity: 0.8,
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        backgroundColor: "#FFFFFF",
+        textColor: "#000000",
+        borderWidth: 1,
+        padding: 10,
+        scale: 1.1,
+      });
+    });
+
+    it("should handle edge case keys correctly", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_: "shouldBeIgnored", // Empty style name
+        button_style_samsung_: "shouldBeIgnored", // Platform but no style
+        button_style__pressed: "shouldBeIgnored", // No style name before state
+        button_style_valid_key: "included",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["default"]).toEqual({
+        validKey: "included",
+      });
+    });
+
+    it("should handle all state suffixes in priority order", () => {
+      const outStyles = {};
+
+      const configuration = {
+        // Test that focused_selected is recognized before focused
+        button_style_focused_selected_test: "focused_selected_value",
+        button_style_focused_another: "focused_value",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["focused_selected"]).toEqual({
+        test: "focused_selected_value",
+      });
+
+      expect(outStyles["focused"]).toEqual({
+        another: "focused_value",
+      });
+    });
+  });
+
+  describe("Immutability", () => {
+    it("should not mutate configuration object", () => {
+      const configuration = Object.freeze({
+        button_style_background_color: "#FF0000",
+      });
+
+      const outStyles = {};
+
+      expect(() => {
+        getAllSpecificStyles({
+          componentName: "button",
+          subComponentName: "",
+          configuration,
+          outStyles,
+        });
+      }).not.toThrow();
+    });
+
+    it("platform pressed overrides generic pressed for same key", () => {
+      const outStyles = {};
+
+      const configuration = {
+        button_style_pressed_background_color: "#111111", // generic
+        button_style_samsung_pressed_background_color: "#222222", // platform
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      expect(outStyles["pressed"]["backgroundColor"]).toBe("#222222");
+    });
+
+    it("should handle frozen outStyles properties", () => {
+      const outStyles = {
+        default: Object.freeze({ existingProp: "value" }),
+      };
+
+      const configuration = {
+        button_style_background_color: "#FF0000",
+      };
+
+      getAllSpecificStyles({
+        componentName: "button",
+        subComponentName: "",
+        configuration,
+        outStyles,
+      });
+
+      // Should create new object instead of mutating frozen one
+      expect(outStyles["default"]).toEqual({
+        existingProp: "value",
+        backgroundColor: "#FF0000",
+      });
+    });
+  });
+});