🗄️ Video Player Store

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

It works as a single source of truth for values coming from:

• 🎬 API responses (e.g., IContentData, media metadata, track info)
• 🎮 User interactions (play/pause, track selection, skip intro, etc.)

🚀 Core Features

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

🧩 Store API (Properties & Setters)

▶️ Playback State

🎚️ UI & Controls

🎵 Tracks

📺 Content & Playlist

📊 Analytics & Misc

⚡ 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 to avoid leftover state.
• 🎚️ Playback rate (playBackRate) requires both rate and label — keep them in sync.
• 🕹️ Controls auto-hide is managed by controlsTimer. Reset it on user interactions.
• 🌐 Track selections (audio, subtitles, video quality) depend on available OnLoadData. Always null-check.
• 📊 Analytics props like startWatchTime and isViewCounted should be integrated with your analytics pipeline.
• ⚠️ Error handling: Use setError to surface playback issues in UI.
• 🎬 Seasons & episodes: For series content, update both contentSeasons and activeSeason before setting a playlist.
• 🎯 Performance tip: Avoid frequent store updates in a render loop (e.g., currentTime) unless throttled.

✍️ Created by Naresh Dhamu – Powered by ZezoSoft