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

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>

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

@@ -13,10 +13,11 @@ import {
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
-import { Text } from '../../Text';
-import type { ThemeOverride } from '../../../theme/themes';
+import { Text } from '../../../Text';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
-import { useInternalTheme } from '../../../theme/hook';
+import moment from 'moment';
+import { useInternalTheme } from '../../../../theme/hook';
 import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
@@ -143,6 +144,61 @@ export const MiniInfo = React.memo(
       [appliedTheme.colors.textSecondary]
     );
 
+    const formatRentExpiryLabel = useCallback((rawDate: any): string => {
+      if (!rawDate) return '';
+
+      const m = moment(rawDate);
+      if (!m.isValid()) {
+        return String(rawDate);
+      }
+
+      const now = moment();
+
+      // Already expired states – keep copy short for chips
+      if (m.isBefore(now)) {
+        const daysAgo = now.diff(m, 'days');
+
+        if (m.isSame(now, 'day')) {
+          return 'today';
+        }
+
+        if (daysAgo === 1) {
+          return 'yesterday';
+        }
+
+        if (daysAgo < 7) {
+          return `${daysAgo}d ago`;
+        }
+
+        if (m.year() === now.year()) {
+          return m.format('D MMM');
+        }
+
+        return m.format('D MMM YYYY');
+      }
+
+      // Future / active rentals
+      const daysDiff = m.diff(now, 'days');
+
+      if (daysDiff === 0) {
+        return 'today';
+      }
+
+      if (daysDiff === 1) {
+        return 'tomorrow';
+      }
+
+      if (daysDiff < 7) {
+        return `in ${daysDiff}d`;
+      }
+
+      if (m.year() === now.year()) {
+        return m.format('D MMM');
+      }
+
+      return m.format('D MMM YYYY');
+    }, []);
+
     // Extract content values safely
     const content_offering_type = content?.content_offering_type;
     const price = content?.price;
@@ -194,15 +250,23 @@ export const MiniInfo = React.memo(
       }
 
       if (userData.is_buy_or_rent === 'RENT') {
+        const formattedLabel = formatRentExpiryLabel(
+          userData?.rent_expiry_date
+        );
+
+        if (!formattedLabel) return null;
+
         return (
           <Text type="caption" style={expiryTextStyle}>
-            {textLabels.rentedExpiryPrefix} {userData?.rent_expiry_date}
+            {textLabels.rentedExpiryPrefix
+              ? `${textLabels.rentedExpiryPrefix} ${formattedLabel}`
+              : formattedLabel}
           </Text>
         );
       }
 
       return null;
-    }, [userData, textLabels, expiryTextStyle]);
+    }, [userData, textLabels, expiryTextStyle, formatRentExpiryLabel]);
 
     // Early returns after all hooks
     if (!visible) return null;

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

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 import { PlayCircleIcon } from 'lucide-react-native';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+import { useSafePressHandler } from '../../../../hooks/useSafeCallback';
 
 interface Props {
   onPress?: (event: GestureResponderEvent) => void;

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

@@ -13,8 +13,8 @@ import {
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 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 { IContentData } from '@zezosoft/zezo-ott-api-client';
 

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

@@ -13,8 +13,8 @@ import {
   type ViewStyle,
 } from 'react-native';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
-import { Text } from '../../Text';
-import { useSafePressHandler } from '../../../hooks/useSafeCallback';
+import { Text } from '../../../Text';
+import { useSafePressHandler } from '../../../../hooks/useSafeCallback';
 
 interface Props {
   onPress?: (event: GestureResponderEvent) => void;