📄 Content Details

This screen shows full details for a movie or web series. It includes the banner, title, cast, genres, description, episodes (if any), and recommended content. It also supports sharing, downloading, and resuming playback.

🌟 What It Does

Fetches and displays content details (via slug)
Shows genres, cast, and full description
Displays episodes for series
Loads recommended content (with pagination)
Supports resume playback using watch history
Includes share and (future) download actions

📸 Preview

📡 API Methods Used

⚙️ First, set up the getZezoOtt API client: API Client Setup

This screen uses the following methods from the Zezo API client:

🔹 getZezoOtt().contents.get() – Fetch content details by slug
🔹 getZezoOtt().contents.getSeasons() – Get seasons and episodes
🔹 getZezoOtt().sections.get() – Load recommended content + pagination
🔹 getZezoOtt().history.get() – Get user playback history

⚙️ How It Works

It uses the ContentView component from the Zezo UI kit inside a SafeAreaWrapper.

ContentDetails.tsx


import {
  ContentView,
  SafeAreaWrapper,
} from "@zezosoft/zezo-ott-react-native-ui-kit";
 
<SafeAreaWrapper>
  <ContentView
    content={{}} // ← API response from getZezoOtt().contents.get()
    history={{}} // ← API response from getZezoOtt().history.get()
    episodeCardMode="horizontal"
    events={{
      onPlay: () => {}, // handle play action
      onBackPress: () => {}, // handle back navigation
    }}
    heroBannerProps={{
      menuActions, // share/download actions
      onBackPress: () => {}, // banner back button
    }}
  />
</SafeAreaWrapper>;


const menuActions = [
  { label: "Download", icon: DownloadIcon, onPress: () => {} },
  { label: "Share", icon: ShareIcon, onPress: () => share() },
];

Share uses useShare() hook
Download is reserved for future use

📦 Props for `ContentView`

Prop Name	Type	Description
`content`	`IContentData`	Content details (title, images, etc.)
`seasons`	`Season[]`	List of seasons (if it’s a series)
`recommendedContent`	`RecommendedContent`	Related/recommended titles
`isLoading`	`boolean`	Loading state for content
`seasonsIsLoading`	`boolean`	Loading state for seasons
`history`	`ContentView.History`	User’s watch history
`episodeCardMode`	`horizontal` `vertical`	Episode layout style
`events.onPlay`	`() => void`	Called when play button is pressed
`events.onBackPress`	`() => void`	Called when back button is pressed
`events.moreFetchDataRecommended`	`MoreFetchData<IContentData>`	Loads more recommended content
`heroBannerProps.menuActions`	`MenuAction[]`	Banner action buttons (share, download)
`heroBannerProps.onBackPress`	`() => void`	Back button on banner

🔄 Fetching More Recommendations


const fetchMoreData = async ({ sectionId, meta }) => {
  const res = await getZezoOtt().sections.get({
    id: sectionId,
    content_list_page: meta.nextPage ?? 1,
    content_list_limit: 5,
    ...
  });
 
  return res?.data?.[0]?.content ?? null;
};

⏯️ Resume Playback Support


const seekTime = history?.currentTime || 0;
const isComplete = history?.completed || false;
const currentEpisode = history?.current_episode || 0;

Starts from where the user left off unless content is marked complete.

🧼 UX Loading State


<SkeletonPlaceholder.Item width={110} height={25} borderRadius={14} />

Displays placeholder elements while data is loading.

✅ Summary

Easy-to-use screen for content details
Handles both movies and series
Supports resume, share, and future download
Cleanly integrates with the Zezo OTT UI kit
Fully typed and works with React Query