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

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);

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

@@ -1 +1 @@
-{"version":3,"names":["React","memo","useCallback","useMemo","useRef","View","FlatList","TouchableOpacity","StyleSheet","ScrollView","SkeletonPlaceholder","moderateScale","verticalScale","FastImage","CardPoster","NavigateToMore","usePaginatedSection","useInternalTheme","RFValue","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DEFAULT_ITEM_WIDTH","DEFAULT_BORDER_RADIUS","DEFAULT_SKELETON_COUNT","MovieCardFive","theme","title","section_id","type","data","initialData","moreFetchData","onPressItem","onPressMore","renderItemImage","itemWidth","borderRadius","skeletonCount","containerStyle","titleStyle","itemStyle","isLoading","accessibilityLabel","accessibilityHint","appliedTheme","flatListRef","onEndReachedCalledDuringMomentum","styles","getStyles","pagination","loading","isPaginating","loadMoreData","handleItemPress","item","handlePressMore","name","handleEndReached","current","hasNextPage","nextPage","renderItem","index","style","onPress","activeOpacity","children","content_offering_type","posterUri","poster","posterWrapperStyle","image","resizeMode","cover","renderSkeletonItem","highlightColor","colors","skeletonHighlightColor","backgroundColor","skeletonBaseColor","Item","width","aspectRatio","marginLeft","marginRight","length","root","height","marginHorizontal","marginBottom","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","skeletonList","Array","from","map","_","color","textPrimary","navigateToMoreContainer","showAllProps","iconColor","ref","keyExtractor","_id","listContent","initialNumToRender","onEndReached","onEndReachedThreshold","onScrollBeginDrag","onMomentumScrollBegin","ListFooterComponent","radius","create","marginVertical","surfaceVariant","paddingHorizontal","fontSize","fontWeight","paddingRight","flexDirection","alignItems"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/Styles/Five.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","memo","useCallback","useMemo","useRef","View","FlatList","TouchableOpacity","StyleSheet","ScrollView","SkeletonPlaceholder","moderateScale","verticalScale","FastImage","RFValue","CardPoster","NavigateToMore","AdsPoster","useInternalTheme","useCards","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","DEFAULT_ITEM_WIDTH","DEFAULT_BORDER_RADIUS","DEFAULT_SKELETON_COUNT","ASPECT_RATIO","END_REACHED_THRESHOLD","ITEM_ACTIVE_OPACITY","INITIAL_NUM_TO_RENDER","SKELETON_TITLE_WIDTH","SKELETON_TITLE_HEIGHT","SKELETON_TITLE_BORDER_RADIUS","SKELETON_TITLE_MARGIN_HORIZONTAL","SKELETON_TITLE_MARGIN_BOTTOM","SKELETON_ITEM_MARGIN_LEFT","SKELETON_ITEM_MARGIN_RIGHT","ITEM_MARGIN_LEFT","ITEM_MARGIN_BOTTOM","LIST_CONTENT_PADDING_RIGHT","SKELETON_LIST_PADDING_RIGHT","MovieCardFive","theme","title","section_id","type","data","externalData","moreFetchData","onPressItem","onPressMore","renderItemImage","itemWidth","borderRadius","skeletonCount","paginationSkeletonCount","containerStyle","titleStyle","itemStyle","isLoading","accessibilityLabel","accessibilityHint","onDisplayAds","screenDimensions","viewportOffsets","flatListRef","onEndReachedCalledDuringMomentum","appliedTheme","styles","getStyles","listData","pagination","loadMore","isEmpty","isPaging","isPaginating","sectionId","fetchMore","loading","initialSkeleton","pagingSkeleton","adsRender","handleItemPress","item","handlePressMore","name","handleEndReached","current","hasNextPage","nextPage","handleScrollBeginDrag","handleMomentumScrollBegin","renderItem","index","adItem","style","children","ad","width","aspectRatio","imageStyle","image","tracking","impression","contentItem","isSkeleton","_id","startsWith","onPress","activeOpacity","content_offering_type","posterUri","poster","posterWrapperStyle","resizeMode","cover","renderSkeletonItem","highlightColor","colors","skeletonHighlightColor","backgroundColor","skeletonBaseColor","Item","marginLeft","marginRight","keyExtractor","length","root","height","marginHorizontal","marginBottom","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","skeletonList","Array","from","map","_","color","textPrimary","navigateToMoreContainer","showAllProps","iconColor","ref","listContent","initialNumToRender","onEndReached","onEndReachedThreshold","onScrollBeginDrag","onMomentumScrollBegin","ListFooterComponent","radius","create","marginVertical","surfaceVariant","paddingHorizontal","fontSize","fontWeight","paddingRight","flexDirection","alignItems"],"sourceRoot":"../../../../../../src","sources":["components/Content/Card/Styles/Five.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -9,51 +9,90 @@ import React, { memo, useCallback, useMemo, useRef } from 'react';
 import { View, FlatList, TouchableOpacity, StyleSheet, ScrollView } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
-import { usePaginatedSection } from "../../../../hooks/usePaginatedSection.js";
-import NavigateToMore from "../components/NavigateToMore.js";
-import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
-import CardPoster from "../components/CardPoster.js";
 import FastImage from 'react-native-fast-image';
 import { RFValue } from 'react-native-responsive-fontsize';
+import NavigateToMore from "../components/NavigateToMore.js";
+import { AdsPoster } from "../components/index.js";
+import CardPoster from "../components/CardPoster.js";
+import { useInternalTheme } from "../../../../theme/hook/useInternalTheme.js";
+import { useCards } from "../../../../hooks/index.js";
+
+// Constants
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// default values
 const DEFAULT_ITEM_WIDTH = moderateScale(100);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 5;
 const ASPECT_RATIO = 0.7 / 1;
+const END_REACHED_THRESHOLD = 0.5;
+const ITEM_ACTIVE_OPACITY = 0.8;
+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 LIST_CONTENT_PADDING_RIGHT = moderateScale(12);
+const SKELETON_LIST_PADDING_RIGHT = moderateScale(15);
+
+// Types
+
+// Main Component
 const MovieCardFour = ({
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressItem,
   onPressMore,
-  renderItemImage,
   itemWidth = DEFAULT_ITEM_WIDTH,
   itemHeight = DEFAULT_ITEM_WIDTH / ASPECT_RATIO,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
   containerStyle,
+  paginationSkeletonCount,
   titleStyle,
   itemStyle,
   isLoading = false,
   theme,
   accessibilityLabel,
-  accessibilityHint
+  accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets
 }) => {
+  // Refs
   const flatListRef = useRef(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
+
+  // Theme
   const {
     theme: appliedTheme
   } = useInternalTheme(theme);
+
+  // Styles
   const styles = useMemo(() => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius), [appliedTheme, itemWidth, itemHeight, 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?.({
@@ -65,32 +104,62 @@ const MovieCardFour = ({
   const handleEndReached = useCallback(() => {
     if (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [loadMoreData, pagination]);
+  }, [loadMore, pagination]);
+  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,
+            height: itemHeight
+          },
+          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,
-      children: renderItemImage ? renderItemImage({
-        item,
-        index
-      }) : /*#__PURE__*/_jsx(CardPoster, {
-        content_offering_type: item.content_offering_type,
-        posterUri: item.poster,
+      activeOpacity: ITEM_ACTIVE_OPACITY,
+      onPress: () => {
+        if (!isSkeleton && !isLoading) {
+          handleItemPress(contentItem);
+        }
+      },
+      children: /*#__PURE__*/_jsx(CardPoster, {
+        posterUri: contentItem.poster,
+        content_offering_type: contentItem.content_offering_type,
         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]);
-  const renderSkeletonItem = ({
+    }, contentItem._id);
+  }, [appliedTheme, styles, itemStyle, borderRadius, isLoading, handleItemPress, itemWidth, itemHeight, onDisplayAds, screenDimensions, viewportOffsets]);
+  const renderSkeletonItem = useCallback(({
     index
   }) => /*#__PURE__*/_jsx(SkeletonPlaceholder, {
     highlightColor: appliedTheme.colors.skeletonHighlightColor,
@@ -99,14 +168,19 @@ const MovieCardFour = ({
       width: itemWidth,
       height: itemHeight,
       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 (!initialData) {
-    return null;
-  }
-  if (!isLoading && data.length === 0) return null;
+  }, `skeleton-${index}`), [appliedTheme, itemWidth, itemHeight, 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}`,
@@ -116,24 +190,21 @@ const MovieCardFour = ({
         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,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: styles.skeletonList,
-        children: skeletonCount > 0 && /*#__PURE__*/_jsx(View, {
-          style: styles.skeletonList,
-          children: Array.from({
-            length: skeletonCount
-          }).map((_, index) => renderSkeletonItem({
-            index
-          }))
-        })
+        children: Array.from({
+          length: skeletonCount
+        }).map((_, index) => renderSkeletonItem({
+          index
+        }))
       })]
     }) : /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(NavigateToMore, {
@@ -149,21 +220,15 @@ const MovieCardFour = ({
         }
       }), /*#__PURE__*/_jsx(FlatList, {
         ref: flatListRef,
-        data: data,
+        data: listData,
         horizontal: true,
-        keyExtractor: (item, index) => item._id || `item-${item.slug || item.name || index}`,
+        keyExtractor: keyExtractor,
         renderItem: renderItem,
         showsHorizontalScrollIndicator: false,
         contentContainerStyle: styles.listContent,
-        initialNumToRender: 5,
         onEndReached: handleEndReached,
-        onEndReachedThreshold: 0.5,
-        onScrollBeginDrag: () => {
-          onEndReachedCalledDuringMomentum.current = false;
-        },
-        onMomentumScrollBegin: () => {
-          onEndReachedCalledDuringMomentum.current = false;
-        },
+        onEndReachedThreshold: END_REACHED_THRESHOLD,
+        onMomentumScrollBegin: handleMomentumScrollBegin,
         ListFooterComponent: isPaginating ? renderSkeletonItem({
           index: 0
         }) : null
@@ -171,12 +236,14 @@ const MovieCardFour = ({
     })
   });
 };
+
+// Styles
 const getStyles = (theme, width, height, radius) => StyleSheet.create({
   root: {
     marginVertical: verticalScale(6)
   },
   item: {
-    marginLeft: moderateScale(10)
+    marginLeft: ITEM_MARGIN_LEFT
   },
   image: {
     width,
@@ -193,12 +260,12 @@ const getStyles = (theme, width, height, radius) => StyleSheet.create({
     fontWeight: '600'
   },
   listContent: {
-    paddingRight: moderateScale(12)
+    paddingRight: LIST_CONTENT_PADDING_RIGHT
   },
   skeletonList: {
     flexDirection: 'row',
     alignItems: 'flex-start',
-    paddingRight: moderateScale(15)
+    paddingRight: SKELETON_LIST_PADDING_RIGHT
   }
 });
 export default /*#__PURE__*/memo(MovieCardFour);