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

package/src/components/Reels/ReelsSeries/useReelsWatchProgress.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { IReelsWatchProgress } from './types';
+
+type UseReelsWatchProgressParams = {
+  /**
+   * Whether the parent screen is currently focused/visible.
+   * When this becomes false, the last watch progress will be flushed once.
+   */
+  isFocused: boolean;
+  /**
+   * Callback invoked whenever an episode's watch progress should be
+   * "finalized" – e.g. when the user switches episodes, leaves the screen
+   * or the component unmounts.
+   */
+  onFlush: (progress: IReelsWatchProgress) => void;
+};
+
+type UseReelsWatchProgressResult = {
+  /**
+   * Pass this directly to `ReelsSeries` / `ReelsSeriesItem` as
+   * the `onWatchProgress` handler.
+   */
+  handleWatchProgress: (progress: IReelsWatchProgress) => void;
+};
+
+/**
+ * Reusable hook that tracks the last watched episode progress and ensures
+ * it is flushed exactly once when:
+ * - The user switches to a different episode
+ * - The parent screen loses focus
+ * - The parent component unmounts
+ *
+ * This hook is intentionally UI-kit only and delegates side‑effects
+ * (API calls, analytics, etc.) to the provided `onFlush` callback.
+ */
+export const useReelsWatchProgress = ({
+  isFocused,
+  onFlush,
+}: UseReelsWatchProgressParams): UseReelsWatchProgressResult => {
+  const lastProgressRef = React.useRef<IReelsWatchProgress | null>(null);
+  const flushProgressRef = React.useRef(onFlush);
+
+  // Always keep the latest flush callback
+  React.useEffect(() => {
+    flushProgressRef.current = onFlush;
+  }, [onFlush]);
+
+  const handleWatchProgress = React.useCallback(
+    (progress: IReelsWatchProgress) => {
+      const previous = lastProgressRef.current;
+
+      // If user changed episode, flush previous episode's progress once
+      if (
+        previous &&
+        previous.episode.episodeId !== progress.episode.episodeId
+      ) {
+        flushProgressRef.current(previous);
+      }
+
+      // Always store the latest progress for the current episode
+      lastProgressRef.current = progress;
+    },
+    []
+  );
+
+  // When screen loses focus (user navigates away), flush last progress once
+  React.useEffect(() => {
+    if (!isFocused && lastProgressRef.current) {
+      flushProgressRef.current(lastProgressRef.current);
+      lastProgressRef.current = null;
+    }
+  }, [isFocused]);
+
+  // On unmount, flush any remaining progress
+  React.useEffect(() => {
+    return () => {
+      if (lastProgressRef.current) {
+        flushProgressRef.current(lastProgressRef.current);
+        lastProgressRef.current = null;
+      }
+    };
+  }, []);
+
+  return { handleWatchProgress };
+};

package/src/components/Reels/ReelsSeries/utils/quality.ts

@@ -0,0 +1,48 @@
+export interface QualityOption {
+  quality: string;
+  url: string;
+}
+
+export const DEFAULT_QUALITIES = ['Auto', '1080p', '720p', '480p', '360p'];
+
+// Simple in-memory cache to avoid fetching the same playlist multiple times
+const qualitiesCache: Record<string, QualityOption[]> = {};
+
+/**
+ * Fetches available video qualities from m3u8 playlist.
+ */
+export const getVideoQualities = async (
+  m3u8Url: string
+): Promise<QualityOption[]> => {
+  // Return cached result if available to avoid repeated network calls
+  if (qualitiesCache[m3u8Url]) {
+    return qualitiesCache[m3u8Url];
+  }
+
+  try {
+    const res = await fetch(m3u8Url);
+    const text = await res.text();
+    const qualities: QualityOption[] = [];
+    const lines = text.split('\n');
+
+    for (let i = 0; i < lines.length; i++) {
+      if (lines?.[i]?.includes('#EXT-X-STREAM-INF')) {
+        // Example line:
+        // #EXT-X-STREAM-INF:BANDWIDTH=800000,RESOLUTION=640x360,...
+        const resolutionMatch = lines?.[i]?.match(/RESOLUTION=\d+x(\d+)/);
+        const url = lines[i + 1]?.trim();
+        if (resolutionMatch && url) {
+          qualities.push({ quality: `${resolutionMatch[1]}p`, url });
+        }
+      }
+    }
+
+    // Cache the result (even if empty) so we don't re-fetch for this URL
+    qualitiesCache[m3u8Url] = qualities;
+
+    return qualities;
+  } catch (error) {
+    console.error('Error fetching video qualities:', error);
+    return [];
+  }
+};

package/src/components/Reels/index.ts

