@zezosoft/zezo-ott-react-native-ui-kit 1.1.2 → 1.1.3

package/lib/module/components/Content/Card/Sliders/Styles/Two.js

@@ -20,18 +20,49 @@ import { ThumbnailCard } from "../../components/ThumbnailCard.js";
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from "../../components/RentOrBuyIcon.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// ============================================================================
+// Constants
+// ============================================================================
 const FULL_WIDTH = Display.fullWidth;
-const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
+const ASPECT_RATIO = 9 / 16;
+const FULL_HEIGHT = FULL_WIDTH * ASPECT_RATIO;
+const DEFAULT_SKELETON_COUNT = 3;
+const SCROLL_ANIMATION_DURATION = 300;
+const AUTO_PLAY_INTERVAL = 3000;
+const CAROUSEL_WINDOW_SIZE = 2;
+const SNAP_DEBOUNCE_DELAY = 50;
+const SKELETON_SPEED = 2000;
+const PAN_GESTURE_ACTIVE_OFFSET_X = [-10, 10];
+const PAN_GESTURE_FAIL_OFFSET_Y = [-5, 5];
+const GRADIENT_OVERLAY_COLORS = ['transparent', 'rgba(0,0,0,0.7)'];
+const GRADIENT_START = {
+  x: 0.5,
+  y: 0
+};
+const GRADIENT_END = {
+  x: 0.5,
+  y: 1
+};
+const INDICATOR_WIDTH_ACTIVE = scale(18);
+const INDICATOR_WIDTH_INACTIVE = scale(8);
+const INDICATOR_HEIGHT = scale(8);
+const INDICATOR_BORDER_RADIUS = scale(50);
+const TOUCH_OPACITY = 0.85;
 
-// Memoized carousel item component for better performance
+// ============================================================================
+// Types
+// ============================================================================
 
+// ============================================================================
+// Helper Components
+// ============================================================================
 const CarouselItem = /*#__PURE__*/memo(({
   item,
   onPressItem,
   appliedTheme,
   gradientConfig
 }) => /*#__PURE__*/_jsxs(TouchableOpacity, {
-  activeOpacity: 0.85,
+  activeOpacity: TOUCH_OPACITY,
   onPress: () => onPressItem?.(item),
   style: styles.itemWrapper,
   accessibilityRole: "button",
@@ -52,23 +83,65 @@ const CarouselItem = /*#__PURE__*/memo(({
     style: styles.gradientBottomOverlay
   })]
 }));
+CarouselItem.displayName = 'CarouselItem';
+
+// ============================================================================
+// Main Component
+// ============================================================================
 const SliderTwo = ({
   data,
   onPressItem,
   isLoading = true,
-  skeletonCount = 3,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
   accessibilityLabel = 'Full Width Slider',
   accessibilityHint = 'Swipe to view content',
   theme
 }) => {
+  // ========================================================================
+  // Hooks & State
+  // ========================================================================
   const {
     theme: appliedTheme
   } = useInternalTheme(theme);
-  const contentData = useMemo(() => data?.data ?? [], [data]);
   const [activeIndex, setActiveIndex] = useState(0);
-  const gradientColors = useMemo(() => [appliedTheme.colors.primary, appliedTheme.colors.primary], [appliedTheme.colors.primary]);
-  // Debounce snap handler to prevent stuttering
   const snapTimeoutRef = useRef(null);
+
+  // ========================================================================
+  // Data Processing
+  // ========================================================================
+  const contentData = useMemo(() => data?.data ?? [], [data]);
+  const skeletonItems = useSkeletonItems(skeletonCount);
+  const indicatorArray = useMemo(() => Array.from({
+    length: isLoading ? skeletonItems.length : contentData.length
+  }, (_, i) => i), [isLoading, skeletonItems.length, contentData.length]);
+  const carouselData = useMemo(() => isLoading ? skeletonItems : contentData, [isLoading, skeletonItems, contentData]);
+
+  // ========================================================================
+  // Memoized Values
+  // ========================================================================
+  const gradientColors = useMemo(() => [appliedTheme.colors.primary, appliedTheme.colors.primary], [appliedTheme.colors.primary]);
+  const gradientConfig = useMemo(() => ({
+    colors: GRADIENT_OVERLAY_COLORS,
+    start: GRADIENT_START,
+    end: GRADIENT_END
+  }), []);
+  const carouselProps = useMemo(() => ({
+    width: FULL_WIDTH,
+    height: FULL_HEIGHT,
+    autoPlay: !isLoading && contentData.length > 1,
+    loop: !isLoading && contentData.length > 1,
+    scrollAnimationDuration: SCROLL_ANIMATION_DURATION,
+    autoPlayInterval: AUTO_PLAY_INTERVAL,
+    windowSize: CAROUSEL_WINDOW_SIZE,
+    enabled: true
+  }), [isLoading, contentData.length]);
+  const inactiveIndicatorStyle = useMemo(() => [styles.inactiveIndicator, {
+    backgroundColor: appliedTheme.colors.onSurface
+  }], [appliedTheme.colors.onSurface]);
+
+  // ========================================================================
+  // Event Handlers
+  // ========================================================================
   const handleSnapToItem = useCallback(i => {
     if (snapTimeoutRef.current) {
       clearTimeout(snapTimeoutRef.current);
@@ -77,48 +150,27 @@ const SliderTwo = ({
       InteractionManager.runAfterInteractions(() => {
         setActiveIndex(i);
       });
-    }, 50);
+    }, SNAP_DEBOUNCE_DELAY);
   }, []);
+  const configurePanGesture = useCallback(gesture => gesture.activeOffsetX(PAN_GESTURE_ACTIVE_OFFSET_X).failOffsetY(PAN_GESTURE_FAIL_OFFSET_Y), []);
 
