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

package/src/components/Auth/SplashScreen/components/SplashVideo/SplashVideo.tsx

@@ -1,41 +1,53 @@
 /**
  * @author Naresh Dhamu
- * @lastModified Thu 17 Oct 2025
+ * @lastModified Sat 25 Oct 2025
  */
-import React, { useMemo, useCallback, useState } from 'react';
-import { View, StyleSheet, Animated } from 'react-native';
-import Video from 'react-native-video';
+
+import React, {
+  useMemo,
+  useCallback,
+  useRef,
+  useState,
+  useEffect,
+} from 'react';
+import { StyleSheet, Animated, View as RNView } from 'react-native';
+import Video, {
+  type OnLoadData,
+  type OnVideoErrorData,
+} from 'react-native-video';
 import Display from '../../../../../utils/Display';
 import { useInternalTheme } from '../../../../../theme/hook';
+import { View } from '../../../../View';
+import { Loader } from '../../../../Loader/Loader';
 
 interface IProps {
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   source: string;
-  fullscreen: boolean;
+  fullscreen?: boolean;
   resizeMode?: 'cover' | 'contain' | 'stretch' | 'none';
   onEnd?: () => void;
   onLoadStart?: () => void;
-  onLoaded?: (data: any) => void;
-  onError?: (error: any) => void;
+  onLoaded?: (data: OnLoadData) => void;
+  onError?: (error: string) => void;
 }
 
 const SplashVideo: React.FC<IProps> = ({
-  fullscreen,
-  height,
+  fullscreen = false,
+  width = Display.fullWidth,
+  height = Display.fullHeight,
   source,
   resizeMode = 'cover',
-  width,
   onEnd,
   onLoadStart,
   onLoaded,
   onError,
 }) => {
   const { theme: applyTheme } = useInternalTheme();
-  const [loaded, setLoaded] = useState(false);
-  const fadeAnim = useMemo(() => new Animated.Value(0), []);
+  const fadeAnim = useRef(new Animated.Value(0)).current;
+  const [isLoaded, setIsLoaded] = useState(false);
 
-  // Video style
+  /** 🎨 Compute video dimensions */
   const videoStyle = useMemo(
     () => ({
       width: fullscreen ? Display.fullWidth : width,
@@ -44,77 +56,71 @@ const SplashVideo: React.FC<IProps> = ({
     [fullscreen, width, height]
   );
 
-  // Event handlers
+  /** 🌀 Fade-in animation */
+  const animateIn = useCallback(() => {
+    Animated.timing(fadeAnim, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true,
+    }).start();
+  }, [fadeAnim]);
+
+  /** 📦 Resolve video URI */
+  const resolveUri = useCallback((src: string): string => {
+    if (!src) return '';
+    if (/^(https?|file):\/\//.test(src)) return src;
+    return `file://${src}`;
+  }, []);
+
+  /** 🔄 Video lifecycle handlers */
   const handleLoadStart = useCallback(() => {
-    setLoaded(false);
-    fadeAnim.setValue(0); // Reset fade animation
+    setIsLoaded(false);
+    fadeAnim.setValue(0);
     onLoadStart?.();
-  }, [onLoadStart, fadeAnim]);
+  }, [fadeAnim, onLoadStart]);
 
   const handleLoad = useCallback(
-    (data: any) => {
-      setLoaded(true);
-
-      // Fade-in animation
-      Animated.timing(fadeAnim, {
-        toValue: 1,
-        duration: 400, // 0.4s smooth fade
-        useNativeDriver: true,
-      }).start();
-
+    (data: OnLoadData) => {
+      setIsLoaded(true);
+      animateIn();
       onLoaded?.(data);
     },
-    [onLoaded, fadeAnim]
+    [animateIn, onLoaded]
   );
 
   const handleError = useCallback(
-    (e: any) => {
-      const error =
-        e?.error?.message ||
-        e?.message ||
-        e?.error ||
-        e ||
+    (err: OnVideoErrorData | any) => {
+      const errorMsg =
+        err?.error?.message ||
+        err?.message ||
+        JSON.stringify(err) ||
         'Unknown video error';
-      console.error('Video playback error:', error);
-      setLoaded(false);
-      onError?.(error);
+      console.error('🎬 SplashVideo Error:', errorMsg);
+      setIsLoaded(false);
+      onError?.(errorMsg);
     },
     [onError]
   );
 
-  const resolveUri = (src?: string): string => {
-    if (!src) return '';
-    if (
-      src.startsWith('http') ||
-      src.startsWith('https') ||
-      src.startsWith('file://')
-    ) {
-      return src;
-    }
-    return `file://${src}`;
-  };
+  /** 🧹 Cleanup animation */
+  useEffect(() => {
+    return () => fadeAnim.stopAnimation();
+  }, [fadeAnim]);
 
+  /** 🧱 Render */
   return (
-    <View
-      style={[
-        videoStyle,
-        styles.wrapper,
-        { backgroundColor: applyTheme.colors.background },
-      ]}
-    >
-      {/* Black background layer */}
-      {!loaded && (
-        <View
-          style={[
-            videoStyle,
-            styles.blackLayer,
-            { backgroundColor: applyTheme.colors.background },
-          ]}
-        />
+    <View style={styles.container}>
+      {/* Loader shown before video fully loads */}
+      {!isLoaded && (
+        <RNView style={styles.loaderWrapper}>
+          <Loader color={applyTheme.colors.primary} />
+        </RNView>
       )}
 
-      {/* Animated video */}
-      <Animated.View style={[videoStyle, { opacity: fadeAnim }]}>
+      {/* Video Layer */}
+      <Animated.View
+        style={[videoStyle, { opacity: fadeAnim, position: 'absolute' }]}
+      >
         <Video
           source={{ uri: resolveUri(source) }}
           style={videoStyle}
@@ -143,6 +149,8 @@ const SplashVideo: React.FC<IProps> = ({
           playWhenInactive={false}
           allowsExternalPlayback={false}
           automaticallyWaitsToMinimizeStalling
+          controls={false}
+          repeat={false}
         />
       </Animated.View>
     </View>
@@ -150,14 +158,22 @@ const SplashVideo: React.FC<IProps> = ({
 };
 
 const styles = StyleSheet.create({
-  wrapper: {
-    overflow: 'hidden',
+  container: {
+    flex: 1,
+    position: 'relative',
+    justifyContent: 'center',
+    alignItems: 'center',
   },
-  blackLayer: {
-    ...StyleSheet.absoluteFillObject,
 
+  loaderWrapper: {
+    ...StyleSheet.absoluteFillObject,
+    justifyContent: 'center',
+    alignItems: 'center',
     zIndex: 1,
   },
+  loader: {
+    transform: [{ scale: 1.2 }],
+  },
 });
 
 export default React.memo(SplashVideo);

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

@@ -1,3 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Sat 25 Oct 2025 at 04:01 PM
+ */
+
 import React, { useState, useEffect, useMemo } from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import FastImage, {

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 { ThemeOverride } from '../../theme/themes';
+import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
+import { useInternalTheme } from '../../theme/hook';
 
 export interface ICustomComponentsForContent {
   type: string;
@@ -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/ContentView/ContentView.tsx

@@ -2,7 +2,6 @@
  * @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';
@@ -14,12 +13,16 @@ 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,
@@ -35,96 +38,117 @@ export const ContentView = ({
   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={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}
-        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}
-            mode={episodeCardMode ?? 'horizontal'}
+            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}
           />
-        )}
 
-      {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}
-        />
+          <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/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),