{"_id":"@aniruddha1806/video-player","_rev":"2-9f8692550b7dfb6475f1e3b70aa24145","name":"@aniruddha1806/video-player","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@aniruddha1806/video-player","version":"1.0.0","keywords":["react","video","player","youtube","html5","typescript"],"author":{"name":"Your Name"},"license":"MIT","_id":"@aniruddha1806/video-player@1.0.0","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"dist":{"shasum":"f1a91238ba695cc37942c7f15c7aebc21f42235b","tarball":"https://registry.npmjs.org/@aniruddha1806/video-player/-/video-player-1.0.0.tgz","fileCount":9,"integrity":"sha512-Cktluy2cBkzX94jZTFIbzBa1JTUUwBe+JDDOzm+TjHzCrQ5U7vZQYIBXsKvjkL3kuQ8MF+PD4MowJXej2yfoGw==","signatures":[{"sig":"MEQCIH6eazbugyH/PcA7ned5gQKrP2AZEmYnSZng0H40Vb7+AiB3fMqNJIdR9MGw02FfOucrM2XOf4mLzVMPoHW+s3XxEg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92906},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"repository":{"type":"git"},"_npmVersion":"10.9.1","description":"A lightweight React video player with YouTube support and no external dependencies","directories":{},"_nodeVersion":"20.14.0","dependencies":{"tslib":"^2.6.2"},"_hasShrinkwrap":false,"devDependencies":{"rollup":"^4.3.0","typescript":"^5.2.2","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup-plugin-dts":"^6.1.0","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-typescript":"^11.1.5","@rollup/plugin-node-resolve":"^15.2.3"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/video-player_1.0.0_1744056384855_0.6489100549365967","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@aniruddha1806/video-player","version":"1.0.1","description":"A lightweight React video player with YouTube support and no external dependencies","main":"dist/index.js","module":"dist/index.esm.js","type":"module","types":"dist/index.d.ts","scripts":{"build":"rollup -c","prepublishOnly":"npm run build"},"keywords":["react","video","player","youtube","html5","typescript"],"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"dependencies":{"tslib":"^2.6.2"},"devDependencies":{"@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-typescript":"^11.1.5","@types/react":"^18.2.37","@types/react-dom":"^18.2.15","rollup":"^4.3.0","rollup-plugin-dts":"^6.1.0","typescript":"^5.2.2"},"repository":{"type":"git"},"_id":"@aniruddha1806/video-player@1.0.1","_nodeVersion":"20.14.0","_npmVersion":"10.9.1","dist":{"integrity":"sha512-UrxrtqM0EhCxITvDHVjsFGTXF2zEGS8rMaQnnvGZl80L+sm8XSFVBBMUWg3iqYdHHjr5tgdPd+TWj+nwXKsTVg==","shasum":"ac3b8bbd86dc3daf4bbf8e83df835b404c075a4f","tarball":"https://registry.npmjs.org/@aniruddha1806/video-player/-/video-player-1.0.1.tgz","fileCount":10,"unpackedSize":101611,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIAm32YNU8XxEnQzdsCKROCGBlSNN0AZGwPi2D5TuDqCdAiEAujYnmPKbGAJWfDWD1Ldoz9H3zwNVy8AQUKrXb0KcqTk="}]},"_npmUser":{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"},"directories":{},"maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/video-player_1.0.1_1749138933674_0.07146342760085633"},"_hasShrinkwrap":false}},"time":{"created":"2025-04-07T20:06:24.796Z","modified":"2025-06-05T15:55:34.090Z","1.0.0":"2025-04-07T20:06:25.129Z","1.0.1":"2025-06-05T15:55:33.879Z"},"author":{"name":"Aniruddha Kulkarni"},"license":"MIT","keywords":["react","video","player","youtube","html5","typescript"],"repository":{"type":"git"},"description":"A lightweight React video player with YouTube support and no external dependencies","maintainers":[{"name":"aniruddha1806","email":"aniruddha.kulkarni1806@gmail.com"}],"readme":"# React Video Player\r\n\r\nA comprehensive, customizable video player component for React applications with TypeScript support. Features both HTML5 video player and YouTube player with extensive customization options and built-in controls.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @aniruddha1806/video-player\r\n```\r\n\r\n## Features\r\n\r\n- đŸŽĨ video player with custom controls\r\n- đŸ“ē YouTube video player integration\r\n- 🎛ī¸ Full control customization (play, pause, volume, progress, fullscreen)\r\n- ⏰ Time display and seeking functionality\r\n- 🔊 Volume control with mute/unmute\r\n- ⏊ Forward/backward 10-second skip buttons\r\n- đŸ–ŧī¸ Poster image support\r\n- 📱 Responsive design with mobile support\r\n- 🎨 Extensive styling customization\r\n- 🔧 TypeScript support with full type definitions\r\n- â™ŋ Accessibility features\r\n- đŸšĢ Error handling and fallback states\r\n- đŸĒļ Zero dependencies (except YouTube API for YouTube player)\r\n\r\n## Quick Start\r\n\r\n### HTML5 Video Player\r\n\r\n```jsx\r\nimport { VideoPlayer } from '@aniruddha1806/video-player';\r\n\r\nfunction App() {\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n### YouTube Player\r\n\r\n```jsx\r\nimport { YouTubePlayer } from '@aniruddha1806/video-player';\r\n\r\nfunction App() {\r\n return (\r\n \r\n );\r\n}\r\n```\r\n\r\n## Components\r\n\r\n### VideoPlayer\r\n\r\nHTML5 video player with custom controls.\r\n\r\n#### Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `src` | `string` | `required` | Video source URL |\r\n| `poster` | `string` | `undefined` | Poster image URL |\r\n| `autoPlay` | `boolean` | `false` | Auto-play video on load |\r\n| `muted` | `boolean` | `false` | Start video muted |\r\n| `loop` | `boolean` | `false` | Loop video playback |\r\n| `controls` | `boolean` | `true` | Show custom controls |\r\n| `className` | `string` | `\"\"` | CSS class for video element |\r\n| `containerClassName` | `string` | `\"\"` | CSS class for container |\r\n| `controlsClassName` | `string` | `\"\"` | CSS class for controls overlay |\r\n| `playButtonClassName` | `string` | `\"\"` | CSS class for play button |\r\n| `pauseButtonClassName` | `string` | `\"\"` | CSS class for pause button |\r\n| `forwardButtonClassName` | `string` | `\"\"` | CSS class for forward button |\r\n| `backwardButtonClassName` | `string` | `\"\"` | CSS class for backward button |\r\n| `progressBarClassName` | `string` | `\"\"` | CSS class for progress bar |\r\n| `progressFilledClassName` | `string` | `\"\"` | CSS class for progress fill |\r\n| `timeDisplayClassName` | `string` | `\"\"` | CSS class for time display |\r\n| `volumeControlClassName` | `string` | `\"\"` | CSS class for volume control |\r\n| `onPlay` | `() => void` | `undefined` | Callback when video plays |\r\n| `onPause` | `() => void` | `undefined` | Callback when video pauses |\r\n| `onEnded` | `() => void` | `undefined` | Callback when video ends |\r\n| `onTimeUpdate` | `(time: number) => void` | `undefined` | Callback on time update |\r\n| `onVolumeChange` | `(volume: number) => void` | `undefined` | Callback on volume change |\r\n\r\n### YouTubePlayer\r\n\r\nYouTube video player with embedded iframe.\r\n\r\n#### Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `videoId` | `string` | `required` | YouTube video ID or URL |\r\n| `autoPlay` | `boolean` | `false` | Auto-play video on load |\r\n| `muted` | `boolean` | `false` | Start video muted |\r\n| `loop` | `boolean` | `false` | Loop video playback |\r\n| `controls` | `boolean` | `true` | Show YouTube controls |\r\n| `startAt` | `number` | `0` | Start time in seconds |\r\n| `className` | `string` | `\"\"` | CSS class for iframe |\r\n| `containerClassName` | `string` | `\"\"` | CSS class for container |\r\n\r\n## Examples\r\n\r\n### Basic HTML5 Video Player\r\n\r\nSimple video player with default controls:\r\n\r\n```jsx\r\nimport { VideoPlayer } from '@aniruddha1806/video-player';\r\n\r\nfunction BasicVideoExample() {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n```\r\n\r\n\r\n\r\n### Video Gallery\r\n\r\nCreate a video gallery with multiple players:\r\n\r\n```jsx\r\nimport { useState } from 'react';\r\nimport { VideoPlayer, YouTubePlayer } from '@aniruddha1806/video-player';\r\n\r\nfunction VideoGalleryExample() {\r\n const [activeVideo, setActiveVideo] = useState(0);\r\n\r\n const videos = [\r\n {\r\n type: 'html5',\r\n title: 'Big Buck Bunny',\r\n src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',\r\n poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'\r\n },\r\n {\r\n type: 'youtube',\r\n title: 'Sample YouTube Video',\r\n videoId: 'dQw4w9WgXcQ'\r\n },\r\n {\r\n type: 'html5',\r\n title: 'Elephants Dream',\r\n src: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',\r\n poster: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg'\r\n }\r\n ];\r\n\r\n return (\r\n
\r\n

Video Gallery

\r\n \r\n {/* Video Thumbnails */}\r\n
\r\n {videos.map((video, index) => (\r\n setActiveVideo(index)}\r\n style={{\r\n padding: '12px',\r\n border: activeVideo === index ? '2px solid #007bff' : '2px solid #e9ecef',\r\n borderRadius: '8px',\r\n cursor: 'pointer',\r\n backgroundColor: activeVideo === index ? '#f8f9fa' : 'white',\r\n transition: 'all 0.2s ease'\r\n }}\r\n >\r\n

{video.title}

\r\n

\r\n {video.type === 'youtube' ? 'YouTube Video' : 'HTML5 Video'}\r\n

\r\n
\r\n ))}\r\n
\r\n\r\n {/* Active Video Player */}\r\n
\r\n {videos[activeVideo].type === 'youtube' ? (\r\n \r\n ) : (\r\n \r\n )}\r\n
\r\n \r\n