-  // Memoize skeleton items
-  const skeletonItems = useSkeletonItems(skeletonCount);
-
-  // Memoize indicator array
-  const indicatorArray = useMemo(() => Array.from({
-    length: contentData.length
-  }, (_, i) => i), [contentData.length]);
-
-  // Memoize carousel data
-  const carouselData = useMemo(() => isLoading ? skeletonItems : contentData, [isLoading, skeletonItems, contentData]);
-
-  // Memoize gradient configuration
-  const gradientConfig = useMemo(() => ({
-    colors: ['transparent', 'rgba(0,0,0,0.7)'],
-    start: {
-      x: 0.5,
-      y: 0
-    },
-    end: {
-      x: 0.5,
-      y: 1
-    }
-  }), []);
-
-  // Memoize pan gesture handler for smooth scrolling
-  const configurePanGesture = useCallback(gesture => {
-    gesture.activeOffsetX([-10, 10]).failOffsetY([-5, 5]);
-  }, []);
-  const renderSkeletonItem = useCallback(() => /*#__PURE__*/_jsx(View, {
+  // ========================================================================
+  // Render Functions
+  // ========================================================================
+  const renderSkeletonItem = useCallback(({
+    item: _item
+  }) => /*#__PURE__*/_jsx(View, {
     style: styles.itemWrapper,
     children: /*#__PURE__*/_jsx(SkeletonPlaceholder, {
       backgroundColor: appliedTheme.colors.skeletonBaseColor,
       highlightColor: appliedTheme.colors.skeletonHighlightColor,
+      speed: SKELETON_SPEED,
       children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
         width: FULL_WIDTH,
         height: FULL_HEIGHT
       })
     })
-  }), [appliedTheme.colors]);
+  }), [appliedTheme.colors.skeletonBaseColor, appliedTheme.colors.skeletonHighlightColor]);
   const renderCarouselItem = useCallback(({
     item
   }) => /*#__PURE__*/_jsx(CarouselItem, {
@@ -127,55 +179,42 @@ const SliderTwo = ({
     appliedTheme: appliedTheme,
     gradientConfig: gradientConfig
   }), [appliedTheme, onPressItem, gradientConfig]);
-
-  // Memoize renderItem to prevent switching functions
   const renderItem = useMemo(() => isLoading ? renderSkeletonItem : renderCarouselItem, [isLoading, renderSkeletonItem, renderCarouselItem]);
-
-  // Memoize carousel props for smooth scrolling
-  const carouselProps = useMemo(() => ({
-    width: FULL_WIDTH,
-    height: FULL_HEIGHT,
-    autoPlay: !isLoading && contentData.length > 1,
-    loop: !isLoading && contentData.length > 1,
-    scrollAnimationDuration: 300,
-    // Reduced for smoother scrolling
-    autoPlayInterval: 3000,
-    windowSize: 2,
-    // Reduced window size for better performance
-    enabled: true
-  }), [isLoading, contentData.length]);
-
-  // Memoize inactive indicator style
-  const inactiveIndicatorStyle = useMemo(() => [styles.inactiveIndicator, {
-    backgroundColor: appliedTheme.colors.onSurface
-  }], [appliedTheme.colors.onSurface]);
-  const renderIndicator = useCallback((_, i) => /*#__PURE__*/_jsx(View, {
-    style: styles.indicatorWrapper,
-    children: isLoading ? /*#__PURE__*/_jsx(SkeletonPlaceholder, {
-      backgroundColor: appliedTheme.colors.skeletonBaseColor,
-      highlightColor: appliedTheme.colors.skeletonHighlightColor,
-      speed: 2000,
-      children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
-        width: scale(18),
-        height: scale(8),
-        borderRadius: scale(50)
+  const renderIndicator = useCallback((_, i) => {
+    const isActive = i === activeIndex;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.indicatorWrapper,
+      children: isLoading ? /*#__PURE__*/_jsx(SkeletonPlaceholder, {
+        backgroundColor: appliedTheme.colors.skeletonBaseColor,
+        highlightColor: appliedTheme.colors.skeletonHighlightColor,
+        speed: SKELETON_SPEED,
+        children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
+          width: INDICATOR_WIDTH_ACTIVE,
+          height: INDICATOR_HEIGHT,
+          borderRadius: INDICATOR_BORDER_RADIUS
+        })
+      }) : isActive ? /*#__PURE__*/_jsx(LinearGradient, {
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 1,
+          y: 0
+        },
+        colors: gradientColors,
+        style: styles.activeIndicator
+      }) : /*#__PURE__*/_jsx(View, {
+        style: inactiveIndicatorStyle
       })
-    }) : i === activeIndex ? /*#__PURE__*/_jsx(LinearGradient, {
-      start: {
-        x: 0,
-        y: 0
-      },
-      end: {
-        x: 1,
-        y: 0
-      },
-      colors: gradientColors,
-      style: styles.activeIndicator
-    }) : /*#__PURE__*/_jsx(View, {
-      style: inactiveIndicatorStyle
-    })
-  }, i), [isLoading, appliedTheme.colors.skeletonBaseColor, appliedTheme.colors.skeletonHighlightColor, inactiveIndicatorStyle, activeIndex, gradientColors]);
-  if (!data || !isLoading && contentData.length === 0) {
+    }, i);
+  }, [isLoading, appliedTheme.colors.skeletonBaseColor, appliedTheme.colors.skeletonHighlightColor, inactiveIndicatorStyle, activeIndex, gradientColors]);
+
+  // ========================================================================
+  // Early Returns
+  // ========================================================================
+  // Don't return early if loading - we need to show skeleton
+  if (!isLoading && (!data || contentData.length === 0)) {
     return /*#__PURE__*/_jsx(View, {
       style: [styles.container, styles.emptyState],
       children: /*#__PURE__*/_jsx(Text, {
@@ -184,6 +223,10 @@ const SliderTwo = ({
       })
     });
   }
+
+  // ========================================================================
+  // Render Main Content
+  // ========================================================================
   return /*#__PURE__*/_jsxs(View, {
     style: styles.container,
     accessibilityLabel: accessibilityLabel,
@@ -194,7 +237,7 @@ const SliderTwo = ({
       renderItem: renderItem,
       onSnapToItem: handleSnapToItem,
       onConfigurePanGesture: configurePanGesture
-    }), /*#__PURE__*/_jsx(View, {
+    }), indicatorArray.length > 0 && /*#__PURE__*/_jsx(View, {
       style: styles.indicatorContainer,
       children: /*#__PURE__*/_jsx(View, {
         style: styles.indicator,
@@ -203,6 +246,10 @@ const SliderTwo = ({
     })]
   });
 };
+
+// ============================================================================
+// Styles
+// ============================================================================
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -239,14 +286,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   activeIndicator: {
-    width: scale(18),
-    height: scale(8),
-    borderRadius: scale(50)
+    width: INDICATOR_WIDTH_ACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS
   },
   inactiveIndicator: {
-    width: scale(8),
-    height: scale(8),
-    borderRadius: scale(50)
+    width: INDICATOR_WIDTH_INACTIVE,
+    height: INDICATOR_HEIGHT,
+    borderRadius: INDICATOR_BORDER_RADIUS
   },
   emptyState: {
     padding: scale(12),

package/lib/module/components/Content/Card/Sliders/Styles/Two.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useMemo","useState","useRef","InteractionManager","useSkeletonItems","View","TouchableOpacity","StyleSheet","Carousel","scale","verticalScale","FastImage","LinearGradient","SkeletonPlaceholder","Text","useInternalTheme","Display","ThumbnailCard","RFValue","RentOrBuyIcon","jsx","_jsx","jsxs","_jsxs","FULL_WIDTH","fullWidth","FULL_HEIGHT","CarouselItem","item","onPressItem","appliedTheme","gradientConfig","activeOpacity","onPress","style","styles","itemWrapper","accessibilityRole","accessibilityLabel","name","children","theme","content_offering_type","thumbnailUri","thumbnail","isLoading","wrapperStyle","image","resizeMode","cover","colors","start","end","gradientBottomOverlay","SliderTwo","data","skeletonCount","accessibilityHint","contentData","activeIndex","setActiveIndex","gradientColors","primary","snapTimeoutRef","handleSnapToItem","i","current","clearTimeout","setTimeout","runAfterInteractions","skeletonItems","indicatorArray","Array","from","length","_","carouselData","x","y","configurePanGesture","gesture","activeOffsetX","failOffsetY","renderSkeletonItem","backgroundColor","skeletonBaseColor","highlightColor","skeletonHighlightColor","Item","width","height","renderCarouselItem","renderItem","carouselProps","autoPlay","loop","scrollAnimationDuration","autoPlayInterval","windowSize","enabled","inactiveIndicatorStyle","inactiveIndicator","onSurface","renderIndicator","indicatorWrapper","speed","borderRadius","activeIndicator","container","emptyState","emptyText","onSnapToItem","onConfigurePanGesture","indicatorContainer","indicator","map","create","flex","marginVertical","overflow","position","bottom","left","right","zIndex","alignItems","justifyContent","marginTop","flexDirection","gap","padding","fontSize","fontWeight","color","textAlign"],"sourceRoot":"../../../../../../../src","sources":["components/Content/Card/Sliders/Styles/Two.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useMemo","useState","useRef","InteractionManager","useSkeletonItems","View","TouchableOpacity","StyleSheet","Carousel","scale","verticalScale","FastImage","LinearGradient","SkeletonPlaceholder","Text","useInternalTheme","Display","ThumbnailCard","RFValue","RentOrBuyIcon","jsx","_jsx","jsxs","_jsxs","FULL_WIDTH","fullWidth","ASPECT_RATIO","FULL_HEIGHT","DEFAULT_SKELETON_COUNT","SCROLL_ANIMATION_DURATION","AUTO_PLAY_INTERVAL","CAROUSEL_WINDOW_SIZE","SNAP_DEBOUNCE_DELAY","SKELETON_SPEED","PAN_GESTURE_ACTIVE_OFFSET_X","PAN_GESTURE_FAIL_OFFSET_Y","GRADIENT_OVERLAY_COLORS","GRADIENT_START","x","y","GRADIENT_END","INDICATOR_WIDTH_ACTIVE","INDICATOR_WIDTH_INACTIVE","INDICATOR_HEIGHT","INDICATOR_BORDER_RADIUS","TOUCH_OPACITY","CarouselItem","item","onPressItem","appliedTheme","gradientConfig","activeOpacity","onPress","style","styles","itemWrapper","accessibilityRole","accessibilityLabel","name","children","theme","content_offering_type","thumbnailUri","thumbnail","isLoading","wrapperStyle","image","resizeMode","cover","colors","start","end","gradientBottomOverlay","displayName","SliderTwo","data","skeletonCount","accessibilityHint","activeIndex","setActiveIndex","snapTimeoutRef","contentData","skeletonItems","indicatorArray","Array","from","length","_","i","carouselData","gradientColors","primary","carouselProps","width","height","autoPlay","loop","scrollAnimationDuration","autoPlayInterval","windowSize","enabled","inactiveIndicatorStyle","inactiveIndicator","backgroundColor","onSurface","handleSnapToItem","current","clearTimeout","setTimeout","runAfterInteractions","configurePanGesture","gesture","activeOffsetX","failOffsetY","renderSkeletonItem","_item","skeletonBaseColor","highlightColor","skeletonHighlightColor","speed","Item","renderCarouselItem","renderItem","renderIndicator","isActive","indicatorWrapper","borderRadius","activeIndicator","container","emptyState","emptyText","onSnapToItem","onConfigurePanGesture","indicatorContainer","indicator","map","create","flex","marginVertical","overflow","position","bottom","left","right","zIndex","alignItems","justifyContent","marginTop","flexDirection","gap","padding","fontSize","fontWeight","color","textAlign"],"sourceRoot":"../../../../../../../src","sources":["components/Content/Card/Sliders/Styles/Two.tsx"],"mappings":";;AAAA;AACA;AACA;AACA;AACA,OAAOA,KAAK,IAAIC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,QAAQ,OAAO;AAC3E,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SACEC,IAAI,EACJC,gBAAgB,EAChBC,UAAU,QAEL,cAAc;AACrB,OAAOC,QAAQ,MAAM,kCAAkC;AACvD,SAASC,KAAK,EAAEC,aAAa,QAAQ,2BAA2B;AAChE,OAAOC,SAAS,MAAM,yBAAyB;AAC/C,OAAOC,cAAc,MAAM,8BAA8B;AACzD,OAAOC,mBAAmB,MAAM,mCAAmC;AACnE,SAASC,IAAI,QAAQ,2BAAkB;AACvC,SAASC,gBAAgB,QAAQ,+CAA4C;AAC7E,OAAOC,OAAO,MAAM,iCAA8B;AAClD,SAASC,aAAa,QAAQ,mCAAgC;AAE9D,SAASC,OAAO,QAAQ,kCAAkC;AAC1D,OAAOC,aAAa,MAAM,mCAAgC;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAI3D;AACA;AACA;AACA,MAAMC,UAAU,GAAGR,OAAO,CAACS,SAAS;AACpC,MAAMC,YAAY,GAAG,CAAC,GAAG,EAAE;AAC3B,MAAMC,WAAW,GAAGH,UAAU,GAAGE,YAAY;AAC7C,MAAME,sBAAsB,GAAG,CAAC;AAChC,MAAMC,yBAAyB,GAAG,GAAG;AACrC,MAAMC,kBAAkB,GAAG,IAAI;AAC/B,MAAMC,oBAAoB,GAAG,CAAC;AAC9B,MAAMC,mBAAmB,GAAG,EAAE;AAC9B,MAAMC,cAAc,GAAG,IAAI;AAC3B,MAAMC,2BAA2B,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC;AAC7C,MAAMC,yBAAyB,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACzC,MAAMC,uBAAuB,GAAG,CAAC,aAAa,EAAE,iBAAiB,CAGhE;AACD,MAAMC,cAAc,GAAG;EAAEC,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AACvC,MAAMC,YAAY,GAAG;EAAEF,CAAC,EAAE,GAAG;EAAEC,CAAC,EAAE;AAAE,CAAC;AACrC,MAAME,sBAAsB,GAAGhC,KAAK,CAAC,EAAE,CAAC;AACxC,MAAMiC,wBAAwB,GAAGjC,KAAK,CAAC,CAAC,CAAC;AACzC,MAAMkC,gBAAgB,GAAGlC,KAAK,CAAC,CAAC,CAAC;AACjC,MAAMmC,uBAAuB,GAAGnC,KAAK,CAAC,EAAE,CAAC;AACzC,MAAMoC,aAAa,GAAG,IAAI;;AAE1B;AACA;AACA;;AAoBA;AACA;AACA;AACA,MAAMC,YAAY,gBAAGhD,IAAI,CACvB,CAAC;EAAEiD,IAAI;EAAEC,WAAW;EAAEC,YAAY;EAAEC;AAAe,CAAC,kBAClD3B,KAAA,CAACjB,gBAAgB;EACf6C,aAAa,EAAEN,aAAc;EAC7BO,OAAO,EAAEA,CAAA,KAAMJ,WAAW,GAAGD,IAAI,CAAE;EACnCM,KAAK,EAAEC,MAAM,CAACC,WAAY;EAC1BC,iBAAiB,EAAC,QAAQ;EAC1BC,kBAAkB,EAAE,QAAQV,IAAI,CAACW,IAAI,EAAG;EAAAC,QAAA,gBAExCtC,IAAA,CAACF,aAAa;IACZyC,KAAK,EAAEX,YAAa;IACpBY,qBAAqB,EAAEd,IAAI,CAACc;EAAsB,CACnD,CAAC,eACFxC,IAAA,CAACJ,aAAa;IACZ6C,YAAY,EAAEf,IAAI,CAACgB,SAAU;IAC7BH,KAAK,EAAEX,YAAa;IACpBe,SAAS,EAAE,KAAM;IACjBC,YAAY,EAAEX,MAAM,CAACY,KAAM;IAC3BC,UAAU,EAAExD,SAAS,CAACwD,UAAU,CAACC;EAAM,CACxC,CAAC,eACF/C,IAAA,CAACT,cAAc;IACbyD,MAAM,EAAEnB,cAAc,CAACmB,MAAO;IAC9BC,KAAK,EAAEpB,cAAc,CAACoB,KAAM;IAC5BC,GAAG,EAAErB,cAAc,CAACqB,GAAI;IACxBlB,KAAK,EAAEC,MAAM,CAACkB;EAAsB,CACrC,CAAC;AAAA,CACc,CAEtB,CAAC;AAED1B,YAAY,CAAC2B,WAAW,GAAG,cAAc;;AAEzC;AACA;AACA;AACA,MAAMC,SAAmC,GAAGA,CAAC;EAC3CC,IAAI;EACJ3B,WAAW;EACXgB,SAAS,GAAG,IAAI;EAChBY,aAAa,GAAGhD,sBAAsB;EACtC6B,kBAAkB,GAAG,mBAAmB;EACxCoB,iBAAiB,GAAG,uBAAuB;EAC3CjB;AACF,CAAC,KAAK;EACJ;EACA;EACA;EACA,MAAM;IAAEA,KAAK,EAAEX;EAAa,CAAC,GAAGlC,gBAAgB,CAAC6C,KAAK,CAAC;EACvD,MAAM,CAACkB,WAAW,EAAEC,cAAc,CAAC,GAAG9E,QAAQ,CAAC,CAAC,CAAC;EACjD,MAAM+E,cAAc,GAAG9E,MAAM,CAAwB,IAAI,CAAC;;EAE1D;EACA;EACA;EACA,MAAM+E,WAAW,GAAGjF,OAAO,CAAC,MAAM2E,IAAI,EAAEA,IAAI,IAAI,EAAE,EAAE,CAACA,IAAI,CAAC,CAAC;EAC3D,MAAMO,aAAa,GAAG9E,gBAAgB,CAACwE,aAAa,CAAC;EAErD,MAAMO,cAAc,GAAGnF,OAAO,CAC5B,MACEoF,KAAK,CAACC,IAAI,CACR;IAAEC,MAAM,EAAEtB,SAAS,GAAGkB,aAAa,CAACI,MAAM,GAAGL,WAAW,CAACK;EAAO,CAAC,EACjE,CAACC,CAAC,EAAEC,CAAC,KAAKA,CACZ,CAAC,EACH,CAACxB,SAAS,EAAEkB,aAAa,CAACI,MAAM,EAAEL,WAAW,CAACK,MAAM,CACtD,CAAC;EAED,MAAMG,YAAY,GAAGzF,OAAO,CAC1B,MAAOgE,SAAS,GAAGkB,aAAa,GAAGD,WAAY,EAC/C,CAACjB,SAAS,EAAEkB,aAAa,EAAED,WAAW,CACxC,CAAC;;EAED;EACA;EACA;EACA,MAAMS,cAAc,GAAG1F,OAAO,CAC5B,MAAM,CAACiD,YAAY,CAACoB,MAAM,CAACsB,OAAO,EAAE1C,YAAY,CAACoB,MAAM,CAACsB,OAAO,CAAC,EAChE,CAAC1C,YAAY,CAACoB,MAAM,CAACsB,OAAO,CAC9B,CAAC;EAED,MAAMzC,cAAc,GAAGlD,OAAO,CAC5B,OAAO;IACLqE,MAAM,EAAEjC,uBAAuB;IAC/BkC,KAAK,EAAEjC,cAAc;IACrBkC,GAAG,EAAE/B;EACP,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAMoD,aAAa,GAAG5F,OAAO,CAC3B,OAAO;IACL6F,KAAK,EAAErE,UAAU;IACjBsE,MAAM,EAAEnE,WAAW;IACnBoE,QAAQ,EAAE,CAAC/B,SAAS,IAAIiB,WAAW,CAACK,MAAM,GAAG,CAAC;IAC9CU,IAAI,EAAE,CAAChC,SAAS,IAAIiB,WAAW,CAACK,MAAM,GAAG,CAAC;IAC1CW,uBAAuB,EAAEpE,yBAAyB;IAClDqE,gBAAgB,EAAEpE,kBAAkB;IACpCqE,UAAU,EAAEpE,oBAAoB;IAChCqE,OAAO,EAAE;EACX,CAAC,CAAC,EACF,CAACpC,SAAS,EAAEiB,WAAW,CAACK,MAAM,CAChC,CAAC;EAED,MAAMe,sBAAsB,GAAGrG,OAAO,CACpC,MAAM,CACJsD,MAAM,CAACgD,iBAAiB,EACxB;IAAEC,eAAe,EAAEtD,YAAY,CAACoB,MAAM,CAACmC;EAAU,CAAC,CACnD,EACD,CAACvD,YAAY,CAACoB,MAAM,CAACmC,SAAS,CAChC,CAAC;;EAED;EACA;EACA;EACA,MAAMC,gBAAgB,GAAG1G,WAAW,CAAEyF,CAAS,IAAK;IAClD,IAAIR,cAAc,CAAC0B,OAAO,EAAE;MAC1BC,YAAY,CAAC3B,cAAc,CAAC0B,OAAO,CAAC;IACtC;IACA1B,cAAc,CAAC0B,OAAO,GAAGE,UAAU,CAAC,MAAM;MACxCzG,kBAAkB,CAAC0G,oBAAoB,CAAC,MAAM;QAC5C9B,cAAc,CAACS,CAAC,CAAC;MACnB,CAAC,CAAC;IACJ,CAAC,EAAExD,mBAAmB,CAAC;EACzB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAM8E,mBAAmB,GAAG/G,WAAW,CACpCgH,OAAY,IACXA,OAAO,CACJC,aAAa,CAAC9E,2BAA2B,CAAC,CAC1C+E,WAAW,CAAC9E,yBAAyB,CAAC,EAC3C,EACF,CAAC;;EAED;EACA;EACA;EACA,MAAM+E,kBAAkB,GAAGnH,WAAW,CACpC,CAAC;IAAEgD,IAAI,EAAEoE;EAAqB,CAAC,kBAC7B9F,IAAA,CAAChB,IAAI;IAACgD,KAAK,EAAEC,MAAM,CAACC,WAAY;IAAAI,QAAA,eAC9BtC,IAAA,CAACR,mBAAmB;MAClB0F,eAAe,EAAEtD,YAAY,CAACoB,MAAM,CAAC+C,iBAAkB;MACvDC,cAAc,EAAEpE,YAAY,CAACoB,MAAM,CAACiD,sBAAuB;MAC3DC,KAAK,EAAEtF,cAAe;MAAA0B,QAAA,eAEtBtC,IAAA,CAACR,mBAAmB,CAAC2G,IAAI;QAAC3B,KAAK,EAAErE,UAAW;QAACsE,MAAM,EAAEnE;MAAY,CAAE;IAAC,CACjD;EAAC,CAClB,CACP,EACD,CACEsB,YAAY,CAACoB,MAAM,CAAC+C,iBAAiB,EACrCnE,YAAY,CAACoB,MAAM,CAACiD,sBAAsB,CAE9C,CAAC;EAED,MAAMG,kBAAkB,GAAG1H,WAAW,CACpC,CAAC;IAAEgD;EAA6B,CAAC,kBAC/B1B,IAAA,CAACyB,YAAY;IACXC,IAAI,EAAEA,IAAK;IACXC,WAAW,EAAEA,WAAY;IACzBC,YAAY,EAAEA,YAAa;IAC3BC,cAAc,EAAEA;EAAe,CAChC,CACF,EACD,CAACD,YAAY,EAAED,WAAW,EAAEE,cAAc,CAC5C,CAAC;EAED,MAAMwE,UAAU,GAAG1H,OAAO,CACxB,MAAOgE,SAAS,GAAGkD,kBAAkB,GAAGO,kBAAmB,EAC3D,CAACzD,SAAS,EAAEkD,kBAAkB,EAAEO,kBAAkB,CACpD,CAAC;EAED,MAAME,eAAe,GAAG5H,WAAW,CACjC,CAACwF,CAAS,EAAEC,CAAS,KAAK;IACxB,MAAMoC,QAAQ,GAAGpC,CAAC,KAAKV,WAAW;IAElC,oBACEzD,IAAA,CAAChB,IAAI;MAASgD,KAAK,EAAEC,MAAM,CAACuE,gBAAiB;MAAAlE,QAAA,EAC1CK,SAAS,gBACR3C,IAAA,CAACR,mBAAmB;QAClB0F,eAAe,EAAEtD,YAAY,CAACoB,MAAM,CAAC+C,iBAAkB;QACvDC,cAAc,EAAEpE,YAAY,CAACoB,MAAM,CAACiD,sBAAuB;QAC3DC,KAAK,EAAEtF,cAAe;QAAA0B,QAAA,eAEtBtC,IAAA,CAACR,mBAAmB,CAAC2G,IAAI;UACvB3B,KAAK,EAAEpD,sBAAuB;UAC9BqD,MAAM,EAAEnD,gBAAiB;UACzBmF,YAAY,EAAElF;QAAwB,CACvC;MAAC,CACiB,CAAC,GACpBgF,QAAQ,gBACVvG,IAAA,CAACT,cAAc;QACb0D,KAAK,EAAE;UAAEhC,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAE,CAAE;QACtBgC,GAAG,EAAE;UAAEjC,CAAC,EAAE,CAAC;UAAEC,CAAC,EAAE;QAAE,CAAE;QACpB8B,MAAM,EAAEqB,cAAe;QACvBrC,KAAK,EAAEC,MAAM,CAACyE;MAAgB,CAC/B,CAAC,gBAEF1G,IAAA,CAAChB,IAAI;QAACgD,KAAK,EAAEgD;MAAuB,CAAE;IACvC,GAtBQb,CAuBL,CAAC;EAEX,CAAC,EACD,CACExB,SAAS,EACTf,YAAY,CAACoB,MAAM,CAAC+C,iBAAiB,EACrCnE,YAAY,CAACoB,MAAM,CAACiD,sBAAsB,EAC1CjB,sBAAsB,EACtBvB,WAAW,EACXY,cAAc,CAElB,CAAC;;EAED;EACA;EACA;EACA;EACA,IAAI,CAAC1B,SAAS,KAAK,CAACW,IAAI,IAAIM,WAAW,CAACK,MAAM,KAAK,CAAC,CAAC,EAAE;IACrD,oBACEjE,IAAA,CAAChB,IAAI;MAACgD,KAAK,EAAE,CAACC,MAAM,CAAC0E,SAAS,EAAE1E,MAAM,CAAC2E,UAAU,CAAE;MAAAtE,QAAA,eACjDtC,IAAA,CAACP,IAAI;QAACuC,KAAK,EAAEC,MAAM,CAAC4E,SAAU;QAAAvE,QAAA,EAAC;MAAoB,CAAM;IAAC,CACtD,CAAC;EAEX;;EAEA;EACA;EACA;EACA,oBACEpC,KAAA,CAAClB,IAAI;IACHgD,KAAK,EAAEC,MAAM,CAAC0E,SAAU;IACxBvE,kBAAkB,EAAEA,kBAAmB;IACvCoB,iBAAiB,EAAEA,iBAAkB;IAAAlB,QAAA,gBAErCtC,IAAA,CAACb,QAAQ;MAAA,GACHoF,aAAa;MACjBjB,IAAI,EAAEc,YAAa;MACnBiC,UAAU,EAAEA,UAAW;MACvBS,YAAY,EAAE1B,gBAAiB;MAC/B2B,qBAAqB,EAAEtB;IAAoB,CAC5C,CAAC,EACD3B,cAAc,CAACG,MAAM,GAAG,CAAC,iBACxBjE,IAAA,CAAChB,IAAI;MAACgD,KAAK,EAAEC,MAAM,CAAC+E,kBAAmB;MAAA1E,QAAA,eACrCtC,IAAA,CAAChB,IAAI;QAACgD,KAAK,EAAEC,MAAM,CAACgF,SAAU;QAAA3E,QAAA,EAC3BwB,cAAc,CAACoD,GAAG,CAAE/C,CAAC,IAAKmC,eAAe,CAAC,CAAC,EAAEnC,CAAC,CAAC;MAAC,CAC7C;IAAC,CACH,CACP;EAAA,CACG,CAAC;AAEX,CAAC;;AAED;AACA;AACA;AACA,MAAMlC,MAAM,GAAG/C,UAAU,CAACiI,MAAM,CAAC;EAC/BR,SAAS,EAAE;IACTS,IAAI,EAAE,CAAC;IACPC,cAAc,EAAEhI,aAAa,CAAC,CAAC;EACjC,CAAC;EACD6C,WAAW,EAAE;IACXoF,QAAQ,EAAE;EACZ,CAAC;EACDzE,KAAK,EAAE;IACL2B,KAAK,EAAErE,UAAU;IACjBsE,MAAM,EAAEnE;EACV,CAAC;EACD6C,qBAAqB,EAAE;IACrBoE,QAAQ,EAAE,UAAU;IACpBC,MAAM,EAAE,CAAC;IACTC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,CAAC;IACRjD,MAAM,EAAEpF,aAAa,CAAC,GAAG,CAAC;IAC1BsI,MAAM,EAAE;EACV,CAAC;EACDX,kBAAkB,EAAE;IAClBY,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE,QAAQ;IACxBrD,KAAK,EAAE,MAAM;IACbsD,SAAS,EAAEzI,aAAa,CAAC,EAAE;EAC7B,CAAC;EACD4H,SAAS,EAAE;IACTc,aAAa,EAAE,KAAK;IACpBH,UAAU,EAAE,QAAQ;IACpBI,GAAG,EAAE5I,KAAK,CAAC,CAAC;EACd,CAAC;EACDoH,gBAAgB,EAAE;IAChBoB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDnB,eAAe,EAAE;IACflC,KAAK,EAAEpD,sBAAsB;IAC7BqD,MAAM,EAAEnD,gBAAgB;IACxBmF,YAAY,EAAElF;EAChB,CAAC;EACD0D,iBAAiB,EAAE;IACjBT,KAAK,EAAEnD,wBAAwB;IAC/BoD,MAAM,EAAEnD,gBAAgB;IACxBmF,YAAY,EAAElF;EAChB,CAAC;EACDqF,UAAU,EAAE;IACVqB,OAAO,EAAE7I,KAAK,CAAC,EAAE,CAAC;IAClBwI,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDhB,SAAS,EAAE;IACTqB,QAAQ,EAAErI,OAAO,CAAC,EAAE,CAAC;IACrBsI,UAAU,EAAE,KAAK;IACjBC,KAAK,EAAE,MAAM;IACbC,SAAS,EAAE;EACb;AACF,CAAC,CAAC;AAEF,4BAAe5J,IAAI,CAAC4E,SAAS,CAAC","ignoreList":[]}

package/lib/module/components/Content/Card/Styles/Five.js

@@ -10,21 +10,43 @@ import { View, FlatList, TouchableOpacity, StyleSheet, ScrollView } from 'react-
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
+import { RFValue } from 'react-native-responsive-fontsize';
 import CardPoster from "../components/CardPoster.js";
 import NavigateToMore from "../components/NavigateToMore.js";
-import { usePaginatedSection } from "../../../../hooks/usePaginatedSection.js";
+import { AdsPoster } from "../components/index.js";
 import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
-import { RFValue } from 'react-native-responsive-fontsize';
+import { useCards } from "../../../../hooks/index.js";
+
+// Constants
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const DEFAULT_ITEM_WIDTH = moderateScale(140);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
+const ASPECT_RATIO = 0.67;
+const END_REACHED_THRESHOLD = 0.5;
+const ITEM_ACTIVE_OPACITY = 0.8;
+const INITIAL_NUM_TO_RENDER = 5;
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = moderateScale(20);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_TITLE_MARGIN_HORIZONTAL = moderateScale(15);
+const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
+const SKELETON_ITEM_MARGIN_LEFT = moderateScale(12);
+const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const ITEM_MARGIN_BOTTOM = verticalScale(2);
+const LIST_CONTENT_PADDING_RIGHT = moderateScale(15);
+const SKELETON_LIST_PADDING_RIGHT = moderateScale(15);
+
+// Types
+
+// Main Component
 const MovieCardFive = ({
   theme,
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressItem,
   onPressMore,
@@ -32,25 +54,47 @@ const MovieCardFive = ({
   itemWidth = DEFAULT_ITEM_WIDTH,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
   containerStyle,
   titleStyle,
   itemStyle,
   isLoading = false,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets
 }) => {
+  // Refs
+  const flatListRef = useRef(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+
+  // Theme
   const {
     theme: appliedTheme
   } = useInternalTheme(theme);
-  const flatListRef = useRef(null);
-  const onEndReachedCalledDuringMomentum = useRef(false);
+
+  // Styles
   const styles = useMemo(() => getStyles(appliedTheme, itemWidth, borderRadius), [appliedTheme, itemWidth, borderRadius]);
+
+  // Data Management
   const {
-    data,
+    listData,
     pagination,
-    loading: isPaginating,
-    loadMoreData
-  } = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: true
+  });
+
+  // Event Handlers
   const handleItemPress = useCallback(item => onPressItem?.(item), [onPressItem]);
   const handlePressMore = useCallback(() => {
     onPressMore?.({
@@ -62,48 +106,89 @@ const MovieCardFive = ({
   const handleEndReached = useCallback(() => {
     if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [loadMoreData, pagination]);
+  }, [loadMore, pagination]);
+  const handleScrollBeginDrag = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
+  const handleMomentumScrollBegin = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
+
+  // Render Functions
   const renderItem = useCallback(({
     item,
     index
   }) => {
+    // Handle ads
+    if ('type' in item && item.type === 'ads') {
+      const adItem = item;
+      return /*#__PURE__*/_jsx(View, {
+        style: [styles.item, itemStyle],
+        children: /*#__PURE__*/_jsx(AdsPoster, {
+          ad: adItem,
+          theme: appliedTheme,
+          isLoading: isLoading,
+          containerStyle: {
+            width: itemWidth,
+            aspectRatio: ASPECT_RATIO
+          },
+          imageStyle: styles.image,
+          borderRadius: borderRadius,
+          onDisplayAds: onDisplayAds,
+          screenDimensions: screenDimensions,
+          viewportOffsets: viewportOffsets
+        })
+      }, `ad-${adItem.tracking?.impression || index}`);
+    }
+    // Handle content items
+    const contentItem = item;
+    const isSkeleton = contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
     return /*#__PURE__*/_jsx(TouchableOpacity, {
       style: [styles.item, itemStyle],
-      onPress: () => handleItemPress(item),
-      activeOpacity: 0.8,
+      onPress: () => {
+        if (!isSkeleton && !isLoading) {
+          handleItemPress(contentItem);
+        }
+      },
+      activeOpacity: ITEM_ACTIVE_OPACITY,
       children: renderItemImage ? renderItemImage({
         item,
         index
       }) : /*#__PURE__*/_jsx(CardPoster, {
-        content_offering_type: item.content_offering_type,
-        posterUri: item.poster,
+        content_offering_type: contentItem.content_offering_type,
+        posterUri: contentItem.poster,
         theme: appliedTheme,
         borderRadius: borderRadius,
         posterWrapperStyle: styles.image,
         resizeMode: FastImage.resizeMode.cover,
-        isLoading: isLoading
+        isLoading: isSkeleton || isLoading
       })
-    });
-  }, [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]);
-  if (!initialData) {
-    return null;
-  }
-  const renderSkeletonItem = ({
+    }, contentItem._id);
+  }, [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress, itemWidth, onDisplayAds, screenDimensions, viewportOffsets]);
+  const renderSkeletonItem = useCallback(({
     index
   }) => /*#__PURE__*/_jsx(SkeletonPlaceholder, {
     highlightColor: appliedTheme.colors.skeletonHighlightColor,
     backgroundColor: appliedTheme.colors.skeletonBaseColor,
     children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
       width: itemWidth,
-      aspectRatio: 0.67,
+      aspectRatio: ASPECT_RATIO,
       borderRadius: borderRadius,
-      marginLeft: index === 0 ? moderateScale(12) : 0,
-      marginRight: moderateScale(12)
+      marginLeft: index === 0 ? SKELETON_ITEM_MARGIN_LEFT : 0,
+      marginRight: SKELETON_ITEM_MARGIN_RIGHT
     })
-  }, `skeleton-${index}`);
-  if (!isLoading && data.length === 0) return null;
+  }, `skeleton-${index}`), [appliedTheme, itemWidth, borderRadius]);
+  const keyExtractor = useCallback((item, index) => {
+    return '_id' in item ? item._id : `ad-${index}`;
+  }, []);
+
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Main Render
   return /*#__PURE__*/_jsx(View, {
     style: [styles.root, containerStyle],
     accessibilityLabel: accessibilityLabel || `Movie section: ${title}`,
@@ -113,11 +198,11 @@ const MovieCardFive = ({
         highlightColor: appliedTheme.colors.skeletonHighlightColor,
         backgroundColor: appliedTheme.colors.skeletonBaseColor,
         children: /*#__PURE__*/_jsx(SkeletonPlaceholder.Item, {
-          width: moderateScale(100),
-          height: moderateScale(20),
-          borderRadius: moderateScale(4),
-          marginHorizontal: moderateScale(15),
-          marginBottom: verticalScale(6)
+          width: SKELETON_TITLE_WIDTH,
+          height: SKELETON_TITLE_HEIGHT,
+          borderRadius: SKELETON_TITLE_BORDER_RADIUS,
+          marginHorizontal: SKELETON_TITLE_MARGIN_HORIZONTAL,
+          marginBottom: SKELETON_TITLE_MARGIN_BOTTOM
         })
       }), /*#__PURE__*/_jsx(ScrollView, {
         horizontal: true,
@@ -143,21 +228,17 @@ const MovieCardFive = ({
         }
       }), /*#__PURE__*/_jsx(FlatList, {
         ref: flatListRef,
-        data: data,
+        data: listData,
         horizontal: true,
-        keyExtractor: (item, index) => `${item._id}-${index}`,
+        keyExtractor: keyExtractor,
         renderItem: renderItem,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: styles.listContent,
-        initialNumToRender: 5,
+        initialNumToRender: INITIAL_NUM_TO_RENDER,
         onEndReached: handleEndReached,
-        onEndReachedThreshold: 0.5,
-        onScrollBeginDrag: () => {
-          onEndReachedCalledDuringMomentum.current = false;
-        },
-        onMomentumScrollBegin: () => {
-          onEndReachedCalledDuringMomentum.current = false;
-        },
+        onEndReachedThreshold: END_REACHED_THRESHOLD,
+        onScrollBeginDrag: handleScrollBeginDrag,
+        onMomentumScrollBegin: handleMomentumScrollBegin,
         ListFooterComponent: isPaginating ? renderSkeletonItem({
           index: 0
         }) : null
@@ -165,17 +246,19 @@ const MovieCardFive = ({
     })
   });
 };
+
+// Styles
 const getStyles = (theme, width, radius) => StyleSheet.create({
   root: {
     marginVertical: verticalScale(6)
   },
   item: {
-    marginLeft: moderateScale(10),
-    marginBottom: verticalScale(2)
+    marginLeft: ITEM_MARGIN_LEFT,
+    marginBottom: ITEM_MARGIN_BOTTOM
   },
   image: {
     width,
-    aspectRatio: 0.67,
+    aspectRatio: ASPECT_RATIO,
     borderRadius: radius,
     backgroundColor: theme.colors.surfaceVariant
   },
@@ -188,12 +271,12 @@ const getStyles = (theme, width, radius) => StyleSheet.create({
     fontWeight: '600'
   },
   listContent: {
-    paddingRight: moderateScale(15)
+    paddingRight: LIST_CONTENT_PADDING_RIGHT
   },
   skeletonList: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    paddingRight: moderateScale(15)
+    paddingRight: SKELETON_LIST_PADDING_RIGHT
   }
 });
 export default /*#__PURE__*/memo(MovieCardFive);