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

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

@@ -14,30 +14,46 @@ import {
   type ViewStyle,
   type AccessibilityProps,
   type ListRenderItem,
-  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 { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
+  IAdItem,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
+
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
+
 import NavigateToMore from '../components/NavigateToMore';
 import CardPoster from '../components/CardPoster';
-import { RFValue } from 'react-native-responsive-fontsize';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { AdsPoster } from '../components';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
 
-// Defaults
+// Constants
 const DEFAULT_WIDTH = moderateScale(172);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;
+const END_REACHED_THRESHOLD = 0.5;
+const ITEM_ASPECT_RATIO = 0.67;
+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_MARGIN_LEFT = moderateScale(10);
+const ITEM_MARGIN_RIGHT = moderateScale(12);
+const ITEM_ACTIVE_OPACITY = 0.8;
+const DEFAULT_BACKGROUND_COLOR = '#2c2c2c';
+const DEFAULT_IMAGE_BACKGROUND_COLOR = '#222';
 
+// Types
 type MovieCardTwoProps = {
   title: string;
   section_id: string;
@@ -57,17 +73,27 @@ type MovieCardTwoProps = {
   itemWidth?: number;
   borderRadius?: number;
   skeletonCount?: number;
+  paginationSkeletonCount?: number;
   containerStyle?: StyleProp<ViewStyle>;
   titleStyle?: StyleProp<TextStyle>;
   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 MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   title,
   section_id,
-  data: initialData,
+  data: externalData,
   moreFetchData,
   onPressMore,
   onPressItem,
@@ -76,6 +102,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   itemWidth = DEFAULT_WIDTH,
   borderRadius = DEFAULT_BORDER_RADIUS,
   skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
   containerStyle,
   titleStyle,
   itemStyle,
@@ -83,34 +110,46 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
   theme,
   accessibilityLabel,
   accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
-  const flatListRef = useRef<FlatList<IContentData>>(null);
-
+  // Refs
+  const flatListRef = useRef<FlatList<IContentData | IAdItem>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
+
+  // Theme
   const { theme: appliedTheme } = useInternalTheme(theme);
 
+  // Styles
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, borderRadius),
     [appliedTheme, itemWidth, borderRadius]
   );
 
+  // Data Management
   const {
-    data,
-    pagination: paginated,
-    loading: isPaginating,
-    loadMoreData,
-  } = usePaginatedSection(
-    section_id,
-    moreFetchData,
-    initialData?.data || [],
-    isLoading
-  );
+    listData,
+    pagination,
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: false,
+  });
+
+  // Event Handlers
   const handleItemPress = useCallback(
-    (item: IContentData) => {
-      onPressItem?.(item);
-    },
+    (item: IContentData) => onPressItem?.(item),
     [onPressItem]
   );
+
   const handlePressMore = useCallback(() => {
     onPressMore?.({
       section_id,
@@ -118,39 +157,83 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
       type,
     });
   }, [onPressMore, section_id, title, type]);
+
   const handleEndReached = useCallback(() => {
     if (
       !onEndReachedCalledDuringMomentum.current &&
-      paginated?.hasNextPage &&
-      paginated?.nextPage
+      pagination?.hasNextPage &&
+      pagination?.nextPage
     ) {
       onEndReachedCalledDuringMomentum.current = true;
-      loadMoreData(paginated.nextPage);
+      loadMore(pagination.nextPage);
     }
-  }, [loadMoreData, paginated?.hasNextPage, paginated?.nextPage]);
+  }, [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, index === 0 && styles.firstAdItem, itemStyle]}
+          >
+            <AdsPoster
+              ad={adItem}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              containerStyle={{
+                width: itemWidth,
+                height: itemWidth / ITEM_ASPECT_RATIO,
+              }}
+              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={index}
-          style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
-          onPress={() => handleItemPress(item)}
-          activeOpacity={0.85}
-          testID={`movie-card-two-item-${index}`}
-          accessibilityLabel={`Card Two: ${item.name || 'item'} ${index + 1}`}
-          accessibilityHint="Press to view movie details"
+          key={contentItem._id}
+          style={[
+            styles.item,
+            index === 0 && styles.firstContentItem,
+            itemStyle,
+          ]}
+          activeOpacity={ITEM_ACTIVE_OPACITY}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              handleItemPress(contentItem);
+            }
+          }}
         >
           {renderItemImage ? (
             renderItemImage({ item, index })
           ) : (
             <CardPoster
-              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>
@@ -158,16 +241,22 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
     },
     [
       styles.item,
-      styles.firstItem,
+      styles.firstContentItem,
       styles.image,
+      styles.firstAdItem,
       itemStyle,
       renderItemImage,
       appliedTheme,
       borderRadius,
       isLoading,
+      itemWidth,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
       handleItemPress,
     ]
   );
+
   const renderSkeletonItem: ListRenderItem<null> = useCallback(
     ({ index }) => (
       <SkeletonPlaceholder
@@ -177,24 +266,47 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
       >
         <SkeletonPlaceholder.Item
           width={itemWidth}
-          height={itemWidth / 0.67}
+          height={itemWidth / ITEM_ASPECT_RATIO}
           borderRadius={borderRadius}
-          marginRight={moderateScale(12)}
-          marginLeft={index === 0 ? moderateScale(12) : 0}
+          marginRight={SKELETON_ITEM_MARGIN}
+          marginLeft={index === 0 ? SKELETON_ITEM_MARGIN : 0}
         />
       </SkeletonPlaceholder>
     ),
     [appliedTheme, itemWidth, borderRadius]
   );
-  if (!initialData) {
-    return null;
-  }
-  const listData = data ?? [];
 
-  if (!isLoading && listData.length === 0) {
-    return null;
-  }
+  const keyExtractor = useCallback(
+    (item: IContentData | IAdItem, index: number) => {
+      return '_id' in item ? item._id : `ad-${index}`;
+    },
+    []
+  );
+
+  const renderPaginationFooter = useCallback(() => {
+    if (!isPaginating) return null;
 
+    return (
+      <SkeletonPlaceholder
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        borderRadius={borderRadius}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          height={itemWidth / ITEM_ASPECT_RATIO}
+          borderRadius={borderRadius}
+          marginRight={SKELETON_ITEM_MARGIN}
+        />
+      </SkeletonPlaceholder>
+    );
+  }, [isPaginating, appliedTheme, borderRadius, itemWidth]);
+
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Loading State
   if (isLoading) {
     return (
       <View style={[styles.root, containerStyle]}>
@@ -203,13 +315,14 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
           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)}
           horizontal
@@ -222,6 +335,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
     );
   }
 
+  // Main Render
   return (
     <View
       style={[styles.root, containerStyle]}
@@ -240,61 +354,50 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
         ]}
         showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
       />
+
       <FlatList
         ref={flatListRef}
         data={listData}
         horizontal
         showsHorizontalScrollIndicator={false}
-        keyExtractor={(item, index) => `${item._id ?? item.name}-${index}`}
+        keyExtractor={keyExtractor}
         renderItem={renderItem}
         contentContainerStyle={styles.listContent}
         onEndReached={handleEndReached}
-        onEndReachedThreshold={0.5}
-        onMomentumScrollBegin={() => {
-          onEndReachedCalledDuringMomentum.current = false;
-        }}
-        ListFooterComponent={
-          isPaginating ? (
-            <SkeletonPlaceholder
-              highlightColor={appliedTheme.colors.skeletonHighlightColor}
-              backgroundColor={appliedTheme.colors.skeletonBaseColor}
-              borderRadius={borderRadius}
-            >
-              <SkeletonPlaceholder.Item
-                width={itemWidth}
-                height={itemWidth / 0.67}
-                borderRadius={borderRadius}
-                marginRight={moderateScale(12)}
-              />
-            </SkeletonPlaceholder>
-          ) : null
-        }
+        onEndReachedThreshold={END_REACHED_THRESHOLD}
+        onMomentumScrollBegin={handleMomentumScrollBegin}
+        ListFooterComponent={renderPaginationFooter()}
       />
     </View>
   );
 };
 
