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

package/src/components/Content/Content.tsx

@@ -5,95 +5,46 @@
 import React, { useMemo, useCallback } from 'react';
 import {
   ActivityIndicator,
+  Dimensions,
   FlatList,
   type FlatListProps,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type StyleProp,
-  type ViewStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import Animated, {
-  type AnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
 import SectionType from './Sections';
-import type { IGetSectionData, MoreFetchData } from '../../types';
+import type { IGetSectionData } from '../../types';
 import { dummySections } from '../../constants/dummySections';
-import CategoryCard, { type ICategory } from './Card/Category/Category';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ThemeOverride } from '../../theme/themes';
-import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
+import CategoryCard from './Card/Category/Category';
+import { NoContentFallback } 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 { IContentProps, FooterProps } from './types';
 
-export interface ICustomComponentsForContent {
-  type: string;
-  component: React.ReactElement;
-}
+// Constants
+const VIEWPORT_OFFSETS = {
+  top: 140,
+  bottom: 140,
+  left: 20,
+  right: 20,
+} as const;
 
-export type IContentLoading = {
-  category?: boolean;
-  history?: boolean;
-  section?: boolean;
-  InfiniteScrollIsLoading?: boolean;
-};
-export interface IContentProps {
-  contentData: {
-    category?: ICategory[];
-    sectionData: IGetSectionData[] | null;
-    historyData?: IHistoryItem[];
-  };
-  customComponents?: ICustomComponentsForContent[];
-  LoaderComponent?: React.ReactNode;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  onScroll?:
-    | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
-    | SharedValue<
-        ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined
-      >;
-  contentContainerStyle?:
-    | StyleProp<ViewStyle>
-    | AnimatedStyle<StyleProp<ViewStyle>>;
-  onEndReached?: () => void;
-  theme?: ThemeOverride;
-  autoSwitchTheme?: boolean;
-  events?: {
-    onPressItem?: (item: IContentData) => void;
-    onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
-      type: IGetSectionData['type'];
-    }) => void;
-    activeCategory?: ICategory;
-    onPressCategory?: (category: ICategory) => void;
-  };
+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;
 
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  isLoading?: IContentLoading;
-
-  noContentFallbackProps?: NoContentFallbackProps;
-}
+// Types
+// Re-export IContentLoading for backward compatibility
+export type { IContentLoading, IContentProps } from './types';
 
+// Animated Components
 const AnimatedFlatList = Animated.createAnimatedComponent(
   FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
 );
-interface FooterProps {
-  isEmpty: boolean;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollIsLoading?: boolean;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  theme?: ThemeOverride;
-  noContentFallbackProps?: NoContentFallbackProps;
-}
 
