@applicaster/zapp-react-native-ui-components 15.0.0-rc.11 → 15.0.0-rc.110

package/Components/MasterCell/DefaultComponents/Image/hooks/useImage.ts

@@ -1,19 +1,21 @@
 import * as React from "react";
-import { path } from "ramda";
 
 import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { extractAsset } from "./utils";
 
 type Return = { uri: string } | null;
+type Source = { context?: string; uri?: string } | null | undefined;
 
-const getSourceContext = path(["source", "context"]);
-const getSourceUri = path(["source", "uri"]);
-const getState = path(["state"]);
+const getSourceContext = (source: Source) => source?.context;
+const getSourceUri = (source: Source) => source?.uri;
 
-export const useImageSource = ({ uri, entry, otherProps }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+export const useImageSource = ({
+  uri,
+  entry,
+  otherProps: { source, state: uriState },
+}): Return => {
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -38,7 +40,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -47,7 +49,7 @@ export const useImageSource = ({ uri, entry, otherProps }): Return => {
   return null;
 };
 
-const getSource = (uri, showDefault, placeholderImage, otherProps) => {
+const getSource = (uri, showDefault, placeholderImage, source) => {
   const placeholderName = placeholderImage || "";
 
   const defaultPath = {
@@ -60,7 +62,7 @@ const getSource = (uri, showDefault, placeholderImage, otherProps) => {
     return { uri };
   }
 
-  const uriFromSource = getSourceUri(otherProps);
+  const uriFromSource = getSourceUri(source);
 
   if (uriFromSource) {
     return { uri: uriFromSource };
@@ -74,10 +76,9 @@ export const useImageSourceWithDefault = ({
   entry,
   showDefault,
   placeholderImage,
-  otherProps,
+  otherProps: { state: uriState, source },
 }): Return => {
-  const uriContext = getSourceContext(otherProps);
-  const uriState = getState(otherProps);
+  const uriContext = getSourceContext(source);
 
   const action = useActions(uriContext);
 
@@ -98,5 +99,5 @@ export const useImageSourceWithDefault = ({
     return extractAsset(!isTV(), entryStateLocal.asset, uriState);
   }
 
-  return getSource(uri, showDefault, placeholderImage, otherProps);
+  return getSource(uri, showDefault, placeholderImage, source);
 };

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

@@ -9,6 +9,7 @@ import { useTrackCurrentAutoScrollingElement } from "@applicaster/zapp-react-nat
 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 { useAccessibilityState } from "@applicaster/zapp-react-native-utils/appUtils/accessibilityManager/hooks";
 
 type LiveImageProps = {
   item: ZappEntry;
@@ -108,8 +109,7 @@ const prepareEntry = (entry) => {
     };
   }
 
-  const previewPlayback =
-    entry.extensions?.["brightcove"]?.["preview_playback"];
+  const previewPlayback = entry.extensions?.brightcove?.preview_playback;
 
   if (previewPlayback) {
     return {
@@ -117,14 +117,14 @@ const prepareEntry = (entry) => {
       extensions: {
         ...entry.extensions,
         brightcove: {
-          ...entry?.extensions?.["brightcove"],
+          ...entry?.extensions?.brightcove,
           video_id: previewPlayback,
         },
       },
     };
   }
 
-  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+  if (entry.extensions?.brightcove?.video_id) {
     return entry;
   }
 
@@ -174,7 +174,7 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
     // TODO: Add more dict if needed from the screen component, styles, data etc
     return {
       playerPluginId: playerScreen?.type ?? DEFAULT_PLAYER_IDENTIFIER,
-      screenConfig: playerScreen?.["general"],
+      screenConfig: playerScreen?.general,
     };
   }
 
@@ -206,6 +206,9 @@ const LiveImageComponent = (props: LiveImageProps) => {
     state,
   } = props;
 
+  const accessibilityState = useAccessibilityState({});
+  const isScreenReaderEnabled = accessibilityState.screenReaderEnabled;
+
   const component = useUIComponentContext();
 
   // Fix for blinking on state change
@@ -239,7 +242,8 @@ const LiveImageComponent = (props: LiveImageProps) => {
     getFocusedState(state, componentType, isCurrentlyFocused) &&
     playableEntry &&
     cellUUID &&
-    isSupportedTVForLiveImage();
+    isSupportedTVForLiveImage() &&
+    !isScreenReaderEnabled;
 
   return (
     <>

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

@@ -3,8 +3,8 @@ import { isNil } from "ramda";
 import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
-  IMAGE_SIZING_FIT,
   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";
 
@@ -25,49 +25,51 @@ interface Props {
   fitPosition: typeof FIT_POSITION;
   fixedWidth: number;
   fixedHeight: number;
-  onAsyncRender: () => void;
+  onAsyncRender?: () => void;
 }
 
 /** Secondary Image Dynamic does not render until the image is loaded */
-const SecondaryImageDynamic = (props: Props) => {
-  const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
-    props;
+const SecondaryImageDynamic = withAsyncRenderHOC(
+  (props: Props & { onAsyncRender: () => void }) => {
+    const { uri, style, displayMode, imageSizing, fitPosition, onAsyncRender } =
+      props;
 
-  const imageDimension = useGetImageDimensions(
-    uri,
-    style.width as number,
-    isImageSizingFit(imageSizing) ? undefined : (style.height as number)
-  );
+    const imageDimension = useGetImageDimensions(
+      uri,
+      style.width as number,
+      isImageSizingFit(imageSizing) ? undefined : (style.height as number)
+    );
 
-  const containerHeight = imageDimension?.height;
+    const containerHeight = imageDimension?.height;
 
-  const containerWidth = style?.width;
+    const containerWidth = style?.width;
 
-  if (isNil(imageDimension?.aspectRatio)) {
-    return null;
-  }
+    if (isNil(imageDimension?.aspectRatio)) {
+      return null;
+    }
 
-  return (
-    <View style={style} onLayout={onAsyncRender}>
-      <Image
-        {...props}
-        source={{ uri }}
-        style={{
-          ...getStyle({
-            imageSizing,
-            fitPosition,
-            displayMode,
-            imageDimension,
-            containerHeight,
-            containerWidth,
-          }),
-          borderRadius: style.borderRadius,
-          aspectRatio: imageDimension.aspectRatio,
-        }}
-      />
-    </View>
-  );
-};
+    return (
+      <View style={style} onLayout={onAsyncRender}>
+        <Image
+          {...props}
+          source={{ uri }}
+          style={{
+            ...getStyle({
+              imageSizing,
+              fitPosition,
+              displayMode,
+              imageDimension,
+              containerHeight,
+              containerWidth,
+            }),
+            borderRadius: style.borderRadius,
+            aspectRatio: imageDimension.aspectRatio,
+          }}
+        />
+      </View>
+    );
+  }
+);
 
 /** Secondary Image Fixed does not render  the image until the image is loaded, but keep container rendered */
 const SecondaryImageFixed = (props: Props) => {
@@ -79,7 +81,6 @@ const SecondaryImageFixed = (props: Props) => {
     fitPosition,
     fixedHeight,
     fixedWidth,
-    onAsyncRender,
   } = props;
 
   const imageDimension = useGetImageDimensions(
@@ -89,7 +90,7 @@ const SecondaryImageFixed = (props: Props) => {
   );
 
   return (
-    <View style={style} onLayout={onAsyncRender}>
+    <View style={style}>
       {isNil(imageDimension?.aspectRatio) ? null : (
         <Image
           {...props}
@@ -128,4 +129,4 @@ const SecondaryImageComponent = (props: Props) => {
   );
 };
 
-export const SecondaryImage = withAsyncRenderHOC(SecondaryImageComponent);
+export const SecondaryImage = SecondaryImageComponent;

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

@@ -10,6 +10,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri={undefined}
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -23,6 +27,10 @@ describe("SecondaryImage - Image", () => {
         displayMode="dynamic"
         uri="someurl"
         style={{ width: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
       />
     );
 
@@ -36,6 +44,93 @@ describe("SecondaryImage - Image", () => {
         uri="someUrl"
         displayMode="dynamic"
         style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode without image until loaded", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="fixed"
+        uri="someurl"
+        style={{ width: 100, height: 100, borderRadius: 5 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should not render in dynamic mode without image", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        displayMode="dynamic"
+        uri={null}
+        style={{ width: 100, height: 100 }}
+        imageSizing="fit"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage should render in fixed mode with known dimensions", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+    expect(wrapper.toJSON()).toMatchSnapshot();
+  });
+
+  it("SecondaryImage dynamic mode should call onAsyncRender when provided", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="dynamic"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={0}
+        fixedHeight={0}
+      />
+    );
+
+    expect(wrapper.toJSON()).not.toEqual(null);
+  });
+
+  it("SecondaryImage fixed mode should not use async render props", async () => {
+    const wrapper = await render(
+      <SecondaryImage
+        uri="someUrl"
+        displayMode="fixed"
+        style={{ width: 100, height: 100, borderRadius: 10 }}
+        imageSizing="fill"
+        fitPosition="center"
+        fixedWidth={100}
+        fixedHeight={100}
       />
     );
 

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

@@ -1,9 +1,45 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`SecondaryImage - Image SecondaryImage fixed mode should not use async render props 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
 exports[`SecondaryImage - Image SecondaryImage should not render if no aspect ratio (dynamic) 1`] = `null`;
 
 exports[`SecondaryImage - Image SecondaryImage should not render if no uri 1`] = `null`;
 
+exports[`SecondaryImage - Image SecondaryImage should not render in dynamic mode without image 1`] = `null`;
+
 exports[`SecondaryImage - Image SecondaryImage should render if known dimensions 1`] = `
 <View
   onLayout={[Function]}
@@ -17,6 +53,10 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
 >
   <Image
     displayMode="dynamic"
+    fitPosition="center"
+    fixedHeight={0}
+    fixedWidth={0}
+    imageSizing="fill"
     onAsyncRender={[Function]}
     source={
       {
@@ -35,3 +75,49 @@ exports[`SecondaryImage - Image SecondaryImage should render if known dimensions
   />
 </View>
 `;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode with known dimensions 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 10,
+      "height": 100,
+      "width": 100,
+    }
+  }
+>
+  <Image
+    displayMode="fixed"
+    fitPosition="center"
+    fixedHeight={100}
+    fixedWidth={100}
+    imageSizing="fill"
+    source={
+      {
+        "uri": "someUrl",
+      }
+    }
+    style={
+      {
+        "aspectRatio": 1,
+        "borderRadius": 10,
+        "height": 100,
+        "width": 100,
+      }
+    }
+    uri="someUrl"
+  />
+</View>
+`;
+
+exports[`SecondaryImage - Image SecondaryImage should render in fixed mode without image until loaded 1`] = `
+<View
+  style={
+    {
+      "borderRadius": 5,
+      "height": 100,
+      "width": 100,
+    }
+  }
+/>
+`;

package/Components/MasterCell/DefaultComponents/SecondaryImage/__tests__/index.test.ts

@@ -0,0 +1,141 @@
+import { SecondaryImage } from "../index";
+
+describe("SecondaryImage - Configuration Builder", () => {
+  const mockValue = (config: any) => (key: string, transformer?: Function) => {
+    const value = config[key];
+
+    return transformer ? transformer(value) : value;
+  };
+
+  it("should pass false as second argument to image_src_from_media_item", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "custom_image",
+      secondary_image_display_mode: "dynamic",
+      secondary_image_dynamic_width: 100,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).not.toBeNull();
+    expect(result?.elements).toBeDefined();
+    expect(result?.elements[0].data).toBeDefined();
+
+    const imageData = result?.elements[0].data[0];
+    expect(imageData.func).toBe("image_src_from_media_item");
+    expect(imageData.args).toEqual(["custom_image", false]);
+    expect(imageData.propName).toBe("uri");
+  });
+
+  it("should return null when secondary image is disabled", () => {
+    const config = {
+      secondary_image_switch: false,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when position does not match currentPosition", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "above_text_label_1",
+      secondary_image_visibility: "always",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should return null when visibility does not match state", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "focused",
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result).toBeNull();
+  });
+
+  it("should include display mode and image sizing in additionalProps", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_image_key: "logo",
+      secondary_image_display_mode: "fixed",
+      secondary_image_image_sizing: "fill",
+      secondary_image_fit_position: "center",
+      secondary_image_fixed_width: 200,
+      secondary_image_fixed_height: 150,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].additionalProps).toMatchObject({
+      displayMode: "fixed",
+      imageSizing: "fill",
+      fitPosition: "center",
+      fixedWidth: 200,
+      fixedHeight: 150,
+    });
+  });
+
+  it("should apply correct styles including margins and border radius", () => {
+    const config = {
+      secondary_image_switch: true,
+      secondary_image_position: "over_image",
+      secondary_image_visibility: "always",
+      secondary_image_display_mode: "fixed",
+      secondary_image_fixed_width: 100,
+      secondary_image_fixed_height: 100,
+      secondary_image_corner_radius: 12,
+      secondary_image_margin_top: 10,
+      secondary_image_margin_left: 5,
+      secondary_image_margin_right: 5,
+      secondary_image_margin_bottom: 10,
+    };
+
+    const result = SecondaryImage({
+      value: mockValue(config),
+      currentPosition: "over_image",
+      state: "default",
+    });
+
+    expect(result?.elements[0].style).toMatchObject({
+      width: 100,
+      height: 100,
+      borderRadius: 12,
+      marginTop: 10,
+      marginLeft: 5,
+      marginRight: 5,
+      marginBottom: 10,
+    });
+  });
+});

package/Components/MasterCell/DefaultComponents/SecondaryImage/hooks/__tests__/useGetImageDimensions.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from "@testing-library/react-hooks";
+import { renderHook, waitFor } from "@testing-library/react-native";
 import { Image } from "react-native";
 
 import { useGetImageDimensions } from "../useGetImageDimensions";
@@ -13,15 +13,16 @@ jest.spyOn(Image, "getSize").mockImplementation((_uri, success) => {
 
 describe("useGetImageDimensions", () => {
   it("should return aspect ration initially when known dimensions", async () => {
-    const { result, waitForNextUpdate } = renderHook(() =>
+    const { result } = renderHook(() =>
       useGetImageDimensions("https://some_url.com", WIDTH, undefined)
     );
 
     expect(result.current).toBeUndefined();
-    await waitForNextUpdate();
 
-    expect(result.current).toEqual(
-      getDimension({ width: WIDTH, height: HEIGTH })
-    );
+    await waitFor(() => {
+      expect(result.current).toEqual(
+        getDimension({ width: WIDTH, height: HEIGTH })
+      );
+    });
   });
 });

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

@@ -103,7 +103,7 @@ export const SecondaryImage = ({ value, currentPosition, state }: Props) => {
         data: [
           {
             func: "image_src_from_media_item",
-            args: [imageKey],
+            args: [imageKey, false],
             propName: "uri",
           },
         ],

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

@@ -52,14 +52,14 @@ const _Text = ({
     : textTransform(transformText, _label);
 
   React.useLayoutEffect(() => {
-    // For FocusableCells with action buttons
-    if (otherProps.state) {
-      if (otherProps.state === "focused" && cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
-      }
-    } else {
-      if (cellFocused === true) {
-        accessibilityManager.addHeading(textLabel);
+    if (cellFocused) {
+      switch (otherProps.state) {
+        case "focused":
+          accessibilityManager.addHeading(textLabel);
+          break;
+        case "focused_selected":
+          accessibilityManager.addHeading(`${textLabel}, Selected`);
+          break;
       }
     }
   }, [cellFocused, otherProps.state, textLabel]);