Using ref-property

In my project I’m using ref to get the video-element, but that is no longer working as of 3.0.0 Any chance of making it work again, or to make an alternative way to get the VideoElement-node?

[iwatakeshi]

@mnervik I didn’t use React.Component, but I think this is similar to what you are looking for and it works on my end:

export default function App() {
  const ref = useRef<HTMLPlyrVideoElement>()
  const [currentTime, setCurrentTime] = useState('0.00')
  const [id, setId] = useState<NodeJS.Timeout>()

  useEffect(() => {
    const onPlay: PlyrCallback = (event) => {
      setId(
        setInterval(() => {
          const currentTime = ref?.current?.plyr?.currentTime / 100

          setCurrentTime(currentTime.toFixed(2))
        }, 1000)
      )
    }

    const onPause: PlyrCallback = (event) => {
      clearInterval(id)
    }

    const onEnded: PlyrCallback = (event) => {
      clearInterval(id)
      setCurrentTime('0.00')
    }

    ref?.current?.plyr?.on('play', onPlay)
    ref?.current?.plyr?.on('pause', onPause)
    ref?.current?.plyr?.on('ended', onEnded)

    return () => {
      ref?.current?.plyr?.off('play', onPlay)
      ref?.current?.plyr?.off('pause', onPause)
      ref?.current?.plyr?.off('ended', onEnded)
   }
  }, [])

  return <>
    <Plyr ref={ref} />
  <>
}

Note: I just added the types so they are not available yet.

[iwatakeshi]

@mnervik I think I’ve got a fix for it. Try it out by changing your package.json to:

{
  // ...
  "plyr-react": "git+https://github.com/chintan9/plyr-react.git#fix/forward-ref",
}

then run npm update or yarn upgrade (I think)

Let me know if it works.