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

package/src/components/Content/Card/Styles/Three.tsx

@@ -13,33 +13,52 @@ import {
   Dimensions,
   TouchableOpacity,
 } from 'react-native';
+
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import Carousel from 'react-native-snap-carousel';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { debounce } from 'lodash';
-
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
+import { AdsPoster } from '../components';
+
 import type {
+  IAdItem,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ThemeOverride } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
 
+// Constants
 const { width, height } = Dimensions.get('window');
-
-const DEFAULT_ITEM_WIDTH = width * 0.42;
-const DEFAULT_ITEM_HEIGHT = height * 0.28;
+const ITEM_WIDTH_RATIO = 0.42;
+const ITEM_HEIGHT_RATIO = 0.28;
+const DEFAULT_ITEM_WIDTH = width * ITEM_WIDTH_RATIO;
+const DEFAULT_ITEM_HEIGHT = height * ITEM_HEIGHT_RATIO;
 const DEFAULT_BORDER_RADIUS = moderateScale(10);
+const DEFAULT_SKELETON_COUNT = 5;
+const DEBOUNCE_DELAY = 300;
+const ITEM_ACTIVE_OPACITY = 0.8;
+const CAROUSEL_FIRST_ITEM = 1;
+const CAROUSEL_INACTIVE_OPACITY = 0.6;
+const CAROUSEL_INACTIVE_SCALE = 0.9;
+const PAGINATION_TRIGGER_OFFSET = 2;
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = verticalScale(14);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_TITLE_MARGIN_LEFT = moderateScale(12);
+const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
+const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
 
