@zezosoft/zezo-ott-react-native-ui-kit 1.3.4 → 1.3.6

package/src/types/content/content-view.types.ts

@@ -0,0 +1,209 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import type { ImageStyle as FastImageStyle } from 'react-native-fast-image';
+import type { ThemeOverride } from '../../theme/themes';
+import type {
+  IGetSectionData,
+  ISectionItem,
+  IHistoryV1,
+} from '../../types/sections';
+import type { MoreFetchData } from '../../types/hook/usePaginatedSection';
+import type React from 'react';
+import type { MiniInfo } from '../../components/ContentView/One/components/MiniInfo';
+import type { IContentData } from '@zezosoft/zezo-ott-api-client';
+
+// 🔷 Common Style Aliases
+export type ViewStyleProp = StyleProp<ViewStyle>;
+export type TextStyleProp = StyleProp<TextStyle>;
+export type FastImageStyleProp = StyleProp<FastImageStyle>;
+
+// 🔹 UI Style Overrides
+export type TitleStyles = {
+  container?: ViewStyleProp;
+  title?: TextStyleProp;
+  subTitle?: TextStyleProp;
+  rating?: TextStyleProp;
+  releaseYear?: TextStyleProp;
+  duration?: TextStyleProp;
+  language?: TextStyleProp;
+};
+
+export type LikeShareActionsStyles = {
+  container?: ViewStyleProp;
+  likeButton?: ViewStyleProp;
+  shareButton?: ViewStyleProp;
+};
+
+export type SectionTabsStyles = {
+  container?: ViewStyleProp;
+  tab?: ViewStyleProp;
+  title?: TextStyleProp;
+  indicator?: ViewStyleProp;
+};
+
+export type DetailsStyles = {
+  container?: ViewStyleProp;
+  section?: ViewStyleProp;
+  labelText?: TextStyleProp;
+  valueText?: TextStyleProp;
+  release_year?: ViewStyleProp;
+  cast?: ViewStyleProp;
+  directors?: ViewStyleProp;
+  writers?: ViewStyleProp;
+  producers?: ViewStyleProp;
+  maturity_rating?: ViewStyleProp;
+};
+
+export type GenreTagStyles = {
+  container?: ViewStyleProp;
+  tagContainer?: ViewStyleProp;
+  tagText?: TextStyleProp;
+  skeletonTag?: ViewStyleProp;
+};
+
+export type AboutSectionStyles = {
+  container?: ViewStyleProp;
+  title?: TextStyleProp;
+  body?: TextStyleProp;
+  scrollExpanded?: ViewStyleProp;
+  toggleText?: TextStyleProp;
+  skeletonLine?: ViewStyleProp;
+};
+
+export type CastCardStyles = {
+  container?: ViewStyleProp;
+  heading?: TextStyleProp;
+  listContent?: ViewStyleProp;
+  card?: ViewStyleProp;
+  image?: FastImageStyleProp;
+  name?: TextStyleProp;
+  role?: TextStyleProp;
+  imageSkeleton?: ViewStyleProp;
+  nameSkeleton?: ViewStyleProp;
+  roleSkeleton?: ViewStyleProp;
+};
+
+export type RecommendedCardStyles = {
+  renderItemImage?: (params: {
+    item: IContentData;
+    index: number;
+  }) => React.ReactNode;
+  itemWidth?: number;
+  itemHeight?: number;
+  borderRadius?: number;
+  skeletonCount?: number;
+  containerStyle?: ViewStyleProp;
+  titleStyle?: TextStyleProp;
+  itemStyle?: ViewStyleProp;
+};
+
+// 🟩 Events
+export type PlayEventArgs = {
+  id: string;
+  title: IContentData['name'];
+  slug: string;
+  type: IContentData['type'];
+  episodeId?: string;
+  episode_title?: string;
+  current_season?: string;
+  current_episode?: string;
+  episode_number?: number;
+  is_trailer?: boolean;
+  seekTime?: number;
+  mode?: 'fullscreen' | 'normal';
+};
+export type LikeShareEventArgs = {
+  id: IContentData['_id'];
+  source?: 'title' | 'card' | 'hero' | 'list';
+};
+
+// 🟩 Events
+export type LikeResponse = {
+  is_liked: boolean;
+};
+
+export type ContentViewEvents = {
+  onPlay?: (args: PlayEventArgs) => void;
+  onPressRecommendedItem?: (args: { item: IContentData }) => void;
+  onPressRecommendedMore?: (args: {
+    section_id: IGetSectionData['_id'];
+    name: IGetSectionData['name'];
+    type: IGetSectionData['type'];
+  }) => void;
+  onBackPress?: () => void;
+  onPressCast?: (args: { cast: IContentData }) => void;
+  moreFetchDataRecommended?: MoreFetchData<IContentData>;
+  onLikeContent?: (args: LikeShareEventArgs) => Promise<{ is_liked: boolean }>;
+  onShareContent?: (args: LikeShareEventArgs) => void;
+};
+
+// 🟦 Menu
+export type MenuAction = {
+  label: string;
+  icon?: (props: { size?: number; color?: string }) => React.ReactNode;
+  onPress: () => void;
+  isLoading?: boolean;
+};
+
+// 🟨 HeroBanner
+export type RenderButtons = Partial<{
+  back: () => React.ReactNode;
+  menu: () => React.ReactNode;
+  play: () => React.ReactNode;
+  trailer: () => React.ReactNode;
+}>;
+
+export type SkeletonOverrides = Partial<{
+  play: () => React.ReactNode;
+  trailer: () => React.ReactNode;
+  back: () => React.ReactNode;
+  menu: () => React.ReactNode;
+}>;
+
+export type HeroBannerProps = {
+  backgroundImage: IContentData['thumbnail'];
+  title: IContentData['name'];
+  titleImage?: string | null;
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  onPressPlay?: ({ is_trailer }: { is_trailer: boolean }) => void;
+  onBackPress?: () => void;
+  menuActions?: MenuAction[];
+  content_offering_type?: IContentData['content_offering_type'];
+  contentType?: IContentData['type'];
+};
+
+// 🟧 Final Component Props
+export type ComponentProps = {
+  content: IContentData;
+  seasons?: IContentData['seasons'];
+  text?: {
+    notFound?: {
+      title?: string;
+      subtitle?: string;
+      buttonText?: string;
+    };
+  };
+  theme?: ThemeOverride;
+  isLoading?: boolean;
+  pricingAndExpiryInfo?: Omit<
+    React.ComponentProps<typeof MiniInfo>,
+    'content' | 'theme'
+  >;
+  seasonsIsLoading?: boolean;
+  recommendedContent?: ISectionItem | null;
+  events?: ContentViewEvents;
+  isLiked?: boolean;
+  heroBannerProps?: Partial<HeroBannerProps>;
+  titleStyles?: TitleStyles;
+  genreTagsStyles?: GenreTagStyles;
+  aboutSectionStyles?: AboutSectionStyles;
+  castStyles?: CastCardStyles;
+  recommendedContentCardStyles?: RecommendedCardStyles;
+  history?: IHistoryV1;
+  episodeCardMode?: 'horizontal' | 'vertical';
+};

