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

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

@@ -3,7 +3,7 @@
  * @lastModified Wed 25 Jun 2025 at 05:40 PM
  */
 
-import React, { useState } from 'react';
+import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import type {
   ImageStyle as FastImageStyle,
@@ -17,6 +17,9 @@ import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
+// Module-level cache to track successfully loaded images
+const loadedImageCache = new Set<string>();
+
 export type ThumbnailCardProps = {
   thumbnailUri?: string;
   theme: ITheme;
@@ -39,32 +42,121 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
 
-  const hasValidThumbnail = !!thumbnailUri && thumbnailUri.startsWith('http');
-  const showSkeleton = isLoading || (imageLoading && !imageError);
+  const hasValidThumbnail = useMemo(
+    () => !!thumbnailUri && thumbnailUri.startsWith('http'),
+    [thumbnailUri]
+  );
 
-  const fallbackImageStyle: FastImageStyle = {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    borderRadius,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-  };
+  // Reset image loading state when isLoading prop changes
+  useEffect(() => {
+    if (isLoading) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [isLoading]);
+
+  // Reset when thumbnailUri changes
+  useEffect(() => {
+    if (hasValidThumbnail) {
+      // Check if this image was already loaded successfully before
+      const isAlreadyLoaded = loadedImageCache.has(thumbnailUri);
+
+      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: thumbnailUri }]);
+      }
+    } else {
+      setImageLoading(false);
+      setImageError(true);
+    }
+  }, [thumbnailUri, hasValidThumbnail]);
+
+  const showSkeleton = useMemo(
+    () => isLoading || (imageLoading && !imageError && hasValidThumbnail),
+    [isLoading, imageLoading, imageError, hasValidThumbnail]
+  );
+
+  const fallbackImageStyle = useMemo<FastImageStyle>(
+    () => ({
+      width: '100%',
+      aspectRatio: 16 / 9,
+      borderRadius,
+      position: 'absolute',
+      top: 0,
+      left: 0,
+    }),
+    [borderRadius]
+  );
+
+  const wrapperStyleMemo = useMemo(
+    () => [
+      styles.thumbnailWrapper,
+      {
+        borderRadius,
+        backgroundColor: theme.colors.background,
+        shadowColor: theme.colors.shadow,
+      },
+      wrapperStyle,
+    ],
+    [borderRadius, theme.colors.background, theme.colors.shadow, wrapperStyle]
+  );
+
+  const skeletonWrapperStyle = useMemo(
+    () => [styles.skeletonWrapper, { borderRadius }],
+    [borderRadius]
+  );
+
+  const imageStyleMemo = useMemo(
+    () => [
+      fallbackImageStyle,
+      showSkeleton ? styles.hidden : styles.visible,
+      imageStyle,
+    ],
+    [fallbackImageStyle, showSkeleton, imageStyle]
+  );
+
+  const fallbackStyle = useMemo(
+    () => [
+      styles.fallback,
+      {
+        borderRadius,
+        backgroundColor: theme.colors.errorContainer,
+        borderColor: theme.colors.error,
+      },
+    ],
+    [borderRadius, theme.colors.errorContainer, theme.colors.error]
+  );
+
+  const handleLoadStart = useCallback(() => {
+    // Only set loading if image is not already in cache
+    if (!loadedImageCache.has(thumbnailUri)) {
+      setImageLoading(true);
+      setImageError(false);
+    }
+  }, [thumbnailUri]);
+
+  const handleLoadEnd = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+    // Add to cache when successfully loaded
+    loadedImageCache.add(thumbnailUri);
+  }, [thumbnailUri]);
+
+  const handleError = useCallback(() => {
+    setImageLoading(false);
+    setImageError(true);
+  }, []);
 
   return (
-    <View
-      style={[
-        styles.thumbnailWrapper,
-        {
-          borderRadius,
-          backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow,
-        },
-        wrapperStyle,
-      ]}
-    >
+    <View style={wrapperStyleMemo}>
       {showSkeleton && (
-        <View style={[styles.skeletonWrapper, { borderRadius }]}>
+        <View style={skeletonWrapperStyle}>
           <SkeletonPlaceholder
             backgroundColor={theme.colors.skeletonBaseColor}
             highlightColor={theme.colors.skeletonHighlightColor}
@@ -79,35 +171,16 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
       {hasValidThumbnail && (
         <FastImage
           source={{ uri: thumbnailUri }}
-          style={[
-            fallbackImageStyle,
-            showSkeleton ? styles.hidden : styles.visible,
-            imageStyle,
-          ]}
+          style={imageStyleMemo}
           resizeMode={resizeMode}
-          onLoadStart={() => {
-            setImageLoading(true);
-            setImageError(false);
-          }}
-          onLoadEnd={() => setImageLoading(false)}
-          onError={() => {
-            setImageLoading(false);
-            setImageError(true);
-          }}
+          onLoadStart={handleLoadStart}
+          onLoadEnd={handleLoadEnd}
+          onError={handleError}
         />
       )}
 
       {!showSkeleton && (!hasValidThumbnail || imageError) && (
-        <View
-          style={[
-            styles.fallback,
-            {
-              borderRadius,
-              backgroundColor: theme.colors.errorContainer,
-              borderColor: theme.colors.error,
-            },
-          ]}
-        >
+        <View style={fallbackStyle}>
           <ImageOff size={scale(18)} color={theme.colors.error} />
           <Text style={styles.fallbackText} color={theme.colors.error}>
             Image Failed
@@ -118,6 +191,8 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   );
 };
 
+export default React.memo(ThumbnailCard);
+
 const styles = StyleSheet.create({
   thumbnailWrapper: {
     width: '100%',

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

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

package/src/components/Content/Content.tsx

@@ -2,9 +2,10 @@
  * @author Naresh Dhamu
  * @lastModified Sun 08 Jun 2025 at 03:50 PM
  */
-import React, { useMemo } from 'react';
+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,47 +114,58 @@ interface FooterProps {
   noContentFallbackProps?: NoContentFallbackProps;
 }
 
-const ContentFooter = ({
-  isEmpty,
-  ErrorComponent,
-  InfiniteScrollIsLoading,
-  InfiniteScrollLoaderComponent,
-  theme,
-  noContentFallbackProps,
-}: FooterProps) => {
-  const { theme: appliedTheme } = useInternalTheme(theme);
-  if (InfiniteScrollIsLoading) {
-    return (
-      InfiniteScrollLoaderComponent ?? (
-        <Animated.View
-          style={{
-            paddingVertical: scale(30),
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: 'transparent',
-          }}
-        >
-          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
-        </Animated.View>
-      )
-    );
-  }
+// Footer Component
+const ContentFooter = React.memo(
+  ({
+    isEmpty,
+    ErrorComponent,
+    InfiniteScrollIsLoading,
+    InfiniteScrollLoaderComponent,
+    theme,
+    noContentFallbackProps,
+  }: FooterProps) => {
+    const { theme: appliedTheme } = useInternalTheme(theme);
 
-  if (isEmpty) {
-    return ErrorComponent ? (
-      <>{ErrorComponent}</>
-    ) : (
-      <NoContentFallback
-        theme={theme}
-        {...noContentFallbackProps}
-        isLoading={noContentFallbackProps?.isLoading ?? false}
-      />
+    const loaderStyle = useMemo(
+      () => ({
+        paddingVertical: scale(LOADER_PADDING_VERTICAL),
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: 'transparent',
+      }),
+      []
     );
-  }
 
-  return null;
-};
+    if (InfiniteScrollIsLoading) {
+      return (
+        InfiniteScrollLoaderComponent ?? (
+          <Animated.View style={loaderStyle}>
+            <ActivityIndicator
+              size="large"
+              color={appliedTheme.colors.primary}
+            />
+          </Animated.View>
+        )
+      );
+    }
+
+    if (isEmpty) {
+      return ErrorComponent ? (
+        <>{ErrorComponent}</>
+      ) : (
+        <NoContentFallback
+          theme={theme}
+          {...noContentFallbackProps}
+          isLoading={noContentFallbackProps?.isLoading ?? false}
+        />
+      );
+    }
+
+    return null;
+  }
+);
 
+// Main Content Component
 export const Content: React.FC<IContentProps> = ({
   customComponents,
   InfiniteScrollLoaderComponent,
@@ -152,14 +183,49 @@ export const Content: React.FC<IContentProps> = ({
   isLoading,
   noContentFallbackProps,
 }) => {
+  // Hooks
   const insets = useSafeAreaInsets();
+
+  // Memoized Data
   const sectionData = useMemo<IGetSectionData[]>(
     () => contentData?.sectionData ?? [],
     [contentData?.sectionData]
   );
+
+  const sectionDataMemo = useMemo(
+    () => ({
+      historyData: contentData.historyData,
+      category: contentData.category,
+    }),
+    [contentData.historyData, contentData.category]
+  );
+
+  const loadingStateMemo = useMemo(
+    () => ({
+      section: isLoading?.section ?? false,
+      history: isLoading?.history ?? false,
+      category: isLoading?.category ?? false,
+    }),
+    [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
@@ -169,7 +235,7 @@ export const Content: React.FC<IContentProps> = ({
         isLoading={isLoading?.category}
         mode="filled"
         theme={theme}
-        key={'category'}
+        key="category"
       />
     );
   }, [
@@ -180,84 +246,123 @@ export const Content: React.FC<IContentProps> = ({
     theme,
   ]);
 
-  const renderItem = ({
-    item,
-    index,
-  }: {
-    item: IGetSectionData | null;
-    index: number;
-  }) => {
-    if (!item) return null;
+  // Render Item Callback
+  const renderItem = useCallback(
+    ({ item, index }: { item: IGetSectionData | null; index: number }) => {
+      if (!item) return null;
 
-    const isDummy = item?._id?.startsWith('dummy');
-    const isLoadingItem = isLoading?.section || isDummy;
+      const isDummy = item?._id?.startsWith('dummy');
+      const isLoadingItem = isLoading?.section || isDummy;
 
-    if ((isDummy || isLoading?.section) && LoaderComponent) {
-      return LoaderComponent;
-    }
+      if ((isDummy || isLoading?.section) && LoaderComponent) {
+        return LoaderComponent;
+      }
 
-    return (
-      <SectionType
-        key={index}
-        index={index}
-        type={item?.type || 'normal'}
-        data={{
-          sectionData: item.content || null,
-          historyData: contentData.historyData,
-          category: contentData.category,
-        }}
-        name={item?.name || `Section ${index}`}
+      return (
+        <SectionType
+          key={index}
+          index={index}
+          type={item?.type || 'normal'}
+          data={{
+            sectionData: item.content || null,
+            ...sectionDataMemo,
+          }}
+          name={item?.name || `Section ${index}`}
+          theme={theme}
+          customComponents={customComponents}
+          section_id={item?._id || index.toString()}
+          events={events}
+          isLoading={{
+            ...loadingStateMemo,
+            section: isLoadingItem,
+          }}
+          sectionProps={sectionProps}
+          moreFetchDataHistory={moreFetchDataHistory}
+          moreFetchData={moreFetchData}
+          onDisplayAds={events?.onDisplayAds}
+          screenDimensions={screenDimensions}
+          viewportOffsets={VIEWPORT_OFFSETS}
+        />
+      );
+    },
+    [
+      isLoading?.section,
+      LoaderComponent,
+      sectionDataMemo,
+      theme,
+      customComponents,
+      events,
+      loadingStateMemo,
+      sectionProps,
+      moreFetchDataHistory,
+      moreFetchData,
+      screenDimensions,
+    ]
+  );
+
+  // Key Extractor
+  const keyExtractor = useCallback(
+    (_item: IGetSectionData, index: number) => index.toString(),
+    []
+  );
+
+  // Handlers
+  const handleEndReached = useCallback(() => {
+    onEndReached?.();
+  }, [onEndReached]);
+
+  // Styles
+  const contentContainerStyleMemo = useMemo(
+    () => [
+      { paddingBottom: verticalScale(CONTENT_PADDING_BOTTOM) + insets.bottom },
+      contentContainerStyle,
+    ],
+    [insets.bottom, contentContainerStyle]
+  );
+
+  // Footer Component
+  const footerComponent = useMemo(
+    () => (
+      <ContentFooter
+        InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
+        InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
+        isEmpty={isEmpty}
+        ErrorComponent={ErrorComponent}
         theme={theme}
-        customComponents={customComponents}
-        section_id={item?._id || index.toString()}
-        events={events}
-        isLoading={{
-          section: isLoadingItem,
-          history: isLoading?.history,
-          category: isLoading?.category,
-        }}
-        sectionProps={sectionProps}
-        moreFetchDataHistory={moreFetchDataHistory}
-        moreFetchData={moreFetchData}
+        noContentFallbackProps={noContentFallbackProps}
       />
-    );
-  };
-
-  const isEmpty =
-    !isLoading?.section && (!sectionData || sectionData.length === 0);
+    ),
+    [
+      InfiniteScrollLoaderComponent,
+      isLoading?.InfiniteScrollIsLoading,
+      isEmpty,
+      ErrorComponent,
+      theme,
+      noContentFallbackProps,
+    ]
+  );
 
   return (
     <AnimatedFlatList
-      initialNumToRender={5}
+      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
-      onScroll={onScroll as any}
-      scrollEventThrottle={16}
-      data={isLoading?.section ? dummySections : sectionData}
-      renderItem={renderItem as any}
-      keyExtractor={(_item, index) => index.toString()}
-      onEndReached={() => onEndReached?.()}
       ListHeaderComponent={headerComponent}
-      ListFooterComponent={
-        <ContentFooter
-          InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
-          InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
-          isEmpty={isEmpty}
-          ErrorComponent={ErrorComponent}
-          theme={theme}
-          noContentFallbackProps={noContentFallbackProps}
-        />
-      }
-      onEndReachedThreshold={0.7}
-      contentContainerStyle={[
-        { paddingBottom: verticalScale(100) + insets.bottom },
-
-        contentContainerStyle,
-      ]}
+      ListFooterComponent={footerComponent}
+      contentContainerStyle={contentContainerStyleMemo}
     />
   );
 };
 
+export default React.memo(Content);
+
 export namespace Content {
   export type Props = IContentProps;
   export type Data = Props['contentData'];