chintan9/plyr-react

setting plyr.currentTime => Cannot read properties of null (reading 'hasPlayed')

dcsan opened this issue · 0 comments

Describe the bug
cannot set seek time.

when setting plyr.currentTime I get the error below

      console.log('plyr', videoRef.current?.plyr)
      // @ts-expect-error - plyr ref bug
      videoRef.current.plyr.currentTime = seekTime
      // @ts-expect-error - plyr ref bug
      videoRef.current.plyr.play()
react-dom_client.js?v=7b4742ab:16659 Uncaught TypeError: Cannot read properties of null (reading 'src')
    at r.sendMessage (www-widgetapi.js:1255:96)
    at Xr (www-widgetapi.js:1245:100)
    at <computed>.c.<computed> [as seekTo] (www-widgetapi.js:1277:135)
    at HTMLDivElement.set [as currentTime] (plyr-react.js?t=1712…v=3d16b7ec:2707:126)
    at set currentTime (plyr-react.js?t=1712…&v=3d16b7ec:3227:28)
    at VidPlayer.tsx:32:40
    at commitHookEffectListMount (react-dom_client.js?v=7b4742ab:16904:34)
    at commitPassiveMountOnFiber (react-dom_client.js?v=7b4742ab:18152:19)
    at commitPassiveMountEffects_complete (react-dom_client.js?v=7b4742ab:18125:17)
    at commitPassiveMountEffects_begin (react-dom_client.js?v=7b4742ab:18115:15)

To Reproduce

I have a widget where I want to jump ahead to other play times, keeping the times in redux to prevent re-renders.

import { useEffect, useRef } from 'react'
import Plyr from "plyr-react";
import "plyr-react/plyr.css";
import { useSelector } from 'react-redux';
import { RootState } from '../../../../redux/store';

export type VidPlayerProps = {
  sourceId?: string
  provider?: 'youtube' // for now
}

export function VidPlayer(props: VidPlayerProps) {
  const videoRef = useRef()
  const provider = props.provider || 'youtube'
  const sourceId = useSelector((state: RootState) => state.pogState?.sourceId)
  const seekTime = useSelector((state: RootState) => state.pogState?.seekTime)

  useEffect(() => {
    console.log('vidPlayer sourceId update:', sourceId)
  }, [sourceId])

  useEffect(() => {
    console.log('vidPlayer seek:', seekTime)
    // @ts-expect-error - plyr ref bug
    if (!videoRef?.current?.plyr) {
      console.error('no plyr', videoRef.current)
    } else {
      console.log('plyr', videoRef.current?.plyr)
      // @ts-expect-error - plyr ref bug
      videoRef.current.plyr.currentTime = seekTime
      // @ts-expect-error - plyr ref bug
      videoRef.current.plyr.play()
    }
  }, [seekTime])

  // if (!sourceId) return (
  //   <div>
  //     <h1>no sourceId</h1>
  //   </div>
  // )

  console.log('render VidPlayer', sourceId)

  return (
    <Plyr
      source={{
        type: "video",
        sources: [{
          src: sourceId,
          provider: provider
        }],
      }}
      // @ts-expect-error - plyr ref bug
      ref={videoRef}
    />
  )
}

Expected behavior
seek to new play time without crashing

Screenshots
at point of crashing, the player instance seems fully formed based on console log at previous line:

image

Desktop (please complete the following information):

  • OS: [e.g. iOS] MAC
  • Browser [e.g. chrome, safari] latest chrome
  • Version [e.g. 22] latest