+// Styles
 const getStyles = (theme: ITheme, width: number, radius: number) =>
   StyleSheet.create({
     root: {
       marginVertical: verticalScale(6),
     },
     item: {
-      width: width,
-      height: width / 0.67,
-      marginRight: moderateScale(12),
+      width,
+      height: width / ITEM_ASPECT_RATIO,
+      marginRight: ITEM_MARGIN_RIGHT,
       borderRadius: radius,
       overflow: 'hidden',
-      backgroundColor: theme.colors.background ?? '#2c2c2c',
+      backgroundColor: theme.colors.background ?? DEFAULT_BACKGROUND_COLOR,
+    },
+    firstContentItem: {
+      marginLeft: ITEM_MARGIN_LEFT,
     },
-    firstItem: {
-      marginLeft: moderateScale(10),
+    firstAdItem: {
+      marginLeft: ITEM_MARGIN_LEFT,
     },
     image: {
       width: '100%',
       height: '100%',
       borderRadius: radius,
-      backgroundColor: theme.colors.background ?? '#222',
+      backgroundColor:
+        theme.colors.background ?? DEFAULT_IMAGE_BACKGROUND_COLOR,
     },
     navigateToMoreContainer: {
       paddingHorizontal: moderateScale(10),

package/src/components/Content/Card/components/AdsPoster.tsx

@@ -0,0 +1,202 @@
+import { memo, useMemo } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { scale } from 'react-native-size-matters';
+import type { IServeAd } from '@zezosoft/zezo-ott-api-client';
+import CardPoster from './CardPoster';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme';
+import { useAdTracking } from '../../../../hooks';
+
+type Props = {
+  ad: IServeAd;
+  theme: ITheme;
+  isLoading?: boolean;
+  containerStyle?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ViewStyle>;
+  onPress?: (item: IServeAd) => void;
+  borderRadius?: number;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: { width: number; height: number };
+  viewportOffsets?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+};
+
+// Constants
+const DEFAULT_BORDER_RADIUS = scale(6);
+const DEFAULT_AD_COLOR = '#CA091E';
+const TOUCHABLE_OPACITY = 0.85;
+
+// Badge styling constants
+const BADGE_POSITION = scale(4);
+const BADGE_MIN_WIDTH = scale(28);
+const BADGE_HEIGHT = scale(19);
+const BADGE_PADDING_HORIZONTAL = scale(8);
+const BADGE_BORDER_RADIUS = scale(12);
+const BADGE_FONT_SIZE = scale(9);
+const BADGE_LETTER_SPACING = 1.2;
+const BADGE_LINE_HEIGHT = scale(12);
+
+// Badge background with semi-transparent white for better visibility
+const BADGE_BACKGROUND = 'rgba(255, 255, 255, 0.95)';
+const BADGE_BORDER_WIDTH = scale(0.5);
+const BADGE_BORDER_COLOR = 'rgba(0, 0, 0, 0.08)';
+
+// Enhanced shadow for better depth and visibility
+const BADGE_SHADOW = {
+  shadowColor: '#000',
+  shadowOffset: { width: 0, height: scale(2) },
+  shadowOpacity: 0.25,
+  shadowRadius: scale(4),
+  elevation: 5,
+};
+
+export const AdsPoster = memo(
+  ({
+    ad,
+    theme,
+    isLoading = false,
+    containerStyle,
+    imageStyle,
+    borderRadius = DEFAULT_BORDER_RADIUS,
+    onPress,
+    onDisplayAds,
+    screenDimensions: propScreenDimensions,
+    viewportOffsets: propViewportOffsets,
+  }: Props) => {
+    const { colors } = theme;
+
+    const { viewRef, handleLayout } = useAdTracking({
+      ad,
+      onDisplayAds,
+      isLoading,
+      screenDimensions: propScreenDimensions,
+      viewportOffsets: propViewportOffsets,
+    });
+
+    // Memoize badge styles with dynamic positioning
+    const badgeStyle = useMemo(
+      () => [
+        styles.badge,
+        {
+          top: BADGE_POSITION,
+          left: BADGE_POSITION,
+          minWidth: BADGE_MIN_WIDTH,
+          height: BADGE_HEIGHT,
+          paddingHorizontal: BADGE_PADDING_HORIZONTAL,
+          borderRadius: BADGE_BORDER_RADIUS,
+        },
+        isLoading && styles.badgeSkeleton,
+      ],
+      [isLoading]
+    );
+
+    // Memoize badge text style with better typography
+    const badgeTextStyle = useMemo(
+      () => [
+        styles.badgeText,
+        {
+          color: colors.premiumIcon || DEFAULT_AD_COLOR,
+          lineHeight: BADGE_LINE_HEIGHT,
+        },
+      ],
+      [colors.premiumIcon]
+    );
+
+    // Memoize skeleton item style matching badge dimensions
+    const skeletonItemStyle = useMemo(
+      () => ({
+        width: BADGE_MIN_WIDTH,
+        height: BADGE_HEIGHT,
+        borderRadius: BADGE_BORDER_RADIUS,
+      }),
+      []
+    );
+
+    // Early return if no media URL
+    if (!ad?.mediaUrl) {
+      return null;
+    }
+
+    return (
+      <TouchableOpacity
+        ref={viewRef}
+        activeOpacity={TOUCHABLE_OPACITY}
+        disabled={isLoading}
+        onPress={() => onPress?.(ad)}
+        style={[styles.wrapper, containerStyle]}
+        accessibilityRole="button"
+        accessibilityLabel="Advertisement"
+        onLayout={handleLayout}
+      >
+        <View style={[styles.posterWrapper, { borderRadius }]}>
+          <CardPoster
+            posterUri={ad.mediaUrl}
+            theme={theme}
+            isLoading={isLoading}
+            posterWrapperStyle={imageStyle}
+            borderRadius={borderRadius}
+          />
+
+          {/* AD Badge */}
+          <View style={badgeStyle}>
+            {isLoading ? (
+              <SkeletonPlaceholder
+                backgroundColor={colors.skeletonBaseColor}
+                highlightColor={colors.skeletonHighlightColor}
+              >
+                <SkeletonPlaceholder.Item style={skeletonItemStyle} />
+              </SkeletonPlaceholder>
+            ) : (
+              <Text type="caption" weight="700" style={badgeTextStyle}>
+                AD
+              </Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  }
+);
+
+AdsPoster.displayName = 'AdsPoster';
+
+const styles = StyleSheet.create({
+  wrapper: {
+    position: 'relative',
+  },
+  posterWrapper: {
+    position: 'relative',
+  },
+  badge: {
+    position: 'absolute',
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 10,
+    backgroundColor: BADGE_BACKGROUND,
+    borderWidth: BADGE_BORDER_WIDTH,
+    borderColor: BADGE_BORDER_COLOR,
+    ...BADGE_SHADOW,
+  },
+  badgeSkeleton: {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    shadowOpacity: 0,
+    elevation: 0,
+  },
+  badgeText: {
+    fontSize: BADGE_FONT_SIZE,
+    letterSpacing: BADGE_LETTER_SPACING,
+    fontWeight: '700',
+  },
+});