@zezosoft/zezo-ott-react-native-ui-kit 1.0.3 → 1.0.5

package/src/components/User/ProfileUpdate/ProfileUpdate.tsx

@@ -0,0 +1,263 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 03 Oct 2025 at 01:09 PM
+ */
+import { useCallback } from 'react';
+import {
+  View,
+  StyleSheet,
+  KeyboardAvoidingView,
+  Platform,
+  TouchableWithoutFeedback,
+  Keyboard,
+  TouchableOpacity,
+} from 'react-native';
+import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { RFValue } from 'react-native-responsive-fontsize';
+import { Camera } from 'lucide-react-native';
+import { useForm, Controller } from 'react-hook-form';
+import { Text } from '../../Text';
+import AppHeader from '../../Headers/AppHeader';
+import { useTheme } from '../../../theme/hook/useTheme';
+import type { AppTheme } from '../../../theme/themes';
+import UserAvatar from '../components/UserAvatar';
+import { Input } from '../../Input/Input';
+import { Button } from '../../Button';
+import ImageCropPicker, { type Image } from 'react-native-image-crop-picker';
+
+export type ProfileUpdateFormValues = {
+  fullName: string;
+  avatarFile?: Image;
+};
+
+export type ProfileUpdateProps = {
+  title?: string;
+  name?: string;
+  avatarUri?: string;
+  onBackPress?: () => void;
+  onSubmit?: (val: { fullName: string; avatarFile?: Image }) => void;
+  theme?: AppTheme;
+  loading?: boolean;
+  onError?: (error: { message: string }) => void;
+};
+
+export const ProfileUpdate = ({
+  title = 'My Profile',
+  name = '',
+  avatarUri = '',
+  onBackPress,
+  onSubmit,
+  theme,
+  loading = false,
+  onError,
+}: ProfileUpdateProps) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const { colors } = appliedTheme;
+
+  const {
+    control,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    setValue,
+    watch,
+  } = useForm<ProfileUpdateFormValues>({
+    defaultValues: {
+      fullName: name,
+      avatarFile: avatarUri ? ({ path: avatarUri } as Image) : undefined,
+    },
+    mode: 'onChange',
+    reValidateMode: 'onBlur',
+  });
+
+  const avatar = watch('avatarFile');
+
+  const handlePickImage = async () => {
+    try {
+      const image = await ImageCropPicker.openPicker({
+        width: 400,
+        height: 400,
+        cropping: true,
+        showCropGuidelines: false,
+        cropperCircleOverlay: true,
+        showCropFrame: false,
+        compressImageQuality: 0.7,
+        mediaType: 'photo',
+      });
+
+      if (image?.path && image?.path !== '' && image.path !== avatarUri) {
+        setValue('avatarFile', image, {
+          shouldValidate: true,
+          shouldDirty: true,
+        });
+      } else {
+        onError?.({ message: 'No image selected' });
+      }
+    } catch (error) {
+      const message = (error as Error).message;
+      onError?.({ message });
+    }
+  };
+
+  const handleFormSubmit = useCallback(
+    (data: ProfileUpdateFormValues) => {
+      Keyboard.dismiss();
+
+      const hasNewAvatar =
+        data.avatarFile?.path && data.avatarFile.path !== avatarUri;
+
+      onSubmit?.({
+        fullName: data.fullName,
+        ...(hasNewAvatar ? { avatarFile: data.avatarFile } : {}),
+      });
+    },
+    [avatarUri, onSubmit]
+  );
+
+  return (
+    <KeyboardAvoidingView
+      style={[styles.container, { backgroundColor: colors.background }]}
+      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+    >
+      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
+        <View style={{ flex: 1 }}>
+          <AppHeader
+            title={title}
+            onBackPress={onBackPress}
+            theme={appliedTheme}
+            titleAlign="left"
+          />
+
+          <View style={styles.content}>
+            <View style={styles.avatarBox}>
+              <UserAvatar
+                avatarUri={avatar?.path}
+                theme={appliedTheme}
+                size={100}
+              />
+              <TouchableOpacity
+                style={[
+                  styles.cameraBtn,
+                  {
+                    borderColor: colors.button,
+                    backgroundColor: colors.surfaceVariant,
+                    shadowColor: colors.shadow || colors.surface,
+                  },
+                ]}
+                activeOpacity={0.8}
+                onPress={handlePickImage}
+              >
+                <Camera
+                  size={moderateScale(13)}
+                  color={colors.button}
+                  strokeWidth={2}
+                />
+              </TouchableOpacity>
+            </View>
+
+            <Text style={[styles.label, { color: colors.textPrimary }]}>
+              Basic Detail
+            </Text>
+
+            <View style={styles.formContainer}>
+              <Controller
+                control={control}
+                name="fullName"
+                rules={{
+                  required: 'Name is required',
+                  minLength: { value: 3, message: 'At least 3 characters' },
+                }}
+                render={({ field: { onChange, value, onBlur } }) => (
+                  <View style={{ width: '100%' }}>
+                    <Input.One
+                      label="Full Name"
+                      value={value}
+                      onChangeText={(text) => {
+                        onChange(text);
+                        trigger('fullName');
+                      }}
+                      onBlur={onBlur}
+                      placeholder={'Enter your full name'}
+                      placeholderTextColor={colors.textDisabled}
+                      containerStyle={{ marginTop: verticalScale(20) }}
+                      theme={appliedTheme}
+                      returnKeyType="done"
+                      onSubmitEditing={handleSubmit(handleFormSubmit)}
+                    />
+                    {errors.fullName && (
+                      <Text style={[styles.errorText, { color: colors.error }]}>
+                        {errors.fullName.message}
+                      </Text>
+                    )}
+                  </View>
+                )}
+              />
+
+              <Button.Primary
+                title={'Update Profile'}
+                onPress={handleSubmit(handleFormSubmit)}
+                theme={appliedTheme}
+                titleStyle={{ fontSize: RFValue(14) }}
+                loading={loading}
+                containerStyle={{ marginTop: verticalScale(5) }}
+              />
+            </View>
+          </View>
+        </View>
+      </TouchableWithoutFeedback>
+    </KeyboardAvoidingView>
+  );
+};
+
+export default ProfileUpdate;
+
+namespace ProfileUpdate {
+  export type Props = ProfileUpdateProps;
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    padding: moderateScale(16),
+  },
+  avatarBox: {
+    marginVertical: verticalScale(20),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  cameraBtn: {
+    position: 'absolute',
+    bottom: scale(3),
+    right: scale(3),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    borderRadius: scale(13.5),
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    elevation: 3,
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.2,
+    shadowRadius: 1.5,
+  },
+  label: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+    alignSelf: 'flex-start',
+    margin: scale(5),
+    marginTop: verticalScale(10),
+  },
+  formContainer: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: RFValue(11),
+    marginTop: verticalScale(5),
+    marginLeft: scale(5),
+    alignSelf: 'flex-start',
+  },
+});

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

