@applicaster/zapp-react-native-ui-components 12.0.0-rc.13 → 12.0.0-rc.130

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

@@ -31,10 +31,10 @@ function Image({
 
   return (
     <RnImage
-      defaultSource={placeholderImage || ""}
+      defaultSource={placeholderImage || null}
       style={style}
       source={updatedSource}
-      {...R.omit(["source"], otherProps)}
+      {...R.omit(["source", "placeholderImage"], otherProps)}
     />
   );
 }

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

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { ImageStyle } from "react-native";
+import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+type Source = {
+  uri: string;
+};
+
+type Props = Record<string, any> & {
+  style: ImageStyle;
+  uri?: string;
+  placeholderImage?: string;
+  entry?: ZappEntry | ZappFeed;
+  withDimensions: (source: Source) => Source;
+};
+
+const normalize = Math.ceil;
+
+const isValidSize = (size: unknown): boolean =>
+  toFiniteNumberWithDefault(0, size) > 0;
+
+type WidthDimensions = { aspectRatio?: number; width: number; height?: number };
+type HeightDimensions = {
+  aspectRatio?: number;
+  width?: number;
+  height: number;
+};
+type FullDimensions = { aspectRatio?: number; width: number; height: number };
+type Dimensions = WidthDimensions | HeightDimensions | FullDimensions;
+
+const calculateDimensions = ({ aspectRatio, width, height }: Dimensions) => {
+  if (aspectRatio) {
+    return {
+      width: width || height * aspectRatio,
+      height: height || width / aspectRatio,
+    };
+  }
+
+  return { width, height };
+};
+
+const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
+  const { width, height } = calculateDimensions(style);
+
+  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
+    return source;
+  }
+
+  return {
+    ...source,
+    maxWidth: normalize(width),
+    maxHeight: normalize(height),
+  };
+};
+
+export default function useImageSize(props: Props) {
+  const { style, applyMaxSize, source, withDimensions } = props;
+
+  const sourceWithMaxSizes = React.useMemo(
+    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
+    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
+  );
+
+  return sourceWithMaxSizes;
+}

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

@@ -0,0 +1,71 @@
+import { ImageStyle } from "react-native";
+
+import {
+  getImageContainerMarginStyles,
+  ifElseFocusedSelected,
+} from "@applicaster/zapp-react-native-utils/cellUtils";
+import { toNumberWithDefaultZero } from "@applicaster/zapp-react-native-utils/numberUtils";
+
+export const ImageBorderContainer = ({
+  value,
+  state,
+  imageStyles,
+}: {
+  value: (key: string) => string;
+  state: CellState;
+  imageStyles: ImageStyle;
+}) => {
+  const imageMargins = getImageContainerMarginStyles({ value });
+
+  return {
+    type: "BorderContainerView",
+    style: {
+      position: "absolute",
+      // Image border now separated from the image, so cell padding affects the border position
+      marginTop:
+        toNumberWithDefaultZero(imageMargins.marginTop) +
+        toNumberWithDefaultZero(value("cell_padding_top")),
+      marginLeft:
+        toNumberWithDefaultZero(imageMargins.marginLeft) +
+        toNumberWithDefaultZero(value("cell_padding_left")),
+      marginRight:
+        toNumberWithDefaultZero(imageMargins.marginRight) +
+        toNumberWithDefaultZero(value("cell_padding_right")),
+      marginBottom:
+        toNumberWithDefaultZero(imageMargins.marginBottom) +
+        toNumberWithDefaultZero(value("cell_padding_bottom")),
+      zIndex: 1,
+      borderWidth: value("image_border_size"),
+      borderColor: ifElseFocusedSelected(
+        state,
+        value("image_focused_border_color"),
+        value("image_selected_border_color"),
+        value("image_focused_selected_border_color"),
+        value("image_border_color")
+      ),
+      borderRadius: toNumberWithDefaultZero(value("image_corner_radius")),
+    },
+    additionalProps: {
+      pointerEvents: "none",
+      borderPosition: value("image_border_position"),
+      borderPaddingTop: toNumberWithDefaultZero(
+        value("image_border_padding_top")
+      ),
+      borderPaddingRight: toNumberWithDefaultZero(
+        value("image_border_padding_right")
+      ),
+      borderPaddingBottom: toNumberWithDefaultZero(
+        value("image_border_padding_bottom")
+      ),
+      borderPaddingLeft: toNumberWithDefaultZero(
+        value("image_border_padding_left")
+      ),
+    },
+    elements: [
+      {
+        type: "View",
+        style: imageStyles,
+      },
+    ],
+  };
+};

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

