@zezosoft/zezo-ott-react-native-ui-kit 1.0.4 → 1.0.6

package/src/components/layout/SafeAreaWrapper.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from 'react';
 import { StyleSheet, type ViewStyle } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/hook/useTheme';
+import type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 
 type SafeAreaWrapperProps = {
   children: React.ReactNode;
   style?: ViewStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   edges?: ('top' | 'right' | 'bottom' | 'left')[];
   fallbackBackground?: string;
 };
@@ -19,7 +19,7 @@ export const SafeAreaWrapper: React.FC<SafeAreaWrapperProps> = ({
   edges = ['top'],
   fallbackBackground = '#fff',
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const containerStyle = useMemo(() => {
     return [

package/src/hooks/useSplashCache.ts

@@ -0,0 +1,166 @@
+/**
+ * @author Naresh
+ * @lastModified Fri 17 Oct 2025 at 09:55 PM
+ */
+
+import { useEffect, useState } from 'react';
+import RNFS from 'react-native-fs';
+import CryptoJS from 'crypto-js';
+import { MMKV } from 'react-native-mmkv';
+import { useSplashStore } from '../store/splashStore';
+
+const storage = new MMKV();
+const activeDownloads = new Map<string, Promise<string | null>>();
+
+const SUPPORTED_EXTENSIONS = [
+  'json',
+  'mp4',
+  'jpg',
+  'jpeg',
+  'png',
+  'webp',
+] as const;
+
+const getFileExtension = (url: string): string => {
+  try {
+    const cleanUrl = url.split('?')[0];
+    const ext = cleanUrl
+      ?.substring(cleanUrl?.lastIndexOf('.') + 1)
+      .toLowerCase();
+    return SUPPORTED_EXTENSIONS.includes(ext as any) ? (ext as string) : 'png';
+  } catch {
+    return 'png';
+  }
+};
+
+const downloadAndCacheAsset = async (
+  url: string,
+  extension: string,
+  cacheKey: string,
+  force: boolean
+): 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}`;
+
+  if (activeDownloads.has(hash)) {
+    return activeDownloads.get(hash)!;
+  }
+
+  const task = (async () => {
+    try {
+      const savedHash = storage.getString(cacheKey);
+
+      if (savedHash && savedHash !== hash) {
+        const oldFile = `${RNFS.CachesDirectoryPath}/splash_${savedHash}.${ext}`;
+        if (await RNFS.exists(oldFile)) {
+          await RNFS.unlink(oldFile).catch(() => {});
+        }
+      }
+
+      if (!force) {
+        const exists = await RNFS.exists(localFile);
+        if (exists && savedHash === hash) {
+          return localFile;
+        }
+      }
+
+      const { statusCode } = await RNFS.downloadFile({
+        fromUrl: url,
+        toFile: localFile,
+        cacheable: true,
+        readTimeout: 15000,
+        connectionTimeout: 10000,
+      }).promise;
+
+      if (statusCode === 200) {
+        storage.set(cacheKey, hash);
+        return localFile;
+      }
+    } catch {
+      return null;
+    }
+
+    return null;
+  })();
+
+  activeDownloads.set(hash, task);
+  return task;
+};
+
+type SplashCacheOptions = {
+  logoUrl?: string;
+  backgroundUrl?: string;
+  forceDownload?: boolean;
+};
+
+export const useSplashCache = ({
+  logoUrl,
+  backgroundUrl,
+  forceDownload = false,
+}: SplashCacheOptions) => {
+  const [state, setState] = useState({
+    isReady: false,
+    error: null as Error | null,
+  });
+
+  const setLogo = useSplashStore((s) => s.setLogoPath);
+  const setBackground = useSplashStore((s) => s.setBackdropPath);
+
+  useEffect(() => {
+    let mounted = true;
+
+    const syncAssets = async () => {
+      try {
+        const [logoPath, bgPath] = await Promise.all([
+          logoUrl
+            ? downloadAndCacheAsset(
+                logoUrl,
+                getFileExtension(logoUrl),
+                'splash_logo',
+                forceDownload
+              )
+            : Promise.resolve(null),
+          backgroundUrl
+            ? downloadAndCacheAsset(
+                backgroundUrl,
+                getFileExtension(backgroundUrl),
+                'splash_background',
+                forceDownload
+              )
+            : Promise.resolve(null),
+        ]);
+
+        if (!mounted) return;
+
+        if (logoPath) setLogo?.(logoPath);
+        if (bgPath) setBackground?.(bgPath);
+
+        setState({ isReady: true, error: null });
+      } catch (err) {
+        if (mounted) {
+          setState({ isReady: true, error: err as Error });
+        }
+      }
+    };
+
+    syncAssets();
+    return () => {
+      mounted = false;
+    };
+  }, [logoUrl, backgroundUrl, forceDownload, setLogo, setBackground]);
+
+  const logoPath = useSplashStore((s) => s.logo.localPath);
+  const bgPath = useSplashStore((s) => s.backdrop.localPath);
+
+  return {
+    state,
+    isLoading: !state.isReady && !state.error,
+    data: {
+      logoPath,
+      backgroundPath: bgPath,
+    },
+  };
+};

package/src/store/RecentSearchesStore.ts

@@ -68,7 +68,6 @@ export const useRecentSearchesStore = create<RecentSearchesState>()(
         if (hasData) {
           setTimeout(() => {
             useRecentSearchesStore.setState({ isLoading: false });
-            console.log('🔄 Zustand store rehydrated');
           }, 50);
         } else {
           useRecentSearchesStore.setState({ isLoading: false });

package/src/store/splashStore.ts

@@ -5,9 +5,9 @@
 
 import { create } from 'zustand';
 import { persist, createJSONStorage } from 'zustand/middleware';
-import { MMKV } from 'react-native-mmkv'; // Updated import
+import { MMKV } from 'react-native-mmkv';
 
-const mmkv = new MMKV(); // Initialize MMKV instance
+const mmkv = new MMKV();
 
 interface ImageState {
   localPath: string | null;
@@ -72,9 +72,9 @@ export const useSplashStore = create<SplashState>()(
     {
       name: 'splash-storage',
       storage: createJSONStorage(() => ({
-        getItem: (name) => mmkv.getString(name) || null, // Updated to use MMKV getString
-        setItem: (name, value) => mmkv.set(name, value), // Updated to use MMKV set
-        removeItem: (name) => mmkv.delete(name), // Updated to use MMKV delete
+        getItem: (name) => mmkv.getString(name) || null,
+        setItem: (name, value) => mmkv.set(name, value),
+        removeItem: (name) => mmkv.delete(name),
       })),
       partialize: (state) => ({
         logo: {

package/src/store/themeStore.ts

@@ -0,0 +1,53 @@
+import { create } from 'zustand';
+import { Appearance, type ColorSchemeName } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+
+const storage = new MMKV({ id: 'theme_store' });
+
+interface ThemeState {
+  isDarkMode: boolean;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
+
+const getInitialIsDarkMode = (): boolean => {
+  const storedMode = storage.getString('themeMode') as
+    | 'dark'
+    | 'light'
+    | 'system'
+    | null;
+  if (storedMode === 'dark') return true;
+  if (storedMode === 'light') return false;
+  return Appearance.getColorScheme() === 'dark';
+};
+
+export const useInternalThemeStore = create<ThemeState>((set) => ({
+  isDarkMode: getInitialIsDarkMode(),
+
+  setTheme: (mode) => {
+    let isDark: boolean;
+
+    if (mode === 'dark') {
+      isDark = true;
+    } else if (mode === 'light') {
+      isDark = false;
+    } else {
+      const systemColorScheme: ColorSchemeName = Appearance.getColorScheme();
+      isDark = systemColorScheme === 'dark';
+    }
+
+    storage.set('themeMode', mode);
+
+    set({ isDarkMode: isDark });
+  },
+}));
+
+Appearance.addChangeListener(() => {
+  const storedMode = storage.getString('themeMode') as
+    | 'dark'
+    | 'light'
+    | 'system'
+    | null;
+  if (!storedMode || storedMode === 'system') {
+    useInternalThemeStore.getState().setTheme('system');
+  }
+});

package/src/theme/ThemeProvider.tsx

@@ -1,135 +1,73 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Sat 26 Jul 2025 at 02:11 PM
+ * @lastModified Wed 22 Oct 2025 at 11:29 AM
  */
-import React, {
-  createContext,
-  useMemo,
-  useState,
-  useCallback,
-  useEffect,
-  useContext,
-  type ReactNode,
-} from 'react';
-import { View, StatusBar, Platform, Appearance } from 'react-native';
+
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { View } from 'react-native';
 import {
   SafeAreaProvider,
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
-import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { AppStatusBar } from '../components/common/AppStatusBar';
+
+import { useInternalTheme } from './hook/useInternalTheme';
+import { type ITheme, type ThemeOverride } from './themes';
 
 type ThemeContextType = {
-  theme: ITheme;
+  theme: {
+    dark: ITheme['colors'];
+    light: ITheme['colors'];
+  };
   isDarkMode: boolean;
-  toggleTheme: () => void;
-  setThemeOverride: (override?: Partial<AppTheme>) => void;
+  setTheme: (mode: 'light' | 'dark' | 'system') => void;
+  finalTheme: ITheme;
 };
 
 const ThemeContext = createContext<ThemeContextType | null>(null);
 
-export const useThemeContext = () => {
+/**
+ * Custom hook to access ZezoUI theme context.
+ */
+export const useTheme = (): ThemeContextType => {
   const ctx = useContext(ThemeContext);
-  if (!ctx) throw new Error('useTheme must be used within ZezoUIProvider');
+  if (!ctx) {
+    throw new Error('useTheme must be used within ZezoUIProvider');
+  }
   return ctx;
 };
 
 type ZezoUIProviderProps = {
   children: ReactNode;
-  theme?: Partial<AppTheme> & { dark?: boolean };
-  autoSwitchTheme?: boolean;
-};
-
-const getIsDarkMode = (
-  autoSwitchTheme: boolean | undefined,
-  colorScheme: 'dark' | 'light' | null,
-  userDark?: boolean
-): boolean => {
-  if (autoSwitchTheme) return colorScheme === 'dark';
-  return userDark ?? false;
+  theme?: ThemeOverride;
+  isDark?: boolean;
 };
 
+/**
+ * ZezoUIProvider — Wraps your app with theming, safe area, and gesture support.
+ */
 export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
   children,
-  theme,
-  autoSwitchTheme,
+  theme: overrideTheme,
+  isDark,
 }) => {
-  const colorScheme = Appearance.getColorScheme();
-  const [overrideTheme, setOverrideTheme] = useState<
-    Partial<AppTheme> | undefined
-  >(theme);
-
-  // ✅ Sync prop to state if changed externally
-  useEffect(() => {
-    if (theme) {
-      setOverrideTheme(theme);
-    }
-  }, [theme]);
-
-  // ✅ This prioritizes externally passed theme.dark
-  const isDarkMode = useMemo(() => {
-    if (theme?.dark !== undefined) return theme.dark;
-    return getIsDarkMode(
-      autoSwitchTheme,
-      colorScheme || 'dark',
-      overrideTheme?.dark
-    );
-  }, [theme?.dark, autoSwitchTheme, colorScheme, overrideTheme?.dark]);
-
-  const baseTheme = useMemo<ITheme>(
-    () => (isDarkMode ? DarkTheme : LightTheme),
-    [isDarkMode]
-  );
-
-  const mergedTheme = useMemo<ITheme>(() => {
-    return {
-      ...baseTheme,
-      ...overrideTheme,
-      dark: isDarkMode,
-      colors: {
-        ...baseTheme.colors,
-        ...(overrideTheme?.colors ?? {}),
-      },
-    };
-  }, [baseTheme, overrideTheme, isDarkMode]);
-
-  const toggleTheme = useCallback(() => {
-    if (autoSwitchTheme || theme?.dark !== undefined) return;
-    setOverrideTheme((prev) => ({
-      ...prev,
-      dark: !getIsDarkMode(false, null, prev?.dark),
-    }));
-  }, [autoSwitchTheme, theme?.dark]);
-
-  const setThemeOverride = useCallback((override?: Partial<AppTheme>) => {
-    setOverrideTheme(override);
-  }, []);
-
-  // ✅ Update StatusBar only when required
-
-  useEffect(() => {
-    StatusBar.setBarStyle(isDarkMode ? 'light-content' : 'dark-content', true);
-
-    if (Platform.OS === 'android') {
-      StatusBar.setBackgroundColor(mergedTheme.colors.background, true);
-    }
-  }, [isDarkMode, mergedTheme.colors.background]);
-  const contextValue = useMemo(
-    () => ({
-      theme: mergedTheme,
-      isDarkMode,
-      toggleTheme,
-      setThemeOverride,
-    }),
-    [mergedTheme, isDarkMode, toggleTheme, setThemeOverride]
-  );
+  const {
+    theme: finalTheme,
+    isDarkMode,
+    setTheme,
+    themeFull,
+  } = useInternalTheme(overrideTheme, isDark);
 
   return (
-    <GestureHandlerRootView>
+    <GestureHandlerRootView style={{ flex: 1 }}>
       <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-        <ThemeContext.Provider value={contextValue}>
+        <ThemeContext.Provider
+          value={{ theme: themeFull, isDarkMode, setTheme, finalTheme }}
+        >
+          <AppStatusBar theme={overrideTheme} />
           <View
-            style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
+            style={{ flex: 1, backgroundColor: finalTheme.colors.background }}
           >
             {children}
           </View>

package/src/theme/hook/index.ts

@@ -0,0 +1,2 @@
+export * from './useInternalTheme';
+export * from './useThemeStatusBar';

package/src/theme/hook/useInternalTheme.ts

@@ -0,0 +1,61 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sun 19 Oct 2025 at 08:29 PM
+ */
+import { useMemo, useEffect } from 'react';
+import {
+  DarkTheme,
+  LightTheme,
+  type ITheme,
+  type ThemeOverride,
+  type useInternalThemeReturn,
+} from '../themes';
+import { useInternalThemeStore } from '../../store/themeStore';
+
+export const useInternalTheme = (
+  override?: ThemeOverride,
+  isDark?: boolean
+): useInternalThemeReturn => {
+  const { isDarkMode: storeDarkMode, setTheme } = useInternalThemeStore();
+
+  const isDarkMode = isDark !== undefined ? isDark : storeDarkMode;
+
+  useEffect(() => {
+    if (isDark !== undefined) {
+      setTheme(isDark ? 'dark' : 'light');
+    }
+  }, [isDark, setTheme]);
+
+  const selectedOverride = useMemo(() => {
+    if (!override) return {};
+    const colors = isDarkMode ? override.dark : override.light;
+    return colors ?? {};
+  }, [override, isDarkMode]);
+  const baseTheme = useMemo(
+    () => (isDarkMode ? DarkTheme : LightTheme),
+    [isDarkMode]
+  );
+
+  const finalTheme = useMemo<ITheme>(() => {
+    return {
+      ...baseTheme,
+      colors: {
+        ...baseTheme.colors,
+        ...selectedOverride,
+      },
+    };
+  }, [baseTheme, selectedOverride]);
+
+  return useMemo(
+    () => ({
+      theme: finalTheme,
+      isDarkMode,
+      setTheme,
+      themeFull: {
+        light: (override?.light as ITheme['colors']) ?? LightTheme.colors,
+        dark: (override?.dark as ITheme['colors']) ?? DarkTheme.colors,
+      },
+    }),
+    [finalTheme, isDarkMode, override?.dark, override?.light, setTheme]
+  );
+};

package/src/theme/hook/useThemeStatusBar.ts

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 22 Oct 2025 at 10:29 AM
+ */
+/**
+ * Automatically syncs StatusBar color & style with current theme.
+ */
+import { useEffect } from 'react';
+import { StatusBar, Platform, type StatusBarStyle } from 'react-native';
+import Color from 'color';
+import type { ITheme } from '../themes';
+
+interface UseThemeStatusBarOptions {
+  theme: ITheme;
+  backgroundColor?: string;
+  barStyle?: StatusBarStyle;
+}
+
+export const useThemeStatusBar = ({
+  theme,
+  backgroundColor,
+  barStyle,
+}: UseThemeStatusBarOptions) => {
+  useEffect(() => {
+    const bgColor = backgroundColor ?? theme.colors.background;
+    const contentStyle: StatusBarStyle =
+      barStyle ?? (Color(bgColor).isDark() ? 'light-content' : 'dark-content');
+    StatusBar.setBarStyle(contentStyle, true);
+    if (Platform.OS === 'android') {
+      StatusBar.setBackgroundColor(bgColor, true);
+    }
+  }, [theme, backgroundColor, barStyle]);
+};

package/src/theme/index.ts

@@ -1,13 +1,7 @@
-import type { BaseColors, ITheme } from './themes';
-
 /**
  * @author Naresh Dhamu
  * @lastModified Sat 14 Jun 2025 at 11:47 AM
  */
-export type AppTheme = Omit<ITheme, 'colors'> & {
-  dark?: boolean;
-  colors?: Partial<BaseColors>;
-};
 
 export * from './ThemeProvider';
-export * from './hook/useTheme';
+export * from './themes';

package/src/theme/themes.ts

@@ -82,21 +82,34 @@ export type BaseColors = {
   switchThumbColor: string;
   switchTrackColorDisabled: string;
   switchThumbColorDisabled: string;
+
+  premiumIcon: string;
 };
 
 export interface ITheme {
-  dark: boolean;
-
   colors: BaseColors;
 }
+
 export type AppTheme = Omit<ITheme, 'colors'> & {
-  dark?: boolean;
   colors?: Partial<BaseColors>;
 };
 
-export const LightTheme: ITheme = {
-  dark: false,
+// New type for override object
+export type ThemeOverride = {
+  light?: Partial<BaseColors>;
+  dark?: Partial<BaseColors>;
+};
+export interface useInternalThemeReturn {
+  theme: ITheme;
+  themeFull: {
+    light: ITheme['colors'];
+    dark: ITheme['colors'];
+  };
+  isDarkMode: boolean;
+  setTheme: (mode: 'dark' | 'light' | 'system') => void;
+}
 
+export const LightTheme: ITheme = {
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(255, 255, 255, 1)',
@@ -194,11 +207,11 @@ export const LightTheme: ITheme = {
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
     switchThumbColorDisabled: 'white',
+    premiumIcon: '#CA091E',
   },
 };
 
 export const DarkTheme: ITheme = {
-  dark: true,
   colors: {
     primary: 'rgba(244, 197, 66, 1)',
     onPrimary: 'rgba(15, 23, 42, 1)',
@@ -295,5 +308,6 @@ export const DarkTheme: ITheme = {
     switchThumbColor: 'white',
     switchTrackColorDisabled: '#D5D5D5',
     switchThumbColorDisabled: 'white',
+    premiumIcon: '#CA091E',
   },
 };

package/src/types/content/content-view.types.ts

@@ -5,7 +5,7 @@
 
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 import type { ImageStyle as FastImageStyle } from 'react-native-fast-image';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { IContentData } from '../../types';
 import type { IGetSectionData, ISectionItem } from '../../types/sections';
 import type { MoreFetchData } from '../../types/hook/usePaginatedSetion';
@@ -121,7 +121,7 @@ export type SkeletonOverrides = Partial<{
 export type HeroBannerProps = {
   backgroundImage: IContentData['thumbnail'];
   title: IContentData['name'];
-  theme: ITheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
   onBackPress?: () => void;
@@ -129,13 +129,14 @@ export type HeroBannerProps = {
   renderButtons?: RenderButtons;
   renderSkeletons?: SkeletonOverrides;
   menuActions?: MenuAction[];
+  content_offering_type?: IContentData['content_offering_type'];
 };
 
 // 🟧 Final Component Props
 export type ComponentProps = {
   content: IContentData;
   seasons?: IContentData['seasons'];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   seasonsIsLoading?: boolean;
   recommendedContent?: ISectionItem | null;