Customizing React-Player with Custom UI Controls

Introduction

react-player is a widely used library for embedding media players in React applications. While it comes with built-in controls, sometimes you need a custom UI to match a specific design or add extra functionality. In this blog, I'll walk you through how to build a custom UI for react-player using React hooks and event listeners. We'll cover adding a fullscreen button and a custom progress bar with tooltips.

1. Install react-player First, install react-player if you haven't already:

npm install react-player

2: Create the Player Component
Set up a new component and import react-player along with React hooks:

import React, { useRef, useState } from "react";
import ReactPlayer from "react-player";

3: Set Up State and References

const playerRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [volume, setVolume] = useState(0.8);
const [progress, setProgress] = useState(0);
const [fullscreen, setFullscreen] = useState(false);

4: Add Handlers for Controls
Define functions for play/pause, volume control, seeking, and fullscreen mode:

const handlePlayPause = () => setPlaying(!playing);

const handleVolumeChange = (e) => setVolume(parseFloat(e.target.value));

const handleProgress = (state) => setProgress(state.played * 100);

const seekTo = (e) => {
  const newTime = (parseFloat(e.target.value) / 100) * playerRef.current.getDuration();
  playerRef.current.seekTo(newTime);
};

const toggleFullscreen = () => {
  const playerElement = document.querySelector(".custom-player");
  if (!document.fullscreenElement) {
    playerElement.requestFullscreen();
    setFullscreen(true);
  } else {
    document.exitFullscreen();
    setFullscreen(false);
  }
};

5: Build the Player UI
Use the handlers to add custom controls to the player:

return (
  <div className="custom-player">
    <ReactPlayer
      ref={playerRef}
      url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      playing={playing}
      volume={volume}
      onProgress={handleProgress}
      width="100%"
      height="100%"
    />
    <div className="controls">
      <button onClick={handlePlayPause}>{playing ? "Pause" : "Play"}</button>
      <input
        type="range"
        min="0"
        max="100"
        value={progress}
        onChange={seekTo}
      />
      <input
        type="range"
        min="0"
        max="1"
        step="0.1"
        value={volume}
        onChange={handleVolumeChange}
      />
      <button onClick={toggleFullscreen}>{fullscreen ? "Exit Fullscreen" : "Fullscreen"}</button>
    </div>
  </div>
);

6: Style the Player
Enhance the UI with CSS for better visuals and usability:

.custom-player {
  position: relative;
  width: 640px;
  height: 360px;
  background: black;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

button, input {
  margin: 0 5px;
}

/* Custom Progress Bar with Tooltip */
input[type="range"] {
  position: relative;
  cursor: pointer;
}

input[type="range"]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

input[type="range"]:hover::after {
  opacity: 1;
}

7: Run and Test
Start your React app and test the custom controls:

npm start

8: Further Enhancements

• Animated Controls: Improve UI interactions with subtle animations.
• Custom captions: Show the subtitle menu based on requirement (as per the supported languages by the actual video player)
• Live experience: Using an on-demand video, a live experience can be delivered by further customizing the custom controls with a defined start time