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

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

@@ -1,15 +1,10 @@
-/**
- * @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';
+import type {
+  ImageStyle as FastImageStyle,
+  ImageStyle,
+  ResizeMode,
+} from 'react-native-fast-image';
 import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
@@ -35,7 +30,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
   borderRadius = scale(6),
   posterWrapperStyle,
   imageStyle,
-  resizeMode = FastImage.resizeMode.cover
+  resizeMode = FastImage.resizeMode.cover,
 }) => {
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
@@ -61,7 +56,8 @@ const CardPoster: React.FC<CardPosterProps> = ({
     }
   }, [posterUri, hasValidPoster]);
 
-  const showSkeleton = isLoading || (imageLoading && !imageError && hasValidPoster);
+  const showSkeleton =
+    isLoading || (imageLoading && !imageError && hasValidPoster);
 
   const fallbackImageStyle: ImageStyle = useMemo(
     () => ({
@@ -70,7 +66,7 @@ const CardPoster: React.FC<CardPosterProps> = ({
       borderRadius,
       position: 'absolute',
       top: 0,
-      left: 0
+      left: 0,
     }),
     [borderRadius]
   );
@@ -83,9 +79,9 @@ const CardPoster: React.FC<CardPosterProps> = ({
         {
           borderRadius,
           backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow
+          shadowColor: theme.colors.shadow,
         },
-        posterWrapperStyle
+        posterWrapperStyle,
       ]}
     >
       {showSkeleton && (
@@ -95,7 +91,9 @@ const CardPoster: React.FC<CardPosterProps> = ({
             highlightColor={theme.colors.skeletonHighlightColor}
             speed={1000}
           >
-            <SkeletonPlaceholder.Item style={[styles.skeleton, { borderRadius }]} />
+            <SkeletonPlaceholder.Item
+              style={[styles.skeleton, { borderRadius }]}
+            />
           </SkeletonPlaceholder>
         </View>
       )}
@@ -105,9 +103,13 @@ const CardPoster: React.FC<CardPosterProps> = ({
           source={{
             uri: posterUri,
             cache: FastImage.cacheControl.immutable,
-            priority: FastImage.priority.normal
+            priority: FastImage.priority.normal,
           }}
-          style={[fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle]}
+          style={[
+            fallbackImageStyle,
+            showSkeleton ? styles.hidden : styles.visible,
+            imageStyle,
+          ]}
           resizeMode={resizeMode}
           onLoadStart={() => {
             if (hasValidPoster) {
@@ -135,16 +137,16 @@ const CardPoster: React.FC<CardPosterProps> = ({
             {
               borderRadius,
               backgroundColor: theme.colors.background,
-              borderColor: theme.colors.error
-            }
+              borderColor: theme.colors.error,
+            },
           ]}
         >
           <View
             style={[
               styles.fallback,
               {
-                backgroundColor: theme.colors.errorContainer
-              }
+                backgroundColor: theme.colors.errorContainer,
+              },
             ]}
           >
             <ImageOff size={scale(18)} color={theme.colors.error} />
@@ -165,13 +167,13 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 2 / 3,
     overflow: 'hidden',
-    position: 'relative'
+    position: 'relative',
   },
   defaultPosterWrapper: {
     shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.1,
     shadowRadius: 3,
-    elevation: 2
+    elevation: 2,
   },
   skeletonWrapper: {
     position: 'absolute',
@@ -179,17 +181,17 @@ const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     aspectRatio: 2 / 3,
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   skeleton: {
     width: '100%',
-    aspectRatio: 2 / 3
+    aspectRatio: 2 / 3,
   },
   visible: {
-    opacity: 1
+    opacity: 1,
   },
   hidden: {
-    opacity: 0
+    opacity: 0,
   },
   fallbackWrapper: {
     position: 'absolute',
@@ -199,7 +201,7 @@ const styles = StyleSheet.create({
     aspectRatio: 2 / 3,
     borderWidth: scale(1),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   fallback: {
     position: 'absolute',
@@ -208,10 +210,10 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 2 / 3,
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   fallbackText: {
     marginTop: scale(4),
-    fontSize: RFValue(9)
-  }
+    fontSize: RFValue(9),
+  },
 });

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

@@ -4,7 +4,13 @@
  */
 
 import React from 'react';
-import { StyleSheet, View, type StyleProp, type TextStyle, type ViewStyle } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
 import { verticalScale } from 'react-native-size-matters';
 import ShowAllButton, { type ShowAllButtonProps } from './ShowAllButton';
 import { Text } from '../../../Text';
