Upcoming ad warning now stays on screen until the ad actually starts

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>

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)

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%;