@applicaster/zapp-react-native-ui-components 16.0.0-rc.47 → 16.0.0-rc.49

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/__tests__/withDimensions.test.ts

@@ -1,205 +1,500 @@
-import { withDimensions } from "..";
+import { mergeQueryParams, withDimensions } from "..";
+
+const mockWarning = jest.fn();
+
+jest.mock("@applicaster/zapp-react-native-utils/logger", () => {
+  const mockLogger = {
+    addSubsystem: jest.fn(() => mockLogger),
+    warning: (...args) => mockWarning(...args),
+  };
+
+  return { coreLogger: mockLogger };
+});
 
 describe("withDimensions", () => {
   const width = 300;
   const height = 200;
+  const defaultTemplate = "width={{width}}&height={{height}}";
 
-  it("only width in the beginning", () => {
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+  beforeEach(() => {
+    mockWarning.mockClear();
+  });
 
-    const result = withDimensions(url, width, height);
+  describe("with default template (width={{width}}&height={{height}})", () => {
+    it("injects width and height into a URL without existing dimension params", () => {
+      const url = "https://some_url?quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?width=${width}&quality=95&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("only width in the middle", () => {
-    const url = "https://some_url?quality=95&width=511&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+      expect(result).toContain("sharpen=true");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces existing width and height params regardless of original size", () => {
+      const url =
+        "https://some_url?width=511&quality=95&height=400&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?quality=95&width=${width}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("only height in the beginning", () => {
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces width even when new width is larger than original", () => {
+      const largeWidth = 1024;
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?height=${height}&quality=95&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, largeWidth, height, defaultTemplate);
 
-  it("only height in the middle", () => {
-    const url = "https://some_url?quality=95&height=511&sharpen=true";
+      expect(result).toContain("width=1024");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("replaces height even when new height is larger than original", () => {
+      const largeHeight = 1024;
+      const url = "https://some_url?height=511&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      `https://some_url?quality=95&height=${height}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, largeHeight, defaultTemplate);
 
-  it("width and height", () => {
-    const url = "https://some_url?width=511&quality=95&height=400&sharpen=true";
+      expect(result).toContain("height=1024");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("adds width and height to URL with no query params", () => {
+      const url = "https://some_url";
 
-    expect(result).toEqual(
-      `https://some_url?width=${width}&quality=95&height=${height}&sharpen=true`
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("no width and no height", () => {
-    const url = "https://some_url?quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
 
-    const result = withDimensions(url, width, height);
+    it("truncates decimal width values", () => {
+      const decimalWidth = 243.42857142857142;
+      const url = "https://some_url?quality=95";
 
-    expect(result).toEqual("https://some_url?quality=95&sharpen=true");
-  });
+      const result = withDimensions(url, decimalWidth, height, defaultTemplate);
 
-  it("undefined width", () => {
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+      expect(result).toContain("width=243");
+    });
 
-    const result = withDimensions(url, undefined, height);
+    it("replaces URL with width=0 in the original", () => {
+      const url = "https://some_url?width=0&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      "https://some_url?width=511&quality=95&sharpen=true"
-    );
-  });
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-  it("undefined height", () => {
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+      expect(result).toContain("width=300");
+    });
 
-    const result = withDimensions(url, width, undefined);
+    it("replaces URL with empty width in the original", () => {
+      const url = "https://some_url?width=&quality=95&sharpen=true";
 
-    expect(result).toEqual(
-      "https://some_url?height=511&quality=95&sharpen=true"
-    );
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toContain("width=300");
+    });
   });
 
-  it("only Width", () => {
-    const url = "https://some_url?Width=511&quality=95&sharpen=true";
+  describe("with custom template", () => {
+    it("uses custom short param names (w, h)", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      `https://some_url?Width=${width}&quality=95&sharpen=true`
-    );
-  });
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+      expect(result).toContain("quality=95");
+    });
 
-  it("only heighT", () => {
-    const url = "https://some_url?heighT=511&quality=95&sharpen=true";
+    it("uses template with combined size param (size=WxH)", () => {
+      const template = "size={{width}}x{{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      `https://some_url?heighT=${height}&quality=95&sharpen=true`
-    );
-  });
+      expect(result).toContain(`size=${width}x${height}`);
+      expect(result).toContain("quality=95");
+    });
 
-  it("no params", () => {
-    const url = "https://some_url";
+    it("replaces existing custom param with same key", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?w=999&h=888&quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("w=999");
+      expect(result).not.toContain("h=888");
+    });
 
-  it("round input width", () => {
-    const width = 243.42857142857142;
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+    it("handles template with only width", () => {
+      const template = "w={{width}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(
-      "https://some_url?width=243&quality=95&sharpen=true"
-    );
-  });
+      expect(result).toContain("w=300");
+      expect(result).not.toContain("height");
+    });
 
-  it("takes original width when provided width more than original", () => {
-    const width = 1024;
-    const url = "https://some_url?width=511&quality=95&sharpen=true";
+    it("handles template with only height", () => {
+      const template = "h={{height}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("width");
+    });
 
-  it("takes original height when provided height more than original", () => {
-    const height = 1024;
-    const url = "https://some_url?height=511&quality=95&sharpen=true";
+    it("handles case-insensitive placeholders", () => {
+      const template = "w={{Width}}&h={{HEIGHT}}";
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
   });
 
-  it("doesnt touch url if no width value is provided", () => {
-    const url = "https://some_url?width=&quality=95&sharpen=true";
+  describe("no template provided", () => {
+    it("returns original url when template is undefined", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, undefined);
 
-    expect(result).toEqual(url);
-  });
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when template is empty string", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
+
+      const result = withDimensions(url, width, height, "");
+
+      expect(result).toEqual(url);
+    });
 
-  it("doesnt touch url if width=0", () => {
-    const url = "https://some_url?width=0&quality=95&sharpen=true";
+    it("returns original url when template is null", () => {
+      const url = "https://some_url?width=511&quality=95&sharpen=true";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, null);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
   });
 
-  it("doesnt touch url if no height value is provided", () => {
-    const url = "https://some_url?height=&quality=95&sharpen=true";
+  describe("invalid / malformed template mappings", () => {
+    it("ignores params with unrecognized placeholders like {{heit}}", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).not.toContain("height");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores params with typo placeholder and keeps valid ones", () => {
+      const template = "w={{wdth}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("h=200");
+      expect(result).not.toContain("wdth");
+      expect(result).not.toContain("w=");
+      expect(result).toContain("quality=95");
+    });
+
+    it("returns original url when all template params are invalid", () => {
+      const template = "w={{wdth}}&h={{hght}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toEqual(url);
+    });
+
+    it("ignores completely broken placeholder syntax", () => {
+      const template = "width={{width}}&height{{heit}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores param with empty placeholder {{}}", () => {
+      const template = "width={{width}}&height={{}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("{{}}");
+    });
+
+    it("ignores malformed placeholder with single closing brace {{heit}", () => {
+      const template = "width={{width}}&height={{heit}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+      expect(result).toContain("quality=95");
+    });
+
+    it("ignores malformed placeholder missing closing braces entirely", () => {
+      const template = "width={{width}}&height={{height";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("{{height");
+      expect(result).toContain("quality=95");
+    });
+
+    it("logs a warning for each invalid placeholder", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://some_url?quality=95";
+
+      withDimensions(url, width, height, template);
+
+      expect(mockWarning).toHaveBeenCalledTimes(1);
 
-    const result = withDimensions(url, width, height);
+      expect(mockWarning).toHaveBeenCalledWith(
+        expect.objectContaining({
+          message: expect.stringContaining("{{heit}}"),
+          data: expect.objectContaining({
+            invalidNames: ["heit"],
+          }),
+        })
+      );
+    });
 
-    expect(result).toEqual(url);
+    it("logs a warning for each dropped param pair independently", () => {
+      const template = "w={{wdth}}&h={{hght}}";
+      const url = "https://cdn.example.com/image.jpg?quality=95";
+
+      withDimensions(url, width, height, template);
+
+      expect(mockWarning).toHaveBeenCalledTimes(2);
+    });
+
+    it("does not log when all placeholders are valid", () => {
+      const url = "https://some_url?quality=95";
+
+      withDimensions(url, width, height, defaultTemplate);
+
+      expect(mockWarning).not.toHaveBeenCalled();
+    });
   });
 
-  it("doesnt touch url if height=0", () => {
-    const url = "https://some_url?height=0&quality=95&sharpen=true";
+  describe("leading question mark in template", () => {
+    it("strips leading ? from template", () => {
+      const template = "?width={{width}}&height={{height}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+      expect(result).toContain("quality=95");
+    });
+
+    it("strips leading ? with whitespace from template", () => {
+      const template = "  ?width={{width}}&height={{height}}";
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
+
+    it("strips leading ? on URL without existing query params", () => {
+      const template = "?w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
+
+    it("handles template that is just ?", () => {
+      const template = "?";
+      const url = "https://some_url?quality=95";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, template);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
   });
 
-  it("returns original url ir url is undefined", () => {
-    const url = undefined;
+  describe("URLs without query params", () => {
+    it("adds params to a clean URL with no query string", () => {
+      const url = "https://cdn.example.com/image.jpg";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-    expect(result).toEqual(url);
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
+
+    it("adds custom params to a clean URL with no query string", () => {
+      const template = "w={{width}}&h={{height}}";
+      const url = "https://cdn.example.com/path/to/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("w=300");
+      expect(result).toContain("h=200");
+    });
+
+    it("adds combined size param to URL with no query string", () => {
+      const template = "size={{width}}x{{height}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("size=300x200");
+    });
+
+    it("adds only valid params to clean URL when template has invalid mappings", () => {
+      const template = "width={{width}}&height={{heit}}";
+      const url = "https://cdn.example.com/image.jpg";
+
+      const result = withDimensions(url, width, height, template);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("heit");
+    });
   });
 
-  it("returns original url ir url is empty string", () => {
-    const url = "";
+  describe("edge cases", () => {
+    it("returns original url when url is undefined", () => {
+      const result = withDimensions(undefined, width, height, defaultTemplate);
+
+      expect(result).toEqual(undefined);
+    });
+
+    it("returns original url when url is empty string", () => {
+      const result = withDimensions("", width, height, defaultTemplate);
+
+      expect(result).toEqual("");
+    });
+
+    it("returns original url when url is invalid (non-http)", () => {
+      const url = "invalid_url";
 
-    const result = withDimensions(url, width, height);
+      const result = withDimensions(url, width, height, defaultTemplate);
 
-    expect(result).toEqual(url);
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when url is a number passed as string", () => {
+      const url = 1 as unknown as string;
+
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when width is undefined and height is undefined", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, undefined, undefined, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("returns original url when width is 0 and height is 0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, 0, 0, defaultTemplate);
+
+      expect(result).toEqual(url);
+    });
+
+    it("still works when only width is provided and does not inject height=0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, width, undefined, defaultTemplate);
+
+      expect(result).toContain("width=300");
+      expect(result).not.toContain("height=0");
+      expect(result).not.toContain("height=");
+    });
+
+    it("still works when only height is provided and does not inject width=0", () => {
+      const url = "https://some_url?quality=95";
+
+      const result = withDimensions(url, undefined, height, defaultTemplate);
+
+      expect(result).toContain("height=200");
+      expect(result).not.toContain("width=0");
+      expect(result).not.toContain("width=");
+    });
+
+    it("preserves URL hash fragment", () => {
+      const url = "https://some_url?quality=95#section1";
+
+      const result = withDimensions(url, width, height, defaultTemplate);
+
+      expect(result).toContain("width=300");
+      expect(result).toContain("height=200");
+    });
   });
+});
 
-  it("returns original url ir url is invalid", () => {
-    const url = "invalid_url";
+describe("mergeQueryParams", () => {
+  it("adds new params to URL without existing params", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg",
+      "w=300&h=200"
+    );
 
-    const result = withDimensions(url, width, height);
+    expect(result).toContain("w=300");
+    expect(result).toContain("h=200");
+  });
 
-    expect(result).toEqual(url);
+  it("overwrites existing params with same key", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg?w=999&quality=95",
+      "w=300"
+    );
+
+    expect(result).toContain("w=300");
+    expect(result).not.toContain("w=999");
+    expect(result).toContain("quality=95");
   });
 
-  it("returns original url ir url is invalid", () => {
-    const url = 1 as unknown as string;
+  it("returns original URL if parsing fails", () => {
+    const badUrl = "not a url at all";
+
+    const result = mergeQueryParams(badUrl, "w=300");
 
-    const result = withDimensions(url, width, height);
+    expect(result).toEqual(badUrl);
+  });
+
+  it("handles combined values (e.g. size=300x200)", () => {
+    const result = mergeQueryParams(
+      "https://example.com/img.jpg?quality=95",
+      "size=300x200"
+    );
 
-    expect(result).toEqual(url);
+    expect(result).toContain("size=300x200");
+    expect(result).toContain("quality=95");
   });
 });

package/Components/MasterCell/DefaultComponents/Image/hoc/utils/index.ts

@@ -1,15 +1,85 @@
-import {
-  toFiniteNumberWithDefault,
-  toNumber,
-} from "@applicaster/zapp-react-native-utils/numberUtils";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { isNil } from "ramda";
+import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
 
-const dimensionRegex = /\b(width|height)=(\d+)\b/gi;
+const imageResizingLogger = coreLogger
+  ?.addSubsystem("components")
+  ?.addSubsystem("ImageResizing");
 
+const TEMPLATE_REGEX = /{{(width|height)}}/gi;
+const UNRESOLVED_PLACEHOLDER_REGEX = /{{[^}]*}}?/;
+const INVALID_PLACEHOLDER_EXTRACT_REGEX = /{{([^}]*)}}?/g;
+const ALLOWED_PLACEHOLDERS = ["width", "height"];
+
+/**
+ * Merges query-param string `paramsString` into `baseUrl`.
+ * Params from `paramsString` override any existing params with the same key.
+ */
+export const mergeQueryParams = (
+  baseUrl: string,
+  paramsString: string
+): string => {
+  try {
+    const urlObj = new URL(baseUrl);
+    const newParams = new URLSearchParams(paramsString);
+
+    newParams.forEach((value, key) => {
+      urlObj.searchParams.set(key, value);
+    });
+
+    return urlObj.toString();
+  } catch {
+    // If URL parsing fails, return original
+    return baseUrl;
+  }
+};
+
+/**
+ * Extracts unresolved placeholder names from a param pair and logs a warning.
+ */
+const logInvalidPlaceholders = (pair: string): void => {
+  const invalidNames: string[] = [];
+  let match: RegExpExecArray | null;
+
+  // Reset lastIndex before using the global regex
+  INVALID_PLACEHOLDER_EXTRACT_REGEX.lastIndex = 0;
+
+  while ((match = INVALID_PLACEHOLDER_EXTRACT_REGEX.exec(pair)) !== null) {
+    const name = match[1];
+
+    if (!ALLOWED_PLACEHOLDERS.includes(name?.toLowerCase())) {
+      invalidNames.push(name);
+    }
+  }
+
+  if (invalidNames.length > 0) {
+    imageResizingLogger?.warning({
+      message: `Image resizing: invalid placeholder(s) found: ${invalidNames.map((n) => `{{${n}}}`).join(", ")}. Allowed placeholders are: {{width}}, {{height}}. The param "${pair}" was ignored.`,
+      data: { pair, invalidNames, allowedPlaceholders: ALLOWED_PLACEHOLDERS },
+    });
+  }
+};
+
+/**
+ * Parses a dimension mapping template string (query param format) and injects
+ * the resolved width/height values into the given URL.
+ *
+ * The template uses `{{width}}` and `{{height}}` placeholders.
+ * It is treated as query-param key=value pairs (e.g. "w={{width}}&h={{height}}"
+ * or "size={{width}}x{{height}}").
+ *
+ * Resolved params are **merged** into the original URL – existing params with
+ * the same key are replaced; new ones are appended.
+ *
+ * Invalid mappings (containing unresolved placeholders like `{{heit}}` or
+ * malformed `{{heit}`) are silently dropped and logged as warnings.
+ * A leading `?` in the template is stripped.
+ */
 export const withDimensions = (
   url: Option<string>,
   width: Option<number | string>,
-  height: Option<number | string>
+  height: Option<number | string>,
+  dimensionMappingTemplate?: Option<string>
 ) => {
   if (isNil(url)) {
     return url;
@@ -22,23 +92,48 @@ export const withDimensions = (
   const newWidth = Math.trunc(toFiniteNumberWithDefault(0, width));
   const newHeight = Math.trunc(toFiniteNumberWithDefault(0, height));
 
-  return url.replace(dimensionRegex, (match, name, originalValue) => {
-    if (name.toLocaleLowerCase() === "width" && newWidth > 0) {
-      const originalWidth = toNumber(originalValue);
+  if (newWidth <= 0 && newHeight <= 0) {
+    return url;
+  }
+
+  // Strip leading `?` and whitespace from the template
+  const template = dimensionMappingTemplate?.trim()?.replace(/^\?/, "");
 
-      if (originalWidth > 0 && originalWidth > newWidth) {
-        return `${name}=${newWidth}`;
-      }
-    }
+  if (!template) {
+    return url;
+  }
 
-    if (name.toLocaleLowerCase() === "height" && newHeight > 0) {
-      const originalHeight = toNumber(originalValue);
+  // Replace {{width}} / {{height}} placeholders in the template
+  const resolvedTemplate = template.replace(TEMPLATE_REGEX, (_match, name) => {
+    if (name.toLowerCase() === "width") {
+      return newWidth > 0 ? String(newWidth) : _match;
+    }
 
-      if (originalHeight > 0 && originalHeight > newHeight) {
-        return `${name}=${newHeight}`;
-      }
+    if (name.toLowerCase() === "height") {
+      return newHeight > 0 ? String(newHeight) : _match;
     }
 
-    return match;
+    return _match;
   });
+
+  // Filter out param pairs that still contain unresolved / malformed placeholders
+  const cleanedParams = resolvedTemplate
+    .split("&")
+    .filter((pair) => {
+      if (UNRESOLVED_PLACEHOLDER_REGEX.test(pair)) {
+        logInvalidPlaceholders(pair);
+
+        return false;
+      }
+
+      return true;
+    })
+    .join("&");
+
+  if (!cleanedParams) {
+    return url;
+  }
+
+  // Parse the resolved template as query params and merge into URL
+  return mergeQueryParams(url, cleanedParams);
 };

package/Components/MasterCell/DefaultComponents/Image/hoc/withDimensions.tsx

@@ -14,25 +14,36 @@ type Style = {
   height: Option<number | string>;
 };
 
-const withAppliedDimensions = (style: Style) => (source: Source) => ({
-  ...source,
-  uri: withDimensions(source?.uri, style?.width, style?.height),
-});
+const withAppliedDimensions =
+  (style: Style, dimensionMappingTemplate: string) => (source: Source) => ({
+    ...source,
+    uri: withDimensions(
+      source?.uri,
+      style?.width,
+      style?.height,
+      dimensionMappingTemplate
+    ),
+  });
 
 export const withDimensionsHOC = (Component) => {
   return function WithDimensions(props: Record<string, unknown>) {
     const theme = useTheme<BaseThemePropertiesMobile>();
 
-    const useDownScalingImages = toBooleanWithDefaultFalse(
-      theme.use_downscaling_images
+    const useImageResizing = toBooleanWithDefaultFalse(
+      theme.use_image_resizing ?? theme.use_downscaling_images
     );
 
+    const dimensionMappingTemplate = theme.image_resizing_template;
+
     return (
       <Component
         {...props}
         withDimensions={
-          useDownScalingImages
-            ? withAppliedDimensions((props?.style || {}) as Style)
+          useImageResizing
+            ? withAppliedDimensions(
+                (props?.style || {}) as Style,
+                dimensionMappingTemplate
+              )
             : identity
         }
       />

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -9,6 +9,7 @@ import {
   platformSelect,
   isAndroidTVPlatform,
   isTvOSPlatform,
+  isApplePlatform,
 } from "@applicaster/zapp-react-native-utils/reactUtils";
 import {
   isAudioItem,
@@ -60,6 +61,7 @@ import {
   PlayerNativeSendCommand,
 } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/playerNativeCommand";
 import { useAppData } from "@applicaster/zapp-react-native-redux";
+import { PLAYER_EVENTS } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/conts";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -282,12 +284,16 @@ const PlayerContainerComponent = (props: Props) => {
     }
 
     log_debug(
-      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}`
+      `onPlayNextPerformNextVideoPlay: delay completed, replaceTop to item: ${playNextOverlayState.entry.title}, id: ${playNextOverlayState.entry.id}, outgoing item id: ${item?.id}`
     );
 
+    playNextOverlayState.hidePlayNext();
+
+    playerEvent(PLAYER_EVENTS.PlayNextTriggered, { id: item?.id });
+
     setIsLoadingNextVideo(true);
     playEntry(playNextOverlayState.entry);
-  }, [playNextOverlayState]);
+  }, [playNextOverlayState, item?.id]);
 
   const playNextData: Nullable<PlayNextData> = React.useMemo(() => {
     if (!playNextOverlayState) {
@@ -495,7 +501,7 @@ const PlayerContainerComponent = (props: Props) => {
   const isAudioContent = isAudioItem(item);
 
   useEffect(() => {
-    if (!isAudioContent) {
+    if (!isAudioContent && isApplePlatform()) {
       sendQuickBrickEvent(
         QUICK_BRICK_EVENTS.IDLE_TIMER_DISABLED as QuickBrickEvent,
         {

package/Components/PlayerContainer/__tests__/PlayerContainer.test.tsx

@@ -20,6 +20,7 @@ jest.mock("@applicaster/zapp-react-native-utils/reactUtils", () => ({
   isTV: jest.fn(() => false),
   isAndroidTVPlatform: jest.fn(() => false),
   isTvOSPlatform: jest.fn(() => false),
+  isApplePlatform: jest.fn(() => true),
   platformSelect: jest.fn(({ native }) => native),
 }));
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "16.0.0-rc.47",
+  "version": "16.0.0-rc.49",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -28,10 +28,10 @@
   },
   "homepage": "https://github.com/applicaster/quickbrick#readme",
   "dependencies": {
-    "@applicaster/applicaster-types": "16.0.0-rc.47",
-    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.47",
-    "@applicaster/zapp-react-native-redux": "16.0.0-rc.47",
-    "@applicaster/zapp-react-native-utils": "16.0.0-rc.47",
+    "@applicaster/applicaster-types": "16.0.0-rc.49",
+    "@applicaster/zapp-react-native-bridge": "16.0.0-rc.49",
+    "@applicaster/zapp-react-native-redux": "16.0.0-rc.49",
+    "@applicaster/zapp-react-native-utils": "16.0.0-rc.49",
     "fast-json-stable-stringify": "^2.1.0",
     "promise": "^8.3.0",
     "url": "^0.11.0",