@applicaster/zapp-react-native-ui-components 12.0.0-rc.12 → 12.0.0-rc.121

package/Components/Layout/TV/index.web.tsx

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { pathOr } from "ramda";
+
+import { usePickFromState } from "@applicaster/zapp-react-native-redux/hooks";
+
+import { ScreenLayoutContextProvider } from "./ScreenLayoutContextProvider";
+import { StackNavigator } from "../../Navigator";
+
+type Components = {
+  NavBar: React.ComponentType<any>;
+  Background: React.ComponentType<any>;
+};
+
+type Props = {
+  Components: Components;
+};
+
+const Layout = ({ Components }: Props) => {
+  const { appState } = usePickFromState(["appState"]);
+  const appReady = pathOr(false, ["appReady"], appState);
+
+  if (!appReady) {
+    return null;
+  }
+
+  return (
+    <ScreenLayoutContextProvider>
+      <StackNavigator Components={Components} />
+    </ScreenLayoutContextProvider>
+  );
+};
+
+export default Layout;

package/Components/Layout/index.tsx

@@ -1,20 +1,24 @@
 import * as React from "react";
-import { isTV } from "@applicaster/zapp-react-native-utils/reactUtils";
-import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks/navigation";
-import { ScreenContextProvider } from "../../Contexts/ScreenContext";
+import {
+  isTV,
+  platformSelect,
+} from "@applicaster/zapp-react-native-utils/reactUtils";
 
 import Mobile from "./Mobile";
-import TV from "./TV";
 
-export default function Layout(props) {
-  const { currentRoute: pathname } = useNavigation();
+import TVWeb from "./TV/index.web";
+import TVDefault from "./TV/index";
+
+const TV = platformSelect({
+  samsung_tv: TVWeb,
+  lg_tv: TVWeb,
+  web: TVWeb,
+  default: TVDefault,
+});
 
+export default function Layout(props) {
   if (isTV()) {
-    return (
-      <ScreenContextProvider pathname={pathname}>
-        <TV {...props} />
-      </ScreenContextProvider>
-    );
+    return <TV {...props} />;
   } else {
     return <Mobile {...props} />;
   }

package/Components/MasterCell/DefaultComponents/ActionButton.tsx

@@ -25,6 +25,7 @@ type Props = {
   testID?: string;
   accessibilityLabel?: string;
   cellUUID?: string;
+  extraProps?: Record<string, any>;
 };
 
 function isStringAsset(asset) {
@@ -52,6 +53,7 @@ export function ActionButton(props: Props) {
   const { item, action, asset, flavour = "flavour_1", cellUUID } = props;
   const actionContext = useActions(action?.identifier);
 
+  // TODO: add subscription API for action availability
   const actionDisabled =
     typeof actionContext?.isActionAvailable === "function" &&
     !actionContext.isActionAvailable(item);
@@ -67,7 +69,7 @@ export function ActionButton(props: Props) {
     if (actionDisabled || !actionContext) return;
 
     setActionState(actionContext.initialEntryState(item));
-  }, [actionDisabled, item?.id]);
+  }, [actionDisabled, item?.id, actionContext]);
 
   const onPress = useCallback(() => {
     actionContext.invokeAction(item, {
@@ -108,6 +110,7 @@ export function ActionButton(props: Props) {
           flavour={flavour}
           asset={getAssetValue(asset, flavour)}
           cellUUID={cellUUID}
+          {...(props?.extraProps ?? {})}
         />
       )}
     </TouchableOpacity>

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

@@ -7,50 +7,28 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
+  borderPaddingTop: number;
+  borderPaddingRight: number;
+  borderPaddingBottom: number;
+  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const MARGINS = [
-  "marginTop",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-] as const;
-
-const PADDINGS = [
-  "paddingTop",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-] as const;
-
-const isPercentageValue = (value: number | string) => {
-  if (typeof value === "string" && value.endsWith("%")) {
-    return true;
-  }
-
-  return false;
-};
-
-const calculateContainerSpacing = ({
-  spacingKey,
-  style,
-  additionalSpacing,
-}: {
-  spacingKey: typeof MARGINS[number] | typeof PADDINGS[number];
-  style: ImageStyle | ViewStyle;
-  additionalSpacing: number;
-}) => {
-  return {
-    [spacingKey]:
-      toNumberWithDefaultZero(style[spacingKey]) + additionalSpacing,
-  };
-};
-
-const getContainerBorderWidth = (
-  borderPosition: BorderPosition,
-  borderWidth
-) => {
+const COLOR_TRANSPARENT = "transparent";
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: "visible",
+    borderWidth: 0,
+    borderColor: COLOR_TRANSPARENT,
+  },
+  border: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1,
+  },
+});
+
+const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -63,105 +41,96 @@ const getContainerBorderWidth = (
   }
 };
 
