Merge pull request #15 from nuttylmao/beta

Beta
This commit is contained in:
nuttylmao
2025-09-30 12:24:30 +10:00
committed by GitHub
49 changed files with 772 additions and 717 deletions
@@ -12,7 +12,7 @@
<body>
<!-- Header -->
<div id="header">
<img src="../../.resources/logo.png" style="height: 40px;" />
<img src="../../resources/logo.png" style="height: 40px;" />
<button id="membershipsButton" onclick="OpenMembershipPage()">Check out my member exclusive widgets!</button>
<div id="widgetUrlInputWrapper">
<span id="urlLabel">Click to copy URL</span>
@@ -64,4 +64,5 @@
</html>
<script src="../../../.common/utils/helpers.js"></script>
<script src="script.js"></script>
@@ -460,45 +460,6 @@ function OpenLoadSettingsPopup() {
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
console.log(paramValue);
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
// Handle first window interaction
window.addEventListener('message', (event) => {
if (event.origin === new URL(widgetPreview.src).origin && event.data === 'iframe-interacted') {
+242
View File
@@ -0,0 +1,242 @@
//////////////////////
// GLOBAL VARIABLES //
//////////////////////
const avatarMap = new Map();
const pronounMap = new Map();
//////////////////////
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
async function GetKickIds(username) {
// First attempt with the original username
let url = `https://kick.com/api/v2/channels/${username}`;
try {
let response = await fetch(url);
if (!response.ok) {
// Retry with underscores replaced by dashes
const altUsername = username.replace(/_/g, "-");
url = `https://kick.com/api/v2/channels/${altUsername}`;
response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
}
const data = await response.json();
if (data.chatroom && data.chatroom.id) {
return { chatroomId: data.chatroom.id, channelId: data.chatroom.channel_id };
} else {
throw new Error("Chatroom ID not found in response.");
}
} catch (error) {
console.error("Failed to fetch chatroom ID:", error.message);
return null;
}
}
async function GetKickSubBadges(username) {
let url = `https://kick.com/api/v2/channels/${username}`;
try {
let response = await fetch(url);
if (!response.ok) {
// Retry with underscores replaced by dashes
const altUsername = username.replace(/_/g, "-");
url = `https://kick.com/api/v2/channels/${altUsername}`;
response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
}
const data = await response.json();
return data.subscriber_badges || [];
} catch (error) {
console.error("Failed to fetch subscriber badges:", error.message);
return [];
}
}
async function GetAvatar(username, platform) {
// First, check if the username is hashed already
if (avatarMap.has(`${username}-${platform}`)) {
console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`);
return avatarMap.get(`${username}-${platform}`);
}
// If code reaches this point, the username hasn't been hashed, so retrieve avatar
switch (platform) {
case 'twitch': {
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`);
let response = await fetch('https://decapi.me/twitch/avatar/' + username);
let data = await response.text();
avatarMap.set(`${username}-${platform}`, data);
return data;
}
case 'kick': {
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`);
let url = `https://kick.com/api/v2/channels/${username}`;
try {
let response = await fetch(url);
if (!response.ok) {
// Retry with underscores replaced by dashes
const altUsername = username.replace(/_/g, "-");
url = `https://kick.com/api/v2/channels/${altUsername}`;
response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
}
let data = await response.json();
let avatarURL = data.user?.profile_pic || 'https://kick.com/img/default-profile-pictures/default2.jpeg';
avatarMap.set(`${username}-${platform}`, avatarURL);
return avatarURL;
} catch (error) {
console.error("Failed to fetch avatar:", error.message);
return 'https://kick.com/img/default-profile-pictures/default2.jpeg';
}
}
}
}
async function GetPronouns(platform, username) {
if (pronounMap.has(username)) {
console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
return pronounMap.get(username);
}
else {
console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
const response = await client.getUserPronouns(platform, username);
const userFound = response.pronoun.userFound;
const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
pronounMap.set(username, pronouns);
return pronouns;
}
}
function GetCurrentTimeFormatted() {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
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;
}
function DecodeHTMLString(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
function TranslateToFurry(sentence) {
const words = sentence.toLowerCase().split(/\b/);
const furryWords = words.map(word => {
if (/\w+/.test(word)) {
let newWord = word;
// Common substitutions
newWord = newWord.replace(/l/g, 'w');
newWord = newWord.replace(/r/g, 'w');
newWord = newWord.replace(/th/g, 'f');
newWord = newWord.replace(/you/g, 'yous');
newWord = newWord.replace(/my/g, 'mah');
newWord = newWord.replace(/me/g, 'meh');
newWord = newWord.replace(/am/g, 'am');
newWord = newWord.replace(/is/g, 'is');
newWord = newWord.replace(/are/g, 'are');
newWord = newWord.replace(/very/g, 'vewy');
newWord = newWord.replace(/pretty/g, 'pwetty');
newWord = newWord.replace(/little/g, 'wittle');
newWord = newWord.replace(/nice/g, 'nyce');
// Random additions
if (Math.random() < 0.15) {
newWord += ' nya~';
} else if (Math.random() < 0.1) {
newWord += ' >w<';
} else if (Math.random() < 0.05) {
newWord += ' owo';
}
return newWord;
}
return word;
});
return furryWords.join('');
}
function EscapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
// Given a string, return a random hex code. The same input always results in the same output
function StringToHex(str) {
// Simple hash function to convert string to a number
let hash = 0;
for (let i = 0; i < str.length; i++) {
hash = str.charCodeAt(i) + ((hash << 5) - hash);
hash |= 0; // Convert to 32bit integer
}
// Convert hash to a hex color
let color = '#';
for (let i = 0; i < 3; i++) {
// Extract each byte and convert to 2-digit hex
const value = (hash >> (i * 8)) & 0xFF;
color += value.toString(16).padStart(2, '0');
}
return color;
}
Binary file not shown.

Before

Width:  |  Height:  |  Size: 207 KiB

+1 -1
View File
@@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../.common/styles/global.css" />
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
#dock-wrapper {
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

+1
View File
@@ -38,4 +38,5 @@
</template>
</body>
<script src="../.common/utils/helpers.js"></script>
<script src="./script.js"></script>
+64 -180
View File
@@ -8,8 +8,6 @@ const urlParams = new URLSearchParams(queryString);
const sbServerAddress = urlParams.get("address") || "127.0.0.1";
const sbServerPort = urlParams.get("port") || "8080";
const minimumRole = 2; // 1 - Viewer, 2 - VIP, 3 - Moderator, 4 - Broadcaster
const avatarMap = new Map();
const pronounMap = new Map();
const animationDuration = 8000;
let widgetLocked = false; // Needed to lock animation from overlapping
let alertQueue = [];
@@ -21,8 +19,6 @@ let alertQueue = [];
const kickPusherWsUrl = 'wss://ws-us2.pusher.com/app/32cbd69e4b950bf97679?protocol=7&client=js&version=7.6.0&flash=false';
let kickSubBadges = [];
/////////////
// OPTIONS //
/////////////
@@ -52,12 +48,13 @@ const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPoin
const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
const showTwitchSharedChat = GetBooleanParam("showTwitchSharedChat", true);
let kickUsername = urlParams.get("kickUsername") || "";
const kickUsername = urlParams.get("kickUsername") || "";
const showKickMessages = GetBooleanParam("showKickMessages", true);
// const showKickFollows = GetBooleanParam("showKickFollows", false);
const showKickSubs = GetBooleanParam("showKickSubs", true);
const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
const showKickHosts = GetBooleanParam("showKickHosts", true);
const showKickGifts = GetBooleanParam("showKickGifts", true);
const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -79,10 +76,20 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
const furryMode = GetBooleanParam("furryMode", false);
const animationSpeed = GetIntParam("animationSpeed", 0.5);
////////////////////
// HIDDEN OPTIONS //
////////////////////
// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
kickUsername = kickUsername.replace(/_/g, "-");
const animationSpeed = GetIntParam("animationSpeed", 0.5);
const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", false);
const youtubeColor = urlParams.get("youtubeColor") || "#f70000";
const youtubeCustomSubIcon = urlParams.get("youtubeCustomSubIcon") || "";
////////////////
// PAGE SETUP //
////////////////
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -301,7 +308,9 @@ async function KickConnect() {
return;
// Channel to subscribe to (you'll need the correct channel name here)
const chatroomId = await GetKickChatroomId(kickUsername);
const kickIds = await GetKickIds(kickUsername);
const chatroomId = kickIds.chatroomId;
const channelId = kickIds.channelId;
// Cache subscriber badges
kickSubBadges = await GetKickSubBadges(kickUsername);
@@ -334,6 +343,7 @@ async function KickConnect() {
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
}
@@ -365,6 +375,9 @@ async function KickConnect() {
case 'UserBannedEvent':
KickUserBanned(eventArgs);
break;
case 'KicksGifted':
KickKicksGifted(eventArgs);
break;
}
}
catch (error) {
@@ -504,6 +517,7 @@ async function TwitchChatMessage(data) {
// Set the message data
let message = data.message.message;
const messageColor = data.message.color;
const role = data.message.role;
// Set furry mode
if (furryMode)
@@ -578,6 +592,17 @@ async function TwitchChatMessage(data) {
avatarDiv.appendChild(avatar);
}
// Custom styling for subs
if (data.message.subscriber) {
usernameDiv.classList.add('sub-glow')
}
// Custom styling for mods
// 3 = Moderator
if (role == 3) {
usernameDiv.classList.add('moderator-glow')
}
// Hide the header if the same username sends a message twice in a row
const messageList = document.getElementById("messageList");
if (groupConsecutiveMessages && messageList.children.length > 0) {
@@ -852,7 +877,10 @@ function YouTubeMessage(data) {
// Set the message data
if (showUsername) {
usernameDiv.innerText = data.user.name;
usernameDiv.style.color = "#f70000"; // YouTube users do not have colors, so just set it to red
if (randomYouTubeColors)
usernameDiv.style.color = StringToHex(data.user.name);
else
usernameDiv.style.color = youtubeColor; // YouTube users do not have colors, so just set it to red
}
if (showMessage) {
@@ -890,6 +918,9 @@ function YouTubeMessage(data) {
if (data.user.isSponsor && showBadges) {
const badge = new Image();
if (youtubeCustomSubIcon)
badge.src = youtubeCustomSubIcon;
else
badge.src = `icons/badges/youtube-member.svg`;
badge.style.filter = `invert(100%)`;
badge.style.opacity = 0.8;
@@ -920,6 +951,17 @@ function YouTubeMessage(data) {
avatarDiv.appendChild(avatar);
}
// Custom styling for subs
if (data.user.isSponsor) {
usernameDiv.classList.add('sub-glow')
}
// Custom styling for mods
// 3 = Moderator
if (data.user.isModerator) {
usernameDiv.classList.add('moderator-glow')
}
// Hide the header if the same username sends a message twice in a row
const messageList = document.getElementById("messageList");
if (groupConsecutiveMessages && messageList.children.length > 0) {
@@ -1425,6 +1467,18 @@ function KickUserBanned(data) {
});
}
function KickKicksGifted(data) {
if (!showKickGifts)
return;
const kicksImg = `<img src=icons/badges/kick-kicks.svg class="platform"/>`;
const giftImg = `<img src=https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp class="platform"/>`;
const message = ` ${giftImg} ${data.sender.username} sent ${data.gift.name} ${kicksImg} ${data.gift.amount}`;
ShowAlert(message, 'kick');
}
async function TikTokChat(data) {
if (!showTikTokMessages)
return;
@@ -1572,105 +1626,6 @@ function TikTokSubscribe(data) {
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
function GetCurrentTimeFormatted() {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
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;
}
async function GetAvatar(username, platform) {
// First, check if the username is hashed already
if (avatarMap.has(`${username}-${platform}`)) {
console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
return avatarMap.get(`${username}-${platform}`);
}
// If code reaches this point, the username hasn't been hashed, so retrieve avatar
switch (platform) {
case 'twitch':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
let response = await fetch('https://decapi.me/twitch/avatar/' + username);
let data = await response.text();
avatarMap.set(`${username}-${platform}`, data);
return data;
}
case 'kick':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
let response = await fetch('https://kick.com/api/v2/channels/' + username);
console.log('https://kick.com/api/v2/channels/' + username)
let data = await response.json();
let avatarURL = data.user.profile_pic;
if (!avatarURL)
avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
avatarMap.set(`${username}-${platform}`, avatarURL);
return avatarURL;
}
}
}
async function GetPronouns(platform, username) {
if (pronounMap.has(username)) {
console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
return pronounMap.get(username);
}
else {
console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
const response = await client.getUserPronouns(platform, username);
const userFound = response.pronoun.userFound;
const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
pronounMap.set(username, pronouns);
return pronouns;
}
}
function AddMessageItem(element, elementID, platform, userId) {
// Calculate the height of the div before inserting
const tempDiv = document.getElementById('IPutThisHereSoICanCalculateHowBigEachMessageIsSupposedToBeBeforeIAddItToTheMessageList');
@@ -1820,77 +1775,6 @@ function GetWinnersList(gifts) {
}
}
function TranslateToFurry(sentence) {
const words = sentence.toLowerCase().split(/\b/);
const furryWords = words.map(word => {
if (/\w+/.test(word)) {
let newWord = word;
// Common substitutions
newWord = newWord.replace(/l/g, 'w');
newWord = newWord.replace(/r/g, 'w');
newWord = newWord.replace(/th/g, 'f');
newWord = newWord.replace(/you/g, 'yous');
newWord = newWord.replace(/my/g, 'mah');
newWord = newWord.replace(/me/g, 'meh');
newWord = newWord.replace(/am/g, 'am');
newWord = newWord.replace(/is/g, 'is');
newWord = newWord.replace(/are/g, 'are');
newWord = newWord.replace(/very/g, 'vewy');
newWord = newWord.replace(/pretty/g, 'pwetty');
newWord = newWord.replace(/little/g, 'wittle');
newWord = newWord.replace(/nice/g, 'nyce');
// Random additions
if (Math.random() < 0.15) {
newWord += ' nya~';
} else if (Math.random() < 0.1) {
newWord += ' >w<';
} else if (Math.random() < 0.05) {
newWord += ' owo';
}
return newWord;
}
return word;
});
return furryWords.join('');
}
function EscapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
async function GetKickChatroomId(username) {
const url = `https://kick.com/api/v2/channels/${username}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
if (data.chatroom && data.chatroom.id) {
return data.chatroom.id;
} else {
throw new Error("Chatroom ID not found in response.");
}
} catch (error) {
console.error("Failed to fetch chatroom ID:", error.message);
return null;
}
}
async function GetKickSubBadges(username) {
const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
const data = await response.json();
return data.subscriber_badges || [];
}
function GetKickBadgeURL(data) {
switch (data.type) {
case 'subscriber':
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+8
View File
@@ -255,6 +255,14 @@
"defaultValue": true,
"group": "Which Kick messages do you want to see?"
},
{
"id": "showKickGifts",
"label": "Gifts",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Kick messages do you want to see?"
},
{
"id": "enableTikTokSupport",
"label": "Enable TikTok Support",
+6 -2
View File
@@ -2,7 +2,7 @@
margin: 0;
padding: 0;
--margin: 0px;
--border-radius: 20px;
--border-radius: 0.5em;
}
body {
@@ -76,6 +76,10 @@ html {
/* background-color: red; */
}
#alertBoxContent img {
height: 1.2em;
}
#background {
position: absolute;
bottom: 0;
@@ -110,7 +114,7 @@ html {
li {
list-style: none;
overflow: hidden;
/* overflow: hidden; */
max-width: 0px;
transition: all 1s ease-in-out;
}
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

+23 -1
View File
@@ -66,7 +66,7 @@
</template>
<template id="tiktok-gift-template">
<div class="tiktok-gift">
<div class="tiktok-gift tiktok">
<img class="tiktok-gift-avatar"
src="https://static-cdn.jtvnw.net/jtv_user_pictures/f632e0c6-38e2-4065-a29e-6ba9b3e8cacf-profile_image-300x300.png" />
<div class="tiktok-gift-message">
@@ -84,6 +84,28 @@
</div>
</div>
</template>
<template id="kick-gift-template">
<div class="kick-gift kick">
<img class="kick-gift-avatar"
src="" />
<div class="kick-gift-contents">
<span id="kick-gift-username" style="font-weight: 700;">
</span>
<br>
<div style="display: flex; flex-direction: row; align-items: center;">
<span>sent <span id="kick-gift-name"></span></span>
<img src="icons/badges/kick-kicks.svg" style="height: 1em; padding-left: 0.5em; padding-right: 0.25em;">
<span id="kick-gift-amount">13</span>
</div>
<div id="kick-gift-message">
</div>
</div>
<img class="kick-gift-sticker"
src="" />
</div>
</template>
</body>
<script src="../.common/utils/helpers.js"></script>
<script src="./script.js"></script>
+112 -199
View File
@@ -7,8 +7,6 @@ const urlParams = new URLSearchParams(queryString);
const sbServerAddress = urlParams.get("address") || "127.0.0.1";
const sbServerPort = urlParams.get("port") || "8080";
const avatarMap = new Map();
const pronounMap = new Map();
/////////////////
// GLOBAL VARS //
@@ -55,12 +53,13 @@ const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPoin
const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2);
let kickUsername = urlParams.get("kickUsername") || "";
const kickUsername = urlParams.get("kickUsername") || "";
const showKickMessages = GetBooleanParam("showKickMessages", true);
// const showKickFollows = GetBooleanParam("showKickFollows", false);
const showKickSubs = GetBooleanParam("showKickSubs", true);
const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
const showKickHosts = GetBooleanParam("showKickHosts", true);
const showKickGifts = GetBooleanParam("showKickGifts", true);
const showYouTubeMessages = GetBooleanParam("showYouTubeMessages", true);
const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -83,10 +82,20 @@ const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true);
const furryMode = GetBooleanParam("furryMode", false);
const animationSpeed = GetIntParam("animationSpeed", 0.1);
////////////////////
// HIDDEN OPTIONS //
////////////////////
// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
kickUsername = kickUsername.replace(/_/g, "-");
const animationSpeed = GetIntParam("animationSpeed", 0.1);
const randomYouTubeColors = GetBooleanParam("randomYouTubeColors", false);
const youtubeColor = urlParams.get("youtubeColor") || "#f70000";
const youtubeCustomSubIcon = urlParams.get("youtubeCustomSubIcon") || "";
////////////////
// PAGE SETUP //
////////////////
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -121,7 +130,6 @@ document.documentElement.style.setProperty('--animation-speed', `${animationSpee
/////////////////////////
// STREAMER.BOT CLIENT //
/////////////////////////
@@ -322,6 +330,11 @@ client.on('Fourthwall.GiftDrawEnded', (response) => {
FourthwallGiftDrawEnded(response.data);
})
client.on('Fourthwall.GiftDrawEnded', (response) => {
console.debug(response.data);
FourthwallGiftDrawEnded(response.data);
})
///////////////////////////
@@ -334,7 +347,9 @@ async function KickConnect() {
return;
// Channel to subscribe to (you'll need the correct channel name here)
const chatroomId = await GetKickChatroomId(kickUsername);
const kickIds = await GetKickIds(kickUsername);
const chatroomId = kickIds.chatroomId;
const channelId = kickIds.channelId;
// Cache subscriber badges
kickSubBadges = await GetKickSubBadges(kickUsername);
@@ -367,6 +382,7 @@ async function KickConnect() {
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
}
@@ -398,6 +414,9 @@ async function KickConnect() {
case 'UserBannedEvent':
KickUserBanned(eventArgs);
break;
case 'KicksGifted':
KickKicksGifted(eventArgs);
break;
}
}
catch (error) {
@@ -537,8 +556,7 @@ async function TwitchChatMessage(data) {
// Set Shared Chat
const isFromSharedChatGuest = data.isFromSharedChatGuest;
if (isFromSharedChatGuest) {
switch (showTwitchSharedChat)
{
switch (showTwitchSharedChat) {
// 2 = Show & Highlight
case 2:
let sharedChatChannel = data.sharedChatSource.name; // Twitch removed the source channel for some reason?!?!
@@ -672,6 +690,17 @@ async function TwitchChatMessage(data) {
avatarDiv.appendChild(avatar);
}
// Custom styling for subs
if (data.message.subscriber) {
usernameDiv.classList.add('sub-glow')
}
// Custom styling for mods
// 3 = Moderator
if (role == 3) {
usernameDiv.classList.add('moderator-glow')
}
// Hide the header if the same username sends a message twice in a row
// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
const messageList = document.getElementById("messageList");
@@ -1234,7 +1263,10 @@ async function YouTubeMessage(data) {
// Set the message data
if (showUsername) {
usernameDiv.innerText = data.user.name;
usernameDiv.style.color = "#f70000"; // YouTube users do not have colors, so just set it to red
if (randomYouTubeColors)
usernameDiv.style.color = StringToHex(data.user.name);
else
usernameDiv.style.color = youtubeColor; // YouTube users do not have colors, so just set it to red
}
if (showMessage) {
@@ -1279,6 +1311,9 @@ async function YouTubeMessage(data) {
if (data.user.isSponsor && showBadges) {
const badge = new Image();
if (youtubeCustomSubIcon)
badge.src = youtubeCustomSubIcon;
else
badge.src = `icons/badges/youtube-member.svg`;
badge.style.filter = `invert(100%)`;
badge.style.opacity = 0.8;
@@ -1310,6 +1345,16 @@ async function YouTubeMessage(data) {
avatarDiv.appendChild(avatar);
}
// Custom styling for subs
if (data.user.isSponsor) {
usernameDiv.classList.add('sub-glow')
}
// Custom styling for mods
// 3 = Moderator
if (data.user.isModerator) {
usernameDiv.classList.add('moderator-glow')
}
// Hide the header if the same username sends a message twice in a row
// EXCEPT when the scroll direction is set to reverse (scrollDirection == 2)
@@ -2518,6 +2563,35 @@ function KickMessageDeleted(data) {
}, 500);
}
async function KickKicksGifted(data) {
if (!showKickGifts)
return;
// Get a reference to the template
const template = document.getElementById('kick-gift-template');
// Create a new instance of the template
const instance = template.content.cloneNode(true);
// Get divs
const avatarImg = instance.querySelector('.kick-gift-avatar');
const usernameSpan = instance.querySelector('#kick-gift-username');
const giftNameSpan = instance.querySelector('#kick-gift-name');
const stickerImg = instance.querySelector('.kick-gift-sticker');
const amountDiv = instance.querySelector('#kick-gift-amount');
const messageDiv = instance.querySelector('#kick-gift-message');
avatarImg.src = await GetAvatar(data.sender.username, 'kick'); // Set the card header
usernameSpan.innerText = data.sender.username; // Set the username
usernameSpan.style.color = data.sender.username_color;
giftNameSpan.innerText = data.gift.name; // Set the gift name
stickerImg.src = `https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp`; // Set the sticker image URL
amountDiv.innerText = data.gift.amount; // Set the number of gifts sent
messageDiv.innerText = data.message // Set the message
AddMessageItem(instance, null, 'kick', data.senderId);
}
function KickUserBanned(data) {
const messageList = document.getElementById("messageList");
@@ -2725,28 +2799,48 @@ function TikTokLikes(data) {
// Get the total number of likes
var likeCountTotal = parseInt(data.likeCount);
let likeCount = parseInt(data.likeCount);
// Search for Previous Likes from the Same User
const previousLikeContainer = document.querySelector(`li[data-user-id="${data.userId}"]`);
const previousLikeContainer = document.querySelector(`.likes[data-user-identifier="${data.userId}"]`);
// If found, fetches the previous likes, deletes the element
// and then creates a new count with a sum of the like count
if (previousLikeContainer) {
const likeCountElem = previousLikeContainer.querySelector('#tiktok-gift-repeat-count');
if (likeCountElem) {
var likeCountPrev = parseInt(likeCountElem.textContent.replace('x', ''));
likeCountTotal = Math.floor(likeCountPrev + likeCountTotal);
previousLikeContainer.remove();
const liLikeContainer = previousLikeContainer.parentElement?.parentElement;
if (liLikeContainer) {
let prevLikeCount = parseInt(likeCountElem.textContent.replace('x', ''), 10);
let likeCountUpdate = Math.floor(prevLikeCount + likeCount);
let likeCountDiv = previousLikeContainer.querySelector('#tiktok-gift-repeat-count');
likeCountDiv.innerText = `x${likeCountUpdate}`;
const parent = liLikeContainer.parentElement;
if (parent) {
parent.appendChild(liLikeContainer);
}
}
}
}
else {
// Get a reference to the template
const template = document.getElementById('tiktok-gift-template');
// Create a new instance of the template
const instance = template.content.cloneNode(true);
// gets the GiftElement
const giftElement = instance.querySelector('.tiktok-gift');
// adds the like class
giftElement.classList.add('likes');
// and assigns the user id
giftElement.dataset.userIdentifier = data.userId;
// Get divs
const avatarImg = instance.querySelector('.tiktok-gift-avatar');
const usernameSpan = instance.querySelector('#tiktok-gift-username');
@@ -2758,10 +2852,11 @@ function TikTokLikes(data) {
usernameSpan.innerText = data.nickname;
giftNameSpan.innerText = 'Likes';
stickerImg.src = '';
repeatCountDiv.innerText = `x${likeCountTotal}`;
repeatCountDiv.innerText = `x${likeCount}`;
AddMessageItem(instance, data.msgId, 'tiktok', data.userId);
}
}
function TikTokGift(data) {
if (!showTikTokGifts)
@@ -2871,111 +2966,6 @@ function YouTubeThumbnailPreview(data) {
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
console.log(paramValue);
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
function GetCurrentTimeFormatted() {
const now = new Date();
let hours = now.getHours();
const minutes = String(now.getMinutes()).padStart(2, '0');
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;
}
async function GetAvatar(username, platform) {
// First, check if the username is hashed already
if (avatarMap.has(`${username}-${platform}`)) {
console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
return avatarMap.get(`${username}-${platform}`);
}
// If code reaches this point, the username hasn't been hashed, so retrieve avatar
switch (platform) {
case 'twitch':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
let response = await fetch('https://decapi.me/twitch/avatar/' + username);
let data = await response.text();
avatarMap.set(`${username}-${platform}`, data);
return data;
}
case 'kick':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
let response = await fetch('https://kick.com/api/v2/channels/' + username);
console.log('https://kick.com/api/v2/channels/' + username)
let data = await response.json();
let avatarURL = data.user.profile_pic;
if (!avatarURL)
avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
avatarMap.set(`${username}-${platform}`, avatarURL);
return avatarURL;
}
}
}
async function GetPronouns(platform, username) {
if (pronounMap.has(username)) {
console.debug(`Pronouns found for ${username}. Retrieving from hash map.`)
return pronounMap.get(username);
}
else {
console.debug(`No pronouns found for ${username}. Retrieving from alejo.io.`)
const response = await client.getUserPronouns(platform, username);
const userFound = response.pronoun.userFound;
const pronouns = userFound ? `${response.pronoun.pronounSubject}/${response.pronoun.pronounObject}` : '';
pronounMap.set(username, pronouns);
return pronouns;
}
}
// function IsImageUrl(url) {
// return url.match(/^http.*\.(jpeg|jpg|gif|png)$/) != null;
// }
function IsImageUrl(url) {
try {
const { pathname } = new URL(url);
@@ -3044,12 +3034,6 @@ function AddMessageItem(element, elementID, platform, userId) {
}, 200);
}
function DecodeHTMLString(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
// I used Gemini for this shit so if it doesn't work, blame Google
function FindFirstImageUrl(jsonObject) {
if (typeof jsonObject !== 'object' || jsonObject === null) {
@@ -3145,77 +3129,6 @@ function GetWinnersList(gifts) {
}
}
function TranslateToFurry(sentence) {
const words = sentence.toLowerCase().split(/\b/);
const furryWords = words.map(word => {
if (/\w+/.test(word)) {
let newWord = word;
// Common substitutions
newWord = newWord.replace(/l/g, 'w');
newWord = newWord.replace(/r/g, 'w');
newWord = newWord.replace(/th/g, 'f');
newWord = newWord.replace(/you/g, 'yous');
newWord = newWord.replace(/my/g, 'mah');
newWord = newWord.replace(/me/g, 'meh');
newWord = newWord.replace(/am/g, 'am');
newWord = newWord.replace(/is/g, 'is');
newWord = newWord.replace(/are/g, 'are');
newWord = newWord.replace(/very/g, 'vewy');
newWord = newWord.replace(/pretty/g, 'pwetty');
newWord = newWord.replace(/little/g, 'wittle');
newWord = newWord.replace(/nice/g, 'nyce');
// Random additions
if (Math.random() < 0.15) {
newWord += ' nya~';
} else if (Math.random() < 0.1) {
newWord += ' >w<';
} else if (Math.random() < 0.05) {
newWord += ' owo';
}
return newWord;
}
return word;
});
return furryWords.join('');
}
function EscapeRegExp(string) {
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
}
async function GetKickChatroomId(username) {
const url = `https://kick.com/api/v2/channels/${username}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
if (data.chatroom && data.chatroom.id) {
return data.chatroom.id;
} else {
throw new Error("Chatroom ID not found in response.");
}
} catch (error) {
console.error("Failed to fetch chatroom ID:", error.message);
return null;
}
}
async function GetKickSubBadges(username) {
const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
const data = await response.json();
return data.subscriber_badges || [];
}
function GetKickBadgeURL(data) {
switch (data.type) {
case 'subscriber':
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+8
View File
@@ -376,6 +376,14 @@
"defaultValue": true,
"group": "Which Kick messages do you want to see?"
},
{
"id": "showKickGifts",
"label": "Gifts",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Kick messages do you want to see?"
},
{
"id": "enableTikTokSupport",
"label": "Enable TikTok Support",
+30 -10
View File
@@ -3,7 +3,6 @@
padding: 0;
--margin: 20px;
--border-radius: 0.5em;
/* --line-spacing: 1.7em; */
}
body {
@@ -61,7 +60,7 @@ html {
li {
list-style: none;
overflow: hidden;
/* overflow: hidden; */
max-height: 0;
margin: 10px 0px 0px 0px;
transition: all 1s ease-in-out;
@@ -224,17 +223,18 @@ li {
transform: translate(0px, 0.25em);
}
.kick-gift,
.tiktok-gift {
display: flex;
flex-direction: row;
align-items: center;
gap: 1em;
padding: 0.5em 1em;
padding: 0.5em;
border-radius: var(--border-radius);
max-width: 100%;
background: linear-gradient(#262626BF, #000000BF) !important;
}
.kick-gift-avatar,
.tiktok-gift-avatar {
height: 3em;
margin: 1px;
@@ -243,17 +243,37 @@ li {
flex-shrink: 0;
}
.kick-gift-contents,
.tiktok-gift-message {
flex-grow: 1;
white-space: nowrap; /* keeps text in a single line */
overflow: hidden; /* hides overflowed content */
text-overflow: ellipsis; /* adds the "..." at the end */
/* white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; */
gap: 1em;
}
/* .kick-gift-contents {
text-align: center;
} */
#kick-gift-message {
font-size: 0.9em;
}
.kick-gift-sticker,
.tiktok-gift-sticker {
flex-shrink: 0;
justify-content: flex-end;
filter: drop-shadow(5px 5px 5px #00000060);
}
.tiktok-gift-sticker {
height: 2.5em;
flex-shrink: 0;
justify-content: flex-end;
}
.kick-gift-sticker {
height: 5em;
}
#tiktok-gift-repeat-count {
@@ -292,7 +312,7 @@ li {
}
.kick {
background: linear-gradient(#53fc18, #005600) !important;
background: linear-gradient(#32b602, #005600) !important;
}
.streamlabs {
File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 5.3 KiB

+1
View File
@@ -44,4 +44,5 @@
</div>
</body>
<script src="../.common/utils/helpers.js"></script>
<script src="./script.js"></script>
+36 -120
View File
@@ -7,7 +7,6 @@ const urlParams = new URLSearchParams(queryString);
const sbServerAddress = urlParams.get("address") || "127.0.0.1";
const sbServerPort = urlParams.get("port") || "8080";
const avatarMap = new Map();
const mainContainer = document.getElementById('mainContainer');
const alertBox = document.getElementById('alertBox');
@@ -70,13 +69,15 @@ const showTwitchRaids = GetBooleanParam("showTwitchRaids", true);
const twitchRaidAction = urlParams.get("twitchRaidAction") || "";
// Which Kick alerts do you want to see?
let kickUsername = urlParams.get("kickUsername") || "";
const kickUsername = urlParams.get("kickUsername") || "";
const showKickSubs = GetBooleanParam("showKickSubs", true);
const kickSubAction = urlParams.get("kickSubAction") || "";
const showKickChannelPointRedemptions = GetBooleanParam("showKickChannelPointRedemptions", true);
const kickChannelPointRedemptionAction = urlParams.get("kickChannelPointRedemptionAction") || "";
const showKickHosts = GetBooleanParam("showKickHosts", true);
const kickHostAction = urlParams.get("kickHostAction") || "";
const showKickGifts = GetBooleanParam("showKickGifts", true);
const kickGiftAction = urlParams.get("kickGiftAction") || "";
// Which YouTube alerts do you want to see?
const showYouTubeSuperChats = GetBooleanParam("showYouTubeSuperChats", true);
@@ -107,9 +108,6 @@ const tipeeestreamDonationAction = urlParams.get("tipeeestreamDonationAction") |
const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", false);
const fourthwallAlertAction = urlParams.get("fourthwallAlertAction") || "";
// Kick is stupid and turns underscores into dashes which fuck everything up, therefore do a find/replace to make it work good
kickUsername = kickUsername.replace(/_/g, "-");
// Set avatar visibility
if (!showAvatar) {
avatarElement.style.display = 'none';
@@ -315,7 +313,9 @@ async function KickConnect() {
return;
// Channel to subscribe to (you'll need the correct channel name here)
const chatroomId = await GetKickChatroomId(kickUsername);
const kickIds = await GetKickIds(kickUsername);
const chatroomId = kickIds.chatroomId;
const channelId = kickIds.channelId;
// Cache subscriber badges
kickSubBadges = await GetKickSubBadges(kickUsername);
@@ -348,6 +348,7 @@ async function KickConnect() {
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `chatrooms.${chatroomId}.v2` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `predictions-channel-${chatroomId}` } }));
websocket.send(JSON.stringify({ event: 'pusher:subscribe', data: { channel: `channel_${channelId}` } }));
console.log(`[Pusher] Sent subscription request to channel: ${chatroomId}`);
}
@@ -370,6 +371,9 @@ async function KickConnect() {
case 'StreamHostEvent':
KickStreamHost(eventArgs);
break;
case 'KicksGifted':
KickKicksGifted(eventArgs);
break;
}
}
catch (error) {
@@ -1365,6 +1369,32 @@ async function KickStreamHost(data) {
);
}
async function KickKicksGifted(data) {
if (!showKickGifts)
return;
// Set the text
const username = data.sender.username;
const tiktokIcon = `<img src="icons/platforms/kick.png" class="platform"/>`;
// const giftImg = `<img src=https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp style="height: 1em"/>`;
const kickKicksIcon = `<img src=icons/badges/kick-kicks.svg style="height: 0.8em"/>`;
// Render avatars
const avatarURL = `https://files.kick.com/kicks/gifts/${data.gift.gift_id.replace('_', '-')}.webp`;
UpdateAlertBox(
'kick',
avatarURL,
`${username}`,
`sent ${kickKicksIcon} ${data.gift.amount}`,
'',
username,
data.message,
kickGiftAction,
data
);
}
async function TikTokGift(data) {
if (!showTikTokGifts)
return;
@@ -1429,83 +1459,6 @@ async function TikTokSubscribe(data) {
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
console.log(paramValue);
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
async function GetAvatar(username, platform) {
// First, check if the username is hashed already
if (avatarMap.has(`${username}-${platform}`)) {
console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
return avatarMap.get(`${username}-${platform}`);
}
// If code reaches this point, the username hasn't been hashed, so retrieve avatar
switch (platform) {
case 'twitch':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
let response = await fetch('https://decapi.me/twitch/avatar/' + username);
let data = await response.text();
avatarMap.set(`${username}-${platform}`, data);
return data;
}
case 'kick':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
let response = await fetch('https://kick.com/api/v2/channels/' + username);
console.log('https://kick.com/api/v2/channels/' + username)
let data = await response.json();
let avatarURL = data.user.profile_pic;
if (!avatarURL)
avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
avatarMap.set(`${username}-${platform}`, avatarURL);
return avatarURL;
}
}
}
function DecodeHTMLString(html) {
var txt = document.createElement("textarea");
txt.innerHTML = html;
return txt.value;
}
// I used Gemini for this shit so if it doesn't work, blame Google
function FindFirstImageUrl(jsonObject) {
if (typeof jsonObject !== 'object' || jsonObject === null) {
@@ -1710,43 +1663,6 @@ function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attrib
}
async function GetKickChatroomId(username) {
const url = `https://kick.com/api/v2/channels/${username}`;
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
const data = await response.json();
if (data.chatroom && data.chatroom.id) {
return data.chatroom.id;
} else {
throw new Error("Chatroom ID not found in response.");
}
} catch (error) {
console.error("Failed to fetch chatroom ID:", error.message);
return null;
}
}
async function GetKickSubBadges(username) {
const response = await fetch(`https://kick.com/api/v2/channels/${username}`);
const data = await response.json();
return data.subscriber_badges || [];
}
function GetKickBadgeURL(data) {
switch (data.type) {
case 'subscriber':
return CalculateKickSubBadge(data.count);
default:
return `icons/badges/kick-${data.type}.svg`;
}
}
function CalculateKickSubBadge(months) {
if (!Array.isArray(kickSubBadges)) return null;
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+17
View File
@@ -422,6 +422,23 @@
"showIf": "showKickHosts",
"group": "Which Kick alerts do you want to see?"
},
{
"id": "showKickGifts",
"label": "Gifts",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which Kick alerts do you want to see?"
},
{
"id": "kickGiftAction",
"label": "",
"description": "Also run this Streamer.bot Action",
"type": "sb-actions",
"defaultValue": "",
"showIf": "showKickGifts",
"group": "Which Kick alerts do you want to see?"
},
{
"id": "enableTikTokSupport",
"label": "Enable TikTok Support",
File diff suppressed because one or more lines are too long
+14 -1
View File
@@ -25,6 +25,8 @@
<div class="broadcast-info">
<label class="setting-attribute">
<i>YouTube stream info can only be updated while live</i>
<br>
<i><span id="youtube-title-on-broadcast-start-label"></span></i>
</label>
</div>
@@ -59,6 +61,17 @@
<input type="text" id="all-category-input" placeholder="Leave empty to keep current category">
</div>
<div id="include-youtube-setting-wrapper" class="setting">
<div>
<div class="setting-label">Include YouTube</div>
<div class="setting-description">Update YouTube title as soon as broadcast starts</div>
</div>
<label class="switch" style="margin-left: auto;">
<input type="checkbox" id="include-youtube-setting" name="include-youtube-setting" checked>
<span class="slider round"></span>
</label>
</div>
<button id="all-submit-button" onclick="UpdateAllSubmit()">Update All</button>
</div>
@@ -211,7 +224,7 @@
<div class="broadcast-info">
<label id="broadcast-title"></label>
<label id="broadcast-category" class="setting-description"></label>
<label id="kick-warning" class="setting-attribute"><br><i>Stream info only available when live — Showing
<label id="kick-warning" class="setting-attribute"><br><i>Most up to date stream info only available when live — Showing
last known stream title</i></label>
</div>
+84 -4
View File
@@ -8,6 +8,7 @@ const sbActionOpenUrl = '14da1d44-6e29-4582-92c3-2c59388be57e';
let currentBroadcastId = '';
let runningActionId = '';
let youtubeTitleOnBroadcastStart = '';
///////////////////
@@ -21,6 +22,9 @@ const updateKickDialog = document.getElementById('update-kick-dialog');
const updateYouTubeDialog = document.getElementById('update-youtube-dialog');
const broadcastList = document.getElementById('broadcast-list');
const youtubeWarning = document.getElementById('youtube-warning');
const includeYouTubeSettingWrapper = document.getElementById('include-youtube-setting-wrapper');
const includeYouTubeSetting = document.getElementById('include-youtube-setting');
const youtubeTitleOnBroadcastStartLabel = document.getElementById('youtube-title-on-broadcast-start-label');
@@ -37,6 +41,21 @@ window.parent.sbClient.on('General.Custom', (response) => {
GeneralCustom(response.data);
})
window.parent.sbClient.on('YouTube.BroadcastStarted', (response) => {
console.debug(response.data);
YouTubeBroadcastStarted(response.data);
})
window.parent.sbClient.on('Twitch.StreamUpdate', (response) => {
console.debug(response.data);
FetchBroadcasts();
})
window.parent.sbClient.on('YouTube.BroadcastUpdated', (response) => {
console.debug(response.data);
FetchBroadcasts();
})
///////////////////////////////
@@ -64,9 +83,17 @@ async function GeneralCustom(data) {
// Only show the warning if there are 0 monitored broadcasts
const ytBroadcastCount = data.broadcastList.filter(b => b.platform === "youtube").length;
if (ytBroadcastCount <= 0)
{
youtubeWarning.style.display = 'flex';
includeYouTubeSettingWrapper.style.display = 'flex';
includeYouTubeSetting.checked = true;
}
else
{
youtubeWarning.style.display = 'none';
includeYouTubeSettingWrapper.style.display = 'none';
includeYouTubeSetting.checked = false;
}
// Set the URL to the livestreaming dashboard
const broadcastButton = youtubeWarning.querySelector('#broadcast-dashboard-button');
@@ -83,7 +110,7 @@ async function GeneralCustom(data) {
const childDivs = broadcastList.querySelectorAll(":scope > div");
childDivs.forEach(childDiv => {
var result = data.broadcastList.find(obj => {
return obj.id === childDiv.id
return `id-${obj.id}` === childDiv.id;
})
if (result == null)
childDiv.remove();
@@ -93,17 +120,58 @@ async function GeneralCustom(data) {
}
}
function YouTubeBroadcastStarted(data) {
if (!includeYouTubeSetting.checked)
return;
setTimeout(async () => {
await window.parent.sbClient.doAction(
action = {
id: sbActionUpdateStreamInfo
},
args = {
platform: 'youtube',
title: youtubeTitleOnBroadcastStart,
broadcastId: data.id
}
);
}, 1000);
}
async function FetchBroadcasts() {
// Fetch from Streamer.bot
const response = await window.parent.sbClient.doAction({ id: sbActionFetchBroadcasts});
runningActionId = response.args.runningActionId;
}
async function FetchKickInfo() {
// Fetch from Streamer.bot
const broadcasterInfo = await window.parent.sbClient.getBroadcaster();
if (broadcasterInfo.platforms.kick) {
const userLogin = broadcasterInfo.platforms.kick.broadcasterLogin;
let kickData = {
platform: 'kick',
id: 'kick',
streamUrl: `https://www.kick.com/${userLogin.replaceAll('_', '-')}`,
dashboardUrl: 'https://dashboard.kick.com/stream',
userLogin: userLogin
}
AddBroadcast(kickData);
}
else {
const kickBroadcastDiv = document.getElementById('id-kick');
if (kickBroadcastDiv)
kickBroadcastDiv.remove();
}
}
async function AddBroadcast(data) {
// Get a reference to the template
const template = document.getElementById('broadcast-template');
const existingDiv = broadcastList.querySelector(`#${data.id}`);
const existingDiv = broadcastList.querySelector(`#id-${data.id}`);
// Create a new instance of the template
let instance;
@@ -112,7 +180,7 @@ async function AddBroadcast(data) {
instance = existingDiv;
else {
instance = template.content.firstElementChild.cloneNode(true);
instance.id = data.id;
instance.id = `id-${data.id}`;
broadcastList.appendChild(instance);
}
@@ -284,6 +352,18 @@ async function UpdateAllSubmit() {
}
);
// Set the YouTube title for next broadcast start
if (includeYouTubeSetting.checked)
{
youtubeTitleOnBroadcastStart = document.getElementById('all-title-input').value;
if (youtubeTitleOnBroadcastStart)
youtubeTitleOnBroadcastStartLabel.textContent = `Title will be set to '${youtubeTitleOnBroadcastStart}' when broadcast starts.`;
}
else {
youtubeTitleOnBroadcastStart = '';
youtubeTitleOnBroadcastStartLabel.textContent = '';
}
CloseUpdateAllDialog();
}
@@ -543,4 +623,4 @@ ValidateYouTubeDialog();
// REFRESH BROADCAST LIST //
////////////////////////////
setInterval(FetchBroadcasts, 5000);
setInterval(FetchKickInfo, 5000);
@@ -69,6 +69,13 @@ button {
color: yellow;
}
.setting {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.5em;
}
#kick-warning {
display: none;
}
+1 -1
View File
@@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../.common/styles/global.css" />
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
#dock-wrapper {
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
File diff suppressed because one or more lines are too long
+1
View File
@@ -73,4 +73,5 @@
</div>
</template>
<script src="../../../.common/utils/helpers.js"></script>
<script src="script.js"></script>
+35 -40
View File
@@ -3,7 +3,6 @@
//////////////////////
const sbActionPrintRoutine = '5c756513-a1d0-4285-9dbc-21ad34491310';
const avatarMap = new Map();
@@ -533,6 +532,25 @@ async function CustomEvent(data) {
SetPlatformIcon(iconEl, 'kick');
}
break;
case ('kickKicksGifted'):
{
if (data.giftType != 'LEVEL_UP')
return;
avatarEl.src = ConvertWEBPToPNG(`https://files.kick.com/kicks/gifts/${data.gift.toLowerCase().replace(/ /g, "-")}.webp`);
avatarEl.style.borderRadius = '0px';
titleEl.innerText = `${data.amount} KICKS`;
subtitleEl.innerText = `${data.sender}`;
const messageEl = document.createElement('div');
messageEl.innerHTML = data.message;
contentEl.appendChild(messageEl);
// Set the platform icon
SetPlatformIcon(iconEl, 'kick');
}
break;
}
}
break;
@@ -582,45 +600,6 @@ async function CustomEvent(data) {
// HELPER FUNCTIONS //
//////////////////////
async function GetAvatar(username, platform) {
// First, check if the username is hashed already
if (avatarMap.has(`${username}-${platform}`)) {
console.debug(`Avatar found for ${username} (${platform}). Retrieving from hash map.`)
return avatarMap.get(`${username}-${platform}`);
}
// If code reaches this point, the username hasn't been hashed, so retrieve avatar
switch (platform) {
case 'twitch':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Decapi.`)
let response = await fetch('https://decapi.me/twitch/avatar/' + username);
let data = await response.text();
avatarMap.set(`${username}-${platform}`, data);
return data;
}
case 'kick':
{
console.debug(`No avatar found for ${username} (${platform}). Retrieving from Kick.`)
try {
let response = await fetch('https://kick.com/api/v2/channels/' + username);
console.log('https://kick.com/api/v2/channels/' + username)
let data = await response.json();
let avatarURL = data.user.profile_pic;
if (!avatarURL)
avatarURL = 'https://kick.com/img/default-profile-pictures/default2.jpeg';
avatarMap.set(`${username}-${platform}`, avatarURL);
return avatarURL;
}
catch (error) {
console.debug(error);
return 'https://kick.com/img/default-profile-pictures/default2.jpeg';
}
}
}
}
async function GetRenderedHTML(fragment) {
if (!(fragment instanceof DocumentFragment)) {
throw new Error('Argument must be a DocumentFragment');
@@ -746,6 +725,22 @@ let data = {
"userType": "twitch"
}
// let data = {
// "__source": "CustomCodeEvent",
// "actionName": "Printer Bot | Events",
// "triggerCustomCodeEventName": "kickKicksGifted",
// "amount": 100,
// "message": "Eat my ass",
// "gift": "Flex",
// "giftType": "LEVEL_UP",
// "giftTier": "LEVEL_UP",
// "sender": "DJSUSAN00",
// "senderId": "170168",
// "senderColor": "#1475E1",
// "eventSource": "kick",
// "fromKick": true
// }
async function TestPrint() {
CustomEvent(data);
}
+1 -1
View File
@@ -2,7 +2,7 @@
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../.common/styles/global.css" />
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
#dock-wrapper {
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+1
View File
@@ -25,4 +25,5 @@
</div>
</body>
<script src="../.common/utils/helpers.js"></script>
<script src="./script.js"></script>
+1 -44
View File
@@ -160,8 +160,7 @@ function TwitchAdRun(data) {
}
function TwitchUpcomingAd(data) {
if (upcomingAdWarningStartDelay != null)
{
if (upcomingAdWarningStartDelay != null) {
console.debug('Countdown already started, skipping...');
return;
}
@@ -307,44 +306,6 @@ function UpcomingAdWarning(warningSeconds) {
// HELPER FUNCTIONS //
//////////////////////
function GetBooleanParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // Parameter not found
}
const lowercaseValue = paramValue.toLowerCase(); // Handle case-insensitivity
if (lowercaseValue === 'true') {
return true;
} else if (lowercaseValue === 'false') {
return false;
} else {
return paramValue; // Return original string if not 'true' or 'false'
}
}
function GetIntParam(paramName, defaultValue) {
const urlParams = new URLSearchParams(window.location.search);
const paramValue = urlParams.get(paramName);
if (paramValue === null) {
return defaultValue; // or undefined, or a default value, depending on your needs
}
console.log(paramValue);
const intValue = parseInt(paramValue, 10); // Parse as base 10 integer
if (isNaN(intValue)) {
return null; // or handle the error in another way, e.g., throw an error
}
return intValue;
}
String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param
var hours = Math.floor(sec_num / 3600);
@@ -358,10 +319,6 @@ String.prototype.toHHMMSS = function () {
return minutes + ':' + seconds;
}
function IsNullOrWhitespace(str) {
return /^\s*$/.test(str);
}
function formatTime(seconds) {
seconds = Math.floor(seconds); // Round down to nearest whole second
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;
+1 -1
View File
@@ -4,7 +4,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="../../.resources/logo.png" type="image/png">
<link rel="icon" href="../../.common/resources/logo.png" type="image/png">
<title>nutty</title>
<style>
body {
+1 -1
View File
@@ -1,6 +1,6 @@
const widgetContainer = document.getElementById('widgetContainer');
const settingsPageURL = '../../.utilities/settings-page-builder';
const settingsPageURL = '../../.common/core/settings-core';
const currentURL = window.location.href;