@zezosoft/zezo-ott-react-native-video-player/src/VideoPlayer/utils/playerEvents.ts

React Native OTT Video Player for Android & iOS. Supports playlists, seasons, auto-next playback, subtitles, theming, analytics, fullscreen mode, and custom controls. 🚀 Powered by ZezoSoft.

import type {
  OnBufferData,
  OnLoadData,
  OnLoadStartData,
  OnProgressData,
} from 'react-native-video';
import { mmkvStorage, useVideoPlayerStore } from '../store/videoPlayerStore';

import { handleNext } from '.';
import type { MediaEpisode } from '../store/videoPlayer.type';
import type { ExtendedWatchProgress } from './useWatchReporter';

export const createPlayerEvents = () => {
  const onProgress = ({
    currentTime = 0,
    playableDuration = 0,
  }: OnProgressData) => {
    const store = useVideoPlayerStore.getState(); // always fresh store
    store.setCurrentTime(currentTime);
    store.setPlayableDuration(playableDuration);

    try {
      mmkvStorage.setItem('currentTime', String(currentTime));
    } catch (e) {
      console.warn('MMKV save failed', e);
    }

    if (store.isBuffering) store.setIsBuffering(false);
  };

  const onLoad = (data: OnLoadData) => {
    const store = useVideoPlayerStore.getState();
    store.setDuration(data.duration || 0);
    store.setOnLoad(data);

    mmkvStorage.setItem('current_watch_time', '0');

    store.setError(null);
    store.setIsViewCounted(false);
    store.setStartWatchTime(Date.now());
    store.setIsNextEpisodeVisible(true);
    store.setIsSkipIntroVisible(true);
    store.setIsBuffering(false);
  };

  const onBuffer = ({ isBuffering }: OnBufferData) => {
    const store = useVideoPlayerStore.getState();
    if (isBuffering) store.setIsBuffering(true);
    else setTimeout(() => store.setIsBuffering(false), 150);
  };

  const onEnd = ({
    onPressEpisode,
    reportProgress,
    autoNext,
  }: {
    reportProgress: (event: ExtendedWatchProgress['event']) => void;
    onPressEpisode: ({
      episode,
    }: {
      episode: MediaEpisode;
    }) => Promise<boolean>;
    autoNext: boolean;
  }) => {
    reportProgress('COMPLETED');
    const store = useVideoPlayerStore.getState();
    if (!store.activeTrack?.isTrailer && store.activeTrack?.type === 'series') {
      handleNext({ onPressEpisode, autoNext });
    } else {
      store.setIsPaused(true);
    }
  };

  const onLoadStart = (_: OnLoadStartData) => {
    const store = useVideoPlayerStore.getState();
    store.setIsBuffering(true);
  };

  const LeaveVideoPlayer = () => {
    const store = useVideoPlayerStore.getState();
    store.setDuration(0);
    store.setCurrentTime(0);
    store.setPlayableDuration(0);
    store.setIsPaused(false);
    store.setSettingsModal({ isVisible: false, action: 'none' });
    store.setIsBuffering(false);
  };

  return {
    onProgress,
    onLoad,
    onBuffer,
    onEnd,
    onLoadStart,
    LeaveVideoPlayer,
  };
};