unified-video-framework 1.4.369 → 1.4.371

package/packages/web/src/chapters/ChapterManager.ts

@@ -384,6 +384,7 @@ export class ChapterManager {
 
     // Check if segment changed
     if (newSegment !== this.currentSegment) {
+
       // Handle segment exit
       if (this.currentSegment) {
         this.emit('segmentExited', {
@@ -412,6 +413,7 @@ export class ChapterManager {
 
       // Handle segment entry
       if (this.currentSegment) {
+
         this.emit('segmentEntered', {
           segment: this.currentSegment,
           currentTime,

package/packages/web/src/chapters/CreditsButtonController.ts

@@ -42,7 +42,6 @@ export class CreditsButtonController {
     public showCreditsButtons(segment: VideoSegment, currentTime: number): void {
         // Verify segment has nextEpisodeUrl
         if (!segment.nextEpisodeUrl) {
-            console.warn('[CreditsButtonController] Segment does not have nextEpisodeUrl');
             return;
         }
 
@@ -129,24 +128,31 @@ export class CreditsButtonController {
      * Create the credits buttons DOM elements
      */
     private createCreditsButtons(): void {
+        const segment = this.currentSegment;
+        const style = segment?.creditsButtonStyle;
+        const layout = style?.layout || 'vertical';
+        const position = style?.position || 'bottom-right';
+
         // Create container
         this.buttonsContainer = document.createElement('div');
         this.buttonsContainer.className = 'uvf-credits-buttons';
         this.buttonsContainer.setAttribute('role', 'group');
         this.buttonsContainer.setAttribute('aria-label', 'Credits navigation');
 
-        // Apply container styles
-        Object.assign(this.buttonsContainer.style, {
+        // Apply container styles based on layout and position
+        const containerStyles: Partial<CSSStyleDeclaration> = {
             position: 'absolute',
-            bottom: '100px',
-            right: '30px',
             display: 'flex',
-            flexDirection: 'column',
+            flexDirection: layout === 'horizontal' ? 'row' : 'column',
             gap: '10px',
             zIndex: '1000',
             opacity: '0',
             transition: 'opacity 0.3s ease-in-out'
-        });
+        };
+
+        // Position the container
+        this.applyContainerPosition(containerStyles, position);
+        Object.assign(this.buttonsContainer.style, containerStyles);
 
         // Create "Watch Credits" button
         this.watchCreditsButton = document.createElement('button');
@@ -166,9 +172,9 @@ export class CreditsButtonController {
         // Add click handler for Next Episode
         this.nextEpisodeButton.addEventListener('click', () => this.handleNextEpisodeClick());
 
-        // Apply button styles
-        this.applyButtonStyles(this.watchCreditsButton, 'watch-credits');
-        this.applyButtonStyles(this.nextEpisodeButton, 'next-episode');
+        // Apply button styles with custom colors
+        this.applyButtonStyles(this.watchCreditsButton, 'watch-credits', style);
+        this.applyButtonStyles(this.nextEpisodeButton, 'next-episode', style);
 
         // Append buttons to container
         this.buttonsContainer.appendChild(this.watchCreditsButton);
@@ -178,10 +184,36 @@ export class CreditsButtonController {
         this.playerContainer.appendChild(this.buttonsContainer);
     }
 
+    /**
+     * Apply position styles to container
+     */
+    private applyContainerPosition(styles: Partial<CSSStyleDeclaration>, position: string): void {
+        switch (position) {
+            case 'bottom-right':
+                Object.assign(styles, { bottom: '100px', right: '30px' });
+                break;
+            case 'bottom-left':
+                Object.assign(styles, { bottom: '100px', left: '30px' });
+                break;
+            case 'bottom-center':
+                Object.assign(styles, { bottom: '100px', left: '50%', transform: 'translateX(-50%)' });
+                break;
+            case 'top-right':
+                Object.assign(styles, { top: '30px', right: '30px' });
+                break;
+            case 'top-left':
+                Object.assign(styles, { top: '30px', left: '30px' });
+                break;
+            case 'top-center':
+                Object.assign(styles, { top: '30px', left: '50%', transform: 'translateX(-50%)' });
+                break;
+        }
+    }
+
     /**
      * Apply styles to buttons
      */
-    private applyButtonStyles(button: HTMLElement, type: 'watch-credits' | 'next-episode'): void {
+    private applyButtonStyles(button: HTMLElement, type: 'watch-credits' | 'next-episode', customStyle?: any): void {
         const baseStyles: Partial<CSSStyleDeclaration> = {
             padding: '12px 24px',
             fontSize: '14px',
@@ -198,14 +230,14 @@ export class CreditsButtonController {
 
         if (type === 'watch-credits') {
             Object.assign(baseStyles, {
-                backgroundColor: 'rgba(255, 255, 255, 0.15)',
-                color: '#ffffff',
-                border: '2px solid rgba(255, 255, 255, 0.3)'
+                backgroundColor: customStyle?.watchCreditsBgColor || 'rgba(255, 255, 255, 0.15)',
+                color: customStyle?.watchCreditsColor || '#ffffff',
+                border: `2px solid ${customStyle?.watchCreditsBgColor ? 'transparent' : 'rgba(255, 255, 255, 0.3)'}`
             });
         } else {
             Object.assign(baseStyles, {
-                backgroundColor: '#e50914',
-                color: '#ffffff',
+                backgroundColor: customStyle?.nextEpisodeBgColor || '#e50914',
+                color: customStyle?.nextEpisodeColor || '#ffffff',
                 boxShadow: '0 2px 8px rgba(229, 9, 20, 0.4)'
             });
         }
@@ -215,25 +247,43 @@ export class CreditsButtonController {
         // Add hover effect
         button.addEventListener('mouseenter', () => {
             if (type === 'watch-credits') {
-                button.style.backgroundColor = 'rgba(255, 255, 255, 0.25)';
-                button.style.borderColor = 'rgba(255, 255, 255, 0.5)';
+                button.style.backgroundColor = customStyle?.watchCreditsBgColor
+                    ? this.adjustBrightness(customStyle.watchCreditsBgColor, 20)
+                    : 'rgba(255, 255, 255, 0.25)';
             } else {
-                button.style.backgroundColor = '#f40612';
+                button.style.backgroundColor = customStyle?.nextEpisodeBgColor
+                    ? this.adjustBrightness(customStyle.nextEpisodeBgColor, 20)
+                    : '#f40612';
                 button.style.transform = 'scale(1.03)';
             }
         });
 
         button.addEventListener('mouseleave', () => {
             if (type === 'watch-credits') {
-                button.style.backgroundColor = 'rgba(255, 255, 255, 0.15)';
-                button.style.borderColor = 'rgba(255, 255, 255, 0.3)';
+                button.style.backgroundColor = customStyle?.watchCreditsBgColor || 'rgba(255, 255, 255, 0.15)';
             } else {
-                button.style.backgroundColor = '#e50914';
+                button.style.backgroundColor = customStyle?.nextEpisodeBgColor || '#e50914';
                 button.style.transform = 'scale(1)';
             }
         });
     }
 
+    /**
+     * Adjust color brightness for hover effects
+     */
+    private adjustBrightness(color: string, percent: number): string {
+        // Simple brightness adjustment - works for hex and rgb
+        const num = parseInt(color.replace('#', ''), 16);
+        const amt = Math.round(2.55 * percent);
+        const R = (num >> 16) + amt;
+        const G = (num >> 8 & 0x00FF) + amt;
+        const B = (num & 0x0000FF) + amt;
+        return '#' + (0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+            (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+            (B < 255 ? B < 1 ? 0 : B : 255))
+            .toString(16).slice(1);
+    }
+
     /**
      * Update button labels based on segment configuration
      */

package/packages/web/src/chapters/types/ChapterTypes.ts

@@ -48,6 +48,27 @@ export interface VideoSegment {
 
   /** Custom label for "Next Episode/Play Next" button */
   nextEpisodeLabel?: string;
+
+  /** Styling options for credits buttons */
+  creditsButtonStyle?: {
+    /** Layout direction: 'vertical' (default) or 'horizontal' */
+    layout?: 'vertical' | 'horizontal';
+
+    /** Watch Credits button color */
+    watchCreditsColor?: string;
+
+    /** Watch Credits button background color */
+    watchCreditsBgColor?: string;
+
+    /** Next Episode button color */
+    nextEpisodeColor?: string;
+
+    /** Next Episode button background color */
+    nextEpisodeBgColor?: string;
+
+    /** Button position */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'bottom-center' | 'top-center';
+  };
 }
 
 /**