Added support for Ko-fi donations

This commit is contained in:
nuttylmao
2025-03-27 08:02:14 +11:00
parent 56f47d4cdb
commit 8da69b2ac7
8 changed files with 262 additions and 7 deletions
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

+89
View File
@@ -47,6 +47,7 @@ const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
const showKofiDonations = GetBooleanParam("showKofiDonations", true);
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -190,6 +191,26 @@ client.on('Patreon.PledgeCreated', (response) => {
PatreonPledgeCreated(response.data);
})
client.on('Kofi.Donation', (response) => {
console.debug(response.data);
KofiDonation(response.data);
})
client.on('Kofi.Subscription', (response) => {
console.debug(response.data);
KofiSubscription(response.data);
})
client.on('Kofi.Resubscription', (response) => {
console.debug(response.data);
KofiResubscription(response.data);
})
client.on('Kofi.ShopOrder', (response) => {
console.debug(response.data);
KofiShopOrder(response.data);
})
/////////////////////
@@ -685,6 +706,74 @@ function PatreonPledgeCreated(data) {
ShowAlert(message, 'patreon');
}
function KofiDonation(data) {
if (!showKofiDonations)
return;
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
let message = "";
if (currency == "USD")
message = `${kofiIcon} ${user} donated $${amount}`;
else
message = `${kofiIcon} ${user} donated ${currency} ${amount}`;
ShowAlert(message, 'kofi');
}
function KofiSubscription(data) {
if (!showKofiDonations)
return;
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
let message = "";
if (currency == "USD")
message = `${kofiIcon} ${user} subscribed ($${amount})`;
else
message = `${kofiIcon} ${user} subscribed (${currency} ${amount})`;
ShowAlert(message, 'kofi');
}
function KofiResubscription(data) {
if (!showKofiDonations)
return;
const user = data.from;
const tier = data.tier;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
let message = `${kofiIcon} ${user} subscribed (${tier})`;
ShowAlert(message, 'kofi');
}
function KofiShopOrder(data) {
if (!showKofiDonations)
return;
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const itemTotal = data.items.length;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
let message = "";
if (currency == "USD")
message = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi ($${amount})`;
else
message = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi (${currency} ${amount})`;
ShowAlert(message, 'kofi');
}
//////////////////////
+8
View File
@@ -215,6 +215,14 @@
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showKofiDonations",
"label": "Ko-fi Donations",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "address",
"label": "Address",
+4
View File
@@ -245,6 +245,10 @@ li {
background: linear-gradient(#c76633, #fd5e0a) !important;
}
.kofi {
background: linear-gradient(#54c7ee, #08c2ff) !important;
}
/****************/
/** ANIMATIONS **/
/****************/
Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

+149 -7
View File
@@ -46,6 +46,7 @@ const showYouTubeMemberships = GetBooleanParam("showYouTubeMemberships", true);
const showStreamlabsDonations = GetBooleanParam("showStreamlabsDonations", true)
const showStreamElementsTips = GetBooleanParam("showStreamElementsTips", true);
const showPatreonMemberships = GetBooleanParam("showPatreonMemberships", true);
const showKofiDonations = GetBooleanParam("showKofiDonations", true);
// Set fonts for the widget
document.body.style.fontFamily = font;
@@ -204,6 +205,26 @@ client.on('Patreon.PledgeCreated', (response) => {
PatreonPledgeCreated(response.data);
})
client.on('Kofi.Donation', (response) => {
console.debug(response.data);
KofiDonation(response.data);
})
client.on('Kofi.Subscription', (response) => {
console.debug(response.data);
KofiSubscription(response.data);
})
client.on('Kofi.Resubscription', (response) => {
console.debug(response.data);
KofiResubscription(response.data);
})
client.on('Kofi.ShopOrder', (response) => {
console.debug(response.data);
KofiShopOrder(response.data);
})
///////////////////////
@@ -1103,8 +1124,8 @@ async function StreamElementsTip(data) {
AddMessageItem(instance, data.id);
}
function PatreonPledgeCreated(data) {
if (!showPatreonMemberships)
function KofiDonation(data) {
if (!showKofiDonations)
return;
// Get a reference to the template
@@ -1122,14 +1143,135 @@ function PatreonPledgeCreated(data) {
const contentDiv = instance.querySelector("#content");
// Set the card background colors
cardDiv.classList.add('patreon');
cardDiv.classList.add('kofi');
// Set the text
const user = data.attributes.full_name;
const amount = (data.attributes.will_pay_amount_cents/100).toFixed(2);
const patreonIcon = `<img src="icons/platforms/patreon.png" class="platform"/>`;
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const message = data.message;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
titleDiv.innerHTML = `${patreonIcon} ${user} joined Patreon ($${amount})`;
if (currency == "USD")
titleDiv.innerHTML = `${kofiIcon} ${user} donated $${amount}`;
else
titleDiv.innerHTML = `${kofiIcon} ${user} donated ${currency} ${amount}`;
if (message != null)
contentDiv.innerHTML = `${message}`;
AddMessageItem(instance, data.id);
}
function KofiSubscription(data) {
if (!showKofiDonations)
return;
// Get a reference to the template
const template = document.getElementById('cardTemplate');
// Create a new instance of the template
const instance = template.content.cloneNode(true);
// Get divs
const cardDiv = instance.querySelector("#card");
const headerDiv = instance.querySelector("#header");
const avatarDiv = instance.querySelector("#avatar");
const iconDiv = instance.querySelector("#icon");
const titleDiv = instance.querySelector("#title");
const contentDiv = instance.querySelector("#content");
// Set the card background colors
cardDiv.classList.add('kofi');
// Set the text
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const message = data.message;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
if (currency == "USD")
titleDiv.innerHTML = `${kofiIcon} ${user} subscribed ($${amount})`;
else
titleDiv.innerHTML = `${kofiIcon} ${user} subscribed (${currency} ${amount})`;
if (message != null)
contentDiv.innerHTML = `${message}`;
AddMessageItem(instance, data.id);
}
function KofiResubscription(data) {
if (!showKofiDonations)
return;
// Get a reference to the template
const template = document.getElementById('cardTemplate');
// Create a new instance of the template
const instance = template.content.cloneNode(true);
// Get divs
const cardDiv = instance.querySelector("#card");
const headerDiv = instance.querySelector("#header");
const avatarDiv = instance.querySelector("#avatar");
const iconDiv = instance.querySelector("#icon");
const titleDiv = instance.querySelector("#title");
const contentDiv = instance.querySelector("#content");
// Set the card background colors
cardDiv.classList.add('kofi');
// Set the text
const user = data.from;
const tier = data.tier;
const message = data.message;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
titleDiv.innerHTML = `${kofiIcon} ${user} subscribed (${tier})`;
if (message != null)
contentDiv.innerHTML = `${message}`;
AddMessageItem(instance, data.id);
}
function KofiShopOrder(data) {
if (!showKofiDonations)
return;
// Get a reference to the template
const template = document.getElementById('cardTemplate');
// Create a new instance of the template
const instance = template.content.cloneNode(true);
// Get divs
const cardDiv = instance.querySelector("#card");
const headerDiv = instance.querySelector("#header");
const avatarDiv = instance.querySelector("#avatar");
const iconDiv = instance.querySelector("#icon");
const titleDiv = instance.querySelector("#title");
const contentDiv = instance.querySelector("#content");
// Set the card background colors
cardDiv.classList.add('kofi');
// Set the text
const user = data.from;
const amount = data.amount;
const currency = data.currency;
const message = data.message;
const itemTotal = data.items.length;
const kofiIcon = `<img src="icons/platforms/kofi.png" class="platform"/>`;
if (currency == "USD")
titleDiv.innerHTML = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi ($${amount})`;
else
titleDiv.innerHTML = `${kofiIcon} ${user} ordered ${itemTotal} item(s) on Ko-fi (${currency} ${amount})`;
if (message != null)
contentDiv.innerHTML = `${message}`;
AddMessageItem(instance, data.id);
}
+8
View File
@@ -277,6 +277,14 @@
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "showKofiDonations",
"label": "Ko-fi Donations",
"description": "",
"type": "checkbox",
"defaultValue": true,
"group": "Which donation messages do you want to see?"
},
{
"id": "address",
"label": "Address",
+4
View File
@@ -211,6 +211,10 @@ li {
background: linear-gradient(#c76633, #fd5e0a) !important;
}
.kofi {
background: linear-gradient(#54c7ee, #08c2ff) !important;
}
/****************/
/** ANIMATIONS **/
/****************/