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

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

@@ -0,0 +1,378 @@
+/**
+ * @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,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityProps,
+  type ListRenderItemInfo,
+  ScrollView,
+} 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 { useTheme } from '../../../../theme';
+import NavigateToMore from '../components/NavigateToMore';
+import { ThumbnailCard } from '../components/ThumbnailCard';
+import { Text } from '../../../Text';
+import type { ThemeOverride } from '../../../../theme/themes';
+import type {
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../components/RentOrBuyIcon';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
+
+// Default dimensions and styling constants
+const DEFAULT_ITEM_WIDTH = moderateScale(160);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 3;
+
+// Spacing constants
+const ITEM_MARGIN_LEFT = moderateScale(10);
+const ITEM_MARGIN_TOP = verticalScale(4);
+const FIRST_SKELETON_MARGIN_LEFT = moderateScale(12);
+const SKELETON_MARGIN_RIGHT = moderateScale(12);
+const CONTAINER_PADDING_HORIZONTAL = moderateScale(10);
+const CONTAINER_MARGIN_BOTTOM = verticalScale(8);
+const ROOT_MARGIN_VERTICAL = verticalScale(6);
+const LIST_PADDING_RIGHT = moderateScale(15);
+
+// Skeleton styling constants
+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_THUMBNAIL_HEIGHT_RATIO = 9 / 16;
+const SKELETON_TEXT_WIDTH_RATIO = 0.8;
+const SKELETON_TEXT_HEIGHT = moderateScale(13);
+const SKELETON_TEXT_BORDER_RADIUS = moderateScale(3);
+const SKELETON_TEXT_MARGIN_TOP = verticalScale(6);
+
+// FlatList performance constants
+const INITIAL_NUM_TO_RENDER = 5;
+const ON_END_REACHED_THRESHOLD = 0.5;
+
+// Touchable opacity constant
+const ACTIVE_OPACITY = 0.8;
+
+type MovieCardSixProps = {
+  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;
+  itemWidth?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  paginationSkeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+} & AccessibilityProps;
+
+const MovieCardSix: React.FC<MovieCardSixProps> = ({
+  theme,
+  title,
+  section_id,
+  type,
+  data: externalData,
+  moreFetchData,
+  onPressItem,
+  onPressMore,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  accessibilityLabel,
+  accessibilityHint,
+}) => {
+  // Refs
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+
+  // Theme
+  const { theme: appliedTheme } = useTheme(theme);
+
+  // Data management using custom hook
+  const {
+    listData,
+    pagination,
+    loadMore,
+    isEmpty,
+    isPaging: isPaginating,
+  } = useCards({
+    sectionId: section_id,
+    data: externalData,
+    fetchMore: moreFetchData,
+    loading: isLoading,
+    initialSkeleton: skeletonCount,
+    pagingSkeleton: paginationSkeletonCount,
+    adsRender: false,
+  });
+
+  // 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);
+  }, [pagination, loadMore, isPaginating]);
+
+  // Generate key for FlatList items
+  const keyExtractor = useCallback(
+    (item: IContentData, index: number) => `${item._id}-${index}`,
+    []
+  );
+
+  // Render functions
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<IContentData>) => {
+      const thumbnailWrapperStyle = { width: itemWidth };
+      const titleContainerStyle = {
+        width: itemWidth,
+        marginTop: ITEM_MARGIN_TOP,
+      };
+      const titleTextStyle = {
+        color: appliedTheme.colors.textPrimary,
+      };
+
+      return (
+        <TouchableOpacity
+          style={[styles.item, itemStyle]}
+          onPress={() => handleItemPress(item)}
+          activeOpacity={ACTIVE_OPACITY}
+        >
+          <RentOrBuyIcon
+            theme={appliedTheme}
+            content_offering_type={item.content_offering_type}
+          />
+          <ThumbnailCard
+            thumbnailUri={item.thumbnail}
+            theme={appliedTheme}
+            isLoading={false}
+            borderRadius={borderRadius}
+            wrapperStyle={thumbnailWrapperStyle}
+            resizeMode={FastImage.resizeMode.cover}
+          />
+          <View style={titleContainerStyle}>
+            <Text style={[styles.itemTitle, titleTextStyle]} numberOfLines={1}>
+              {item.name}
+            </Text>
+          </View>
+        </TouchableOpacity>
+      );
+    },
+    [handleItemPress, itemStyle, appliedTheme, borderRadius, itemWidth]
+  );
+
+  const renderSkeletonItem = useCallback(
+    (index: number) => {
+      const isFirstSkeleton = index === 0;
+      const thumbnailHeight = itemWidth * SKELETON_THUMBNAIL_HEIGHT_RATIO;
+      const textWidth = itemWidth * SKELETON_TEXT_WIDTH_RATIO;
+
+      return (
+        <SkeletonPlaceholder
+          key={`skeleton-${section_id}-${index}`}
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          borderRadius={borderRadius}
+        >
+          <SkeletonPlaceholder.Item
+            flexDirection="column"
+            alignItems="flex-start"
+            marginLeft={isFirstSkeleton ? FIRST_SKELETON_MARGIN_LEFT : 0}
+            marginRight={SKELETON_MARGIN_RIGHT}
+          >
+            {/* Thumbnail */}
+            <SkeletonPlaceholder.Item
+              width={itemWidth}
+              height={thumbnailHeight}
+              borderRadius={borderRadius}
+            />
+
+            {/* Title */}
+            <SkeletonPlaceholder.Item
+              width={textWidth}
+              height={SKELETON_TEXT_HEIGHT}
+              borderRadius={SKELETON_TEXT_BORDER_RADIUS}
+              marginTop={SKELETON_TEXT_MARGIN_TOP}
+            />
+          </SkeletonPlaceholder.Item>
+        </SkeletonPlaceholder>
+      );
+    },
+    [appliedTheme.colors, itemWidth, borderRadius, section_id]
+  );
+
+  // Filter out ads to ensure only IContentData items are passed to FlatList
+  const contentData = useMemo(
+    () =>
+      listData.filter(
+        (item): item is IContentData => !('type' in item && item.type === 'ads')
+      ),
+    [listData]
+  );
+
+  // Render pagination skeleton footer
+  const renderPaginationSkeleton = useCallback(() => {
+    if (!isPaginating) {
+      return null;
+    }
+    return renderSkeletonItem(0);
+  }, [isPaginating, renderSkeletonItem]);
+
+  // Early returns for edge cases
+  if (!externalData) {
+    return null;
+  }
+
+  const shouldHideSection = !isLoading && contentData.length === 0 && !isEmpty;
+  if (shouldHideSection) {
+    return null;
+  }
+
+  // Loading skeleton state
+  if (isLoading) {
+    const skeletonDataLength = isPaginating ? 1 : skeletonCount;
+    const skeletonData = Array.from(
+      { length: skeletonDataLength },
+      (_, i) => i
+    );
+
+    return (
+      <View
+        style={[styles.root, containerStyle]}
+        accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+        accessibilityHint={accessibilityHint || 'Scroll to view content'}
+      >
+        <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}
+        >
+          {skeletonData.map((index) => renderSkeletonItem(index))}
+        </ScrollView>
+      </View>
+    );
+  }
+
+  // Main content render
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view content'}
+    >
+      <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={contentData}
+        horizontal
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.listContent}
+        initialNumToRender={INITIAL_NUM_TO_RENDER}
+        onEndReached={handleEndReached}
+        onEndReachedThreshold={ON_END_REACHED_THRESHOLD}
+        ListFooterComponent={renderPaginationSkeleton}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    marginVertical: ROOT_MARGIN_VERTICAL,
+  },
+  item: {
+    marginLeft: ITEM_MARGIN_LEFT,
+  },
+  navigateToMoreContainer: {
+    paddingHorizontal: CONTAINER_PADDING_HORIZONTAL,
+    marginBottom: CONTAINER_MARGIN_BOTTOM,
+  },
+  title: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+  itemTitle: {
+    fontSize: RFValue(9),
+    fontWeight: '500',
+    lineHeight: SKELETON_TEXT_HEIGHT,
+    height: SKELETON_TEXT_HEIGHT,
+  },
+  listContent: {
+    paddingRight: LIST_PADDING_RIGHT,
+  },
+  skeletonList: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingRight: LIST_PADDING_RIGHT,
+  },
+});
+
+export default memo(MovieCardSix);

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