@@ -116,6 +116,7 @@ export const WatchHistory: React.FC<WatchHistoryProps> = ({
         activeOpacity={0.8}
       >
         <CardPoster
+          content_offering_type={item?.content?.content_offering_type}
           theme={appliedTheme}
           isLoading={isLoading}
           posterUri={item?.content?.poster}

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

@@ -216,6 +216,7 @@ export const WatchLater: React.FC<WatchLaterProps> = ({
         activeOpacity={0.8}
       >
         <CardPoster
+          content_offering_type={item?.content?.content_offering_type}
           theme={appliedTheme}
           isLoading={isLoading}
           posterUri={item?.content?.poster}

package/src/components/User/components/UserAvatar.tsx

@@ -1,5 +1,10 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Fri 17 Oct 2025 at 10:16 PM
+ */
 import React, { useState } from 'react';
 import { Image, StyleSheet, View } from 'react-native';
+import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
 import { useTheme } from '../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../theme/themes';
@@ -18,25 +23,53 @@ const UserAvatar: React.FC<UserAvatarProps> = ({
   theme,
 }) => {
   const [imageError, setImageError] = useState(false);
+  const [loading, setLoading] = useState(!!avatarUri);
   const { theme: appliedTheme } = useTheme(theme);
-  const borderColor = appliedTheme.colors.primary;
+  const borderColor = appliedTheme.colors.primary || '#ccc';
+  const skeletonBaseColor = appliedTheme.colors.skeletonBaseColor || '#E0E0E0';
+  const skeletonHighlightColor =
+    appliedTheme.colors.skeletonHighlightColor || '#F5F5F5';
 
   return (
     <View style={styles(size).wrapper}>
+      {loading && (
+        <SkeletonPlaceholder
+          backgroundColor={skeletonBaseColor}
+          highlightColor={skeletonHighlightColor}
+          borderRadius={size / 2}
+        >
+          <SkeletonPlaceholder.Item
+            width={size}
+            height={size}
+            borderRadius={size / 2}
+          />
+        </SkeletonPlaceholder>
+      )}
+
       <Image
         source={imageError || !avatarUri ? fallbackAvatar : { uri: avatarUri }}
-        style={[styles(size).avatar, { borderColor }]}
-        onError={() => setImageError(true)}
+        style={[styles(size).avatar, { borderColor, position: 'absolute' }]}
+        onError={() => {
+          setImageError(true);
+          setLoading(false);
+        }}
+        onLoadStart={() => setLoading(true)}
+        onLoadEnd={() => setLoading(false)}
       />
     </View>
   );
 };
 
 export default UserAvatar;
+
 const styles = (size: number) =>
   StyleSheet.create({
     wrapper: {
+      width: size,
+      height: size,
       position: 'relative',
+      justifyContent: 'center',
+      alignItems: 'center',
     },
     avatar: {
       width: size,

package/src/components/User/components/UserSection.tsx

@@ -80,7 +80,7 @@ const UserSection: React.FC<UserSectionProps> = ({
                   styles.editButton,
                   {
                     borderColor: appliedTheme.colors.primary,
-                    backgroundColor: appliedTheme.colors.white,
+                    backgroundColor: appliedTheme.colors.surfaceVariant,
                     shadowColor: appliedTheme.colors.surface,
                   },
                 ]}
@@ -88,12 +88,10 @@ const UserSection: React.FC<UserSectionProps> = ({
                   color: appliedTheme.colors.surfaceDisabled,
                 }}
               >
-                <View style={styles.editContent}>
-                  <Edit3
-                    size={moderateScale(14)}
-                    color={appliedTheme.colors.primary}
-                  />
-                </View>
+                <Edit3
+                  size={moderateScale(13)}
+                  color={appliedTheme.colors.primary}
+                />
               </Pressable>
             )}
           </>
@@ -143,8 +141,10 @@ const styles = {
     position: 'absolute',
     bottom: scale(2),
     right: scale(2),
-    width: scale(22),
-    height: scale(22),
+    padding: scale(2),
+    width: scale(23),
+    height: scale(23),
+    overflow: 'hidden',
     borderRadius: scale(11),
     alignItems: 'center',
     justifyContent: 'center',
@@ -154,10 +154,7 @@ const styles = {
     shadowOpacity: 0.1,
     shadowRadius: 0.5,
   } as ViewStyle,
-  editContent: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  } as ViewStyle,
+
   editLabel: {
     fontSize: RFValue(8),
     marginTop: verticalScale(1),

package/src/components/User/index.ts

@@ -6,4 +6,6 @@
 import { WatchHistory } from './WatchHistory/WatchHistory';
 import { WatchLater } from './WatchLater/WatchLater';
 import { DeviceSessions } from './DeviceSessions/DeviceSessions';
-export { WatchHistory, WatchLater, DeviceSessions };
+import { ProfileUpdate } from './ProfileUpdate/ProfileUpdate';
+
+export { WatchHistory, WatchLater, DeviceSessions, ProfileUpdate };

package/src/components/index.ts

@@ -22,3 +22,4 @@ export * from './ContentView';
 export * from './Search';
 export * from './Subscription';
 export * from './Alert';
+export * from './Reels';

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/theme/ThemeProvider.tsx

@@ -17,6 +17,7 @@ import {
   initialWindowMetrics,
 } from 'react-native-safe-area-context';
 import { LightTheme, DarkTheme, type ITheme, type AppTheme } from './themes';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 type ThemeContextType = {
   theme: ITheme;
@@ -124,14 +125,16 @@ export const ZezoUIProvider: React.FC<ZezoUIProviderProps> = ({
   );
 
   return (
-    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
-      <ThemeContext.Provider value={contextValue}>
-        <View
-          style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
-        >
-          {children}
-        </View>
-      </ThemeContext.Provider>
-    </SafeAreaProvider>
+    <GestureHandlerRootView>
+      <SafeAreaProvider initialMetrics={initialWindowMetrics}>
+        <ThemeContext.Provider value={contextValue}>
+          <View
+            style={{ flex: 1, backgroundColor: mergedTheme.colors.background }}
+          >
+            {children}
+          </View>
+        </ThemeContext.Provider>
+      </SafeAreaProvider>
+    </GestureHandlerRootView>
   );
 };

package/src/theme/themes.ts

@@ -51,6 +51,7 @@ export type BaseColors = {
   shadow: string;
   scrim: string;
   backdrop: string;
+  overlay: string;
 
   inverseSurface: string;
   inverseOnSurface: string;
@@ -140,6 +141,7 @@ export const LightTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.1)',
     scrim: 'rgba(0, 0, 0, 0.2)',
     backdrop: 'rgba(243, 244, 246, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(31, 41, 55, 1)',
     inverseOnSurface: 'rgba(249, 250, 251, 1)',
@@ -241,6 +243,7 @@ export const DarkTheme: ITheme = {
     shadow: 'rgba(0, 0, 0, 0.5)',
     scrim: 'rgba(0, 0, 0, 0.4)',
     backdrop: 'rgba(30, 41, 59, 0.7)',
+    overlay: 'rgba(0,0,0,0.55)',
 
     inverseSurface: 'rgba(229, 231, 235, 1)',
     inverseOnSurface: 'rgba(31, 41, 55, 1)',

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

@@ -129,6 +129,7 @@ export type HeroBannerProps = {
   renderButtons?: RenderButtons;
   renderSkeletons?: SkeletonOverrides;
   menuActions?: MenuAction[];
+  content_offering_type?: IContentData['content_offering_type'];
 };
 
 // 🟧 Final Component Props

package/src/utils/Formater.ts

@@ -0,0 +1,14 @@
+export function formatCount(count: number): string {
+  if (count < 1000) {
+    return count.toString();
+  } else if (count < 1000000) {
+    const thousands = count / 1000;
+    return thousands % 1 === 0 ? `${thousands}K` : `${thousands.toFixed(1)}K`;
+  } else if (count < 1000000000) {
+    const millions = count / 1000000;
+    return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
+  } else {
+    const billions = count / 1000000000;
+    return billions % 1 === 0 ? `${billions}B` : `${billions.toFixed(1)}B`;
+  }
+}