@zezosoft/zezo-ott-react-native-ui-kit 1.0.8 → 1.1.0

package/src/components/BlurView/BlurView.tsx

@@ -0,0 +1,199 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 05:00 PM
+ */
+
+import React from 'react';
+import { View, StyleSheet, type ViewStyle, type StyleProp } from 'react-native';
+
+/**
+ * BlurView Props - Same as @react-native-community/blur
+ */
+export interface BlurViewProps {
+  /** Style of the BlurView container */
+  style?: StyleProp<ViewStyle>;
+
+  /** The blur type (tint) - exactly matches community lib */
+  blurType?:
+    | 'dark'
+    | 'light'
+    | 'xlight'
+    | 'extraDark'
+    | 'regular'
+    | 'prominent'
+    | 'chromeMaterial'
+    | 'material'
+    | 'thickMaterial'
+    | 'thinMaterial'
+    | 'ultraThinMaterial'
+    | 'chromeMaterialDark'
+    | 'materialDark'
+    | 'thickMaterialDark'
+    | 'thinMaterialDark'
+    | 'ultraThinMaterialDark'
+    | 'chromeMaterialLight'
+    | 'materialLight'
+    | 'thickMaterialLight'
+    | 'thinMaterialLight'
+    | 'ultraThinMaterialLight';
+
+  /** The blur intensity amount (0-100) - exactly matches community lib */
+  blurAmount?: number;
+
+  /** Fallback color for reduced transparency - exactly matches community lib */
+  reducedTransparencyFallbackColor?: string;
+
+  /** iOS only: Overlay color - exactly matches community lib */
+  overlayColor?: string;
+
+  /** Android only: Downsample factor (higher = more blur but lower quality) */
+  downsampleFactor?: number;
+
+  /** Android only: Blur radius */
+  blurRadius?: number;
+
+  /** Child components */
+  children?: React.ReactNode;
+}
+
+/**
+ * Custom BlurView - 100% Compatible with @react-native-community/blur
+ *
+ * ✅ Same API as @react-native-community/blur
+ * ✅ Works on iOS, Android, and Web
+ * ✅ Drop-in replacement - just change the import
+ * 🚫 Simulates blur (no live backdrop) using semi-transparent layers
+ *
+ * @example
+ * ```tsx
+ * <BlurView
+ *   style={styles.blur}
+ *   blurType="light"
+ *   blurAmount={10}
+ *   reducedTransparencyFallbackColor="white"
+ * />
+ * ```
+ */
+const BlurView: React.FC<BlurViewProps> = ({
+  style,
+  blurType = 'light',
+  blurAmount = 100,
+  reducedTransparencyFallbackColor,
+  overlayColor,
+  children,
+}) => {
+  // Clamp blur amount to 0-100 range (same as community lib)
+  const intensity = Math.max(0, Math.min(100, blurAmount));
+
+  // Get tint style based on blur type
+  const tintStyle = getBlurTintStyle(
+    blurType,
+    intensity,
+    reducedTransparencyFallbackColor,
+    overlayColor
+  );
+
+  // Platform-specific rendering
+  return (
+    <View style={[styles.container, style]}>
+      {/* Background blur layer */}
+      <View style={[StyleSheet.absoluteFillObject, tintStyle]} />
+
+      {/* Content layer */}
+      <View pointerEvents="box-none" style={styles.content}>
+        {children}
+      </View>
+    </View>
+  );
+};
+
+/**
+ * Get blur tint style based on blurType
+ * Matches the exact behavior of @react-native-community/blur
+ */
+function getBlurTintStyle(
+  blurType: string,
+  intensity: number,
+  fallbackColor?: string,
+  overlayColor?: string
+): ViewStyle {
+  // If overlayColor is provided, use it (iOS behavior)
+  if (overlayColor) {
+    return { backgroundColor: overlayColor };
+  }
+
+  // Calculate opacity based on intensity (0-100)
+  // Higher intensity = more opaque = stronger blur effect
+  const opacity = Math.min(0.95, intensity / 100);
+  const lightOpacity = opacity * 0.7;
+  const darkOpacity = opacity * 0.8;
+
+  // Match exact blur types from @react-native-community/blur
+  switch (blurType) {
+    // Dark blur types
+    case 'dark':
+      return { backgroundColor: `rgba(0, 0, 0, ${darkOpacity})` };
+    case 'extraDark':
+      return {
+        backgroundColor: `rgba(0, 0, 0, ${Math.min(0.98, darkOpacity * 1.2)})`,
+      };
+    case 'materialDark':
+    case 'thickMaterialDark':
+    case 'chromeMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity})` };
+    case 'thinMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.7})` };
+    case 'ultraThinMaterialDark':
+      return { backgroundColor: `rgba(28, 28, 30, ${darkOpacity * 0.5})` };
+
+    // Light blur types
+    case 'light':
+      return {
+        backgroundColor:
+          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
+      };
+    case 'xlight':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.6})` };
+    case 'materialLight':
+    case 'chromeMaterialLight':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity})` };
+    case 'thickMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
+    case 'thinMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
+    case 'ultraThinMaterialLight':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
+
+    // Regular/prominent types
+    case 'regular':
+    case 'prominent':
+      return { backgroundColor: `rgba(255, 255, 255, ${lightOpacity * 0.8})` };
+    case 'material':
+    case 'chromeMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity})` };
+    case 'thickMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 1.1})` };
+    case 'thinMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.7})` };
+    case 'ultraThinMaterial':
+      return { backgroundColor: `rgba(242, 242, 247, ${lightOpacity * 0.5})` };
+
+    // Default
+    default:
+      return {
+        backgroundColor:
+          fallbackColor || `rgba(255, 255, 255, ${lightOpacity})`,
+      };
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+  },
+  content: {
+    flex: 1,
+  },
+});
+
+export default BlurView;

