🎬 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, powered by a centralized VideoPlayer Store for state management.

✨ Features

📺 Episode navigation & Seasons support
📊 Watch progress tracking & analytics
🎨 Custom theming
🔄 Auto-next playback
🎬 Playlist & seasons integration
🗄️ Centralized store for playback state, tracks & UI
📱 Optimized for React Native OTT apps
🛠 Minimal configuration, production-ready

📦 Installation

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

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

⚙️ VideoPlayer 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.

🚀 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}
  event={{
    onPressEpisode: async ({ episode }) => {
      console.log('Next episode:', episode.title);
      return true; // return false to block playback
    },
  }}
/>

🎨 Theming Example

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

📺 Playlist & Seasons Setup

// 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} />;
}

🗄️ Video Player Store

The VideoPlayerStore is a centralized state store that powers the ZezoOTT Video Player.
It manages playback state, tracks, UI controls, analytics, and content navigation.

🚀 Store Features

Manage playback state: current time, duration, buffering, playback rate
Handle tracks: audio, subtitles, video quality
Control UI state: controls visibility, settings modal, skip/next episode
Track content structure: playlists, seasons, active season/episode
Support analytics: watch time, view count, error handling

⚡ Store Usage Example

import { useVideoPlayerStore } from '@zezosoft/zezo-ott-react-native-video-player';
import React from 'react';

export default function VideoPlayerExample() {
  const {
    setPlayList,
    setActiveSeason,
    setActiveTrack,
    setContentSeasons,
    setCurrentTrackIndex,
    resetStore,
    playList,
    activeTrack,
    activeSeason,
  } = useVideoPlayerStore();

  const contentData = {
    id: 'movie123',
    type: 'series',
    name: 'My Series',
    seasons: [
      {
        id: 'season1',
        name: 'Season 1',
        seasonNumber: 1,
        episodes: [
          {
            id: 'ep1',
            name: 'Episode 1',
            sourceLink: 'https://example.com/ep1.mp4',
          },
          {
            id: 'ep2',
            name: 'Episode 2',
            sourceLink: 'https://example.com/ep2.mp4',
          },
        ],
      },
    ],
  };

  const setupPlayer = () => {
    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]);
  };

  return (
    <div>
      <button onClick={setupPlayer}>Load Series</button>
      <h3>Active Season: {activeSeason?.name}</h3>
      <ul>
        {playList.map((track) => (
          <li key={track.id}>
            {track.title} {activeTrack?.id === track.id ? '(Playing)' : ''}
          </li>
        ))}
      </ul>
    </div>
  );
}

📝 Notes & Best Practices

🔄 Always call resetStore() before loading new content.
🎚️ Playback rate requires both rate and label in sync.
🕹️ Controls auto-hide is managed by controlsTimer.
🌐 Track selections depend on available OnLoadData — always null-check.
📊 Analytics props integrate with your analytics pipeline.
⚠️ Error handling: Use setError for surfacing playback issues.
🎬 Seasons & episodes: Update both contentSeasons and activeSeason before setting playlist.

📌 Fullscreen Notes

If fullscreen doesn’t work, ensure you install react-native-orientation-locker:

yarn add react-native-orientation-locker
# or
npm install react-native-orientation-locker

React Native Orientation Locker

🔹 Known Issues

If you encounter any problems with react-native-orientation-locker, check the official issues page: View Known Issues

🔹 Setup & Installation

Follow the official guide to properly set up react-native-orientation-locker: View Setup Guide

🔗 Demo App

👉 Zezo OTT Demo App

👨‍💻 Developer

Made with passion by:

Naresh Dhamu

📄 License

Licensed under the MIT License.