@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

package/src/components/Content/Content.tsx

@@ -0,0 +1,338 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo, useCallback } from 'react';
+import {
+  ActivityIndicator,
+  Dimensions,
+  FlatList,
+  type FlatListProps,
+  type ListRenderItem,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import Animated from 'react-native-reanimated';
+
+import SectionType from './Sections';
+import type { IGetSectionData } from '../../types';
+import { dummySections } from '../../constants/dummySections';
+import CategoryCard from './Card/Category/Category';
+import { NoContentFallback } from '../Fallbacks';
+import { useTheme } from '../../theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { IContentProps, FooterProps } from './types';
+
+// 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
+// Re-export IContentLoading for backward compatibility
+export type { IContentLoading, IContentProps } from './types';
+
+// Animated Components
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
+);
+
+// Footer Component
+const ContentFooter = React.memo(
+  ({
+    isEmpty,
+    ErrorComponent,
+    InfiniteScrollIsLoading,
+    InfiniteScrollLoaderComponent,
+    theme,
+    noContentFallbackProps,
+  }: FooterProps) => {
+    const { theme: appliedTheme } = useTheme(theme);
+
+    const loaderStyle = useMemo(
+      () => ({
+        paddingVertical: scale(LOADER_PADDING_VERTICAL),
+        alignItems: 'center' as const,
+        justifyContent: 'center' as const,
+        backgroundColor: 'transparent',
+      }),
+      []
+    );
+
+    if (InfiniteScrollIsLoading) {
+      return (
+        InfiniteScrollLoaderComponent ?? (
+          <Animated.View style={loaderStyle}>
+            <ActivityIndicator
+              size="large"
+              color={appliedTheme.colors.primary}
+            />
+          </Animated.View>
+        )
+      );
+    }
+
+    if (isEmpty) {
+      const emptyContainerStyle = {
+        minHeight: Dimensions.get('window').height - scale(200),
+        justifyContent: 'center' as const,
+        alignItems: 'center' as const,
+      };
+
+      return ErrorComponent ? (
+        <>{ErrorComponent}</>
+      ) : (
+        <Animated.View style={emptyContainerStyle}>
+          <NoContentFallback
+            theme={theme}
+            {...noContentFallbackProps}
+            isLoading={noContentFallbackProps?.isLoading ?? false}
+          />
+        </Animated.View>
+      );
+    }
+
+    return null;
+  }
+);
+
+// Main Content Component
+export const Content: React.FC<IContentProps> = ({
+  headerStyle = 'one',
+  customHeaderComponent,
+  customComponents,
+  InfiniteScrollLoaderComponent,
+  LoaderComponent,
+  ErrorComponent,
+  onScroll,
+  contentContainerStyle,
+  contentData,
+  onEndReached,
+  theme,
+  events,
+  sectionProps,
+  moreFetchData,
+  moreFetchDataHistory,
+  isLoading,
+  checkWatchlistStatus,
+  noContentFallbackProps,
+}) => {
+  // Hooks
+  const insets = useSafeAreaInsets();
+
+  // Memoized Data
+  const sectionData = useMemo<IGetSectionData[]>(
+    () => contentData?.sectionData ?? [],
+    [contentData?.sectionData]
+  );
+
+  const sectionDataMemo = useMemo(
+    () => ({
+      historyData: contentData?.historyData,
+      category: headerStyle === 'three' ? [] : (contentData?.category ?? []),
+    }),
+    [contentData?.historyData, contentData?.category, headerStyle]
+  );
+
+  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({ headerStyle }) : sectionData),
+    [isLoading?.section, sectionData, headerStyle]
+  );
+
+  const isEmpty = useMemo(
+    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
+    [isLoading?.section, sectionData]
+  );
+
+  // Header Component
+  const headerComponent = useMemo(() => {
+    const category = contentData?.category;
+    if (headerStyle === 'three' || !category || category.length === 0) {
+      return null;
+    }
+
+    return (
+      <CategoryCard
+        category={category}
+        onPressCategory={events?.onPressCategory}
+        activeCategory={events?.activeCategory}
+        isLoading={isLoading?.category}
+        mode="filled"
+        theme={theme}
+        key="category"
+      />
+    );
+  }, [
+    contentData?.category,
+    events?.onPressCategory,
+    events?.activeCategory,
+    isLoading?.category,
+    theme,
+    headerStyle,
+  ]);
+
+  // Render Item Callback
+  const renderItem: ListRenderItem<IGetSectionData> = useCallback(
+    ({ item, index }) => {
+      if (!item) return null;
+
+      const isDummy = item?._id?.startsWith('dummy');
+      const isLoadingItem = isLoading?.section || isDummy;
+
+      if ((isDummy || isLoading?.section) && LoaderComponent) {
+        return LoaderComponent;
+      }
+
+      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}
+          checkWatchlistStatus={checkWatchlistStatus}
+          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,
+      checkWatchlistStatus,
+      loadingStateMemo,
+      sectionProps,
+      moreFetchDataHistory,
+      moreFetchData,
+      screenDimensions,
+    ]
+  );
+
+  // Key Extractor
+  const keyExtractor = useCallback(
+    (_item: IGetSectionData, index: number) => index.toString(),
+    []
+  );
+
+  // Handlers
+  const handleEndReached = useCallback(() => {
+    // Prevent multiple concurrent fetchMore calls
+    if (isLoading?.InfiniteScrollIsLoading) {
+      return;
+    }
+
+    onEndReached?.();
+  }, [onEndReached, isLoading?.InfiniteScrollIsLoading]);
+
+  // Styles
+  const contentContainerStyleMemo = useMemo(
+    () => [
+      { paddingBottom: verticalScale(CONTENT_PADDING_BOTTOM) + insets.bottom },
+      ...(isEmpty ? [{ flexGrow: 1 }] : []),
+      contentContainerStyle,
+    ],
+    [insets.bottom, isEmpty, contentContainerStyle]
+  );
+
+  // 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<
+    React.ReactElement | React.ComponentType<any> | undefined
+  >(() => {
+    if (customHeaderComponent) {
+      return <>{customHeaderComponent}</>;
+    }
+
+    return headerComponent ?? undefined;
+  }, [customHeaderComponent, headerComponent]);
+
+  return (
+    <AnimatedFlatList
+      data={listData}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      onScroll={
+        onScroll as (event: NativeSyntheticEvent<NativeScrollEvent>) => void
+      }
+      onEndReached={handleEndReached}
+      onEndReachedThreshold={END_REACHED_THRESHOLD}
+      scrollEventThrottle={SCROLL_EVENT_THROTTLE}
+      initialNumToRender={INITIAL_NUM_TO_RENDER}
+      showsVerticalScrollIndicator={false}
+      removeClippedSubviews
+      ListHeaderComponent={listHeaderComponent}
+      bounces={false}
+      ListFooterComponent={footerComponent}
+      contentContainerStyle={contentContainerStyleMemo}
+    />
+  );
+};
+
+export default React.memo(Content);
+
+export namespace Content {
+  export type Props = IContentProps;
+  export type Data = Props['contentData'];
+}

