@zezosoft/zezo-ott-react-native-video-player/src/VideoPlayer/utils/hooks/usePauseVideoOnAd.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 { useEffect, useRef } from 'react';
import { useVideoPlayerStore } from '../../store/videoPlayerStore';
import { useAdsPlayerStore } from '../../../AdsPlayer/store/adsPlayerStore';

/**
 * Reusable hook to pause main video when ads start playing
 * Saves current time as resume time for pre-roll ads
 */
export const usePauseVideoOnAd = () => {
  const { setIsPaused, currentTime, isPaused } = useVideoPlayerStore();
  const { currentAd, isAdPlaying, resumeTime, setResumeTime } =
    useAdsPlayerStore();

  const lastResumeTimeRef = useRef<number | null>(null);

  useEffect(() => {
    if (isAdPlaying && currentAd) {
      // Only pause if not already paused to prevent unnecessary updates
      if (!isPaused) {
        setIsPaused(true);
      }

      // Save current time as resume time if not already set (for pre-roll ads)
      // Use ref to prevent setting the same value multiple times
      if (
        resumeTime === null &&
        currentTime > 0 &&
        lastResumeTimeRef.current !== currentTime
      ) {
        lastResumeTimeRef.current = currentTime;
        setResumeTime(currentTime);
      }
    } else if (!isAdPlaying && !currentAd) {
      // Reset ref when no ad is playing
      lastResumeTimeRef.current = null;
    }
  }, [
    isAdPlaying,
    currentAd,
    isPaused,
    setIsPaused,
    currentTime,
    resumeTime,
    setResumeTime,
  ]);
};