@zezosoft/zezo-ott-react-native-video-player/src/AdsPlayer/utils/useAdControlsAutoHide.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 { Animated } from 'react-native';
import { useVideoPlayerStore } from '../../VideoPlayer/store/videoPlayerStore';
import { useAdsPlayerStore } from '../store/adsPlayerStore';
import { hideAdControls } from './controls';

export const useAdControlsAutoHide = (): Animated.Value => {
  const { controlsVisible, controlsTimer } = useVideoPlayerStore();
  const { isAdPaused } = useAdsPlayerStore();
  const timeoutId = useRef<NodeJS.Timeout | null>(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: controlsVisible ? 1 : 0,
      duration: 200,
      useNativeDriver: true,
    }).start();

    if (controlsVisible && !isAdPaused) {
      timeoutId.current = setTimeout(() => {
        hideAdControls();
      }, controlsTimer * 1000);
    }

    return () => {
      if (timeoutId.current) clearTimeout(timeoutId.current);
    };
  }, [controlsVisible, controlsTimer, fadeAnim, isAdPaused]);

  return fadeAnim;
};