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

package/src/components/Content/Sections.tsx

@@ -49,7 +49,8 @@ const renderDefaultComponent = (
   type: IGetSectionData['type'],
   props: Omit<IProps, 'customComponents' | 'type'>
 ): React.ReactNode => {
-  const effectiveIsLoading = props.isLoading?.section || props.section_id === `dummy-${type}`;
+  const effectiveIsLoading =
+    props.isLoading?.section || props.section_id === `dummy-${type}`;
   const commonProps = {
     theme: props.theme,
     title: props.name,
@@ -61,11 +62,16 @@ const renderDefaultComponent = (
     onPressMore: props.events?.onPressMore,
     isLoading: effectiveIsLoading,
     moreFetchDataHistory: props.moreFetchDataHistory,
-    moreFetchData: props.moreFetchData
+    moreFetchData: props.moreFetchData,
   };
   switch (type) {
     case 'slider':
-      return <Sliders.Styles.One {...commonProps} showPlayIcon={props.sectionProps?.showPlayBtn} />;
+      return (
+        <Sliders.Styles.One
+          {...commonProps}
+          showPlayIcon={props.sectionProps?.showPlayBtn}
+        />
+      );
     case 'slider_style_2':
       return <Sliders.Styles.Two {...commonProps} />;
     case 'normal':
@@ -111,14 +117,14 @@ const Sections: React.FC<IProps> = ({
   sectionProps,
   isLoading,
   moreFetchData,
-  moreFetchDataHistory
+  moreFetchDataHistory,
 }) => {
   const commonProps = { data: data.sectionData, title: name };
   const customComponent = customComponents.find((c) => c.type === type);
   if (customComponent) {
     return React.cloneElement(customComponent.component, {
       ...(customComponent.component?.props ?? {}),
-      ...commonProps
+      ...commonProps,
     });
   }
 
@@ -132,7 +138,7 @@ const Sections: React.FC<IProps> = ({
     sectionProps,
     isLoading,
     moreFetchData,
-    moreFetchDataHistory
+    moreFetchDataHistory,
   });
 
   if (defaultRendered) return defaultRendered;
@@ -152,14 +158,14 @@ const Sections: React.FC<IProps> = ({
               sectionProps,
               isLoading,
               moreFetchData,
-              moreFetchDataHistory
+              moreFetchDataHistory,
             }) === null
         )
         .map(({ component, type: key }) =>
           React.cloneElement(component, {
             ...(component?.props ?? {}),
             key,
-            ...commonProps
+            ...commonProps,
           })
         )}
     </>

package/src/components/ContentView/ContentView.tsx

@@ -3,7 +3,6 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React from 'react';
 import { ScrollView, StyleSheet } from 'react-native';
 import { HeroBanner } from './components/HeroBanner';
 import { GenreTags } from './components/GenreTags';
@@ -30,7 +29,7 @@ export const ContentView = ({
   castStyles,
   recommendedContentCardStyles,
   history,
-  episodeCardMode
+  episodeCardMode,
 }: ComponentProps) => {
   const { theme: appliedTheme } = useTheme(theme);
   const seekTime = history?.currentTime || 0;
@@ -55,7 +54,7 @@ export const ContentView = ({
             current_episode: currentEpisode,
             mode: 'fullscreen',
             is_trailer,
-            seekTime: isComplete ? 0 : seekTime
+            seekTime: isComplete ? 0 : seekTime,
           })
         }
         onBackPress={events?.onBackPress}
@@ -69,7 +68,12 @@ export const ContentView = ({
         isLoading={isLoading}
         style={titleStyles}
       />
-      <GenreTags genres={content?.genres} theme={appliedTheme} isLoading={isLoading} style={genreTagsStyles} />
+      <GenreTags
+        genres={content?.genres}
+        theme={appliedTheme}
+        isLoading={isLoading}
+        style={genreTagsStyles}
+      />
       <AboutSection
         theme={appliedTheme}
         description={content?.description}
@@ -83,26 +87,27 @@ export const ContentView = ({
         onItemPress={() => {}}
         style={castStyles}
       />
-      {content?.type === 'series' && (seasonsIsLoading || (seasons && seasons.length > 0)) && (
-        <EpisodeCard
-          isLoading={seasonsIsLoading}
-          seasons={seasonsIsLoading ? [] : (seasons ?? [])}
-          onPress={({ season_id, episode_id, episode_number }) => {
-            if (!seasonsIsLoading) {
-              events?.onPlay?.({
-                id: content._id,
-                slug: content.slug,
-                type: content.type,
-                current_episode: episode_id,
-                current_season: season_id,
-                episode_number
-              });
-            }
-          }}
-          theme={appliedTheme}
-          mode={episodeCardMode ?? 'horizontal'}
-        />
-      )}
+      {content?.type === 'series' &&
+        (seasonsIsLoading || (seasons && seasons.length > 0)) && (
+          <EpisodeCard
+            isLoading={seasonsIsLoading}
+            seasons={seasonsIsLoading ? [] : (seasons ?? [])}
+            onPress={({ season_id, episode_id, episode_number }) => {
+              if (!seasonsIsLoading) {
+                events?.onPlay?.({
+                  id: content._id,
+                  slug: content.slug,
+                  type: content.type,
+                  current_episode: episode_id,
+                  current_season: season_id,
+                  episode_number,
+                });
+              }
+            }}
+            theme={appliedTheme}
+            mode={episodeCardMode ?? 'horizontal'}
+          />
+        )}
 
       {recommendedContent && recommendedContent?.content && (
         <Cards.Styles.Four
@@ -124,14 +129,16 @@ export const ContentView = ({
 
 const styles = StyleSheet.create({
   scrollContent: {
-    paddingBottom: scale(80)
-  }
+    paddingBottom: scale(80),
+  },
 });
 
 export namespace ContentView {
   export type Props = ComponentProps;
   export type RecommendedContent = Props['recommendedContent'];
   export type HeroBannerProps = Props['heroBannerProps'];
-  export type MenuAction = NonNullable<NonNullable<ComponentProps['heroBannerProps']>['menuActions']>[number];
+  export type MenuAction = NonNullable<
+    NonNullable<ComponentProps['heroBannerProps']>['menuActions']
+  >[number];
   export type History = NonNullable<ComponentProps['history']>;
 }

package/src/components/ContentView/MoreContentList.tsx

@@ -4,7 +4,13 @@
  */
 
 import React, { useCallback, useRef } from 'react';
-import { FlatList, StyleSheet, TouchableOpacity, ActivityIndicator, type FlatListProps } from 'react-native';
+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';
@@ -35,7 +41,9 @@ interface Props {
   onRefresh?: () => void;
 }
 
-const AnimatedFlatList = Animated.createAnimatedComponent(FlatList as React.ComponentType<FlatListProps<IContentData>>);
+const AnimatedFlatList = Animated.createAnimatedComponent(
+  FlatList as React.ComponentType<FlatListProps<IContentData>>
+);
 
 const MoreContentList: React.FC<Props> = ({
   headerProps,
@@ -51,7 +59,7 @@ const MoreContentList: React.FC<Props> = ({
   numColumns = 3,
   footerComponent,
   refreshing = false,
-  onRefresh
+  onRefresh,
 }) => {
   const { theme: appliedTheme } = useTheme(theme);
   const onEndReachedCalledDuringMomentum = useRef(false);
@@ -70,7 +78,10 @@ const MoreContentList: React.FC<Props> = ({
   const renderItem = useCallback(
     ({ item }: { item: IContentData }) => (
       <View style={styles.cardWrapper}>
-        <TouchableOpacity onPress={() => onItemPress?.(item)} activeOpacity={0.7}>
+        <TouchableOpacity
+          onPress={() => onItemPress?.(item)}
+          activeOpacity={0.7}
+        >
           <CardPoster
             posterUri={item.poster}
             borderRadius={5}
@@ -121,8 +132,8 @@ const MoreContentList: React.FC<Props> = ({
           contentContainerStyle={[
             styles.listContent,
             {
-              minHeight: Display.fullHeight - verticalScale(100)
-            }
+              minHeight: Display.fullHeight - verticalScale(100),
+            },
           ]}
         />
       );
@@ -159,7 +170,11 @@ const MoreContentList: React.FC<Props> = ({
         ListFooterComponent={renderFooter}
         onEndReachedThreshold={0.7}
         onEndReached={() => {
-          if (!onEndReachedCalledDuringMomentum.current && onEndReached && !moreDataIsLoading) {
+          if (
+            !onEndReachedCalledDuringMomentum.current &&
+            onEndReached &&
+            !moreDataIsLoading
+          ) {
             onEndReached();
             onEndReachedCalledDuringMomentum.current = true;
           }
@@ -181,10 +196,17 @@ const MoreContentList: React.FC<Props> = ({
       <AppHeader
         title="More Content"
         titleAlign="left"
-        titleStyle={StyleSheet.flatten([styles.headerTitle, headerProps?.titleStyle])}
+        titleStyle={StyleSheet.flatten([
+          styles.headerTitle,
+          headerProps?.titleStyle,
+        ])}
         onBackPress={headerProps?.onBackPress || (() => {})}
         onRightPress={headerProps?.onRightPress || (() => {})}
-        rightIcon={headerProps?.rightIcon || <Search size={scale(23)} color={appliedTheme.colors.onBackground} />}
+        rightIcon={
+          headerProps?.rightIcon || (
+            <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
+          )
+        }
         {...headerProps}
       />
       {renderContent()}
@@ -197,42 +219,42 @@ export default MoreContentList;
 const styles = StyleSheet.create({
   listContent: {
     paddingHorizontal: scale(6),
-    paddingBottom: scale(100)
+    paddingBottom: scale(100),
   },
   cardWrapper: {
     flexBasis: '33.33%',
     maxWidth: '33.33%',
     padding: scale(4),
     alignItems: 'center',
-    justifyContent: 'center'
+    justifyContent: 'center',
   },
   itemContainer: {
     width: '100%',
     aspectRatio: 2 / 3,
-    borderRadius: 5
+    borderRadius: 5,
   },
   centered: {
     flex: 1,
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: verticalScale(50)
+    paddingVertical: verticalScale(50),
   },
   errorText: {
     fontSize: RFValue(14),
     color: 'red',
-    fontWeight: '500'
+    fontWeight: '500',
   },
   emptyText: {
     fontSize: RFValue(14),
-    fontWeight: '400'
+    fontWeight: '400',
   },
   headerTitle: {
     fontSize: RFValue(15),
-    textTransform: 'capitalize'
+    textTransform: 'capitalize',
   },
   footerLoading: {
     marginTop: verticalScale(30),
     paddingVertical: verticalScale(10),
-    alignItems: 'center'
-  }
+    alignItems: 'center',
+  },
 });

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

@@ -3,7 +3,7 @@
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
 
-import React, { useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,7 @@ import {
   TouchableOpacity,
   type StyleProp,
   type ViewStyle,
-  type TextStyle
+  type TextStyle,
 } from 'react-native';
 import { Text } from '../../Text';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
@@ -34,7 +34,13 @@ type Props = {
   };
 };
 
-export const AboutSection = ({ theme, title = 'About', description, isLoading = false, style }: Props) => {
+export const AboutSection = ({
+  theme,
+  title = 'About',
+  description,
+  isLoading = false,
+  style,
+}: Props) => {
   const [expanded, setExpanded] = useState(false);
   const scrollRef = useRef<ScrollView>(null);
 
@@ -51,7 +57,10 @@ export const AboutSection = ({ theme, title = 'About', description, isLoading =
         backgroundColor={theme.colors.skeletonBaseColor}
         highlightColor={theme.colors.skeletonHighlightColor}
       >
-        <SkeletonPlaceholder.Item paddingHorizontal={scale(12)} marginTop={verticalScale(7)}>
+        <SkeletonPlaceholder.Item
+          paddingHorizontal={scale(12)}
+          marginTop={verticalScale(7)}
+        >
           <SkeletonPlaceholder.Item
             width={scale(70)}
             height={scale(16)}
@@ -96,7 +105,10 @@ export const AboutSection = ({ theme, title = 'About', description, isLoading =
           ref={scrollRef}
           nestedScrollEnabled
         >
-          <Text color={theme.colors.textSecondary} style={[styles.body, style?.body]}>
+          <Text
+            color={theme.colors.textSecondary}
+            style={[styles.body, style?.body]}
+          >
             {description}
           </Text>
         </ScrollView>
@@ -104,7 +116,13 @@ export const AboutSection = ({ theme, title = 'About', description, isLoading =
 
       {description.length > 150 && (
         <TouchableOpacity onPress={toggle}>
-          <Text style={[styles.toggleText, { color: theme.colors.primary }, style?.toggleText]}>
+          <Text
+            style={[
+              styles.toggleText,
+              { color: theme.colors.primary },
+              style?.toggleText,
+            ]}
+          >
             {expanded ? 'See less' : 'See more'}
           </Text>
         </TouchableOpacity>
@@ -116,24 +134,24 @@ export const AboutSection = ({ theme, title = 'About', description, isLoading =
 const styles = StyleSheet.create({
   container: {
     paddingHorizontal: scale(12),
-    marginTop: verticalScale(7)
+    marginTop: verticalScale(7),
   },
   title: {
     fontSize: RFValue(14),
     fontWeight: 'bold',
-    marginBottom: scale(6)
+    marginBottom: scale(6),
   },
   body: {
     fontSize: RFValue(10),
     lineHeight: scale(16),
-    textAlign: 'auto'
+    textAlign: 'auto',
   },
   scrollExpanded: {
-    maxHeight: verticalScale(250)
+    maxHeight: verticalScale(250),
   },
   toggleText: {
     fontSize: RFValue(9.5),
     fontWeight: '600',
-    marginTop: scale(4)
-  }
+    marginTop: scale(4),
+  },
 });

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

@@ -2,7 +2,7 @@
  * @author Naresh Dhamu
  * @lastModified Wed 02 Jul 2025 at 09:58 PM
  */
-import React, { useCallback } from 'react';
+import { useCallback } from 'react';
 import {
   View,
   StyleSheet,
@@ -11,7 +11,7 @@ import {
   type StyleProp,
   type ViewStyle,
   type TextStyle,
-  type ListRenderItem
+  type ListRenderItem,
 } from 'react-native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import FastImage, { type ImageStyle } from 'react-native-fast-image';
@@ -46,12 +46,21 @@ type Props = {
 const IMAGE_SIZE = scale(70);
 const PLACEHOLDER_COUNT = 6;
 
-export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onItemPress, style = {} }: Props) => {
-  const placeholderData: IContentCast[] = Array.from({ length: PLACEHOLDER_COUNT }).map((_, idx) => ({
+export const CastCard = ({
+  theme,
+  data,
+  isLoading = false,
+  heading = 'Cast',
+  onItemPress,
+  style = {},
+}: Props) => {
+  const placeholderData: IContentCast[] = Array.from({
+    length: PLACEHOLDER_COUNT,
+  }).map((_, idx) => ({
     _id: `skeleton-${idx}`,
     name: '',
     avatar: '',
-    castType: ''
+    castType: '',
   }));
 
   const listData = isLoading ? placeholderData : (data ?? []);
@@ -69,16 +78,28 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
       }
 
       return (
-        <TouchableOpacity style={[styles.card, style.card]} activeOpacity={0.9} onPress={() => onItemPress?.(item)}>
+        <TouchableOpacity
+          style={[styles.card, style.card]}
+          activeOpacity={0.9}
+          onPress={() => onItemPress?.(item)}
+        >
           <FastImage
             source={{ uri: String(item.avatar) }}
-            style={[styles.image, { backgroundColor: theme.colors.skeletonBaseColor }, style.image]}
+            style={[
+              styles.image,
+              { backgroundColor: theme.colors.skeletonBaseColor },
+              style.image,
+            ]}
             resizeMode={FastImage.resizeMode.cover}
           />
           <Text
             numberOfLines={1}
             ellipsizeMode="tail"
-            style={[styles.name, { color: theme.colors.textPrimary }, style.name]}
+            style={[
+              styles.name,
+              { color: theme.colors.textPrimary },
+              style.name,
+            ]}
           >
             {item.name}
           </Text>
@@ -86,7 +107,11 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
             <Text
               numberOfLines={1}
               ellipsizeMode="tail"
-              style={[styles.role, { color: theme.colors.textSecondary }, style.role]}
+              style={[
+                styles.role,
+                { color: theme.colors.textSecondary },
+                style.role,
+              ]}
             >
               as {item.castType}
             </Text>
@@ -115,7 +140,11 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
           />
           <SkeletonPlaceholder.Item flexDirection="row" paddingLeft={scale(12)}>
             {placeholderData.map((_, idx) => (
-              <SkeletonPlaceholder.Item key={idx} alignItems="center" marginRight={scale(10)}>
+              <SkeletonPlaceholder.Item
+                key={idx}
+                alignItems="center"
+                marginRight={scale(10)}
+              >
                 <SkeletonPlaceholder.Item
                   width={IMAGE_SIZE}
                   height={IMAGE_SIZE}
@@ -128,14 +157,26 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
                   borderRadius={scale(4)}
                   marginBottom={scale(4)}
                 />
-                <SkeletonPlaceholder.Item width={scale(50)} height={scale(10)} borderRadius={scale(4)} />
+                <SkeletonPlaceholder.Item
+                  width={scale(50)}
+                  height={scale(10)}
+                  borderRadius={scale(4)}
+                />
               </SkeletonPlaceholder.Item>
             ))}
           </SkeletonPlaceholder.Item>
         </SkeletonPlaceholder>
       ) : (
         <>
-          <Text style={[styles.heading, { color: theme.colors.primary }, style.heading]}>{heading}</Text>
+          <Text
+            style={[
+              styles.heading,
+              { color: theme.colors.primary },
+              style.heading,
+            ]}
+          >
+            {heading}
+          </Text>
           <FlatList
             horizontal
             data={listData}
@@ -147,7 +188,7 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
             getItemLayout={(_, index) => ({
               length: IMAGE_SIZE + scale(10),
               offset: (IMAGE_SIZE + scale(10)) * index,
-              index
+              index,
             })}
           />
         </>
@@ -158,56 +199,56 @@ export const CastCard = ({ theme, data, isLoading = false, heading = 'Cast', onI
 
 const styles = StyleSheet.create({
   container: {
-    marginVertical: scale(10)
+    marginVertical: scale(10),
   },
   heading: {
     fontSize: RFValue(14),
     fontWeight: 'bold',
     marginBottom: scale(8),
-    paddingHorizontal: scale(12)
+    paddingHorizontal: scale(12),
   },
   listContent: {
-    paddingHorizontal: scale(12)
+    paddingHorizontal: scale(12),
   },
   card: {
     width: IMAGE_SIZE,
     marginRight: scale(10),
-    alignItems: 'center'
+    alignItems: 'center',
   },
   image: {
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
     borderRadius: IMAGE_SIZE / 2,
-    marginBottom: scale(6)
+    marginBottom: scale(6),
   },
   name: {
     fontSize: RFValue(9),
     fontWeight: '500',
-    textAlign: 'center'
+    textAlign: 'center',
   },
   role: {
     fontSize: RFValue(9),
     textAlign: 'center',
-    marginTop: scale(2)
+    marginTop: scale(2),
   },
   imageSkeleton: {
     width: IMAGE_SIZE,
     height: IMAGE_SIZE,
     borderRadius: IMAGE_SIZE / 2,
     backgroundColor: '#ddd',
-    marginBottom: scale(6)
+    marginBottom: scale(6),
   },
   nameSkeleton: {
     width: scale(60),
     height: scale(12),
     borderRadius: scale(4),
     backgroundColor: '#ddd',
-    marginBottom: scale(4)
+    marginBottom: scale(4),
   },
   roleSkeleton: {
     width: scale(50),
     height: scale(10),
     borderRadius: scale(4),
-    backgroundColor: '#ddd'
-  }
+    backgroundColor: '#ddd',
+  },
 });