🎬 ZezoOTT Video Player

The ZezoOTT Video Player is a powerful React Native component crafted for OTT platforms. It delivers a seamless full-screen video playback experience, with support for:

📺 Episode navigation
📊 Watch progress tracking & analytics
🎨 Custom theming
🔄 Auto-next playback
🎬 Seasons & playlist integration

Built to save development time, it provides a ready-to-use video experience for premium streaming apps.

📦 Installation


npm install @zezosoft/zezo-ott-react-native-video-player


yarn add @zezosoft/zezo-ott-react-native-video-player

📸 Preview

⚙️ Props

Prop	Type	Description
onClose	`() => void`	Triggered when the player is closed.
isFocused	`boolean`	Controls playback focus. Automatically pauses when the screen is not active.
seekTime	`number \| null`	Starts playback from a given time (in seconds).
mode	`'fullscreen' \| 'normal'`	Sets the display mode of the player.
onSeek	`(time: number) => void`	Fired when the user manually seeks to a new playback position.
autoNext	`boolean`	Automatically plays the next episode/video after completion.
event	`{ onPressEpisode?: ({ episode }: { episode: MediaEpisode }) => Promise<boolean> }`	Event hooks (e.g. custom handling for episode selection).
theme	`Partial<VideoPlayerTheme>`	Customize the look & feel of the player (colors, metrics, etc.).
onWatchProgress	`(progress: ExtendedWatchProgress) => void`	Reports playback analytics such as watch time, current time, and completion.

▶️ Setup Playlist (contentData)

For a full working example, check the demo app and store implementation:

🔗 Demo App: Zezo OTT Demo APP
📦 Store : Video Player Store

🚀 Usage Examples

▶️ Basic Example


import React from "react";
import { VideoPlayer } from "@zezosoft/zezo-ott-react-native-video-player";
 
export default function App() {
  return (
    <VideoPlayer
      isFocused={true}
      onClose={() => console.log("Player closed")}
      autoNext={true}
      onWatchProgress={(progress) => {
        console.log("Watch Progress:", progress);
      }}
    />
  );
}

🔄 Auto-Next Episodes


<VideoPlayer
  autoNext={true} // Will auto-play next episode
  event={{
    onPressEpisode: async ({ episode }) => {
      console.log("Next episode:", episode.title);
      return true; // return false to block playback
    },
  }}
/>

If autoNext={false}, the player will stay on the current episode after completion.

🎨 Theming Example


<VideoPlayer
  theme={{
    colors: {
      primary: "#E50914",
      background: "#000000",
      onBackground: "#FFFFFF",
    },
    metrics: {
      controlButtonSize: 42,
    },
  }}
/>

📺 Playlist & Seasons Setup

Create a VideoPlayer screen and set the playlist from your Content Details page:


// ContentDetailsScreen.tsx
import { useVideoPlayerStore } from "@zezosoft/zezo-ott-react-native-video-player";
import { useNavigation } from "@react-navigation/native";
 
export default function ContentDetailsScreen({ contentData }) {
  const {
    resetStore,
    setPlayList,
    setContentSeasons,
    setActiveSeason,
    setCurrentTrackIndex,
    setActiveTrack,
  } = useVideoPlayerStore();
  const navigation = useNavigation();
 
  const handlePlay = () => {
    resetStore();
    setContentSeasons(contentData.seasons);
    setActiveSeason(contentData.seasons[0]);
 
    const playlist = contentData.seasons[0].episodes.map((ep) => ({
      id: ep.id,
      title: ep.name,
      contentId: contentData.id,
      sourceLink: ep.sourceLink,
      type: contentData.type,
    }));
 
    setPlayList(playlist);
    setCurrentTrackIndex(0);
    setActiveTrack(playlist[0]);
 
    navigation.navigate("VideoPlayerScreen");
  };
 
  return <Button title="Play" onPress={handlePlay} />;
}


// VideoPlayerScreen.tsx
import { VideoPlayer } from "@zezosoft/zezo-ott-react-native-video-player";
 
export default function VideoPlayerScreen() {
  return <VideoPlayer isFocused={true} autoNext={true} />;
}

✨ Features

🎬 Full-screen video playback
🔄 Auto-next episodes with callbacks
📊 Analytics & watch progress tracking
🎨 Fully themeable (colors, sizes, controls)
📱 Optimized for React Native OTT apps
🎬 Playlist & seasons integration
🛠 Minimal configuration, production-ready

📌 Notes

Always call resetStore() before loading new content.
Update both contentSeasons and activeSeason before setting a playlist.
Use onWatchProgress for analytics and resume playback.
event.onPressEpisode lets you customize episode navigation.
⚠️ Fullscreen issues: The video player may not work in fullscreen mode if react-native-orientation-locker is not installed or properly linked. Make sure to install it:
```
npm install react-native-orientation-locker
# or
yarn add react-native-orientation-locker
```
For known issues and troubleshooting, check: react-native-orientation-locker issues .

🔗 Demo App

👉 Zezo OTT Demo App