package/src/types/hook/index.ts

@@ -0,0 +1,6 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export type { MoreFetchData } from './usePaginatedSection';

package/src/types/hook/usePaginatedSection.ts

@@ -0,0 +1,20 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { ISectionMeta } from '../sections';
+
+export type MoreFetchData<T> = ({
+  sectionId,
+  meta,
+}: {
+  sectionId: string;
+  meta: {
+    hasNextPage: boolean;
+    nextPage: number;
+  };
+}) => Promise<{
+  data: T[];
+  meta: ISectionMeta;
+} | null>;

package/src/types/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export type * from './content/content-view.types';
+export type * from './sections';
+export type * from './hook';
+export type * from './user';
+export type * from './navigation';

package/src/types/navigation.ts

@@ -0,0 +1,17 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type React from 'react';
+
+export interface ITab {
+  key: string;
+  name: string;
+  screenComponent: React.ComponentType<never>;
+  icon: React.ComponentType<{
+    width: number;
+    height: number;
+    color: string;
+  }>;
+}

package/src/types/sections/index.ts

@@ -0,0 +1,87 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { IContentData, IServeAd } from '@zezosoft/zezo-ott-api-client';
+export type { IHistoryV1 } from '@zezosoft/zezo-ott-api-client';
+
+export type IAdItem = IServeAd & {
+  type: 'ads';
+};
+
+export type ISectionType =
+  | 'normal'
+  | 'card_style_2'
+  | 'card_style_3'
+  | 'card_style_4'
+  | 'card_style_5'
+  | 'card_style_6'
+  | 'card_rotate_in_out'
+  | 'slider'
+  | 'slider_style_2'
+  | 'slider_style_3'
+  | 'card_series_featured_style_1'
+  | 'continue_watching'
+  | 'new_releases'
+  | 'top_10'
+  | 'category';
+
+/**
+ * Generic pagination metadata
+ */
+export interface ISectionPagination {
+  page: number;
+  limit: number;
+  total: number;
+  length: number;
+  hasNextPage: boolean;
+  nextPage: number | null;
+}
+
+/**
+ * Single section object with associated content
+ */
+export interface IGetSectionData {
+  _id: string;
+  name: string;
+  label: string;
+  order: number;
+  type: ISectionType;
+  content_ids: string[];
+  category: {
+    _id: string;
+    name: string;
+    slug: string;
+  };
+  genre?: string;
+  content: {
+    data: (IContentData | IAdItem)[];
+    meta: {
+      pagination: ISectionPagination;
+    };
+  };
+  status: boolean;
+  createdAt: Date;
+  updatedAt: Date;
+}
+
+/**
+ * Full response from section fetch API
+ */
+export interface IGetSectionResponse {
+  success: boolean;
+  message: string;
+  data: IGetSectionData[];
+  meta: {
+    pagination: ISectionPagination;
+  };
+  cache: boolean;
+}
+
+/**
+ * Optional utility types (for local use)
+ */
+export type ISectionItem = IGetSectionData;
+export type ISectionContent = IGetSectionData['content'];
+export type ISectionMeta = IGetSectionResponse['meta'];

