@zezosoft/zezo-ott-react-native-ui-kit 1.0.0 → 1.0.2

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

@@ -17,7 +17,7 @@ import {
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
@@ -26,6 +26,7 @@ import FastImage from 'react-native-fast-image';
 import LinearGradient from 'react-native-linear-gradient';
 import { Text } from '../../../Text';
 import CardPoster from '../components/CardPoster';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const DEFAULT_ITEM_WIDTH = moderateScale(120);
 const DEFAULT_ITEM_HEIGHT = moderateScale(180);
@@ -106,9 +107,6 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
   );
   const renderItem = useCallback(
     ({ item, index }: { item: IContentData; index: number }) => {
-      const lastIndex = listData.length - 1;
-      const isLastItem = index === lastIndex && lastIndex >= 9;
-
       return (
         <TouchableOpacity
           style={[styles.item, index === 0 && styles.firstItem, itemStyle]}
@@ -120,7 +118,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
               posterUri={item.poster}
               isLoading={isLoading}
               borderRadius={borderRadius}
-              posterWrapperStyle={[styles.image, isLastItem && styles.lastImage]}
+              posterWrapperStyle={[styles.image]}
               resizeMode={FastImage.resizeMode.cover}
               theme={appliedTheme}
             />
@@ -139,12 +137,10 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
       );
     },
     [
-      listData.length,
       styles.item,
       styles.firstItem,
       styles.imageOverlay,
       styles.image,
-      styles.lastImage,
       styles.numberContainer,
       styles.rankNumberBox,
       styles.rankNumberText,
@@ -162,6 +158,7 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
         key={`skeleton-${index}`}
         highlightColor={appliedTheme.colors.skeletonHighlightColor}
         backgroundColor={appliedTheme.colors.skeletonBaseColor}
+        borderRadius={borderRadius}
       >
         <SkeletonPlaceholder.Item
           width={itemWidth}
@@ -245,12 +242,13 @@ const TopTenCard: React.FC<TopTenCardProps> = ({
             <SkeletonPlaceholder
               highlightColor={appliedTheme.colors.skeletonHighlightColor}
               backgroundColor={appliedTheme.colors.skeletonBaseColor}
+              borderRadius={borderRadius}
               speed={800}
             >
               <View style={[styles.item, styles.skeletonItem]}>
                 <SkeletonPlaceholder.Item width={itemWidth} height={itemHeight} borderRadius={borderRadius} />
                 <View style={styles.numberContainer}>
-                  <SkeletonPlaceholder.Item width={scale(40)} height={scale(40)} borderTopRightRadius={scale(30)} />
+                  <SkeletonPlaceholder.Item width={scale(40)} height={scale(40)} borderRadius={borderRadius} />
                 </View>
               </View>
             </SkeletonPlaceholder>
@@ -278,7 +276,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       position: 'relative'
     },
     firstItem: {
-      marginLeft: moderateScale(12)
+      marginLeft: moderateScale(10)
     },
     imageOverlay: {
       width: '100%',
@@ -291,9 +289,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       height: '100%',
       borderRadius: radius
     },
-    lastImage: {
-      marginLeft: scale(50)
-    },
+
     rankNumberBox: {
       width: scale(40),
       height: scale(40),
@@ -302,7 +298,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       alignItems: 'center'
     },
     rankNumberText: {
-      fontSize: scale(28),
+      fontSize: RFValue(27),
       fontWeight: '900',
       color: theme.colors.textPrimary,
       textShadowColor: 'rgba(0, 0, 0, 0.6)',
@@ -326,7 +322,7 @@ const getStyles = (theme: ITheme, width: number, height: number, radius: number)
       paddingRight: moderateScale(20)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600',
       color: theme.colors.textPrimary
     },

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

@@ -23,9 +23,10 @@ import { moderateScale, verticalScale } from 'react-native-size-matters';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { IContentData, IGetSectionData, ISectionContent, MoreFetchData } from '../../../../types';
 import type { AppTheme, ITheme } from '../../../../theme/themes';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import CardPoster from '../components/CardPoster';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Defaults
 const DEFAULT_WIDTH = moderateScale(172);
@@ -131,21 +132,21 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
               borderRadius={borderRadius}
               posterWrapperStyle={styles.image}
               resizeMode={FastImage.resizeMode.cover}
-              isLoading={isPaginating}
+              isLoading={isLoading}
             />
           )}
         </TouchableOpacity>
       );
     },
     [
-      renderItemImage,
       styles.item,
       styles.firstItem,
       styles.image,
       itemStyle,
+      renderItemImage,
       appliedTheme,
       borderRadius,
-      isPaginating,
+      isLoading,
       handleItemPress
     ]
   );
