1.0.2 • Published 3 months ago

react-stv-player v1.0.2

Weekly downloads
-
License
MIT
Repository
github
Last release
3 months ago

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

PropTypeDescription
titlestring | nullTitle displayed on the player UI.
subTitlestring | nullSubtitle displayed below the title.
mediaTitlestring | nullAlternative title for the media.
optionsVideoJsPlayerOptionsVideo.js player options (e.g., autoplay, sources, controls). See Video.js documentation for full options.
mediaListMediaType[]List of media sources for playlist support. (Define the structure of MediaType in your documentation)
customButtonsSTVPlayerButtonProps[]Custom button configurations for UI customization.
disableFullscreenbooleanDisable the fullscreen button.
disableMouseHoverbooleanDisable mouse hover interactions.
onPlay() => voidCallback when video starts playing.
onPause() => voidCallback when video is paused.
onEnded() => voidCallback when video playback ends.
onError(e: any, d: any, i: any, g: any) => voidCallback function for handling player errors. (Provide more context on the parameters e, d, i, and g if possible)

STVPlayerButtonProps

PropTypeDescription
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.
labelstringButton text label (if applicable).
iconReact.ReactNode | () => React.ReactElementCustom icon component.
onPress() => voidFunction triggered when the button is pressed.
disabledbooleanDisable the button.
classNamestringAdd 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.