reactjsreact-player

Disabling seeking functionality in react-player not working


I'm trying to disable seeking in react-player, so the user needs to watch full video without any skipping. Here is the code I came up with:

import ReactPlayer from "react-player";
import { useRef } from "react";

const MyLessons = () => {
const playerRef = useRef(null);
const prevPlayed = useRef(null);

const handleSeek = () => {
  if (prevPlayed.current) {
    playerRef.current.seekTo(prevPlayed.current.playedSeconds, 'seconds');
  }
};

const handleProgress = (state) => {
  prevPlayed.current = state;
};

return (
  <div className="app">
    <main className="content">
      <div className="player-wrapper">
        <ReactPlayer
          ref={playerRef}
          className="react-player"
          url="lessons/testmp4.MP4"
          width="100%"
          height="100%"
          controls
          config={{ file: { attributes: { controlsList: 'nodownload' } } }}
          onProgress={handleProgress}
          onSeek={handleSeek}
        />
      </div>
    </main>
  </div>
 );
};

export default MyLessons;

When the video starts and user try to skip or seek to specific part of video, the video is reverted to previous point, but the video is paused and can not be resumed afterwards.

Also, in controls (bottom left corner of ReactPlayer) play button switches from play to resume button non-stop, seems like it is in loop trying to continue but something is stopping it.

Any suggestions how this can be fixed?


Solution

  • Seems like it's not possible with ReactPlayer to do that. Ended up with disabling controls and creating custom play/mute buttons:

    const Lesson = () => {
      const [isPlaying, setIsPlaying] = useState(true);
      const [isMuted, setIsMuted] = useState(false);
    
      const handlePlayPause = () => {
        setIsPlaying(!isPlaying);
      };
    
      const handleMuteUnmute = () => {
        setIsMuted(!isMuted);
      };
    
      return (
        <div className="app-video">
              <ReactPlayer
                className="react-player"
                url="lessons/test1mp4.MP4"
                width="100%"
                height="100%"
                playing={isPlaying}
                volume={isMuted ? 0 : 0.5}
                controls={false}
                onEnded={() => {
                  console.log("ended");
                }}
                config={{
                  file: {
                    attributes: {
                      playsInline: true,
                    },
                  },
                }}
              />
            </div>
            <div className="bottom-panel">
              <Button
                className={`control-button ${isPlaying ? "pause" : "play"}`}
                onClick={handlePlayPause}
                startIcon={isPlaying ? <PauseIcon /> : <PlayArrowIcon />}
              >
                {isPlaying ? "Pause" : "Play"}
              </Button>
              <Button
                className={`control-button ${isMuted ? "unmute" : "mute"}`}
                onClick={handleMuteUnmute}
                startIcon={isMuted ? <VolumeOffIcon /> : <VolumeUpIcon />}
              >
                {isMuted ? "Unmute" : "Mute"}
              </Button>
        </div>
      );
    };
    
    export default Lesson;