@applicaster/zapp-react-native-ui-components 12.0.0-alpha.3849101242 → 12.0.0-alpha.3893335783

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

@@ -7,24 +7,50 @@ type BorderPosition = "inside" | "outside" | "center";
 interface Props {
   style: ImageStyle | ViewStyle;
   borderPosition: BorderPosition;
-  borderPaddingTop: number;
-  borderPaddingRight: number;
-  borderPaddingBottom: number;
-  borderPaddingLeft: number;
   children: React.ReactNode;
 }
 
-const COLOR_TRANSPARENT = "transparent";
+const MARGINS = [
+  "marginTop",
+  "marginBottom",
+  "marginLeft",
+  "marginRight",
+] as const;
 
-const styles = StyleSheet.create({
-  container: {
-    overflow: "visible",
-    borderWidth: 0,
-    borderColor: COLOR_TRANSPARENT,
-  },
-});
+const PADDINGS = [
+  "paddingTop",
+  "paddingBottom",
+  "paddingLeft",
+  "paddingRight",
+] as const;
 
-const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
+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
+) => {
   switch (borderPosition) {
     case "inside":
       return 0;
@@ -37,101 +63,104 @@ const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   }
 };
 
-const Border = ({
+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 = ({
   style,
-  padding,
   borderPosition,
 }: {
   style: ViewStyle;
-  padding: ViewStyle;
   borderPosition: BorderPosition;
 }) => {
-  if (!borderPosition) {
+  if (borderPosition === "outside") {
     return null;
   }
 
-  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,
-      };
+  const insideBorderWidth =
+    borderPosition === "center" ? style.borderWidth / 2 : style.borderWidth;
 
   return (
     <View
       style={{
         ...StyleSheet.absoluteFillObject,
-        right: -containerPadding - paddingRight,
-        bottom: -containerPadding - paddingBottom,
-        left: -containerPadding - paddingLeft,
-        top: -containerPadding - paddingTop,
-        borderWidth,
+        borderWidth: insideBorderWidth,
         borderColor: style.borderColor,
-        ...borderRadiusStyle,
+        borderRadius: style.borderRadius,
       }}
     />
   );
 };
 
 export const BorderContainerView = (props: Props) => {
-  const {
-    borderPosition,
-    borderPaddingTop,
-    borderPaddingRight,
-    borderPaddingBottom,
-    borderPaddingLeft,
-    style,
-    children,
-  } = 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 padding =
-    borderPosition === "outside"
-      ? {
-          paddingTop: borderPaddingTop,
-          paddingRight: borderPaddingRight,
-          paddingBottom: borderPaddingBottom,
-          paddingLeft: borderPaddingLeft,
-        }
-      : {};
+  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,
+  };
 
   return (
-    <View
-      {...props}
-      style={[style, styles.container, borderStyleForMissingBorder]}
-    >
+    <View {...props} style={[style, containerStyle]}>
       {children}
-      <Border style={style} padding={padding} borderPosition={borderPosition} />
+      <InsideBorder
+        style={{ ...style, ...borderStyleForMissingBorder }}
+        borderPosition={borderPosition}
+      />
     </View>
   );
 };

package/Components/VideoModal/PlayerDetails.tsx

@@ -42,12 +42,12 @@ export const PlayerDetails = ({
     : {};
 
   // Animation setup
-  const translateY = useRef(new Animated.Value(50)).current;
+  const translateY = useRef(new Animated.Value(100)).current;
   const opacity = useRef(new Animated.Value(0)).current;
 
   const runAnimation = () => {
     Animated.timing(translateY, {
-      toValue: -30,
+      toValue: 0,
       duration: 500,
       easing: Easing.inOut(Easing.ease),
       useNativeDriver: true,
@@ -63,7 +63,7 @@ export const PlayerDetails = ({
 
   useEffect(() => {
     if (isAudioPlayer) {
-      setTimeout(() => runAnimation(), 1500);
+      setTimeout(() => runAnimation(), 1000);
     }
   }, [isAudioPlayer]);
 

package/Components/VideoModal/PlayerWrapper.tsx

@@ -181,6 +181,17 @@ export const PlayerWrapper = (props: Props) => {
     [containerDimensions, playerDimesionsHack]
   );
 
+  const playerPositionStyle = React.useMemo(() => {
+    if (isModal) {
+      return {};
+    }
+
+    return {
+      left: 0,
+      width: "100%",
+    };
+  }, [isModal]);
+
   const pathname = `${ROUTE_TYPES.VIDEO_MODAL}/${entry?.id}`;
 
   return (
@@ -191,6 +202,7 @@ export const PlayerWrapper = (props: Props) => {
           style={[
             safeAreaStyles(configuration, isTablet),
             style,
+            playerPositionStyle,
             playerDimesionsHack,
           ]}
         >

package/Components/VideoModal/__tests__/__snapshots__/PlayerWrapper.test.tsx.snap

@@ -31,6 +31,7 @@ exports[`PlayerWrapper renders inline 1`] = `
           "width": 300,
         },
         Object {},
+        Object {},
       ]
     }
   >
@@ -109,6 +110,7 @@ exports[`PlayerWrapper renders inline and docked 1`] = `
           "width": 300,
         },
         Object {},
+        Object {},
       ]
     }
   >
@@ -187,6 +189,7 @@ exports[`PlayerWrapper renders inline on tablet in landscape orientation 1`] = `
           "width": 300,
         },
         Object {},
+        Object {},
       ]
     }
   >
@@ -280,6 +283,10 @@ exports[`PlayerWrapper renders properly 1`] = `
           "height": 800,
           "width": 300,
         },
+        Object {
+          "left": 0,
+          "width": "100%",
+        },
         Object {},
       ]
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.3849101242",
+  "version": "12.0.0-alpha.3893335783",
   "description": "Applicaster Zapp React Native ui components for the Quick Brick App",
   "main": "index.js",
   "types": "index.d.ts",
@@ -34,10 +34,10 @@
     "redux-mock-store": "^1.5.3"
   },
   "dependencies": {
-    "@applicaster/applicaster-types": "12.0.0-alpha.3849101242",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3849101242",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3849101242",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3849101242",
+    "@applicaster/applicaster-types": "12.0.0-alpha.3893335783",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.3893335783",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.3893335783",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.3893335783",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",