-const getContainerPadding = (borderPosition: BorderPosition, borderWidth) => {
-  switch (borderPosition) {
-    case "inside":
-      return borderWidth;
-    case "center":
-      return borderWidth / 2;
-    case "outside":
-      return 0;
-    default:
-      return 0;
-  }
-};
-
-const InsideBorder = ({
+const Border = ({
   style,
+  padding,
   borderPosition,
 }: {
   style: ViewStyle;
+  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (borderPosition === "outside") {
+  if (!borderPosition) {
     return null;
   }
 
-  const insideBorderWidth =
-    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
+  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
+  const containerPadding = getBorderPadding(borderPosition, borderWidth);
+
+  const initialBorderRadius = toNumberWithDefaultZero(style.borderRadius);
+  const paddingTop = toNumberWithDefaultZero(padding.paddingTop);
+  const paddingRight = toNumberWithDefaultZero(padding.paddingRight);
+  const paddingBottom = toNumberWithDefaultZero(padding.paddingBottom);
+  const paddingLeft = toNumberWithDefaultZero(padding.paddingLeft);
+
+  const borderRadiusStyle = initialBorderRadius
+    ? {
+        borderTopLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingLeft),
+        borderTopRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingTop, paddingRight),
+        borderBottomLeftRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingLeft),
+        borderBottomRightRadius:
+          initialBorderRadius +
+          containerPadding +
+          Math.min(paddingBottom, paddingRight),
+      }
+    : {
+        borderTopLeftRadius: 0,
+        borderTopRightRadius: 0,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+      };
 
   return (
     <View
+      pointerEvents="none"
       style={{
-        ...StyleSheet.absoluteFillObject,
-        borderWidth: insideBorderWidth,
+        ...styles.border,
+        right: -containerPadding - paddingRight,
+        bottom: -containerPadding - paddingBottom,
+        left: -containerPadding - paddingLeft,
+        top: -containerPadding - paddingTop,
+        borderWidth,
         borderColor: style.borderColor,
-        borderRadius: style.borderRadius,
+        ...borderRadiusStyle,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const { style, children } = props;
-  // Return border position prop after re-implementing
-  const borderPosition = "outside";
-
-  const borderWidth = toNumberWithDefaultZero(style.borderWidth);
-  const spacing = getContainerPadding(borderPosition, borderWidth);
-
-  const borderStyleForMissingBorder =
-    style?.borderWidth === 0 || !style?.borderColor ? { borderRadius: 0 } : {};
-
-  const updatedMargins = MARGINS.reduce((acc, margin) => {
-    const marginValue = calculateContainerSpacing({
-      spacingKey: margin,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...marginValue };
-  }, {});
-
-  const updatedPaddings = PADDINGS.reduce((acc, padding) => {
-    const paddingValue = calculateContainerSpacing({
-      spacingKey: padding,
-      style,
-      additionalSpacing: spacing,
-    });
-
-    return { ...acc, ...paddingValue };
-  }, {});
-
-  const updatedWidth = style.width
-    ? isPercentageValue(style.width)
-      ? style.width
-      : toNumberWithDefaultZero(style.width) - spacing * 2
-    : undefined;
-
-  const updatedHeight = style.height
-    ? isPercentageValue(style.height)
-      ? style.height
-      : toNumberWithDefaultZero(style.height) - spacing * 2
-    : undefined;
-
-  const containerStyle = {
-    borderWidth: getContainerBorderWidth(borderPosition, borderWidth),
-    padding: spacing,
-    ...updatedMargins,
-    ...updatedPaddings,
-    width: updatedWidth,
-    height: updatedHeight,
-    ...borderStyleForMissingBorder,
-  };
+  const {
+    borderPosition,
+    borderPaddingTop,
+    borderPaddingRight,
+    borderPaddingBottom,
+    borderPaddingLeft,
+    style,
+    children,
+  } = props;
+
+  const padding =
+    borderPosition === "outside"
+      ? {
+          paddingTop: borderPaddingTop,
+          paddingRight: borderPaddingRight,
+          paddingBottom: borderPaddingBottom,
+          paddingLeft: borderPaddingLeft,
+        }
+      : {};
 
   return (
-    <View {...props} style={[style, containerStyle]}>
+    <View pointerEvents="box-none" {...props} style={[style, styles.container]}>
+      <Border style={style} padding={padding} borderPosition={borderPosition} />
       {children}
-      <InsideBorder
-        style={{ ...style, ...borderStyleForMissingBorder }}
-        borderPosition={borderPosition}
-      />
     </View>
   );
 };

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

@@ -1,6 +1,7 @@
 import {
   compact,
   ifElseFocusedSelected,
+  ifElseSelected,
 } from "@applicaster/zapp-react-native-utils/cellUtils";
 
 import { getPositionStyles } from "./utils";
@@ -12,9 +13,15 @@ type Props = {
   value: Function;
   state: string;
   visible?: Boolean;
+  isMobile?: Boolean;
 };
 
-export const CellBadge = ({ value, state, visible = true }: Props) => {
+export const CellBadge = ({
+  value,
+  state,
+  visible = true,
+  isMobile = false,
+}: Props) => {
   if (!value("cell_badge_switch") || !visible) {
     return null;
   }
@@ -45,13 +52,19 @@ export const CellBadge = ({ value, state, visible = true }: Props) => {
         data: [
           {
             func: () => {
-              return ifElseFocusedSelected(
-                state,
-                value("cell_badge_focused"),
-                value("cell_badge_selected"),
-                value("cell_badge_focused_selected"),
-                value("cell_badge_default")
-              );
+              return isMobile
+                ? ifElseSelected(
+                    state,
+                    value("cell_badge_selected"),
+                    value("cell_badge_default")
+                  )
+                : ifElseFocusedSelected(
+                    state,
+                    value("cell_badge_focused"),
+                    value("cell_badge_selected"),
+                    value("cell_badge_focused_selected"),
+                    value("cell_badge_default")
+                  );
             },
             args: [],
             propName: "uri",

package/Components/MasterCell/DefaultComponents/DynamicBadge.tsx

@@ -4,6 +4,7 @@ import { usePlayer } from "@applicaster/zapp-react-native-utils/appUtils/playerM
 
 type DynamicBadgeProps = {
   cellUUID?: string;
+  uri?: string;
 };
 
 const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
@@ -12,11 +13,12 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
   // TODO: Initial value should depends on player state (playing or not)
   const [showImage, setShowImage] = React.useState(true);
   const player = usePlayer(playerId);
+  const uri = props?.uri;
 
   React.useEffect(() => {
     if (playerId && player) {
       return player.addListener({
-        id: "dynamic-badges",
+        id: `dynamic-badges-${uri}`,
         listener: {
           onPlayerClose: () => {
             setShowImage(true);
@@ -35,7 +37,7 @@ const DynamicBadgeComponent = (props: DynamicBadgeProps) => {
     } else {
       setShowImage(true);
     }
-  }, [player]);
+  }, [player, uri]);
 
   if (!showImage) {
     return null;

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

@@ -4,6 +4,7 @@ import { Focusable } from "@applicaster/zapp-react-native-ui-components/Componen
 import { useActions } from "@applicaster/zapp-react-native-utils/reactHooks/actions";
 import * as R from "ramda";
 import { getXray } from "@applicaster/zapp-react-native-utils/logger";
+import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
 
 const { Logger } = getXray();
 
@@ -35,7 +36,9 @@ export function FocusableView({ style, children, item, ...otherProps }: Props) {
 
   const focusableId = getFocusableId(prefixId, suffixId);
 
-  const focused = focusableId === focusedButtonId;
+  const focused =
+    focusableId === focusedButtonId ||
+    toBooleanWithDefaultFalse(otherProps.focused);
 
   const additionalStyles = focused ? focusedStyles : normalStyles;
 

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageStyle, View } from "react-native";
 import * as R from "ramda";
-import ImageComponent from "@applicaster/zapp-react-native-ui-components/Components/FastImage";
+import { QBImage } from "@applicaster/zapp-react-native-ui-components/Components/Image";
 import { toBooleanWithDefaultFalse } from "@applicaster/zapp-react-native-utils/booleanUtils";
-import { toFiniteNumberWithDefault } from "@applicaster/zapp-react-native-utils/numberUtils";
 
 import { useImageSourceWithDefault, useCheckFailedUri } from "./hooks";
+import useImageSize from "./hooks/useImageSize";
 
 type Source = {
   uri: string;
@@ -19,32 +19,13 @@ type Props = Record<string, any> & {
   withDimensions: (source: Source) => Source;
 };
 
-const MemoizedImage = React.memo(ImageComponent, R.equals);
-
-const normalize = Math.ceil;
+const MemoizedImage = React.memo(QBImage, R.equals);
 
 const isValidExternalSource = (source): boolean =>
   source?.uri?.startsWith("http") ||
   source?.uri?.startsWith("data:image") ||
   source?.uri?.startsWith("file://");
 
-const isValidSize = (size: unknown): boolean =>
-  toFiniteNumberWithDefault(0, size) > 0;
-
-const getSourceWithMaxSizes = (applyMaxSize, style, source) => {
-  const { width, height } = style;
-
-  if (!applyMaxSize || !isValidSize(width) || !isValidSize(height)) {
-    return source;
-  }
-
-  return {
-    ...source,
-    maxWidth: normalize(width),
-    maxHeight: normalize(height),
-  };
-};
-
 export default function Image({
   style,
   uri,
@@ -82,10 +63,12 @@ export default function Image({
 
   const applyMaxSize = toBooleanWithDefaultFalse(otherProps?.applyMaxSize);
 
-  const sourceWithMaxSizes = React.useMemo(
-    () => withDimensions(getSourceWithMaxSizes(applyMaxSize, style, source)),
-    [applyMaxSize, style?.height, style?.width, source?.uri, withDimensions]
-  );
+  const sourceWithMaxSizes = useImageSize({
+    style,
+    applyMaxSize,
+    source,
+    withDimensions,
+  });
 
   if (isFailedToLoadUri(uri) || !isValidExternalSource(source)) {
     return <View style={style} />;

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

@@ -43,14 +43,16 @@ function Image({
     [source, error]
   );
 
+  const _source = shouldRenderImg
+    ? withDimensions(source)
+    : defaultPlaceHolderImage;
+
   return (
     // @ts-ignore
     <MemoizedImage
       style={style as ImageStyle}
       onError={() => setErrorState(true)}
-      source={
-        shouldRenderImg ? withDimensions(source) : defaultPlaceHolderImage
-      }
+      source={_source?.uri ? _source : undefined}
       {...R.omit(["source"], 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} />;
 };