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

package/src/components/Auth/SplashScreen/SplashScreen.tsx

@@ -1,23 +1,27 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Wed 30 Jul 2025 at 03:21 PM
+ * @lastModified Fri 17 Oct 2025 at 09:51 PM
  */
 
 import React, { useEffect, useMemo, useCallback } from 'react';
+import { StatusBar, type ViewStyle } from 'react-native';
+import Color from 'color';
+
 import SplashImage from './components/SplashImage/SplashImage';
 import SplashVideo from './components/SplashVideo/SplashVideo';
 import SplashLottie from './components/SplashLottie/SplashLottie';
-import { StatusBar, type ViewStyle } from 'react-native';
-import type { AppTheme } from '../../../theme/themes';
+
 import { useTheme } from '../../../theme';
-import { useInitSplashCacheSync } from '../../../hooks/useInitSplashCacheSync';
+import type { AppTheme } from '../../../theme/themes';
+
 import { BackgroundLayout } from '../../BackgroundLayout/BackgroundLayout';
-import Color from 'color';
-type SplashSourceType = 'image' | 'video' | 'lottie-animation';
+import { useSplashCache } from '../../../hooks/useSplashCache';
+
+type SplashType = 'image' | 'video' | 'lottie-animation';
 
 type SplashScreenConfig = {
   source: string;
-  type?: SplashSourceType;
+  type?: SplashType;
   width: number;
   height: number;
   isStatic?: boolean;
@@ -28,6 +32,7 @@ type SplashScreenConfig = {
 };
 
 type SplashScreenProps = {
+  logoUrl: string;
   splashScreenConfig: SplashScreenConfig;
   innerContainerStyle?: ViewStyle;
   onRedirect: () => void;
@@ -40,20 +45,11 @@ type SplashScreenProps = {
   };
 };
 
-const DEFAULT_IMAGE_TIMEOUT_SECONDS = 5;
+const DEFAULT_IMAGE_TIMEOUT = 5;
+const FALLBACK_TIMEOUT = 0.5;
 
 export const SplashScreen: React.FC<SplashScreenProps> = ({
-  splashScreenConfig: {
-    source: splashSource,
-    type: splashType = 'image',
-    width,
-    height,
-    isStatic = false,
-    screenTime,
-    fullscreen = false,
-    resizeMode = 'contain',
-    backgroundColor: splashBackgroundColor,
-  },
+  splashScreenConfig,
   innerContainerStyle,
   backgroundImage = {
     gradientSplitBackground: 0.4,
@@ -62,32 +58,39 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   onRedirect,
   theme: overrideTheme,
 }) => {
-  const isRemoteSource = useMemo(
-    () => splashSource.startsWith('http'),
-    [splashSource]
-  );
-  const { theme: resolvedTheme } = useTheme(overrideTheme);
+  const {
+    source: splashSource,
+    type: splashType = 'image',
+    width,
+    height,
+    isStatic = false,
+    screenTime,
+    fullscreen = false,
+    resizeMode = 'contain',
+    backgroundColor: splashBgColor,
+  } = splashScreenConfig;
 
+  const { theme } = useTheme(overrideTheme);
+  const isRemote = splashSource.startsWith('http');
   const isImageSplash = splashType === 'image';
-  const backgroundImageUri =
+
+  const backgroundImageUrl =
     isImageSplash && backgroundImage.source?.startsWith('http')
       ? backgroundImage.source
       : undefined;
 
-  const {
-    data: { localPathLogo },
-  } = useInitSplashCacheSync({
-    logoUrl: isRemoteSource ? splashSource : undefined,
-    backgroundUrl: backgroundImageUri,
+  const { data } = useSplashCache({
+    logoUrl: isRemote ? splashSource : undefined,
+    backgroundUrl: backgroundImageUrl,
   });
 
   const resolvedSplashUri =
-    isRemoteSource && localPathLogo ? localPathLogo : splashSource;
-  const effectiveTimeout = useMemo(() => {
-    const timeout =
-      screenTime ??
-      (isImageSplash || isStatic ? DEFAULT_IMAGE_TIMEOUT_SECONDS : 0);
-    return Number.isFinite(timeout) ? Number(timeout) : 0;
+    isRemote && data.logoPath ? data.logoPath : splashSource;
+
+  const displayTimeout = useMemo(() => {
+    if (typeof screenTime === 'number' && screenTime > 0) return screenTime;
+    if (isImageSplash || isStatic) return DEFAULT_IMAGE_TIMEOUT;
+    return 0;
   }, [screenTime, isImageSplash, isStatic]);
 
   const handleRedirect = useCallback(() => {
@@ -99,17 +102,12 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   }, [onRedirect]);
 
   useEffect(() => {
-    const fallbackTimeout = 0.5; // fallback to 0.5s even if 0
-    const timeout = effectiveTimeout > 0 ? effectiveTimeout : fallbackTimeout;
-    const timer = setTimeout(() => {
-      handleRedirect();
-    }, timeout * 1000);
-    return () => {
-      clearTimeout(timer);
-    };
-  }, [effectiveTimeout, handleRedirect]);
-
-  const splashComponentProps = useMemo(
+    const timeoutSec = displayTimeout > 0 ? displayTimeout : FALLBACK_TIMEOUT;
+    const timer = setTimeout(handleRedirect, timeoutSec * 1000);
+    return () => clearTimeout(timer);
+  }, [displayTimeout, handleRedirect]);
+
+  const splashProps = useMemo(
     () => ({
       source: resolvedSplashUri,
       width,
@@ -121,60 +119,71 @@ export const SplashScreen: React.FC<SplashScreenProps> = ({
   );
 
   const renderSplashContent = useCallback(() => {
+    const videoExtensions = ['.mp4', '.mov', '.mkv', '.webm', '.avi', '.3gp'];
+    const LOTTIE_EXTENSIONS = ['.json', '.lottie'];
     switch (splashType) {
       case 'video':
-        return (
+        const isVideoFile = videoExtensions.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
+        );
+
+        return isVideoFile ? (
           <SplashVideo
-            {...splashComponentProps}
-            onEnd={effectiveTimeout ? undefined : handleRedirect}
+            {...splashProps}
+            onEnd={displayTimeout ? undefined : handleRedirect}
           />
+        ) : null;
+
+      case 'lottie-animation': {
+        const isLottieFile = LOTTIE_EXTENSIONS.some((ext) =>
+          resolvedSplashUri.toLowerCase().endsWith(ext)
         );
-      case 'lottie-animation':
-        return (
+
+        return isLottieFile ? (
           <SplashLottie
-            {...splashComponentProps}
-            onAnimationFinish={effectiveTimeout ? undefined : handleRedirect}
+            {...splashProps}
+            onAnimationFinish={displayTimeout ? undefined : handleRedirect}
           />
-        );
+        ) : null;
+      }
+
       case 'image':
       default:
-        return <SplashImage {...splashComponentProps} />;
+        return <SplashImage {...splashProps} />;
     }
-  }, [splashType, splashComponentProps, effectiveTimeout, handleRedirect]);
-  const getSafeBackgroundColor = (
-    inputColor: string | undefined,
-    fallbackColor: string
-  ): string => {
+  }, [
+    splashType,
+    resolvedSplashUri,
+    splashProps,
+    displayTimeout,
+    handleRedirect,
+  ]);
+
+  /** 🎨 Safe Background Color Calculation */
+  const safeBgColor = useMemo(() => {
     try {
-      if (!inputColor) return fallbackColor;
-
-      const parsedColor = Color(inputColor);
-      const alpha = parsedColor.alpha(); // 0 to 1
-
-      if (alpha < 0.8) return fallbackColor; // ✅ your condition
-
-      return parsedColor.hex(); // Always convert to solid hex
-    } catch (e) {
-      return fallbackColor;
+      if (!splashBgColor) return theme.colors.background;
+      const c = Color(splashBgColor);
+      return c.alpha() < 0.8 ? theme.colors.background : c.hex();
+    } catch {
+      return theme.colors.background;
     }
-  };
-  const colorToUse = getSafeBackgroundColor(
-    splashBackgroundColor,
-    resolvedTheme.colors.background
-  );
-  const isDark = Color(colorToUse).isDark();
-  const statusBarStyle: 'light-content' | 'dark-content' = isDark
+  }, [splashBgColor, theme.colors.background]);
+
+  const statusBarStyle: 'light-content' | 'dark-content' = Color(
+    safeBgColor
+  ).isDark()
     ? 'light-content'
     : 'dark-content';
 
   return (
     <BackgroundLayout
       backgroundImage={isImageSplash ? backgroundImage.source : undefined}
-      backgroundColor={splashBackgroundColor}
+      backgroundColor={splashBgColor}
       resizeMode={backgroundImage.resizeMode ?? 'cover'}
       innerContainerStyle={innerContainerStyle}
       onImageError={backgroundImage.onImageError}
-      theme={resolvedTheme}
+      theme={theme}
       gradientSplitBackground={backgroundImage.gradientSplitBackground ?? 0.4}
     >
       <StatusBar

package/src/components/Auth/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,10 +1,12 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Mon 09 Jun 2025 at 04:29 PM
+ * @lastModified Thu 17 Oct 2025
  */
-import React, { useRef, useMemo, useCallback } from 'react';
-import Video, { type VideoRef } from 'react-native-video';
+import React, { useMemo, useCallback, useState } from 'react';
+import { View, StyleSheet, Animated } from 'react-native';
+import Video from 'react-native-video';
 import Display from '../../../../../utils/Display';
+import { useTheme } from '../../../../../theme';
 
 interface IProps {
   width: number;
@@ -29,9 +31,11 @@ const SplashVideo: React.FC<IProps> = ({
   onLoaded,
   onError,
 }) => {
-  const videoRef = useRef<VideoRef>(null);
+  const { theme: applyTheme } = useTheme();
+  const [loaded, setLoaded] = useState(false);
+  const fadeAnim = useMemo(() => new Animated.Value(0), []);
 
-  // Memoize video style to prevent unnecessary recalculations
+  // Video style
   const videoStyle = useMemo(
     () => ({
       width: fullscreen ? Display.fullWidth : width,
@@ -40,21 +44,31 @@ const SplashVideo: React.FC<IProps> = ({
     [fullscreen, width, height]
   );
 
-  // Optimize event handlers with useCallback
+  // Event handlers
   const handleLoadStart = useCallback(() => {
+    setLoaded(false);
+    fadeAnim.setValue(0); // Reset fade animation
     onLoadStart?.();
-  }, [onLoadStart]);
+  }, [onLoadStart, fadeAnim]);
 
   const handleLoad = useCallback(
     (data: any) => {
+      setLoaded(true);
+
+      // Fade-in animation
+      Animated.timing(fadeAnim, {
+        toValue: 1,
+        duration: 400, // 0.4s smooth fade
+        useNativeDriver: true,
+      }).start();
+
       onLoaded?.(data);
     },
-    [onLoaded]
+    [onLoaded, fadeAnim]
   );
 
   const handleError = useCallback(
     (e: any) => {
-      // More robust error handling
       const error =
         e?.error?.message ||
         e?.message ||
@@ -62,52 +76,88 @@ const SplashVideo: React.FC<IProps> = ({
         e ||
         'Unknown video error';
       console.error('Video playback error:', error);
+      setLoaded(false);
       onError?.(error);
     },
     [onError]
   );
+
   const resolveUri = (src?: string): string => {
     if (!src) return '';
     if (
       src.startsWith('http') ||
       src.startsWith('https') ||
       src.startsWith('file://')
-    )
+    ) {
       return src;
+    }
     return `file://${src}`;
   };
+
   return (
-    <Video
-      ref={videoRef}
-      source={{ uri: resolveUri(source) }}
-      style={videoStyle}
-      resizeMode={resizeMode}
-      paused={false}
-      onLoadStart={handleLoadStart}
-      onLoad={handleLoad}
-      onError={handleError}
-      onEnd={onEnd}
-      controlsStyles={{
-        hideForward: true,
-        hideDuration: true,
-        hideFullscreen: true,
-        hidePlayPause: true,
-        hideNavigationBarOnFullScreenMode: true,
-        hideNotificationBarOnFullScreenMode: true,
-        hideNext: true,
-        hidePosition: true,
-        hidePrevious: true,
-        hideRewind: true,
-        hideSeekBar: true,
-        hideSettingButton: true,
-      }}
-      ignoreSilentSwitch="obey"
-      playInBackground={false}
-      playWhenInactive={false}
-      allowsExternalPlayback={false}
-      automaticallyWaitsToMinimizeStalling={true}
-    />
+    <View
+      style={[
+        videoStyle,
+        styles.wrapper,
+        { backgroundColor: applyTheme.colors.background },
+      ]}
+    >
+      {/* Black background layer */}
+      {!loaded && (
+        <View
+          style={[
+            videoStyle,
+            styles.blackLayer,
+            { backgroundColor: applyTheme.colors.background },
+          ]}
+        />
+      )}
+
+      {/* Animated video */}
+      <Animated.View style={[videoStyle, { opacity: fadeAnim }]}>
+        <Video
+          source={{ uri: resolveUri(source) }}
+          style={videoStyle}
+          resizeMode={resizeMode}
+          paused={false}
+          onLoadStart={handleLoadStart}
+          onLoad={handleLoad}
+          onError={handleError}
+          onEnd={onEnd}
+          controlsStyles={{
+            hideForward: true,
+            hideDuration: true,
+            hideFullscreen: true,
+            hidePlayPause: true,
+            hideNavigationBarOnFullScreenMode: true,
+            hideNotificationBarOnFullScreenMode: true,
+            hideNext: true,
+            hidePosition: true,
+            hidePrevious: true,
+            hideRewind: true,
+            hideSeekBar: true,
+            hideSettingButton: true,
+          }}
+          ignoreSilentSwitch="obey"
+          playInBackground={false}
+          playWhenInactive={false}
+          allowsExternalPlayback={false}
+          automaticallyWaitsToMinimizeStalling
+        />
+      </Animated.View>
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  wrapper: {
+    overflow: 'hidden',
+  },
+  blackLayer: {
+    ...StyleSheet.absoluteFillObject,
+
+    zIndex: 1,
+  },
+});
+
 export default React.memo(SplashVideo);

package/src/components/Auth/index.ts

@@ -3,20 +3,24 @@
  * @lastModified Fri 13 Jun 2025 at 11:11 AM
  */
 
+import AuthProvider from './AuthProvider/AuthProvider';
 import ForgotPassword from './ForgotPassword/ForgotPassword';
 import LoginWithEmail from './Login/LoginWithEmail';
 import LoginWithPhone from './Login/LoginWithPhone';
 import OTP from './OTP/OTP';
+import QrLogin from './QrLogin/QrLogin';
 import SignUp from './SignUp/SignUp';
 import { SplashScreen } from './SplashScreen/SplashScreen';
 
 const Auth = {
+  AuthProvider,
   LoginWithEmail,
   LoginWithPhone,
   SignUp,
   OTP,
   ForgotPassword,
   SplashScreen,
+  QrLogin,
 };
 
 export { Auth };

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -7,8 +7,8 @@ import {
   type ImageStyle,
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
-import { useInitSplashCacheSync } from '../../hooks/useInitSplashCacheSync';
 import type { ITheme } from '../../theme/themes';
+import { useSplashCache } from '../../hooks/useSplashCache';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
@@ -34,8 +34,8 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
   } = props;
 
   const {
-    data: { localPathBackground },
-  } = useInitSplashCacheSync({
+    data: { backgroundPath: localPathBackground },
+  } = useSplashCache({
     backgroundUrl: backgroundImageUri || undefined,
   });
 

package/src/components/Button/SecondaryBtn.tsx

@@ -0,0 +1,116 @@
+/**
+ * @author Ashok Desai
+ * @lastModified Mon 06 Oct 2025 at 03:45 PM
+ */
+
+import React from 'react';
+import {
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+  View,
+  type GestureResponderEvent,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import { Text } from '../Text';
+import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
+
+type SecondaryBtnProps = {
+  title: string;
+  onPress?: (event: GestureResponderEvent) => void;
+  loading?: boolean;
+  loadingText?: string;
+  disabled?: boolean;
+  containerStyle?: ViewStyle;
+  titleStyle?: TextStyle;
+  theme?: AppTheme;
+  leftIcon?: React.ReactNode;
+};
+
+export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  leftIcon,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+
+  const backgroundColor =
+    disabled || loading
+      ? appliedTheme.colors?.buttonDisabled
+      : appliedTheme.colors?.button;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      disabled={disabled || loading}
+      activeOpacity={0.8}
+      style={[styles.button, { backgroundColor }, containerStyle]}
+      accessibilityRole="button"
+      accessibilityState={{ disabled: disabled || loading }}
+    >
+      <View style={styles.row}>
+        {leftIcon && <View style={{ marginRight: scale(8) }}>{leftIcon}</View>}
+
+        {loading ? (
+          <>
+            <ActivityIndicator
+              color={appliedTheme.colors.buttonText}
+              style={{ marginRight: scale(6) }}
+            />
+            <Text
+              style={[
+                styles.text,
+                { color: appliedTheme.colors.buttonText, opacity: 0.75 },
+                titleStyle,
+              ]}
+            >
+              {loadingText}
+            </Text>
+          </>
+        ) : (
+          <Text
+            style={[
+              styles.text,
+              { color: appliedTheme.colors.buttonText },
+              titleStyle,
+            ]}
+          >
+            {title}
+          </Text>
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    width: '100%',
+    alignSelf: 'stretch',
+    paddingVertical: verticalScale(12),
+    paddingHorizontal: scale(16),
+    borderRadius: scale(6),
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    textAlign: 'center',
+    fontSize: RFValue(13),
+    fontWeight: '600',
+  },
+});

package/src/components/Button/index.ts

@@ -5,10 +5,12 @@
 
 import BackBtn from './BackBtn';
 import { PrimaryBtn } from './PrimaryBtn';
+import { SecondaryBtn } from './SecondaryBtn';
 import TextButton from './TextButton';
 
 const Button = {
   Primary: PrimaryBtn,
+  Secondary: SecondaryBtn,
   BackBtn,
   TextButton,
 };

package/src/components/Content/Card/NowWatching/NowWatching.tsx

@@ -36,6 +36,7 @@ import type {
 import type { AppTheme, ITheme } from '../../../../theme/themes';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../components/RentOrBuyIcon';
 
 export interface IHistoryItem {
   _id: string;
@@ -148,6 +149,9 @@ const NowWatchingItem = memo(
               }}
               style={styles.poster}
             >
+              <RentOrBuyIcon
+                content_offering_type={item.content.content_offering_type}
+              />
               <LinearGradient
                 colors={['rgba(0,0,0,0.95)', 'transparent']}
                 start={{ x: 0, y: 1 }}

package/src/components/Content/Card/Sliders/Styles/One.tsx

@@ -22,6 +22,7 @@ import type { IContentData, ISectionContent } from '../../../../../types';
 import type { AppTheme } from '../../../../../theme/themes';
 import { useTheme } from '../../../../../theme/hook/useTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 
 // Constants
 const DEFAULT_SKELETON_COUNT = 3;
@@ -89,6 +90,7 @@ const SliderOne: React.FC<SliderOneProps> = ({
     ({ item }: { item: IContentData }) => (
       <View style={styles.sliderContainer}>
         <ImageTouchable onImagePress={() => onPressItem?.(item)}>
+          <RentOrBuyIcon content_offering_type={item.content_offering_type} />
           <FastImage
             source={{
               uri: item.thumbnail,

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -21,6 +21,7 @@ import { ThumbnailCard } from '../../components/ThumbnailCard';
 import type { IContentData, ISectionContent } from '../../../../../types';
 import type { AppTheme } from '../../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);
@@ -74,6 +75,7 @@ const SliderTwo: React.FC<SliderTwoProps> = ({
         accessibilityRole="button"
         accessibilityLabel={`View ${item.name}`}
       >
+        <RentOrBuyIcon content_offering_type={item.content_offering_type} />
         <ThumbnailCard
           thumbnailUri={item.thumbnail}
           theme={appliedTheme}

package/src/components/Content/Card/Styles/Five.tsx

@@ -134,6 +134,7 @@ const MovieCardFive: React.FC<MovieCardFiveProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}

package/src/components/Content/Card/Styles/Four.tsx

@@ -139,6 +139,7 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             renderItemImage({ item, index })
           ) : (
             <CardPoster
+              content_offering_type={item.content_offering_type}
               posterUri={item.poster}
               theme={appliedTheme}
               borderRadius={borderRadius}