67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
|
|
import videojs from 'video.js';
|
|
|
|
import 'video.js/dist/video-js.css';
|
|
|
|
import style from './VideoJS.module.scss'
|
|
|
|
export const VideoJS = (props: { options: any; onReady: any; }) => {
|
|
const videoRef = React.useRef(null);
|
|
const playerRef = React.useRef(null);
|
|
const {options, onReady} = props;
|
|
|
|
React.useEffect(() => {
|
|
|
|
// Make sure Video.js player is only initialized once
|
|
if (!playerRef.current) {
|
|
// The Video.js player needs to be _inside_ the component el for React 18 Strict Mode.
|
|
const videoElement = document.createElement("video-js");
|
|
|
|
videoElement.classList.add('vjs-big-play-centered');
|
|
//@ts-ignore
|
|
videoRef.current.appendChild(videoElement);
|
|
|
|
//@ts-ignore
|
|
const player = playerRef.current = videojs(videoElement, options, () => {
|
|
videojs.log('player is ready');
|
|
onReady && onReady(player);
|
|
});
|
|
|
|
// You could update an existing player in the `else` block here
|
|
// on prop change, for example:
|
|
} else {
|
|
const player = playerRef.current;
|
|
|
|
//@ts-ignore
|
|
player.autoplay(options.autoplay);
|
|
|
|
//@ts-ignore
|
|
player.src(options.sources);
|
|
}
|
|
}, [options, videoRef]);
|
|
|
|
// Dispose the Video.js player when the functional component unmounts
|
|
React.useEffect(() => {
|
|
const player = playerRef.current;
|
|
|
|
return () => {
|
|
//@ts-ignore
|
|
if (player && !player.isDisposed()) {
|
|
//@ts-ignore
|
|
player.dispose();
|
|
playerRef.current = null;
|
|
}
|
|
};
|
|
}, [playerRef]);
|
|
|
|
return (
|
|
<div className={style.container} data-vjs-player>
|
|
<div ref={videoRef} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VideoJS; |