@zezosoft/zezo-ott-react-native-video-player/lib/module/VideoPlayer/MediaControls/MediaControlsProvider.js

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

"use strict";

import React, { useEffect, useRef, useMemo } from 'react';
import { TouchableOpacity, View, Animated } from 'react-native';
import { moderateScale } from 'react-native-size-matters';
import MediaControls from "./MediaControls.js";
import SettingModal from "../Settings/SettingModal.js";
import { useVideoPlayerStore } from "../store/videoPlayerStore.js";
import SkipAndNextControls from "../components/SkipAndNextControls.js";
import globalStyles from "../styles/globalStyles.js";
import SubtitleView from "../components/SubtitleView.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const MediaControlsProvider = ({
  children,
  onClose,
  onPressEpisode,
  reportProgress,
  insets
}) => {
  const {
    top,
    bottom,
    left,
    right
  } = insets;
  const controlsVisible = useVideoPlayerStore(state => state.controlsVisible);
  const setControlsVisible = useVideoPlayerStore(state => state.setControlsVisible);
  const controlsTimer = useVideoPlayerStore(state => state.controlsTimer);
  const timeoutId = React.useRef(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;

  // Memoize container padding to avoid recalculation on every render
  const containerPadding = useMemo(() => ({
    paddingTop: top,
    paddingBottom: bottom + moderateScale(5),
    paddingLeft: left + moderateScale(10),
    paddingRight: right + moderateScale(10)
  }), [top, bottom, left, right]);

  // Memoize animated style
  const animatedStyle = useMemo(() => [globalStyles.absoluteFill, {
    opacity: fadeAnim
  }], [fadeAnim]);
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: controlsVisible ? 1 : 0,
      duration: 200,
      useNativeDriver: true
    }).start();
    if (controlsVisible) {
      timeoutId.current = setTimeout(() => {
        setControlsVisible(false);
      }, controlsTimer * 1000);
    }
    return () => {
      if (timeoutId.current) clearTimeout(timeoutId.current);
    };
  }, [controlsVisible, controlsTimer, setControlsVisible, fadeAnim]);
  return /*#__PURE__*/_jsxs(View, {
    style: globalStyles.flexOne,
    children: [children, /*#__PURE__*/_jsx(Animated.View, {
      pointerEvents: controlsVisible ? 'auto' : 'none',
      style: animatedStyle,
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: () => setControlsVisible(false),
        style: [globalStyles.controlsContainer, containerPadding],
        activeOpacity: 1,
        children: /*#__PURE__*/_jsx(MediaControls, {
          onClose: onClose
        })
      })
    }), /*#__PURE__*/_jsx(SettingModal, {
      onPressEpisode: onPressEpisode,
      reportProgress: reportProgress
    }), /*#__PURE__*/_jsx(SubtitleView, {}), /*#__PURE__*/_jsx(SkipAndNextControls, {
      onPressEpisode: onPressEpisode,
      reportProgress: reportProgress
    })]
  });
};
export default MediaControlsProvider;
//# sourceMappingURL=MediaControlsProvider.js.map