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

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.

"use strict";

import React, { useEffect, useRef } from 'react';
import { StyleSheet, TouchableOpacity, View, Animated } from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { moderateScale } from 'react-native-size-matters';
import MediaControls from "./MediaControls.js";
import SettingModal from "../model/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
}) => {
  const {
    controlsVisible,
    setControlsVisible,
    controlsTimer
  } = useVideoPlayerStore();
  const {
    top,
    bottom,
    left,
    right
  } = useSafeAreaInsets();
  const timeid = React.useRef(null);
  const fadeAnim = useRef(new Animated.Value(0)).current;
  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: controlsVisible ? 1 : 0,
      duration: 200,
      useNativeDriver: true
    }).start();
    if (controlsVisible) {
      timeid.current = setTimeout(() => {
        setControlsVisible(false);
      }, controlsTimer * 1000);
    }
    return () => {
      if (timeid.current) clearTimeout(timeid.current);
    };
  }, [controlsVisible, controlsTimer, setControlsVisible, fadeAnim]);
  const containerPadding = {
    paddingTop: top,
    paddingBottom: bottom + moderateScale(5),
    paddingLeft: left + moderateScale(10),
    paddingRight: right + moderateScale(10)
  };
  return /*#__PURE__*/_jsxs(View, {
    style: globalStyles.flexOne,
    children: [children, /*#__PURE__*/_jsx(Animated.View, {
      pointerEvents: controlsVisible ? 'auto' : 'none',
      style: [StyleSheet.absoluteFillObject, {
        opacity: fadeAnim
      }],
      children: /*#__PURE__*/_jsx(TouchableOpacity, {
        onPress: () => setControlsVisible(false),
        style: [styles.container, 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;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)'
  }
});
//# sourceMappingURL=MediaControlsProvider.js.map