Plyr instance is not available in (passed) ref

[apudiu]

Describe the bug In development mode I see this error (70% of the time when page gets reloaded), following is the first line . plyr.min.js:1 Uncaught TypeError: Cannot read properties of null (reading 'getAttribute') but this is not a problem when project is built

THE PROBLEM is: In the (passed) ref there's no plyr instance. Getting following Using like this (from docs)

// console.log(passedRef.current)
{
    plyr: {
        source: null
    }
}

To Reproduce Steps to reproduce the behavior:

In a new Next.JS 14 project just try to load youtube video like following

'use client'
import Plyr, {APITypes, PlyrOptions, PlyrSource} from "plyr-react";

const PostVideo = (p: PostVideoProps) => {
    const playerRef = useRef<APITypes>(null);

    const videoSource: PlyrSource = {
        type: 'video',
        sources: [
              {
                     provider: 'youtube',
                     src: '' // full video url like: https://www.youtube.com/watch?v=rDv7KNfJyBg,
              }
         ]
     };

    useEffect(() => {
        console.log(
          playerRef.current
        );
    }, [playerRef]);

    const playerOptions: PlyrOptions = {
        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'pip', 'airplay', 'fullscreen'],
        settings: ['captions', 'quality', 'speed', 'loop'],
        youtube: {
          origin: envVarsPublic.NEXT_PUBLIC_BASE_URL
        }
      };

      return (
        <Plyr
            ref={playerRef}
            source={videoSource}
            options={playerOptions}
        />
      );
}

export default PostVideo;

Expected behavior Get correct Plyr instance

Screenshots

Desktop (please complete the following information):

• OS: Ubuntu 23.10
• Browser: Chrome
• Version: 119.0.6045.159 (Official Build) (64-bit)

Additional context Project Info: Next.JS: 14.0.2 plyr-react: 5.3.0

[SarkarKurdish]

same issue, I've fixed temporary by pre-loading the player

[apudiu]

same issue, I've fixed temporary by pre-loading the player

How to do that? preload the plyr js file?

[SarkarKurdish]

same issue, I've fixed temporary by pre-loading the player

How to do that? preload the plyr js file?

I my case something like this fixed the issue this example is what I mean by preloading the player

'use client'
import Plyr, {APITypes, PlyrOptions, PlyrSource} from "plyr-react";

const MainComponent(){

  const [haveSource, setHaveSource] = useState(false);

  // When eveer the source was ready then make (haveSource) true
  useEffect(() => {
    // make source ready .....
    setHaveSource(true)
  }, [])

  return <div>

    //  if we didn't have any source then we will hide the play, (not unmounting it but hide it)
    <div style={{!haveSource ? {
      position: "absolute",
      top: "-100%",
      left: "-100%"
      opacity: 0
    } :{}}}> 
       <Plyr
            ref={playerRef}
            source={videoSource}
            options={playerOptions}
        />
    </div>

  </div>

}