-// Static styles defined outside getStyles to avoid recalculation
+// Static Styles
 const staticStyles = StyleSheet.create({
   root: {
     marginVertical: verticalScale(6),
@@ -56,6 +75,7 @@ const staticStyles = StyleSheet.create({
   },
 });
 
+// Types
 type Props = {
   title: string;
   section_id: string;
@@ -68,45 +88,56 @@ type Props = {
     name: IGetSectionData['name'];
     type: IGetSectionData['type'];
   }) => void;
-  renderItemImage?: (params: {
-    item: IContentData;
-    index: number;
-  }) => React.ReactNode;
   itemWidth?: number;
   itemHeight?: number;
   borderRadius?: number;
   skeletonCount?: number;
   containerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
+  paginationSkeletonCount?: number;
   itemStyle?: StyleProp<ViewStyle>;
   isLoading?: boolean;
   theme?: ThemeOverride;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: { width: number; height: number };
+  viewportOffsets?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
 };
 
+// Main Component
 const MovieCardThree: React.FC<Props> = ({
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressMore,
   onPressItem,
-  renderItemImage,
   itemWidth = DEFAULT_ITEM_WIDTH,
   itemHeight = DEFAULT_ITEM_HEIGHT,
   borderRadius = DEFAULT_BORDER_RADIUS,
-  skeletonCount = 5,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
   containerStyle,
   titleStyle,
   itemStyle,
   isLoading = false,
   theme,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
+  // Refs
+  const carouselRef = useRef<Carousel<IContentData | IAdItem> | null>(null);
 
-  const carouselRef = useRef<any>(null);
+  // Theme
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
-  // Memoized dynamic styles
+  // Styles
   const styles = useMemo(
     () =>
       StyleSheet.create({
@@ -115,167 +146,175 @@ const MovieCardThree: React.FC<Props> = ({
           height: itemHeight,
           borderRadius,
           overflow: 'hidden',
-          elevation: 0,
-          shadowColor: 'transparent',
-          shadowOffset: { width: 0, height: 0 },
-          shadowOpacity: 0,
-          shadowRadius: 0,
         },
         image: {
           width: '100%',
           height: '100%',
-          backgroundColor: appliedTheme.colors.skeletonBaseColor ?? '#222',
+          backgroundColor: appliedTheme.colors.surfaceVariant,
         },
         skeleton: {
           width: itemWidth,
           height: itemHeight,
           borderRadius,
+          marginRight: SKELETON_ITEM_MARGIN_RIGHT,
           overflow: 'hidden',
-          marginRight: moderateScale(12),
         },
       }),
-    [appliedTheme.colors.skeletonBaseColor, itemWidth, itemHeight, borderRadius]
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
   );
 
+  // Data Management
   const {
-    data,
-    loading: isPaginating,
+    listData,
     pagination,
-    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,
+  });
 
-  // Memoized skeleton items
+  // Skeleton Data
   const skeletonItems = useMemo(() => {
     const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
-    return Array.from({ length: count }, (_, i) => ({
-      _id: `skeleton-${i}`,
+
+    if (!count) {
+      return [];
+    }
+
+    return Array.from({ length: count }, (_, index) => ({
+      _id: `skeleton-${index}`,
       isSkeleton: true,
     }));
   }, [isLoading, isPaginating, skeletonCount]);
 
-  // Optimized finalData to avoid unnecessary spread
-  const finalData = useMemo(
-    () =>
-      isLoading
-        ? skeletonItems
-        : skeletonItems.length > 0
-          ? [...data, ...skeletonItems]
-          : data,
-    [isLoading, data, skeletonItems]
-  );
+  const finalData = useMemo(() => {
+    if (isLoading) {
+      return skeletonItems;
+    }
 
-  // Debounced loadMoreData to prevent excessive calls
+    if (!skeletonItems.length) {
+      return listData;
+    }
+
+    return [...listData, ...skeletonItems];
+  }, [listData, isLoading, skeletonItems]);
+
+  // Debounced Functions
   const debouncedLoadMore = useMemo(
     () =>
       debounce((nextPage: number) => {
-        return loadMoreData(nextPage);
-      }, 300),
-    [loadMoreData]
-  );
-
-  const handleItemPress = useCallback(
-    (item: IContentData) => {
-      onPressItem?.(item);
-    },
-    [onPressItem]
+        loadMore(nextPage);
+      }, DEBOUNCE_DELAY),
+    [loadMore]
   );
 
+  // Event Handlers
   const handlePressMore = useCallback(() => {
-    onPressMore?.({
-      section_id,
-      name: title,
-      type,
-    });
+    onPressMore?.({ section_id, name: title, type });
   }, [onPressMore, section_id, title, type]);
 
+  const handleSnapToItem = useCallback(
+    (index: number) => {
+      // Pagination logic
+      if (!pagination?.hasNextPage || !pagination?.nextPage) return;
+      if (index >= finalData.length - PAGINATION_TRIGGER_OFFSET) {
+        debouncedLoadMore(pagination.nextPage);
+      }
+    },
+    [finalData, pagination, debouncedLoadMore]
+  );
+
+  // Render Functions
   const renderItem = useCallback(
-    ({
-      item,
-      index,
-    }: {
-      item: IContentData | { isSkeleton: true; _id: string };
-      index: number;
-    }) => {
-      if ('isSkeleton' in item) {
+    ({ item, index }: { item: IContentData | IAdItem; index: number }) => {
+      // Handle ads
+      if ('type' in item && item.type === 'ads') {
+        const adItem = item as IAdItem;
         return (
-          <View key={item._id} style={styles.skeleton}>
-            <SkeletonPlaceholder
-              highlightColor={appliedTheme.colors.skeletonHighlightColor}
-              backgroundColor={appliedTheme.colors.skeletonBaseColor}
-            >
-              <SkeletonPlaceholder.Item
-                width={itemWidth}
-                height={itemHeight}
-                borderRadius={borderRadius}
-              />
-            </SkeletonPlaceholder>
+          <View
+            key={`ad-${adItem.tracking?.impression || index}`}
+            style={[styles.item, itemStyle]}
+          >
+            <AdsPoster
+              ad={adItem}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              containerStyle={{ width: itemWidth, height: itemHeight }}
+              imageStyle={styles.image}
+              borderRadius={borderRadius}
+              onDisplayAds={onDisplayAds}
+              screenDimensions={screenDimensions}
+              viewportOffsets={viewportOffsets}
+            />
           </View>
         );
       }
-
+      // Handle content items
+      const contentItem = item as IContentData;
+      const isSkeleton =
+        contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
       return (
         <TouchableOpacity
-          key={item._id || `item-${index}`}
-          activeOpacity={0.8}
           style={[styles.item, itemStyle]}
-          disabled={!item || !onPressItem || isLoading}
-          onPress={() => handleItemPress(item)}
+          activeOpacity={ITEM_ACTIVE_OPACITY}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              onPressItem?.(contentItem);
+            }
+          }}
         >
-          {renderItemImage ? (
-            renderItemImage({ item, index })
-          ) : (
-            <CardPoster
-              content_offering_type={item.content_offering_type}
-              posterUri={item.poster}
-              theme={appliedTheme}
-              borderRadius={borderRadius}
-              posterWrapperStyle={styles.image}
-              resizeMode={FastImage.resizeMode.cover}
-              isLoading={isLoading}
-            />
-          )}
+          <CardPoster
+            posterUri={item.poster}
+            content_offering_type={item.content_offering_type}
+            theme={appliedTheme}
+            borderRadius={borderRadius}
+            posterWrapperStyle={styles.image}
+            resizeMode={FastImage.resizeMode.cover}
+            isLoading={isSkeleton || isLoading}
+          />
         </TouchableOpacity>
       );
     },
     [
-      styles.item,
-      styles.image,
-      styles.skeleton,
-      itemStyle,
-      onPressItem,
-      isLoading,
-      renderItemImage,
       appliedTheme,
-      borderRadius,
+      styles,
+      itemStyle,
       itemWidth,
       itemHeight,
-      handleItemPress,
+      borderRadius,
+      isLoading,
+      onPressItem,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );
-  if (!initialData) return null;
-  if (!isLoading && (!data || data.length === 0)) return null;
 
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Main Render
   return (
-    <View
-      style={[staticStyles.root, containerStyle]}
-      testID={`movie-card-${section_id}`}
-    >
+    <View style={[staticStyles.root, containerStyle]}>
       {isLoading ? (
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
         >
           <SkeletonPlaceholder.Item
-            width={moderateScale(100)}
-            height={verticalScale(14)}
-            borderRadius={moderateScale(4)}
-            marginLeft={moderateScale(12)}
-            marginBottom={verticalScale(6)}
+            width={SKELETON_TITLE_WIDTH}
+            height={SKELETON_TITLE_HEIGHT}
+            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
+            marginLeft={SKELETON_TITLE_MARGIN_LEFT}
+            marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
           />
         </SkeletonPlaceholder>
       ) : (
@@ -291,23 +330,17 @@ const MovieCardThree: React.FC<Props> = ({
           showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
+
       <Carousel
         ref={carouselRef}
-        data={finalData as any}
-        vertical={false}
+        data={finalData as IContentData[]}
         renderItem={renderItem}
-        firstItem={1}
-        inactiveSlideOpacity={0.6}
-        inactiveSlideScale={0.9}
+        firstItem={CAROUSEL_FIRST_ITEM}
         sliderWidth={width}
         itemWidth={itemWidth}
-        onSnapToItem={(index) => {
-          if (isLoading || !pagination?.hasNextPage || !pagination?.nextPage)
-            return;
-          if (index >= finalData.length - 2) {
-            debouncedLoadMore(pagination.nextPage);
-          }
-        }}
+        inactiveSlideOpacity={CAROUSEL_INACTIVE_OPACITY}
+        inactiveSlideScale={CAROUSEL_INACTIVE_SCALE}
+        onSnapToItem={handleSnapToItem}
       />
     </View>
   );