diff --git a/.common/utils/helpers.js b/.common/utils/helpers.js
index 2014a42..a6925f5 100644
--- a/.common/utils/helpers.js
+++ b/.common/utils/helpers.js
@@ -202,17 +202,21 @@ function RenderKickEmotes(message) {
});
}
-function GetCurrentTimeFormatted() {
+function GetCurrentTimeFormatted(timeFormat = '12-hour') {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
- const ampm = hours >= 12 ? 'PM' : 'AM';
+ if (timeFormat === '24-hour') {
+ const paddedHours = String(hours).padStart(2, '0');
+ return `${paddedHours}:${minutes}`;
+ }
+
+ const ampm = hours >= 12 ? 'PM' : 'AM';
hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
- const formattedTime = `${hours}:${minutes} ${ampm}`;
- return formattedTime;
+ return `${hours}:${minutes} ${ampm}`;
}
function DecodeHTMLString(html) {
@@ -353,6 +357,8 @@ function ConstructMessageFromParts(parts) {
return emoteImg + bitLabel;
case "mention":
return part.text;
+ case "gif":
+ return `
`;
default:
return `
`;
}
diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js
index 23ef007..34967d1 100644
--- a/horizontal-chat/script.js
+++ b/horizontal-chat/script.js
@@ -26,6 +26,7 @@ let kickSubBadges = [];
const showPlatform = GetBooleanParam("showPlatform", true);
const showAvatar = GetBooleanParam("showAvatar", true);
const showTimestamps = GetBooleanParam("showTimestamps", false);
+const timeFormat = urlParams.get("timeFormat") || "12-hour";
const showBadges = GetBooleanParam("showBadges", true);
const showPronouns = GetBooleanParam("showPronouns", false);
const showUsername = GetBooleanParam("showUsername", true);
@@ -555,7 +556,7 @@ async function TwitchChatMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
@@ -706,8 +707,8 @@ async function TwitchSub(data) {
let username = data.user.name;
if (data.user.name.toLowerCase() != data.user.login.toLowerCase())
username = `${data.user.name} (${data.user.login})`;
- const subTier = data.sub_tier;
- const isPrime = data.is_prime;
+ const subTier = data.sub_tier ?? data.subTier;
+ const isPrime = data.is_prime ?? data.isPrime;
let message = '';
@@ -922,7 +923,7 @@ function YouTubeMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the message data
@@ -1350,7 +1351,7 @@ async function KickChatMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
@@ -1588,7 +1589,7 @@ async function TikTokChat(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json
index a99b145..eac218e 100644
--- a/horizontal-chat/settings/settings.json
+++ b/horizontal-chat/settings/settings.json
@@ -24,6 +24,25 @@
"defaultValue": false,
"group": "Appearance"
},
+ {
+ "id": "timeFormat",
+ "label": "Time Format",
+ "description": "",
+ "type": "select",
+ "showIf": "showTimestamps",
+ "options": [
+ {
+ "value": "12-hour",
+ "label": "12 Hour Time"
+ },
+ {
+ "value": "24-hour",
+ "label": "24 Hour Time"
+ }
+ ],
+ "defaultValue": "12-hour",
+ "group": "Appearance"
+ },
{
"id": "showBadges",
"label": "Show Badges",
diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js
index b731db9..5c989db 100644
--- a/multichat-overlay/script.js
+++ b/multichat-overlay/script.js
@@ -23,6 +23,7 @@ let kickSubBadges = [];
const showPlatform = GetBooleanParam("showPlatform", true);
const showAvatar = GetBooleanParam("showAvatar", true);
const showTimestamps = GetBooleanParam("showTimestamps", true);
+const timeFormat = urlParams.get("timeFormat") || "12-hour";
const showBadges = GetBooleanParam("showBadges", true);
const showPronouns = GetBooleanParam("showPronouns", true);
const showUsername = GetBooleanParam("showUsername", true);
@@ -654,7 +655,7 @@ async function TwitchChatMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
@@ -919,7 +920,7 @@ async function TwitchAnnouncement(data) {
// Set timestamp
if (showTimestamps) {
content.querySelector("#timestamp").classList.add("timestamp");
- content.querySelector("#timestamp").innerText = GetCurrentTimeFormatted();
+ content.querySelector("#timestamp").innerText = GetCurrentTimeFormatted(timeFormat);
}
if (data.user.name.toLowerCase() == data.user.login.toLowerCase())
content.querySelector("#username").innerText = data.user.name;
@@ -1026,8 +1027,8 @@ async function TwitchSub(data) {
let username = data.user.name;
if (data.user.name.toLowerCase() != data.user.login.toLowerCase())
username = `${data.user.name} (${data.user.login})`;
- const subTier = data.sub_tier;
- const isPrime = data.is_prime;
+ const subTier = data.sub_tier ?? data.subTier;
+ const isPrime = data.is_prime ?? data.isPrime;
if (!isPrime)
titleDiv.innerText = `${username} subscribed with Tier ${subTier.charAt(0)}`;
@@ -1412,7 +1413,7 @@ async function YouTubeMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the message data
@@ -2397,7 +2398,7 @@ async function KickChatMessage(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
@@ -2880,7 +2881,7 @@ async function TikTokChat(data) {
// Set timestamp
if (showTimestamps) {
timestampDiv.classList.add("timestamp");
- timestampDiv.innerText = GetCurrentTimeFormatted();
+ timestampDiv.innerText = GetCurrentTimeFormatted(timeFormat);
}
// Set the username info
diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json
index fee2d12..8445c9d 100644
--- a/multichat-overlay/settings/settings.json
+++ b/multichat-overlay/settings/settings.json
@@ -24,6 +24,25 @@
"defaultValue": true,
"group": "Appearance"
},
+ {
+ "id": "timeFormat",
+ "label": "Time Format",
+ "description": "",
+ "type": "select",
+ "showIf": "showTimestamps",
+ "options": [
+ {
+ "value": "12-hour",
+ "label": "12 Hour Time"
+ },
+ {
+ "value": "24-hour",
+ "label": "24 Hour Time"
+ }
+ ],
+ "defaultValue": "12-hour",
+ "group": "Appearance"
+ },
{
"id": "showBadges",
"label": "Show Badges",
diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css
index b391103..7b3ed0c 100644
--- a/multichat-overlay/style.css
+++ b/multichat-overlay/style.css
@@ -169,6 +169,11 @@ li {
transform: translate(0px, 0.4em);
}
+.gif {
+ width: auto;
+ padding: 20px 0px;
+}
+
.productImage {
height: 3em;
border-radius: 0.25em;
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js
index 7638a4a..b25d9f0 100644
--- a/multistream-alerts/script.js
+++ b/multistream-alerts/script.js
@@ -542,8 +542,8 @@ async function TwitchSub(data) {
// Set the text
const username = data.user.name;
- const subTier = data.sub_tier;
- const isPrime = data.is_prime;
+ const subTier = data.sub_tier ?? data.subTier;
+ const isPrime = data.is_prime ?? data.isPrime;
// Render avatars
const avatarURL = await GetAvatar(username, 'twitch');