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

package/src/components/Content/Card/Styles/Five.tsx

@@ -0,0 +1,367 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityProps,
+} from 'react-native';
+
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import FastImage from 'react-native-fast-image';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+import { AdsPoster } from '../components';
+import { useTheme } from '../../../../theme';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
+import type {
+  IAdItem,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
+
+// Constants
+const DEFAULT_ITEM_WIDTH = moderateScale(140);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 3;
+const ASPECT_RATIO = 0.67;
+const END_REACHED_THRESHOLD = 0.5;
+const ITEM_ACTIVE_OPACITY = 0.8;
+const INITIAL_NUM_TO_RENDER = 5;
+const SKELETON_TITLE_WIDTH = moderateScale(100);
+const SKELETON_TITLE_HEIGHT = moderateScale(20);
+const SKELETON_TITLE_BORDER_RADIUS = moderateScale(4);
+const SKELETON_TITLE_MARGIN_HORIZONTAL = moderateScale(15);
+const SKELETON_TITLE_MARGIN_BOTTOM = verticalScale(6);
+const SKELETON_ITEM_MARGIN_LEFT = moderateScale(12);
+const SKELETON_ITEM_MARGIN_RIGHT = moderateScale(12);
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const ITEM_MARGIN_BOTTOM = verticalScale(2);
+const LIST_CONTENT_PADDING_RIGHT = moderateScale(15);
+const SKELETON_LIST_PADDING_RIGHT = moderateScale(15);
+
+// Types
+type MovieCardFiveProps = {
+  theme?: ThemeOverride;
+  title: string;
+  section_id: string;
+  type: IGetSectionData['type'];
+  data: ISectionContent | null;
+  moreFetchData?: MoreFetchData<IContentData>;
+  onPressItem?: (item: IContentData) => void;
+  onPressMore?: (params: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
+  itemWidth?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  paginationSkeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: { width: number; height: number };
+  viewportOffsets?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+} & AccessibilityProps;
+
+// Main Component
+const MovieCardFive: React.FC<MovieCardFiveProps> = ({
+  theme,
+  title,
+  section_id,
+  type,
+  data: externalData,
+  moreFetchData,
+  onPressItem,
+  onPressMore,
+  renderItemImage,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  accessibilityLabel,
+  accessibilityHint,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
+}) => {
+  // Refs
+  const flatListRef = useRef<FlatList<IContentData | IAdItem>>(null);
+
+  // Theme
+  const { theme: appliedTheme } = useTheme(theme);
+
+  // Styles
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, borderRadius),
+    [appliedTheme, itemWidth, borderRadius]
+  );
+
+  // Data Management
+  const {
+    listData,
+    pagination,
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: true,
+  });
+
+  // Event Handlers
+  const handleItemPress = useCallback(
+    (item: IContentData) => onPressItem?.(item),
+    [onPressItem]
+  );
+
+  const handlePressMore = useCallback(() => {
+    onPressMore?.({ section_id, name: title, type });
+  }, [onPressMore, section_id, title, type]);
+
+  const handleEndReached = useCallback(() => {
+    if (isPaginating || !pagination?.hasNextPage || !pagination?.nextPage) {
+      return;
+    }
+
+    loadMore(pagination.nextPage);
+  }, [loadMore, pagination, isPaginating]);
+
+  // Render Functions
+  const renderItem = useCallback(
+    ({ item, index }: { item: IContentData | IAdItem; index: number }) => {
+      // Handle ads
+      if ('type' in item && item.type === 'ads') {
+        const adItem = item as IAdItem;
+        return (
+          <View style={[styles.item, itemStyle]}>
+            <AdsPoster
+              ad={adItem}
+              theme={appliedTheme}
+              isLoading={isLoading}
+              containerStyle={{ width: itemWidth, aspectRatio: ASPECT_RATIO }}
+              imageStyle={styles.image}
+              borderRadius={borderRadius}
+              onDisplayAds={onDisplayAds}
+              screenDimensions={screenDimensions}
+              viewportOffsets={viewportOffsets}
+            />
+          </View>
+        );
+      }
+      // Handle content items
+      const contentItem = item as IContentData;
+      const isSkeleton =
+        contentItem._id?.startsWith?.('pagination-skeleton') ?? false;
+
+      return (
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              handleItemPress(contentItem);
+            }
+          }}
+          activeOpacity={ITEM_ACTIVE_OPACITY}
+        >
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              content_offering_type={contentItem.content_offering_type}
+              contentType={contentItem.type}
+              posterUri={contentItem.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isSkeleton || isLoading}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [
+      styles.item,
+      styles.image,
+      itemStyle,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      isLoading,
+      handleItemPress,
+      itemWidth,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
+    ]
+  );
+
+  const renderSkeletonItem = useCallback(
+    ({ index }: { index: number }) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${section_id}-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          width={itemWidth}
+          aspectRatio={ASPECT_RATIO}
+          borderRadius={borderRadius}
+          marginLeft={index === 0 ? SKELETON_ITEM_MARGIN_LEFT : 0}
+          marginRight={SKELETON_ITEM_MARGIN_RIGHT}
+        />
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme, itemWidth, borderRadius, section_id]
+  );
+
+  const keyExtractor = useCallback(
+    (item: IContentData | IAdItem, index: number) => {
+      return '_id' in item ? item._id : `ad-${index}`;
+    },
+    []
+  );
+
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Main Render
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view movies'}
+    >
+      {isLoading ? (
+        <>
+          <SkeletonPlaceholder
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          >
+            <SkeletonPlaceholder.Item
+              width={SKELETON_TITLE_WIDTH}
+              height={SKELETON_TITLE_HEIGHT}
+              borderRadius={SKELETON_TITLE_BORDER_RADIUS}
+              marginHorizontal={SKELETON_TITLE_MARGIN_HORIZONTAL}
+              marginBottom={SKELETON_TITLE_MARGIN_BOTTOM}
+            />
+          </SkeletonPlaceholder>
+
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.skeletonList}
+          >
+            {Array.from({
+              length: isPaginating ? 1 : skeletonCount,
+            }).map((_, index) => renderSkeletonItem({ index }))}
+          </ScrollView>
+        </>
+      ) : (
+        <>
+          <NavigateToMore
+            title={title}
+            onPress={handlePressMore}
+            titleStyle={[
+              styles.title,
+              { color: appliedTheme.colors.textPrimary },
+              titleStyle,
+            ]}
+            containerStyle={styles.navigateToMoreContainer}
+            showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
+          />
+
+          <FlatList
+            ref={flatListRef}
+            data={listData}
+            horizontal
+            keyExtractor={keyExtractor}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={INITIAL_NUM_TO_RENDER}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={END_REACHED_THRESHOLD}
+            ListFooterComponent={
+              isPaginating ? renderSkeletonItem({ index: 0 }) : undefined
+            }
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+// Styles
+const getStyles = (theme: ITheme, width: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6),
+    },
+    item: {
+      marginLeft: ITEM_MARGIN_LEFT,
+      marginBottom: ITEM_MARGIN_BOTTOM,
+    },
+    image: {
+      width,
+      aspectRatio: ASPECT_RATIO,
+      borderRadius: radius,
+      backgroundColor: theme.colors.surfaceVariant,
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(10),
+      marginBottom: verticalScale(8),
+    },
+    title: {
+      fontSize: RFValue(13),
+      fontWeight: '600',
+    },
+    listContent: {
+      paddingRight: LIST_CONTENT_PADDING_RIGHT,
+    },
+    skeletonList: {
+      flexDirection: 'row',
+      alignItems: 'flex-start',
+      paddingRight: SKELETON_LIST_PADDING_RIGHT,
+    },
+  });
+
+export default memo(MovieCardFive);