Merge pull request #35 from nuttylmao/beta

Beta

.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 `${hours}:${minutes} ${ampm}`;
-    return formattedTime;
 }
 
 function DecodeHTMLString(html) {
@@ -353,6 +357,8 @@ function ConstructMessageFromParts(parts) {
                 return emoteImg + bitLabel;
             case "mention":
                 return part.text;
+            case "gif":
+                return `<img src="${EscapeHTML(part.url)}" class="gif">`;
             default:
                 return `<img src="${EscapeHTML(part.imageUrl)}" alt="${EscapeHTML(part.text)}" title="${EscapeHTML(part.text)}" class="emote">`;
         }

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 subTier = data.sub_tier ?? data.subTier;
-	const isPrime = data.is_prime;
+	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

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",

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 subTier = data.sub_tier ?? data.subTier;
-	const isPrime = data.is_prime;
+	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

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",

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;

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 subTier = data.sub_tier ?? data.subTier;
-	const isPrime = data.is_prime;
+	const isPrime = data.is_prime ?? data.isPrime;
 
 	// Render avatars
 	const avatarURL = await GetAvatar(username, 'twitch');