@zezosoft/zezo-ott-react-native-ui-kit 1.1.3 → 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

@@ -81,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/useSplashCache.ts

@@ -3,37 +3,45 @@
  * @lastModified Fri 17 Oct 2025 at 09:55 PM
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import RNFS from 'react-native-fs';
 import CryptoJS from 'crypto-js';
 import { MMKV } from 'react-native-mmkv';
+import NetInfo from '@react-native-community/netinfo';
 import { useSplashStore } from '../store/splashStore';
 
-const storage = new MMKV();
-const activeDownloads = new Map<string, Promise<string | null>>();
+const mmkvStorage = new MMKV();
+const activeDownloadTasks = new Map<string, Promise<string | null>>();
+const DEFAULT_EXTENSION = 'bin';
+const CACHE_FILE_PREFIX = 'splash_';
 
-const SUPPORTED_EXTENSIONS = [
-  'json',
-  'mp4',
-  'jpg',
-  'jpeg',
-  'png',
-  'webp',
-] as const;
+const isNetworkOnline = async () => {
+  const state = await NetInfo.fetch();
+  return !!state.isConnected;
+};
 
-const getFileExtension = (url: string): string => {
+const getUrlExtension = (url: string): string => {
   try {
+    if (!url || typeof url !== 'string') return DEFAULT_EXTENSION;
     const cleanUrl = url.split('?')[0];
-    const ext = cleanUrl
-      ?.substring(cleanUrl?.lastIndexOf('.') + 1)
-      .toLowerCase();
-    return SUPPORTED_EXTENSIONS.includes(ext as any) ? (ext as string) : 'png';
+    const dot = cleanUrl?.lastIndexOf('.') ?? -1;
+    if (dot === -1) return DEFAULT_EXTENSION;
+
+    const ext = cleanUrl?.substring(dot + 1).toLowerCase() ?? DEFAULT_EXTENSION;
+    if (!/^[a-z0-9]+$/i.test(ext)) return DEFAULT_EXTENSION;
+    return ext;
   } catch {
-    return 'png';
+    return DEFAULT_EXTENSION;
   }
 };
 
-const downloadAndCacheAsset = async (
+const buildCachePath = (url: string, cacheKey: string, extension: string) => {
+  const ext = extension.replace(/^\./, '') || DEFAULT_EXTENSION;
+  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
+  return `${RNFS.CachesDirectoryPath}/${CACHE_FILE_PREFIX}${hash}.${ext}`;
+};
+
+const downloadAndCacheFile = async (
   url: string,
   extension: string,
   cacheKey: string,
@@ -41,52 +49,62 @@ const downloadAndCacheAsset = async (
 ): Promise<string | null> => {
   if (!url?.trim()) return null;
 
-  const ext = extension.replace(/^\./, '') || 'png';
-  const hash = CryptoJS.MD5(`${url}|${cacheKey}|${ext}`).toString();
-  const localFile = `${RNFS.CachesDirectoryPath}/splash_${hash}.${ext}`;
+  const localFile = buildCachePath(url, cacheKey, extension);
 
-  if (activeDownloads.has(hash)) {
-    return activeDownloads.get(hash)!;
+  if (activeDownloadTasks.has(localFile)) {
+    return activeDownloadTasks.get(localFile)!;
   }
 
   const task = (async () => {
+    let oldFile: string | null = null;
+
     try {
-      const savedHash = storage.getString(cacheKey);
+      const savedPath = mmkvStorage.getString(cacheKey);
+      oldFile = savedPath && savedPath !== localFile ? savedPath : null;
 
-      if (savedHash && savedHash !== hash) {
-        const oldFile = `${RNFS.CachesDirectoryPath}/splash_${savedHash}.${ext}`;
-        if (await RNFS.exists(oldFile)) {
-          await RNFS.unlink(oldFile).catch(() => {});
-        }
+      if (!force && savedPath === localFile) {
+        const exists = await RNFS.exists(localFile);
+        if (exists) return localFile;
       }
 
-      if (!force) {
-        const exists = await RNFS.exists(localFile);
-        if (exists && savedHash === hash) {
-          return localFile;
-        }
+      if (!(await isNetworkOnline())) {
+        return oldFile && (await RNFS.exists(oldFile)) ? oldFile : null;
       }
 
-      const { statusCode } = await RNFS.downloadFile({
+      const result = await RNFS.downloadFile({
         fromUrl: url,
         toFile: localFile,
         cacheable: true,
         readTimeout: 15000,
         connectionTimeout: 10000,
-      }).promise;
+      }).promise.catch(() => null);
 
-      if (statusCode === 200) {
-        storage.set(cacheKey, hash);
-        return localFile;
+      if (!result || result.statusCode !== 200) {
+        const code = result?.statusCode ?? 'unknown';
+        throw new Error(`RNFS download failed (status: ${code})`);
       }
-    } catch {
-      return null;
+
+      mmkvStorage.set(cacheKey, localFile);
+
+      if (oldFile && (await RNFS.exists(oldFile))) {
+        await RNFS.unlink(oldFile).catch(() => {});
+      }
+
+      return localFile;
+    } catch (err) {
+      console.warn('[SplashCache] download failed:', url, err);
+    }
+
+    if (oldFile && (await RNFS.exists(oldFile))) {
+      return oldFile;
     }
 
     return null;
-  })();
+  })().finally(() => {
+    activeDownloadTasks.delete(localFile);
+  });
 
-  activeDownloads.set(hash, task);
+  activeDownloadTasks.set(localFile, task);
   return task;
 };
 
@@ -101,67 +119,68 @@ export const useSplashCache = ({
   backgroundUrl,
   forceDownload = false,
 }: SplashCacheOptions) => {
-  const [state, setState] = useState({
+  const [loadState, setLoadState] = useState({
     isReady: false,
     error: null as Error | null,
   });
-
-  const setLogo = useSplashStore((s) => s.setLogoPath);
-  const setBackground = useSplashStore((s) => s.setBackdropPath);
+  const setLogoPath = useSplashStore((s) => s.setLogoPath);
+  const setBackdropPath = useSplashStore((s) => s.setBackdropPath);
+  const isMountedRef = useRef(true);
 
   useEffect(() => {
-    let mounted = true;
+    isMountedRef.current = true;
 
     const syncAssets = async () => {
       try {
-        const [logoPath, bgPath] = await Promise.all([
+        const [logoLocalPath, backdropLocalPath] = await Promise.all([
           logoUrl
-            ? downloadAndCacheAsset(
+            ? downloadAndCacheFile(
                 logoUrl,
-                getFileExtension(logoUrl),
+                getUrlExtension(logoUrl),
                 'splash_logo',
                 forceDownload
               )
             : Promise.resolve(null),
           backgroundUrl
-            ? downloadAndCacheAsset(
+            ? downloadAndCacheFile(
                 backgroundUrl,
-                getFileExtension(backgroundUrl),
+                getUrlExtension(backgroundUrl),
                 'splash_background',
                 forceDownload
               )
             : Promise.resolve(null),
         ]);
 
-        if (!mounted) return;
+        if (!isMountedRef.current) return;
 
-        if (logoPath) setLogo?.(logoPath);
-        if (bgPath) setBackground?.(bgPath);
+        if (logoLocalPath) setLogoPath?.(logoLocalPath);
+        if (backdropLocalPath) setBackdropPath?.(backdropLocalPath);
 
-        setState({ isReady: true, error: null });
+        setLoadState({ isReady: true, error: null });
       } catch (err) {
-        if (mounted) {
-          setState({ isReady: true, error: err as Error });
-        }
+        if (!isMountedRef.current) return;
+        const error =
+          err instanceof Error ? err : new Error('Splash cache failed');
+        setLoadState({ isReady: true, error });
       }
     };
 
     syncAssets();
+
     return () => {
-      mounted = false;
+      isMountedRef.current = false;
     };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [logoUrl, backgroundUrl, forceDownload]);
+  }, [logoUrl, backgroundUrl, forceDownload, setLogoPath, setBackdropPath]);
 
-  const logoPath = useSplashStore((s) => s.logo.localPath);
-  const bgPath = useSplashStore((s) => s.backdrop.localPath);
+  const logoLocalPath = useSplashStore((s) => s.logo.localPath);
+  const backdropLocalPath = useSplashStore((s) => s.backdrop.localPath);
 
   return {
-    state,
-    isLoading: !state.isReady && !state.error,
+    state: loadState,
+    isLoading: !loadState.isReady,
     data: {
-      logoPath,
-      backgroundPath: bgPath,
+      logoPath: logoLocalPath,
+      backgroundPath: backdropLocalPath,
     },
   };
 };