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

A <VideoPlayer /> component for React Native with controls

"use strict";

import { useState, useCallback, forwardRef, useMemo, useRef, useImperativeHandle } from 'react';
import { StyleSheet, View } from 'react-native';
import { StartButton, Thumbnail } from "./Thumbnail.js";
import { RenderVideo } from "./Video.js";
import { jsx as _jsx } from "react/jsx-runtime";
const VideoPlayer = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    autoplay = false,
    customStyles = {},
    endThumbnail,
    endWithThumbnail,
    onStart,
    onEnd,
    style,
    thumbnail,
    videoHeight = 1080,
    videoWidth = 1920,
    ...rest
  } = props;
  const videoRef = useRef(null);
  useImperativeHandle(ref, () => ({
    ...videoRef.current,
    resume: () => {
      if (!isStarted) setIsStarted(true);
      videoRef.current?.resume();
    },
    stop: () => {
      setIsStarted(false);
      setHasEnded(true);
      videoRef.current?.dismissFullscreenPlayer();
    }
  }));
  const [isStarted, setIsStarted] = useState(autoplay);
  const [hasEnded, setHasEnded] = useState(false);
  const [width, setWidth] = useState(200);
  const sizeStyles = useMemo(() => {
    const ratio = videoHeight / videoWidth;
    return {
      height: width * ratio,
      width: width
    };
  }, [videoWidth, videoHeight, width]);
  const _onStart = 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 = useCallback(() => {
    if (onEnd) onEnd();
    if (endWithThumbnail || endThumbnail) {
      setIsStarted(false);
      setHasEnded(true);
      videoRef.current?.dismissFullscreenPlayer();
    }
  }, [onEnd, endWithThumbnail, endThumbnail, setIsStarted, setHasEnded]);
  const onLayout = useCallback(event => {
    const {
      width: containerWidth
    } = event.nativeEvent.layout;
    setWidth(containerWidth);
  }, []);
  const renderContent = useCallback(() => {
    if (hasEnded && endThumbnail || !isStarted && thumbnail) return /*#__PURE__*/_jsx(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__*/_jsx(View, {
      style: [styles.preloadingPlaceholder, sizeStyles, style],
      children: /*#__PURE__*/_jsx(StartButton, {
        onStart: _onStart,
        customStylesPlayButton: customStyles.playButton,
        customStylesPlayArrow: customStyles.playArrow
      })
    });
    return /*#__PURE__*/_jsx(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__*/_jsx(View, {
    onLayout: onLayout,
    style: customStyles.wrapper,
    children: renderContent()
  });
});
export default VideoPlayer;
const styles = StyleSheet.create({
  preloadingPlaceholder: {
    backgroundColor: 'black',
    justifyContent: 'center',
    alignItems: 'center'
  }
});
//# sourceMappingURL=index.js.map