@@ -23,12 +29,16 @@ const NavigateToMore: React.FC<IProps> = ({
   title,
   titleStyle,
   containerStyle,
-  showAllProps
+  showAllProps,
 }): React.ReactElement => {
   return (
     <View style={[styles.container, containerStyle]}>
       <View style={styles.titleWrapper}>
-        <Text style={[styles.title, titleStyle]} numberOfLines={1} ellipsizeMode="tail">
+        <Text
+          style={[styles.title, titleStyle]}
+          numberOfLines={1}
+          ellipsizeMode="tail"
+        >
           {title}
         </Text>
       </View>
@@ -45,15 +55,15 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     marginBottom: verticalScale(6),
-    marginTop: verticalScale(1)
+    marginTop: verticalScale(1),
   },
   titleWrapper: {
     flex: 1,
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   title: {
     fontSize: RFValue(13),
     fontWeight: '500',
-    textTransform: 'capitalize'
-  }
+    textTransform: 'capitalize',
+  },
 });

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

@@ -3,9 +3,18 @@
  * @lastModified Wed 25 Jun 2025 at 11:59 AM
  */
 
-import React, { useCallback } from 'react';
-import { TouchableOpacity, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import { useCallback } from 'react';
+import {
+  TouchableOpacity,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
+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/hook/useTheme';
@@ -27,7 +36,7 @@ const NoContentFallback = ({
   onRetry,
   theme,
   emoji = '😔',
-  style
+  style,
 }: NoContentFallbackProps) => {
   const { theme: appliedTheme } = useTheme(theme);
   const scaleValue = useSharedValue(1);
@@ -41,22 +50,30 @@ const NoContentFallback = ({
   }, [scaleValue]);
 
   const animatedButtonStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: scaleValue.value }]
+    transform: [{ scale: scaleValue.value }],
   }));
 
   return (
     <Animated.View
-      style={[styles.container, style, { backgroundColor: appliedTheme.colors.background }]}
+      style={[
+        styles.container,
+        style,
+        { backgroundColor: appliedTheme.colors.background },
+      ]}
       accessibilityLabel="No content available"
       accessibilityHint="Check back later or try again"
     >
-      <Animated.Text style={[styles.emoji, { color: appliedTheme.colors.textPrimary }]}>{emoji}</Animated.Text>
+      <Animated.Text
+        style={[styles.emoji, { color: appliedTheme.colors.textPrimary }]}
+      >
+        {emoji}
+      </Animated.Text>
       <Text
         style={[
           styles.message,
           {
-            color: appliedTheme.colors.textSecondary
-          }
+            color: appliedTheme.colors.textSecondary,
+          },
         ]}
       >
         {message}
@@ -70,8 +87,8 @@ const NoContentFallback = ({
             styles.retryButton,
             {
               backgroundColor: appliedTheme.colors.primary,
-              borderColor: appliedTheme.colors.outline
-            }
+              borderColor: appliedTheme.colors.outline,
+            },
           ]}
           accessibilityLabel={retryText}
           accessibilityRole="button"
@@ -81,8 +98,8 @@ const NoContentFallback = ({
               style={[
                 styles.retryText,
                 {
-                  color: appliedTheme.colors.textPrimary
-                }
+                  color: appliedTheme.colors.textPrimary,
+                },
               ]}
             >
               {retryText}
@@ -100,31 +117,31 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     paddingHorizontal: scale(20),
-    paddingVertical: verticalScale(40)
+    paddingVertical: verticalScale(40),
   },
   emoji: {
     fontSize: RFValue(63),
     marginBottom: verticalScale(16),
-    textAlign: 'center'
+    textAlign: 'center',
   },
   message: {
     fontSize: RFValue(15),
     textAlign: 'center',
     fontWeight: '500',
     lineHeight: verticalScale(22),
-    marginBottom: verticalScale(20)
+    marginBottom: verticalScale(20),
   },
   retryButton: {
     paddingHorizontal: scale(24),
     paddingVertical: verticalScale(12),
     borderRadius: scale(8),
-    borderWidth: scale(1)
+    borderWidth: scale(1),
   },
   retryText: {
     fontSize: RFValue(13),
     fontWeight: '600',
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 });
 
 export default NoContentFallback;

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