package/src/components/BlurView/index.ts

@@ -0,0 +1,7 @@
+/**
+ * @author Naresh Dhamu
+ * @lastModified Thu 06 Nov 2025 at 05:00 PM
+ */
+
+export { default as BlurView, default } from './BlurView';
+export type { BlurViewProps } from './BlurView';

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

@@ -28,15 +28,12 @@ import Animated, {
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
-import type {
-  IContentData,
-  IGetSectionData,
-  MoreFetchData,
-} from '../../../../types';
+import type { IGetSectionData, MoreFetchData } from '../../../../types';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { Text } from '../../../Text';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../components/RentOrBuyIcon';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 export interface IHistoryItem {
   _id: string;

package/src/components/Content/Card/Sliders/Styles/One.tsx

@@ -18,11 +18,12 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { Play } from 'lucide-react-native';
 import { Text } from '../../../../Text';
 import Display from '../../../../../utils/Display';
-import type { IContentData, ISectionContent } from '../../../../../types';
+import type { ISectionContent } from '../../../../../types';
 import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 import type { ThemeOverride } from '../../../../../theme/themes';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // Constants
 const DEFAULT_SKELETON_COUNT = 3;

package/src/components/Content/Card/Sliders/Styles/Two.tsx

@@ -18,10 +18,11 @@ import { Text } from '../../../../Text';
 import { useInternalTheme } from '../../../../../theme/hook/useInternalTheme';
 import Display from '../../../../../utils/Display';
 import { ThumbnailCard } from '../../components/ThumbnailCard';
-import type { IContentData, ISectionContent } from '../../../../../types';
+import type { ISectionContent } from '../../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../../components/RentOrBuyIcon';
 import type { ThemeOverride } from '../../../../../theme/themes';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 const FULL_WIDTH = Display.fullWidth;
 const FULL_HEIGHT = FULL_WIDTH * (9 / 16);

package/src/components/Content/Card/Styles/Five.tsx

@@ -26,12 +26,12 @@ import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 const DEFAULT_ITEM_WIDTH = moderateScale(140);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);

package/src/components/Content/Card/Styles/Four.tsx

@@ -24,13 +24,13 @@ import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import FastImage from 'react-native-fast-image';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // default values
 const DEFAULT_ITEM_WIDTH = moderateScale(100);
