unified-video-framework 1.4.356 → 1.4.358

package/packages/web/src/react/components/SkipButton.tsx

@@ -45,6 +45,12 @@ export interface SkipButtonProps {
   
   /** Auto-skip delay in seconds */
   autoSkipDelay?: number;
+
+  /** Secondary action label (e.g., "Watch Credits") */
+  secondaryLabel?: string;
+
+  /** Callback for secondary action */
+  onSecondaryAction?: (segment: VideoSegment) => void;
 }
 
 export const SkipButton: React.FC<SkipButtonProps> = ({
@@ -59,7 +65,9 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
   className = '',
   style = {},
   enableAutoSkip = false,
-  autoSkipDelay = 10
+  autoSkipDelay = 10,
+  secondaryLabel,
+  onSecondaryAction
 }) => {
   // State
   const [isVisible, setIsVisible] = useState(visible);
@@ -130,6 +138,33 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
     handleHide('user-action');
   };
 
+  /**
+   * Handle secondary button click
+   */
+  const handleSecondary = (e: React.MouseEvent) => {
+    e.stopPropagation(); // Prevent bubbling
+    if (!segment) return;
+    
+    // Stop auto-skip and countdown
+    clearTimeouts();
+    setIsAutoSkip(false);
+    setCountdown(null);
+
+    // Call callback
+    onSecondaryAction?.(segment);
+    
+    // We DON'T hide the button immediately for "Watch Credits", 
+    // we just stop the auto-skip countdown. User can still click "Next Episode" later.
+    // But typically "Watch Credits" implies dismissing the "Next Episode" urgency.
+    // If we want to hide it:
+    // handleHide('user-secondary-action');
+    
+    // For now, let's keep it visible but stop the countdown so they can click 'Next' later if they want,
+    // OR we can hide it if that's the desired UX. 
+    // Based on Netflix UX: "Watch Credits" usually minimizes the overlay. 
+    // Here we'll just stop the auto-skip.
+  };
+
   /**
    * Handle button show
    */
@@ -248,31 +283,54 @@ export const SkipButton: React.FC<SkipButtonProps> = ({
   }
 
   return (
-    <button
-      type="button"
-      className={buttonClasses}
-      style={defaultStyles}
-      onClick={handleSkip}
-      aria-label={`${buttonText} - ${segment.title || segment.type}`}
-    >
-      {displayText}
-      
-      {/* Progress bar for auto-skip countdown */}
-      {isAutoSkip && countdown !== null && (
-        <div 
-          className="uvf-skip-countdown-progress"
+    <div className={`uvf-skip-container ${positionClass} ${className}`} style={defaultStyles}>
+      {/* Secondary Button (Watch Credits) */}
+      {secondaryLabel && (
+        <button
+          type="button"
+          className="uvf-skip-button uvf-skip-secondary"
+          onClick={handleSecondary}
           style={{
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            height: '3px',
-            backgroundColor: 'currentColor',
-            width: `${((autoSkipDelay - countdown) / autoSkipDelay) * 100}%`,
-            transition: 'width 1s linear',
-            borderRadius: '0 0 6px 6px'
+            marginRight: '10px',
+            backgroundColor: 'rgba(0, 0, 0, 0.7)',
+            border: '1px solid rgba(255, 255, 255, 0.5)',
+            color: '#fff',
+            ...style
           }}
-        />
+        >
+          {secondaryLabel}
+        </button>
       )}
-    </button>
+
+      {/* Primary Button (Next Episode / Skip) */}
+      <button
+        type="button"
+        className={buttonClasses}
+        // style is applied to container now, but we keep button specific classes
+        // We need to adjust styles since we are wrapping in a div now
+        style={{ pointerEvents: 'auto' }}
+        onClick={handleSkip}
+        aria-label={`${buttonText} - ${segment.title || segment.type}`}
+      >
+        {displayText}
+        
+        {/* Progress bar for auto-skip countdown */}
+        {isAutoSkip && countdown !== null && (
+          <div 
+            className="uvf-skip-countdown-progress"
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              height: '3px',
+              backgroundColor: 'currentColor',
+              width: `${((autoSkipDelay - countdown) / autoSkipDelay) * 100}%`,
+              transition: 'width 1s linear',
+              borderRadius: '0 0 6px 6px'
+            }}
+          />
+        )}
+      </button>
+    </div>
   );
 };