\r\n {videos[activeVideo].title}\r\n

\r\n \r\n );\r\n}\r\n```\r\n\r\n\r\n\r\n## TypeScript Usage\r\n\r\nThe component provides full TypeScript support:\r\n\r\n```typescript\r\nimport { VideoPlayer, YouTubePlayer, VideoPlayerProps, YouTubePlayerProps } from '@aniruddha1806/video-player';\r\nimport { useState, useCallback } from 'react';\r\n\r\ninterface VideoData {\r\n id: string;\r\n title: string;\r\n src: string;\r\n poster?: string;\r\n duration?: number;\r\n}\r\n\r\ninterface VideoPlayerComponentProps {\r\n videos: VideoData[];\r\n onVideoSelect: (videoId: string) => void;\r\n}\r\n\r\nconst VideoPlayerComponent: React.FC = ({ \r\n videos, \r\n onVideoSelect \r\n}) => {\r\n const [selectedVideo, setSelectedVideo] = useState(videos[0] || null);\r\n const [playbackTime, setPlaybackTime] = useState(0);\r\n\r\n const handleTimeUpdate = useCallback((time: number): void => {\r\n setPlaybackTime(time);\r\n }, []);\r\n\r\n const handleVideoSelect = useCallback((video: VideoData): void => {\r\n setSelectedVideo(video);\r\n onVideoSelect(video.id);\r\n }, [onVideoSelect]);\r\n\r\n const videoPlayerProps: VideoPlayerProps = {\r\n src: selectedVideo?.src || '',\r\n poster: selectedVideo?.poster,\r\n onTimeUpdate: handleTimeUpdate,\r\n autoPlay: false,\r\n muted: false,\r\n controls: true\r\n };\r\n\r\n return (\r\n
\r\n {selectedVideo && }\r\n
Current time: {Math.floor(playbackTime)}s
\r\n
\r\n );\r\n};\r\n```\r\n\r\n","readmeFilename":"README.md"}