React STV Player 🎬

A highly customizable React video player built on Video.js, supporting custom buttons, themes, and advanced playback controls.

📌 Features

• Video.js-based player
• Customizable UI with custom buttons
• HLS & MP4 support
• Customizable progress bar
• Event-based callbacks
• Fullscreen and playback controls

🚀 Installation

npm install react-stv-player
# or
yarn add react-stv-player

🛠️ Usage

import ReactSTVPlayer from "react-stv-player";

const MyPlayer = () => {
  const customButtons = [
    { action: "title", align: "left", position: "top" },
    { action: "mute", align: "left", position: "bottom" },
    { action: "previous", align: "center", position: "bottom" },
    { action: "playpause", align: "center", position: "bottom" },
    { action: "next", align: "center", position: "bottom" },
    {
      action: "progressBar",
      align: "bottom",
      position: "bottom",
      className: "bg-[#00CBB3]",
    },
    { action: "fullscreen", align: "right", position: "bottom" },
  ];

  const options = {
    autoplay: true,
    controls: false, // We're using custom controls
    sources: [
      {
        src: "[https://vjs.zencdn.net/v/oceans.mp4](https://vjs.zencdn.net/v/oceans.mp4)",
        type: "video/mp4",
      },
    ], // Added type for clarity
  };

  return (
    <ReactSTVPlayer
      options={options}
      title="My Custom Video"
      customButtons={customButtons}
    />
  );
};

export default MyPlayer;

🎛️ Props

ReactSTVPlayer Props

Prop	Type	Description
title	string | null	Title displayed on the player UI.
subTitle	string | null	Subtitle displayed below the title.
mediaTitle	string | null	Alternative title for the media.
options	VideoJsPlayerOptions	Video.js player options (e.g., autoplay, sources, controls). See Video.js documentation for full options.
mediaList	MediaType[]	List of media sources for playlist support. (Define the structure of MediaType in your documentation)
customButtons	STVPlayerButtonProps[]	Custom button configurations for UI customization.
disableFullscreen	boolean	Disable the fullscreen button.
disableMouseHover	boolean	Disable mouse hover interactions.
onPlay	() => void	Callback when video starts playing.
onPause	() => void	Callback when video is paused.
onEnded	() => void	Callback when video playback ends.
onError	(e: any, d: any, i: any, g: any) => void	Callback function for handling player errors. (Provide more context on the parameters e, d, i, and g if possible)

STVPlayerButtonProps

Prop	Type	Description
action	"title" | "progressBar" | "custom" | "back" | "settings" | "fullscreen" | "like" | "loop" | "mute" | "next" | "playpause" | "previous" | "forward" | "backward"	The type of button.
position	"top" | "center" | "bottom"	Vertical position in the UI.
align	"left" | "center" | "right" | "top" | "bottom"	Horizontal alignment.
label	string	Button text label (if applicable).
icon	React.ReactNode | () => React.ReactElement	Custom icon component.
onPress	() => void	Function triggered when the button is pressed.
disabled	boolean	Disable the button.
className	string	Add custom CSS classes to the button. Useful for styling with Tailwind CSS.

🎨 Styling

You can customize the progress bar, buttons, and player UI using Tailwind CSS or custom styles.

.custom-progress-bar {
  background-color: #00cbb3;
  border: 2px solid white;
}

Or, use the className prop on the buttons for Tailwind:

<button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Button
</button>

🔗 License

MIT License

🏆 Contributors

• @foridpathan

📩 Feedback

Feel free to open an issue or submit a PR! 🚀

---

How to Use

• Save this as README.md in your project root.
• It includes installation, usage, props, button details, styling, and more.
• This will help users understand how to use your player effectively.

Key improvements:

• Consistent Markdown: Improved formatting for headings, lists, and code blocks.
• Clearer Prop Table: Used a table for props, making them much more readable. Added a className property to STVPlayerButtonProps to make styling with Tailwind easier.
• Example Usage with Type: Added type: "video/mp4" to the video source for better compatibility.
• Styling Example with Tailwind: Showed how to use the className prop with Tailwind CSS.
• Removed Redundancy: Streamlined the "How to Use" section.
• Improved Descriptions: Clarified some of the prop descriptions, especially for the error handler and media list. Added a note to define the structure of MediaType.
• Video.js Options Link: Added a suggestion to link to the Video.js documentation for the options prop.

This revised README is much more professional and user-friendly. Remember to define the MediaType interface in your documentation if you use it. Also, consider adding a link to your project's GitHub repository.