CODEWITHSUNDEEP
reactjsnext.jsvimeouse-refreact-player
MiMi
MiMi

Reputation: 135

react-player SeekTo is not a function

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..

My code is based on react-player demo repo: https://github.com/cookpete/react-player/blob/master/src/demo/App.js

 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;

Thank you

Upvotes: 1

Views: 4407

Answers (2)

alexey.m
alexey.m

Reputation: 1349

playerRef is just a ref, to access it's actual value you need to use its current property, i.e

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

Upvotes: 1

akProg
akProg

Reputation: 11

  1. create another component and pass the ref and other props to this component and import ReactPlayer manually

create VPlayer.jsx ==>

import React from "react";
import ReactPlayer from "react-player";

const VPlayer = ({
  playerRef,
}) => {
  return (
    <ReactPlayer
      ref={playerRef}
    />
  );
};

export default VPlayer;

  1. import that component dynamically and pass the props to it

and use it in another component or pages ==>

import React, {useRef} from "react";
import dynamic from "next/dynamic";
const VPlayer = dynamic(() => import("./VPlayer"), {
  ssr: false,
});
const VideoPlayer = () => {
    const videoRef = useRef();
    return (
        <VPlayer
        playerRef={videoRef}/>
    )
}
export default VideoPlayer;

Upvotes: 1

Related Questions