@@ -2,6 +2,7 @@ import React from "react";
 import { isVideoPreviewEnabled } from "@applicaster/zapp-react-native-ui-components/Components/MasterCell/utils";
 import { LiveImage } from "../LiveImage";
 import PureImage from "../Image";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 type Props = {
   enable_video_preview: boolean;
@@ -9,7 +10,10 @@ type Props = {
 };
 
 export const ImageContainer = (props: Props) => {
-  const Component = isVideoPreviewEnabled(props) ? LiveImage : PureImage;
+  const isActive = useIsScreenActive();
+
+  const Component =
+    isVideoPreviewEnabled(props) && isActive ? LiveImage : PureImage;
 
   return <Component {...props} />;
 };

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

@@ -18,6 +18,7 @@ type LiveImageProps = {
   imageKey?: string;
   state: "focused" | "unfocused" | "selected";
   audio_muted_by_default?: boolean;
+  uri: string; // cover image url
 };
 
 const DEFAULT_PLAYER_IDENTIFIER = "QuickBrickPlayerPlugin";
@@ -107,6 +108,26 @@ const prepareEntry = (entry) => {
     };
   }
 
+  const previewPlayback =
+    entry.extensions?.["brightcove"]?.["preview_playback"];
+
+  if (previewPlayback) {
+    return {
+      ...entry,
+      extensions: {
+        ...entry.extensions,
+        brightcove: {
+          ...entry?.extensions?.["brightcove"],
+          video_id: previewPlayback,
+        },
+      },
+    };
+  }
+
+  if (entry.extensions?.["brightcove"]?.["video_id"]) {
+    return entry;
+  }
+
   const src = entry.content?.src;
 
   if (!src) {
@@ -176,10 +197,23 @@ const getPlayerConfig = (player_screen_id, actionIdentifier) => {
 const positionAbsolute: ViewStyle = { position: "absolute" };
 
 const LiveImageComponent = (props: LiveImageProps) => {
-  const { item, style, cellUUID, imageKey, actionIdentifier, state } = props;
+  const {
+    item,
+    style: componentStyle,
+    cellUUID,
+    imageKey,
+    actionIdentifier,
+    state,
+  } = props;
 
   const component = useUIComponentContext();
 
+  // Fix for blinking on state change
+  const style = React.useMemo(
+    () => ({ ...componentStyle, backgroundColor: "transparent" }),
+    [componentStyle]
+  );
+
   const componentType = React.useMemo(
     () => getPropComponentType(component),
     [component?.id]
@@ -209,10 +243,11 @@ const LiveImageComponent = (props: LiveImageProps) => {
 
   return (
     <>
-      <Image {...props} />
+      <Image {...props} applyMaxSize />
       {isShouldRender && (
         <View style={[style, positionAbsolute]}>
           <PlayerLiveImage
+            uri={props.uri}
             playerId={cellUUID}
             playerPluginId={playerPluginId}
             screenConfig={screenConfig}

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

@@ -1,11 +1,12 @@
 import * as React from "react";
 import { isNil } from "ramda";
-import { Image as RNImage, ImageStyle, View } from "react-native";
+import { ImageStyle, View } from "react-native";
 import {
   FIT_POSITION,
   IMAGE_SIZING_FIT,
   IMAGE_SIZING_FILL,
 } 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 {
@@ -59,7 +60,7 @@ const SecondaryImageComponent = (props: Props) => {
 
   return (
     <View style={style} onLayout={onAsyncRender}>
-      <RNImage
+      <Image
         {...props}
         source={{ uri }}
         style={{

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

@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Text } from "react-native";
 import { omit } from "ramda";
-import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
   textTransform,
   dateFormat,
@@ -9,6 +8,9 @@ import {
 
 import { useTextLabel, withFocusedStyles } from "./hooks";
 import { withScaledLineHeight } from "./utils";
+import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
+import { MeasurementPortalContext } from "../../../MeasurmentsPortal";
+import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 
 type Props = {
   style: any;
@@ -32,14 +34,24 @@ const _Text = ({
   ...otherProps
 }: Props) => {
   const _label = useTextLabel({ label, entry });
+  const isMeasurement = React.useContext(MeasurementPortalContext);
 
   if (isNilOrEmpty(_label)) {
     return null;
   }
 
+  // set maximum possible height for the text in case of measurement
+  const height =
+    isMeasurement && otherProps.numberOfLines && style.lineHeight
+      ? toNumber(otherProps.numberOfLines) * toNumber(style.lineHeight)
+      : undefined;
+
   return (
     <Text
-      style={withScaledLineHeight(withFocusedStyles({ style, otherProps }))}
+      style={[
+        withScaledLineHeight(withFocusedStyles({ style, otherProps })),
+        { height },
+      ]}
       {...withoutLabel(otherProps)}
     >
       {dateTransformEnabled

package/Components/MasterCell/DefaultComponents/Toggle.tsx

@@ -23,7 +23,11 @@ export const Toggle = (props: Props) => {
     iosBackgroundColor,
   } = style;
 
-  const isSelected = React.useMemo(() => (cellState === "selected"), [item?.id, cellState]);
+  const isSelected = React.useMemo(
+    () => cellState === "selected",
+    [item?.id, cellState]
+  );
+
   const actionContext = useActions(action?.identifier);
 
   const [actionState, setActionState] = useState(

package/Components/MasterCell/DefaultComponents/__tests__/text.test.tsx

@@ -1,11 +1,23 @@
 import React from "react";
-import { Text } from "react-native";
+import RN from "react-native";
 import { Provider } from "react-redux";
 import TestRenderer from "react-test-renderer";
-import configureStore from "redux-mock-store";
-import CustomText from "../Text";
+import configureStoreFn from "redux-mock-store";
 
-const mockStore = configureStore();
+const mockUseIsRTL = jest.fn(() => true);
+const mockGetIsRTL = jest.fn(() => true);
+const mockUseLocalizedStrings = jest.fn(() => ({}));
+const mockGetUILanguage = jest.fn(() => "he-HE");
+
+jest.mock("@applicaster/zapp-react-native-utils/localizationUtils", () => ({
+  useIsRTL: mockUseIsRTL,
+  getIsRTL: mockGetIsRTL,
+  useLocalizedStrings: mockUseLocalizedStrings,
+  getUILanguage: mockGetUILanguage,
+}));
+
+const CustomText = require("../Text").default;
+const mockStore = configureStoreFn();
 
 const defaultProps = {
   entry: {},
@@ -22,7 +34,7 @@ const getRenderedText = (label: string, store: any) => {
     </Provider>
   );
 
-  return testRenderer.root.findByType(Text).props.children;
+  return testRenderer.root.findByType(RN.Text).props.children;
 };
 
 describe("RTL app: Hebrew text contains english word", () => {
@@ -34,7 +46,7 @@ describe("RTL app: Hebrew text contains english word", () => {
     remoteConfigurations: { localizations: { he: {} } },
     appData: {
       languageCode: "he",
-      countryCode: "HE",
+      countryCode: "IL",
     },
   });
 
@@ -47,18 +59,22 @@ describe("RTL app: Hebrew text contains english word", () => {
 
   it("Hebrew text contains not first english word", () => {
     const renderedText = getRenderedText(textWithNotFirstEnglishWord, store);
-
     expect(renderedText).toEqual(textWithNotFirstEnglishWord);
   });
 
   it("Hebrew text doesn't contain english word", () => {
     const renderedText = getRenderedText(textWithoutEnglishWord, store);
-
     expect(renderedText).toEqual(textWithoutEnglishWord);
   });
 });
 
 describe("LTR app: English text", () => {
+  beforeAll(() => {
+    mockUseIsRTL.mockReturnValue(false);
+    mockGetIsRTL.mockReturnValue(false);
+    mockGetUILanguage.mockReturnValue("en-US");
+  });
+
   const englishText = "Test sentence";
 
   const store = mockStore({
@@ -71,7 +87,6 @@ describe("LTR app: English text", () => {
 
   it("English text", () => {
     const renderedText = getRenderedText(englishText, store);
-
     expect(renderedText).toEqual(englishText);
   });
 });

package/Components/MasterCell/DefaultComponents/index.ts

@@ -15,6 +15,7 @@ import { BorderContainerView } from "./BorderContainerView";
 import { CellBadge } from "./CellBadge";
 import { TvActionButtons } from "./tv/TvActionButtons";
 import { ButtonContainerView } from "./tv/ButtonContainerView";
+import { ImageBorderContainer } from "./ImageBorderContainer";
 
 export const defaultComponents = {
   View,
@@ -28,6 +29,7 @@ export const defaultComponents = {
   ProgressBar,
   Toggle,
   LiveImage,
+  ImageBorderContainer,
   BorderContainerView,
   DynamicBadge,
   SecondaryImage,

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.android.tsx

@@ -61,7 +61,10 @@ export function ButtonContainerView({
     <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         cloneElementsWithIds(buttonIds, filteredChildren)
       )}

package/Components/MasterCell/DefaultComponents/tv/ButtonContainerView/index.tsx

@@ -7,6 +7,10 @@ import type {
   ContainerProps,
   ContainerChildren,
 } from "./types";
+import {
+  useIsRTL,
+  applyRTLStylesIfNeeded,
+} from "@applicaster/zapp-react-native-utils/localizationUtils";
 
 const HorizontalSeparator = ({ width }: HorizontalSeparatorProps) => (
   <View style={{ width }} />
@@ -17,6 +21,7 @@ export function ButtonContainerView({
   children,
   ...otherProps
 }: ContainerProps) {
+  const isRTL = useIsRTL();
   const horizontalGutter = R.pathOr(0, ["horizontalGutter"], otherProps);
 
   const filteredChildren = useFilterChildren<ContainerChildren>(children);
@@ -26,10 +31,13 @@ export function ButtonContainerView({
   }
 
   return (
-    <View style={style}>
+    <View style={applyRTLStylesIfNeeded(style, isRTL)}>
       {insertBetween(
         (index) => (
-          <HorizontalSeparator key={index} width={horizontalGutter} />
+          <HorizontalSeparator
+            key={`separator_${index}`}
+            width={horizontalGutter}
+          />
         ),
         filteredChildren
       )}

package/Components/MasterCell/SharedUI/CollapsibleTextContainer/index.ts

@@ -1,6 +1,7 @@
-import { path, pathOr } from "ramda";
+import { path } from "ramda";
 import { isNilOrEmpty } from "@applicaster/zapp-react-native-utils/reactUtils/helpers";
 import {
+  getColorFromData,
   getKeyForLabel,
   mapSelfAlignment,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
@@ -48,15 +49,10 @@ export const CollapsibleTextContainer = ({
       ]),
       {
         func: (data) => {
-          const value = getValue("background_color");
-
-          // check if value is a reference to an extension
-          if (value.startsWith("extensions")) {
-            return pathOr(value, value.split("."), data);
-          } else {
-            // return default value
-            return additionalStyles.backgroundColor;
-          }
+          return getColorFromData({
+            data,
+            valueFromLayout: additionalStyles.backgroundColor,
+          });
         },
         propName: "backgroundColor",
       },

package/Components/MasterCell/SharedUI/ProgressBar/hooks/useFillInPercent.ts

@@ -5,6 +5,7 @@ import * as R from "ramda";
 
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import { normalizeProgressValue } from "./utils";
+import { useIsScreenActive } from "@applicaster/zapp-react-native-utils/reactHooks";
 
 const ACTION_NAME = "continue-watching";
 const DEFAULT_FILL = 0;
@@ -27,6 +28,7 @@ const getProgressValue = (
 
 export const useFillInPercent = (entry: ZappEntry): number => {
   const action = useActions(ACTION_NAME);
+  const isActive = useIsScreenActive();
 
   const [fillInPercent, setFillInPercent] =
     React.useState<number>(DEFAULT_FILL);
@@ -39,6 +41,10 @@ export const useFillInPercent = (entry: ZappEntry): number => {
   }, []);
 
   React.useEffect(() => {
+    if (!isActive) {
+      return;
+    }
+
     // refresh progress in UI when it was changed in CW
     const unsubscribe = action?.addDataSourceListener?.(() => {
       getProgressValue(action, entry, (progress) => {
@@ -49,7 +55,7 @@ export const useFillInPercent = (entry: ZappEntry): number => {
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [isActive]);
 
   return fillInPercent;
 };

package/Components/MasterCell/dataAdapter.ts

@@ -37,14 +37,28 @@ function retrieveData(entry, func, args) {
  */
 
 export function configInflater(
-  entry,
-  { type, style, additionalProps = {}, data = [], elements }
+  entry: any,
+  {
+    type,
+    style,
+    additionalProps = {},
+    data = [],
+    elements,
+  }: {
+    type: any;
+    style: any;
+    additionalProps?: Record<string, any>;
+    data?: Array<{ propName: string; func: Function; args: any[] }>;
+    elements?: any[];
+  }
 ) {
-  const props = R.reduce(
-    (acc, curr) =>
-      R.assoc(curr.propName, retrieveData(entry, curr.func, curr.args), acc),
-    additionalProps,
-    data
+  const props = data.reduce(
+    (acc, curr) => {
+      acc[curr.propName] = retrieveData(entry, curr.func, curr.args);
+
+      return acc;
+    },
+    { ...additionalProps }
   );
 
   let adjustedElements;

package/Components/MasterCell/hooks/useAsyncRendering/index.ts

@@ -53,7 +53,7 @@ export const useAsyncRendering = (viewRef: React.RefObject<View>): Return => {
       measure(viewRef?.current, ({ width, height }) => {
         setDimensions({
           width,
-          height,
+          height: Math.ceil(height),
         });
       });
     })

package/Components/MasterCell/index.tsx

@@ -52,6 +52,8 @@ export function masterCellBuilder({
   const { View } = componentsMap;
   const elementsBuilder = dataAdapter(cellConfiguration);
 
+  // This is very expensive operation
+  // Keep calls to minimum
   const hasFocusableInside = hasFocusableInsideBuilder(elementsBuilder);
 
   /**
@@ -74,8 +76,8 @@ export function masterCellBuilder({
     const selectedState = screen?.selectedEntry;
 
     const entryIsSelected = React.useMemo(
-      () => selectedState?.id === item?.id,
-      [selectedState?.id]
+      () => !!(selectedState?.id && selectedState?.id === item?.id),
+      [selectedState?.id, item?.id]
     );
 
     const elements = React.useMemo(
@@ -84,7 +86,7 @@ export function masterCellBuilder({
           entry: item,
           state: getEntryState(state, entryIsSelected),
         }),
-      [state, item, entryIsSelected]
+      [state, item?.id, entryIsSelected] // Assuming that item won't mutate
     );
 
     const wrapperRef = React.useRef(null);

package/Components/MasterCell/utils/__tests__/insertBetween.test.js

@@ -9,4 +9,13 @@ describe("insertBetween", () => {
 
     expect(result).toEqual([1, "|", 2, "|", 3]);
   });
+
+  it("insertBetween", () => {
+    const separator = (index) => `separator:${index}`;
+    const items = [1, 2, 3];
+
+    const result = insertBetween(separator, items);
+
+    expect(result).toEqual([1, "separator:0", 2, "separator:1", 3]);
+  });
 });