Plyr instance is not available in (passed) ref

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

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

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

How to do that? preload the plyr js file?

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

Navigation Menu

Repository navigation

Plyr instance is not available in (passed) ref #1122

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Plyr instance is not available in (passed) ref #1122

Description

Activity

SarkarKurdish commented on Nov 27, 2023

apudiu commented on Nov 28, 2023

SarkarKurdish commented on Nov 28, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions