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

package/src/components/ContentView/MoreContentList.tsx

@@ -0,0 +1,238 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Tue 01 Jul 2025 at 02:28 PM
+ */
+
+import React, { useCallback, useRef } from 'react';
+import { FlatList, StyleSheet, TouchableOpacity, ActivityIndicator, type FlatListProps } from 'react-native';
+import { scale, verticalScale } from 'react-native-size-matters';
+import Display from '../../utils/Display';
+import type { IContentData } from '../../types';
+import { Text } from '../Text';
+import { View } from '../View';
+import AppHeader, { type AppHeaderProps } from '../Headers/AppHeader';
+import { RFValue } from 'react-native-responsive-fontsize';
+import CardPoster from '../Content/Card/components/CardPoster';
+import type { AppTheme } from '../../theme/themes';
+import { useTheme } from '../../theme';
+import Animated from 'react-native-reanimated';
+import { Search } from 'lucide-react-native';
+
+interface Props {
+  headerProps?: AppHeaderProps;
+  contentList: IContentData[];
+  onItemPress?: (item: IContentData) => void;
+  isLoading?: boolean;
+  error?: boolean | string | Error;
+  errorText?: string;
+  theme?: AppTheme;
+  moreDataIsLoading?: boolean;
+  onEndReached?: () => void;
+  skeletonCount?: number;
+  numColumns?: number;
+  footerComponent?: React.ReactNode;
+  refreshing?: boolean;
+  onRefresh?: () => void;
+}
+
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList as React.ComponentType<FlatListProps<IContentData>>);
+
+const MoreContentList: React.FC<Props> = ({
+  headerProps,
+  contentList = [],
+  onItemPress,
+  isLoading = false,
+  error = false,
+  errorText = 'Something went wrong!',
+  theme,
+  moreDataIsLoading = false,
+  onEndReached,
+  skeletonCount = 12,
+  numColumns = 3,
+  footerComponent,
+  refreshing = false,
+  onRefresh
+}) => {
+  const { theme: appliedTheme } = useTheme(theme);
+  const onEndReachedCalledDuringMomentum = useRef(false);
+  const isEmpty = !isLoading && (!contentList || contentList.length === 0);
+
+  const getErrorMessage = () => {
+    if (typeof error === 'string') return error;
+    if (error instanceof Error) return error.message;
+    return errorText;
+  };
+
+  const keyExtractor = useCallback((item: IContentData, index: number) => {
+    return item._id?.toString() || index.toString();
+  }, []);
+
+  const renderItem = useCallback(
+    ({ item }: { item: IContentData }) => (
+      <View style={styles.cardWrapper}>
+        <TouchableOpacity onPress={() => onItemPress?.(item)} activeOpacity={0.7}>
+          <CardPoster
+            posterUri={item.poster}
+            borderRadius={5}
+            isLoading={false}
+            theme={appliedTheme}
+            imageStyle={styles.itemContainer}
+          />
+        </TouchableOpacity>
+      </View>
+    ),
+    [onItemPress, appliedTheme]
+  );
+
+  const renderSkeletonItem = useCallback(
+    ({ index }: { index: number }) => (
+      <View style={styles.cardWrapper} key={`skeleton-${index}`}>
+        <CardPoster
+          posterUri=""
+          borderRadius={5}
+          isLoading={true}
+          theme={appliedTheme}
+          imageStyle={styles.itemContainer}
+        />
+      </View>
+    ),
+    [appliedTheme]
+  );
+
+  const renderFooter = () => {
+    if (footerComponent) return footerComponent;
+
+    return moreDataIsLoading ? (
+      <View style={styles.footerLoading}>
+        <ActivityIndicator size="small" />
+      </View>
+    ) : null;
+  };
+
+  const renderContent = () => {
+    if (isLoading) {
+      return (
+        <FlatList
+          data={Array.from({ length: skeletonCount })}
+          numColumns={numColumns}
+          keyExtractor={(_, index) => `skeleton-${index}`}
+          renderItem={renderSkeletonItem}
+          showsVerticalScrollIndicator={false}
+          contentContainerStyle={[
+            styles.listContent,
+            {
+              minHeight: Display.fullHeight - verticalScale(100)
+            }
+          ]}
+        />
+      );
+    }
+
+    if (error) {
+      return (
+        <View style={styles.centered}>
+          <Text style={styles.errorText}>{getErrorMessage()}</Text>
+        </View>
+      );
+    }
+
+    if (isEmpty) {
+      return (
+        <View style={styles.centered}>
+          <Text style={styles.emptyText}>No content found</Text>
+        </View>
+      );
+    }
+
+    return (
+      <AnimatedFlatList
+        data={contentList}
+        numColumns={numColumns}
+        showsVerticalScrollIndicator={false}
+        removeClippedSubviews
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        initialNumToRender={6}
+        bounces={false}
+        scrollEventThrottle={16}
+        contentContainerStyle={styles.listContent}
+        ListFooterComponent={renderFooter}
+        onEndReachedThreshold={0.7}
+        onEndReached={() => {
+          if (!onEndReachedCalledDuringMomentum.current && onEndReached && !moreDataIsLoading) {
+            onEndReached();
+            onEndReachedCalledDuringMomentum.current = true;
+          }
+        }}
+        onMomentumScrollBegin={() => {
+          onEndReachedCalledDuringMomentum.current = false;
+        }}
+        refreshing={refreshing}
+        onRefresh={onRefresh}
+        windowSize={5}
+        maxToRenderPerBatch={5}
+        updateCellsBatchingPeriod={50}
+      />
+    );
+  };
+
+  return (
+    <View style={{ flex: 1 }}>
+      <AppHeader
+        title="More Content"
+        titleAlign="left"
+        titleStyle={StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle])}
+        onBackPress={headerProps?.onBackPress || (() => {})}
+        onRightPress={headerProps?.onRightPress || (() => {})}
+        rightIcon={headerProps?.rightIcon || <Search size={scale(23)} color={appliedTheme.colors.onBackground} />}
+        {...headerProps}
+      />
+      {renderContent()}
+    </View>
+  );
+};
+
+export default MoreContentList;
+
+const styles = StyleSheet.create({
+  listContent: {
+    paddingHorizontal: scale(6),
+    paddingBottom: scale(100)
+  },
+  cardWrapper: {
+    flexBasis: '33.33%',
+    maxWidth: '33.33%',
+    padding: scale(4),
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  itemContainer: {
+    width: '100%',
+    aspectRatio: 2 / 3,
+    borderRadius: 5
+  },
+  centered: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: verticalScale(50)
+  },
+  errorText: {
+    fontSize: RFValue(14),
+    color: 'red',
+    fontWeight: '500'
+  },
+  emptyText: {
+    fontSize: RFValue(14),
+    fontWeight: '400'
+  },
+  headerTitle: {
+    fontSize: RFValue(15),
+    textTransform: 'capitalize'
+  },
+  footerLoading: {
+    marginTop: verticalScale(30),
+    paddingVertical: verticalScale(10),
+    alignItems: 'center'
+  }
+});

