From 8f872951e4c86927236371cbf647c0d7445ad887 Mon Sep 17 00:00:00 2001
From: Yiannis Christodoulou <yiannis@web357.com>
Date: Thu, 2 Oct 2025 12:00:46 +0300
Subject: [PATCH] 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.
---
 .../overlays/AutoplayCountdownOverlay.css     | 77 +++++++++++++++++--
 .../overlays/AutoplayCountdownOverlay.js      | 14 ++++
 2 files changed, 84 insertions(+), 7 deletions(-)

diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
index 07c6071f..350f1ccd 100644
--- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.css
+++ b/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;
-        font-size: 12px;
-        margin-top: 4px;
+        display: none;
     }
 }
 
 @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;
-        font-size: 11px;
-        margin-top: 2px;
+        display: none;
     }
 }
diff --git a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js b/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js
index feb9c40a..bd7fd70a 100644
--- a/frontend-tools/video-js/src/components/overlays/AutoplayCountdownOverlay.js
+++ b/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';