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

package/src/components/Content/Sections.tsx

@@ -5,57 +5,8 @@
 import React, { useMemo } from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
-import type { IGetSectionData, MoreFetchData, IAdItem } from '../../types';
-import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { ICategory } from './Card/Category/Category';
-import type { ThemeOverride } from '../../theme/themes';
-import type { IContentLoading } from './Content';
-import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
-
-export interface ICustomComponentsForSections {
-  type: string;
-  component: React.ReactElement;
-}
-
-export interface IProps {
-  type: IGetSectionData['type'];
-  ads?: IServeAd[];
-  data: {
-    sectionData: IGetSectionData['content'] | null;
-    historyData?: IHistoryItem[];
-    category?: ICategory[];
-  };
-  name: string;
-  customComponents?: ICustomComponentsForSections[];
-  theme?: ThemeOverride;
-  index: number;
-  section_id: string;
-  events?: {
-    onPressItem?: (item: IContentData | IAdItem) => void;
-    onPressMore?: (params: {
-      section_id: string;
-      name: string;
-      type: IGetSectionData['type'];
-    }) => void;
-    onPressCategory?: (category: ICategory) => void;
-    onAdVisible?: (ad: IServeAd, percent: number) => void;
-    onDisplayAds?: (ad: IServeAd) => void;
-  };
-  sectionProps?: {
-    showPlayBtn?: boolean;
-  };
-  isLoading?: IContentLoading;
-  moreFetchData?: MoreFetchData<IContentData>;
-  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  onDisplayAds?: (ad: IServeAd) => void;
-  screenDimensions?: { width: number; height: number };
-  viewportOffsets?: {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-  };
-}
+import type { IGetSectionData } from '../../types';
+import type { IProps } from './types';
 const createCommonProps = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
@@ -105,8 +56,17 @@ const renderDefaultComponent = (
           showPlayIcon={props.sectionProps?.showPlayBtn}
         />
       );
+
     case 'slider_style_2':
       return <Sliders.Styles.Two {...commonProps} />;
+    case 'slider_style_3':
+      return (
+        <Sliders.Styles.Three
+          {...commonProps}
+          checkWatchlistStatus={props.checkWatchlistStatus}
+          onToggleWatchlist={props.events?.onToggleWatchlist}
+        />
+      );
     case 'normal':
       return <Cards.Styles.One {...commonProps} />;
     case 'new_releases':
