🚨 Active Supply Chain Attack:node-ipc Package Compromised.Learn More →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

reactvidplay

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

reactvidplay - npm Package Compare versions

Package was removed
Sorry, it seems this package was removed from the registry
Comparing version
1.2.0
 to
1.2.1
+1
-1
package.json
{
"name": "reactvidplay",
"version": "1.2.0",
"version": "1.2.1",
"type": "module",

@@ -5,0 +5,0 @@ "description": "A good looking customizable React video player component",

+47
-87
README.md

@@ -1,33 +0,23 @@

Here’s a polished **README.md** tailored for your `react-videoplayer` package. I’ve written it the way an experienced open-source maintainer would structure it—clear, professional, and developer-friendly:
````markdown
# React Vid Player
---
A customizable React video player component with advanced controls, keyboard shortcuts, and modern UI.
# React Video Player
<p align="center">
<img src="/assets/player.png" alt="React Vid Player Preview" width="800" />
</p>
A customizable React video player component with **modern UI**, **keyboard shortcuts**, and **advanced controls**. Built for developers who want a lightweight yet feature-rich alternative to default HTML video controls.
## Installation
![React Vid Player Demo](https://via.placeholder.com/800x450?text=React+Vid+Player+Demo) <!-- Replace with an actual screenshot/gif later -->
---
## 🚀 Installation
```bash
npm install react-videoplayer lucide-react
npm install reactvidplay
```
````
or with yarn:
## Usage
```bash
yarn add react-videoplayer lucide-react
```
---
## ⚡ Usage
```tsx
import React from "react";
import { ReactVidPlayer } from "react-videoplayer";
import "react-videoplayer/dist/ReactVidPlayer.css";
import { ReactVidPlayer } from "reactvidplay";
import "reactvidplay/dist/ReactVidPlayer.css"; // Import CSS

@@ -41,6 +31,3 @@ function App() {

height="450px"
controls
color="#ff0000"
onPlay={() => console.log("Video started")}
onPause={() => console.log("Video paused")}
/>

@@ -54,71 +41,44 @@ </div>

---
## Features
## ✨ Features
- ✨ Custom video controls with modern design
- ⌨️ Keyboard shortcuts (Space, Arrow keys)
- 🔊 Volume control with slider
- 📱 Picture-in-picture support
- 🖥️ Fullscreen support
- 🎨 Customizable theme color
- 📱 Mobile responsive
* 🎛️ **Custom video controls** with a clean, modern UI
* ⌨️ **Keyboard shortcuts** for quick navigation
* 🔊 **Volume control & mute toggle** with slider
* 🎥 **Picture-in-Picture** support
* 🖥️ **Fullscreen mode** with smooth transition
* 🎨 **Customizable theme color** via props
* 📱 **Mobile responsive & touch-friendly**
* 🖱️ **Optional context menu** (disable right-click download menu)
* 🕹️ **Auto-hide controls** when inactive
## Keyboard Shortcuts
---
- `Space` → Play/Pause
- `←` → Skip backward 10s
- `→` → Skip forward 10s
- `↑` → Volume up
- `↓` → Volume down
## ⌨️ Keyboard Shortcuts
## Props
| Key | Action |
| ------- | ----------------- |
| `Space` | Play / Pause |
| `←` | Skip backward 10s |
| `→` | Skip forward 10s |
| `↑` | Volume up |
| `↓` | Volume down |
| Prop | Type | Default | Description |
| ------------ | ---------------- | --------- | ------------------------------- |
| src | string | required | Video source URL |
| controls | boolean | true | Show custom controls |
| autoplay | boolean | false | Auto play video |
| muted | boolean | false | Mute video initially |
| loop | boolean | false | Loop video |
| contextMenu | boolean | false | Enable right-click context menu |
| poster | string | - | Poster image URL |
| width | string \| number | '100%' | Video width |
| height | string \| number | 'auto' | Video height |
| className | string | '' | Additional CSS class |
| color | string | '#ff0000' | Theme color for controls |
| onPlay | function | - | Called when video starts |
| onPause | function | - | Called when video pauses |
| onTimeUpdate | function | - | Called on time update |
| onEnded | function | - | Called when video ends |
---
## License
## ⚙️ Props
MIT
| Prop | Type | Default | Description |
| -------------- | ------------------------ | ----------- | ------------------------------- |
| `src` | `string` | required | Video source URL |
| `controls` | `boolean` | `true` | Show custom controls |
| `autoplay` | `boolean` | `false` | Auto play video |
| `muted` | `boolean` | `false` | Mute video initially |
| `loop` | `boolean` | `false` | Loop video |
| `contextMenu` | `boolean` | `false` | Enable right-click context menu |
| `poster` | `string` | `-` | Poster image URL |
| `width` | `string \| number` | `'100%'` | Video width |
| `height` | `string \| number` | `'auto'` | Video height |
| `className` | `string` | `''` | Additional CSS classes |
| `color` | `string` | `'#ff0000'` | Theme color for controls |
| `onPlay` | `() => void` | `-` | Callback when video starts |
| `onPause` | `() => void` | `-` | Callback when video pauses |
| `onTimeUpdate` | `(time: number) => void` | `-` | Called on playback time update |
| `onEnded` | `() => void` | `-` | Callback when video ends |
---
## 🛠️ Roadmap
* [ ] Add support for subtitles/captions
* [ ] Quality switcher for multiple sources
* [ ] HLS/DASH streaming support
* [ ] Customizable keyboard shortcuts
---
## 📜 License
MIT © 2025 – Maintained by [Your Name](https://github.com/your-profile)
---
👉 Pro tip: you should also add a **screenshot or short demo gif** in the README to show off the UI. That massively improves adoption on npm/GitHub.
---
Do you want me to also write a **`package.json` metadata (keywords, description, repo links, etc.)** optimized for npm discovery so your package ranks better?
```