unified-video-framework 1.4.1 → 1.4.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unified-video-framework",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "Cross-platform video player framework supporting iOS, Android, Web, Smart TVs (Samsung/LG), Roku, and more",
   "main": "packages/core/dist/index.js",
   "types": "packages/core/dist/index.d.ts",

package/packages/ios/README.md

@@ -0,0 +1,84 @@
+# UnifiedVideoPlayer (iOS SDK)
+
+A unified iOS video player SDK with:
+- HLS playback (AVPlayer)
+- FairPlay DRM (SPC/CKC)
+- Subtitles/audio track selection (AVMediaSelection)
+- Picture-in-Picture (AVPictureInPictureController)
+- AirPlay (AVRoutePickerView)
+- Remote Command Center + Now Playing (lock screen controls)
+- Background audio (AVAudioSession)
+
+## Installation
+
+### CocoaPods
+1) Ensure this SDK is in a public Git repository. Update the podspec `s.source` to point at that repo and tag.
+2) In your Podfile:
+```ruby
+platform :ios, '13.0'
+use_frameworks!
+
+target 'YourApp' do
+  pod 'UnifiedVideoPlayer', :git => 'https://github.com/yourcompany/unified-video-ios.git', :tag => '1.0.0'
+end
+```
+3) Run:
+```bash
+pod install
+```
+
+### Swift Package Manager
+Add the package at the repository URL or use Add Local Package pointing to `packages/ios`.
+
+## Quick Start
+```swift
+import UnifiedVideoPlayer
+
+let containerView = UIView(frame: .zero)
+let player = UnifiedVideoPlayer()
+let config = PlayerConfiguration()
+config.autoPlay = true
+
+player.initialize(container: containerView, configuration: config)
+
+let source = MediaSource(url: "https://example.com/stream.m3u8")
+source.metadata = ["title": "Demo Stream"]
+player.onReady = { print("ready") }
+player.onQualityChange = { br in print("bitrate: \(br)") }
+
+player.load(source: source)
+```
+
+### FairPlay DRM
+```swift
+let drm = DRMConfiguration(type: "fairplay", licenseUrl: "https://license.example.com/fps")
+drm.certificateUrl = "https://license.example.com/cert"
+drm.headers = ["X-Tenant-ID": "default"]
+
+let source = MediaSource(url: "https://cdn.example.com/protected/playlist.m3u8")
+source.drm = drm
+player.load(source: source)
+```
+
+### Tracks
+```swift
+let audios = player.audioTracks()      // [String]
+let subs = player.subtitleTracks()     // [String]
+player.selectAudioTrack(index: 0)
+player.selectSubtitleTrack(index: -1)  // off
+```
+
+### PiP & AirPlay
+```swift
+player.startPictureInPicture()
+player.stopPictureInPicture()
+let airPlay = player.makeAirPlayPickerView()
+```
+
+## Capabilities
+- Enable Background Modes > Audio
+- For DRM endpoints, configure ATS exceptions if necessary.
+
+## License
+MIT
+

package/packages/web/dist/WebPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"WebPlayer.d.ts","sourceRoot":"","sources":["../src/WebPlayer.ts"],"names":[],"mappings":"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"}

package/packages/web/dist/WebPlayer.js

@@ -641,6 +641,32 @@ class WebPlayer extends core_1.BasePlayer {
         --uvf-firefox-scrollbar-color: rgba(255,255,255,0.25);
       }
       