@@ -11,7 +11,7 @@ import {
   type GestureResponderEvent,
   type StyleProp,
   type TextStyle,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { moderateScale, scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
@@ -38,7 +38,7 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
   iconPosition = 'right',
   IconComponent,
   textStyle,
-  containerStyle
+  containerStyle,
 }): React.ReactElement => {
   const icon = IconComponent ?? (
     <View style={styles.iconWrapper}>
@@ -47,7 +47,11 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
   );
 
   return (
-    <TouchableOpacity style={[styles.buttonContainer, containerStyle]} onPress={onPress} activeOpacity={0.7}>
+    <TouchableOpacity
+      style={[styles.buttonContainer, containerStyle]}
+      onPress={onPress}
+      activeOpacity={0.7}
+    >
       <View style={[styles.innerRow, { columnGap: moderateScale(gap) }]}>
         {iconPosition === 'left' && icon}
         <Text style={[styles.text, textStyle]}>{text}</Text>
@@ -62,22 +66,22 @@ export default ShowAllButton;
 const styles = StyleSheet.create({
   buttonContainer: {
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   innerRow: {
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   iconWrapper: {
     justifyContent: 'center',
     alignItems: 'center',
-    alignSelf: 'center'
+    alignSelf: 'center',
   },
   text: {
     fontSize: RFValue(9),
     fontWeight: '400',
     textTransform: 'capitalize',
-    letterSpacing: 0.3
-  }
+    letterSpacing: 0.3,
+  },
 });

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

@@ -5,7 +5,10 @@
 
 import React, { useState } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
-import type { ImageStyle as FastImageStyle, ResizeMode } from 'react-native-fast-image';
+import type {
+  ImageStyle as FastImageStyle,
+  ResizeMode,
+} from 'react-native-fast-image';
 import FastImage from 'react-native-fast-image';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale } from 'react-native-size-matters';
@@ -31,7 +34,7 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
   borderRadius = scale(6),
   wrapperStyle,
   imageStyle,
-  resizeMode = FastImage.resizeMode.cover
+  resizeMode = FastImage.resizeMode.cover,
 }) => {
   const [imageLoading, setImageLoading] = useState(true);
   const [imageError, setImageError] = useState(false);
@@ -45,7 +48,7 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
     borderRadius,
     position: 'absolute',
     top: 0,
-    left: 0
+    left: 0,
   };
 
   return (
@@ -55,9 +58,9 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
         {
           borderRadius,
           backgroundColor: theme.colors.background,
-          shadowColor: theme.colors.shadow
+          shadowColor: theme.colors.shadow,
         },
-        wrapperStyle
+        wrapperStyle,
       ]}
     >
       {showSkeleton && (
@@ -66,7 +69,9 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
             backgroundColor={theme.colors.skeletonBaseColor}
             highlightColor={theme.colors.skeletonHighlightColor}
           >
-            <SkeletonPlaceholder.Item style={[styles.skeleton, { borderRadius }]} />
+            <SkeletonPlaceholder.Item
+              style={[styles.skeleton, { borderRadius }]}
+            />
           </SkeletonPlaceholder>
         </View>
       )}