+// Footer Component
 const ContentFooter = React.memo(
   ({
     isEmpty,
@@ -107,7 +58,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,7 +95,10 @@ const ContentFooter = React.memo(
   }
 );
 
+// Main Content Component
 export const Content: React.FC<IContentProps> = ({
+  headerStyle = 'one',
+  customHeaderComponent,
   customComponents,
   InfiniteScrollLoaderComponent,
   LoaderComponent,
@@ -159,24 +113,26 @@ export const Content: React.FC<IContentProps> = ({
   moreFetchData,
   moreFetchDataHistory,
   isLoading,
+  checkWatchlistStatus,
   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,
-      category: contentData.category,
+      historyData: contentData?.historyData,
+      category: headerStyle === 'three' ? [] : (contentData?.category ?? []),
     }),
-    [contentData.historyData, contentData.category]
+    [contentData?.historyData, contentData?.category, headerStyle]
   );
 
-  // Memoize loading state object
   const loadingStateMemo = useMemo(
     () => ({
       section: isLoading?.section ?? false,
@@ -186,19 +142,34 @@ export const Content: React.FC<IContentProps> = ({
     [isLoading?.section, isLoading?.history, isLoading?.category]
   );
 
+  const screenDimensions = useMemo(() => Dimensions.get('window'), []);
+
+  const listData = useMemo(
+    () => (isLoading?.section ? dummySections({ headerStyle }) : sectionData),
+    [isLoading?.section, sectionData, headerStyle]
+  );
+
+  const isEmpty = useMemo(
+    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
+    [isLoading?.section, sectionData]
+  );
+
+  // Header Component
   const headerComponent = useMemo(() => {
-    if (!contentData?.category || contentData.category.length === 0)
+    const category = contentData?.category;
+    if (headerStyle === 'three' || !category || category.length === 0) {
       return null;
+    }
 
     return (
       <CategoryCard
-        category={contentData.category}
+        category={category}
         onPressCategory={events?.onPressCategory}
         activeCategory={events?.activeCategory}
         isLoading={isLoading?.category}
         mode="filled"
         theme={theme}
-        key={'category'}
+        key="category"
       />
     );
   }, [
@@ -207,8 +178,10 @@ export const Content: React.FC<IContentProps> = ({
     events?.activeCategory,
     isLoading?.category,
     theme,
+    headerStyle,
   ]);
 
+  // Render Item Callback
   const renderItem = useCallback(
     ({ item, index }: { item: IGetSectionData | null; index: number }) => {
       if (!item) return null;
@@ -234,6 +207,7 @@ export const Content: React.FC<IContentProps> = ({
           customComponents={customComponents}
           section_id={item?._id || index.toString()}
           events={events}
+          checkWatchlistStatus={checkWatchlistStatus}
           isLoading={{
             ...loadingStateMemo,
             section: isLoadingItem,
@@ -241,83 +215,93 @@ 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,
+      checkWatchlistStatus,
+      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,
+    ]
   );
 
+  // List Header Component - properly typed
+  const listHeaderComponent = useMemo(() => {
+    if (customHeaderComponent) {
+      return (<>{customHeaderComponent}</>) as React.ReactElement;
+    }
+    return headerComponent;
+  }, [customHeaderComponent, headerComponent]);
+
   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}
-      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}
+      onEndReachedThreshold={END_REACHED_THRESHOLD}
+      scrollEventThrottle={SCROLL_EVENT_THROTTLE}
+      initialNumToRender={INITIAL_NUM_TO_RENDER}
+      showsVerticalScrollIndicator={false}
+      removeClippedSubviews
+      ListHeaderComponent={listHeaderComponent}
+      bounces={false}
+      ListFooterComponent={footerComponent}
       contentContainerStyle={contentContainerStyleMemo}
     />
   );

package/src/components/Content/Sections.tsx

@@ -1,58 +1,29 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:50 PM
+ * @lastModified Sun 08 Jun 2025
  */
 import React, { useMemo } from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
-import type { IGetSectionData, MoreFetchData } from '../../types';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ICategory } from './Card/Category/Category';
-import type { ThemeOverride } from '../../theme/themes';
-import type { IContentLoading } from './Content';
-import type { IContentData } from '@zezosoft/zezo-ott-api-client';
-
-export interface ICustomComponentsForSections {
-  type: string;
-  component: React.ReactElement;
-}
-
-export interface IProps {
-  type: IGetSectionData['type'];
-  data: {
-    sectionData: IGetSectionData['content'] | null;
-    historyData?: IHistoryItem[];
-    category?: ICategory[];
-  };
-  name: string;
-  customComponents?: ICustomComponentsForSections[];
-  theme?: ThemeOverride;
-  index: number;
-  section_id: string;
-  events?: {
-    onPressItem?: (item: IContentData) => void;
-    onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
-      type: IGetSectionData['type'];
-    }) => void;
-    onPressCategory?: (category: ICategory) => void;
-  };
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  isLoading?: IContentLoading;
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-}
-
-// Memoized common props creator to prevent object recreation
+import type { IGetSectionData } from '../../types';
+import type { IProps } from './types';
 const createCommonProps = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
 ) => {
   const effectiveIsLoading =
     props.isLoading?.section || props.section_id === `dummy-${type}`;
+
+  const onPressMoreHandler = props.events?.onPressMore
+    ? (params: { section_id: string; name: string; type: string }) => {
+        props.events?.onPressMore?.({
+          section_id: params.section_id,
+          name: params.name,
+          type,
+        });
+      }
+    : undefined;
+
   return {
     theme: props.theme,
     title: props.name,
@@ -61,10 +32,14 @@ const createCommonProps = (
     data: props.data?.sectionData || null,
     index: props.index,
     onPressItem: props.events?.onPressItem,
-    onPressMore: props.events?.onPressMore,
+    onPressMore: onPressMoreHandler,
+    onAdVisible: props.events?.onAdVisible,
     isLoading: effectiveIsLoading,
     moreFetchDataHistory: props.moreFetchDataHistory,
     moreFetchData: props.moreFetchData,
+    onDisplayAds: props.onDisplayAds || props.events?.onDisplayAds,
+    screenDimensions: props.screenDimensions,
+    viewportOffsets: props.viewportOffsets,
   };
 };
 
@@ -81,8 +56,17 @@ const renderDefaultComponent = (
           showPlayIcon={props.sectionProps?.showPlayBtn}
         />
       );
+
     case 'slider_style_2':
       return <Sliders.Styles.Two {...commonProps} />;
+    case 'slider_style_3':
+      return (
+        <Sliders.Styles.Three
+          {...commonProps}
+          checkWatchlistStatus={props.checkWatchlistStatus}
+          onToggleWatchlist={props.events?.onToggleWatchlist}
+        />
+      );
     case 'normal':
       return <Cards.Styles.One {...commonProps} />;
     case 'new_releases':
@@ -114,6 +98,9 @@ const renderDefaultComponent = (
   }
 };
 
+// ----------------------------------------
+// Sections Component
+// ----------------------------------------
 const Sections: React.FC<IProps> = ({
   type,
   data,
@@ -127,6 +114,10 @@ const Sections: React.FC<IProps> = ({
   isLoading,
   moreFetchData,
   moreFetchDataHistory,
+  onDisplayAds,
+  screenDimensions,
+  checkWatchlistStatus,
+  viewportOffsets,
 }) => {
   const commonProps = useMemo(
     () => ({ data: data.sectionData, title: name }),
@@ -147,10 +138,14 @@ const Sections: React.FC<IProps> = ({
         index,
         theme,
         events,
+        checkWatchlistStatus,
         sectionProps,
         isLoading,
         moreFetchData,
         moreFetchDataHistory,
+        onDisplayAds,
+        screenDimensions,
+        viewportOffsets,
       }),
     [
       type,
@@ -160,14 +155,17 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );
 
-  // Memoize props object to avoid recreating in filter
   const filterProps = useMemo(
     () => ({
       data,
@@ -176,10 +174,14 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     }),
     [
       data,
@@ -188,10 +190,14 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );