From 92295463cd594b388f938c180ae1fd95d0882c10 Mon Sep 17 00:00:00 2001
From: nuttylmao <nuttylmao@gmail.com>
Date: Thu, 5 Jun 2025 07:23:08 +1000
Subject: [PATCH] Upcoming ad warning now stays on screen until the ad actually
 starts

---
 twitch-ad-countdown-timer/index.html | 2 +-
 twitch-ad-countdown-timer/script.js  | 9 ++++++---
 twitch-ad-countdown-timer/style.css  | 2 +-
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/twitch-ad-countdown-timer/index.html b/twitch-ad-countdown-timer/index.html
index e3e8d75..f6b6cb2 100644
--- a/twitch-ad-countdown-timer/index.html
+++ b/twitch-ad-countdown-timer/index.html
@@ -19,7 +19,7 @@
 			<span id="time-remaining-label">1:20</span>
 		</div>
 		<div id="upcoming-ad-warning-container">
-			<div>Ads starting in...</div>
+			<div>Ads starting</div>
 			<div id="countdown-label">69</div>
 		</div>
 	</div>
diff --git a/twitch-ad-countdown-timer/script.js b/twitch-ad-countdown-timer/script.js
index 6cd3d2e..f7a8484 100644
--- a/twitch-ad-countdown-timer/script.js
+++ b/twitch-ad-countdown-timer/script.js
@@ -174,6 +174,10 @@ function TimerBarAnimation(duration) {
 
 	timerBarLocked = true;
 
+	// Slide the warning off screen
+	let width = upcomingAdWarningContainer.getBoundingClientRect().width;
+	upcomingAdWarningContainer.style.right = -width + "px";
+
 	// If the bar is top/bottom, animate horizontally
 	// If the bar is left/right, animate vertically
 	switch (barPosition) {
@@ -263,9 +267,8 @@ function UpcomingAdWarning(warningSeconds) {
 
 	upcomingAdWarningLocked = true;
 
-	let width = upcomingAdWarningContainer.getBoundingClientRect().width;
-
 	// Set the starting position of the countdown box
+	let width = upcomingAdWarningContainer.getBoundingClientRect().width;
 	upcomingAdWarningContainer.style.right = -width + "px";
 	countdownLabel.innerHTML = formatTime(warningSeconds);
 
@@ -280,7 +283,7 @@ function UpcomingAdWarning(warningSeconds) {
 		countdownLabel.innerText = formatTime(startingTime);
 		if (startingTime == 0) {
 			clearInterval(timerThingy);
-			upcomingAdWarningContainer.style.right = -width + "px";
+			countdownLabel.innerText = 'NOW!';
 			return;
 		}
 	}, 1000)
diff --git a/twitch-ad-countdown-timer/style.css b/twitch-ad-countdown-timer/style.css
index b42d350..6033fd4 100644
--- a/twitch-ad-countdown-timer/style.css
+++ b/twitch-ad-countdown-timer/style.css
@@ -71,7 +71,7 @@ html {
 	background-color: #000000CC;
 	color: #FFFFFF;
 	padding: 10px 20px;
-	border-radius: 10px;
+	border-radius: 10px 0px 0px 10px;
 	display: table-cell;
 	position: absolute;
 	bottom: 15%;