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

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

@@ -13,37 +13,50 @@ import {
   type ViewStyle,
   type TextStyle,
   type AccessibilityProps,
-  type ListRenderItemInfo,
 } from 'react-native';
+
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage from 'react-native-fast-image';
 import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
+
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
-import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import { AdsPoster } from '../components';
+
 import type {
+  IAdItem,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
-import type { ITheme, 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 DEFAULT_ITEM_WIDTH = moderateScale(105);
 const DEFAULT_ITEM_HEIGHT = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(6);
 const DEFAULT_SKELETON_COUNT = 5;
+const END_REACHED_THRESHOLD = 0.5;
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = verticalScale(14);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_ITEM_MARGIN = moderateScale(12);
+const ITEM_ACTIVE_OPACITY = 0.8;
 
+// Types
 type MovieCardProps = {
   title: string;
   section_id: string;
   type: IGetSectionData['type'];
   data: ISectionContent | null;
   moreFetchData?: MoreFetchData<IContentData>;
-  onPressItem?: (item: IContentData) => void;
+  onPressItem?: (item: IContentData | IAdItem) => void;
   onPressMore?: (params: {
     section_id: IGetSectionData['_id'];
     name: IGetSectionData['name'];
@@ -59,24 +72,36 @@ type MovieCardProps = {
   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;
+  };
 } & AccessibilityProps;
 
+// Main Component
 const MovieCard: React.FC<MovieCardProps> = ({
   title,
   section_id,
   type,
-  data: initialData,
+  data: externalData,
   moreFetchData,
-  onPressMore,
   onPressItem,
+  onPressMore,
+
   renderItemImage,
   itemWidth = DEFAULT_ITEM_WIDTH,
   itemHeight = DEFAULT_ITEM_HEIGHT,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
   containerStyle,
   titleStyle,
   itemStyle,
@@ -84,30 +109,46 @@ const MovieCard: React.FC<MovieCardProps> = ({
   theme,
   accessibilityLabel,
   accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
-  const flatListRef = useRef<FlatList<IContentData>>(null);
+  // Refs
+  const flatListRef = useRef<FlatList<IContentData | IAdItem>>(null);
+  const containerRef = useRef<View>(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: IContentData) => onPressItem?.(item),
+    (item: IContentData | IAdItem) => {
+      onPressItem?.(item);
+    },
     [onPressItem]
   );
 
@@ -122,31 +163,68 @@ const MovieCard: React.FC<MovieCardProps> = ({
       pagination?.nextPage
     ) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(pagination.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [loadMoreData, pagination]);
+  }, [pagination, loadMore]);
+
+  const handleMomentumScrollBegin = useCallback(() => {
+    onEndReachedCalledDuringMomentum.current = false;
+  }, []);
 
+  // Render Functions
   const renderItem = useCallback(
-    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+    ({ item, index }: { item: IContentData | IAdItem; index: number }) => {
+      // Handle ads
+      if ('type' in item && item.type === 'ads') {
+        const adItem = item as IAdItem;
+        return (
+          <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}
+              onPress={() => handleItemPress(adItem)}
+              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}
+          key={contentItem._id}
           style={[styles.item, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.8}
+          activeOpacity={ITEM_ACTIVE_OPACITY}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              handleItemPress(contentItem);
+            }
+          }}
         >
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
             <CardPoster
-              key={item._id}
-              content_offering_type={item.content_offering_type}
-              posterUri={item.poster}
+              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}
             />
           )}
         </TouchableOpacity>
@@ -160,50 +238,67 @@ const MovieCard: React.FC<MovieCardProps> = ({
       appliedTheme,
       borderRadius,
       isLoading,
+      itemWidth,
+      itemHeight,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
       handleItemPress,
     ]
   );
 
-  const renderSkeletonItem = ({ index }: { index: number }) => (
-    <SkeletonPlaceholder
-      key={`skeleton-${index}`}
-      highlightColor={appliedTheme.colors.skeletonHighlightColor}
-      backgroundColor={appliedTheme.colors.skeletonBaseColor}
-    >
-      <SkeletonPlaceholder.Item
-        width={itemWidth}
-        height={itemHeight}
-        borderRadius={borderRadius}
-        marginLeft={index === 0 ? moderateScale(12) : 0}
-        marginRight={moderateScale(12)}
-      />
-    </SkeletonPlaceholder>
+  const renderSkeletonItem = useCallback(
+    ({ index }: { index: number }) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemHeight}
+          borderRadius={borderRadius}
+          marginLeft={index === 0 ? SKELETON_ITEM_MARGIN : 0}
+          marginRight={SKELETON_ITEM_MARGIN}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
   );
-  if (!initialData) {
-    return null;
-  }
-  if (!isLoading && data.length === 0) return null;
 
+  const keyExtractor = useCallback(
+    (item: IContentData | IAdItem, index: number) => {
+      if ('type' in item && item.type === 'ads') {
+        return `ad-${(item as IAdItem).tracking?.impression || index}`;
+      }
+      return (item as IContentData)._id || `item-${index}`;
+    },
+    []
+  );
+
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Loading State
   if (isLoading) {
     return (
-      <View
-        style={[styles.root, containerStyle]}
-        testID={`movie-card-skeleton-${section_id}`}
-      >
+      <View style={[styles.root, containerStyle]}>
         <SkeletonPlaceholder
           highlightColor={appliedTheme.colors.skeletonHighlightColor}
           backgroundColor={appliedTheme.colors.skeletonBaseColor}
         >
           <SkeletonPlaceholder.Item
-            width={moderateScale(100)}
-            height={verticalScale(14)}
-            borderRadius={moderateScale(4)}
-            marginLeft={moderateScale(12)}
+            width={SKELETON_TITLE_WIDTH}
+            height={SKELETON_TITLE_HEIGHT}
+            borderRadius={SKELETON_TITLE_BORDER_RADIUS}
+            marginLeft={SKELETON_ITEM_MARGIN}
             marginBottom={verticalScale(6)}
           />
         </SkeletonPlaceholder>
+
         <FlatList
-          data={Array.from({ length: skeletonCount }, () => null)}
+          data={Array.from({ length: skeletonCount })}
           horizontal
           keyExtractor={(_, index) => `skeleton-${index}`}
           renderItem={renderSkeletonItem}
@@ -214,12 +309,14 @@ const MovieCard: React.FC<MovieCardProps> = ({
     );
   }
 
+  // Main Render
   return (
     <View
+      ref={containerRef}
       style={[styles.root, containerStyle]}
-      testID={`movie-card-${section_id}`}
       accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
-      accessibilityHint={accessibilityHint || 'Scroll to view movies'}
+      accessibilityHint={accessibilityHint || 'Scroll to view items'}
+      testID={`movie-card-${section_id}`}
     >
       <NavigateToMore
         title={title}
@@ -232,23 +329,18 @@ const MovieCard: React.FC<MovieCardProps> = ({
         containerStyle={styles.navigateToMoreContainer}
         showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
+
       <FlatList
         ref={flatListRef}
-        data={data}
+        data={listData}
         horizontal
-        keyExtractor={(item, index) => (item._id ? item._id : `item-${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
         }
@@ -257,6 +349,7 @@ const MovieCard: React.FC<MovieCardProps> = ({
   );
 };
 
+// Styles
 const getStyles = (
   theme: ITheme,
   width: number,
@@ -276,9 +369,6 @@ const getStyles = (
       borderRadius: radius,
       backgroundColor: theme.colors.surfaceVariant,
     },
-    imageWrapper: {
-      position: 'relative',
-    },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8),