Add close button to AutoplayCountdownOverlay

Introduces a close button to the autoplay countdown overlay for improved user control. Updates CSS for button styling and responsive behavior, and adds event handling in JS to allow users to cancel autoplay via the new button.

frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css

@@ -5,7 +5,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background: rgba(0, 0, 0, 0.7);
+    background: rgba(0, 0, 0, 0.85);
     display: none;
     flex-direction: column;
     justify-content: center;
@@ -17,6 +17,35 @@
     transition: opacity 0.2s ease-out;
 }
 
+.autoplay-close-button {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: white;
+    transition: all 0.2s ease;
+    padding: 0;
+    z-index: 10;
+}
+
+.autoplay-close-button:hover {
+    background: rgba(255, 255, 255, 0.2);
+    border-color: rgba(255, 255, 255, 0.5);
+    transform: scale(1.1);
+}
+
+.autoplay-close-button:active {
+    transform: scale(0.95);
+}
+
 .vjs-autoplay-countdown-overlay.autoplay-countdown-show {
     opacity: 1;
 }
@@ -110,6 +139,7 @@
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-top: 4px;
+    display: inline-block;
 }
 
 .autoplay-cancel-button:hover {
@@ -119,8 +149,32 @@
     transform: translateY(-1px);
 }
 
+/* Desktop - Both buttons visible */
+@media (min-width: 768px) {
+    .autoplay-close-button {
+        display: flex !important;
+    }
+    
+    .autoplay-cancel-button {
+        display: inline-block !important;
+    }
+}
+
 /* Mobile Responsive */
 @media (max-width: 767px) {
+    .autoplay-close-button {
+        display: flex !important;
+        top: 12px;
+        right: 12px;
+        width: 36px;
+        height: 36px;
+    }
+
+    .autoplay-close-button svg {
+        width: 20px;
+        height: 20px;
+    }
+
     .autoplay-countdown-content {
         gap: 8px;
         max-width: 280px;
@@ -151,13 +205,24 @@
     }
 
     .autoplay-cancel-button {
-        padding: 8px 20px;
+        display: none;
-        font-size: 12px;
-        margin-top: 4px;
     }
 }
 
 @media (max-width: 480px) {
+    .autoplay-close-button {
+        display: flex !important;
+        top: 10px;
+        right: 10px;
+        width: 32px;
+        height: 32px;
+    }
+
+    .autoplay-close-button svg {
+        width: 18px;
+        height: 18px;
+    }
+
     .autoplay-countdown-content {
         gap: 6px;
         max-width: 260px;
@@ -188,8 +253,6 @@
     }
 
     .autoplay-cancel-button {
-        padding: 6px 16px;
+        display: none;
-        font-size: 11px;
-        margin-top: 2px;
     }
 }

frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js

@@ -34,6 +34,12 @@ class AutoplayCountdownOverlay extends Component {
         const nextVideoTitle = this.nextVideoData?.title || 'Next Video';
 
         overlay.innerHTML = `
+            <button class="autoplay-close-button" aria-label="Cancel autoplay" title="Cancel">
+                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <line x1="18" y1="6" x2="6" y2="18"></line>
+                    <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+            </button>
             <div class="autoplay-countdown-content">
                 <div class="countdown-label">Up Next</div>
                 
@@ -61,6 +67,7 @@ class AutoplayCountdownOverlay extends Component {
         // Add event listeners with explicit binding
         const circularCountdown = overlay.querySelector('.circular-countdown');
         const cancelButton = overlay.querySelector('.autoplay-cancel-button');
+        const closeButton = overlay.querySelector('.autoplay-close-button');
 
         if (circularCountdown) {
             circularCountdown.addEventListener('click', (e) => {
@@ -76,6 +83,13 @@ class AutoplayCountdownOverlay extends Component {
             });
         }
 
+        if (closeButton) {
+            closeButton.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.handleCancel();
+            });
+        }
+
         // Initially hide the overlay
         overlay.style.display = 'none';