Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

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

Open
dcsan opened this issue Apr 9, 2024 · 0 comments

Comments

@dcsan
Copy link

dcsan commented Apr 9, 2024

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
@dcsan dcsan changed the title setting plyr.currentTime => Uncaught TypeError: Cannot read properties of null (reading 'src') setting plyr.currentTime => Cannot read properties of null (reading 'hasPlayed') Apr 9, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant