unified-video-framework 1.4.129 → 1.4.131

package/packages/web/src/WebPlayer.ts

@@ -40,6 +40,14 @@ export class WebPlayer extends BasePlayer {
   private currentSubtitle = 'off';
   private currentPlaybackRate = 1;
   private isDragging: boolean = false;
+  
+  // Settings configuration
+  private settingsConfig = {
+    enabled: true,        // Show settings button
+    speed: true,         // Show playback speed options
+    quality: true,       // Show quality options
+    subtitles: true      // Show subtitle options
+  };
   private watermarkCanvas: HTMLCanvasElement | null = null;
   private playerWrapper: HTMLElement | null = null;
   // Free preview gate state
@@ -96,6 +104,26 @@ export class WebPlayer extends BasePlayer {
   }
 
 
+  async initialize(container: HTMLElement | string, config?: any): Promise<void> {
+    // Set useCustomControls based on config before calling parent initialize
+    if (config && config.customControls !== undefined) {
+      this.useCustomControls = config.customControls;
+    }
+    
+    // Configure settings menu options
+    if (config && config.settings) {
+      this.settingsConfig = {
+        enabled: config.settings.enabled !== undefined ? config.settings.enabled : true,
+        speed: config.settings.speed !== undefined ? config.settings.speed : true,
+        quality: config.settings.quality !== undefined ? config.settings.quality : true,
+        subtitles: config.settings.subtitles !== undefined ? config.settings.subtitles : true
+      };
+    }
+    
+    // Call parent initialize
+    await super.initialize(container, config);
+  }
+
   protected async setupPlayer(): Promise<void> {
     if (!this.container) {
       throw new Error('Container element is required');
@@ -2278,6 +2306,7 @@ export class WebPlayer extends BasePlayer {
         overflow-y: auto;
         -webkit-overflow-scrolling: touch;
         overscroll-behavior: contain;
+        z-index: 1000; /* Ensure settings menu appears above other elements */
         /* Firefox */
         scrollbar-width: thin;
         scrollbar-color: var(--uvf-firefox-scrollbar-color) transparent;
@@ -4228,8 +4257,14 @@ export class WebPlayer extends BasePlayer {
 
   /**
    * Creates framework branding logo
+   * Only creates branding if showFrameworkBranding is not explicitly set to false
    */
     private createFrameworkBranding(container: HTMLElement): void {
+        // Double-check configuration (defensive programming)
+        if ((this.config as any).showFrameworkBranding === false) {
+            this.debugLog('Framework branding disabled by configuration');
+            return;
+        }
         const brandingContainer = document.createElement('div');
         brandingContainer.className = 'uvf-framework-branding';
         brandingContainer.setAttribute('title', 'Powered by flicknexs');
@@ -4372,8 +4407,10 @@ export class WebPlayer extends BasePlayer {
     timeDisplay.textContent = '00:00 / 00:00';
     aboveSeekbarSection.appendChild(timeDisplay);
 
-    // Add framework branding next to time display
-    this.createFrameworkBranding(aboveSeekbarSection);
+    // Add framework branding next to time display if enabled
+    if ((this.config as any).showFrameworkBranding !== false) {
+      this.createFrameworkBranding(aboveSeekbarSection);
+    }
     
     // Progress section
     const progressSection = document.createElement('div');
@@ -4457,25 +4494,29 @@ export class WebPlayer extends BasePlayer {
     qualityBadge.textContent = 'HD';
     rightControls.appendChild(qualityBadge);
     
-    // Settings button with menu
-    const settingsContainer = document.createElement('div');
-    settingsContainer.style.position = 'relative';
-    
-    const settingsBtn = document.createElement('button');
-    settingsBtn.className = 'uvf-control-btn';
-    settingsBtn.id = 'uvf-settings-btn';
-    settingsBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>';
-    settingsContainer.appendChild(settingsBtn);
-    
-    // Settings menu - will be populated dynamically based on video capabilities
-    const settingsMenu = document.createElement('div');
-    settingsMenu.className = 'uvf-settings-menu';
-    settingsMenu.id = 'uvf-settings-menu';
-    // Initially empty - will be populated by updateSettingsMenu method
-    settingsMenu.innerHTML = '';
-    settingsMenu.style.display = 'none';
-    settingsContainer.appendChild(settingsMenu);
-    rightControls.appendChild(settingsContainer);
+    // Settings button with menu (show only if enabled)
+    if (this.settingsConfig.enabled) {
+      const settingsContainer = document.createElement('div');
+      settingsContainer.style.position = 'relative';
+      
+      const settingsBtn = document.createElement('button');
+      settingsBtn.className = 'uvf-control-btn';
+      settingsBtn.id = 'uvf-settings-btn';
+      settingsBtn.setAttribute('title', 'Settings');
+      settingsBtn.setAttribute('aria-label', 'Settings');
+      settingsBtn.innerHTML = '<svg viewBox="0 0 24 24"><path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.29L5.24,5.33c-0.22-0.08-0.47,0-0.59,0.22L2.74,8.87 C2.62,9.08,2.66,9.34,2.86,9.48l2.03,1.58C4.84,11.36,4.8,11.69,4.8,12s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.44-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.12-0.22,0.07-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/></svg>';
+      settingsContainer.appendChild(settingsBtn);
+      
+      // Settings menu - will be populated dynamically based on video capabilities and configuration
+      const settingsMenu = document.createElement('div');
+      settingsMenu.className = 'uvf-settings-menu';
+      settingsMenu.id = 'uvf-settings-menu';
+      // Initially empty - will be populated by updateSettingsMenu method
+      settingsMenu.innerHTML = '';
+      settingsMenu.style.display = 'none';
+      settingsContainer.appendChild(settingsMenu);
+      rightControls.appendChild(settingsContainer);
+    }
     
     // EPG button (Electronic Program Guide)
     const epgBtn = document.createElement('button');
@@ -5047,9 +5088,36 @@ export class WebPlayer extends BasePlayer {
   protected setupWatermark(): void {
     if (!this.watermarkCanvas) return;
     
+    // Get watermark configuration
+    const watermarkConfig = (this.config as any).watermark || {};
+    
+    // Check if watermark is disabled
+    if (watermarkConfig.enabled === false) {
+      this.debugLog('Watermark disabled by configuration');
+      return;
+    }
+    
     const ctx = this.watermarkCanvas.getContext('2d');
     if (!ctx) return;
     
+    // Default configuration values
+    const config = {
+      text: watermarkConfig.text || 'PREMIUM',
+      showTime: watermarkConfig.showTime !== false, // default true
+      updateInterval: watermarkConfig.updateInterval || 5000,
+      randomPosition: watermarkConfig.randomPosition !== false, // default true
+      position: watermarkConfig.position || {},
+      style: {
+        fontSize: watermarkConfig.style?.fontSize || 14,
+        fontFamily: watermarkConfig.style?.fontFamily || 'Arial',
+        opacity: watermarkConfig.style?.opacity ?? 0.3,
+        color: watermarkConfig.style?.color,
+        gradientColors: watermarkConfig.style?.gradientColors || ['#ff0000', '#ff4d4f']
+      }
+    };
+    
+    this.debugLog('Watermark configuration:', config);
+    
     const renderWatermark = () => {
       const container = this.watermarkCanvas!.parentElement;
       if (!container) return;
@@ -5059,38 +5127,119 @@ export class WebPlayer extends BasePlayer {
       
       ctx.clearRect(0, 0, this.watermarkCanvas!.width, this.watermarkCanvas!.height);
       
-      // Gradient text effect using theme
-      const wrapper = this.playerWrapper as HTMLElement | null;
-      let c1 = '#ff0000';
-      let c2 = '#ff4d4f';
-      try {
-        if (wrapper) {
-          const styles = getComputedStyle(wrapper);
-          const v1 = styles.getPropertyValue('--uvf-accent-1').trim();
-          const v2 = styles.getPropertyValue('--uvf-accent-2').trim();
-          if (v1) c1 = v1;
-          if (v2) c2 = v2;
-        }
-      } catch (_) {}
-      const gradient = ctx.createLinearGradient(0, 0, 200, 0);
-      gradient.addColorStop(0, c1);
-      gradient.addColorStop(1, c2);
+      // Build watermark text
+      let text = config.text;
+      if (config.showTime) {
+        const timeStr = new Date().toLocaleTimeString();
+        text += ` • ${timeStr}`;
+      }
+      
+      // Set up styling
       ctx.save();
-      ctx.globalAlpha = 0.3;
-      ctx.font = '14px Arial';
-      ctx.fillStyle = gradient;
+      ctx.globalAlpha = config.style.opacity;
+      ctx.font = `${config.style.fontSize}px ${config.style.fontFamily}`;
       ctx.textAlign = 'left';
       
-      const text = `PREMIUM • ${new Date().toLocaleTimeString()}`;
-      const x = 20 + Math.random() * (this.watermarkCanvas!.width - 200);
-      const y = 40 + Math.random() * (this.watermarkCanvas!.height - 80);
+      // Set fill style
+      if (config.style.color) {
+        // Use solid color
+        ctx.fillStyle = config.style.color;
+      } else {
+        // Use gradient (default or custom)
+        const wrapper = this.playerWrapper as HTMLElement | null;
+        let c1 = config.style.gradientColors[0];
+        let c2 = config.style.gradientColors[1];
+        
+        // Try to get theme colors if using defaults
+        if (!watermarkConfig.style?.gradientColors) {
+          try {
+            if (wrapper) {
+              const styles = getComputedStyle(wrapper);
+              const v1 = styles.getPropertyValue('--uvf-accent-1').trim();
+              const v2 = styles.getPropertyValue('--uvf-accent-2').trim();
+              if (v1) c1 = v1;
+              if (v2) c2 = v2;
+            }
+          } catch (_) {}
+        }
+        
+        const gradient = ctx.createLinearGradient(0, 0, 200, 0);
+        gradient.addColorStop(0, c1);
+        gradient.addColorStop(1, c2);
+        ctx.fillStyle = gradient;
+      }
+      
+      // Calculate position
+      let x: number, y: number;
       
+      if (config.randomPosition) {
+        // Random position (default behavior)
+        x = 20 + Math.random() * Math.max(0, this.watermarkCanvas!.width - 200);
+        y = 40 + Math.random() * Math.max(0, this.watermarkCanvas!.height - 80);
+      } else {
+        // Fixed or calculated position
+        const posX = config.position.x;
+        const posY = config.position.y;
+        
+        // Calculate X position
+        if (typeof posX === 'number') {
+          x = posX;
+        } else {
+          switch (posX) {
+            case 'left':
+              x = 20;
+              break;
+            case 'center':
+              x = this.watermarkCanvas!.width / 2;
+              ctx.textAlign = 'center';
+              break;
+            case 'right':
+              x = this.watermarkCanvas!.width - 20;
+              ctx.textAlign = 'right';
+              break;
+            case 'random':
+              x = 20 + Math.random() * Math.max(0, this.watermarkCanvas!.width - 200);
+              break;
+            default:
+              x = 20; // default left
+          }
+        }
+        
+        // Calculate Y position
+        if (typeof posY === 'number') {
+          y = posY;
+        } else {
+          switch (posY) {
+            case 'top':
+              y = 40;
+              break;
+            case 'center':
+              y = this.watermarkCanvas!.height / 2;
+              break;
+            case 'bottom':
+              y = this.watermarkCanvas!.height - 20;
+              break;
+            case 'random':
+              y = 40 + Math.random() * Math.max(0, this.watermarkCanvas!.height - 80);
+              break;
+            default:
+              y = 40; // default top
+          }
+        }
+      }
+      
+      // Render the watermark
       ctx.fillText(text, x, y);
       ctx.restore();
+      
+      this.debugLog('Watermark rendered:', { text, x, y });
     };
     
-    setInterval(renderWatermark, 5000);
-    renderWatermark();
+    // Set up interval with configured frequency
+    setInterval(renderWatermark, config.updateInterval);
+    renderWatermark(); // Render immediately
+    
+    this.debugLog('Watermark setup complete with update interval:', config.updateInterval + 'ms');
   }
 
   public setPaywallConfig(config: any) {
@@ -5981,22 +6130,24 @@ export class WebPlayer extends BasePlayer {
 
     let menuHTML = '';
 
-    // Playback Speed Section
-    menuHTML += `
-      <div class="uvf-settings-group">
-        <div class="uvf-settings-label">Playback Speed</div>
-        <div class="uvf-settings-option speed-option" data-speed="0.25">0.25x</div>
-        <div class="uvf-settings-option speed-option" data-speed="0.5">0.5x</div>
-        <div class="uvf-settings-option speed-option" data-speed="0.75">0.75x</div>
-        <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1 ? 'active' : ''}" data-speed="1">Normal</div>
-        <div class="uvf-settings-option speed-option" data-speed="1.25">1.25x</div>
-        <div class="uvf-settings-option speed-option" data-speed="1.5">1.5x</div>
-        <div class="uvf-settings-option speed-option" data-speed="1.75">1.75x</div>
-        <div class="uvf-settings-option speed-option" data-speed="2">2x</div>
-      </div>`;
-
-    // Quality Section (only if qualities detected)
-    if (this.availableQualities.length > 0) {
+    // Playback Speed Section (only if enabled in config)
+    if (this.settingsConfig.speed) {
+      menuHTML += `
+        <div class="uvf-settings-group">
+          <div class="uvf-settings-label">Playback Speed</div>
+          <div class="uvf-settings-option speed-option" data-speed="0.25">0.25x</div>
+          <div class="uvf-settings-option speed-option" data-speed="0.5">0.5x</div>
+          <div class="uvf-settings-option speed-option" data-speed="0.75">0.75x</div>
+          <div class="uvf-settings-option speed-option ${this.currentPlaybackRate === 1 ? 'active' : ''}" data-speed="1">Normal</div>
+          <div class="uvf-settings-option speed-option" data-speed="1.25">1.25x</div>
+          <div class="uvf-settings-option speed-option" data-speed="1.5">1.5x</div>
+          <div class="uvf-settings-option speed-option" data-speed="1.75">1.75x</div>
+          <div class="uvf-settings-option speed-option" data-speed="2">2x</div>
+        </div>`;
+    }
+
+    // Quality Section (only if enabled in config and qualities detected)
+    if (this.settingsConfig.quality && this.availableQualities.length > 0) {
       menuHTML += `<div class="uvf-settings-group">
         <div class="uvf-settings-label">Quality</div>`;
       
@@ -6008,8 +6159,8 @@ export class WebPlayer extends BasePlayer {
       menuHTML += `</div>`;
     }
 
-    // Subtitles Section (only if subtitles available)
-    if (this.availableSubtitles.length > 0) {
+    // Subtitles Section (only if enabled in config and subtitles available)
+    if (this.settingsConfig.subtitles && this.availableSubtitles.length > 0) {
       menuHTML += `<div class="uvf-settings-group">
         <div class="uvf-settings-label">Subtitles/Captions</div>`;
       
@@ -6020,6 +6171,11 @@ export class WebPlayer extends BasePlayer {
       
       menuHTML += `</div>`;
     }
+    
+    // If no sections are enabled or available, show a message
+    if (!menuHTML.trim()) {
+      menuHTML = '<div class="uvf-settings-group"><div class="uvf-settings-label">No settings available</div></div>';
+    }
 
     settingsMenu.innerHTML = menuHTML;