setting plyr.currentTime => Cannot read properties of null (reading 'hasPlayed')
dcsan opened this issue · 0 comments
dcsan commented
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:
Desktop (please complete the following information):
- OS: [e.g. iOS] MAC
- Browser [e.g. chrome, safari] latest chrome
- Version [e.g. 22] latest