@applicaster/zapp-react-native-ui-components 16.0.0-alpha.1042942411 → 16.0.0-alpha.1054344748

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/MasterCell/DefaultComponents/LiveImage/executePreloadHooks.ts

@@ -1,5 +1,4 @@
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
-import { appStore } from "@applicaster/zapp-react-native-redux/AppStore";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { loggerLiveImageManager } from "../../../VideoLive/loggerHelper";
 
 const { log_debug, log_error } = loggerLiveImageManager;
@@ -74,10 +73,9 @@ export async function executePreloadHooks({
   let payload: any = entry;
 
   let needsAbort = false;
-  const plugins = appStore.get("plugins");
 
   for (const hookConfig of sortedHooks) {
-    const plugin = findPluginByIdentifier(hookConfig.identifier, plugins, true);
+    const plugin = getPluginByIdentifier(hookConfig.identifier, true);
 
     if (!plugin?.module) {
       log_debug(

package/Components/MasterCell/DefaultComponents/LiveImage/index.tsx

@@ -8,7 +8,7 @@ import Image from "../Image";
 import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-native-utils/reactHooks/autoscrolling/useTrackCurrentAutoScrollingElement";
 import { useUIComponentContext } from "@applicaster/zapp-react-native-ui-components/Contexts/UIComponentContext";
 import { getPropComponentType } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { findPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
+import { getPluginByIdentifier } from "@applicaster/zapp-react-native-utils/pluginUtils";
 import { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
@@ -249,9 +249,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getPlayerConfig(player_screen_id, actionIdentifier) ?? {};
 
   const playableEntry = playerPluginId ? getPlayableEntry(item) : null;
-  const plugins = appStore.get("plugins");
 
-  const playerPlugin = findPluginByIdentifier(playerPluginId, plugins);
+  const playerPlugin = getPluginByIdentifier(playerPluginId);
 
   const isShouldRender =
     playerPlugin &&

package/Components/MasterCell/DefaultComponents/SecondaryImage/Image.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
 import { isNil } from "ramda";
-import { ViewStyle } from "react-native";
+import { ImageStyle, View } from "react-native";
 import {
-  SecondaryImage as UIKitSecondaryImage,
-  UIKitSecondaryImageProps,
-} from "@applicaster/uikit";
+  FIT_POSITION,
+  IMAGE_SIZING_FILL,
+  IMAGE_SIZING_FIT,
+} from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
+import { QBImage as Image } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 
 import { useGetImageDimensions } from "./hooks";
 import {
   DisplayMode,
-  FitPosition,
-  ImageSizing,
+  getStyle,
   isDisplayModeFixed,
   isImageSizingFit,
 } from "./utils";
@@ -19,9 +20,9 @@ import { withAsyncRenderHOC } from "../../hoc/withAsyncRender";
 interface Props {
   displayMode: DisplayMode;
   uri: Nullable<string>;
-  style: ViewStyle;
-  imageSizing: ImageSizing;
-  fitPosition: FitPosition;
+  style: ImageStyle;
+  imageSizing: typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
+  fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
   onAsyncRender?: () => void;
@@ -30,17 +31,8 @@ interface Props {
 /** Secondary Image Dynamic does not render until the image is loaded */
 const SecondaryImageDynamic = withAsyncRenderHOC(
   (props: Props & { onAsyncRender: () => void }) => {
-    const {
-      uri,
-      style,
-      displayMode,
-      imageSizing,
-      fitPosition,
-      onAsyncRender,
-      fixedHeight: _fixedHeight,
-      fixedWidth: _fixedWidth,
-      ...imageProps
-    } = props;
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
     const imageDimension = useGetImageDimensions(
       uri,
@@ -57,18 +49,24 @@ const SecondaryImageDynamic = withAsyncRenderHOC(
     }
 
     return (
-      <UIKitSecondaryImage
-        {...imageProps}
-        uri={uri}
-        style={style as UIKitSecondaryImageProps["style"]}
-        displayMode={displayMode}
-        imageSizing={imageSizing}
-        fitPosition={fitPosition}
-        width={containerWidth as number}
-        height={containerHeight}
-        imageDimension={imageDimension}
-        onAsyncRender={onAsyncRender}
-      />
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
     );
   }
 );
@@ -83,8 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender: _onAsyncRender,
-    ...imageProps
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -94,18 +90,26 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <UIKitSecondaryImage
-      {...imageProps}
-      uri={uri}
-      style={style as UIKitSecondaryImageProps["style"]}
-      displayMode={displayMode}
-      imageSizing={imageSizing}
-      fitPosition={fitPosition}
-      width={fixedWidth}
-      height={fixedHeight}
-      imageDimension={imageDimension}
-      testID="secondary-image-fixed"
-    />
+    <View style={style}>
+      {isNil(imageDimension?.aspectRatio) ? null : (
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight: fixedHeight,
+              containerWidth: fixedWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      )}
+    </View>
   );
 };
 

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/__snapshots__/Image.test.tsx.snap

@@ -3,21 +3,19 @@
 exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
 <View
   style={
-    [
-      {
-        "borderRadius": 10,
-        "height": 100,
-        "width": 100,
-      },
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
   }
-  testID="secondary-image-fixed"
 >
   <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
     source={
       {
         "uri": "someUrl",
@@ -31,6 +29,7 @@ exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async r
         "width": 100,
       }
     }
+    uri="someUrl"
   />
 </View>
 `;
@@ -45,20 +44,20 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 <View
   onLayout={[Function]}
   style={
-    [
-      {
-        "borderRadius": 10,
-        "height": 100,
-        "width": 100,
-      },
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
   }
 >
   <Image
+    displayMode="dynamic"
+    fitPosition="center"
+    fixedHeight={0}
+    fixedWidth={0}
+    imageSizing="fill"
+    onAsyncRender={[Function]}
     source={
       {
         "uri": "someUrl",
@@ -72,6 +71,7 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
         "width": 100,
       }
     }
+    uri="someUrl"
   />
 </View>
 `;
@@ -79,21 +79,19 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
 <View
   style={
-    [
-      {
-        "borderRadius": 10,
-        "height": 100,
-        "width": 100,
-      },
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
   }
-  testID="secondary-image-fixed"
 >
   <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
     source={
       {
         "uri": "someUrl",
@@ -107,6 +105,7 @@ exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with
         "width": 100,
       }
     }
+    uri="someUrl"
   />
 </View>
 `;
@@ -114,18 +113,11 @@ exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with
 exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
 <View
   style={
-    [
-      {
-        "borderRadius": 5,
-        "height": 100,
-        "width": 100,
-      },
-      {
-        "height": 100,
-        "width": 100,
-      },
-    ]
+    {
+      "borderRadius": 5,
+      "height": 100,
+      "width": 100,
+    }
   }
-  testID="secondary-image-fixed"
 />
 `;

package/Components/MasterCell/DefaultComponents/SecondaryImage/utils.ts

@@ -1,30 +1,27 @@
 import { identity, isNil } from "ramda";
 import {
   POSITION_OVER_IMAGE,
+  DISPLAY_MODE_DYNAMIC,
   DISPLAY_MODE_FIXED,
   VISIBILITY_ALWAYS,
   VISIBILITY_DEFAULT,
   VISIBILITY_FOCUSED,
   IMAGE_POSITION,
   IMAGE_SIZING_FIT,
+  IMAGE_SIZING_FILL,
   FIT_POSITION,
 } from "@applicaster/zapp-react-native-utils/manifestUtils/secondaryImage";
 import { ImageStyle } from "react-native";
-import type {
-  SecondaryImageDisplayMode,
-  SecondaryImageFitPosition,
-  SecondaryImageImageSizing,
-} from "@applicaster/uikit/lib/components/uikit/secondary-image/types";
 
 const SECONDARY_IMAGE_PREFIX = "secondary_image";
 
-export type ImageSizing = SecondaryImageImageSizing;
-
-export type FitPosition = SecondaryImageFitPosition;
+type ImageSizing = typeof IMAGE_SIZING_FIT | typeof IMAGE_SIZING_FILL;
 
 type ImagePosition = (typeof IMAGE_POSITION)[keyof typeof IMAGE_POSITION];
 
-export type DisplayMode = SecondaryImageDisplayMode;
+export type DisplayMode =
+  | typeof DISPLAY_MODE_FIXED
+  | typeof DISPLAY_MODE_DYNAMIC;
 
 export enum SecondaryImageStyleKeys {
   ENABLE = "switch",
@@ -177,16 +174,6 @@ export const getStyle = ({
   imageDimension,
   containerWidth,
   containerHeight,
-}: {
-  imageSizing: ImageSizing;
-  fitPosition: FitPosition;
-  displayMode: DisplayMode;
-  imageDimension: {
-    width: number;
-    height: number;
-  };
-  containerWidth: number;
-  containerHeight: number;
 }): ImageStyle => {
   if (!isImageSizingFit(imageSizing)) {
     return {

package/Components/MasterCell/DefaultComponents/Text/index.tsx

@@ -1,9 +1,10 @@
 import * as React from "react";
+import { Text } from "react-native";
+import { omit } from "ramda";
 import {
   textTransform,
   dateFormat,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
-import { Text as UIKitText } from "@applicaster/uikit/lib/components/uikit/text";
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
 import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
@@ -19,18 +20,11 @@ type Props = {
   entry?: any;
   dateTransformEnabled: boolean;
   dateTransform: string;
-  state?: string;
-  focusedStyles?: any;
-  normalStyles?: any;
-  numberOfLines?: number;
-  ellipsizeMode?: "head" | "middle" | "tail" | "clip";
-  testID?: string;
-  accessibilityLabel?: string;
-  accessibilityHint?: string;
-  nativeID?: string;
-  selectable?: boolean;
+  [key: string]: any;
 };
 
+const withoutLabel = omit(["label"]);
+
 const _Text = ({
   style,
   label,
@@ -38,16 +32,7 @@ const _Text = ({
   transformText = "default",
   dateTransformEnabled = false,
   dateTransform,
-  state,
-  focusedStyles,
-  normalStyles,
-  numberOfLines,
-  ellipsizeMode,
-  testID,
-  accessibilityLabel,
-  accessibilityHint,
-  nativeID,
-  selectable,
+  ...otherProps
 }: Props) => {
   const _label = useTextLabel({ label, entry });
   const isMeasurement = React.useContext(MeasurementPortalContext);
@@ -57,8 +42,8 @@ const _Text = ({
 
   // set maximum possible height for the text in case of measurement
   const height =
-    isMeasurement && numberOfLines && style.lineHeight
-      ? toNumber(numberOfLines) * toNumber(style.lineHeight)
+    isMeasurement && otherProps.numberOfLines && style.lineHeight
+      ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
       : undefined;
 
   const textLabel = dateTransformEnabled
@@ -67,7 +52,7 @@ const _Text = ({
 
   React.useLayoutEffect(() => {
     if (cellFocused) {
-      switch (state) {
+      switch (otherProps.state) {
         case "focused":
           accessibilityManager.addHeading(textLabel);
           break;
@@ -76,35 +61,20 @@ const _Text = ({
           break;
       }
     }
-  }, [accessibilityManager, cellFocused, state, textLabel]);
+  }, [cellFocused, otherProps.state, textLabel]);
 
   if (isNilOrEmpty(_label)) {
     return null;
   }
 
   return (
-    <UIKitText
-      style={[
-        withFocusedStyles({
-          style,
-          otherProps: {
-            state,
-            focusedStyles,
-            normalStyles,
-          },
-        }),
-        { height },
-      ]}
-      numberOfLines={numberOfLines}
-      ellipsizeMode={ellipsizeMode}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
-      accessibilityHint={accessibilityHint}
-      nativeID={nativeID}
-      selectable={selectable}
+    <Text
+      style={[withFocusedStyles({ style, otherProps }), { height }]}
+      {...withoutLabel(otherProps)}
+      allowFontScaling={false}
     >
       {textLabel}
-    </UIKitText>
+    </Text>
   );
 };