@zezosoft/zezo-ott-react-native-ui-kit 1.0.5 → 1.0.7

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

@@ -17,6 +17,7 @@ import { moderateScale, scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ChevronRight } from 'lucide-react-native';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { ThemeOverride } from '../../../../theme/themes';
 export type ShowAllButtonProps = {
   text?: string;
   onPress?: (event: GestureResponderEvent) => void;
@@ -27,6 +28,7 @@ export type ShowAllButtonProps = {
   containerStyle?: StyleProp<ViewStyle>;
   iconPosition?: 'left' | 'right';
   IconComponent?: React.ReactNode;
+  theme?: ThemeOverride;
 };
 
 const ShowAllButton: React.FC<ShowAllButtonProps> = ({
@@ -39,6 +41,7 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
   IconComponent,
   textStyle,
   containerStyle,
+  theme: overrideTheme,
 }): React.ReactElement => {
   const icon = IconComponent ?? (
     <View style={styles.iconWrapper}>
@@ -54,7 +57,9 @@ const ShowAllButton: React.FC<ShowAllButtonProps> = ({
     >
       <View style={[styles.innerRow, { columnGap: moderateScale(gap) }]}>
         {iconPosition === 'left' && icon}
-        <Text style={[styles.text, textStyle]}>{text}</Text>
+        <Text style={[styles.text, textStyle]} theme={overrideTheme}>
+          {text}
+        </Text>
         {iconPosition === 'right' && icon}
       </View>
     </TouchableOpacity>

package/src/components/Content/Content.tsx

@@ -22,9 +22,10 @@ import SectionType from './Sections';
 import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
 import { dummySections } from '../../constants/dummySections';
 import CategoryCard, { type ICategory } from './Card/Category/Category';
-import NoContentFallback from './Card/components/NoContentFallback';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
+import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
+import { useInternalTheme } from '../../theme/hook';
 
 export interface ICustomComponentsForContent {
   type: string;
@@ -56,7 +57,7 @@ export interface IContentProps {
     | StyleProp<ViewStyle>
     | AnimatedStyle<StyleProp<ViewStyle>>;
   onEndReached?: () => void;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   autoSwitchTheme?: boolean;
   events?: {
     onPressItem?: (item: IContentData) => void;
@@ -75,6 +76,8 @@ export interface IContentProps {
   moreFetchData?: MoreFetchData<IContentData>;
   moreFetchDataHistory?: MoreFetchData<IHistoryItem>;
   isLoading?: IContentLoading;
+
+  noContentFallbackProps?: NoContentFallbackProps;
 }
 
 const AnimatedFlatList = Animated.createAnimatedComponent(
@@ -85,6 +88,8 @@ interface FooterProps {
   ErrorComponent?: React.ReactNode;
   InfiniteScrollIsLoading?: boolean;
   InfiniteScrollLoaderComponent?: React.ReactNode;
+  theme?: ThemeOverride;
+  noContentFallbackProps?: NoContentFallbackProps;
 }
 
 const ContentFooter = ({
@@ -92,7 +97,10 @@ const ContentFooter = ({
   ErrorComponent,
   InfiniteScrollIsLoading,
   InfiniteScrollLoaderComponent,
+  theme,
+  noContentFallbackProps,
 }: FooterProps) => {
+  const { theme: appliedTheme } = useInternalTheme(theme);
   if (InfiniteScrollIsLoading) {
     return (
       InfiniteScrollLoaderComponent ?? (
@@ -101,16 +109,25 @@ const ContentFooter = ({
             paddingVertical: scale(30),
             alignItems: 'center',
             justifyContent: 'center',
+            backgroundColor: 'transparent',
           }}
         >
-          <ActivityIndicator size="small" />
+          <ActivityIndicator size="large" color={appliedTheme.colors.primary} />
         </Animated.View>
       )
     );
   }
 
   if (isEmpty) {
-    return ErrorComponent ? <>{ErrorComponent}</> : <NoContentFallback />;
+    return ErrorComponent ? (
+      <>{ErrorComponent}</>
+    ) : (
+      <NoContentFallback
+        theme={theme}
+        {...noContentFallbackProps}
+        isLoading={noContentFallbackProps?.isLoading ?? false}
+      />
+    );
   }
 
   return null;
@@ -131,6 +148,7 @@ export const Content: React.FC<IContentProps> = ({
   moreFetchData,
   moreFetchDataHistory,
   isLoading,
+  noContentFallbackProps,
 }) => {
   const sectionData = useMemo<IGetSectionData[]>(
     () => contentData?.sectionData ?? [],
@@ -223,6 +241,8 @@ export const Content: React.FC<IContentProps> = ({
           InfiniteScrollIsLoading={isLoading?.InfiniteScrollIsLoading}
           isEmpty={isEmpty}
           ErrorComponent={ErrorComponent}
+          theme={theme}
+          noContentFallbackProps={noContentFallbackProps}
         />
       }
       onEndReachedThreshold={0.7}

package/src/components/Content/Sections.tsx

@@ -8,7 +8,7 @@ import Cards from './Card';
 import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
 import type { ICategory } from './Card/Category/Category';
-import type { AppTheme } from '../../theme/themes';
+import type { ThemeOverride } from '../../theme/themes';
 import type { IContentLoading } from './Content';
 
 export interface ICustomComponentsForSections {
@@ -25,7 +25,7 @@ export interface IProps {
   };
   name: string;
   customComponents?: ICustomComponentsForSections[];
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   index: number;
   section_id: string;
   events?: {

package/src/components/ContentView/ContentView.tsx

@@ -2,24 +2,27 @@
  * @author Naresh Dhamu
  * @lastModified Tue 01 Jul 2025 at 02:28 PM
  */
-
 import { ScrollView, StyleSheet } from 'react-native';
 import { HeroBanner } from './components/HeroBanner';
 import { GenreTags } from './components/GenreTags';
 import { AboutSection } from './components/AboutSection';
 import { Title } from './components/Title';
-import { useTheme } from '../../theme/hook/useTheme';
+import { useInternalTheme } from '../../theme/hook/useInternalTheme';
 import { CastCard } from './components/CastCard';
 import Cards from '../Content/Card';
 import { scale } from 'react-native-size-matters';
 import { EpisodeCard } from './components/EpisodeCard';
 import type { ComponentProps } from '../../types/content/content-view.types';
+import { NotFoundFallback } from '../Fallbacks';
+import { MiniInfo } from './components/MiniInfo';
+
 export const ContentView = ({
   content,
   seasons,
   isLoading = false,
   seasonsIsLoading = false,
   theme,
+  text,
   recommendedContent,
   events,
   heroBannerProps,
@@ -31,100 +34,121 @@ export const ContentView = ({
   history,
   episodeCardMode,
 }: ComponentProps) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const seekTime = history?.currentTime || 0;
   const isComplete = history?.completed || false;
   const currentEpisode = history?.current_episode;
+
+  const isNotFound = !isLoading && !content;
+
   return (
-    <ScrollView
-      showsVerticalScrollIndicator={false}
-      keyboardShouldPersistTaps="handled"
-      contentContainerStyle={styles.scrollContent}
-    >
-      <HeroBanner
-        backgroundImage={content?.thumbnail}
-        title={content?.name}
-        theme={appliedTheme}
-        isLoading={isLoading}
-        content_offering_type={content?.content_offering_type}
-        onPressPlay={({ is_trailer }) =>
-          events?.onPlay?.({
-            id: content._id,
-            slug: content.slug,
-            type: content.type,
-            current_episode: currentEpisode,
-            mode: 'fullscreen',
-            is_trailer,
-            seekTime: isComplete ? 0 : seekTime,
-          })
-        }
-        onBackPress={events?.onBackPress}
-        {...heroBannerProps}
-      />
-      <Title
-        title={content?.name}
-        subtitle={content?.u_age}
-        rating={content?.rating}
-        theme={appliedTheme}
-        isLoading={isLoading}
-        style={titleStyles}
-      />
-      <GenreTags
-        genres={content?.genres}
-        theme={appliedTheme}
-        isLoading={isLoading}
-        style={genreTagsStyles}
-      />
-      <AboutSection
-        theme={appliedTheme}
-        description={content?.description}
-        isLoading={isLoading}
-        style={aboutSectionStyles}
-      />
-      <CastCard
-        theme={appliedTheme}
-        data={content?.cast || null}
-        isLoading={isLoading}
-        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,
-                });
-              }
-            }}
+    <>
+      {isNotFound ? (
+        <NotFoundFallback
+          title={text?.notFound?.title || 'Oops! Content Not Found'}
+          subtitle={
+            text?.notFound?.subtitle ||
+            'We couldn’t find anything to show here. Please check back later.'
+          }
+          backButtonText={text?.notFound?.buttonText || 'Go Back'}
+          onPressBack={events?.onBackPress}
+          theme={theme}
+        />
+      ) : (
+        <ScrollView
+          showsVerticalScrollIndicator={false}
+          keyboardShouldPersistTaps="handled"
+          contentContainerStyle={styles.scrollContent}
+        >
+          <HeroBanner
+            backgroundImage={content?.thumbnail}
+            title={content?.name}
+            theme={theme}
+            isLoading={isLoading}
+            content_offering_type={content?.content_offering_type}
+            onPressPlay={({ is_trailer }) =>
+              events?.onPlay?.({
+                id: content._id,
+                slug: content.slug,
+                type: content.type,
+                current_episode: currentEpisode,
+                mode: 'fullscreen',
+                is_trailer,
+                seekTime: isComplete ? 0 : seekTime,
+              })
+            }
+            onBackPress={events?.onBackPress}
+            {...heroBannerProps}
+          />
+          <Title
+            title={content?.name}
+            subtitle={content?.u_age}
+            rating={content?.rating}
             theme={appliedTheme}
-            mode={episodeCardMode ?? 'horizontal'}
+            isLoading={isLoading}
+            style={titleStyles}
           />
-        )}
 
-      {recommendedContent && recommendedContent?.content && (
-        <Cards.Styles.Four
-          section_id={recommendedContent._id}
-          title={recommendedContent.name}
-          type={recommendedContent.type}
-          data={recommendedContent.content}
-          isLoading={isLoading}
-          theme={appliedTheme}
-          onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
-          onPressMore={events?.onPressRecommendedMore}
-          moreFetchData={events?.moreFetchDataRecommended}
-          {...recommendedContentCardStyles}
-        />
+          <GenreTags
+            genres={content?.genres}
+            theme={appliedTheme}
+            isLoading={isLoading}
+            style={genreTagsStyles}
+          />
+          <MiniInfo content={content} theme={theme} isLoading={isLoading} />
+          <AboutSection
+            theme={appliedTheme}
+            description={content?.description}
+            release_year={content?.release_year}
+            isLoading={isLoading}
+            style={aboutSectionStyles}
+          />
+          <CastCard
+            theme={appliedTheme}
+            data={content?.cast || null}
+            isLoading={isLoading}
+            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={theme}
+                mode={episodeCardMode ?? 'horizontal'}
+              />
+            )}
+
+          {recommendedContent && recommendedContent?.content && (
+            <Cards.Styles.Four
+              section_id={recommendedContent._id}
+              title={recommendedContent.name}
+              type={recommendedContent.type}
+              data={recommendedContent.content}
+              isLoading={isLoading}
+              theme={theme}
+              onPressItem={(item) => events?.onPressRecommendedItem?.({ item })}
+              onPressMore={events?.onPressRecommendedMore}
+              moreFetchData={events?.moreFetchDataRecommended}
+              {...recommendedContentCardStyles}
+            />
+          )}
+        </ScrollView>
       )}
-    </ScrollView>
+    </>
   );
 };
 

package/src/components/ContentView/MoreContentList.tsx

@@ -19,8 +19,8 @@ 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 type { ThemeOverride } from '../../theme/themes';
+import { useInternalTheme } from '../../theme/hook';
 import Animated from 'react-native-reanimated';
 import { Search } from 'lucide-react-native';
 
@@ -31,7 +31,7 @@ interface Props {
   isLoading?: boolean;
   error?: boolean | string | Error;
   errorText?: string;
-  theme?: AppTheme;
+  theme?: ThemeOverride;
   moreDataIsLoading?: boolean;
   onEndReached?: () => void;
   skeletonCount?: number;
@@ -61,7 +61,7 @@ const MoreContentList: React.FC<Props> = ({
   refreshing = false,
   onRefresh,
 }) => {
-  const { theme: appliedTheme } = useTheme(theme);
+  const { theme: appliedTheme } = useInternalTheme(theme);
   const onEndReachedCalledDuringMomentum = useRef(false);
   const isEmpty = !isLoading && (!contentList || contentList.length === 0);
 
@@ -208,6 +208,7 @@ const MoreContentList: React.FC<Props> = ({
             <Search size={scale(23)} color={appliedTheme.colors.onBackground} />
           )
         }
+        theme={theme}
         {...headerProps}
       />
       {renderContent()}

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

@@ -18,11 +18,13 @@ 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';
+import type { IContentData } from '../../../types';
 
 type Props = {
   theme: ITheme;
-  title?: string;
-  description?: string;
+  title?: IContentData['name'];
+  description?: IContentData['description'];
+  release_year?: IContentData['release_year'];
   isLoading?: boolean;
   style?: {
     container?: StyleProp<ViewStyle>;
@@ -31,12 +33,14 @@ type Props = {
     scrollExpanded?: StyleProp<ViewStyle>;
     toggleText?: StyleProp<TextStyle>;
     skeletonLine?: StyleProp<ViewStyle>;
+    releaseYear?: StyleProp<ViewStyle>;
   };
 };
 
 export const AboutSection = ({
   theme,
   title = 'About',
+  release_year,
   description,
   isLoading = false,
   style,
@@ -89,6 +93,16 @@ export const AboutSection = ({
         {title}
       </Text>
 
+      {/* Release Year */}
+      {release_year && (
+        <Text
+          color={theme.colors.textSecondary}
+          style={[styles.releaseYear, style?.releaseYear]}
+        >
+          Release: <Text color={theme.colors.textPrimary}>{release_year}</Text>
+        </Text>
+      )}
+
       {!expanded ? (
         <Text
           color={theme.colors.textSecondary}
@@ -137,7 +151,7 @@ const styles = StyleSheet.create({
     marginTop: verticalScale(7),
   },
   title: {
-    fontSize: RFValue(14),
+    fontSize: RFValue(13),
     fontWeight: 'bold',
     marginBottom: scale(6),
   },
@@ -149,6 +163,12 @@ const styles = StyleSheet.create({
   scrollExpanded: {
     maxHeight: verticalScale(250),
   },
+  releaseYear: {
+    fontSize: RFValue(12),
+    fontWeight: '500',
+    marginBottom: scale(6),
+    letterSpacing: 0.3,
+  },
   toggleText: {
     fontSize: RFValue(9.5),
     fontWeight: '600',

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

@@ -202,7 +202,7 @@ const styles = StyleSheet.create({
     marginVertical: scale(10),
   },
   heading: {
-    fontSize: RFValue(14),
+    fontSize: RFValue(13),
     fontWeight: 'bold',
     marginBottom: scale(8),
     paddingHorizontal: scale(12),

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

@@ -11,10 +11,11 @@ import { scale, verticalScale, moderateScale } from 'react-native-size-matters';
 import { Text } from '../../Text';
 import Display from '../../../utils/Display';
 import type { IContentEpisodes, IContentSeasons } from '../../../types';
-import type { ITheme } from '../../../theme/themes';
+import type { ITheme, ThemeOverride } from '../../../theme/themes';
 import { ThumbnailCard } from '../../Content/Card/components/ThumbnailCard';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../Content/Card/components/RentOrBuyIcon';
+import { useInternalTheme } from '../../../theme/hook';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -43,6 +44,7 @@ interface EpisodeCardItemProps {
   season_id: string;
   season_number: number;
   episode: IContentEpisodes;
+  isDarkMode: boolean;
   onPress: (e: IOnPressParams) => void;
   theme: ITheme;
   style?: React.ComponentProps<typeof TouchableOpacity>['style'];
@@ -53,7 +55,7 @@ interface EpisodeCardItemProps {
 interface EpisodeCardProps {
   seasons: IContentSeasons[];
   onPress: (e: IOnPressParams) => void;
-  theme: ITheme;
+  theme?: ThemeOverride;
   isLoading?: boolean;
   mode?: 'horizontal' | 'vertical';
 }
@@ -74,6 +76,7 @@ const EpisodeCardItem = memo(
     season_number,
     episode,
     onPress,
+    isDarkMode,
     theme,
     style,
     thumbnailHeight,
@@ -109,15 +112,21 @@ const EpisodeCardItem = memo(
           flexDirection: isVerticalMode
             ? ('row' as const)
             : ('column' as const),
-          borderWidth: isVerticalMode ? 0 : theme.dark ? 0 : BORDER_WIDTH,
+          borderWidth: isVerticalMode ? 0 : isDarkMode ? 0 : BORDER_WIDTH,
           borderColor: isVerticalMode
             ? 'transparent'
-            : theme.dark
+            : isDarkMode
               ? 'transparent'
               : theme.colors.border,
         },
       ],
-      [style, isVerticalMode, theme]
+      [
+        style,
+        isVerticalMode,
+        theme.colors.surfaceVariant,
+        theme.colors.border,
+        isDarkMode,
+      ]
     );
 
     const windowWidth = Display.fullWidth;
@@ -202,6 +211,7 @@ const EpisodeCardItem = memo(
         <View style={[styles.cardContent, isVerticalMode && styles.cardGrid]}>
           <View style={thumbnailStyle}>
             <RentOrBuyIcon
+              theme={theme}
               content_offering_type={episode.content_offering_type}
             />
             <ThumbnailCard
@@ -254,10 +264,11 @@ const EpisodeCardItem = memo(
 export const EpisodeCard = ({
   seasons,
   onPress,
-  theme,
+  theme: themeOverride,
   isLoading = false,
   mode = 'horizontal',
 }: EpisodeCardProps) => {
+  const { isDarkMode, theme } = useInternalTheme(themeOverride);
   const [selectedSeasonIndex, setSelectedSeasonIndex] = useState(0);
   const windowWidth = Display.fullWidth;
 
@@ -324,13 +335,14 @@ export const EpisodeCard = ({
           theme={theme}
           season_id={selectedSeason._id}
           episode={item}
+          isDarkMode={isDarkMode}
           season_number={selectedSeason.season_number}
           onPress={onPress}
           style={{ width: cardWidth }}
           thumbnailHeight={thumbnailHeight}
         />
       ) : null,
-    [theme, selectedSeason, onPress, cardWidth, thumbnailHeight]
+    [selectedSeason, theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   const renderLoadingItem = useCallback(
@@ -338,6 +350,7 @@ export const EpisodeCard = ({
       <EpisodeCardItem
         theme={theme}
         season_id=""
+        isDarkMode={isDarkMode}
         season_number={0}
         episode={{
           _id: '',
@@ -361,7 +374,7 @@ export const EpisodeCard = ({
         isLoading
       />
     ),
-    [theme, onPress, cardWidth, thumbnailHeight]
+    [theme, isDarkMode, onPress, cardWidth, thumbnailHeight]
   );
 
   if (isLoading) {