diff --git a/horizontal-chat/icons/platforms/kofi.png b/horizontal-chat/icons/platforms/kofi.png new file mode 100644 index 0000000..8812cac Binary files /dev/null and b/horizontal-chat/icons/platforms/kofi.png differ diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js index 2821690..953362e 100644 --- a/horizontal-chat/script.js +++ b/horizontal-chat/script.js @@ -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 = ``; + + 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 = ``; + + 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 = ``; + + 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 = ``; + + 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'); +} + ////////////////////// diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json index a109855..e2daf94 100644 --- a/horizontal-chat/settings/settings.json +++ b/horizontal-chat/settings/settings.json @@ -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", diff --git a/horizontal-chat/style.css b/horizontal-chat/style.css index 1ca9a86..5e3df9c 100644 --- a/horizontal-chat/style.css +++ b/horizontal-chat/style.css @@ -245,6 +245,10 @@ li { background: linear-gradient(#c76633, #fd5e0a) !important; } +.kofi { + background: linear-gradient(#54c7ee, #08c2ff) !important; +} + /****************/ /** ANIMATIONS **/ /****************/ diff --git a/multichat-overlay/icons/platforms/kofi.png b/multichat-overlay/icons/platforms/kofi.png new file mode 100644 index 0000000..8812cac Binary files /dev/null and b/multichat-overlay/icons/platforms/kofi.png differ diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index f1cdc31..33910b1 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -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 = ``; + const user = data.from; + const amount = data.amount; + const currency = data.currency; + const message = data.message; + const kofiIcon = ``; - 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 = ``; + + 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 = ``; + + 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 = ``; + + 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); } diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json index 5b9acc1..c53c3d1 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -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", diff --git a/multichat-overlay/style.css b/multichat-overlay/style.css index 6abd7d8..f1cb362 100644 --- a/multichat-overlay/style.css +++ b/multichat-overlay/style.css @@ -211,6 +211,10 @@ li { background: linear-gradient(#c76633, #fd5e0a) !important; } +.kofi { + background: linear-gradient(#54c7ee, #08c2ff) !important; +} + /****************/ /** ANIMATIONS **/ /****************/