@zezosoft/zezo-ott-react-native-ui-kit 0.1.0 → 1.0.0

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

@@ -0,0 +1,247 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Sat 28 Jun 2025 at 01:00 AM
+ **/
+
+import React, { memo, useCallback, 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 { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import type { AppTheme } from '../../../../theme/themes';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+const DEFAULT_ITEM_WIDTH = moderateScale(160);
+const DEFAULT_BORDER_RADIUS = moderateScale(5);
+const DEFAULT_SKELETON_COUNT = 3;
+
+type MovieCardSixProps = {
+  theme?: AppTheme;
+  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;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+} & AccessibilityProps;
+
+const MovieCardSix: React.FC<MovieCardSixProps> = ({
+  theme,
+  title,
+  section_id,
+  type,
+  data: initialData,
+  moreFetchData,
+  onPressItem,
+  onPressMore,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const paginated = usePaginatedSection(section_id, moreFetchData, initialData?.data, isLoading);
+
+  const sectionData = paginated.data;
+  const pagination = paginated.pagination;
+  const isPaginating = paginated.loading;
+  const loadMoreData = paginated.loadMoreData;
+
+  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 (!onEndReachedCalledDuringMomentum.current && pagination?.hasNextPage && pagination?.nextPage) {
+      onEndReachedCalledDuringMomentum.current = true;
+      loadMoreData(pagination.nextPage);
+    }
+  }, [pagination?.hasNextPage, pagination?.nextPage, loadMoreData]);
+
+  const renderItem = useCallback(
+    ({ item }: ListRenderItemInfo<IContentData>) => (
+      <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+        <ThumbnailCard
+          thumbnailUri={item.thumbnail}
+          theme={appliedTheme}
+          isLoading={false}
+          borderRadius={borderRadius}
+          wrapperStyle={{ width: itemWidth }}
+          resizeMode={FastImage.resizeMode.cover}
+        />
+        <View style={{ width: itemWidth, marginTop: verticalScale(4) }}>
+          <Text style={[styles.itemTitle, { color: appliedTheme.colors.textPrimary }]} numberOfLines={1}>
+            {item.name}
+          </Text>
+        </View>
+      </TouchableOpacity>
+    ),
+    [handleItemPress, itemStyle, appliedTheme, borderRadius, itemWidth]
+  );
+
+  const renderSkeletonItem = useCallback(
+    (index: number) => (
+      <SkeletonPlaceholder
+        key={`skeleton-${index}`}
+        highlightColor={appliedTheme.colors.skeletonHighlightColor}
+        backgroundColor={appliedTheme.colors.skeletonBaseColor}
+      >
+        <SkeletonPlaceholder.Item
+          flexDirection="column"
+          alignItems="flex-start"
+          marginLeft={index === 0 ? moderateScale(12) : moderateScale(0)}
+          marginRight={moderateScale(12)}
+        >
+          {/* Thumbnail */}
+          <SkeletonPlaceholder.Item width={itemWidth} height={(itemWidth * 9) / 16} borderRadius={borderRadius} />
+
+          {/* Title */}
+          <SkeletonPlaceholder.Item
+            width={itemWidth * 0.8}
+            height={moderateScale(13)}
+            borderRadius={moderateScale(3)}
+            marginTop={verticalScale(6)}
+          />
+        </SkeletonPlaceholder.Item>
+      </SkeletonPlaceholder>
+    ),
+    [appliedTheme.colors, itemWidth, borderRadius]
+  );
+  if (!initialData) {
+    return null;
+  }
+  if (!isLoading && sectionData.length === 0) return null;
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view content'}
+    >
+      {isLoading ? (
+        <>
+          <SkeletonPlaceholder
+            highlightColor={appliedTheme.colors.skeletonHighlightColor}
+            backgroundColor={appliedTheme.colors.skeletonBaseColor}
+          >
+            <SkeletonPlaceholder.Item
+              width={moderateScale(100)}
+              height={moderateScale(20)}
+              borderRadius={moderateScale(4)}
+              marginHorizontal={moderateScale(15)}
+              marginBottom={verticalScale(6)}
+            />
+          </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 }}
+          />
+          <FlatList
+            ref={flatListRef}
+            data={sectionData}
+            horizontal
+            keyExtractor={(item, index) => `${item._id}-${index}`}
+            renderItem={renderItem}
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={5}
+            onEndReached={handleEndReached}
+            onEndReachedThreshold={0.5}
+            onScrollBeginDrag={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            onMomentumScrollBegin={() => {
+              onEndReachedCalledDuringMomentum.current = false;
+            }}
+            ListFooterComponent={isPaginating ? renderSkeletonItem(0) : null}
+          />
+        </>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  root: {
+    marginVertical: verticalScale(6)
+  },
+  item: {
+    marginLeft: moderateScale(12)
+  },
+  navigateToMoreContainer: {
+    paddingHorizontal: moderateScale(12),
+    marginBottom: verticalScale(8)
+  },
+  title: {
+    fontSize: moderateScale(14),
+    fontWeight: '600'
+  },
+  itemTitle: {
+    fontSize: moderateScale(10),
+    fontWeight: '500',
+    lineHeight: moderateScale(13),
+    height: moderateScale(13)
+  },
+  listContent: {
+    paddingRight: moderateScale(15)
+  },
+  skeletonList: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingRight: moderateScale(15)
+  }
+});
+
+export default memo(MovieCardSix);

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

