import { useRef , useEffect } from "react" ; import Box from "../Box" ; import videojs from "video.js" ; import "videojs-contrib-quality-levels" ; import "videojs-hls-quality-selector" ; import "video.js/dist/video-js.css" ; export const Player = ( { options } ) => { const videoRef = useRef ( null ) ; const playerRef = useRef ( null ) ; useEffect ( ( ) => { if ( ! playerRef . current ) { const videoElement = videoRef . current ; if ( ! videoElement ) return ; const player = ( playerRef . current = videojs ( videoElement , options , ( ) => { playerRef . current = player ; player . hlsQualitySelector ( ) ; } ) ) ; } return ( ) => { if ( playerRef . current ) { playerRef . current . dispose ( ) ; playerRef . current = null ; } } ; } , [ options ] ) ; return ( < Box > < Box data - vjs - player > < Box as = "video" muted autoPlay ref = { videoRef } css = { { width : "auto" , height : 265 , minHeight : 265 } } className = "video-js vjs-big-play-centered" / > < /Box> < /Box>); } ; export default Player ;