@@ -235,6 +236,7 @@ const MovieCardTwo: React.FC<MovieCardTwoProps> = ({
             <SkeletonPlaceholder
               highlightColor={appliedTheme.colors.skeletonHighlightColor}
               backgroundColor={appliedTheme.colors.skeletonBaseColor}
+              borderRadius={borderRadius}
             >
               <SkeletonPlaceholder.Item
                 width={itemWidth}
@@ -264,7 +266,7 @@ const getStyles = (theme: ITheme, width: number, radius: number) =>
       backgroundColor: theme.colors.background ?? '#2c2c2c'
     },
     firstItem: {
-      marginLeft: moderateScale(12)
+      marginLeft: moderateScale(10)
     },
     image: {
       width: '100%',
@@ -273,11 +275,11 @@ const getStyles = (theme: ITheme, width: number, radius: number) =>
       backgroundColor: theme.colors.background ?? '#222'
     },
     navigateToMoreContainer: {
-      paddingHorizontal: moderateScale(12),
+      paddingHorizontal: moderateScale(10),
       marginBottom: verticalScale(8)
     },
     title: {
-      fontSize: moderateScale(14),
+      fontSize: RFValue(13),
       fontWeight: '600'
     },
     listContent: {

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

@@ -2,6 +2,11 @@
  * @author Naresh Dhamu
  * @lastModified Wed 02 Jul 2025 at 10:29 AM
  */
+/**
+ * @author Naresh Dhamu
+ * @lastModified Wed 02 Jul 2025 at 10:29 AM
+ */
+
 import React, { useState, useEffect, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import type { ImageStyle as FastImageStyle, ImageStyle, ResizeMode } from 'react-native-fast-image';
@@ -11,6 +16,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type CardPosterProps = {
   posterUri: string;
@@ -34,11 +40,6 @@ const CardPoster: React.FC<CardPosterProps> = ({
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
 
-  useEffect(() => {
-    setImageLoading(true);
-    setImageError(false);
-  }, [posterUri]);
-
   const hasValidPoster = useMemo(() => {
     if (!posterUri || typeof posterUri !== 'string') return false;
 
@@ -48,11 +49,18 @@ const CardPoster: React.FC<CardPosterProps> = ({
       /\.(jpg|jpeg|png|webp|gif|bmp)$/i.test(cleaned)
     );
   }, [posterUri]);
+
   useEffect(() => {
     if (hasValidPoster) {
+      setImageLoading(true);
+      setImageError(false);
       FastImage.preload([{ uri: posterUri }]);
+    } else {
+      setImageLoading(false);
+      setImageError(true);
     }
   }, [posterUri, hasValidPoster]);
+
   const showSkeleton = isLoading || (imageLoading && !imageError && hasValidPoster);
 
   const fallbackImageStyle: ImageStyle = useMemo(
@@ -105,16 +113,17 @@ const CardPoster: React.FC<CardPosterProps> = ({
             if (hasValidPoster) {
               setImageLoading(true);
               setImageError(false);
+            } else {
+              setImageLoading(false);
+              setImageError(true);
             }
           }}
           onLoad={() => {
             setImageLoading(false);
           }}
           onError={() => {
-            setTimeout(() => {
-              setImageLoading(false);
-              setImageError(true);
-            }, 100);
+            setImageLoading(false);
+            setImageError(true);
           }}
         />
       )}
@@ -123,7 +132,11 @@ const CardPoster: React.FC<CardPosterProps> = ({
         <View
           style={[
             styles.fallbackWrapper,
-            { borderRadius, backgroundColor: theme.colors.background, borderColor: theme.colors.error }
+            {
+              borderRadius,
+              backgroundColor: theme.colors.background,
+              borderColor: theme.colors.error
+            }
           ]}
         >
           <View
@@ -199,6 +212,6 @@ const styles = StyleSheet.create({
   },
   fallbackText: {
     marginTop: scale(4),
-    fontSize: scale(10)
+    fontSize: RFValue(9)
   }
 });

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

@@ -5,9 +5,10 @@
 
 import React from 'react';
 import { StyleSheet, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
-import { scale, verticalScale } from 'react-native-size-matters';
+import { verticalScale } from 'react-native-size-matters';
 import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
 import { Text } from '../../../Text';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 interface IProps {
   title: string;
@@ -51,8 +52,8 @@ const styles = StyleSheet.create({
     justifyContent: 'center'
   },
   title: {
-    fontSize: scale(13),
-    fontWeight: '600',
+    fontSize: RFValue(13),
+    fontWeight: '500',
     textTransform: 'capitalize'
   }
 });

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

@@ -8,8 +8,9 @@ import { TouchableOpacity, StyleSheet, type StyleProp, type ViewStyle } from 're
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
-import { useTheme } from '../../../../theme';
+import { useTheme } from '../../../../theme/hook/useTheme';
 import type { AppTheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type NoContentFallbackProps = {
   message?: string;
@@ -102,12 +103,12 @@ const styles = StyleSheet.create({
     paddingVertical: verticalScale(40)
   },
   emoji: {
-    fontSize: scale(64),
+    fontSize: RFValue(63),
     marginBottom: verticalScale(16),
     textAlign: 'center'
   },
   message: {
-    fontSize: scale(16),
+    fontSize: RFValue(15),
     textAlign: 'center',
     fontWeight: '500',
     lineHeight: verticalScale(22),
@@ -120,7 +121,7 @@ const styles = StyleSheet.create({
     borderWidth: scale(1)
   },
   retryText: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     fontWeight: '600',
     textAlign: 'center'
   }

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

@@ -12,6 +12,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type ThumbnailCardProps = {
   thumbnailUri?: string;
@@ -145,6 +146,6 @@ const styles = StyleSheet.create({
   },
   fallbackText: {
     marginTop: scale(4),
-    fontSize: scale(10)
+    fontSize: RFValue(9)
   }
 });

package/src/components/Content/Content.tsx

@@ -4,6 +4,7 @@
  */
 import React, { useMemo } from 'react';
 import {
+  ActivityIndicator,
   FlatList,
   type FlatListProps,
   type NativeScrollEvent,
@@ -31,6 +32,7 @@ export type IContentLoading = {
   category?: boolean;
   history?: boolean;
   section?: boolean;
+  InfiniteScrollIsLoading?: boolean;
 };
 export interface IContentProps {
   contentData: {
@@ -74,16 +76,42 @@ const AnimatedFlatList = Animated.createAnimatedComponent(
 interface FooterProps {
   isEmpty: boolean;
   ErrorComponent?: React.ReactNode;
+  InfiniteScrollIsLoading?: boolean;
+  InfiniteScrollLoaderComponent?: React.ReactNode;
 }
 
-const ContentFooter = ({ isEmpty, ErrorComponent }: FooterProps) => {
+const ContentFooter = ({
+  isEmpty,
+  ErrorComponent,
+  InfiniteScrollIsLoading,
+  InfiniteScrollLoaderComponent
+}: FooterProps) => {
+  if (InfiniteScrollIsLoading) {
+    return (
+      InfiniteScrollLoaderComponent ?? (
+        <Animated.View
+          style={{
+            paddingVertical: scale(30),
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          <ActivityIndicator size="small" />
+        </Animated.View>
+      )
+    );
+  }
+
   if (isEmpty) {
     return ErrorComponent ? <>{ErrorComponent}</> : <NoContentFallback />;
   }
+
   return null;
 };
+
 export const Content: React.FC<IContentProps> = ({
   customComponents,
+  InfiniteScrollLoaderComponent,
   LoaderComponent,
   ErrorComponent,
   onScroll,
@@ -98,10 +126,6 @@ export const Content: React.FC<IContentProps> = ({
   isLoading
 }) => {
   const sectionData = useMemo<IGetSectionData[]>(() => contentData?.sectionData ?? [], [contentData?.sectionData]);
-  const onEndReachedHandler = () => {
-    onEndReached?.();
-  };
-
   const headerComponent = useMemo(() => {
     if (!contentData?.category || contentData.category.length === 0) return null;
 
@@ -167,9 +191,16 @@ export const Content: React.FC<IContentProps> = ({
       data={isLoading?.section ? dummySections : sectionData}
       renderItem={renderItem as any}
       keyExtractor={(_item, index) => index.toString()}
-      onEndReached={onEndReachedHandler}
+      onEndReached={() => onEndReached?.()}
       ListHeaderComponent={headerComponent}
-      ListFooterComponent={<ContentFooter isEmpty={isEmpty} ErrorComponent={ErrorComponent} />}
+      ListFooterComponent={
+        <ContentFooter
+          InfiniteScrollLoaderComponent={InfiniteScrollLoaderComponent}
+          InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
+          isEmpty={isEmpty}
+          ErrorComponent={ErrorComponent}
+        />
+      }
       onEndReachedThreshold={0.7}
       contentContainerStyle={[
         {

package/src/components/Content/Sections.tsx

@@ -67,7 +67,7 @@ const renderDefaultComponent = (
     case 'slider':
       return <Sliders.Styles.One {...commonProps} showPlayIcon={props.sectionProps?.showPlayBtn} />;
     case 'slider_style_2':
-      return <Sliders.Styles.Tow {...commonProps} />;
+      return <Sliders.Styles.Two {...commonProps} />;
     case 'normal':
       return <Cards.Styles.One {...commonProps} />;
     case 'new_releases':

package/src/components/ContentView/ContentView.tsx

@@ -9,7 +9,7 @@ import { HeroBanner } from './components/HeroBanner';
 import { GenreTags } from './components/GenreTags';
 import { AboutSection } from './components/AboutSection';
 import { Title } from './components/Title';
-import { useTheme } from '../../theme';
+import { useTheme } from '../../theme/hook/useTheme';
 import { CastCard } from './components/CastCard';
 import Cards from '../Content/Card';
 import { scale } from 'react-native-size-matters';
@@ -34,8 +34,8 @@ export const ContentView = ({
 }: ComponentProps) => {
   const { theme: appliedTheme } = useTheme(theme);
   const seekTime = history?.currentTime || 0;
-  const isComplete = history?.completed || 0;
-  const currentEpisode = history?.current_episode || 0;
+  const isComplete = history?.completed || false;
+  const currentEpisode = history?.current_episode;
   return (
     <ScrollView
       showsVerticalScrollIndicator={false}
@@ -47,14 +47,14 @@ export const ContentView = ({
         title={content?.name}
         theme={appliedTheme}
         isLoading={isLoading}
-        onPressPlay={() =>
+        onPressPlay={({ is_trailer }) =>
           events?.onPlay?.({
             id: content._id,
             slug: content.slug,
             type: content.type,
             current_episode: currentEpisode,
-            mode: 'normal',
-            is_trailer: false,
+            mode: 'fullscreen',
+            is_trailer,
             seekTime: isComplete ? 0 : seekTime
           })
         }