@zezosoft/zezo-ott-react-native-video-player/src/VideoPlayer/store/videoPlayerStore.ts

Production-ready React Native OTT video player library for Android & iOS. Features: playlists, seasons, auto-next playback, subtitles (SRT/VTT), custom theming, analytics tracking, fullscreen mode, gesture controls, ads player (pre-roll/mid-roll/post-roll

import { create } from 'zustand';
import { createJSONStorage, persist } from 'zustand/middleware';
import { MMKV } from 'react-native-mmkv';
import { ResizeMode, type EnumValues } from 'react-native-video';
import type { SettingsAction, VideoPlayerStore } from './videoPlayer.type';

export const storage = new MMKV({
  id: 'videoPlayerStorage',
  encryptionKey: 'videoPlayerKey',
});

export const mmkvStorage = {
  setItem: (key: string, value: string) => storage.set(key, value),
  getItem: (key: string) => storage.getString(key) ?? null,
  removeItem: (key: string) => storage.delete(key),
};

const storeDataDefaults = {
  currentTime: 0,
  duration: 0,
  isPaused: false,
  isBuffering: false,
  resizeMode: ResizeMode.CONTAIN,
  controlsVisible: true,
  controlsTimer: 6,
  activeTrack: null,
  playableDuration: 0,
  settingsModal: { isVisible: false, action: 'none' as SettingsAction },
  playBackRate: 1,
  playBackRateLabel: null,
  onLoad: null,
  selectedAudioTrack: null,
  selectedSubtitleTrack: null,
  selectedVideoTrack: null,
  activeSubtitle: null,
  maxBitRate: null,
  startWatchTime: null,
  playList: [],
  currentTrackIndex: 0,
  contentSeasons: null,
  activeSeason: null,
  error: null,
  isViewCounted: false,
  isSkipIntroVisible: false,
  isNextEpisodeVisible: false,
};

export const useVideoPlayerStore = create<VideoPlayerStore>()(
  persist(
    (set) => ({
      ...storeDataDefaults,

      setCurrentTime: (currentTime) => set({ currentTime }),
      setDuration: (duration) => set({ duration }),
      setIsPaused: (isPaused) => set({ isPaused }),
      setIsBuffering: (isBuffering) => set({ isBuffering }),
      setResizeMode: (resizeMode: EnumValues<ResizeMode>) =>
        set({ resizeMode }),
      setControlsVisible: (controlsVisible) => set({ controlsVisible }),
      setControlsTimer: (controlsTimer) => set({ controlsTimer }),
      setActiveTrack: (activeTrack) => set({ activeTrack }),
      setPlayableDuration: (playableDuration) => set({ playableDuration }),
      setSettingsModal: ({ isVisible, action }) =>
        set({ settingsModal: { isVisible, action } }),
      setPlayBackRate: (playBackRate, playBackRateLabel) =>
        set({ playBackRate, playBackRateLabel }),
      setOnLoad: (onLoad) => set({ onLoad }),
      setSelectedAudioTrack: (selectedAudioTrack) =>
        set({ selectedAudioTrack }),
      setSelectedSubtitleTrack: (selectedSubtitleTrack: any) =>
        set({ selectedSubtitleTrack }),
      setSelectedVideoTrack: (selectedVideoTrack) =>
        set({ selectedVideoTrack }),
      setActiveSubtitle: (activeSubtitle) => set({ activeSubtitle }),
      setMaxBitRate: (maxBitRate) => set({ maxBitRate }),
      setStartWatchTime: (startWatchTime) => set({ startWatchTime }),
      setPlayList: (playList) => set({ playList }),
      setCurrentTrackIndex: (currentTrackIndex) => set({ currentTrackIndex }),
      setContentSeasons: (contentSeasons) => set({ contentSeasons }),
      setActiveSeason: (activeSeason) => set({ activeSeason }),
      setError: (error) => set({ error }),
      setIsViewCounted: (isViewCounted) => set({ isViewCounted }),
      setIsSkipIntroVisible: (isSkipIntroVisible) =>
        set({ isSkipIntroVisible }),
      setIsNextEpisodeVisible: (isNextEpisodeVisible) =>
        set({ isNextEpisodeVisible }),
      resetStore: () => {
        set(storeDataDefaults);
        storage.clearAll();
      },
    }),
    {
      name: 'VideoPlayerStorage',
      storage: createJSONStorage(() => mmkvStorage),
    }
  )
);