@yeeyoon/library 3.6.4 → 3.6.7

package/lib/components/CommonModal/FixedVideo/index.jsx

@@ -0,0 +1,71 @@
+/*
+ * @Author: Erlin
+ * @Date: 2022-06-10 11:26:40
+ * @LastEditors: Erlin
+ * @LastEditTime: 2022-06-10 12:09:01
+ * @Description:
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+import videojs from 'video.js';
+import 'videojs-flash';
+// import 'video.js/dist/video-js.css';
+// import './video-js.min.css';
+import styles from './styles.less';
+// import 'videojs-font';
+
+const videoOption = {
+	autoplay: true,
+	controls: true,
+	responsive: true,
+	fluid: true,
+	sources: [],
+};
+export const FixedVideo = (props) => {
+	const videoRef = React.useRef(null);
+	const playerRef = React.useRef(null);
+	const { src, poster, type, onReady } = props;
+
+	React.useEffect(() => {
+		// make sure Video.js player is only initialized once
+		if (!playerRef.current) {
+			const videoElement = videoRef.current;
+			if (!videoElement) return;
+			videoOption['sources'] = [{ src, poster, type }];
+			const player = (playerRef.current = videojs(
+				videoElement,
+				videoOption,
+				() => {
+					onReady && onReady(player);
+				}
+			));
+		}
+	}, [src]);
+
+	// Dispose the Video.js player when the functional component unmounts
+	React.useEffect(() => {
+		return () => {
+			if (playerRef.current) {
+				playerRef.current.dispose();
+				playerRef.current = null;
+			}
+		};
+	}, []);
+
+	return (
+		<div className={styles.container}>
+			<div data-vjs-player>
+				<video ref={videoRef} className="video-js vjs-big-play-centered" />
+			</div>
+		</div>
+	);
+};
+
+FixedVideo.propTypes = {
+	src: PropTypes.string,
+	poster: PropTypes.string,
+	type: PropTypes.string,
+	onReady: PropTypes.string,
+};
+
+export default FixedVideo;