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

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

@@ -1,9 +1,9 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 25 Oct 2025 at 04:01 PM
+ * @lastModified Wed 24 Dec 2025 at 04:01 PM
  */
 
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {
   type ResizeMode,
@@ -16,9 +16,18 @@ import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
 import RentOrBuyIcon from './RentOrBuyIcon';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useImageLoader } from '../../../../hooks';
+import LinearGradient from 'react-native-linear-gradient';
+import { RFValue } from 'react-native-responsive-fontsize';
 
-// Module-level cache to track successfully loaded images
-const loadedImageCache = new Set<string>();
+// Rank number styling constants
+const RANK_NUMBER_SIZE = scale(40);
+const RANK_NUMBER_BORDER_RADIUS = scale(30);
+const RANK_NUMBER_TEXT_SIZE = RFValue(25);
+const RANK_NUMBER_TEXT_MARGIN_TOP = scale(2);
+const RANK_NUMBER_TEXT_MARGIN_RIGHT = scale(6);
+const GRADIENT_START = { x: 1, y: 0.5 };
+const GRADIENT_END = { x: 0.5, y: 1 };
 
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];
@@ -29,63 +38,45 @@ export type CardPosterProps = {
   posterWrapperStyle?: StyleProp<ViewStyle>;
   imageStyle?: ImageStyle;
   resizeMode?: ResizeMode;
+  showRankNumber?: boolean;
+  rankNumber?: number;
 };
 