package/src/types/user.ts

@@ -0,0 +1,18 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import type { TextStyle, StyleProp } from 'react-native';
+
+export interface UserInfo {
+  name: string;
+  avatarUri: string;
+  emailOrPhone: string;
+  onEditPress?: () => void;
+}
+
+export interface UserInfoTextStyle {
+  nameStyle?: StyleProp<TextStyle>;
+  emailStyle?: StyleProp<TextStyle>;
+}

package/src/utils/Display.ts

@@ -0,0 +1,15 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { Dimensions } from 'react-native';
+
+const { height, width } = Dimensions.get('window');
+
+const setHeight = (h: number) => (height / 100) * h;
+const setWidth = (w: number) => (width / 100) * w;
+const fullWidth = Dimensions.get('window').width;
+const fullHeight = Dimensions.get('window').height;
+
+export default { setHeight, setWidth, fullWidth, fullHeight };

package/src/utils/Formater.ts

@@ -0,0 +1,33 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+export function formatCount(count: number): string {
+  if (count < 1000) {
+    return count.toString();
+  } else if (count < 1000000) {
+    const thousands = count / 1000;
+    return thousands % 1 === 0 ? `${thousands}K` : `${thousands.toFixed(1)}K`;
+  } else if (count < 1000000000) {
+    const millions = count / 1000000;
+    return millions % 1 === 0 ? `${millions}M` : `${millions.toFixed(1)}M`;
+  } else {
+    const billions = count / 1000000000;
+    return billions % 1 === 0 ? `${billions}B` : `${billions.toFixed(1)}B`;
+  }
+}
+
+/**
+ * Formats an ISO date string into a human-readable date (e.g. "01 Jan 2025").
+ * Extracted from ContentView/One/components/EpisodeCard and
+ * ContentView/Two/components/EpisodeCard to eliminate duplication.
+ */
+export function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString('en-US', {
+    day: '2-digit',
+    month: 'short',
+    year: 'numeric',
+  });
+}

package/src/utils/SizeMatters.ts

@@ -0,0 +1,8 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import * as SizeMatters from 'react-native-size-matters';
+
+export default SizeMatters;

package/src/utils/Spacing.ts

@@ -0,0 +1,27 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+import { Platform } from 'react-native';
+import { verticalScale } from 'react-native-size-matters';
+
+/**
+ * Get responsive bottom spacing that accounts for platform differences
+ * Automatically adds extra spacing for Android navigation bar
+ * @param baseSpacing - Base spacing value (default: 35)
+ * @returns Platform-specific responsive bottom spacing
+ * @example
+ * // Usage in any component
+ * bottom: getResponsiveBottomSpacing(35) // iOS: 35, Android: 45
+ */
+export const getResponsiveBottomSpacing = (
+  baseSpacing: number = 35
+): number => {
+  return Platform.OS === 'ios'
+    ? verticalScale(baseSpacing)
+    : verticalScale(baseSpacing + 10);
+};
+
+// Legacy export for backward compatibility
+export const getAuthBottomSpacing = getResponsiveBottomSpacing;

