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

package/src/components/Content/types.ts

@@ -0,0 +1,180 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React from 'react';
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+import type {
+  IGetSectionData,
+  IAdItem,
+  MoreFetchData,
+  IHistoryV1,
+} from '../../types';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import type { ICategory } from './Card/Category/Category';
+import type { ThemeOverride } from '../../theme/themes';
+import type { NoContentFallbackProps } from '../Fallbacks';
+
+/**
+ * Custom component configuration for sections and content
+ */
+export interface ICustomComponent {
+  type: string;
+  component: React.ReactElement;
+}
+
+/**
+ * Loading states for content sections
+ */
+export type IContentLoading = {
+  category?: boolean;
+  history?: boolean;
+  section?: boolean;
+  InfiniteScrollIsLoading?: boolean;
+};
+
+/**
+ * Section-specific props
+ */
+export interface ISectionProps {
+  showPlayBtn?: boolean;
+}
+
+/**
+ * Viewport offsets for screen calculations
+ */
+export interface IViewportOffsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+/**
+ * Screen dimensions
+ */
+export interface IScreenDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Watchlist status checker function type
+ */
+export type ICheckWatchlistStatus = (
+  itemIds: string[]
+) => Record<string, boolean> | Promise<Record<string, boolean>>;
+
+/**
+ * Parameters for onPressMore event
+ */
+export interface IOnPressMoreParams {
+  section_id: string;
+  name: string;
+  type: IGetSectionData['type'];
+}
+
+/**
+ * Events object for content and sections
+ */
+export interface IContentEvents {
+  onPressItem?: (item: IContentData | IAdItem) => void;
+  onPressMore?: (params: IOnPressMoreParams) => void;
+  activeCategory?: ICategory;
+  onPressCategory?: (category: ICategory) => void;
+  onAdVisible?: (ad: IServeAd, percent: number) => void;
+  onDisplayAds?: (ad: IServeAd) => void;
+  onToggleWatchlist?: (
+    item: IContentData,
+    { isFavorite }: { isFavorite: boolean }
+  ) => void;
+}
+
+/**
+ * Props for the Content component
+ */
+export interface IContentProps {
+  headerStyle?: 'one' | 'two' | 'three';
+  contentData: {
+    category?: ICategory[];
+    sectionData: IGetSectionData[] | null;
+    historyData?: IHistoryV1[];
+  };
+  customHeaderComponent?: React.ReactNode;
+  customComponents?: ICustomComponent[];
+  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?: IContentEvents & {
+    onPressMore?: (params: {
+      section_id: IGetSectionData['_id'];
+      name: IGetSectionData['name'];
+      type: IGetSectionData['type'];
+    }) => void;
+  };
+  checkWatchlistStatus?: ICheckWatchlistStatus;
+  sectionProps?: ISectionProps;
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryV1>;
+  isLoading?: IContentLoading;
+
+  noContentFallbackProps?: NoContentFallbackProps;
+}
+
+/**
+ * Props for the ContentFooter component (internal use)
+ */
+export interface FooterProps {
+  isEmpty: boolean;
+  ErrorComponent?: React.ReactNode;
+  InfiniteScrollIsLoading?: boolean;
+  InfiniteScrollLoaderComponent?: React.ReactNode;
+  theme?: ThemeOverride;
+  noContentFallbackProps?: NoContentFallbackProps;
+}
+
+/**
+ * Props for the Sections component
+ */
+export interface IProps {
+  type: IGetSectionData['type'];
+  ads?: IServeAd[];
+  data: {
+    sectionData: IGetSectionData['content'] | null;
+    historyData?: IHistoryV1[];
+    category?: ICategory[];
+  };
+  name: string;
+
+  customComponents?: ICustomComponent[];
+  theme?: ThemeOverride;
+  index: number;
+  section_id: string;
+  events?: IContentEvents;
+  sectionProps?: ISectionProps;
+
+  checkWatchlistStatus?: ICheckWatchlistStatus;
+  isLoading?: IContentLoading;
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryV1>;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: IScreenDimensions;
+  viewportOffsets?: IViewportOffsets;
+}

package/src/components/ContentView/MoreContentList.tsx