package/src/components/ContentView/components/AboutSection.tsx

@@ -17,6 +17,7 @@ import { Text } from '../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   theme: ITheme;
@@ -118,20 +119,20 @@ const styles = StyleSheet.create({
     marginTop: verticalScale(7)
   },
   title: {
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     fontWeight: 'bold',
     marginBottom: scale(6)
   },
   body: {
-    fontSize: scale(11.5),
+    fontSize: RFValue(10),
     lineHeight: scale(16),
-    textAlign: 'justify'
+    textAlign: 'auto'
   },
   scrollExpanded: {
     maxHeight: verticalScale(250)
   },
   toggleText: {
-    fontSize: scale(11),
+    fontSize: RFValue(9.5),
     fontWeight: '600',
     marginTop: scale(4)
   }

package/src/components/ContentView/components/CastCard.tsx

@@ -19,6 +19,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { ITheme } from '../../../theme/themes';
 import type { IContentCast } from '../../../types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type StyleProps = {
   container?: StyleProp<ViewStyle>;
@@ -42,7 +43,7 @@ type Props = {
   style?: StyleProps;
 };
 
-const IMAGE_SIZE = scale(80);
+const IMAGE_SIZE = scale(70);
 const PLACEHOLDER_COUNT = 6;
 
 export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onItemPress, style = {} }: Props) => {
@@ -160,7 +161,7 @@ const styles = StyleSheet.create({
     marginVertical: scale(10)
   },
   heading: {
-    fontSize: scale(16),
+    fontSize: RFValue(14),
     fontWeight: 'bold',
     marginBottom: scale(8),
     paddingHorizontal: scale(12)
@@ -180,12 +181,12 @@ const styles = StyleSheet.create({
     marginBottom: scale(6)
   },
   name: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     fontWeight: '500',
     textAlign: 'center'
   },
   role: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     textAlign: 'center',
     marginTop: scale(2)
   },

package/src/components/ContentView/components/EpisodeCard.tsx

@@ -13,6 +13,7 @@ import Display from '../../../utils/Display';
 import type { IContentEpisodes, IContentSeasons } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -26,9 +27,9 @@ const TAB_MARGIN_RIGHT = scale(6);
 const CONTAINER_PADDING_HORIZONTAL = scale(8);
 const CONTAINER_GAP = verticalScale(8);
 const TEXT_PADDING = scale(6);
-const TITLE_FONT_SIZE = scale(12);
-const SUBTITLE_FONT_SIZE = scale(10);
-const SUBTITLE_LINE_HEIGHT = scale(14);
+const TITLE_FONT_SIZE = RFValue(11);
+const SUBTITLE_FONT_SIZE = RFValue(9);
+const SUBTITLE_LINE_HEIGHT = RFValue(13);
 
 // Types
 interface IOnPressParams {
@@ -39,6 +40,7 @@ interface IOnPressParams {
 
 interface EpisodeCardItemProps {
   season_id: string;
+  season_number: number;
   episode: IContentEpisodes;
   onPress: (e: IOnPressParams) => void;
   theme: ITheme;
@@ -55,9 +57,27 @@ interface EpisodeCardProps {
   mode?: 'horizontal' | 'vertical';
 }
 
+const formatDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric'
+  });
+};
+
 // Memoized EpisodeCardItem
 const EpisodeCardItem = memo(
-  ({ season_id, episode, onPress, theme, style, thumbnailHeight, isLoading = false }: EpisodeCardItemProps) => {
+  ({
+    season_id,
+    season_number,
+    episode,
+    onPress,
+    theme,
+    style,
+    thumbnailHeight,
+    isLoading = false
+  }: EpisodeCardItemProps) => {
     const handlePress = useCallback(() => {
       if (!isLoading) {
         onPress?.({ season_id, episode_id: episode._id, episode_number: episode.number });
@@ -174,6 +194,10 @@ const EpisodeCardItem = memo(
             <Text numberOfLines={1} color={theme.colors.textPrimary} style={styles.title}>
               {episode.name || `Episode ${episode.number}`}
             </Text>
+            <Text color={theme.colors.onSurface} style={{ fontSize: RFValue(9), marginTop: verticalScale(2) }}>
+              {`S${String(season_number).padStart(2, '0')} | E${String(episode.number).padStart(2, '0')} | `}
+              {episode.createdAt && formatDate(episode.createdAt)}
+            </Text>
             {!!episode.description && (
               <Text numberOfLines={isVerticalMode ? 4 : 2} color={theme.colors.textSecondary} style={styles.subtitle}>
                 {episode.description}
@@ -246,6 +270,7 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
           theme={theme}
           season_id={selectedSeason._id}
           episode={item}
+          season_number={selectedSeason.season_number}
           onPress={onPress}
           style={{ width: cardWidth }}
           thumbnailHeight={thumbnailHeight}
@@ -259,6 +284,7 @@ export const EpisodeCard = ({ seasons, onPress, theme, isLoading = false, mode =
       <EpisodeCardItem
         theme={theme}
         season_id=""
+        season_number={0}
         episode={{
           _id: '',
           number: 0,

package/src/components/ContentView/components/GenreTags.tsx

@@ -10,6 +10,7 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { scale, verticalScale } from 'react-native-size-matters';
 import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   genres?: IContentData['genres'];
@@ -81,7 +82,7 @@ const styles = StyleSheet.create({
     alignSelf: 'flex-start'
   },
   tagText: {
-    fontSize: scale(11),
+    fontSize: RFValue(9),
     maxWidth: scale(110)
   },
   skeletonTag: {

package/src/components/ContentView/components/HeroBanner.tsx

@@ -15,6 +15,7 @@ import { TrailerButton } from './TrailerButton';
 import BackBtn from '../../Button/BackBtn';
 import MenuBtn from '../../Button/MenuBtn';
 import type { HeroBannerProps } from '../../../types/content/content-view.types';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 const SKELETON_CIRCLE_SIZE = scale(50);
 const BANNER_HEIGHT = verticalScale(200);
@@ -36,9 +37,12 @@ export const HeroBanner = ({
   const [hasImageLoaded, setHasImageLoaded] = useState(false);
   const [imageLoadError, setImageLoadError] = useState(false);
 
-  const handlePressPlay = useCallback(() => {
-    onPressPlay?.();
-  }, [onPressPlay]);
+  const handlePressPlay = useCallback(
+    ({ is_trailer }: { is_trailer: boolean }) => {
+      onPressPlay?.({ is_trailer });
+    },
+    [onPressPlay]
+  );
 
   const showSkeleton = isLoading || (!hasImageLoaded && !imageLoadError);
 
@@ -75,7 +79,7 @@ export const HeroBanner = ({
         },
         errorText: {
           color: theme.colors.textSecondary,
-          fontSize: scale(16),
+          fontSize: RFValue(15),
           textAlign: 'center'
         },
         imageContainer: {
@@ -224,11 +228,11 @@ export const HeroBanner = ({
       {!showSkeleton && !imageLoadError && (
         <>
           <Animated.View style={styles.centeredContent}>
-            {renderButtons?.play?.() ?? <PlayButton onPress={handlePressPlay} />}
+            {renderButtons?.play?.() ?? <PlayButton onPress={() => handlePressPlay({ is_trailer: false })} />}
           </Animated.View>
 
           <Animated.View style={styles.trailerButtonWrapper}>
-            {renderButtons?.trailer?.() ?? <TrailerButton onPress={handlePressPlay} />}
+            {renderButtons?.trailer?.() ?? <TrailerButton onPress={() => handlePressPlay({ is_trailer: true })} />}
           </Animated.View>
         </>
       )}

package/src/components/ContentView/components/Title.tsx

@@ -10,6 +10,7 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import type { IContentData } from '../../../types';
 import type { ITheme } from '../../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 type Props = {
   title: IContentData['name'];
@@ -102,19 +103,19 @@ const styles = StyleSheet.create({
     maxWidth: '100%'
   },
   title: {
-    fontSize: scale(18),
+    fontSize: RFValue(17),
     fontWeight: 'bold',
     flexShrink: 1,
     maxWidth: '60%'
   },
   subTitle: {
-    fontSize: scale(18),
+    fontSize: RFValue(17),
     marginLeft: scale(4),
     flexShrink: 1,
     maxWidth: '40%'
   },
   rating: {
-    fontSize: scale(14),
+    fontSize: RFValue(13),
     marginTop: scale(4)
   }
 });

package/src/components/ContentView/index.ts

@@ -4,3 +4,4 @@
  */
 
 export * from './ContentView';
+export { default as MoreContentList } from './MoreContentList';

package/src/components/Headers/AppHeader.tsx

@@ -3,12 +3,13 @@
  * @lastModified Sat 21 Jun 2025 at 02:52 PM
  */
 import React from 'react';
-import { View, Pressable, StyleSheet, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { View, StyleSheet, TouchableOpacity, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
 import { ArrowLeft } from 'lucide-react-native';
-import { useTheme } from '../../theme';
-import { moderateScale, scale, verticalScale } from 'react-native-size-matters';
+import { useTheme } from '../../theme/hook/useTheme';
+import { scale, verticalScale } from 'react-native-size-matters';
 import { Text } from '../Text';
 import type { AppTheme } from '../../theme/themes';
+import { RFValue } from 'react-native-responsive-fontsize';
 
 export type AppHeaderProps = {
   title: string;
@@ -37,17 +38,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
     <View style={[styles.header, { backgroundColor: appliedTheme.colors.background }, style]}>
       {/* Left icon */}
       {onBackPress && (
-        <Pressable
-          onPress={onBackPress}
-          android_ripple={{
-            color: appliedTheme.colors.surfaceDisabled,
-            borderless: false,
-            radius: scale(20)
-          }}
-          style={styles.iconButton}
-        >
+        <TouchableOpacity onPress={onBackPress} activeOpacity={0.7} style={styles.iconButton}>
           <ArrowLeft size={scale(22)} color={appliedTheme.colors.textPrimary} />
-        </Pressable>
+        </TouchableOpacity>
       )}
 
       {/* Title */}
@@ -55,10 +48,10 @@ const AppHeader: React.FC<AppHeaderProps> = ({
         <Text
           numberOfLines={1}
           style={[
-            styles.title,
             { color: appliedTheme.colors.onBackground },
-            !onBackPress && { fontSize: moderateScale(20) },
-            titleStyle
+            !onBackPress && { ...titleStyle },
+            titleStyle,
+            styles.title
           ]}
         >
           {title}
@@ -67,17 +60,9 @@ const AppHeader: React.FC<AppHeaderProps> = ({
 
       {/* Right icon */}
       {rightIcon ? (
-        <Pressable
-          onPress={onRightPress}
-          android_ripple={{
-            color: appliedTheme.colors.surfaceDisabled,
-            borderless: false,
-            radius: scale(20)
-          }}
-          style={styles.iconButton}
-        >
+        <TouchableOpacity onPress={onRightPress} activeOpacity={0.7} style={styles.iconButton}>
           {rightIcon}
-        </Pressable>
+        </TouchableOpacity>
       ) : (
         <View style={styles.iconButton} />
       )}
@@ -89,21 +74,21 @@ export default AppHeader;
 
 const styles = StyleSheet.create({
   header: {
-    height: verticalScale(56),
+    height: verticalScale(40),
     paddingHorizontal: scale(12),
+    paddingBottom: verticalScale(4),
     flexDirection: 'row',
     alignItems: 'center'
   },
   iconButton: {
-    width: scale(40),
-    height: scale(40),
-    borderRadius: scale(20),
+    width: scale(42),
+    height: scale(42),
+    borderRadius: scale(21),
     justifyContent: 'center',
     alignItems: 'center',
     overflow: 'hidden',
     backgroundColor: 'transparent'
   },
-
   titleWrapper: {
     flex: 1,
     justifyContent: 'center'
@@ -113,10 +98,11 @@ const styles = StyleSheet.create({
   },
   leftAligned: {
     alignItems: 'flex-start',
-    paddingLeft: scale(4)
+    paddingLeft: scale(2)
   },
   title: {
-    fontSize: moderateScale(18),
-    fontWeight: 'bold'
+    fontSize: RFValue(14),
+    textTransform: 'capitalize',
+    fontWeight: '500'
   }
 });

package/src/components/Headers/One.tsx

@@ -8,7 +8,7 @@ import { Platform, Pressable, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 import { Menu as DefaultMenuIcon, Search as DefaultSearchIcon } from 'lucide-react-native';
 
 export interface HeaderOneProps {

package/src/components/Headers/Three.tsx

@@ -7,21 +7,22 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderThreeProps {
   logoUri: string;
   category?: React.ReactNode;
   theme?: AppTheme;
+  isLoading?: boolean;
 }
 
-const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme }) => {
+const HeaderThree: React.FC<HeaderThreeProps> = ({ logoUri, category, theme, isLoading }) => {
   const { theme: appliedTheme } = useTheme(theme);
   return (
     <View style={[styles.headerContainer, { backgroundColor: appliedTheme.colors.background }]}>
       <View style={styles.leftContainer}>
         <View style={styles.logo}>
-          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} />
+          <Logo width={scale(55)} height={scale(50)} logoUri={logoUri} isLoading={isLoading} />
         </View>
         {category || null}
       </View>

package/src/components/Headers/Two.tsx

@@ -8,16 +8,17 @@ import { scale, verticalScale } from 'react-native-size-matters';
 import { Logo } from '../Logo/Logo';
 import DefaultIcons from '../Icons/NewIndex';
 import type { AppTheme } from '../../theme/themes';
-import { useTheme } from '../../theme/ThemeProvider';
+import { useTheme } from '../../theme/hook/useTheme';
 
 export interface HeaderTwoProps {
   theme?: AppTheme;
   logoUri: string;
   MenuIcon?: React.FC<{ width: number; height: number; color?: string }>;
   onMenuPress?: () => void;
+  isLoading?: boolean;
 }
 
-const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress }) => {
+const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuPress, isLoading }) => {
   const { theme: appliedTheme } = useTheme(theme);
 
   const Menu = MenuIcon || DefaultIcons.MenuBar;
@@ -35,7 +36,7 @@ const HeaderTwo: React.FC<HeaderTwoProps> = ({ theme, logoUri, MenuIcon, onMenuP
         <Menu width={scale(28)} height={scale(28)} />
       </Pressable>
       <View style={styles.logo}>
-        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} />
+        <Logo width={scale(100)} height={scale(80)} logoUri={logoUri} isLoading={isLoading} />
       </View>
       <View style={styles.placeholder} />
     </View>