Skip to content
New issue

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

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

Already on GitHub? Sign in 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant