@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 1.1.6

package/src/components/Content/Card/components/ThumbnailCard.tsx

@@ -1,234 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Wed 25 Jun 2025 at 05:40 PM
- */
-
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import type {
-  ImageStyle as FastImageStyle,
-  ResizeMode,
-} from 'react-native-fast-image';
-import FastImage from 'react-native-fast-image';
-import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import { scale } from 'react-native-size-matters';
-import { Text } from '../../../Text';
-import { ImageOff } from 'lucide-react-native';
-import type { ITheme } from '../../../../theme/themes';
-import { RFValue } from 'react-native-responsive-fontsize';
-
-// Module-level cache to track successfully loaded images
-const loadedImageCache = new Set<string>();
-
-export type ThumbnailCardProps = {
-  thumbnailUri?: string;
-  theme: ITheme;
-  isLoading?: boolean;
-  borderRadius?: number;
-  wrapperStyle?: StyleProp<ViewStyle>;
-  imageStyle?: FastImageStyle;
-  resizeMode?: ResizeMode;
-};
-
-export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
-  thumbnailUri = '',
-  theme,
-  isLoading = false,
-  borderRadius = 0,
-  wrapperStyle,
-  imageStyle,
-  resizeMode = FastImage.resizeMode.cover,
-}) => {
-  const [imageLoading, setImageLoading] = useState(true);
-  const [imageError, setImageError] = useState(false);
-
-  const hasValidThumbnail = useMemo(
-    () => !!thumbnailUri && thumbnailUri.startsWith('http'),
-    [thumbnailUri]
-  );
-
-  // Reset image loading state when isLoading prop changes
-  useEffect(() => {
-    if (isLoading) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [isLoading]);
-
-  // Reset when thumbnailUri changes
-  useEffect(() => {
-    if (hasValidThumbnail) {
-      // Check if this image was already loaded successfully before
-      const isAlreadyLoaded = loadedImageCache.has(thumbnailUri);
-
-      if (isAlreadyLoaded) {
-        // Image was loaded before, skip loading state
-        setImageLoading(false);
-        setImageError(false);
-      } else {
-        // Image not loaded before, show loading
-        setImageLoading(true);
-        setImageError(false);
-        FastImage.preload([{ uri: thumbnailUri }]);
-      }
-    } else {
-      setImageLoading(false);
-      setImageError(true);
-    }
-  }, [thumbnailUri, hasValidThumbnail]);
-
-  const showSkeleton = useMemo(
-    () => isLoading || (imageLoading && !imageError && hasValidThumbnail),
-    [isLoading, imageLoading, imageError, hasValidThumbnail]
-  );
-
-  const fallbackImageStyle = useMemo<FastImageStyle>(
-    () => ({
-      width: '100%',
-      aspectRatio: 16 / 9,
-      borderRadius,
-      position: 'absolute',
-      top: 0,
-      left: 0,
-    }),
-    [borderRadius]
-  );
-
-  const wrapperStyleMemo = useMemo(
-    () => [
-      styles.thumbnailWrapper,
-      {
-        borderRadius,
-        backgroundColor: theme.colors.background,
-        shadowColor: theme.colors.shadow,
-      },
-      wrapperStyle,
-    ],
-    [borderRadius, theme.colors.background, theme.colors.shadow, wrapperStyle]
-  );
-
-  const skeletonWrapperStyle = useMemo(
-    () => [styles.skeletonWrapper, { borderRadius }],
-    [borderRadius]
-  );
-
-  const imageStyleMemo = useMemo(
-    () => [
-      fallbackImageStyle,
-      showSkeleton ? styles.hidden : styles.visible,
-      imageStyle,
-    ],
-    [fallbackImageStyle, showSkeleton, imageStyle]
-  );
-
-  const fallbackStyle = useMemo(
-    () => [
-      styles.fallback,
-      {
-        borderRadius,
-        backgroundColor: theme.colors.errorContainer,
-        borderColor: theme.colors.error,
-      },
-    ],
-    [borderRadius, theme.colors.errorContainer, theme.colors.error]
-  );
-
-  const handleLoadStart = useCallback(() => {
-    // Only set loading if image is not already in cache
-    if (!loadedImageCache.has(thumbnailUri)) {
-      setImageLoading(true);
-      setImageError(false);
-    }
-  }, [thumbnailUri]);
-
-  const handleLoadEnd = useCallback(() => {
-    setImageLoading(false);
-    setImageError(false);
-    // Add to cache when successfully loaded
-    loadedImageCache.add(thumbnailUri);
-  }, [thumbnailUri]);
-
-  const handleError = useCallback(() => {
-    setImageLoading(false);
-    setImageError(true);
-  }, []);
-
-  return (
-    <View style={wrapperStyleMemo}>
-      {showSkeleton && (
-        <View style={skeletonWrapperStyle}>
-          <SkeletonPlaceholder
-            backgroundColor={theme.colors.skeletonBaseColor}
-            highlightColor={theme.colors.skeletonHighlightColor}
-          >
-            <SkeletonPlaceholder.Item
-              style={[styles.skeleton, { borderRadius }]}
-            />
-          </SkeletonPlaceholder>
-        </View>
-      )}
-
-      {hasValidThumbnail && (
-        <FastImage
-          source={{ uri: thumbnailUri }}
-          style={imageStyleMemo}
-          resizeMode={resizeMode}
-          onLoadStart={handleLoadStart}
-          onLoadEnd={handleLoadEnd}
-          onError={handleError}
-        />
-      )}
-
-      {!showSkeleton && (!hasValidThumbnail || imageError) && (
-        <View style={fallbackStyle}>
-          <ImageOff size={scale(18)} color={theme.colors.error} />
-          <Text style={styles.fallbackText} color={theme.colors.error}>
-            Image Failed
-          </Text>
-        </View>
-      )}
-    </View>
-  );
-};
-
-export default React.memo(ThumbnailCard);
-
-const styles = StyleSheet.create({
-  thumbnailWrapper: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  skeletonWrapper: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 16 / 9,
-    overflow: 'hidden',
-  },
-  skeleton: {
-    width: '100%',
-    aspectRatio: 16 / 9,
-  },
-  visible: {
-    opacity: 1,
-  },
-  hidden: {
-    opacity: 0,
-  },
-  fallback: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    width: '100%',
-    aspectRatio: 16 / 9,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fallbackText: {
-    marginTop: scale(4),
-    fontSize: RFValue(9),
-  },
-});

package/src/components/Content/Card/components/index.ts

@@ -1 +0,0 @@
-export * from './AdsPoster';

package/src/components/Content/Card/index.ts

@@ -1,30 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @LastModified Sun 08 Jun 2025 at 03:49 PM
- */
-import StyleOne from './Styles/One';
-import TopTen from './Styles/TopTen';
-import StyleTwo from './Styles/Two';
-import StyleThree from './Styles/Three';
-import StyleFour from './Styles/Four';
-import StyleFive from './Styles/Five';
-import StyleSix from './Styles/Six';
-import NowWatching from './NowWatching/NowWatching';
-import RotateCarousel from './Styles/RotateInOut';
-import CategoryCard from './Category/Category';
-const Cards = {
-  Styles: {
-    One: StyleOne,
-    Two: StyleTwo,
-    Three: StyleThree,
-    Four: StyleFour,
-    Five: StyleFive,
-    Six: StyleSix,
-    TopTen: TopTen,
-    RotateCarousel,
-    NowWatching,
-    Category: CategoryCard,
-  },
-};
-
-export default Cards;

package/src/components/Content/Content.tsx

@@ -1,369 +0,0 @@
-/**
- * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:50 PM
- */
-import React, { useMemo, useCallback } from 'react';
-import {
-  ActivityIndicator,
-  Dimensions,
-  FlatList,
-  type FlatListProps,
-  type NativeScrollEvent,
-  type NativeSyntheticEvent,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
-import Animated, {
-  type AnimatedStyle,
-  type SharedValue,
-} from 'react-native-reanimated';
-
-import SectionType from './Sections';
-import type { IAdItem, IGetSectionData, MoreFetchData } from '../../types';
-import { dummySections } from '../../constants/dummySections';
-import CategoryCard, { type ICategory } from './Card/Category/Category';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ThemeOverride } from '../../theme/themes';
-import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
-import { useInternalTheme } from '../../theme/hook';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
-
-// Constants
-const VIEWPORT_OFFSETS = {
-  top: 140,
-  bottom: 140,
-  left: 20,
-  right: 20,
-} as const;
-
-const INITIAL_NUM_TO_RENDER = 5;
-const SCROLL_EVENT_THROTTLE = 16;
-const END_REACHED_THRESHOLD = 0.7;
-const LOADER_PADDING_VERTICAL = 30;
-const CONTENT_PADDING_BOTTOM = 100;
-
-// Types
-export interface ICustomComponentsForContent {
-  type: string;
-  component: React.ReactElement;
-}
-
-export type IContentLoading = {
-  category?: boolean;
-  history?: boolean;
-  section?: boolean;
-  InfiniteScrollIsLoading?: boolean;
-};
-export interface IContentProps {
-  contentData: {
-    category?: ICategory[];
-    sectionData: IGetSectionData[] | null;
-    historyData?: IHistoryItem[];
-  };
-  customComponents?: ICustomComponentsForContent[];
-  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?: {
-    onPressItem?: (item: IContentData | IAdItem) => void;
-    onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
-      type: IGetSectionData['type'];
-    }) => void;
-    activeCategory?: ICategory;
-    onPressCategory?: (category: ICategory) => void;
-    onDisplayAds?: (ad: IServeAd) => void;
-  };
-
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  isLoading?: IContentLoading;
-
-  noContentFallbackProps?: NoContentFallbackProps;
-}
-
-// Animated Components
-const AnimatedFlatList = Animated.createAnimatedComponent(
-  FlatList as React.ComponentType<FlatListProps<IGetSectionData>>
-);
-
-// Footer Component Types
-interface FooterProps {
-  isEmpty: boolean;
-  ErrorComponent?: React.ReactNode;
-  InfiniteScrollIsLoading?: boolean;
-  InfiniteScrollLoaderComponent?: React.ReactNode;
-  theme?: ThemeOverride;
-  noContentFallbackProps?: NoContentFallbackProps;
-}
-
-// Footer Component
-const ContentFooter = React.memo(
-  ({
-    isEmpty,
-    ErrorComponent,
-    InfiniteScrollIsLoading,
-    InfiniteScrollLoaderComponent,
-    theme,
-    noContentFallbackProps,
-  }: FooterProps) => {
-    const { theme: appliedTheme } = useInternalTheme(theme);
-
-    const loaderStyle = useMemo(
-      () => ({
-        paddingVertical: scale(LOADER_PADDING_VERTICAL),
-        alignItems: 'center' as const,
-        justifyContent: 'center' as const,
-        backgroundColor: 'transparent',
-      }),
-      []
-    );
-
-    if (InfiniteScrollIsLoading) {
-      return (
-        InfiniteScrollLoaderComponent ?? (
-          <Animated.View style={loaderStyle}>
-            <ActivityIndicator
-              size="large"
-              color={appliedTheme.colors.primary}
-            />
-          </Animated.View>
-        )
-      );
-    }
-
-    if (isEmpty) {
-      return ErrorComponent ? (
-        <>{ErrorComponent}</>
-      ) : (
-        <NoContentFallback
-          theme={theme}
-          {...noContentFallbackProps}
-          isLoading={noContentFallbackProps?.isLoading ?? false}
-        />
-      );
-    }
-
-    return null;
-  }
-);
-
-// Main Content Component
-export const Content: React.FC<IContentProps> = ({
-  customComponents,
-  InfiniteScrollLoaderComponent,
-  LoaderComponent,
-  ErrorComponent,
-  onScroll,
-  contentContainerStyle,
-  contentData,
-  onEndReached,
-  theme,
-  events,
-  sectionProps,
-  moreFetchData,
-  moreFetchDataHistory,
-  isLoading,
-  noContentFallbackProps,
-}) => {
-  // Hooks
-  const insets = useSafeAreaInsets();
-
-  // Memoized Data
-  const sectionData = useMemo<IGetSectionData[]>(
-    () => contentData?.sectionData ?? [],
-    [contentData?.sectionData]
-  );
-
-  const sectionDataMemo = useMemo(
-    () => ({
-      historyData: contentData.historyData,
-      category: contentData.category,
-    }),
-    [contentData.historyData, contentData.category]
-  );
-
-  const loadingStateMemo = useMemo(
-    () => ({
-      section: isLoading?.section ?? false,
-      history: isLoading?.history ?? false,
-      category: isLoading?.category ?? false,
-    }),
-    [isLoading?.section, isLoading?.history, isLoading?.category]
-  );
-
-  const screenDimensions = useMemo(() => Dimensions.get('window'), []);
-
-  const listData = useMemo(
-    () => (isLoading?.section ? dummySections : sectionData),
-    [isLoading?.section, sectionData]
-  );
-
-  const isEmpty = useMemo(
-    () => !isLoading?.section && (!sectionData || sectionData.length === 0),
-    [isLoading?.section, sectionData]
-  );
-
-  // Header Component
-  const headerComponent = useMemo(() => {
-    if (!contentData?.category || contentData.category.length === 0) {
-      return null;
-    }
-
-    return (
-      <CategoryCard
-        category={contentData.category}
-        onPressCategory={events?.onPressCategory}
-        activeCategory={events?.activeCategory}
-        isLoading={isLoading?.category}
-        mode="filled"
-        theme={theme}
-        key="category"
-      />
-    );
-  }, [
-    contentData?.category,
-    events?.onPressCategory,
-    events?.activeCategory,
-    isLoading?.category,
-    theme,
-  ]);
-
-  // Render Item Callback
-  const renderItem = useCallback(
-    ({ item, index }: { item: IGetSectionData | null; index: number }) => {
-      if (!item) return null;
-
-      const isDummy = item?._id?.startsWith('dummy');
-      const isLoadingItem = isLoading?.section || isDummy;
-
-      if ((isDummy || isLoading?.section) && LoaderComponent) {
-        return LoaderComponent;
-      }
-
-      return (
-        <SectionType
-          key={index}
-          index={index}
-          type={item?.type || 'normal'}
-          data={{
-            sectionData: item.content || null,
-            ...sectionDataMemo,
-          }}
-          name={item?.name || `Section ${index}`}
-          theme={theme}
-          customComponents={customComponents}
-          section_id={item?._id || index.toString()}
-          events={events}
-          isLoading={{
-            ...loadingStateMemo,
-            section: isLoadingItem,
-          }}
-          sectionProps={sectionProps}
-          moreFetchDataHistory={moreFetchDataHistory}
-          moreFetchData={moreFetchData}
-          onDisplayAds={events?.onDisplayAds}
-          screenDimensions={screenDimensions}
-          viewportOffsets={VIEWPORT_OFFSETS}
-        />
-      );
-    },
-    [
-      isLoading?.section,
-      LoaderComponent,
-      sectionDataMemo,
-      theme,
-      customComponents,
-      events,
-      loadingStateMemo,
-      sectionProps,
-      moreFetchDataHistory,
-      moreFetchData,
-      screenDimensions,
-    ]
-  );
-
-  // Key Extractor
-  const keyExtractor = useCallback(
-    (_item: IGetSectionData, index: number) => index.toString(),
-    []
-  );
-
-  // Handlers
-  const handleEndReached = useCallback(() => {
-    onEndReached?.();
-  }, [onEndReached]);
-
-  // Styles
-  const contentContainerStyleMemo = useMemo(
-    () => [
-      { paddingBottom: verticalScale(CONTENT_PADDING_BOTTOM) + insets.bottom },
-      contentContainerStyle,
-    ],
-    [insets.bottom, contentContainerStyle]
-  );
-
-  // Footer Component
-  const footerComponent = useMemo(
-    () => (
-      <ContentFooter
-        InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
-        InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
-        isEmpty={isEmpty}
-        ErrorComponent={ErrorComponent}
-        theme={theme}
-        noContentFallbackProps={noContentFallbackProps}
-      />
-    ),
-    [
-      InfiniteScrollLoaderComponent,
-      isLoading?.InfiniteScrollIsLoading,
-      isEmpty,
-      ErrorComponent,
-      theme,
-      noContentFallbackProps,
-    ]
-  );
-
-  return (
-    <AnimatedFlatList
-      data={listData}
-      renderItem={renderItem as any}
-      keyExtractor={keyExtractor}
-      onScroll={onScroll as any}
-      onEndReached={handleEndReached}
-      onEndReachedThreshold={END_REACHED_THRESHOLD}
-      scrollEventThrottle={SCROLL_EVENT_THROTTLE}
-      initialNumToRender={INITIAL_NUM_TO_RENDER}
-      showsVerticalScrollIndicator={false}
-      removeClippedSubviews
-      ListHeaderComponent={headerComponent}
-      ListFooterComponent={footerComponent}
-      contentContainerStyle={contentContainerStyleMemo}
-    />
-  );
-};
-
-export default React.memo(Content);
-
-export namespace Content {
-  export type Props = IContentProps;
-  export type Data = Props['contentData'];
-}