Question: Ref.seekTo is not a function

[yek99kr]

I am using react-player with my next.js site and am having trouble using seekTo function. It results in error saying: "playerRef.seekTo is not a function"

I tried "playerRef.current.seekTo(parseFloat(e.target.value))" as well but same error occurs

This was my code:

import { useRef } from "react";
 const ReactPlayer = dynamic(() => import("react-player"), { ssr: false });

 const Player = ({url}) => {

 const playerRef = useRef();

 const [player, setPlayer] = useState({
     playing: true,
     muted: true,
     played: 0,
     loaded: 0,
     duration: 0,
     seeking:false
   });

 const handlePlayPause = function () {
 setPlayer({ ...player, playing: !player.playing });
};

const handleMuted = () => {
   setPlayer({ ...player, muted: !player.muted });
};

const handleSeekMouseDown = (e) => {
 setPlayer({ ...player, seeking: true });
};

const handleSeekChange = (e) => {
 setPlayer({ ...player, played: parseFloat(e.target.value) });
};

const handleSeekMouseUp = (e) => {
 setPlayer({ ...player, seeking: false });
 playerRef.seekTo(parseFloat(e.target.value));
};

const handleProgress = (state) => {
 if (!player.seeking) {
   setPlayer(state);
 }
};

return (
 <div
   className={`relative justify-center content-center w-full`}
  
 >
   <ReactPlayer
     ref={playerRef}
     className="absolute rounded"
     width="100%"
     height="100%"
     url={url}
     volume={1}
     playIcon={<></>}
     playing={player.playing}
     loop={true}
     muted={player.muted}
     onProgress={handleProgress}
   ></ReactPlayer>

   <div
     className={"absolute w-full h-full"}
     onClick={handlePlayPause}
   ></div>

   <div>
     <input
       type="range"
       min={0}
       max={0.999999}
       step="any"
       value={player.played}
       onMouseDown={handleSeekMouseDown}
       onChange={handleSeekChange}
       onMouseUp={handleSeekMouseUp}
     />
   </div>
 </div>
);
};
 
export default Player;

Even when I copy paste exact code from demo(https://github.com/cookpete/react-player/blob/master/src/demo/App.js), same error shows, I'm not sure why it happens :(

[GOATS2K]

I had to specify the type info to get the ref to work properly.

const playerRef = React.useRef<ReactPlayer>(null);

Used like this:

    <ReactPlayer
      ref={playerRef}
      url={streamTrack.link}
      playing={playState}
      onPlay={() => announceMediaSession()}
      onProgress={(state) => {
        setSecondsPlayed(state.playedSeconds);
      }}
      onError={(error, data, hlsInstance) => {
        console.log({ error, data, hlsInstance });
      }}
      onEnded={() => nextTrack()}
      width={0}
      height={0}
      style={{ display: "none" }}
    ></ReactPlayer>

[Abdullah0991]

You need to call it like this: playerRef.current.seekTo().

[yek99kr]

I had to specify the type info to get the ref to work properly.

const playerRef = React.useRef<ReactPlayer>(null);

I'm not using typescript :(

[yek99kr]

You need to call it like this: playerRef.current.seekTo().

Yes I've tried but same error occurs

[pszopa-tl]

Same issue but with showPreview() method. The only thing that is under playerRef.current is a mysterious function retry().

I'm using [email protected]

[yanckst]

I had to specify the type info to get the ref to work properly.

const playerRef = React.useRef<ReactPlayer>(null);

I tried, but still have the issue

[singh-inder]

Try this solution

#1455 (comment)

[yanckst]

Try this solution

#1455 (comment)

I tried the solution describe in the comment. I needed to adapt the code a bit because I got compilation error using [email protected] and [email protected]

Here's the code for anyone interested:

// main file
import dynamic from "next/dynamic";

const ReactPlayerComponent = dynamic<ReactPlayerProps>(
    () => import("./ReactPlayer").then(r => r.ReactPlayerComponent),
    {
        ssr: false
    }
);

// ReactPlayer.tsx
const ReactPlayerComponent: React.FC<ReactPlayerProps> = ({
  playerRef,
}) => {
  return (
    <ReactPlayer
      ref={playerRef}
    />
  );
};