React-new-video-play NPM

React New Video Play

A customizable and feature-rich video player component for React applications.

Features

Play/pause functionality
Progress bar with seek capability
Volume control with mute toggle
Fullscreen toggle
Customizable UI elements
Thumbnail support
Responsive design
Custom icons support
Adjustable slider options

Installation

Install the package using npm:

npm i react-new-video-play

Or using yarn:

yarn add react-new-video-play

Usage

Import the component in your React application:

import ReactVideoPlay from 'react-new-video-play';

function App() {
  return (
    <ReactVideoPlay
      videosrc="/path/to/your/video.mp4"
      thumbnailsrc="/path/to/your/thumbnail.jpg"
    />
  );
}

Props

Prop Name	Type	Default	Description
thumbnailsrc	string	-	URL of the video thumbnail image
videosrc	string	-	URL of the video file
trackheight	string	'4px'	Height of the progress bar track
thumbsize	string	'12px'	Size of the progress bar thumb
color	string	'#ffffff'	Primary color for UI elements
backgroundcolor	string	'transparent'	Background color for UI elements
hovercolor	string	'#ffffff'	Color of UI elements on hover
hoverbackgroundcolor	string	'#B7E0FF'	Background color of UI elements on hover
className	string	''	Custom class for the main container
aspectRatio	string	''	Aspect ratio of the video container
cover	'cover' \| 'contain' \| 'fill' \| 'none' \| 'scale-down'	'contain'	Object-fit property for the video
customeIcons	object	-	Custom icons for player controls
buttonRadius	string	''	Border radius for control buttons
slideOptions	object	-	Options for customizing sliders
autoPlay	boolean	false	For autoplay

CSS Class Props

Prop Name	Description
videoContainerClass	Class for the video container
thumabnailClass	Class for the thumbnail image
videoClass	Class for the video element
middleButtonContainerClass	Class for the middle play button container
buttonGroupClassName	Class for the control buttons group
iconClassName	Class for individual icons
controllerContainerClass	Class for the controls container

Customization

Custom Icons

The customeIcons prop allows you to replace the default icons with your own custom icons:

interface customIconsProps {
  middleButton?: JSX.Element;
  playButton?: JSX.Element;
  volumeButton?: JSX.Element;
  muteButton?: JSX.Element;
  pauseButton?: JSX.Element;
  minimizeButton?: JSX.Element;
  maximizeButton?: JSX.Element;
}

Slider Options

The slideOptions prop allows you to customize the behavior and appearance of the sliders:

interface SlideOptions {
  thumbOptions?: {
    thumbsize?: string;
    thumbcolor?: string;
    thumbradius?: string;
    thumbborder?: string;
    thumbboxshadow?: string;
    hoverthumbborder?: string;
    hoverthumbcolor?: string;
  };
  voluemStep?: number;
  progressStep?: number;
  volumeSlideWidth?: string;
  arialabel?: string;
}

Example with Custom Options

import ReactVideoPlay from 'react-new-video-play';
import { FaPlay, FaPause, FaVolumeUp, FaVolumeMute } from 'react-icons/fa';

function App() {
  const customIcons = {
    playButton: <FaPlay />,
    pauseButton: <FaPause />,
    volumeButton: <FaVolumeUp />,
    muteButton: <FaVolumeMute />,
  };

  const slideOptions = {
    thumbOptions: {
      thumbsize: '16px',
      thumbcolor: '#ff0000',
    },
    volumeSlideWidth: '120px',
    progressStep: 0.5,
  };

  return (
    <ReactVideoPlay
      videosrc="/path/to/your/video.mp4"
      thumbnailsrc="/path/to/your/thumbnail.jpg"
      customeIcons={customIcons}
      slideOptions={slideOptions}
      color="#ff0000"
      hoverbackgroundcolor="#ffcccc"
    />
  );
}

⚠️ Disclaimer

Modifying the Main Container:

Adding a className to the main container element will override all default styles. Please ensure you fully understand the code before making any changes, as this can significantly affect the appearance and layout.

Default Styles for Main Container:

The following styles are applied by default to the main container. If you add a className, these styles will be removed:

max-width: 56rem;
height: auto;
margin-left: auto;
margin-right: auto;
background-color: #000000;
border-radius: 0.5rem;
overflow: hidden;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
position: relative;

Ensure to reapply or adjust these styles as needed if you intend to modify the container with custom className values.