@zezosoft/zezo-ott-react-native-video-player/src/VideoPlayer/utils/hooks/useVideoPlayerBack.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 { useEffect, useCallback, useRef } from 'react';
import {
  BackHandler,
  Platform,
  AppState,
  type AppStateStatus,
} from 'react-native';
import { lockToPortrait } from '../lockOrientation';
import { useVideoPlayerStore } from '../../store/videoPlayerStore';

type UseVideoPlayerBackProps = {
  navigation?: any;
};

export const useVideoPlayerBack = ({
  navigation,
}: UseVideoPlayerBackProps = {}) => {
  const { resetStore } = useVideoPlayerStore();
  const hasClosed = useRef(false); // prevent multiple calls

  const handleClose = useCallback(() => {
    if (hasClosed.current) return; // prevent loop
    hasClosed.current = true;

    resetStore();
    lockToPortrait();

    if (navigation?.canGoBack()) {
      navigation.goBack();
    }
  }, [resetStore, navigation]);

  useEffect(() => {
    const backHandler =
      Platform.OS === 'android'
        ? BackHandler.addEventListener('hardwareBackPress', () => {
            handleClose();
            return true;
          })
        : undefined;

    const unsubscribe = navigation?.addListener('beforeRemove', (e: any) => {
      e.preventDefault();
      handleClose();
      navigation.dispatch(e.data.action);
    });

    const handleAppStateChange = (nextAppState: AppStateStatus) => {
      if (nextAppState === 'inactive') {
        handleClose();
      }
    };
    const appStateListener = AppState.addEventListener(
      'change',
      handleAppStateChange
    );

    return () => {
      backHandler?.remove();
      unsubscribe?.();
      appStateListener.remove();
    };
  }, [handleClose, navigation]);

  return handleClose;
};