I'm new to reactjs. Here, I'm trying to add a picture-in-picture mode in ReactPlayer. I have searched and I found the npm install react-use-pip package, I run the below sample code of this package separately, and it's working fine. But, when I insert this code into my project code it's not working and throughs an error.
error: Uncaught TypeError: Cannot read properties of undefined (reading 'toLocaleLowerCase')
I have further doubts, Please clarify
package name: npm install react-use-pip
Sample code:
import usePictureInPicture from 'react-use-pip'
function VideoPlayer() {
const videoRef = useRef(null)
const {
isPictureInPictureActive,
isPictureInPictureAvailable,
togglePictureInPicture,
} = usePictureInPicture(videoRef)
return(
<div className="App">
<video ref={videoRef} autoPlay muted controls loop width="100%">
<source src="video-sample.mp4" />
</video>
{isPictureInPictureAvailable && (
<button
onClick={() => togglePictureInPicture(!isPictureInPictureActive)}
>
{isPictureInPictureActive ? 'Disable' : 'Enable'} Picture in Picture
</button>
)}
</div>
)
}
I'm Using the ReactPlayer component. Here, playerRef is reference variable
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4"
width={width}
height={height}
ref={playerRef}
/>
react-player has a pip
prop.
If you change pip
to true, the video will go into picture-in-picture mode.
Something like this:
const Player = () => {
const [pipMode, setPipMode] = useState(false);
const enablePip = () => {
setPipMode(true);
};
return (
<div>
<ReactPlayer
url="http://commondatastorage.googleapis.com/gtv-videos-bucket/big_buck_bunny_1080p.mp4"
width={width}
height={height}
pip={pipMode}
/>
<button onClick={EnablePip}>Toggle PIP</button>
</div>
);
};
No need for react-use-pip