@@ -234,7 +234,9 @@ const MovieCardFour: React.FC<MovieCardFourProps> = ({
             ref={flatListRef}
             data={data}
             horizontal
-            keyExtractor={(item, index) => `${item._id}-${index}`}
+            keyExtractor={(item, index) =>
+              item._id || `item-${item.slug || item.name || index}`
+            }
             renderItem={renderItem}
             showsHorizontalScrollIndicator={false}
             contentContainerStyle={styles.listContent}

package/src/components/Content/Card/Styles/One.tsx

@@ -23,13 +23,13 @@ import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ITheme, ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // Constants
 const DEFAULT_ITEM_WIDTH = moderateScale(105);

package/src/components/Content/Card/Styles/RotateInOut.tsx

@@ -25,13 +25,13 @@ import NavigateToMore from '../components/NavigateToMore';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 const { width, height } = Dimensions.get('window');
 

package/src/components/Content/Card/Styles/Six.tsx

@@ -27,13 +27,13 @@ import { Text } from '../../../Text';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type { ThemeOverride } from '../../../../theme/themes';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import { RFValue } from 'react-native-responsive-fontsize';
 import RentOrBuyIcon from '../components/RentOrBuyIcon';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 const DEFAULT_ITEM_WIDTH = moderateScale(160);
 const DEFAULT_BORDER_RADIUS = moderateScale(5);
 const DEFAULT_SKELETON_COUNT = 3;

package/src/components/Content/Card/Styles/Three.tsx

@@ -25,13 +25,13 @@ import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import CardPoster from '../components/CardPoster';
 import NavigateToMore from '../components/NavigateToMore';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
 } from '../../../../types';
 import type { ThemeOverride } from '../../../../theme/themes';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 const { width, height } = Dimensions.get('window');
 

package/src/components/Content/Card/Styles/TopTen.tsx

@@ -21,7 +21,6 @@ import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
@@ -32,6 +31,7 @@ import LinearGradient from 'react-native-linear-gradient';
 import { Text } from '../../../Text';
 import CardPoster from '../components/CardPoster';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 const DEFAULT_ITEM_WIDTH = moderateScale(120);
 const DEFAULT_ITEM_HEIGHT = moderateScale(180);

package/src/components/Content/Card/Styles/Two.tsx

@@ -22,7 +22,6 @@ import { moderateScale, verticalScale } from 'react-native-size-matters';
 
 import { usePaginatedSection } from '../../../../hooks/usePaginatedSection';
 import type {
-  IContentData,
   IGetSectionData,
   ISectionContent,
   MoreFetchData,
@@ -32,6 +31,7 @@ import { useInternalTheme } from '../../../../theme/hook/useInternalTheme';
 import NavigateToMore from '../components/NavigateToMore';
 import CardPoster from '../components/CardPoster';
 import { RFValue } from 'react-native-responsive-fontsize';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 // Defaults
 const DEFAULT_WIDTH = moderateScale(172);

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

@@ -14,8 +14,8 @@ import { scale } from 'react-native-size-matters';
 import { Text } from '../../../Text';
 import { ImageOff } from 'lucide-react-native';
 import type { ITheme } from '../../../../theme/themes';
-import type { IContentData } from '../../../../types';
 import RentOrBuyIcon from './RentOrBuyIcon';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 export type CardPosterProps = {
   content_offering_type?: IContentData['content_offering_type'];

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { View, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { scale } from 'react-native-size-matters';
-import type { IContentData } from '../../../../types';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 import type { ITheme } from '../../../../theme/themes';
 
 interface RentOrBuyIconProps {

package/src/components/Content/Content.tsx

@@ -12,20 +12,22 @@ import {
   type StyleProp,
   type ViewStyle,
 } from 'react-native';
-import { scale } from 'react-native-size-matters';
+import { scale, verticalScale } from 'react-native-size-matters';
 import Animated, {
   type AnimatedStyle,
   type SharedValue,
 } from 'react-native-reanimated';
 
 import SectionType from './Sections';
-import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
+import type { IGetSectionData, MoreFetchData } from '../../types';
 import { dummySections } from '../../constants/dummySections';
 import CategoryCard, { type ICategory } from './Card/Category/Category';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
 import type { ThemeOverride } from '../../theme/themes';
 import { NoContentFallback, type NoContentFallbackProps } from '../Fallbacks';
 import { useInternalTheme } from '../../theme/hook';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 export interface ICustomComponentsForContent {
   type: string;
@@ -150,6 +152,7 @@ export const Content: React.FC<IContentProps> = ({
   isLoading,
   noContentFallbackProps,
 }) => {
+  const insets = useSafeAreaInsets();
   const sectionData = useMemo<IGetSectionData[]>(
     () => contentData?.sectionData ?? [],
     [contentData?.sectionData]
@@ -247,9 +250,8 @@ export const Content: React.FC<IContentProps> = ({
       }
       onEndReachedThreshold={0.7}
       contentContainerStyle={[
-        {
-          paddingBottom: scale(100),
-        },
+        { paddingBottom: verticalScale(100) + insets.bottom },
+
         contentContainerStyle,
       ]}
     />

package/src/components/Content/Sections.tsx

@@ -5,11 +5,12 @@
 import React from 'react';
 import Sliders from './Card/Sliders';
 import Cards from './Card';
-import type { IContentData, IGetSectionData, MoreFetchData } from '../../types';
+import type { IGetSectionData, MoreFetchData } from '../../types';
 import type { IHistoryItem } from './Card/NowWatching/NowWatching';
 import type { ICategory } from './Card/Category/Category';
 import type { ThemeOverride } from '../../theme/themes';
 import type { IContentLoading } from './Content';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 export interface ICustomComponentsForSections {
   type: string;

package/src/components/ContentView/ContentView.tsx

@@ -33,6 +33,7 @@ export const ContentView = ({
   recommendedContentCardStyles,
   history,
   episodeCardMode,
+  pricingAndExpiryInfo,
 }: ComponentProps) => {
   const { theme: appliedTheme } = useInternalTheme(theme);
   const seekTime = history?.currentTime || 0;
@@ -95,7 +96,13 @@ export const ContentView = ({
             isLoading={isLoading}
             style={genreTagsStyles}
           />
-          <MiniInfo content={content} theme={theme} isLoading={isLoading} />
+          <MiniInfo
+            content={content}
+            theme={theme}
+            isLoading={isLoading}
+            {...pricingAndExpiryInfo}
+          />
+
           <AboutSection
             theme={appliedTheme}
             description={content?.description}

package/src/components/ContentView/MoreContentList.tsx

@@ -13,7 +13,6 @@ import {
 } 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';
@@ -23,6 +22,7 @@ import type { ThemeOverride } from '../../theme/themes';
 import { useInternalTheme } from '../../theme/hook';
 import Animated from 'react-native-reanimated';
 import { Search } from 'lucide-react-native';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 interface Props {
   headerProps?: AppHeaderProps;

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

@@ -18,7 +18,7 @@ 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';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   theme: ITheme;

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

@@ -18,8 +18,8 @@ import FastImage, { type ImageStyle } from 'react-native-fast-image';
 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';
+import type { IContentCast } from '@zezosoft/zezo-ott-api-client';
 
 type StyleProps = {
   container?: StyleProp<ViewStyle>;
@@ -61,6 +61,7 @@ export const CastCard = ({
     name: '',
     avatar: '',
     castType: '',
+    type: 'actor',
   }));
 
   const listData = isLoading ? placeholderData : (data ?? []);

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

@@ -10,12 +10,15 @@ import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 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, 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';
+import type {
+  IContentEpisodes,
+  IContentSeasons,
+} from '@zezosoft/zezo-ott-api-client';
 
 // Constants
 const SKELETON_COUNT = 3;
@@ -367,6 +370,7 @@ export const EpisodeCard = ({
           source_type: 'HLS',
           content_offering_type: 'FREE',
           status: true,
+          data: '',
         }}
         onPress={onPress}
         style={{ width: cardWidth }}

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

@@ -14,9 +14,9 @@ import {
 import { Text } from '../../Text';
 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';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
 
 type Props = {
   genres?: IContentData['genres'];