package/src/components/Content/Sections.tsx

@@ -0,0 +1,239 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useMemo } from 'react';
+import Sliders from './Card/Sliders';
+import Cards from './Card';
+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,
+    section_id: props.section_id,
+    type,
+    data: props.data?.sectionData || null,
+    index: props.index,
+    onPressItem: props.events?.onPressItem,
+    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,
+  };
+};
+
+const renderDefaultComponent = (
+  type: IGetSectionData['type'],
+  props: Omit<IProps, 'customComponents' | 'type'>
+): React.ReactNode => {
+  const commonProps = createCommonProps(type, props);
+  switch (type) {
+    case 'slider':
+      return (
+        <Sliders.Styles.One
+          {...commonProps}
+          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':
+      return <Cards.Styles.One {...commonProps} />;
+    case 'card_style_2':
+      return <Cards.Styles.Two {...commonProps} />;
+    case 'card_style_3':
+      return <Cards.Styles.Three {...commonProps} />;
+    case 'card_style_4':
+      return <Cards.Styles.Four {...commonProps} />;
+    case 'card_style_5':
+      return <Cards.Styles.Five {...commonProps} />;
+    case 'card_style_6':
+      return <Cards.Styles.Six {...commonProps} />;
+    case 'continue_watching':
+      return (
+        <Cards.Styles.NowWatching
+          {...commonProps}
+          historyData={props.data.historyData}
+          isLoadingHistory={props.isLoading?.history}
+        />
+      );
+    case 'card_rotate_in_out':
+      return <Cards.Styles.RotateCarousel {...commonProps} />;
+    case 'top_10':
+      return <Cards.Styles.TopTen {...commonProps} />;
+    default:
+      return null;
+  }
+};
+
+// ----------------------------------------
+// Sections Component
+// ----------------------------------------
+const Sections: React.FC<IProps> = ({
+  type,
+  data,
+  name,
+  customComponents = [],
+  theme,
+  index,
+  section_id,
+  events,
+  sectionProps,
+  isLoading,
+  moreFetchData,
+  moreFetchDataHistory,
+  onDisplayAds,
+  screenDimensions,
+  checkWatchlistStatus,
+  viewportOffsets,
+}) => {
+  const commonProps = useMemo(
+    () => ({ data: data.sectionData, title: name }),
+    [data.sectionData, name]
+  );
+
+  const customComponent = useMemo(
+    () => customComponents.find((c) => c.type === type),
+    [customComponents, type]
+  );
+
+  const defaultRendered = useMemo(
+    () =>
+      renderDefaultComponent(type, {
+        data,
+        name,
+        section_id,
+        index,
+        theme,
+        events,
+        checkWatchlistStatus,
+        sectionProps,
+        isLoading,
+        moreFetchData,
+        moreFetchDataHistory,
+        onDisplayAds,
+        screenDimensions,
+        viewportOffsets,
+      }),
+    [
+      type,
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      checkWatchlistStatus,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
+    ]
+  );
+
+  const filterProps = useMemo(
+    () => ({
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      checkWatchlistStatus,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
+    }),
+    [
+      data,
+      name,
+      section_id,
+      index,
+      theme,
+      events,
+      checkWatchlistStatus,
+      sectionProps,
+      isLoading,
+      moreFetchData,
+      moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
+    ]
+  );
+
+  const fallbackComponents = useMemo(
+    () =>
+      customComponents.filter(
+        ({ type: customType }) =>
+          renderDefaultComponent(
+            customType as IGetSectionData['type'],
+            filterProps
+          ) === null
+      ),
+    [customComponents, filterProps]
+  );
+
+  if (customComponent) {
+    return React.cloneElement(customComponent.component, {
+      ...(customComponent.component?.props ?? {}),
+      ...commonProps,
+    });
+  }
+
+  if (defaultRendered) return defaultRendered;
+
+  return (
+    <>
+      {fallbackComponents.map(({ component, type: key }) =>
+        React.cloneElement(component, {
+          ...(component?.props ?? {}),
+          key,
+          ...commonProps,
+        })
+      )}
+    </>
+  );
+};
+
+export default React.memo(Sections);