how to add custom styles to the controls provided by react-player?

Question

I need to customize my own style to the controls provided by react-player
https://www.npmjs.com/package/react-player
please can anybody help?

Answer 1

First you need to set the controls prop to false to hide the default controls. Then you can add your own controls.

Here is a super basic implementation: It has a play/pause button and a progress bar.

import {
  Dispatch,
  SetStateAction,
  useState,
  useRef,
  MutableRefObject,
} from "react";
import ReactPlayer from "react-player";
import { IoPlay, IoPause } from "react-icons/io5";

const Player = () => {
  const [playing, setPlaying] = useState(true);
  const [durationSeconds, setDurationSeconds] = useState(0);
  const [playedSeconds, setPlayedSeconds] = useState(0);
  const playerRef = useRef() as MutableRefObject<ReactPlayer>;
  return (
    <div>
      <ReactPlayer
        ref={playerRef}
        controls={false}
        playing={playing}
        url="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
        onProgress={({ playedSeconds }) => setPlayedSeconds(playedSeconds)}
        onSeek={setPlayedSeconds}
        onDuration={setDurationSeconds} // This is called when the player has the duration
      />
      <Controls
        playerRef={playerRef}
        playing={playing}
        setPlaying={setPlaying}
        playedSeconds={playedSeconds}
        duration={durationSeconds}
      />
    </div>
  );
};

type ControlsProps = {
  playing: boolean;
  setPlaying: Dispatch<SetStateAction<boolean>>;
  playedSeconds: number;
  duration: number;
  playerRef: MutableRefObject<ReactPlayer>;
};

const Controls = (props: ControlsProps) => {
  const seek = (e: React.ChangeEvent<HTMLInputElement>) => {
    props.playerRef.current.seekTo(+e.target.value, "seconds");
  };

  return (
    <div>
      <button onClick={() => props.setPlaying(!props.playing)}>
        {props.playing ? <IoPause /> : <IoPlay />}
      </button>
      <input
        type="range"
        value={props.playedSeconds}
        min="0"
        max={props.duration}
        onChange={seek}
      />
    </div>
  );
};

export default Player;