@@ -0,0 +1,312 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  Dimensions,
+  TouchableOpacity,
+} from 'react-native';
+
+import FastImage from 'react-native-fast-image';
+import Carousel from 'react-native-snap-carousel';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { debounce } from 'lodash';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+import { useTheme } from '../../../../theme';
+
+import CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+import { AdsPoster } from '../components';
+
+import type {
+  IAdItem,
+  IGetSectionData,
+  ISectionContent,
+  MoreFetchData,
+} from '../../../../types';
+import type { ThemeOverride } from '../../../../theme/themes';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import { useCards } from '../../../../hooks';
+
+// Constants
+const { width, height } = Dimensions.get('window');
+const DEFAULT_ITEM_WIDTH = width * 0.4;
+const DEFAULT_ITEM_HEIGHT = height * 0.28;
+const DEFAULT_BORDER_RADIUS = moderateScale(10);
+const DEFAULT_SKELETON_COUNT = 5;
+const DEBOUNCE_DELAY = 300;
+
+// Static Styles
+const staticStyles = StyleSheet.create({
+  root: {
+    marginVertical: verticalScale(6),
+  },
+  navigateToMoreContainer: {
+    paddingHorizontal: moderateScale(10),
+    marginBottom: verticalScale(8),
+  },
+  title: {
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+});
+
+// Types
+type Props = {
+  title: string;
+  section_id: string;
+  data: ISectionContent | null;
+  type: IGetSectionData['type'];
+  moreFetchData?: MoreFetchData<IContentData>;
+  onPressItem?: (item: IContentData) => void;
+  onPressMore?: (params: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  itemWidth?: number;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  paginationSkeletonCount?: number;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  theme?: ThemeOverride;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: { width: number; height: number };
+  viewportOffsets?: {
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+  };
+};
+
+// Main Component
+const MovieCardThree: React.FC<Props> = ({
+  title,
+  section_id,
+  type,
+  data: externalData,
+  moreFetchData,
+  onPressMore,
+  onPressItem,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  paginationSkeletonCount,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = true,
+  theme,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
+}) => {
+  // Refs
+  const carouselRef = useRef<Carousel<IContentData | IAdItem> | null>(null);
+
+  // Theme
+  const { theme: appliedTheme } = useTheme(theme);
+
+  // Styles
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        item: {
+          width: itemWidth,
+          height: itemHeight,
+          borderRadius,
+          overflow: 'hidden',
+        },
+        image: {
+          width: '100%',
+          height: '100%',
+          backgroundColor: appliedTheme.colors.surfaceVariant,
+        },
+      }),
+    [appliedTheme, itemWidth, itemHeight, 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,
+  });
+
+  // Skeleton Data
+  const skeletonItems = useMemo(() => {
+    const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
+
+    if (!count) {
+      return [];
+    }
+
+    return Array.from({ length: count }, (_, index) => ({
+      _id: `skeleton-${index}`,
+      isSkeleton: true,
+    }));
+  }, [isLoading, isPaginating, skeletonCount]);
+
+  const finalData = useMemo(() => {
+    if (isLoading) {
+      return skeletonItems;
+    }
+
+    if (!skeletonItems.length) {
+      return listData;
+    }
+
+    return [...listData, ...skeletonItems];
+  }, [listData, isLoading, skeletonItems]);
+
+  // Debounced Functions
+  const debouncedLoadMore = useMemo(
+    () =>
+      debounce((nextPage: number) => {
+        loadMore(nextPage);
+      }, DEBOUNCE_DELAY),
+    [loadMore]
+  );
+
+  // Event Handlers
+  const handlePressMore = useCallback(() => {
+    onPressMore?.({ section_id, name: title, type });
+  }, [onPressMore, section_id, title, type]);
+
+  const handleSnapToItem = useCallback(
+    (index: number) => {
+      // Pagination logic
+      if (!pagination?.hasNextPage || !pagination?.nextPage) return;
+      if (index >= finalData.length - 2) {
+        debouncedLoadMore(pagination.nextPage);
+      }
+    },
+    [finalData, pagination, debouncedLoadMore]
+  );
+
+  // Render Functions
+  const renderItem = useCallback(
+    ({ item }: { item: IContentData | IAdItem }) => {
+      // 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, height: itemHeight }}
+              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]}
+          activeOpacity={0.8}
+          onPress={() => {
+            if (!isSkeleton && !isLoading) {
+              onPressItem?.(contentItem);
+            }
+          }}
+        >
+          <CardPoster
+            posterUri={item.poster}
+            content_offering_type={item.content_offering_type}
+            contentType={item.type}
+            theme={appliedTheme}
+            borderRadius={borderRadius}
+            posterWrapperStyle={styles.image}
+            resizeMode={FastImage.resizeMode.cover}
+            isLoading={isSkeleton || isLoading}
+          />
+        </TouchableOpacity>
+      );
+    },
+    [
+      appliedTheme,
+      styles,
+      itemStyle,
+      itemWidth,
+      itemHeight,
+      borderRadius,
+      isLoading,
+      onPressItem,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
+    ]
+  );
+
+  // Early Returns
+  if (!externalData) return null;
+  if (!isLoading && listData.length === 0 && !isEmpty) return null;
+
+  // Main Render
+  return (
+    <View style={[staticStyles.root, containerStyle]}>
+      <NavigateToMore
+        title={title}
+        onPress={handlePressMore}
+        titleStyle={[
+          staticStyles.title,
+          { color: appliedTheme.colors.textPrimary },
+          titleStyle,
+        ]}
+        containerStyle={staticStyles.navigateToMoreContainer}
+        showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
+        isLoading={isLoading}
+        theme={theme}
+      />
+
+      <Carousel
+        ref={carouselRef}
+        data={finalData as IContentData[]}
+        renderItem={renderItem}
+        firstItem={1}
+        sliderWidth={width}
+        itemWidth={itemWidth}
+        inactiveSlideOpacity={0.6}
+        inactiveSlideScale={0.9}
+        onSnapToItem={handleSnapToItem}
+        vertical={false}
+      />
+    </View>
+  );
+};
+
+export default memo(MovieCardThree);