@goboss/web-video-player-sdk 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 GoBOSS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,331 @@
+# Web Video Player SDK
+
+A unified, high-performance OTT web video player SDK for adaptive streaming with support for HLS/DASH, DRM protection, live streaming, and rich interactive features.
+
+## Features
+
+- **Adaptive Streaming**: HLS and DASH support with automatic quality switching
+- **DRM Protection**: Token-based authentication and FairPlay/Widevine support
+- **Interactive Controls**: Full-featured UI with quality selection, playback speed, subtitles
+- **Accessibility**: WebVTT subtitles, audio tracks, keyboard navigation
+- **Live Streaming**: Real-time streaming with adaptive bitrate
+- **Casting**: Chromecast and AirPlay support
+- **Analytics**: Built-in analytics event tracking
+- **Performance**: Optimized for fast loading and smooth playback
+- **React Native Ready**: Works with React 18+ and 19
+
+## Installation
+
+### NPM
+
+```bash
+npm install web-video-player-sdk
+```
+
+### Yarn
+
+```bash
+yarn add web-video-player-sdk
+```
+
+### PNPM
+
+```bash
+pnpm add web-video-player-sdk
+```
+
+## Quick Start
+
+### React Component Usage
+
+```jsx
+import React from 'react';
+import { WebVideoPlayer } from 'web-video-player-sdk';
+import 'web-video-player-sdk/css';
+
+export default function App() {
+  return (
+    <WebVideoPlayer
+      src="https://example.com/video.m3u8"
+      enableControls={true}
+      enableChromecast={true}
+      enableSubtitles={true}
+      enableQuality={true}
+      enablePlaybackSpeed={true}
+      enablePiP={true}
+      enableFullscreen={true}
+      watermark="Your Brand"
+      themeColor="#6366f1"
+    />
+  );
+}
+```
+
+### TypeScript Types
+
+```tsx
+import type { WebVideoPlayerProps } from 'web-video-player-sdk';
+
+const playerProps: WebVideoPlayerProps = {
+  src: 'https://example.com/video.m3u8',
+  subtitles: [
+    {
+      id: 'en',
+      label: 'English',
+      lang: 'en',
+      src: 'https://example.com/en.vtt',
+      kind: 'subtitles',
+      isDefault: true
+    }
+  ],
+  chapters: [
+    {
+      id: '1',
+      title: 'Introduction',
+      startTime: 0,
+      thumbnail: 'https://example.com/thumb-0.jpg'
+    }
+  ],
+  onAnalyticsEvent: (event) => console.log(event)
+};
+```
+
+## Core Player API
+
+```jsx
+import { VideoPlayerSDK } from 'web-video-player-sdk';
+
+const player = new VideoPlayerSDK({
+  container: document.getElementById('player'),
+  src: 'https://example.com/video.m3u8',
+  autoplay: false,
+  muted: false
+});
+
+// Playback Control
+player.play();
+player.pause();
+player.seek(30); // seek to 30 seconds
+player.setPlaybackRate(1.5);
+player.setVolume(0.8);
+player.setMute(false);
+
+// Quality Control
+player.setQuality(1080); // set quality by height
+
+// Subtitles
+player.subtitles.setActiveTrack('en');
+player.subtitles.getActiveTrackId();
+
+// Casting
+player.casting.requestSession('video.mp4', 0);
+player.casting.stopCasting();
+player.casting.requestAirPlaySession(videoElement);
+
+// Events
+player.on('play', () => console.log('Playing'));
+player.on('pause', () => console.log('Paused'));
+player.on('ended', () => console.log('Ended'));
+player.on('qualitychange', (quality) => console.log('Quality:', quality));
+player.on('subtitlesloaded', (tracks) => console.log('Subtitles:', tracks));
+player.on('audiotracksloaded', (tracks) => console.log('Audio:', tracks));
+
+// Cleanup
+player.destroy();
+```
+
+## CDN Usage (UMD)
+
+```html
+<!DOCTYPE html>
+<html>
+<head>
+  <script crossorigin src="https://cdn.jsdelivr.net/npm/react@19/umd/react.production.min.js"></script>
+  <script crossorigin src="https://cdn.jsdelivr.net/npm/react-dom@19/umd/react-dom.production.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/web-video-player-sdk@1.0.0/dist/index.umd.js"></script>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/web-video-player-sdk@1.0.0/dist/index.css">
+</head>
+<body>
+  <div id="player" style="width: 100%; height: 600px;"></div>
+
+  <script>
+    const container = document.getElementById('player');
+    const player = new WebVideoPlayerSDK.VideoPlayerSDK({
+      container,
+      src: 'https://example.com/video.m3u8',
+      autoplay: true
+    });
+  </script>
+</body>
+</html>
+```
+
+## Configuration Props
+
+### WebVideoPlayer Component
+
+```typescript
+interface WebVideoPlayerProps {
+  src: string;                              // Video source URL (HLS/DASH)
+  chapters?: Chapter[];                     // Chapter markers
+  keyMoments?: KeyMoment[];                 // Key moment markers
+  subtitles?: SubtitleTrack[];              // Subtitle tracks
+  watermark?: string;                       // Watermark text (default: 'GoBOSS')
+  themeColor?: string;                      // Primary theme color (default: '#6366f1')
+  drmConfig?: DrmConfig;                    // DRM configuration
+  onAnalyticsEvent?: (event: AnalyticsEvent) => void;
+  onKeyMomentsLoaded?: (keyMoments: KeyMoment[]) => void;
+  
+  // Feature Flags
+  enableControls?: boolean;                 // Show control bar (default: true)
+  enableChromecast?: boolean;               // Enable Chromecast (default: true)
+  enableKeyMoments?: boolean;               // Show chapter markers (default: true)
+  enableSubtitles?: boolean;                // Enable subtitles (default: true)
+  enableQuality?: boolean;                  // Enable quality selector (default: true)
+  enablePlaybackSpeed?: boolean;            // Enable speed control (default: true)
+  enablePiP?: boolean;                      // Enable Picture-in-Picture (default: true)
+  enableFullscreen?: boolean;               // Enable fullscreen (default: true)
+}
+```
+
+### VideoPlayerSDK Constructor
+
+```typescript
+interface VideoPlayerSDKConfig {
+  container: HTMLElement;                   // Container element
+  src: string;                              // Video source URL
+  autoplay?: boolean;                       // Auto-play on load
+  muted?: boolean;                          // Start muted
+  keyMoments?: KeyMoment[];                 // Chapter data
+  subtitles?: SubtitleTrack[];              // Subtitle tracks
+  drm?: DrmConfig;                          // DRM settings
+  analyticsCallback?: (event: AnalyticsEvent) => void;
+  themeColor?: string;                      // Theme color
+}
+```
+
+## DRM Configuration
+
+```typescript
+const drmConfig = {
+  authToken: 'your-auth-token',            // Bearer token for signed URLs
+  watermarkText: 'Your Brand',             // Dynamic watermark
+  allowedDomains: ['yourdomain.com'],      // Allowed playback domains
+  fairplayLicenseUrl: 'https://...',       // FairPlay license URL
+  widevineServiceUrl: 'https://...'        // Widevine license URL
+};
+```
+
+## Subtitle Track Format
+
+```typescript
+interface SubtitleTrack {
+  id: string;
+  label: string;
+  lang: string;                            // ISO 639-1 code (en, fr, es, etc.)
+  src: string;                             // URL to WebVTT or SRT file
+  kind?: 'subtitles' | 'captions';
+  isDefault?: boolean;
+}
+```
+
+## Events
+
+The SDK emits the following events:
+
+```typescript
+// Playback Events
+'play' | 'pause' | 'ended' | 'timeupdate'
+
+// Streaming Events
+'buffering' | 'qualitylevels' | 'qualitychange'
+
+// Track Events
+'subtitlesloaded' | 'audiotracksloaded' | 'audiotrackchange'
+
+// Content Events
+'keymomentsloaded' | 'chaptersloaded' | 'pipchange'
+
+// Analytics Events
+'analytics' // custom analytics event
+```
+
+## Keyboard Shortcuts
+
+- **Space / K**: Play / Pause
+- **J**: Rewind 10s
+- **L**: Forward 10s
+- **↑**: Volume Up
+- **↓**: Volume Down
+- **M**: Toggle Mute
+- **F**: Toggle Fullscreen
+- **P**: Toggle Picture-in-Picture
+- **C**: Toggle Subtitles
+
+## Browser Support
+
+| Browser | Version | Support |
+|---------|---------|---------|
+| Chrome | 90+ | ✅ Full |
+| Firefox | 88+ | ✅ Full |
+| Safari | 14+ | ✅ Full |
+| Edge | 90+ | ✅ Full |
+| iOS Safari | 14+ | ✅ HLS only |
+| Android Chrome | 90+ | ✅ Full |
+
+## Performance
+
+- Lazy loading with Intersection Observer
+- Optimized HLS.js and DASH.js bundling
+- CSS-in-JS with runtime theming
+- Efficient re-renders with React hooks
+- Adaptive thumbnail generation
+
+## Troubleshooting
+
+### Video not loading
+- Check CORS headers on your video server
+- Verify HTTPS for HLS streams
+- Ensure `crossOrigin="anonymous"` is set
+
+### Subtitles not showing
+- Verify subtitle file format (WebVTT/SRT)
+- Check subtitle language codes (ISO 639-1)
+- Use `enableSubtitles={true}` on component
+
+### Cast not working
+- Ensure Google Cast SDK is loaded: `<script src="https://www.gstatic.com/cv/js/sender/v360_0.js"></script>`
+- Test on a network with mDNS support
+- Check Cast device availability
+
+### Quality switching issues
+- Verify all quality levels have matching codecs
+- Check network connection
+- Monitor browser console for HLS.js errors
+
+## Examples
+
+See the `examples/` directory for:
+- React integration
+- TypeScript usage
+- HTML5/vanilla JS
+- Custom UI overlays
+- DRM implementation
+
+## Contributing
+
+Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.
+
+## License
+
+MIT - See [LICENSE](LICENSE) file
+
+## Support
+
+- 📖 [Documentation](https://github.com/yourusername/web-video-player-sdk)
+- 🐛 [Report Issues](https://github.com/yourusername/web-video-player-sdk/issues)
+- 💬 [Discussions](https://github.com/yourusername/web-video-player-sdk/discussions)
+
+## Changelog
+
+See [CHANGELOG.md](CHANGELOG.md) for release notes.