@@ -74,7 +79,11 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
       {hasValidThumbnail && (
         <FastImage
           source={{ uri: thumbnailUri }}
-          style={[fallbackImageStyle, showSkeleton ? styles.hidden : styles.visible, imageStyle]}
+          style={[
+            fallbackImageStyle,
+            showSkeleton ? styles.hidden : styles.visible,
+            imageStyle,
+          ]}
           resizeMode={resizeMode}
           onLoadStart={() => {
             setImageLoading(true);
@@ -95,8 +104,8 @@ export const ThumbnailCard: React.FC<ThumbnailCardProps> = ({
             {
               borderRadius,
               backgroundColor: theme.colors.errorContainer,
-              borderColor: theme.colors.error
-            }
+              borderColor: theme.colors.error,
+            },
           ]}
         >
           <ImageOff size={scale(18)} color={theme.colors.error} />
@@ -114,7 +123,7 @@ const styles = StyleSheet.create({
     width: '100%',
     aspectRatio: 16 / 9,
     overflow: 'hidden',
-    position: 'relative'
+    position: 'relative',
   },
   skeletonWrapper: {
     position: 'absolute',
@@ -122,17 +131,17 @@ const styles = StyleSheet.create({
     left: 0,
     width: '100%',
     aspectRatio: 16 / 9,
-    overflow: 'hidden'
+    overflow: 'hidden',
   },
   skeleton: {
     width: '100%',
-    aspectRatio: 16 / 9
+    aspectRatio: 16 / 9,
   },
   visible: {
-    opacity: 1
+    opacity: 1,
   },
   hidden: {
-    opacity: 0
+    opacity: 0,
   },
   fallback: {
     position: 'absolute',
@@ -142,10 +151,10 @@ const styles = StyleSheet.create({
     aspectRatio: 16 / 9,
     borderWidth: scale(1),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   fallbackText: {
     marginTop: scale(4),
-    fontSize: RFValue(9)
-  }
+    fontSize: RFValue(9),
+  },
 });

package/src/components/Content/Card/index.ts

@@ -23,8 +23,8 @@ const Cards = {
     TopTen: TopTen,
     RotateCarousel,
     NowWatching,
-    Category: CategoryCard
-  }
+    Category: CategoryCard,
+  },
 };
 
 export default Cards;

package/src/components/Content/Content.tsx

@@ -10,10 +10,13 @@ import {
   type NativeScrollEvent,
   type NativeSyntheticEvent,
   type StyleProp,
-  type ViewStyle
+  type ViewStyle,
 } from 'react-native';
 import { scale } from 'react-native-size-matters';
-import Animated, { type AnimatedStyle, type SharedValue } from 'react-native-reanimated';
+import Animated, {
+  type AnimatedStyle,
+  type SharedValue,
+} from 'react-native-reanimated';
 
 import SectionType from './Sections';
 import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
@@ -46,8 +49,12 @@ export interface IContentProps {
   InfiniteScrollLoaderComponent?: React.ReactNode;
   onScroll?:
     | ((event: NativeSyntheticEvent<NativeScrollEvent>) => void)
-    | SharedValue<((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined>;
-  contentContainerStyle?: StyleProp<ViewStyle> | AnimatedStyle<StyleProp<ViewStyle>>;
+    | SharedValue<
+        ((event: NativeSyntheticEvent<NativeScrollEvent>) => void) | undefined
+      >;
+  contentContainerStyle?:
+    | StyleProp<ViewStyle>
+    | AnimatedStyle<StyleProp<ViewStyle>>;
   onEndReached?: () => void;
   theme?: AppTheme;
   autoSwitchTheme?: boolean;
@@ -84,7 +91,7 @@ const ContentFooter = ({
   isEmpty,
   ErrorComponent,
   InfiniteScrollIsLoading,
-  InfiniteScrollLoaderComponent
+  InfiniteScrollLoaderComponent,
 }: FooterProps) => {
   if (InfiniteScrollIsLoading) {
     return (
@@ -93,7 +100,7 @@ const ContentFooter = ({
           style={{
             paddingVertical: scale(30),
             alignItems: 'center',
-            justifyContent: 'center'
+            justifyContent: 'center',
           }}
         >
           <ActivityIndicator size="small" />
@@ -123,11 +130,15 @@ export const Content: React.FC<IContentProps> = ({
   sectionProps,
   moreFetchData,
   moreFetchDataHistory,
-  isLoading
+  isLoading,
 }) => {
-  const sectionData = useMemo<IGetSectionData[]>(() => contentData?.sectionData ?? [], [contentData?.sectionData]);
+  const sectionData = useMemo<IGetSectionData[]>(
+    () => contentData?.sectionData ?? [],
+    [contentData?.sectionData]
+  );
   const headerComponent = useMemo(() => {
-    if (!contentData?.category || contentData.category.length === 0) return null;
+    if (!contentData?.category || contentData.category.length === 0)
+      return null;
 
     return (
       <CategoryCard
@@ -140,9 +151,21 @@ export const Content: React.FC<IContentProps> = ({
         key={'category'}
       />
     );
-  }, [contentData?.category, events?.onPressCategory, events?.activeCategory, isLoading?.category, theme]);
-
-  const renderItem = ({ item, index }: { item: IGetSectionData | null; index: number }) => {
+  }, [
+    contentData?.category,
+    events?.onPressCategory,
+    events?.activeCategory,
+    isLoading?.category,
+    theme,
+  ]);
+
+  const renderItem = ({
+    item,
+    index,
+  }: {
+    item: IGetSectionData | null;
+    index: number;
+  }) => {
     if (!item) return null;
 
     const isDummy = item?._id?.startsWith('dummy');
@@ -160,7 +183,7 @@ export const Content: React.FC<IContentProps> = ({
         data={{
           sectionData: item.content || null,
           historyData: contentData.historyData,
-          category: contentData.category
+          category: contentData.category,
         }}
         name={item?.name || `Section ${index}`}
         theme={theme}
@@ -170,7 +193,7 @@ export const Content: React.FC<IContentProps> = ({
         isLoading={{
           section: isLoadingItem,
           history: isLoading?.history,
-          category: isLoading?.category
+          category: isLoading?.category,
         }}
         sectionProps={sectionProps}
         moreFetchDataHistory={moreFetchDataHistory}
@@ -179,7 +202,8 @@ export const Content: React.FC<IContentProps> = ({
     );
   };
 
-  const isEmpty = !isLoading?.section && (!sectionData || sectionData.length === 0);
+  const isEmpty =
+    !isLoading?.section && (!sectionData || sectionData.length === 0);
 
   return (
     <AnimatedFlatList
@@ -204,9 +228,9 @@ export const Content: React.FC<IContentProps> = ({
       onEndReachedThreshold={0.7}
       contentContainerStyle={[
         {
-          paddingBottom: scale(100)
+          paddingBottom: scale(100),
         },
-        contentContainerStyle
+        contentContainerStyle,
       ]}
     />
   );