+// ----------------------------------
+// Image Fallback
+// ----------------------------------
+const ImageFallback = React.memo(({ errorColor, bg }: any) => (
+  <View style={[styles.absolute, styles.center, { backgroundColor: bg }]}>
+    <ImageOff size={scale(18)} color={errorColor} />
+    <Text style={styles.fallbackText} color={errorColor}>
+      Image Failed
+    </Text>
+  </View>
+));
 const CardPoster: React.FC<CardPosterProps> = ({
   content_offering_type,
   posterUri,
   theme,
-  isLoading = false,
   borderRadius = scale(6),
   posterWrapperStyle,
   imageStyle,
+  isLoading = false,
   resizeMode = FastImage.resizeMode.cover,
+  showRankNumber = false,
+  rankNumber,
 }) => {
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
-
-  const hasValidPoster = useMemo(() => {
-    if (!posterUri || typeof posterUri !== 'string') return false;
-    const cleaned = posterUri.trim();
-    return (
-      (cleaned.startsWith('http://') || cleaned.startsWith('https://')) &&
-      /\.(jpg|jpeg|png|webp|gif|bmp)$/i.test(cleaned)
-    );
-  }, [posterUri]);
-
-  // Reset image loading state when isLoading prop changes
-  useEffect(() => {
-    if (isLoading) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [isLoading]);
-
-  useEffect(() => {
-    if (hasValidPoster) {
-      // Check if this image was already loaded successfully before
-      const isAlreadyLoaded = loadedImageCache.has(posterUri);
-
-      if (isAlreadyLoaded) {
-        // Image was loaded before, skip loading state
-        setImageLoading(false);
-        setImageError(false);
-      } else {
-        // Image not loaded before, show loading
-        setImageLoading(true);
-        setImageError(false);
-        FastImage.preload([{ uri: posterUri }]);
-      }
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [posterUri, hasValidPoster]);
-
-  const showSkeleton = useMemo(
-    () => isLoading || (imageLoading && !imageError && hasValidPoster),
-    [isLoading, imageLoading, imageError, hasValidPoster]
-  );
+  const {
+    showSkeleton,
+    showFallback,
+    hasValidImage,
+    imageSource,
+    imageLoading,
+    handleLoad,
+    handleError,
+  } = useImageLoader({
+    imageUri: posterUri,
+    isLoading,
+  });
 
   // Memoize theme colors
   const themeColors = useMemo(
@@ -95,141 +86,113 @@ const CardPoster: React.FC<CardPosterProps> = ({
       skeletonHighlightColor: theme.colors.skeletonHighlightColor,
       error: theme.colors.error,
       errorContainer: theme.colors.errorContainer,
+      border: theme.colors.border,
     }),
     [theme.colors]
   );
 
-  const fallbackImageStyle: ImageStyle = useMemo(
-    () => ({
-      width: '100%',
-      aspectRatio: 2 / 3,
-      borderRadius,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    }),
-    [borderRadius]
-  );
-
-  // Memoize FastImage source
-  const imageSource = useMemo(
-    () => ({
-      uri: posterUri,
-      cache: FastImage.cacheControl.immutable,
-      priority: FastImage.priority.normal,
-    }),
-    [posterUri]
-  );
-
-  // Memoize callback handlers
-  const handleLoadStart = useCallback(() => {
-    // Only set loading if image is not already in cache
-    if (!loadedImageCache.has(posterUri)) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [posterUri]);
-
-  const handleLoad = useCallback(() => {
-    setImageLoading(false);
-    setImageError(false);
-    // Add to cache when successfully loaded
-    loadedImageCache.add(posterUri);
-  }, [posterUri]);
-
-  const handleError = useCallback(() => {
-    setImageLoading(false);
-    setImageError(true);
-  }, []);
-
   // Memoize wrapper style
   const wrapperStyle = useMemo(
     () => [
       styles.posterWrapper,
-      { borderRadius, backgroundColor: themeColors.background },
+      {
+        width: '100%' as const,
+        aspectRatio: 2 / 3,
+        borderRadius,
+        backgroundColor: themeColors.background,
+        borderWidth: showSkeleton ? scale(0.5) : showFallback ? scale(0.3) : 0,
+        borderColor: showSkeleton
+          ? themeColors.border
+          : showFallback
+            ? themeColors.error
+            : 'transparent',
+      } as ViewStyle,
       posterWrapperStyle,
     ],
-    [borderRadius, themeColors.background, posterWrapperStyle]
-  );
-
-  // Memoize skeleton wrapper style
-  const skeletonWrapperStyle = useMemo(
-    () => [styles.skeletonWrapper, { borderRadius }],
-    [borderRadius]
+    [
+      borderRadius,
+      themeColors.background,
+      themeColors.border,
+      themeColors.error,
+      showSkeleton,
+      showFallback,
+      posterWrapperStyle,
+    ]
   );
 
   // Memoize skeleton item style
-  const skeletonItemStyle = useMemo(
-    () => [styles.skeleton, { borderRadius }],
-    [borderRadius]
-  );
 
-  // Memoize image style array
+  // Memoize image style array - hide image until it successfully loads
   const imageStyleArray = useMemo(
     () => [
-      fallbackImageStyle,
-      showSkeleton ? styles.hidden : styles.visible,
+      styles.absolute,
+      // Hide image when skeleton is showing or image is still loading
+      showSkeleton || imageLoading ? styles.hidden : styles.visible,
       imageStyle,
     ],
-    [fallbackImageStyle, showSkeleton, imageStyle]
-  );
-
-  // Memoize fallback wrapper style
-  const fallbackWrapperStyle = useMemo(
-    () => [
-      styles.fallbackWrapper,
-      {
-        borderRadius,
-        backgroundColor: themeColors.background,
-        borderColor: themeColors.error,
-      },
-    ],
-    [borderRadius, themeColors.background, themeColors.error]
-  );
-
-  // Memoize fallback inner style
-  const fallbackInnerStyle = useMemo(
-    () => [styles.fallback, { backgroundColor: themeColors.errorContainer }],
-    [themeColors.errorContainer]
+    [showSkeleton, imageLoading, imageStyle]
   );
 
   return (
     <View style={wrapperStyle}>
-      {!showSkeleton && content_offering_type && (
+      {/* Rent/Buy */}
+      {!showSkeleton && !showFallback && content_offering_type && (
         <RentOrBuyIcon
-          theme={theme}
           key={posterUri}
           content_offering_type={content_offering_type}
+          theme={theme}
         />
       )}
+
+      {/* Skeleton */}
       {showSkeleton && (
-        <View style={skeletonWrapperStyle}>
+        <View style={[styles.absolute]}>
           <SkeletonPlaceholder
             backgroundColor={themeColors.skeletonBaseColor}
             highlightColor={themeColors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item style={skeletonItemStyle} />
+            <SkeletonPlaceholder.Item width="100%" height="100%" />
           </SkeletonPlaceholder>
         </View>
       )}
-      {hasValidPoster && (
+
+      {/* Valid Image - Render when has valid image, but keep hidden until loaded */}
+      {hasValidImage && !showFallback && (
         <FastImage
+          key={`${posterUri}-image`}
           source={imageSource}
           style={imageStyleArray}
           resizeMode={resizeMode}
-          onLoadStart={handleLoadStart}
           onLoad={handleLoad}
           onError={handleError}
         />
       )}
-      {!showSkeleton && (!hasValidPoster || imageError) && (
-        <View style={fallbackWrapperStyle}>
-          <View style={fallbackInnerStyle}>
-            <ImageOff size={scale(18)} color={themeColors.error} />
-            <Text style={styles.fallbackText} color={themeColors.error}>
-              Image Failed
+
+      {/* Fallback */}
+      {!isLoading && !showSkeleton && showFallback && (
+        <ImageFallback
+          key={`${posterUri}-fallback`}
+          errorColor={themeColors.error}
+          bg={themeColors.errorContainer}
+        />
+      )}
+
+      {/* Rank Number */}
+      {!showSkeleton && showRankNumber && (
+        <View style={styles.numberContainer}>
+          <LinearGradient
+            colors={theme.colors.backgroundLayoutGradient}
+            start={GRADIENT_START}
+            end={GRADIENT_END}
+            style={[styles.rankNumberBox]}
+          >
+            <Text
+              style={styles.rankNumberText}
+              color={theme.colors.textPrimary}
+            >
+              {rankNumber ?? ''}
             </Text>
-          </View>
+          </LinearGradient>
         </View>
       )}
     </View>
@@ -240,27 +203,23 @@ export default React.memo(CardPoster);
 
 const styles = StyleSheet.create({
   posterWrapper: {
-    width: '100%',
-    aspectRatio: 2 / 3,
     overflow: 'hidden',
     position: 'relative',
   },
-  skeletonWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
+
+  absolute: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  center: {
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  skeleton: { width: '100%', aspectRatio: 2 / 3 },
   visible: { opacity: 1 },
   hidden: { opacity: 0 },
   fallbackWrapper: {
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     borderWidth: scale(1),
     alignItems: 'center',
     justifyContent: 'center',
@@ -269,10 +228,31 @@ const styles = StyleSheet.create({
     position: 'absolute',
     top: 0,
     left: 0,
-    width: '100%',
-    aspectRatio: 2 / 3,
     alignItems: 'center',
     justifyContent: 'center',
   },
   fallbackText: { marginTop: scale(4), fontSize: 10 },
+  numberContainer: {
+    position: 'absolute',
+    bottom: -1,
+    left: 0,
+    zIndex: 10,
+  },
+  rankNumberBox: {
+    width: RANK_NUMBER_SIZE,
+    height: RANK_NUMBER_SIZE,
+    borderTopRightRadius: RANK_NUMBER_BORDER_RADIUS,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  rankNumberText: {
+    fontSize: RANK_NUMBER_TEXT_SIZE,
+    fontWeight: '900',
+    textShadowColor: 'rgba(0, 0, 0, 0.6)',
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+    marginTop: RANK_NUMBER_TEXT_MARGIN_TOP,
+    marginRight: RANK_NUMBER_TEXT_MARGIN_RIGHT,
+    letterSpacing: 0.5,
+  },
 });

package/src/components/Content/Card/components/index.ts

@@ -0,0 +1 @@
+export * from './AdsPoster';

package/src/components/Content/Content.tsx

@@ -5,6 +5,7 @@
 import React, { useMemo, useCallback } from 'react';
 import {
   ActivityIndicator,
+  Dimensions,
   FlatList,
   type FlatListProps,
   type NativeScrollEvent,
@@ -19,7 +20,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import SectionType from './Sections';
-import type { IGetSectionData, MoreFetchData } from '../../types';
+import type { IAdItem, IGetSectionData, MoreFetchData } from '../../types';
 import { dummySections } from '../../constants/dummySections';
 import CategoryCard, { type ICategory } from './Card/Category/Category';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
@@ -27,8 +28,23 @@ import type { ThemeOverride } from '../../theme/themes';
 import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
 import { useInternalTheme } from '../../theme/hook';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
 
+// Constants
+const VIEWPORT_OFFSETS = {
+  top: 140,
+  bottom: 140,
+  left: 20,
+  right: 20,
+} as const;
+
+const INITIAL_NUM_TO_RENDER = 5;
+const SCROLL_EVENT_THROTTLE = 16;
+const END_REACHED_THRESHOLD = 0.7;
+const LOADER_PADDING_VERTICAL = 30;
+const CONTENT_PADDING_BOTTOM = 100;
+
+// Types
 export interface ICustomComponentsForContent {
   type: string;
   component: React.ReactElement;
@@ -62,7 +78,7 @@ export interface IContentProps {
   theme?: ThemeOverride;
   autoSwitchTheme?: boolean;
   events?: {
-    onPressItem?: (item: IContentData) => void;
+    onPressItem?: (item: IContentData | IAdItem) => void;
     onPressMore?: (params: {
       section_id: IGetSectionData['_id'];
       name: IGetSectionData['name'];
@@ -70,6 +86,7 @@ export interface IContentProps {
     }) => void;
     activeCategory?: ICategory;
     onPressCategory?: (category: ICategory) => void;
+    onDisplayAds?: (ad: IServeAd) => void;
   };
 
   sectionProps?: {
@@ -82,9 +99,12 @@ export interface IContentProps {
   noContentFallbackProps?: NoContentFallbackProps;
 }
 
+// Animated Components
 const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
 );
+
+// Footer Component Types
 interface FooterProps {
   isEmpty: boolean;
   ErrorComponent?: React.ReactNode;
@@ -94,6 +114,7 @@ interface FooterProps {
   noContentFallbackProps?: NoContentFallbackProps;
 }
 
+// Footer Component
 const ContentFooter = React.memo(
   ({
     isEmpty,
@@ -107,7 +128,7 @@ const ContentFooter = React.memo(
 
     const loaderStyle = useMemo(
       () => ({
-        paddingVertical: scale(30),
+        paddingVertical: scale(LOADER_PADDING_VERTICAL),
         alignItems: 'center' as const,
         justifyContent: 'center' as const,
         backgroundColor: 'transparent',
@@ -144,6 +165,7 @@ const ContentFooter = React.memo(
   }
 );
 
+// Main Content Component
 export const Content: React.FC<IContentProps> = ({
   customComponents,
   InfiniteScrollLoaderComponent,
@@ -161,13 +183,15 @@ export const Content: React.FC<IContentProps> = ({
   isLoading,
   noContentFallbackProps,
 }) => {
+  // Hooks
   const insets = useSafeAreaInsets();
+
+  // Memoized Data
   const sectionData = useMemo<IGetSectionData[]>(
     () => contentData?.sectionData ?? [],
     [contentData?.sectionData]
   );
 
-  // Memoize section data object to prevent unnecessary re-renders
   const sectionDataMemo = useMemo(
     () => ({
       historyData: contentData.historyData,
@@ -176,7 +200,6 @@ export const Content: React.FC<IContentProps> = ({
     [contentData.historyData, contentData.category]
   );
 
-  // Memoize loading state object
   const loadingStateMemo = useMemo(
     () => ({
       section: isLoading?.section ?? false,
@@ -186,9 +209,23 @@ export const Content: React.FC<IContentProps> = ({
     [isLoading?.section, isLoading?.history, isLoading?.category]
   );
 
+  const screenDimensions = useMemo(() => Dimensions.get('window'), []);
+
+  const listData = useMemo(
+    () => (isLoading?.section ? dummySections : sectionData),
+    [isLoading?.section, sectionData]
+  );
+
+  const isEmpty = useMemo(
+    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
+    [isLoading?.section, sectionData]
+  );
+
+  // Header Component
   const headerComponent = useMemo(() => {
-    if (!contentData?.category || contentData.category.length === 0)
+    if (!contentData?.category || contentData.category.length === 0) {
       return null;
+    }
 
     return (
       <CategoryCard
@@ -198,7 +235,7 @@ export const Content: React.FC<IContentProps> = ({
         isLoading={isLoading?.category}
         mode="filled"
         theme={theme}
-        key={'category'}
+        key="category"
       />
     );
   }, [
@@ -209,6 +246,7 @@ export const Content: React.FC<IContentProps> = ({
     theme,
   ]);
 
+  // Render Item Callback
   const renderItem = useCallback(
     ({ item, index }: { item: IGetSectionData | null; index: number }) => {
       if (!item) return null;
@@ -241,83 +279,83 @@ export const Content: React.FC<IContentProps> = ({
           sectionProps={sectionProps}
           moreFetchDataHistory={moreFetchDataHistory}
           moreFetchData={moreFetchData}
+          onDisplayAds={events?.onDisplayAds}
+          screenDimensions={screenDimensions}
+          viewportOffsets={VIEWPORT_OFFSETS}
         />
       );
     },
     [
-      isLoading,
+      isLoading?.section,
       LoaderComponent,
       sectionDataMemo,
-      loadingStateMemo,
       theme,
       customComponents,
       events,
+      loadingStateMemo,
       sectionProps,
       moreFetchDataHistory,
       moreFetchData,
+      screenDimensions,
     ]
   );
 
-  const isEmpty = useMemo(
-    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
-    [isLoading?.section, sectionData]
-  );
-
+  // Key Extractor
   const keyExtractor = useCallback(
     (_item: IGetSectionData, index: number) => index.toString(),
     []
   );
 
+  // Handlers
   const handleEndReached = useCallback(() => {
     onEndReached?.();
   }, [onEndReached]);
 
+  // Styles
   const contentContainerStyleMemo = useMemo(
     () => [
-      { paddingBottom: verticalScale(100) + insets.bottom },
+      { paddingBottom: verticalScale(CONTENT_PADDING_BOTTOM) + insets.bottom },
       contentContainerStyle,
     ],
     [insets.bottom, contentContainerStyle]
   );
 
-  const listData = useMemo(
-    () => (isLoading?.section ? dummySections : sectionData),
-    [isLoading?.section, sectionData]
+  // Footer Component
+  const footerComponent = useMemo(
+    () => (
+      <ContentFooter
+        InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
+        InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
+        isEmpty={isEmpty}
+        ErrorComponent={ErrorComponent}
+        theme={theme}
+        noContentFallbackProps={noContentFallbackProps}
+      />
+    ),
+    [
+      InfiniteScrollLoaderComponent,
+      isLoading?.InfiniteScrollIsLoading,
+      isEmpty,
+      ErrorComponent,
+      theme,
+      noContentFallbackProps,
+    ]
   );
 
   return (
     <AnimatedFlatList
-      initialNumToRender={5}
-      showsVerticalScrollIndicator={false}
-      removeClippedSubviews
-      onScroll={onScroll as any}
-      scrollEventThrottle={16}
       data={listData}
       renderItem={renderItem as any}
       keyExtractor={keyExtractor}
+      onScroll={onScroll as any}
       onEndReached={handleEndReached}
+      onEndReachedThreshold={END_REACHED_THRESHOLD}
+      scrollEventThrottle={SCROLL_EVENT_THROTTLE}
+      initialNumToRender={INITIAL_NUM_TO_RENDER}
+      showsVerticalScrollIndicator={false}
+      removeClippedSubviews
       ListHeaderComponent={headerComponent}
-      ListFooterComponent={useMemo(
-        () => (
-          <ContentFooter
-            InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
-            InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
-            isEmpty={isEmpty}
-            ErrorComponent={ErrorComponent}
-            theme={theme}
-            noContentFallbackProps={noContentFallbackProps}
-          />
-        ),
-        [
-          InfiniteScrollLoaderComponent,
-          isLoading?.InfiniteScrollIsLoading,
-          isEmpty,
-          ErrorComponent,
-          theme,
-          noContentFallbackProps,
-        ]
-      )}
-      onEndReachedThreshold={0.7}
+      ListFooterComponent={footerComponent}
       contentContainerStyle={contentContainerStyleMemo}
     />
   );