package/src/utils/colorUtils.ts

@@ -0,0 +1,70 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+/**
+ * Converts a color string to rgba format with specified opacity
+ * Supports multiple color formats: rgba, rgb, hex (#RGB, #RRGGBB, #RRGGBBAA)
+ *
+ * @param color - Color string in any supported format
+ * @param opacity - Opacity value between 0 and 1 (default: 0.9)
+ * @returns Color string in rgba format with specified opacity
+ *
+ * @example
+ * convertColorWithOpacity('rgb(255, 0, 0)', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ * convertColorWithOpacity('#FF0000', 0.8) // 'rgba(255, 0, 0, 0.8)'
+ * convertColorWithOpacity('rgba(255, 0, 0, 1)', 0.5) // 'rgba(255, 0, 0, 0.5)'
+ */
+export const convertColorWithOpacity = (
+  color: string,
+  opacity: number = 0.9
+): string => {
+  // Handle rgba format
+  if (color.startsWith('rgba(')) {
+    return color.replace(/rgba\(([^)]+)\)/, (match, rgb) => {
+      const values = rgb.split(',').map((v: string) => v.trim());
+      if (values.length === 4) {
+        return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
+      }
+      return match;
+    });
+  }
+
+  // Handle rgb format
+  if (color.startsWith('rgb(')) {
+    return color.replace(/rgb\(([^)]+)\)/, (match, rgb) => {
+      const values = rgb.split(',').map((v: string) => v.trim());
+      if (values.length === 3) {
+        return `rgba(${values[0]}, ${values[1]}, ${values[2]}, ${opacity})`;
+      }
+      return match;
+    });
+  }
+
+  // Handle hex format (#RGB, #RRGGBB, #RRGGBBAA)
+  if (color.startsWith('#')) {
+    const hex = color.replace('#', '');
+    let r: number, g: number, b: number;
+
+    if (hex.length === 3) {
+      // #RGB format
+      r = parseInt(hex[0]! + hex[0]!, 16);
+      g = parseInt(hex[1]! + hex[1]!, 16);
+      b = parseInt(hex[2]! + hex[2]!, 16);
+    } else if (hex.length === 6 || hex.length === 8) {
+      // #RRGGBB or #RRGGBBAA format
+      r = parseInt(hex.substring(0, 2)!, 16);
+      g = parseInt(hex.substring(2, 4)!, 16);
+      b = parseInt(hex.substring(4, 6)!, 16);
+    } else {
+      return color; // Invalid hex, return as is
+    }
+
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+
+  // For other formats (named colors, etc.), return as is
+  // In a real scenario, you might want to convert named colors to rgba
+  return color;
+};

package/src/utils/imageValidation.ts

@@ -0,0 +1,36 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+/**
+ * Utility function to check if URL is a local file path
+ * @param url - The URL to check
+ * @returns true if the URL is a local file path, false otherwise
+ */
+export const isLocalFile = (url: string): boolean => {
+  return url?.startsWith?.('file://') || url?.startsWith?.('/');
+};
+
+/**
+ * Utility function to validate image URL (supports cloud URIs, data URIs, and local file paths)
+ * @param url - The URL to validate
+ * @returns true if the URL is a valid image URL, false otherwise
+ */
+export const isValidImageUrl = (url: string | null | undefined): boolean => {
+  if (!url || typeof url !== 'string') return false;
+  const cleaned = url.trim();
+
+  // Check for local file paths
+  if (isLocalFile(cleaned)) {
+    return cleaned.length > 0;
+  }
+
+  // Check for data URIs
+  if (cleaned.startsWith('data:image/')) {
+    return true;
+  }
+
+  // Check for cloud URIs (http/https)
+  return cleaned.startsWith('http://') || cleaned.startsWith('https://');
+};

package/src/utils/interaction.ts

@@ -0,0 +1,19 @@
+/**
+ * @author Naresh Dhamu
+ * @LastModified Mon 13 Jul 2026 at 10:13 AM
+ */
+
+declare const requestIdleCallback: any;
+
+/**
+ * Runs a callback when the JS thread is idle, replacing the deprecated InteractionManager.
+ */
+export const runAfterInteractions = (callback: () => void): void => {
+  if (typeof requestIdleCallback !== 'undefined') {
+    requestIdleCallback(callback);
+  } else if (typeof requestAnimationFrame !== 'undefined') {
+    requestAnimationFrame(callback);
+  } else {
+    setTimeout(callback, 0);
+  }
+};