+      /* Responsive Container Styles */
+      .uvf-responsive-container {
+        width: 100%;
+        margin: 0 auto;
+        box-sizing: border-box;
+        display: block;
+        position: relative;
+      }
+      
+      .uvf-responsive-container .uvf-player-wrapper {
+        width: 100%;
+        height: 100%;
+        max-width: inherit;
+        max-height: inherit;
+        box-sizing: border-box;
+      }
+      
+      .uvf-responsive-container .uvf-video-container {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        background: radial-gradient(ellipse at center, #1a1a2e 0%, #000 100%);
+        overflow: hidden;
+        box-sizing: border-box;
+      }
+      
       /* Gradient border effect */
       .uvf-player-wrapper::before {
         content: '';
@@ -921,6 +947,19 @@ class WebPlayer extends core_1.BasePlayer {
         pointer-events: none;
       }
       
+      /* Skip button specific styles for consistency */
+      #uvf-skip-back svg,
+      #uvf-skip-forward svg {
+        width: 22px;
+        height: 22px;
+        stroke-width: 0;
+        transform: scale(1);
+      }
+      
+      #uvf-skip-forward svg {
+        transform: scale(1) scaleX(-1); /* Mirror the icon for forward */
+      }
+      
       .uvf-control-btn.play-pause {
         width: 50px;
         height: 50px;
@@ -1405,6 +1444,318 @@ class WebPlayer extends core_1.BasePlayer {
         transform: translateY(-10px) !important;
         pointer-events: none;
       }
+      
+      /* Fullscreen specific styles */
+      .uvf-player-wrapper.uvf-fullscreen .uvf-video-container {
+        width: 100vw;
+        height: 100vh;
+        max-width: none;
+        max-height: none;
+      }
+      
+      /* Ensure overlays remain visible in fullscreen */
+      .uvf-player-wrapper.uvf-fullscreen .uvf-title-bar,
+      .uvf-player-wrapper.uvf-fullscreen .uvf-top-controls,
+      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-bar,
+      .uvf-player-wrapper.uvf-fullscreen .uvf-top-gradient,
+      .uvf-player-wrapper.uvf-fullscreen .uvf-controls-gradient {
+        z-index: 2147483647; /* Maximum z-index value */
+      }
+      
+      .uvf-player-wrapper.uvf-fullscreen:hover .uvf-title-bar,
+      .uvf-player-wrapper.uvf-fullscreen:hover .uvf-top-controls,
+      .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-title-bar,
+      .uvf-player-wrapper.uvf-fullscreen.controls-visible .uvf-top-controls {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      
+      /* Responsive Media Queries */
+      /* Mobile devices (portrait) */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
+        .uvf-responsive-container {
+          padding: 0;
+          width: 100vw !important;
+          margin: 0;
+        }
+        
+        .uvf-responsive-container .uvf-player-wrapper {
+          width: 100vw !important;
+        }
+        
+        .uvf-responsive-container .uvf-video-container {
+          width: 100vw !important;
+          aspect-ratio: unset !important; /* Let JS handle the aspect ratio */
+        }
+        
+        .uvf-controls-bar {
+          padding: 12px 8px;
+        }
+        
+        .uvf-controls-row {
+          gap: 6px;
+        }
+        
+        .uvf-control-btn {
+          width: 34px;
+          height: 34px;
+          min-width: 34px;
+          min-height: 34px;
+        }
+        
+        .uvf-control-btn.play-pause {
+          width: 42px;
+          height: 42px;
+          min-width: 42px;
+          min-height: 42px;
+        }
+        
+        .uvf-time-display {
+          font-size: 11px;
+          min-width: 70px;
+          padding: 0 4px;
+        }
+        
+        .uvf-top-controls {
+          top: 8px;
+          right: 8px;
+          gap: 6px;
+        }
+        
+        .uvf-top-btn {
+          width: 34px;
+          height: 34px;
+          min-width: 34px;
+          min-height: 34px;
+        }
+        
+        .uvf-title-bar {
+          padding: 8px;
+        }
+        
+        .uvf-video-title {
+          font-size: 15px;
+        }
+        
+        .uvf-video-subtitle {
+          font-size: 11px;
+        }
+        
+        .uvf-center-play-btn {
+          width: 56px;
+          height: 56px;
+        }
+        
+        .uvf-center-play-btn svg {
+          width: 26px;
+          height: 26px;
+        }
+        
+        .uvf-progress-bar-wrapper {
+          height: 8px;
+          margin-bottom: 10px;
+        }
+        
+        .uvf-progress-handle {
+          width: 16px;
+          height: 16px;
+        }
+        
+        .uvf-settings-menu {
+          min-width: 150px;
+          bottom: 35px;
+          right: 5px;
+        }
+      }
+      
+      /* Mobile devices (landscape) */
+      @media screen and (max-width: 767px) and (orientation: landscape) {
+        .uvf-responsive-container {
+          width: 100vw !important;
+          height: 100vh !important;
+          margin: 0;
+          padding: 0;
+        }
+        
+        .uvf-responsive-container .uvf-player-wrapper {
+          width: 100vw !important;
+          height: 100vh !important;
+        }
+        
+        .uvf-responsive-container .uvf-video-container {
+          width: 100vw !important;
+          height: 100vh !important;
+          aspect-ratio: unset !important;
+        }
+        
+        .uvf-controls-bar {
+          padding: 8px;
+        }
+        
+        .uvf-top-controls {
+          top: 6px;
+          right: 6px;
+        }
+        
+        .uvf-title-bar {
+          padding: 6px;
+        }
+        
+        .uvf-control-btn {
+          width: 32px;
+          height: 32px;
+        }
+        
+        .uvf-control-btn.play-pause {
+          width: 40px;
+          height: 40px;
+        }
+      }
+      
+      /* Tablet devices */
+      @media screen and (min-width: 768px) and (max-width: 1023px) {
+        .uvf-controls-bar {
+          padding: 18px 15px;
+        }
+        
+        .uvf-control-btn {
+          width: 42px;
+          height: 42px;
+        }
+        
+        .uvf-control-btn.play-pause {
+          width: 48px;
+          height: 48px;
+        }
+        
+        .uvf-top-controls {
+          top: 15px;
+          right: 15px;
+        }
+        
+        .uvf-title-bar {
+          padding: 15px;
+        }
+        
+        .uvf-center-play-btn {
+          width: 70px;
+          height: 70px;
+        }
+      }
+      
+      /* Large screens */
+      @media screen and (min-width: 1024px) {
+        .uvf-responsive-container {
+          padding: 10px;
+        }
+      }
+      
+      /* Touch device optimizations */
+      @media (hover: none) and (pointer: coarse) {
+        .uvf-control-btn {
+          min-width: 44px;
+          min-height: 44px;
+        }
+        
+        .uvf-top-btn {
+          min-width: 44px;
+          min-height: 44px;
+        }
+        
+        .uvf-progress-bar-wrapper {
+          height: 8px;
+          cursor: pointer;
+        }
+        
+        .uvf-progress-handle {
+          width: 20px;
+          height: 20px;
+        }
+        
+        .uvf-volume-slider {
+          height: 10px;
+        }
+      }
+      
+      /* Paywall Responsive Styles */
+      .uvf-paywall-overlay {
+        position: absolute !important;
+        inset: 0 !important;
+        background: rgba(0,0,0,0.9) !important;
+        z-index: 2147483000 !important;
+        display: none !important;
+        align-items: center !important;
+        justify-content: center !important;
+        padding: 10px !important;
+        box-sizing: border-box !important;
+      }
+      
+      .uvf-paywall-modal {
+        width: 90vw !important;
+        height: auto !important;
+        max-width: 500px !important;
+        max-height: 90vh !important;
+        background: #0f0f10 !important;
+        border: 1px solid rgba(255,255,255,0.15) !important;
+        border-radius: 12px !important;
+        display: flex !important;
+        flex-direction: column !important;
+        overflow: auto !important;
+        box-shadow: 0 20px 60px rgba(0,0,0,0.7) !important;
+      }
+      
+      /* Paywall Mobile Portrait */
+      @media screen and (max-width: 767px) and (orientation: portrait) {
+        .uvf-paywall-modal {
+          width: 95vw !important;
+          max-width: none !important;
+          max-height: 85vh !important;
+          margin: 0 !important;
+        }
+        
+        .uvf-paywall-modal > div:first-child {
+          padding: 12px 16px !important;
+          font-size: 16px !important;
+        }
+        
+        .uvf-paywall-modal > div:last-child {
+          padding: 16px !important;
+        }
+      }
+      
+      /* Paywall Mobile Landscape */
+      @media screen and (max-width: 767px) and (orientation: landscape) {
+        .uvf-paywall-modal {
+          width: 85vw !important;
+          max-height: 80vh !important;
+        }
+        
+        .uvf-paywall-modal > div:first-child {
+          padding: 10px 16px !important;
+        }
+        
+        .uvf-paywall-modal > div:last-child {
+          padding: 14px !important;
+        }
+      }
+      
+      /* Paywall Tablet */
+      @media screen and (min-width: 768px) and (max-width: 1023px) {
+        .uvf-paywall-modal {
+          width: 80vw !important;
+          max-width: 600px !important;
+          max-height: 80vh !important;
+        }
+      }
+      
+      /* Paywall Desktop */
+      @media screen and (min-width: 1024px) {
+        .uvf-paywall-modal {
+          width: 70vw !important;
+          max-width: 800px !important;
+          max-height: 70vh !important;
+        }
+      }
     `;
     }
     createCustomControls(container) {
@@ -1440,11 +1791,6 @@ class WebPlayer extends core_1.BasePlayer {
         </svg>
         <span>Stop Casting</span>
       </button>
-      <div class="uvf-top-btn" id="uvf-playlist-btn" title="Add to Playlist">
-        <svg viewBox="0 0 24 24">
-          <path d="M14 10H2v2h12v-2zm0-4H2v2h12V6zm4 8v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zM2 16h8v-2H2v2z"/>
-        </svg>
-      </div>
       <div class="uvf-top-btn" id="uvf-share-btn" title="Share">
         <svg viewBox="0 0 24 24">
           <path d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"/>
@@ -1498,12 +1844,16 @@ class WebPlayer extends core_1.BasePlayer {
         const skipBackBtn = document.createElement('button');
         skipBackBtn.className = 'uvf-control-btn';
         skipBackBtn.id = 'uvf-skip-back';
-        skipBackBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11.99 5V1l-5 5 5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6h-2c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>';
+        skipBackBtn.setAttribute('title', 'Skip backward 10s');
+        skipBackBtn.setAttribute('aria-label', 'Skip backward 10 seconds');
+        skipBackBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>';
         controlsRow.appendChild(skipBackBtn);
         const skipForwardBtn = document.createElement('button');
         skipForwardBtn.className = 'uvf-control-btn';
         skipForwardBtn.id = 'uvf-skip-forward';
-        skipForwardBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M12.01 19c-3.31 0-6-2.69-6-6s2.69-6 6-6V5l5 5-5 5V9c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4h2c0 3.31-2.69 6-6 6z"/></svg>';
+        skipForwardBtn.setAttribute('title', 'Skip forward 10s');
+        skipForwardBtn.setAttribute('aria-label', 'Skip forward 10 seconds');
+        skipForwardBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/></svg>';
         controlsRow.appendChild(skipForwardBtn);
         const volumeControl = document.createElement('div');
         volumeControl.className = 'uvf-volume-control';
@@ -1746,6 +2096,39 @@ class WebPlayer extends core_1.BasePlayer {
                 this.exitFullscreen();
             }
         });
+        document.addEventListener('fullscreenchange', () => {
+            const wrapper = this.playerWrapper || this.container?.querySelector('.uvf-player-wrapper');
+            if (wrapper) {
+                if (document.fullscreenElement) {
+                    wrapper.classList.add('uvf-fullscreen');
+                }
+                else {
+                    wrapper.classList.remove('uvf-fullscreen');
+                }
+            }
+            const fullscreenBtn = document.getElementById('uvf-fullscreen-btn');
+            if (fullscreenBtn) {
+                fullscreenBtn.innerHTML = document.fullscreenElement
+                    ? '<svg viewBox="0 0 24 24"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>'
+                    : '<svg viewBox="0 0 24 24"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>';
+            }
+        });
+        ['webkitfullscreenchange', 'mozfullscreenchange'].forEach(eventName => {
+            document.addEventListener(eventName, () => {
+                const wrapper = this.playerWrapper || this.container?.querySelector('.uvf-player-wrapper');
+                if (wrapper) {
+                    const isFullscreen = !!(document.fullscreenElement ||
+                        document.webkitFullscreenElement ||
+                        document.mozFullScreenElement);
+                    if (isFullscreen) {
+                        wrapper.classList.add('uvf-fullscreen');
+                    }
+                    else {
+                        wrapper.classList.remove('uvf-fullscreen');
+                    }
+                }
+            });
+        });
         this.video.addEventListener('waiting', () => {
             const loading = document.getElementById('uvf-loading');
             if (loading)
@@ -1800,11 +2183,9 @@ class WebPlayer extends core_1.BasePlayer {
         pipBtn?.addEventListener('click', () => this.togglePiP());
         const castBtn = document.getElementById('uvf-cast-btn');
         const stopCastBtn = document.getElementById('uvf-stop-cast-btn');
-        const playlistBtn = document.getElementById('uvf-playlist-btn');
         const shareBtn = document.getElementById('uvf-share-btn');
         castBtn?.addEventListener('click', () => this.onCastButtonClick());
         stopCastBtn?.addEventListener('click', () => this.stopCasting());
-        playlistBtn?.addEventListener('click', () => this.showNotification('Added to playlist'));
         shareBtn?.addEventListener('click', () => this.shareVideo());
         document.addEventListener('click', (e) => {
             if (!e.target.closest('#uvf-settings-btn') &&