stormcloud-video-player 0.1.11 → 0.1.12

package/README.md

@@ -7,6 +7,8 @@ A professional HLS video player with advanced ad integration for web application
 - **Precision Ad Alignment**: Tight synchronization with SCTE-35 CUE-OUT signals
 - **Smart Mid-Roll Handling**: Automatic detection and playback of remaining ad portions when joining late
 - **Flexible Ad Scheduling**: Support for both SCTE-35 markers and external ad schedules
+- **Enhanced UI Controls**: Beautiful, adaptive video controls that work on any background color
+- **Live Mode Support**: Specialized controls for live streaming with volume adjustment
 - **Cross-Platform**: Works on desktop, mobile, tablets, and smart TVs
 - **React Ready**: Includes React component for easy integration
 - **TypeScript Support**: Full type definitions included
@@ -32,11 +34,20 @@ function MyVideoApp() {
       autoplay={true}
       muted={true}
       controls={true}
+      showCustomControls={true} // Enable enhanced UI controls
+      allowNativeHls={true} // Allow native HLS for better performance
       licenseKey="your_license_key_here"
       style={{ width: "100%", aspectRatio: "16/9" }}
+      wrapperStyle={{ borderRadius: "12px", overflow: "hidden" }}
       onReady={(player) => {
         console.log("Player is ready!", player);
       }}
+      onVolumeToggle={() => {
+        console.log("Volume toggled");
+      }}
+      onFullscreenToggle={() => {
+        console.log("Fullscreen toggled");
+      }}
     />
   );
 }
@@ -54,8 +65,13 @@ const player = new StormcloudVideoPlayer({
   src: "https://your-stream.com/playlist.m3u8",
   autoplay: true,
   muted: true,
-  allowNativeHls: false,
+  allowNativeHls: true, // Enable native HLS when supported
+  showCustomControls: true, // Enable enhanced UI controls
+  lowLatencyMode: false, // Set to true for live streams
+  driftToleranceMs: 3000, // Drift tolerance for live streams
   licenseKey: "your_license_key_here",
+  onVolumeToggle: () => console.log("Volume toggled"),
+  onFullscreenToggle: () => console.log("Fullscreen toggled"),
 });
 
 await player.load();
@@ -112,12 +128,70 @@ interface StormcloudVideoPlayerConfig {
   autoplay?: boolean; // Auto-start playback (default: false)
   muted?: boolean; // Start muted (default: false)
   allowNativeHls?: boolean; // Use native HLS when available (default: true)
+  showCustomControls?: boolean; // Enable enhanced UI controls (default: false)
+  lowLatencyMode?: boolean; // Enable low-latency mode for live streams (default: false)
+  driftToleranceMs?: number; // Drift tolerance for live streams (default: 3000)
+  immediateManifestAds?: boolean; // Load ads immediately from manifest (default: false)
   licenseKey?: string; // API authentication key
   debugAdTiming?: boolean; // Enable debug logging (default: false)
   adFailsafeTimeoutMs?: number; // Ad timeout in milliseconds (default: 10000)
+  onVolumeToggle?: () => void; // Callback for volume toggle
+  onFullscreenToggle?: () => void; // Callback for fullscreen toggle
+  onControlClick?: () => void; // Callback for control area clicks
 }
 ```
 
+## 🎨 Enhanced UI Controls
+
+The player includes beautiful, adaptive video controls that ensure visibility on any video background:
+
+### Features
+
+- **Adaptive Visibility**: High-contrast design that works on both light and dark video backgrounds
+- **Live Mode Support**: Specialized controls for live streaming with hover-activated volume slider
+- **Modern Design**: Glassmorphism effects with smooth animations and transitions
+- **Touch-Friendly**: Large, accessible buttons optimized for mobile and desktop
+- **Customizable**: Full control over appearance and behavior through props
+
+### Control Types
+
+#### Full Controls (HLS Streams)
+
+When `showCustomControls={true}` and `allowNativeHls={true}` for HLS streams:
+
+- Progress timeline with seek functionality
+- Play/pause button with smooth animations
+- Volume control with hover-activated vertical slider
+- Playback speed menu (0.25x to 2x)
+- Fullscreen toggle
+- Time display (current/duration)
+
+#### Live Mode Controls (Non-HLS or Native HLS disabled)
+
+When `showCustomControls={true}` for live streams or when native HLS is disabled:
+
+- Volume control with hover-activated slider
+- Fullscreen toggle
+- Compact, overlay-style positioning
+
+### Styling
+
+All controls use a consistent high-contrast design:
+
+- **Dark backgrounds** with gradient overlays
+- **White borders** for clear definition
+- **Enhanced shadows** for depth and separation
+- **Smooth transitions** for professional feel
+
+```jsx
+<StormcloudVideoPlayerComponent
+  showCustomControls={true}
+  wrapperStyle={{ borderRadius: "12px", overflow: "hidden" }}
+  onVolumeToggle={() => console.log("Volume toggled")}
+  onFullscreenToggle={() => console.log("Fullscreen toggled")}
+/>
+```
+
 ## 🎬 Ad Integration
 
 ### SCTE-35 Support
@@ -252,7 +326,8 @@ src/
 - **Advanced Late Join**: Improved partial pod handling
 - **LL-HLS Support**: Low-latency streaming optimizations
 - **Rich Analytics**: Comprehensive event tracking and reporting
-- **UI Components**: Built-in countdown timers and ad indicators
+- **UI Themes**: Multiple control themes and color schemes
+- **Accessibility**: Enhanced ARIA support and keyboard navigation
 - **Error Recovery**: Advanced retry logic and failover handling
 
 ### Performance Improvements
@@ -266,26 +341,10 @@ src/
 
 We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
 
-### Development Setup
-
-```bash
-git clone https://github.com/your-org/stormcloud-video-player.git
-cd stormcloud-video-player
-npm install
-npm run dev
-```
-
 ## 📄 License
 
 MIT License - see [LICENSE](LICENSE) file for details.
 
-## 🆘 Support
-
-- **Documentation**: [Full API Docs](https://docs.stormcloud.tv)
-- **Issues**: [GitHub Issues](https://github.com/your-org/stormcloud-video-player/issues)
-- **Discord**: [Community Chat](https://discord.gg/stormcloud)
-- **Email**: support@stormcloud.tv
-
 ---
 
 Built with ❤️ by the Stormcloud team