diff --git a/now-playing/themes/classic/script.js b/now-playing/themes/classic/script.js
index 64b7fd6..2a5c385 100644
--- a/now-playing/themes/classic/script.js
+++ b/now-playing/themes/classic/script.js
@@ -84,13 +84,19 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
+
+ // Set the pause overlay visibility based on playback status
+ if (playbackStatus === PlaybackStatus.PAUSED)
+ albumArtContainer.classList.add('is-paused');
+ else
+ albumArtContainer.classList.remove('is-paused');
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
diff --git a/now-playing/themes/classic/style.css b/now-playing/themes/classic/style.css
index 1223703..8880684 100644
--- a/now-playing/themes/classic/style.css
+++ b/now-playing/themes/classic/style.css
@@ -24,6 +24,37 @@
flex-shrink: 0;
}
+#album-art-container.is-paused #album-art-layer,
+#album-art-container.is-paused #album-art-transition-layer {
+ opacity: 0.7;
+ filter: grayscale(50%);
+}
+
+#pause-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ z-index: 10;
+ border-radius: inherit;
+}
+
+#pause-overlay svg {
+ height: 40%;
+ width: auto;
+}
+
+#album-art-container.is-paused #pause-overlay {
+ opacity: 1;
+}
+
#album-art-layer,
#album-art-transition-layer {
position: absolute;
diff --git a/now-playing/themes/color-palette/script.js b/now-playing/themes/color-palette/script.js
index bffb9b2..bb194e4 100644
--- a/now-playing/themes/color-palette/script.js
+++ b/now-playing/themes/color-palette/script.js
@@ -94,7 +94,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
const durationMs = timelineProps.EndTime;
let progressPercent = durationMs > 0 ? (currentPositionMs / durationMs) * 100 : 0;
diff --git a/now-playing/themes/compact/script.js b/now-playing/themes/compact/script.js
index 7945afb..337e363 100644
--- a/now-playing/themes/compact/script.js
+++ b/now-playing/themes/compact/script.js
@@ -97,7 +97,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
@@ -122,6 +122,12 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
// const transitionWidth = '1em';
// progressBar.style.maskImage = `linear-gradient(to right, black calc(${clipRight}% - ${transitionWidth}), transparent ${clipRight}%)`
// progressBarTrack.style.maskImage = `linear-gradient(to right, transparent calc(${clipRight}% - ${transitionWidth}), black ${clipRight}%)`;
+
+ // Set the pause overlay visibility based on playback status
+ if (playbackStatus === PlaybackStatus.PAUSED)
+ songInfoContainer.classList.add('is-paused');
+ else
+ songInfoContainer.classList.remove('is-paused');
}
// MARQUEE LOGIC
diff --git a/now-playing/themes/compact/style.css b/now-playing/themes/compact/style.css
index 31b651d..f5747ab 100644
--- a/now-playing/themes/compact/style.css
+++ b/now-playing/themes/compact/style.css
@@ -24,6 +24,10 @@
grid-template-areas: "stack";
}
+#song-info-container.is-paused {
+ opacity: 0.8;
+}
+
/* The content sits on top */
#progress-bar {
position: relative;
diff --git a/now-playing/themes/simple/index.html b/now-playing/themes/simple/index.html
index 5c200da..c810810 100644
--- a/now-playing/themes/simple/index.html
+++ b/now-playing/themes/simple/index.html
@@ -2,6 +2,11 @@
diff --git a/now-playing/themes/simple/script.js b/now-playing/themes/simple/script.js
index 5b85975..c775c49 100644
--- a/now-playing/themes/simple/script.js
+++ b/now-playing/themes/simple/script.js
@@ -78,13 +78,19 @@ async function ChangeTrack(mediaProps) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
+
+ // Set the pause overlay visibility based on playback status
+ if (playbackStatus === PlaybackStatus.PAUSED)
+ albumArtContainer.classList.add('is-paused');
+ else
+ albumArtContainer.classList.remove('is-paused');
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
@@ -95,12 +101,12 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
if (!useCustomColors)
{
- progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+ document.body.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
document.body.style.color = accentColorPalette.LightVibrant;
}
else
{
- progressBarFill.style.setProperty('--accent-color', color1);
+ document.body.style.setProperty('--accent-color', color1);
document.body.style.color = color1;
}
}
diff --git a/now-playing/themes/simple/style.css b/now-playing/themes/simple/style.css
index 283f1d7..b1c000e 100644
--- a/now-playing/themes/simple/style.css
+++ b/now-playing/themes/simple/style.css
@@ -23,6 +23,37 @@
flex-shrink: 0;
}
+#album-art-container.is-paused #album-art-layer,
+#album-art-container.is-paused #album-art-transition-layer {
+ opacity: 0.7;
+ filter: grayscale(50%);
+}
+
+#pause-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ z-index: 10;
+ border-radius: inherit;
+}
+
+#pause-overlay svg {
+ height: 40%;
+ width: auto;
+}
+
+#album-art-container.is-paused #pause-overlay {
+ opacity: 1;
+}
+
#album-art-layer,
#album-art-transition-layer {
position: absolute;
diff --git a/now-playing/themes/standard/index.html b/now-playing/themes/standard/index.html
index bd9b89c..c1ef9b2 100644
--- a/now-playing/themes/standard/index.html
+++ b/now-playing/themes/standard/index.html
@@ -6,6 +6,11 @@
diff --git a/now-playing/themes/standard/script.js b/now-playing/themes/standard/script.js
index 0ca049a..2be6e45 100644
--- a/now-playing/themes/standard/script.js
+++ b/now-playing/themes/standard/script.js
@@ -147,7 +147,7 @@ async function ChangeTrack(mediaProps, accentColorPalette) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Update the label using your naming convention
currentTimeLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(currentPositionMs);
@@ -155,6 +155,12 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
durationLabel.innerText =
ConvertMillisecondsToHoursMinutesSecondsSoItLooksBetterAndNotCringe(timelineProps.EndTime);
+ // Set the pause overlay visibility based on playback status
+ if (playbackStatus === PlaybackStatus.PAUSED)
+ albumArtContainer.classList.add('is-paused');
+ else
+ albumArtContainer.classList.remove('is-paused');
+
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
@@ -165,9 +171,11 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
if (!useCustomColors) {
switch (themeVariant) {
case "matte":
- progressBarFill.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
+ document.body.style.setProperty('--accent-color', accentColorPalette.DarkVibrant);
break;
case "matte-dark":
+ document.body.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
+ break;
default:
progressBarFill.style.setProperty('--accent-color', accentColorPalette.LightVibrant);
break;
@@ -177,11 +185,11 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
{
switch (themeVariant) {
case "matte":
- progressBarFill.style.setProperty('--accent-color', color2);
+ document.body.style.setProperty('--accent-color', color2);
break;
// case "matte-dark":
default:
- progressBarFill.style.setProperty('--accent-color', color1);
+ document.body.style.setProperty('--accent-color', color1);
break;
}
}
diff --git a/now-playing/themes/standard/style.css b/now-playing/themes/standard/style.css
index 90959e8..cfb32eb 100644
--- a/now-playing/themes/standard/style.css
+++ b/now-playing/themes/standard/style.css
@@ -25,6 +25,36 @@
flex-shrink: 0;
}
+#album-art-container.is-paused #album-art-layer,
+#album-art-container.is-paused #album-art-transition-layer {
+ opacity: 0.2;
+}
+
+#pause-overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: 0;
+ pointer-events: none;
+ transition: opacity 0.3s ease;
+ z-index: 10;
+ border-radius: inherit;
+}
+
+#pause-overlay svg {
+ height: 50%;
+ width: auto;
+}
+
+#album-art-container.is-paused #pause-overlay {
+ opacity: 1;
+}
+
#album-art-layer,
#album-art-transition-layer {
position: absolute;
diff --git a/now-playing/themes/vinyl/script.js b/now-playing/themes/vinyl/script.js
index c4d2d48..8171fcb 100644
--- a/now-playing/themes/vinyl/script.js
+++ b/now-playing/themes/vinyl/script.js
@@ -8,6 +8,7 @@ const albumArtContainer = document.getElementById('album-art-container');
const albumArtLayer = document.getElementById('album-art-layer');
const albumArtTransition = document.getElementById('album-art-transition-layer');
const progressCircle = document.getElementById('progress-pie-circle');
+const vinylContainer = document.getElementById('vinyl-container');
///////////////
// CONSTANTS //
@@ -60,7 +61,7 @@ async function ChangeTrack(mediaProps) {
}, 250);
}
-function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
+function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette, playbackStatus) {
// Set progressbar
// Ensure we don't divide by zero or exceed 100%
const durationMs = timelineProps.EndTime;
@@ -75,4 +76,52 @@ function SetProgressInfo(timelineProps, currentPositionMs, accentColorPalette) {
// 0% progress = 157.1 offset. 100% progress = 0 offset.
const offset = circumference - (progressPercent / 100) * circumference;
progressCircle.style.strokeDashoffset = offset;
+
+ // Adjust 'Paused' check to match whatever string/value your backend sends
+ if (playbackStatus === PlaybackStatus.PAUSED)
+ setVinylPaused(true);
+ else
+ setVinylPaused(false);
+}
+
+const vinylAnimation = vinylContainer.animate(
+ [
+ { transform: "rotate(0deg)" },
+ { transform: "rotate(360deg)" }
+ ],
+ {
+ duration: 10000,
+ iterations: Infinity,
+ easing: "linear"
+ }
+);
+
+let animationFrame;
+
+function setVinylPaused(shouldPause) {
+ cancelAnimationFrame(animationFrame);
+
+ const from = vinylAnimation.playbackRate;
+ const to = shouldPause ? 0 : 1;
+ const duration = 700;
+ const start = performance.now();
+
+ vinylAnimation.play();
+
+ function update(now) {
+ const progress = Math.min((now - start) / duration, 1);
+
+ // Smooth acceleration/deceleration
+ const eased = progress * progress * (3 - 2 * progress);
+
+ vinylAnimation.playbackRate = from + (to - from) * eased;
+
+ if (progress < 1) {
+ animationFrame = requestAnimationFrame(update);
+ } else if (shouldPause) {
+ vinylAnimation.pause();
+ }
+ }
+
+ animationFrame = requestAnimationFrame(update);
}
\ No newline at end of file
diff --git a/now-playing/themes/vinyl/style.css b/now-playing/themes/vinyl/style.css
index cce72c6..991e3c1 100644
--- a/now-playing/themes/vinyl/style.css
+++ b/now-playing/themes/vinyl/style.css
@@ -16,7 +16,7 @@
justify-content: center;
width: 100%;
filter: drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.5));
- animation: spin 10s linear infinite;
+ transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
}
#vinyl-background {
@@ -91,7 +91,64 @@
transition: all 1s linear;
}
-@keyframes spin {
- from { transform: rotate(0deg); }
- to { transform: rotate(360deg); }
+
+
+@keyframes slide-in-from-top {
+ 0% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-in-from-top {
+ 0% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-out-top {
+ 0% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: translateY(-100%);
+ opacity: 0;
+ }
+}
+
+@keyframes slide-in-from-bottom {
+ 0% {
+ transform: translateY(100%);
+ opacity: 0;
+ }
+
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slide-out-bottom {
+ 0% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+
+ 100% {
+ transform: translateY(100%);
+ opacity: 0;
+ }
}
\ No newline at end of file
diff --git a/printer-bot/contents/script.js b/printer-bot/contents/script.js
index 5fa6563..b705cfb 100644
--- a/printer-bot/contents/script.js
+++ b/printer-bot/contents/script.js
@@ -51,7 +51,7 @@ async function CustomEvent(data) {
subtitleEl.innerText = `${data.user}`;
const messageEl = document.createElement('div');
- messageEl.innerHTML = data.message;
+ messageEl.innerHTML = SanitizeHTML(data.message);
// Render emotes
for (i in data.emotes) {
@@ -116,7 +116,7 @@ async function CustomEvent(data) {
const messageEl = document.createElement('div');
messageEl.innerHTML = `${data.cumulative} months${data.monthStreak > 1 ? ' (' + data.monthStreak + ' in a row!)' : ''}`;
if (data.messageStripped)
- messageEl.innerHTML += `
${data.messageStripped}`;
+ messageEl.innerHTML += `
${SanitizeHTML(data.messageStripped)}`;
contentEl.appendChild(messageEl);
@@ -196,7 +196,7 @@ async function CustomEvent(data) {
subtitleEl.innerText = `${data.user}`;
const messageEl = document.createElement('div');
- messageEl.innerHTML = data.rawInput;
+ messageEl.innerHTML = SanitizeHTML(data.rawInput);
// // Render emotes
// for (i in data.emotes) {
@@ -284,7 +284,7 @@ async function CustomEvent(data) {
const messageEl = document.createElement('div');
messageEl.innerHTML = `${data.user}
sent a Super Chat!`;
if (data.message)
- messageEl.innerHTML += `
${data.message}`;
+ messageEl.innerHTML += `
${SanitizeHTML(data.message)}`;
contentEl.appendChild(messageEl);
@@ -424,7 +424,7 @@ async function CustomEvent(data) {
if (data.tipMessage) {
const messageEl = document.createElement('div');
- messageEl.innerHTML = `${data.tipMessage}`;
+ messageEl.innerHTML = `${SanitizeHTML(data.tipMessage)}`;
contentEl.appendChild(messageEl);
}
@@ -448,7 +448,7 @@ async function CustomEvent(data) {
if (data.donationMessage) {
const messageEl = document.createElement('div');
- messageEl.innerHTML = `${data.donationMessage}`;
+ messageEl.innerHTML = `${SanitizeHTML(data.donationMessage)}`;
contentEl.appendChild(messageEl);
}
@@ -475,7 +475,7 @@ async function CustomEvent(data) {
if (data["fw.message"]) {
const messageEl = document.createElement('div');
- messageEl.innerHTML = `${data["fw.message"]}`;
+ messageEl.innerHTML = `${SanitizeHTML(data["fw.message"])}`;
contentEl.appendChild(messageEl);
}
@@ -537,7 +537,7 @@ async function CustomEvent(data) {
if (customMessage) {
const txt = document.createElement("textarea");
txt.innerHTML = customMessage;
- customMessageEl.innerHTML += `
${txt.value}`;
+ customMessageEl.innerHTML += `
${SanitizeHTML(txt.value)}`;
}
// Add a cute thank you message because you're uwu like that
diff --git a/twitch-ad-countdown-timer/script.js b/twitch-ad-countdown-timer/script.js
index 7d3b993..bae7b05 100644
--- a/twitch-ad-countdown-timer/script.js
+++ b/twitch-ad-countdown-timer/script.js
@@ -146,7 +146,7 @@ client.on('Twitch.UpcomingAd', (response) => {
/////////////////////
function TwitchAdRun(data) {
- const duration = data.length_seconds;
+ const duration = data.lengthSeconds ?? data.length_seconds;
// Unset the upcoming ad countdown warning
upcomingAdWarningStartDelay = null;
`;
let message = `${username} redeemed ${rewardName} ${channelPointIcon} ${cost}`;
@@ -1198,6 +1199,10 @@ function FourthwallOrderPlaced(data) {
const item = data.variants[0].name;
const itemsOrdered = data.variants.length;
+ // Skip free orders if the user has chosen to do so
+ if (skipFourthwallFreeOrders && orderTotal == 0)
+ return;
+
let message = "";
// If there user did not provide a username, just say "Someone"
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index 7ecd4b6..a99b145 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -379,6 +379,15 @@
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
+ {
+ "id": "skipFourthwallFreeOrders",
+ "label": "Skip Free Orders",
+ "description": "If enabled, free orders from Fourthwall will be skipped.",
+ "type": "checkbox",
+ "defaultValue": true,
+ "showIf": "showFourthwallAlerts",
+ "group": "Which donation messages do you want to see?"
+ },
{
"id": "furryMode",
"label": "Furry Mode",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index 374e95a..b731db9 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -82,6 +82,7 @@ const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
const showKofiDonations = GetBooleanParam("showKofiDonations", true);
const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true);
const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
+const skipFourthwallFreeOrders = GetBooleanParam("skipFourthwallFreeOrders", true);
const furryMode = GetBooleanParam("furryMode", false);
@@ -90,7 +91,7 @@ const furryMode = GetBooleanParam("furryMode", false);
////////////////////
const animationSpeed = GetIntParam("animationSpeed", 0.1);
-const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", false);
+const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", true);
const youtubeColor = urlParams.get("youtubeColor") || "#f70000";
const youtubeCustomSubIcon = urlParams.get("youtubeCustomSubIcon") || "";
let twitchUsername = urlParams.get("twitchUsername") || "";
@@ -1154,7 +1155,7 @@ async function TwitchRewardRedemption(data) {
if (showAvatar) {
// Render avatars
- const username = data.user_login;
+ const username = data.user_login ?? data.user.login;
const avatarURL = await GetAvatar(username, 'twitch');
const avatar = new Image();
avatar.src = avatarURL;
@@ -1163,12 +1164,12 @@ async function TwitchRewardRedemption(data) {
}
// Set the text
- let username = data.user_name;
- if (data.user_name.toLowerCase() != data.user_login.toLowerCase())
- username = `${data.user_name} (${data.user_login})`;
+ let username = data.user_name ?? data.user.name;
+ if (username.toLowerCase() != (data.user_login ?? data.user.login).toLowerCase())
+ username = `${username} (${data.user_login ?? data.user.login})`;
const rewardName = data.reward.title;
const cost = data.reward.cost;
- const userInput = data.user_input;
+ const userInput = data.user_input ?? data.userInput;
const channelPointIcon = `