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

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 { useInternalTheme } from '../../../../../theme/hook';
 
 interface IProps {
   width: number;
@@ -29,9 +31,11 @@ const SplashVideo: React.FC<IProps> = ({
   onLoaded,
   onError,
 }) => {
-  const videoRef = useRef<VideoRef>(null);
+  const { theme: applyTheme } = useInternalTheme();
+  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,6 +3,7 @@
  * @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';
@@ -12,6 +13,7 @@ import SignUp from './SignUp/SignUp';
 import { SplashScreen } from './SplashScreen/SplashScreen';
 
 const Auth = {
+  AuthProvider,
   LoginWithEmail,
   LoginWithPhone,
   SignUp,

package/src/components/BackgroundLayout/BackgroundLayout.tsx

@@ -7,8 +7,9 @@ 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 type { ThemeOverride } from '../../theme/themes';
+import { useSplashCache } from '../../hooks/useSplashCache';
+import { useInternalTheme } from '../../theme/hook';
 
 interface BackgroundLayoutProps {
   children: React.ReactNode;
@@ -17,7 +18,7 @@ interface BackgroundLayoutProps {
   gradientSplitBackground?: number;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'repeat' | 'center';
   innerContainerStyle?: ViewStyle;
-  theme: ITheme;
+  theme?: ThemeOverride;
   onImageError?: (error: Error) => void;
 }
 
@@ -30,12 +31,13 @@ export const BackgroundLayout: React.FC<BackgroundLayoutProps> = (props) => {
     resizeMode = 'cover',
     innerContainerStyle,
     onImageError,
-    theme,
+    theme: themeOverride,
   } = props;
 
+  const { theme } = useInternalTheme(themeOverride);
   const {
-    data: { localPathBackground },
-  } = useInitSplashCacheSync({
+    data: { backgroundPath: localPathBackground },
+  } = useSplashCache({
     backgroundUrl: backgroundImageUri || undefined,
   });
 

package/src/components/BlogView/BlogView.tsx

@@ -9,10 +9,10 @@ import {
 } from 'react-native';
 import Markdown from 'react-native-markdown-display';
 import { Text } from '../Text';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import AppHeader from '../Headers/AppHeader';
 import { scale, moderateScale } from 'react-native-size-matters';
-import type { AppTheme, ITheme } from '../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type BlogViewProps = {
@@ -20,7 +20,7 @@ type BlogViewProps = {
   containerStyle?: ViewStyle;
   scrollable?: boolean;
   emptyText?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 
   // Header customization
   headerTitle?: string;
@@ -51,7 +51,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
   renderEmpty,
   isLoading = false,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme, isDarkMode } = useInternalTheme(theme);
 
   const renderFinalHeader = () => {
     if (renderHeader) return renderHeader();
@@ -62,7 +62,7 @@ export const BlogView: React.FC<BlogViewProps> = ({
         onRightPress={onRightPress}
         title={headerTitle}
         titleAlign="left"
-        theme={appliedTheme}
+        theme={theme}
         titleStyle={{
           ...styles.headerTitle,
           color: appliedTheme.colors.onBackground,
@@ -83,7 +83,9 @@ export const BlogView: React.FC<BlogViewProps> = ({
     if (renderContent) return renderContent();
     if (content) {
       return (
-        <Markdown style={getMarkdownStyles(appliedTheme)}>{content}</Markdown>
+        <Markdown style={getMarkdownStyles(appliedTheme, isDarkMode)}>
+          {content}
+        </Markdown>
       );
     }
 
@@ -130,7 +132,10 @@ export const BlogView: React.FC<BlogViewProps> = ({
   );
 };
 
-const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
+const getMarkdownStyles = (
+  theme: ITheme,
+  isDarkMode: boolean
+): { [key: string]: TextStyle } => {
   const baseColor = theme.colors.textPrimary;
 
   return {
@@ -161,7 +166,7 @@ const getMarkdownStyles = (theme: ITheme): { [key: string]: TextStyle } => {
     ordered_list: { color: baseColor },
     link: { color: theme.colors.primary },
     blockquote: {
-      backgroundColor: theme.dark
+      backgroundColor: isDarkMode
         ? theme.colors.surfaceVariant
         : theme.colors.surface,
       color: theme.colors.onSurface,

package/src/components/Button/BackBtn.tsx

@@ -13,17 +13,17 @@ import {
 } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { BlurView } from '@react-native-community/blur';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 
 type BackBtnProps = {
   size?: number;
   color?: string;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   enableBlur?: boolean;
 };
 
@@ -36,7 +36,7 @@ const BackBtn: React.FC<BackBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
 
   const handlePress = () => {
     if (onPress) {

package/src/components/Button/MenuBtn.tsx

@@ -21,15 +21,15 @@ import {
 import { Ellipsis } from 'lucide-react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BlurView } from '@react-native-community/blur';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { MenuAction } from '../../types/content/content-view.types';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type MenuBtnProps = {
   actions: MenuAction[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   style?: StyleProp<ViewStyle>;
   enableBlur?: boolean;
 };
@@ -41,7 +41,7 @@ const MenuBtn: React.FC<MenuBtnProps> = ({
   enableBlur = false,
 }) => {
   const insets = useSafeAreaInsets();
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const [visible, setVisible] = useState(false);
   const [menuPosition, setMenuPosition] = useState<{
     top: number;

package/src/components/Button/PrimaryBtn.tsx

@@ -14,9 +14,9 @@ import {
   type TextStyle,
 } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { Text } from '../Text';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 type PrimaryBtnProps = {
@@ -27,7 +27,7 @@ type PrimaryBtnProps = {
   disabled?: boolean;
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
 };
 
 export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
@@ -40,7 +40,7 @@ export const PrimaryBtn: React.FC<PrimaryBtnProps> = ({
   titleStyle,
   theme,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const backgroundColor =
     disabled || loading
       ? appliedTheme.colors?.buttonDisabled

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 { useInternalTheme } from '../../theme/hook/useInternalTheme';
+import { Text } from '../Text';
+import type { ThemeOverride } 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?: ThemeOverride;
+  leftIcon?: React.ReactNode;
+};
+
+export const SecondaryBtn: React.FC<SecondaryBtnProps> = ({
+  title,
+  onPress,
+  loading = false,
+  loadingText = 'Loading...',
+  disabled = false,
+  containerStyle,
+  titleStyle,
+  leftIcon,
+  theme,
+}) => {
+  const { theme: appliedTheme } = useInternalTheme(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/TextButton.tsx

@@ -7,7 +7,7 @@ import {
   type TextStyle,
   type ViewStyle,
 } from 'react-native';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
@@ -37,7 +37,7 @@ const TextButton: React.FC<TextButtonProps> = ({
   align = 'center',
   leftIcon,
 }) => {
-  const { theme } = useTheme();
+  const { theme } = useInternalTheme();
 
   const alignSelfMap: Record<
     'left' | 'center' | 'right',

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/Category/Category.tsx

@@ -22,10 +22,10 @@ import {
   type ListRenderItemInfo,
 } from 'react-native';
 import { Text } from '../../../Text';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import { scale, verticalScale } from 'react-native-size-matters';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
-import type { AppTheme } from '../../../../theme/themes';
+import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ICategory = {
@@ -42,7 +42,7 @@ type CategoryCardProps = {
   category?: ICategory[];
   activeCategory?: ICategory;
   onPressCategory?: (category: ICategory) => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   mode?: 'text' | 'filled';
   isLoading?: boolean;
 };
@@ -68,7 +68,7 @@ const CategoryCard = React.memo(
     mode = 'text',
     isLoading = false,
   }: CategoryCardProps) => {
-    const { theme: appliedTheme } = useTheme(theme);
+    const { theme: appliedTheme } = useInternalTheme(theme);
     const flatListRef = useRef<FlatList<ICategory>>(null);
     const [itemWidths, setItemWidths] = useState<number[]>([]);
 
@@ -162,7 +162,7 @@ const CategoryCard = React.memo(
 
         const textColor = isFilledMode
           ? isSelected
-            ? appliedTheme.colors.black
+            ? appliedTheme.colors.buttonText
             : appliedTheme.colors.textPrimary
           : isSelected
             ? appliedTheme.colors.primary

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

@@ -26,16 +26,17 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
-import { useTheme } from '../../../../theme/hook/useTheme';
+import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import type {
   IContentData,
   IGetSectionData,
   MoreFetchData,
 } from '../../../../types';
-import type { AppTheme, ITheme } from '../../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
+import RentOrBuyIcon from '../components/RentOrBuyIcon';
 
 export interface IHistoryItem {
   _id: string;
@@ -56,7 +57,7 @@ type Props = {
   historyData?: IHistoryItem[];
   type: IGetSectionData['type'];
   moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   onPressItem?: (item: IContentData) => void;
   onPressMore?: (params: {
     section_id: IGetSectionData['_id'];
@@ -148,6 +149,10 @@ const NowWatchingItem = memo(
               }}
               style={styles.poster}
             >
+              <RentOrBuyIcon
+                theme={appliedTheme}
+                content_offering_type={item.content.content_offering_type}
+              />
               <LinearGradient
                 colors={['rgba(0,0,0,0.95)', 'transparent']}
                 start={{ x: 0, y: 1 }}
@@ -208,7 +213,7 @@ const NowWatching: React.FC<Props> = ({
 }) => {
   const flatListRef = useRef<FlatList<IHistoryItem>>(null);
   const onEndReachedCalledDuringMomentum = useRef(false);
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const styles = useMemo(
     () => getStyles(appliedTheme, itemWidth, borderRadius),
     [appliedTheme, itemWidth, borderRadius]
@@ -315,7 +320,7 @@ const NowWatching: React.FC<Props> = ({
             titleStyle,
           ]}
           containerStyle={styles.navigateToMoreContainer}
-          showAllProps={{ iconColor: appliedTheme.colors.textPrimary }}
+          showAllProps={{ iconColor: appliedTheme.colors.textPrimary, theme }}
         />
       )}
       {(isLoading || isLoadingHistory) && (