🎥 React Dev Player A modern, high-performance, and fully customizable video player for React. Built for developers who need HLS support, GSAP animations, and a premium UI out of the box.

✨ Key Features :- Adaptive Quality Switching: Full HLS (.m3u8) support with Auto-resolution.

GSAP Powered Animations: Ultra-smooth UI transitions and interactive elements.

Smart Auto-Resume: Automatically saves and resumes playback position for every video using localStorage.

Keyboard Pro: YouTube-style shortcuts (J, K, L, M, F, and more).

Mobile Optimized: Double-tap to seek, responsive settings menu, and touch-friendly controls.

Subtitle Engine: Native .vtt support with real-time sync/delay adjustment.

Screenshot Capture: Instant frame-capture saved as PNG via Canvas API.

Picture-in-Picture (PiP): Multitask easily with native popup mode.

🚀 Installation npm install react-dev-player

(Note: Ensure you have lucide-react, gsap, and hls.js installed in your project as they are required dependencies.)

🛠 Usage

import { DevPlayer } from 'react-dev-player';

function App() { return ( <DevPlayer src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" width="100%" subtitles={[ { src: '/eng.vtt', label: 'English', language: 'en' } ]} /> ); }

⌨️ Keyboard Shortcuts

Key,Action Space / K,Play / Pause F,Toggle Fullscreen M,Mute / Unmute Arrow Right,Forward 5 seconds Arrow Left,Backward 5 seconds L,Forward 10 seconds J,Backward 10 seconds Esc,Exit Fullscreen

⚙️ Props API

Prop,Type,Description src,string,Required. URL of the video (.m3u8 or .mp4). width,string,Custom width for the player (Default: 100%). subtitles,SubtitleTrack[],"Array of subtitle objects {src, label, language}."

🤝 Contributing Bhai, if you want to add more features or fix bugs, feel free to open a PR! Let's build the best video player for the dev community together.

📄 License MIT © Rohit Kumar