@@ -0,0 +1,279 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Thu 26 Jun 2025 at 05:45 PM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  Dimensions,
+  TouchableOpacity
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+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 { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+
+import { useTheme } from '../../../../theme';
+import CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme } from '../../../../theme/themes';
+
+const { width, height } = Dimensions.get('window');
+
+const DEFAULT_ITEM_WIDTH = width * 0.42;
+const DEFAULT_ITEM_HEIGHT = height * 0.28;
+const DEFAULT_BORDER_RADIUS = moderateScale(10);
+
+// Static styles defined outside getStyles to avoid recalculation
+const staticStyles = StyleSheet.create({
+  root: {
+    marginVertical: verticalScale(6)
+  },
+  navigateToMoreContainer: {
+    paddingHorizontal: moderateScale(12),
+    marginBottom: verticalScale(8)
+  },
+  title: {
+    fontSize: moderateScale(14),
+    fontWeight: '600',
+    marginHorizontal: moderateScale(15),
+    marginVertical: moderateScale(5)
+  }
+});
+
+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;
+  renderItemImage?: (params: { item: IContentData; index: number }) => React.ReactNode;
+  itemWidth?: number;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  theme?: AppTheme;
+};
+
+const MovieCardThree: React.FC<Props> = ({
+  title,
+  section_id,
+  type,
+  data: initialData,
+  moreFetchData,
+  onPressMore,
+  onPressItem,
+  renderItemImage,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = 5,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  theme
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const carouselRef = useRef<any>(null);
+
+  // Memoized dynamic styles
+  const styles = useMemo(
+    () =>
+      StyleSheet.create({
+        item: {
+          width: itemWidth,
+          height: itemHeight,
+          borderRadius,
+          overflow: 'hidden',
+          elevation: 0,
+          shadowColor: 'transparent',
+          shadowOffset: { width: 0, height: 0 },
+          shadowOpacity: 0,
+          shadowRadius: 0
+        },
+        image: {
+          width: '100%',
+          height: '100%',
+          backgroundColor: appliedTheme.colors.skeletonBaseColor ?? '#222'
+        },
+        skeleton: {
+          width: itemWidth,
+          height: itemHeight,
+          borderRadius,
+          overflow: 'hidden',
+          marginRight: moderateScale(12)
+        }
+      }),
+    [appliedTheme.colors.skeletonBaseColor, itemWidth, itemHeight, borderRadius]
+  );
+
+  const {
+    data,
+    loading: isPaginating,
+    pagination,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+
+  // Memoized skeleton items
+  const skeletonItems = useMemo(() => {
+    const count = isLoading ? skeletonCount : isPaginating ? 1 : 0;
+    return Array.from({ length: count }, (_, i) => ({
+      _id: `skeleton-${i}`,
+      isSkeleton: true
+    }));
+  }, [isLoading, isPaginating, skeletonCount]);
+
+  // Optimized finalData to avoid unnecessary spread
+  const finalData = useMemo(
+    () => (isLoading ? skeletonItems : skeletonItems.length > 0 ? [...data, ...skeletonItems] : data),
+    [isLoading, data, skeletonItems]
+  );
+
+  // Debounced loadMoreData to prevent excessive calls
+  const debouncedLoadMore = useMemo(
+    () =>
+      debounce((nextPage: number) => {
+        return loadMoreData(nextPage);
+      }, 300),
+    [loadMoreData]
+  );
+
+  const handleItemPress = useCallback(
+    (item: IContentData) => {
+      onPressItem?.(item);
+    },
+    [onPressItem]
+  );
+
+  const handlePressMore = useCallback(() => {
+    onPressMore?.({
+      section_id,
+      name: title,
+      type
+    });
+  }, [onPressMore, section_id, title, type]);
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: IContentData | { isSkeleton: true; _id: string }; index: number }) => {
+      if ('isSkeleton' in item) {
+        return (
+          <View key={item._id} style={styles.skeleton}>
+            <SkeletonPlaceholder
+              highlightColor={appliedTheme.colors.skeletonHighlightColor}
+              backgroundColor={appliedTheme.colors.skeletonBaseColor}
+            >
+              <SkeletonPlaceholder.Item width={itemWidth} height={itemHeight} borderRadius={borderRadius} />
+            </SkeletonPlaceholder>
+          </View>
+        );
+      }
+
+      return (
+        <TouchableOpacity
+          key={item._id || `item-${index}`}
+          activeOpacity={0.8}
+          style={[styles.item, itemStyle]}
+          disabled={!item || !onPressItem || isLoading}
+          onPress={() => handleItemPress(item)}
+        >
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              posterUri={item.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isPaginating}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [
+      styles.item,
+      styles.image,
+      styles.skeleton,
+      itemStyle,
+      onPressItem,
+      isLoading,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      isPaginating,
+      itemWidth,
+      itemHeight,
+      handleItemPress
+    ]
+  );
+  if (!initialData) return null;
+  if (!isLoading && (!data || data.length === 0)) return null;
+
+  return (
+    <View style={[staticStyles.root, containerStyle]} testID={`movie-card-${section_id}`}>
+      {isLoading ? (
+        <SkeletonPlaceholder
+          highlightColor={appliedTheme.colors.skeletonHighlightColor}
+          backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        >
+          <SkeletonPlaceholder.Item
+            width={moderateScale(100)}
+            height={verticalScale(14)}
+            borderRadius={moderateScale(4)}
+            marginLeft={moderateScale(12)}
+            marginBottom={verticalScale(6)}
+          />
+        </SkeletonPlaceholder>
+      ) : (
+        <NavigateToMore
+          title={title}
+          onPress={handlePressMore}
+          titleStyle={[staticStyles.title, { color: appliedTheme.colors.textPrimary }, titleStyle]}
+          containerStyle={staticStyles.navigateToMoreContainer}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+        />
+      )}
+      <Carousel
+        ref={carouselRef}
+        data={finalData as any}
+        vertical={false}
+        renderItem={renderItem}
+        firstItem={1}
+        inactiveSlideOpacity={0.6}
+        inactiveSlideScale={0.9}
+        sliderWidth={width}
+        itemWidth={itemWidth}
+        onSnapToItem={(index) => {
+          if (isLoading || !pagination?.hasNextPage || !pagination?.nextPage) return;
+          if (index >= finalData.length - 2) {
+            debouncedLoadMore(pagination.nextPage);
+          }
+        }}
+      />
+    </View>
+  );
+};
+
+export default memo(MovieCardThree);