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

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

@@ -0,0 +1,242 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Wed 25 Jun 2025 at 05:18 PM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+  type AccessibilityProps,
+  type ListRenderItemInfo
+} from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import FastImage from 'react-native-fast-image';
+import { moderateScale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../../../theme/hook/useTheme';
+import CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme, ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+// Constants
+const DEFAULT_ITEM_WIDTH = moderateScale(105);
+const DEFAULT_ITEM_HEIGHT = moderateScale(160);
+const DEFAULT_BORDER_RADIUS = moderateScale(6);
+const DEFAULT_SKELETON_COUNT = 5;
+
+type MovieCardProps = {
+  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;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: StyleProp<TextStyle>;
+  itemStyle?: StyleProp<ViewStyle>;
+  isLoading?: boolean;
+  theme?: AppTheme;
+} & AccessibilityProps;
+
+const MovieCard: React.FC<MovieCardProps> = ({
+  title,
+  section_id,
+  type,
+  data: initialData,
+  moreFetchData,
+  onPressMore,
+  onPressItem,
+  renderItemImage,
+  itemWidth = DEFAULT_ITEM_WIDTH,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  borderRadius = DEFAULT_BORDER_RADIUS,
+  skeletonCount = DEFAULT_SKELETON_COUNT,
+  containerStyle,
+  titleStyle,
+  itemStyle,
+  isLoading = false,
+  theme,
+  accessibilityLabel,
+  accessibilityHint
+}) => {
+  const flatListRef = useRef<FlatList<IContentData>>(null);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const styles = useMemo(
+    () => getStyles(appliedTheme, itemWidth, itemHeight, borderRadius),
+    [appliedTheme, itemWidth, itemHeight, borderRadius]
+  );
+
+  const {
+    data,
+    pagination,
+    loading: isPaginating,
+    loadMoreData
+  } = usePaginatedSection(section_id, moreFetchData, initialData?.data || [], isLoading);
+
+  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);
+    }
+  }, [loadMoreData, pagination]);
+
+  const renderItem = useCallback(
+    ({ item, index }: ListRenderItemInfo<IContentData>) => {
+      return (
+        <TouchableOpacity style={[styles.item, itemStyle]} onPress={() => handleItemPress(item)} activeOpacity={0.8}>
+          {renderItemImage ? (
+            renderItemImage({ item, index })
+          ) : (
+            <CardPoster
+              posterUri={item.poster}
+              theme={appliedTheme}
+              borderRadius={borderRadius}
+              posterWrapperStyle={styles.image}
+              resizeMode={FastImage.resizeMode.cover}
+              isLoading={isLoading}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [styles.item, styles.image, itemStyle, renderItemImage, appliedTheme, borderRadius, isLoading, handleItemPress]
+  );
+
+  const renderSkeletonItem = ({ index }: { index: number }) => (
+    <SkeletonPlaceholder
+      key={`skeleton-${index}`}
+      highlightColor={appliedTheme.colors.skeletonHighlightColor}
+      backgroundColor={appliedTheme.colors.skeletonBaseColor}
+    >
+      <SkeletonPlaceholder.Item
+        width={itemWidth}
+        height={itemHeight}
+        borderRadius={borderRadius}
+        marginLeft={index === 0 ? moderateScale(12) : 0}
+        marginRight={moderateScale(12)}
+      />
+    </SkeletonPlaceholder>
+  );
+  if (!initialData) {
+    return null;
+  }
+  if (!isLoading && data.length === 0) return null;
+
+  if (isLoading) {
+    return (
+      <View style={[styles.root, containerStyle]} testID={`movie-card-skeleton-${section_id}`}>
+        <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>
+        <FlatList
+          data={Array.from({ length: skeletonCount }, () => null)}
+          horizontal
+          keyExtractor={(_, index) => `skeleton-${index}`}
+          renderItem={renderSkeletonItem}
+          showsHorizontalScrollIndicator={false}
+          contentContainerStyle={styles.listContent}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <View
+      style={[styles.root, containerStyle]}
+      testID={`movie-card-${section_id}`}
+      accessibilityLabel={accessibilityLabel || `Movie section: ${title}`}
+      accessibilityHint={accessibilityHint || 'Scroll to view movies'}
+    >
+      <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={data}
+        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({ index: 0 }) : null}
+      />
+    </View>
+  );
+};
+
+const getStyles = (theme: ITheme, width: number, height: number, radius: number) =>
+  StyleSheet.create({
+    root: {
+      marginVertical: verticalScale(6)
+    },
+    item: {
+      marginLeft: moderateScale(10)
+    },
+    image: {
+      width,
+      height,
+      borderRadius: radius,
+      backgroundColor: theme.colors.surfaceVariant
+    },
+    navigateToMoreContainer: {
+      paddingHorizontal: moderateScale(10),
+      marginBottom: verticalScale(8)
+    },
+    title: {
+      fontSize: RFValue(13),
+      fontWeight: '600'
+    },
+    listContent: {
+      paddingRight: moderateScale(15)
+    }
+  });
+
+export default memo(MovieCard);

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

@@ -0,0 +1,280 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Thu 26 Jun 2025 at 05:45 PM
+ */
+
+import React, { memo, useCallback, useMemo, useRef } from 'react';
+import {
+  View,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle
+} 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 { useTheme } from '../../../../theme/hook/useTheme';
+import CardPoster from '../components/CardPoster';
+import NavigateToMore from '../components/NavigateToMore';
+
+import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
+import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
+import type { AppTheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+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(10),
+    marginBottom: verticalScale(8)
+  },
+  title: {
+    fontSize: RFValue(13),
+    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 RotateCarousel: 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={isLoading}
+            />
+          )}
+        </TouchableOpacity>
+      );
+    },
+    [
+      styles.item,
+      styles.image,
+      styles.skeleton,
+      itemStyle,
+      onPressItem,
+      isLoading,
+      renderItemImage,
+      appliedTheme,
+      borderRadius,
+      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(RotateCarousel);