@@ -0,0 +1,330 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { useCallback, useRef, useMemo } from 'react';
+import { useSkeletonItems } from '../../hooks/useSkeletonItems';
+import {
+  FlatList,
+  StyleSheet,
+  TouchableOpacity,
+  ActivityIndicator,
+  type FlatListProps,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import Display from '../../utils/Display';
+import { Text } from '../Text';
+import { View } from '../View';
+import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
+import { RFValue } from 'react-native-responsive-fontsize';
+import CardPoster from '../Content/Card/components/CardPoster';
+import type { ThemeOverride } from '../../theme/themes';
+import { useTheme } from '../../theme';
+import Animated from 'react-native-reanimated';
+import { Search } from 'lucide-react-native';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+interface Props {
+  headerProps?: AppHeaderProps;
+  contentList: IContentData[];
+  onItemPress?: (item: IContentData) => void;
+  isLoading?: boolean;
+  error?: boolean | string | Error;
+  errorText?: string;
+  theme?: ThemeOverride;
+  moreDataIsLoading?: boolean;
+  onEndReached?: () => void;
+  skeletonCount?: number;
+  numColumns?: number;
+  footerComponent?: React.ReactNode;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+}
+
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList as React.ComponentType<FlatListProps<IContentData>>
+);
+
+const MoreContentList: React.FC<Props> = React.memo(
+  ({
+    headerProps,
+    contentList = [],
+    onItemPress,
+    isLoading = false,
+    error = false,
+    errorText = 'Something went wrong!',
+    theme,
+    moreDataIsLoading = false,
+    onEndReached,
+    skeletonCount = 12,
+    numColumns = 3,
+    footerComponent,
+    refreshing = false,
+    onRefresh,
+  }) => {
+    const { theme: appliedTheme } = useTheme(theme);
+    const onEndReachedCalledDuringMomentum = useRef(false);
+
+    // Memoize computed values
+    const isEmpty = useMemo(
+      () => !isLoading && (!contentList || contentList.length === 0),
+      [isLoading, contentList]
+    );
+
+    const errorMessage = useMemo(() => {
+      if (typeof error === 'string') return error;
+      if (error instanceof Error) return error.message;
+      return errorText;
+    }, [error, errorText]);
+
+    // Memoize skeleton items
+    const skeletonItems = useSkeletonItems(skeletonCount);
+
+    // Memoize skeleton data array
+    const skeletonData = useMemo(
+      () => skeletonItems.map((_, index) => ({ _id: `skeleton-${index}` })),
+      [skeletonItems]
+    );
+
+    const keyExtractor = useCallback((item: IContentData, index: number) => {
+      return item._id?.toString() || index.toString();
+    }, []);
+
+    const renderItem = useCallback(
+      ({ item }: { item: IContentData }) => (
+        <View style={styles.cardWrapper}>
+          <TouchableOpacity
+            onPress={() => onItemPress?.(item)}
+            activeOpacity={0.7}
+          >
+            <CardPoster
+              content_offering_type={item.content_offering_type}
+              contentType={item.type}
+              posterUri={item.poster}
+              borderRadius={5}
+              isLoading={false}
+              theme={appliedTheme}
+              imageStyle={styles.itemContainer}
+            />
+          </TouchableOpacity>
+        </View>
+      ),
+      [onItemPress, appliedTheme]
+    );
+
+    const renderSkeletonItem = useCallback(
+      ({ index }: { index: number }) => (
+        <View style={styles.cardWrapper} key={`skeleton-${index}`}>
+          <CardPoster
+            posterUri=""
+            borderRadius={5}
+            isLoading={true}
+            theme={appliedTheme}
+            imageStyle={styles.itemContainer}
+          />
+        </View>
+      ),
+      [appliedTheme]
+    );
+
+    // Memoize footer component
+    const footerComponentMemo = useMemo(() => {
+      if (footerComponent) return footerComponent;
+      if (moreDataIsLoading) {
+        return (
+          <View style={styles.footerLoading}>
+            <ActivityIndicator size="small" />
+          </View>
+        );
+      }
+      return null;
+    }, [footerComponent, moreDataIsLoading]);
+
+    // Memoize onEndReached handler
+    const handleEndReached = useCallback(() => {
+      if (
+        !onEndReachedCalledDuringMomentum.current &&
+        onEndReached &&
+        !moreDataIsLoading
+      ) {
+        onEndReached();
+        onEndReachedCalledDuringMomentum.current = true;
+      }
+    }, [onEndReached, moreDataIsLoading]);
+
+    // Memoize onMomentumScrollBegin handler
+    const handleMomentumScrollBegin = useCallback(() => {
+      onEndReachedCalledDuringMomentum.current = false;
+    }, []);
+
+    // Memoize content container style
+    const contentContainerStyle = useMemo(
+      () => [
+        styles.listContent,
+        {
+          minHeight: Display.fullHeight - verticalScale(100),
+        },
+      ],
+      []
+    );
+
+    // Memoize header title style
+    const headerTitleStyle = useMemo(
+      () => StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle]),
+      [headerProps?.titleStyle]
+    );
+
+    // Memoize default right icon
+    const defaultRightIcon = useMemo(
+      () => (
+        <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
+      ),
+      [appliedTheme.colors.onBackground]
+    );
+
+    // Memoize skeleton key extractor
+    const skeletonKeyExtractor = useCallback(
+      (_: any, index: number) => `skeleton-${index}`,
+      []
+    );
+
+    // Memoize render content
+    const renderContent = useMemo(() => {
+      if (isLoading) {
+        return (
+          <FlatList
+            data={skeletonData}
+            numColumns={numColumns}
+            keyExtractor={skeletonKeyExtractor}
+            renderItem={renderSkeletonItem}
+            showsVerticalScrollIndicator={false}
+            contentContainerStyle={contentContainerStyle}
+          />
+        );
+      }
+
+      if (error) {
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.errorText}>{errorMessage}</Text>
+          </View>
+        );
+      }
+
+      if (isEmpty) {
+        return (
+          <View style={styles.centered}>
+            <Text style={styles.emptyText}>No content found</Text>
+          </View>
+        );
+      }
+
+      return (
+        <AnimatedFlatList
+          data={contentList}
+          numColumns={numColumns}
+          showsVerticalScrollIndicator={false}
+          removeClippedSubviews
+          keyExtractor={keyExtractor}
+          renderItem={renderItem}
+          initialNumToRender={6}
+          bounces={false}
+          scrollEventThrottle={16}
+          contentContainerStyle={styles.listContent}
+          ListFooterComponent={footerComponentMemo as React.ReactElement}
+          onEndReachedThreshold={0.7}
+          onEndReached={handleEndReached}
+          onMomentumScrollBegin={handleMomentumScrollBegin}
+          refreshing={refreshing}
+          onRefresh={onRefresh}
+          windowSize={5}
+          maxToRenderPerBatch={5}
+          updateCellsBatchingPeriod={50}
+        />
+      );
+    }, [
+      isLoading,
+      error,
+      isEmpty,
+      skeletonData,
+      skeletonKeyExtractor,
+      renderSkeletonItem,
+      contentContainerStyle,
+      errorMessage,
+      numColumns,
+      contentList,
+      keyExtractor,
+      renderItem,
+      footerComponentMemo,
+      handleEndReached,
+      handleMomentumScrollBegin,
+      refreshing,
+      onRefresh,
+    ]);
+
+    return (
+      <View style={styles.rootContainer}>
+        <AppHeader
+          title="More Content"
+          titleAlign="left"
+          titleStyle={headerTitleStyle}
+          onBackPress={headerProps?.onBackPress || (() => {})}
+          onRightPress={headerProps?.onRightPress || (() => {})}
+          rightIcon={headerProps?.rightIcon || defaultRightIcon}
+          theme={theme}
+          {...headerProps}
+        />
+        {renderContent}
+      </View>
+    );
+  }
+);
+
+export default MoreContentList;
+
+const styles = StyleSheet.create({
+  rootContainer: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: scale(6),
+    paddingBottom: scale(100),
+  },
+  cardWrapper: {
+    flexBasis: '33.33%',
+    maxWidth: '33.33%',
+    padding: scale(4),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  itemContainer: {
+    width: '100%',
+    aspectRatio: 2 / 3,
+    borderRadius: 5,
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: verticalScale(50),
+  },
+  errorText: {
+    fontSize: RFValue(14),
+    color: 'red',
+    fontWeight: '500',
+  },
+  emptyText: {
+    fontSize: RFValue(14),
+    fontWeight: '400',
+  },
+  headerTitle: {
+    fontSize: RFValue(15),
+    textTransform: 'capitalize',
+  },
+  footerLoading: {
+    marginTop: verticalScale(30),
+    paddingVertical: verticalScale(10),
+    alignItems: 'center',
+  },
+});