@@ -6,3 +6,4 @@
 import { ReelsSeries } from './ReelsSeries/ReelsSeries';
 export * from './ReelsSeries/types';
 export { ReelsSeries };
+export * from './ReelsSeries/useReelsWatchProgress';

package/src/components/Search/One.tsx

@@ -89,6 +89,8 @@ const SearchBar: React.FC<SearchOneProps> = ({
     colors: { textPrimary, background },
   } = appliedTheme;
 
+  const trimmedSearch = search.trim();
+
   const debouncedSubmit = useDebounce((keyword: string) => {
     const trimmed = keyword.trim();
     if (trimmed) {
@@ -122,10 +124,9 @@ const SearchBar: React.FC<SearchOneProps> = ({
   const skeletonItems = useSkeletonItems(skeletonCardCount);
 
   const showRecent =
-    !recentSearchesLoading && search.trim() === '' && recentSearches.length > 0;
+    !recentSearchesLoading && trimmedSearch === '' && recentSearches.length > 0;
 
-  const shouldShowFooter =
-    !isLoading && search.trim().length === 0 && results?.length === 0;
+  const shouldShowFooter = !isLoading && (!results || results.length === 0);
 
   const renderItem: ListRenderItem<ISearchItem> = ({ item, index }) => (
     <View style={styles.container} key={item?._id || index}>
@@ -134,7 +135,9 @@ const SearchBar: React.FC<SearchOneProps> = ({
         title={item?.name}
         thumbnail={item?.thumbnail || item?.poster || ''}
         description={item?.description}
-        category={item?.type || item?.content_offering_type}
+        category={item?.type}
+        theme={theme}
+        contentType={item?.type}
         onPress={() => !isLoading && handleItemPress(item)}
         skeletonConfig={skeletonConfig}
       />
@@ -190,7 +193,7 @@ const SearchBar: React.FC<SearchOneProps> = ({
   ]);
 
   const renderEmptyComponent = () =>
-    !isLoading && search.trim().length > 0 && results?.length === 0 ? (
+    !isLoading && trimmedSearch.length > 0 && results?.length === 0 ? (
       <Text style={styles.emptyText} color={textPrimary}>
         {noResultsText}
       </Text>

package/src/components/Search/components/SearchCard.tsx

@@ -3,9 +3,10 @@
  * @lastModified jun 23 Jun 2025 at 11:40 AM
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View, Pressable, StyleSheet, type DimensionValue } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
+import LinearGradient from 'react-native-linear-gradient';
 import FastImage from 'react-native-fast-image';
 import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 
@@ -17,6 +18,7 @@ import { Text } from '../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
 import { useSafePressHandler } from '../../../hooks/useSafeCallback';
 import { useSkeletonItems } from '../../../hooks/useSkeletonItems';
+import { convertColorWithOpacity } from '../../../utils/colorUtils';
 
 /**
  * Configuration for SearchCard skeleton rendering.
@@ -34,6 +36,7 @@ export type SearchCardProps = {
   thumbnail: string;
   description: string;
   category?: string;
+  contentType?: string;
   isLoading?: boolean;
   onPress?: () => void;
   theme?: ThemeOverride;
@@ -47,7 +50,8 @@ const SearchCard: React.FC<SearchCardProps> = ({
   title,
   thumbnail,
   description,
-  category = 'Unknown',
+  category,
+  contentType,
   isLoading = false,
   onPress,
   theme,
@@ -60,6 +64,8 @@ const SearchCard: React.FC<SearchCardProps> = ({
       textSecondary,
       skeletonBaseColor,
       skeletonHighlightColor,
+      primary,
+      secondary,
     },
   } = appliedTheme;
 
@@ -68,6 +74,18 @@ const SearchCard: React.FC<SearchCardProps> = ({
 
   const skeletonItems = useSkeletonItems(items);
 
+  const isVerticalContent = contentType === 'VERTICAL_STREAM';
+
+  const verticalBadgeColors = useMemo(() => {
+    const primaryColor = primary;
+    const secondaryColor = secondary || primaryColor;
+
+    return [
+      convertColorWithOpacity(primaryColor, 0.9),
+      convertColorWithOpacity(secondaryColor, 0.9),
+    ];
+  }, [primary, secondary]);
+
   // Memoize handlePress before any early returns
   const handlePress = useSafePressHandler(onPress);
 
@@ -140,6 +158,25 @@ const SearchCard: React.FC<SearchCardProps> = ({
           resizeMode={FastImage.resizeMode.cover}
           isLoading={false}
         />
+        {isVerticalContent && (
+          <View
+            style={styles.verticalBadgeContainer}
+            accessible
+            accessibilityRole="text"
+            accessibilityLabel="Vertical video"
+          >
+            <LinearGradient
+              colors={verticalBadgeColors}
+              start={{ x: 0, y: 0 }}
+              end={{ x: 1, y: 0 }}
+              style={styles.verticalBadge}
+            >
+              <Text style={styles.verticalBadgeText} color="#FFFFFF">
+                VERTICAL
+              </Text>
+            </LinearGradient>
+          </View>
+        )}
       </View>
       <View style={styles.textContainer}>
         <Text
@@ -158,14 +195,16 @@ const SearchCard: React.FC<SearchCardProps> = ({
         >
           {description}
         </Text>
-        <Text
-          style={styles.categoryTextLine}
-          color={textSecondary}
-          numberOfLines={1}
-          accessibilityLabel={`Category: ${category}`}
-        >
-          {category}
-        </Text>
+        {!!category && (
+          <Text
+            style={styles.categoryTextLine}
+            color={textSecondary}
+            numberOfLines={1}
+            accessibilityLabel={`Category: ${category}`}
+          >
+            {category}
+          </Text>
+        )}
       </View>
     </Pressable>
   );
@@ -187,7 +226,25 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-
+  verticalBadgeContainer: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+  verticalBadge: {
+    width: '100%',
+    paddingHorizontal: scale(6),
+    paddingVertical: verticalScale(2),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  verticalBadgeText: {
+    fontSize: RFValue(7.5),
+    fontWeight: '700',
+    letterSpacing: scale(0.5),
+    textAlign: 'center',
+  },
   textContainer: {
     flex: 1,
     height: verticalScale(80),

package/src/components/User/PurchaseHistory/PurchaseHistory.tsx

@@ -246,6 +246,7 @@ const PurchaseHistoryComponent: React.FC<PurchaseHistoryProps> = ({
               theme={appliedTheme}
               isLoading={isLoading}
               posterUri={item?.content_id?.poster}
+              contentType={item?.content_id?.type}
             />
 
             {/* Gradient Overlay */}

package/src/components/User/WatchHistory/WatchHistory.tsx

@@ -128,6 +128,7 @@ const WatchHistoryComponent: React.FC<WatchHistoryProps> = ({
         >
           <CardPoster
             content_offering_type={item?.content?.content_offering_type}
+            contentType={item?.content?.type}
             theme={appliedTheme}
             isLoading={isLoading}
             posterUri={item?.content?.poster}

package/src/components/User/WatchLater/WatchLater.tsx

@@ -234,6 +234,7 @@ const WatchLaterComponent: React.FC<WatchLaterProps> = ({
         >
           <CardPoster
             content_offering_type={item?.content?.content_offering_type}
+            contentType={item?.content?.type}
             theme={appliedTheme}
             isLoading={isLoading}
             posterUri={item?.content?.poster}

package/src/components/common/AppStatusBar.tsx

@@ -12,6 +12,7 @@ import { useInternalTheme } from '../../theme/hook';
 type AppStatusBarProps = {
   backgroundColor?: string;
   barStyle?: StatusBarStyle;
+  transparent?: boolean;
   translucent?: boolean;
   hidden?: boolean;
   theme?: ThemeOverride;
@@ -20,6 +21,7 @@ type AppStatusBarProps = {
 export const AppStatusBar: React.FC<AppStatusBarProps> = ({
   backgroundColor,
   barStyle,
+  transparent = false,
   translucent = true,
   hidden = false,
   theme: overrideTheme,
@@ -44,7 +46,11 @@ export const AppStatusBar: React.FC<AppStatusBarProps> = ({
       hidden={hidden}
       barStyle={resolvedBarStyle}
       backgroundColor={
-        Platform.OS === 'android' ? resolvedBackground : 'transparent'
+        Platform.OS === 'android'
+          ? transparent
+            ? 'transparent'
+            : resolvedBackground
+          : 'transparent'
       }
     />
   );

package/src/components/index.ts

@@ -26,3 +26,4 @@ export * from './Alert';
 export * from './Reels';
 export * from './BlurView';
 export * from './BottomSheet';
+export * from './NewRelease';

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,
@@ -34,8 +81,12 @@ const generateDummySection = (
   };
 };
 
-export const dummySections: IGetSectionData[] = [
-  generateDummySection('slider'),
+export const dummySections = ({
+  headerStyle = 'one',
+}: { headerStyle?: 'one' | 'two' | 'three' } = {}): IGetSectionData[] => [
+  headerStyle === 'three'
+    ? generateDummySection('slider_style_3')
+    : generateDummySection('slider'),
   generateDummySection('normal'),
   generateDummySection('continue_watching'),
   generateDummySection('card_style_2'),

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,
+  };
+};