package/lib/module/Styles/globalStyles.js

@@ -1,71 +0,0 @@
-"use strict";
-
-/**
- * @author Naresh Dhamu
- * @lastModified Sat 14 Jun 2025 at 02:59 PM
- */
-
-import { StyleSheet } from 'react-native';
-const globalStyles = StyleSheet.create({
-  centerContainer: {
-    flex: 1,
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  container: {
-    flex: 1
-  },
-  newContainer: {
-    flex: 1
-  },
-  // new styles
-  flexOneJustifyContentAndAlignItemsCenter: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  hundredPercentWidth: {
-    width: '100%'
-  },
-  hundredPercentHeight: {
-    height: '100%'
-  },
-  marginZeroAndPaddingZero: {
-    margin: 0,
-    padding: 0
-  },
-  overflowHidden: {
-    overflow: 'hidden'
-  },
-  flexOne: {
-    flex: 1
-  },
-  flexZero: {
-    flex: 0
-  },
-  positionAbsolute: {
-    position: 'absolute'
-  },
-  twentyPercentWidth: {
-    width: '20%'
-  },
-  alignItemsCenterAndJustifyContentCenter: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  textAlignCenter: {
-    textAlign: 'center'
-  },
-  flexRow_alignCenter_justifyBetween: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between'
-  },
-  flexOneWithBlackBackground: {
-    flex: 1,
-    backgroundColor: 'black'
-  }
-});
-export default globalStyles;
-//# sourceMappingURL=globalStyles.js.map

package/lib/module/Styles/globalStyles.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["StyleSheet","globalStyles","create","centerContainer","flex","width","alignItems","justifyContent","container","newContainer","flexOneJustifyContentAndAlignItemsCenter","hundredPercentWidth","hundredPercentHeight","height","marginZeroAndPaddingZero","margin","padding","overflowHidden","overflow","flexOne","flexZero","positionAbsolute","position","twentyPercentWidth","alignItemsCenterAndJustifyContentCenter","textAlignCenter","textAlign","flexRow_alignCenter_justifyBetween","flexDirection","flexOneWithBlackBackground","backgroundColor"],"sourceRoot":"../../../src","sources":["Styles/globalStyles.ts"],"mappings":";;AAAA;AACA;AACA;AACA;;AAEA,SAASA,UAAU,QAAQ,cAAc;AAEzC,MAAMC,YAAY,GAAGD,UAAU,CAACE,MAAM,CAAC;EACrCC,eAAe,EAAE;IACfC,IAAI,EAAE,CAAC;IACPC,KAAK,EAAE,MAAM;IACbC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDC,SAAS,EAAE;IACTJ,IAAI,EAAE;EACR,CAAC;EACDK,YAAY,EAAE;IACZL,IAAI,EAAE;EACR,CAAC;EACD;EACAM,wCAAwC,EAAE;IACxCN,IAAI,EAAE,CAAC;IACPG,cAAc,EAAE,QAAQ;IACxBD,UAAU,EAAE;EACd,CAAC;EACDK,mBAAmB,EAAE;IACnBN,KAAK,EAAE;EACT,CAAC;EACDO,oBAAoB,EAAE;IACpBC,MAAM,EAAE;EACV,CAAC;EACDC,wBAAwB,EAAE;IACxBC,MAAM,EAAE,CAAC;IACTC,OAAO,EAAE;EACX,CAAC;EACDC,cAAc,EAAE;IACdC,QAAQ,EAAE;EACZ,CAAC;EACDC,OAAO,EAAE;IACPf,IAAI,EAAE;EACR,CAAC;EACDgB,QAAQ,EAAE;IACRhB,IAAI,EAAE;EACR,CAAC;EACDiB,gBAAgB,EAAE;IAChBC,QAAQ,EAAE;EACZ,CAAC;EACDC,kBAAkB,EAAE;IAClBlB,KAAK,EAAE;EACT,CAAC;EACDmB,uCAAuC,EAAE;IACvClB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDkB,eAAe,EAAE;IACfC,SAAS,EAAE;EACb,CAAC;EACDC,kCAAkC,EAAE;IAClCC,aAAa,EAAE,KAAK;IACpBtB,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDsB,0BAA0B,EAAE;IAC1BzB,IAAI,EAAE,CAAC;IACP0B,eAAe,EAAE;EACnB;AACF,CAAC,CAAC;AAEF,eAAe7B,YAAY","ignoreList":[]}