@@ -156,6 +116,7 @@ const Sections: React.FC<IProps> = ({
   moreFetchDataHistory,
   onDisplayAds,
   screenDimensions,
+  checkWatchlistStatus,
   viewportOffsets,
 }) => {
   const commonProps = useMemo(
@@ -177,6 +138,7 @@ const Sections: React.FC<IProps> = ({
         index,
         theme,
         events,
+        checkWatchlistStatus,
         sectionProps,
         isLoading,
         moreFetchData,
@@ -193,6 +155,7 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,
@@ -211,6 +174,7 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,
@@ -226,6 +190,7 @@ const Sections: React.FC<IProps> = ({
       index,
       theme,
       events,
+      checkWatchlistStatus,
       sectionProps,
       isLoading,
       moreFetchData,

package/src/components/Content/types.ts

@@ -0,0 +1,176 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 08 Jun 2025
+ */
+import React from 'react';
+import type {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import type { AnimatedStyle, SharedValue } from 'react-native-reanimated';
+import type { IGetSectionData, IAdItem, MoreFetchData } from '../../types';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+import type { ICategory } from './Card/Category/Category';
+import type { IHistoryItem } from './Card/NowWatching/NowWatching';
+import type { ThemeOverride } from '../../theme/themes';
+import type { NoContentFallbackProps } from '../Fallbacks';
+
+/**
+ * Custom component configuration for sections and content
+ */
+export interface ICustomComponent {
+  type: string;
+  component: React.ReactElement;
+}
+
+/**
+ * Loading states for content sections
+ */
+export type IContentLoading = {
+  category?: boolean;
+  history?: boolean;
+  section?: boolean;
+  InfiniteScrollIsLoading?: boolean;
+};
+
+/**
+ * Section-specific props
+ */
+export interface ISectionProps {
+  showPlayBtn?: boolean;
+}
+
+/**
+ * Viewport offsets for screen calculations
+ */
+export interface IViewportOffsets {
+  top: number;
+  bottom: number;
+  left: number;
+  right: number;
+}
+
+/**
+ * Screen dimensions
+ */
+export interface IScreenDimensions {
+  width: number;
+  height: number;
+}
+
+/**
+ * Watchlist status checker function type
+ */
+export type ICheckWatchlistStatus = (
+  itemIds: string[]
+) => Record<string, boolean> | Promise<Record<string, boolean>>;
+
+/**
+ * Parameters for onPressMore event
+ */
+export interface IOnPressMoreParams {
+  section_id: string;
+  name: string;
+  type: IGetSectionData['type'];
+}
+
+/**
+ * Events object for content and sections
+ */
+export interface IContentEvents {
+  onPressItem?: (item: IContentData | IAdItem) => void;
+  onPressMore?: (params: IOnPressMoreParams) => void;
+  activeCategory?: ICategory;
+  onPressCategory?: (category: ICategory) => void;
+  onAdVisible?: (ad: IServeAd, percent: number) => void;
+  onDisplayAds?: (ad: IServeAd) => void;
+  onToggleWatchlist?: (
+    item: IContentData,
+    { isFavorite }: { isFavorite: boolean }
+  ) => void;
+}
+
+/**
+ * Props for the Content component
+ */
+export interface IContentProps {
+  headerStyle?: 'one' | 'two' | 'three';
+  contentData: {
+    category?: ICategory[];
+    sectionData: IGetSectionData[] | null;
+    historyData?: IHistoryItem[];
+  };
+  customHeaderComponent?: React.ReactNode;
+  customComponents?: ICustomComponent[];
+  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?: IContentEvents & {
+    onPressMore?: (params: {
+      section_id: IGetSectionData['_id'];
+      name: IGetSectionData['name'];
+      type: IGetSectionData['type'];
+    }) => void;
+  };
+  checkWatchlistStatus?: ICheckWatchlistStatus;
+  sectionProps?: ISectionProps;
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
+  isLoading?: IContentLoading;
+
+  noContentFallbackProps?: NoContentFallbackProps;
+}
+
+/**
+ * Props for the ContentFooter component (internal use)
+ */
+export interface FooterProps {
+  isEmpty: boolean;
+  ErrorComponent?: React.ReactNode;
+  InfiniteScrollIsLoading?: boolean;
+  InfiniteScrollLoaderComponent?: React.ReactNode;
+  theme?: ThemeOverride;
+  noContentFallbackProps?: NoContentFallbackProps;
+}
+
+/**
+ * Props for the Sections component
+ */
+export interface IProps {
+  type: IGetSectionData['type'];
+  ads?: IServeAd[];
+  data: {
+    sectionData: IGetSectionData['content'] | null;
+    historyData?: IHistoryItem[];
+    category?: ICategory[];
+  };
+  name: string;
+
+  customComponents?: ICustomComponent[];
+  theme?: ThemeOverride;
+  index: number;
+  section_id: string;
+  events?: IContentEvents;
+  sectionProps?: ISectionProps;
+
+  checkWatchlistStatus?: ICheckWatchlistStatus;
+  isLoading?: IContentLoading;
+  moreFetchData?: MoreFetchData<IContentData>;
+  moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
+  onDisplayAds?: (ad: IServeAd) => void;
+  screenDimensions?: IScreenDimensions;
+  viewportOffsets?: IViewportOffsets;
+}

package/src/components/ContentView/MoreContentList.tsx

@@ -100,6 +100,7 @@ const MoreContentList: React.FC<Props> = React.memo(
           >
             <CardPoster
               content_offering_type={item.content_offering_type}
+              contentType={item.type}
               posterUri={item.poster}
               borderRadius={5}
               isLoading={false}

package/src/components/ContentView/{ContentView.tsx → One/ContentViewOne.tsx}

@@ -8,16 +8,16 @@ import { HeroBanner } from './components/HeroBanner';
 import { GenreTags } from './components/GenreTags';
 import { AboutSection } from './components/AboutSection';
 import { Title } from './components/Title';
-import { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import { useInternalTheme } from '../../../theme/hook/useInternalTheme';
 import { CastCard } from './components/CastCard';
-import Cards from '../Content/Card';
+import Cards from '../../Content/Card';
 import { scale } from 'react-native-size-matters';
 import { EpisodeCard } from './components/EpisodeCard';
-import type { ComponentProps } from '../../types/content/content-view.types';
-import { NotFoundFallback } from '../Fallbacks';
+import type { ComponentProps } from '../../../types/content/content-view.types';
+import { NotFoundFallback } from '../../Fallbacks';
 import { MiniInfo } from './components/MiniInfo';
 
-export const ContentView = React.memo(
+export const ContentViewOne = React.memo(
   ({
     content,
     seasons,
@@ -36,7 +36,7 @@ export const ContentView = React.memo(
     history,
     episodeCardMode,
     pricingAndExpiryInfo,
-  }: ComponentProps) => {
+  }: Omit<ComponentProps, 'isLiked'>) => {
     const { theme: appliedTheme } = useInternalTheme(theme);
 
     // Memoize computed values
@@ -147,6 +147,7 @@ export const ContentView = React.memo(
             showsVerticalScrollIndicator={false}
             keyboardShouldPersistTaps="handled"
             contentContainerStyle={styles.scrollContent}
+            bounces={false}
           >
             <HeroBanner
               backgroundImage={content?.thumbnail}
@@ -231,7 +232,7 @@ const styles = StyleSheet.create({
   },
 });
 
-export namespace ContentView {
+export namespace ContentViewOne {
   export type Props = ComponentProps;
   export type RecommendedContent = Props['recommendedContent'];
   export type HeroBannerProps = Props['heroBannerProps'];

package/src/components/ContentView/{components → One/components}/AboutSection.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useRef, useState, useCallback, useMemo } from 'react';
-import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -14,10 +14,10 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import { Text } from '../../Text';
+import { Text } from '../../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { ITheme } from '../../../theme/themes';
+import type { ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 

package/src/components/ContentView/{components → One/components}/CastCard.tsx

@@ -3,7 +3,7 @@
  * @lastModified Wed 02 Jul 2025 at 09:58 PM
  */
 import React, { useCallback, useMemo } from 'react';
-import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -17,8 +17,8 @@ import {
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage, { type ImageStyle } from 'react-native-fast-image';
 import { scale } from 'react-native-size-matters';
-import { Text } from '../../Text';
-import type { ITheme } from '../../../theme/themes';
+import { Text } from '../../../Text';
+import type { ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { IContentCast } from '@zezosoft/zezo-ott-api-client';
 

package/src/components/ContentView/{components → One/components}/EpisodeCard.tsx

@@ -8,13 +8,13 @@ import { View, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { Text } from '../../Text';
-import Display from '../../../utils/Display';
-import type { ITheme, ThemeOverride } from '../../../theme/themes';
-import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import { Text } from '../../../Text';
+import Display from '../../../../utils/Display';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
+import { ThumbnailCard } from '../../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
-import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
-import { useInternalTheme } from '../../../theme/hook';
+import RentOrBuyIcon from '../../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../../theme/hook';
 import type {
   IContentEpisodes,
   IContentSeasons,
@@ -270,7 +270,7 @@ export const EpisodeCard = React.memo(
     onPress,
     theme: themeOverride,
     isLoading = false,
-    mode = 'horizontal',
+    mode = 'horizontal' as 'horizontal' | 'vertical',
   }: EpisodeCardProps) => {
     const { isDarkMode, theme } = useInternalTheme(themeOverride);
     const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
@@ -515,7 +515,6 @@ const styles = StyleSheet.create({
   textRightHalf: {
     flex: 1,
     width: '55%',
-    paddingVertical: verticalScale(2),
     paddingHorizontal: TEXT_PADDING,
     justifyContent: 'center',
   },

package/src/components/ContentView/{components → One/components}/GenreTags.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import { useSkeletonItems } from '../../../../hooks/useSkeletonItems';
 import {
   View,
   StyleSheet,
@@ -12,10 +12,10 @@ import {
   type ViewStyle,
   type TextStyle,
 } from 'react-native';
-import { Text } from '../../Text';
+import { Text } from '../../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { ITheme } from '../../../theme/themes';
+import type { ITheme } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 

package/src/components/ContentView/{components → One/components}/HeroBanner.tsx

@@ -3,26 +3,27 @@
  * @lastModified Wed 02 Jul 2025 at 04:50 PM
  */
 
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { View, StyleSheet, Animated } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import FastImage from 'react-native-fast-image';
+import tinycolor from 'tinycolor2';
 
 import { PlayButton } from './PlayButton';
 import { TrailerButton } from './TrailerButton';
-import BackBtn from '../../Button/BackBtn';
-import MenuBtn from '../../Button/MenuBtn';
-import type { HeroBannerProps } from '../../../types/content/content-view.types';
+import BackBtn from '../../../Button/BackBtn';
+import MenuBtn from '../../../Button/MenuBtn';
+import type { HeroBannerProps } from '../../../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
-import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
-import { useInternalTheme } from '../../../theme/hook';
-import { Text } from '../../Text';
+import RentOrBuyIcon from '../../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../../theme/hook';
+import { Text } from '../../../Text';
+import { useImageLoader } from '../../../../hooks/Images';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
-const GRADIENT_LOCATIONS = [0.75, 0.9, 1];
 const BACK_BTN_SIZE = scale(35);
 
 export const HeroBanner = React.memo(
@@ -40,24 +41,18 @@ export const HeroBanner = React.memo(
     content_offering_type,
   }: HeroBannerProps) => {
     const { theme } = useInternalTheme(themeOverride);
-    const [hasImageLoaded, setHasImageLoaded] = useState(false);
-    const [imageLoadError, setImageLoadError] = useState(false);
 
-    // Reset image loading state when isLoading prop changes
-    useEffect(() => {
-      if (isLoading) {
-        setHasImageLoaded(false);
-        setImageLoadError(false);
-      }
-    }, [isLoading]);
-
-    // Reset when backgroundImage changes
-    useEffect(() => {
-      if (backgroundImage) {
-        setHasImageLoaded(false);
-        setImageLoadError(false);
-      }
-    }, [backgroundImage]);
+    // Use reusable image loading hook with caching support
+    const {
+      imageError,
+      showSkeleton: imageShowSkeleton,
+      imageSource,
+      handleLoad: handleImageLoad,
+      handleError: handleImageError,
+    } = useImageLoader({
+      imageUri: backgroundImage || '',
+      isLoading,
+    });
 
     const handlePressPlay = useCallback(
       ({ is_trailer }: { is_trailer: boolean }) => {
@@ -67,33 +62,21 @@ export const HeroBanner = React.memo(
     );
 
     const showSkeleton = useMemo(
-      () =>
-        isLoading || (!hasImageLoaded && !imageLoadError && backgroundImage),
-      [isLoading, hasImageLoaded, imageLoadError, backgroundImage]
+      () => isLoading || (imageShowSkeleton && !!backgroundImage),
+      [isLoading, imageShowSkeleton, backgroundImage]
     );
 
-    const handleImageLoad = useCallback(() => {
-      setHasImageLoaded(true);
-    }, []);
-
-    const handleImageError = useCallback(() => {
-      setImageLoadError(true);
-    }, []);
-
-    // Memoize image source
-    const imageSource = useMemo(
-      () => ({
-        uri: backgroundImage,
-        cache: FastImage.cacheControl.immutable,
-      }),
-      [backgroundImage]
-    );
-
-    // Memoize gradient colors
-    const gradientColors = useMemo(
-      () => theme.colors.heroBannerGradient,
-      [theme.colors.heroBannerGradient]
-    );
+    // Memoize gradient colors - use theme gradient with optimized transition
+    const gradientColors = useMemo(() => {
+      const bgColorBase = theme.colors.background;
+      return [
+        tinycolor(bgColorBase).toRgbString(), // Solid at bottom (100% opacity)
+        tinycolor(bgColorBase).setAlpha(0.66).toRgbString(), // 66% opacity
+        tinycolor(bgColorBase).setAlpha(0.2).toRgbString(), // 20% opacity
+        tinycolor(bgColorBase).setAlpha(0.1).toRgbString(), // 10% opacity
+        'rgba(0, 0, 0, 0)',
+      ];
+    }, [theme.colors.background]);
 
     const styles = useMemo(
       () =>
@@ -243,12 +226,14 @@ export const HeroBanner = React.memo(
             ))}
 
         {/* Gradient Overlay */}
-        <LinearGradient
-          colors={gradientColors}
-          style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
-          locations={GRADIENT_LOCATIONS}
-        />
-
+        {!showSkeleton && (
+          <LinearGradient
+            colors={gradientColors}
+            style={[StyleSheet.absoluteFill, { zIndex: 1 }]}
+            start={{ x: 0, y: 1 }}
+            end={{ x: 0, y: 0 }}
+          />
+        )}
         {/* Background Image */}
         {!isLoading && (
           <>
@@ -292,7 +277,7 @@ export const HeroBanner = React.memo(
         )}
 
         {/* Skeleton UI */}
-        {showSkeleton && (
+        {showSkeleton && !imageError && onPressPlay && (
           <>
             <View style={styles.skeletonContainer}>
               {renderSkeletons?.play?.() ?? (
@@ -336,7 +321,7 @@ export const HeroBanner = React.memo(
         )}
 
         {/* Play & Trailer Buttons */}
-        {!showSkeleton && !imageLoadError && (
+        {!showSkeleton && !imageError && onPressPlay && (
           <>
             <Animated.View style={styles.centeredContent}>
               {renderButtons?.play?.() ?? (
@@ -361,7 +346,7 @@ export const HeroBanner = React.memo(
         )}
 
         {/* Error UI */}
-        {imageLoadError && !isLoading && (
+        {imageError && !isLoading && (
           <Animated.View style={styles.errorContainer}>
             <Text style={styles.errorText}>Failed to load image</Text>
           </Animated.View>