@applicaster/zapp-react-native-ui-components 12.0.0-alpha.7623722215 → 12.0.0-alpha.8121552272

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,103 +63,102 @@ const getBorderPadding = (borderPosition: BorderPosition, borderWidth) => {
   }
 };
 
+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}
       <InsideBorder
-        style={style}
-        padding={padding}
+        style={{ ...style, ...borderStyleForMissingBorder }}
         borderPosition={borderPosition}
       />
     </View>

package/Components/PlayerContainer/PlayerContainer.tsx

@@ -54,7 +54,10 @@ import { toNumber } from "@applicaster/zapp-react-native-utils/numberUtils";
 import { usePlayNextOverlay } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/usePlayNextOverlay";
 import { PlayNextState } from "@applicaster/zapp-react-native-utils/appUtils/playerManager/OverlayObserver/OverlaysObserver";
 
-import { useModalAnimationContext } from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
+import {
+  useModalAnimationContext,
+  PlayerAnimationStateEnum,
+} from "@applicaster/zapp-react-native-ui-components/Components/VideoModal/ModalAnimation";
 
 type Props = {
   Player: React.ComponentType<any>;
@@ -231,6 +234,9 @@ const PlayerContainerComponent = (props: Props) => {
   const screenData = useTargetScreenData(item);
   const { setVisible: showNavBar } = useSetNavbarState();
 
+  const { isActiveGesture, startComponentsAnimation, setPlayerAnimationState } =
+    useModalAnimationContext();
+
   const playerEvent = (event, ...args) => {
     playerManager.invokeHandler(event, ...args);
   };
@@ -448,7 +454,7 @@ const PlayerContainerComponent = (props: Props) => {
       if (disableMiniPlayer) {
         navigator.closeVideoModal();
       } else {
-        navigator.minimiseVideoModal();
+        setPlayerAnimationState(PlayerAnimationStateEnum.minimize);
       }
     }
 
@@ -600,9 +606,6 @@ const PlayerContainerComponent = (props: Props) => {
     pluginConfiguration,
   };
 
-  const { isActiveGesture, startComponentsAnimation } =
-    useModalAnimationContext();
-
   return (
     <PlayerStateContext.Provider value={value}>
       <PlayerContainerContextProvider

package/Components/VideoModal/ModalAnimation/AnimatedScrollModal.tsx

@@ -9,6 +9,8 @@ import {
   TapGestureHandler,
   GestureHandlerRootView,
 } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -58,6 +60,8 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     setLastSnap,
   } = useModalAnimationContext();
 
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const { maximiseVideoModal, minimiseVideoModal, videoModalState } =
     useNavigation();
 
@@ -69,6 +73,11 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
     playerAnimationState !== PlayerAnimationStateEnum.minimize &&
     playerAnimationState !== PlayerAnimationStateEnum.maximaze;
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible &&
+    isNotMinimizeMaximazeAnimation &&
+    (isMaximazedModal || isMinimizedModal);
+
   const isAudioItem = React.useMemo(
     () =>
       videoModalState.item?.content?.type?.includes?.("audio") ||
@@ -290,15 +299,13 @@ export const AnimatedScrollModalComponent = ({ children }: Props) => {
       >
         <View pointerEvents="box-none">
           <PanGestureHandler
-            enabled={
-              (isMaximazedModal || isMinimizedModal) &&
-              isNotMinimizeMaximazeAnimation
-            }
+            enabled={isEnablePanGesture}
             ref={panHandlerRef}
             simultaneousHandlers={[scrollRef, tapHandlerRef]}
             shouldCancelWhenOutside={isMaximazedModal}
             onGestureEvent={onGestureEvent}
             onHandlerStateChange={onHandlerStateChange}
+            activeOffsetY={[-5, 5]}
           >
             <Animated.View>
               <NativeViewGestureHandler

package/Components/VideoModal/ModalAnimation/AnimatedVideoPlayerComponent.tsx

@@ -3,6 +3,8 @@ import { Animated, StyleSheet } from "react-native";
 
 import { useNavigation } from "@applicaster/zapp-react-native-utils/reactHooks";
 import { PanGestureHandler, State } from "react-native-gesture-handler";
+
+import { PlayerContainerContext } from "@applicaster/zapp-react-native-ui-components/Components/PlayerContainer/PlayerContainerContext";
 import {
   useModalAnimationContext,
   PlayerAnimationStateEnum,
@@ -35,9 +37,14 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
   } = useModalAnimationContext();
 
   const { videoModalState } = useNavigation();
+  const { isLanguageOverlayVisible } = React.useContext(PlayerContainerContext);
+
   const isMaximazedModal = videoModalState.mode === "MAXIMIZED";
   const isMinimizedModal = videoModalState.mode === "MINIMIZED";
 
+  const isEnablePanGesture =
+    !isLanguageOverlayVisible && (isMaximazedModal || isMinimizedModal);
+
   const onGestureEvent = Animated.event(
     [{ nativeEvent: { translationY: dragVideoPlayerY } }],
     { useNativeDriver: true }
@@ -53,7 +60,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
       if (videoModalState.mode === "MAXIMIZED") {
         if (translationY > 0) {
           const endOffsetY =
-            lastSnap + preparedTranslationY + dragToss * velocityY + 150;
+            lastSnap + preparedTranslationY + dragToss * velocityY + 200;
 
           let destSnapPoint = modalSnapPoints[0];
 
@@ -127,7 +134,7 @@ export const AnimatedVideoPlayer = ({ children }: Props) => {
 
   return (
     <PanGestureHandler
-      enabled={isMaximazedModal || isMinimizedModal}
+      enabled={isEnablePanGesture}
       shouldCancelWhenOutside={isMaximazedModal}
       onGestureEvent={onGestureEvent}
       onHandlerStateChange={onHandlerStateChange}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applicaster/zapp-react-native-ui-components",
-  "version": "12.0.0-alpha.7623722215",
+  "version": "12.0.0-alpha.8121552272",
   "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.7623722215",
-    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.7623722215",
-    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.7623722215",
-    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.7623722215",
+    "@applicaster/applicaster-types": "12.0.0-alpha.8121552272",
+    "@applicaster/zapp-react-native-bridge": "12.0.0-alpha.8121552272",
+    "@applicaster/zapp-react-native-redux": "12.0.0-alpha.8121552272",
+    "@applicaster/zapp-react-native-utils": "12.0.0-alpha.8121552272",
     "promise": "^8.3.0",
     "react-router-native": "^5.1.2",
     "url": "^0.11.0",