React-stv-player NPM

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.