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

package/src/components/Content/Sections.tsx

@@ -1,16 +1,16 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sun 08 Jun 2025 at 03:50 PM
+ * @lastModified Sun 08 Jun 2025
  */
 import React, { useMemo } from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
-import type { IGetSectionData, MoreFetchData } from '../../types';
+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 } from '@zezosoft/zezo-ott-api-client';
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
 
 export interface ICustomComponentsForSections {
   type: string;
@@ -19,6 +19,7 @@ export interface ICustomComponentsForSections {
 
 export interface IProps {
   type: IGetSectionData['type'];
+  ads?: IServeAd[];
   data: {
     sectionData: IGetSectionData['content'] | null;
     historyData?: IHistoryItem[];
@@ -30,13 +31,15 @@ export interface IProps {
   index: number;
   section_id: string;
   events?: {
-    onPressItem?: (item: IContentData) => void;
+    onPressItem?: (item: IContentData | IAdItem) => void;
     onPressMore?: (params: {
-      section_id: IGetSectionData['_id'];
-      name: IGetSectionData['name'];
+      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;
@@ -44,15 +47,32 @@ export interface IProps {
   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;
+  };
 }
-
-// Memoized common props creator to prevent object recreation
 const createCommonProps = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
 ) => {
   const effectiveIsLoading =
     props.isLoading?.section || props.section_id === `dummy-${type}`;
+
+  const onPressMoreHandler = props.events?.onPressMore
+    ? (params: { section_id: string; name: string; type: string }) => {
+        props.events?.onPressMore?.({
+          section_id: params.section_id,
+          name: params.name,
+          type,
+        });
+      }
+    : undefined;
+
   return {
     theme: props.theme,
     title: props.name,
@@ -61,10 +81,14 @@ const createCommonProps = (
     data: props.data?.sectionData || null,
     index: props.index,
     onPressItem: props.events?.onPressItem,
-    onPressMore: props.events?.onPressMore,
+    onPressMore: onPressMoreHandler,
+    onAdVisible: props.events?.onAdVisible,
     isLoading: effectiveIsLoading,
     moreFetchDataHistory: props.moreFetchDataHistory,
     moreFetchData: props.moreFetchData,
+    onDisplayAds: props.onDisplayAds || props.events?.onDisplayAds,
+    screenDimensions: props.screenDimensions,
+    viewportOffsets: props.viewportOffsets,
   };
 };
 
@@ -114,6 +138,9 @@ const renderDefaultComponent = (
   }
 };
 
+// ----------------------------------------
+// Sections Component
+// ----------------------------------------
 const Sections: React.FC<IProps> = ({
   type,
   data,
@@ -127,6 +154,9 @@ const Sections: React.FC<IProps> = ({
   isLoading,
   moreFetchData,
   moreFetchDataHistory,
+  onDisplayAds,
+  screenDimensions,
+  viewportOffsets,
 }) => {
   const commonProps = useMemo(
     () => ({ data: data.sectionData, title: name }),
@@ -151,6 +181,9 @@ const Sections: React.FC<IProps> = ({
         isLoading,
         moreFetchData,
         moreFetchDataHistory,
+        onDisplayAds,
+        screenDimensions,
+        viewportOffsets,
       }),
     [
       type,
@@ -164,10 +197,12 @@ const Sections: React.FC<IProps> = ({
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );
 
-  // Memoize props object to avoid recreating in filter
   const filterProps = useMemo(
     () => ({
       data,
@@ -180,6 +215,9 @@ const Sections: React.FC<IProps> = ({
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     }),
     [
       data,
@@ -192,6 +230,9 @@ const Sections: React.FC<IProps> = ({
       isLoading,
       moreFetchData,
       moreFetchDataHistory,
+      onDisplayAds,
+      screenDimensions,
+      viewportOffsets,
     ]
   );
 

package/src/constants/dummySections.ts

@@ -1,5 +1,50 @@
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 import type { IGetSectionData } from '../types';
 
+/**
+ * Creates a dummy content data object for skeleton loading states
+ */
+export const dummyContentData = (
+  id: string = 'dummy-content-id'
+): IContentData => {
+  return {
+    _id: id,
+    poster: '',
+    thumbnail: '',
+    content_offering_type: 'movie',
+    name: '',
+    slug: '',
+    u_age: '',
+    description: '',
+    release_date: '',
+    runtime: '',
+    duration: '',
+    genre: '',
+    director: '',
+    cast: [],
+    rating: '',
+    language: '',
+    subtitles: [],
+    audio_tracks: [],
+    type: 'movie',
+    year: '',
+    tags: [],
+    trailer: '',
+    trailer_source_link: '',
+    banner: '',
+    logo: '',
+    source_link: '',
+    source_type: '',
+    is_featured: false,
+    is_premium: false,
+    status: 'active',
+    views: 0,
+    likes: 0,
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  } as unknown as IContentData;
+};
+
 const generateDummySection = (
   type: IGetSectionData['type']
 ): IGetSectionData => {
@@ -14,7 +59,9 @@ const generateDummySection = (
       slug: 'dummy',
     },
     content: {
-      data: Array(5).fill({ id: '', order: 0 }),
+      data: Array.from({ length: 5 }, (_, i) =>
+        dummyContentData(`dummy-content-${i}`)
+      ),
       meta: {
         pagination: {
           total: 5,

package/src/hooks/Images/index.ts

@@ -0,0 +1,2 @@
+export * from './useImageLoader';
+export * from './useImageValidation';

package/src/hooks/Images/useImageLoader.ts

@@ -0,0 +1,206 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 26 Nov 2025 at 02:19 PM
+ */
+
+import { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import FastImage from 'react-native-fast-image';
+import { isValidImageUrl, isLocalFile } from './useImageValidation';
+
+// Module-level cache to track successfully loaded images
+const loadedImageCache = new Set<string>();
+
+export type UseImageLoaderOptions = {
+  imageUri: string;
+  isLoading?: boolean;
+  enablePreload?: boolean;
+  onError?: () => void;
+  onLoad?: () => void;
+  onLoadStart?: () => void;
+};
+
+export type UseImageLoaderReturn = {
+  imageLoading: boolean;
+  imageError: boolean;
+  hasValidImage: boolean;
+  isImageCached: boolean;
+  showSkeleton: boolean;
+  showFallback: boolean;
+  imageSource: {
+    uri: string;
+    cache?: typeof FastImage.cacheControl.immutable;
+    priority?: typeof FastImage.priority.normal;
+  };
+  handleLoad: () => void;
+  handleError: () => void;
+  handleLoadStart?: () => void;
+};
+
+/**
+ * Custom hook to manage image loading state, caching, and validation
+ * @param options - Configuration options for image loading
+ * @returns Object containing image state and handlers
+ */
+export const useImageLoader = ({
+  imageUri,
+  isLoading = false,
+  enablePreload = false,
+  onError,
+  onLoad,
+  onLoadStart,
+}: UseImageLoaderOptions): UseImageLoaderReturn => {
+  const [imageLoading, setImageLoading] = useState(true);
+  const [imageError, setImageError] = useState(false);
+  const previousUriRef = useRef<string>('');
+  const onErrorRef = useRef(onError);
+
+  // Keep onError ref updated
+  useEffect(() => {
+    onErrorRef.current = onError;
+  }, [onError]);
+
+  // Validate image URL
+  const hasValidImage = useMemo(() => isValidImageUrl(imageUri), [imageUri]);
+
+  // Check if image is already cached
+  const isImageCached = useMemo(
+    () => loadedImageCache.has(imageUri),
+    [imageUri]
+  );
+
+  // Handle image state changes
+  useEffect(() => {
+    const uriChanged = previousUriRef.current !== imageUri;
+
+    // Update ref when URI changes
+    if (uriChanged) {
+      previousUriRef.current = imageUri;
+      // Reset error state when URI changes to allow new image to load
+      setImageError(false);
+    }
+
+    // Reset states when loading
+    if (isLoading) {
+      setImageLoading(true);
+      setImageError(false);
+      return;
+    }
+
+    // Handle valid image URL
+    if (hasValidImage) {
+      const isLocal = isLocalFile(imageUri);
+
+      if (isImageCached) {
+        // Image is cached, mark as loaded
+        setImageLoading(false);
+        setImageError(false);
+      } else {
+        // Image not cached, start loading
+        setImageLoading(true);
+        setImageError(false);
+        // Preload image if enabled (only for remote URLs, not local files)
+        if (enablePreload && !isLocal && uriChanged) {
+          FastImage.preload([{ uri: imageUri }]);
+        }
+      }
+    } else {
+      // For empty or invalid URLs
+      if (!imageUri || imageUri.trim() === '') {
+        // Empty URI - show error immediately (no point in trying to load)
+        setImageLoading(false);
+        setImageError(true);
+      } else {
+        // Invalid URL format - attempt to load anyway
+        // FastImage might still be able to load it, so keep loading state
+        setImageLoading(true);
+        setImageError(false);
+      }
+    }
+  }, [imageUri, hasValidImage, isLoading, isImageCached, enablePreload]);
+
+  // Determine if skeleton should be shown
+  const showSkeleton = useMemo(
+    () => isLoading || (imageLoading && !imageError),
+    [isLoading, imageLoading, imageError]
+  );
+
+  // Determine if fallback should be shown
+  // Show fallback when:
+  // 1. Not showing skeleton
+  // 2. AND (imageError is true OR URI is empty/invalid)
+  // This allows images with invalid format to attempt loading, but shows fallback for empty URIs
+  const showFallback = useMemo(() => {
+    if (showSkeleton) return false;
+    // Empty URI - show fallback immediately
+    if (!imageUri || imageUri.trim() === '') return true;
+    // Show fallback only after actual error (not just invalid format)
+    return imageError && !imageLoading;
+  }, [showSkeleton, imageError, imageLoading, imageUri]);
+
+  // Check if image is a local file
+  const isLocal = useMemo(() => isLocalFile(imageUri), [imageUri]);
+
+  // Image source configuration
+  // Local files don't need cache control, cloud URIs do
+  const imageSource = useMemo(() => {
+    const source: {
+      uri: string;
+      cache?: typeof FastImage.cacheControl.immutable;
+      priority?: typeof FastImage.priority.normal;
+    } = {
+      uri: imageUri,
+    };
+
+    // Only add cache control for remote URLs, not local files
+    if (!isLocal) {
+      source.cache = FastImage.cacheControl.immutable;
+      source.priority = FastImage.priority.normal;
+    }
+
+    return source;
+  }, [imageUri, isLocal]);
+
+  // Image event handlers
+  const handleLoad = useCallback(() => {
+    setImageLoading(false);
+    setImageError(false);
+    if (imageUri) {
+      loadedImageCache.add(imageUri);
+    }
+    if (onLoad) {
+      onLoad();
+    }
+  }, [imageUri, onLoad]);
+
+  const handleError = useCallback(() => {
+    setImageLoading(false);
+
+    setImageError(true);
+    if (onError) {
+      onError();
+    }
+  }, [onError]);
+
+  const handleLoadStart = useCallback(() => {
+    if (!isImageCached) {
+      setImageLoading(true);
+      setImageError(false);
+      if (onLoadStart) {
+        onLoadStart();
+      }
+    }
+  }, [isImageCached, onLoadStart]);
+
+  return {
+    imageLoading,
+    imageError,
+    hasValidImage,
+    isImageCached,
+    showSkeleton,
+    showFallback,
+    imageSource,
+    handleLoad,
+    handleError,
+    handleLoadStart: enablePreload ? handleLoadStart : undefined,
+  };
+};

package/src/hooks/Images/useImageValidation.ts

@@ -0,0 +1,36 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 26 Nov 2025 at 02:19 PM
+ */
+
+const IMAGE_URL_REGEX = /\.(jpg|jpeg|png|webp|gif|bmp)$/i;
+
+/**
+ * Utility function to check if URL is a local file path
+ * @param url - The URL to check
+ * @returns true if the URL is a local file path, false otherwise
+ */
+export const isLocalFile = (url: string): boolean => {
+  return url?.startsWith?.('file://') || url?.startsWith?.('/');
+};
+
+/**
+ * Utility function to validate image URL (supports both cloud URIs and local file paths)
+ * @param url - The URL to validate
+ * @returns true if the URL is a valid image URL, false otherwise
+ */
+export const isValidImageUrl = (url: string | null | undefined): boolean => {
+  if (!url || typeof url !== 'string') return false;
+  const cleaned = url.trim();
+
+  // Check for local file paths
+  if (isLocalFile(cleaned)) {
+    return IMAGE_URL_REGEX.test(cleaned) || cleaned.length > 0;
+  }
+
+  // Check for cloud URIs (http/https)
+  return (
+    (cleaned?.startsWith?.('http://') || cleaned?.startsWith?.('https://')) &&
+    IMAGE_URL_REGEX.test(cleaned)
+  );
+};

package/src/hooks/index.ts

@@ -12,3 +12,6 @@ export * from './usePrevious';
 export * from './useSafeCallback';
 export * from './useSkeletonItems';
 export * from './useThemeColors';
+export * from './useCards';
+export * from './Images';
+export * from './useAdTracking';