react-native-video-player/lib/commonjs/index.js

A <VideoPlayer /> component for React Native with controls

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _Thumbnail = require("./Thumbnail.js");
var _Video = require("./Video.js");
var _jsxRuntime = require("react/jsx-runtime");
const VideoPlayer = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
  const {
    autoplay = false,
    customStyles = {},
    endThumbnail,
    endWithThumbnail,
    onStart,
    onEnd,
    style,
    thumbnail,
    videoHeight = 1080,
    videoWidth = 1920,
    ...rest
  } = props;
  const videoRef = (0, _react.useRef)(null);
  (0, _react.useImperativeHandle)(ref, () => ({
    ...videoRef.current,
    resume: () => {
      if (!isStarted) setIsStarted(true);
      videoRef.current?.resume();
    },
    stop: () => {
      setIsStarted(false);
      setHasEnded(true);
      videoRef.current?.dismissFullscreenPlayer();
    }
  }));
  const [isStarted, setIsStarted] = (0, _react.useState)(autoplay);
  const [hasEnded, setHasEnded] = (0, _react.useState)(false);
  const [width, setWidth] = (0, _react.useState)(200);
  const sizeStyles = (0, _react.useMemo)(() => {
    const ratio = videoHeight / videoWidth;
    return {
      height: width * ratio,
      width: width
    };
  }, [videoWidth, videoHeight, width]);
  const _onStart = (0, _react.useCallback)(() => {
    if (onStart) onStart();
    setIsStarted(true);
    setHasEnded(false);

    // force re-render to make sure video is already mounted and videoRef is available
    setTimeout(() => videoRef.current?.onStart(), 0);
  }, [onStart]);
  const _onEnd = (0, _react.useCallback)(() => {
    if (onEnd) onEnd();
    if (endWithThumbnail || endThumbnail) {
      setIsStarted(false);
      setHasEnded(true);
      videoRef.current?.dismissFullscreenPlayer();
    }
  }, [onEnd, endWithThumbnail, endThumbnail, setIsStarted, setHasEnded]);
  const onLayout = (0, _react.useCallback)(event => {
    const {
      width: containerWidth
    } = event.nativeEvent.layout;
    setWidth(containerWidth);
  }, []);
  const renderContent = (0, _react.useCallback)(() => {
    if (hasEnded && endThumbnail || !isStarted && thumbnail) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thumbnail.Thumbnail, {
      thumbnailSource: hasEnded && endThumbnail ? endThumbnail : thumbnail,
      style: style,
      sizeStyles: sizeStyles,
      onStart: _onStart,
      customStylesThumbnail: customStyles.thumbnail,
      customStylesThumbnailImage: customStyles.thumbnailImage,
      customStylesPlayButton: customStyles.playButton,
      customStylesPlayArrow: customStyles.playArrow
    });
    if (!isStarted) return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
      style: [styles.preloadingPlaceholder, sizeStyles, style],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Thumbnail.StartButton, {
        onStart: _onStart,
        customStylesPlayButton: customStyles.playButton,
        customStylesPlayArrow: customStyles.playArrow
      })
    });
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Video.RenderVideo, {
      ref: videoRef,
      ...rest,
      style: style,
      customStyles: customStyles,
      autoplay: autoplay,
      onEnd: _onEnd,
      sizeStyle: sizeStyles
    });
  }, [hasEnded, endThumbnail, isStarted, thumbnail, style, sizeStyles, _onStart, customStyles, rest, autoplay, _onEnd]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
    onLayout: onLayout,
    style: customStyles.wrapper,
    children: renderContent()
  });
});
var _default = exports.default = VideoPlayer;
const styles = _reactNative.StyleSheet.create({
  preloadingPlaceholder: {
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
//# sourceMappingURL=index.js.map