How to enable picture-in-picture mode in ReactPlayer?

Question

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

Is this package will work only for the video component?
Can we use this package with ReactPlayer?
If we can use this package with ReactPlayer means, then what is the meaning of the error and why does it come?
Is there another way to add picture-in-picture and is any other package to add it?

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}
/>

the `pip` tag is the python package manager. I am sure you wanted `picture-in-picture`. Make sure you read the tag description of acronyms — FlyingTeller, Aug 16 '22 at 08:02

Yochi Shor · Accepted Answer · 2022-12-16T12:48:49.037

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

How to enable picture-in-picture mode in ReactPlayer?

1 Answers1