diff --git a/horizontal-chat/icons/badges/twitch-bit.svg b/horizontal-chat/icons/badges/twitch-bit.svg new file mode 100644 index 0000000..5fcda08 --- /dev/null +++ b/horizontal-chat/icons/badges/twitch-bit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/horizontal-chat/script.js b/horizontal-chat/script.js index 46fb051..1c28a25 100644 --- a/horizontal-chat/script.js +++ b/horizontal-chat/script.js @@ -46,6 +46,7 @@ const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true) const showTwitchFollows = GetBooleanParam("showTwitchFollows", false); const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true); +const showTwitchPowerUpRedemptions = GetBooleanParam("showTwitchPowerUpRedemptions", true); const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); const showTwitchWatchStreaks = GetBooleanParam("showTwitchWatchStreaks", true); const showTwitchSharedChat = GetBooleanParam("showTwitchSharedChat", true); @@ -181,6 +182,11 @@ client.on('Twitch.RewardRedemption', (response) => { TwitchRewardRedemption(response.data); }) +client.on('Twitch.CustomPowerUpRedemption', (response) => { + console.debug(response.data); + TwitchCustomPowerUpRedemption(response.data); +}) + client.on('Twitch.Raid', (response) => { console.debug(response.data); TwitchRaid(response.data); @@ -788,6 +794,23 @@ async function TwitchRewardRedemption(data) { ShowAlert(message, 'twitch'); } +async function TwitchCustomPowerUpRedemption(data) { + if (!showTwitchPowerUpRedemptions) + return; + + let username = data.user.name; + if (data.user.name.toLowerCase() != data.user.login.toLowerCase()) + username = `${data.user.name} (${data.user.login})`; + const powerUpName = data.custom_power_up.title; + const cost = data.custom_power_up.bits_cost; + const prompt = data.custom_power_up.prompt; + const bitIcon = ``; + + let message = `${username} redeemed ${powerUpName} ${bitIcon} ${cost}`; + + ShowAlert(message, 'twitch'); +} + async function TwitchRaid(data) { if (!showTwitchRaids) return; diff --git a/horizontal-chat/settings/settings.json b/horizontal-chat/settings/settings.json index bf48dea..a984361 100644 --- a/horizontal-chat/settings/settings.json +++ b/horizontal-chat/settings/settings.json @@ -175,6 +175,14 @@ "defaultValue": true, "group": "Which Twitch messages do you want to see?" }, + { + "id": "showTwitchPowerUpRedemptions", + "label": "Power-Up Redemptions", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, { "id": "showTwitchRaids", "label": "Raids", diff --git a/multichat-overlay/icons/badges/twitch-bit.svg b/multichat-overlay/icons/badges/twitch-bit.svg new file mode 100644 index 0000000..5fcda08 --- /dev/null +++ b/multichat-overlay/icons/badges/twitch-bit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/multichat-overlay/script.js b/multichat-overlay/script.js index a7cdbb4..78c6ec0 100644 --- a/multichat-overlay/script.js +++ b/multichat-overlay/script.js @@ -52,6 +52,7 @@ const showTwitchAnnouncements = GetBooleanParam("showTwitchAnnouncements", true) const showTwitchFollows = GetBooleanParam("showTwitchFollows", false); const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true); +const showTwitchPowerUpRedemptions = GetBooleanParam("showTwitchPowerUpRedemptions", true); const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); const showTwitchWatchStreaks = GetBooleanParam("showTwitchWatchStreaks", true); const showTwitchSharedChat = GetIntParam("showTwitchSharedChat", 2); @@ -202,6 +203,11 @@ client.on('Twitch.RewardRedemption', (response) => { TwitchRewardRedemption(response.data); }) +client.on('Twitch.CustomPowerUpRedemption', (response) => { + console.debug(response.data); + TwitchCustomPowerUpRedemption(response.data); +}) + client.on('Twitch.Raid', (response) => { console.debug(response.data); TwitchRaid(response.data); @@ -1170,6 +1176,52 @@ async function TwitchRewardRedemption(data) { AddMessageItem(instance, data.messageId); } +async function TwitchCustomPowerUpRedemption(data) { + if (!showTwitchPowerUpRedemptions) + 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('twitch'); + + if (showAvatar) { + // Render avatars + const username = data.user.login; + const avatarURL = await GetAvatar(username, 'twitch'); + const avatar = new Image(); + avatar.src = avatarURL; + avatar.classList.add("avatar"); + avatarDiv.appendChild(avatar); + } + + // Set the text + let username = data.user.name; + if (data.user.name.toLowerCase() != data.user.login.toLowerCase()) + username = `${data.user.name} (${data.user.login})`; + const powerUpName = data.custom_power_up.title; + const cost = data.custom_power_up.bits_cost; + const prompt = data.custom_power_up.prompt; + const bitIcon = ``; + + titleDiv.innerHTML = `${username} redeemed ${powerUpName} ${bitIcon} ${cost}`; + contentDiv.innerText = `${prompt}`; + + AddMessageItem(instance, data.messageId); +} + async function TwitchRaid(data) { if (!showTwitchRaids) return; diff --git a/multichat-overlay/settings/settings.json b/multichat-overlay/settings/settings.json index 12e8da0..6c53129 100644 --- a/multichat-overlay/settings/settings.json +++ b/multichat-overlay/settings/settings.json @@ -290,6 +290,14 @@ "defaultValue": true, "group": "Which Twitch messages do you want to see?" }, + { + "id": "showTwitchPowerUpRedemptions", + "label": "Power-Up Redemptions", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch messages do you want to see?" + }, { "id": "showTwitchRaids", "label": "Raids", diff --git a/multistream-alerts/icons/badges/twitch-bit.svg b/multistream-alerts/icons/badges/twitch-bit.svg new file mode 100644 index 0000000..5fcda08 --- /dev/null +++ b/multistream-alerts/icons/badges/twitch-bit.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js index e7c8587..a344aff 100644 --- a/multistream-alerts/script.js +++ b/multistream-alerts/script.js @@ -63,6 +63,8 @@ const showTwitchSubs = GetBooleanParam("showTwitchSubs", true); const twitchSubAction = urlParams.get("twitchSubAction") || ""; const showTwitchChannelPointRedemptions = GetBooleanParam("showTwitchChannelPointRedemptions", true); const twitchChannelPointRedemptionAction = urlParams.get("twitchChannelPointRedemptionAction") || ""; +const showTwitchPowerUpRedemptions = GetBooleanParam("showTwitchPowerUpRedemptions", true); +const twitchPowerUpRedemptionAction = urlParams.get("twitchPowerUpRedemptionAction") || ""; const showTwitchCheers = GetBooleanParam("showTwitchCheers", true); const twitchCheerAction = urlParams.get("twitchCheerAction") || ""; const showTwitchRaids = GetBooleanParam("showTwitchRaids", true); @@ -218,6 +220,11 @@ client.on('Twitch.RewardRedemption', (response) => { TwitchRewardRedemption(response.data); }) +client.on('Twitch.CustomPowerUpRedemption', (response) => { + console.debug(response.data); + TwitchCustomPowerUpRedemption(response.data); +}) + client.on('Twitch.Raid', (response) => { console.debug(response.data); TwitchRaid(response.data); @@ -696,6 +703,34 @@ async function TwitchRewardRedemption(data) { ); } +async function TwitchCustomPowerUpRedemption(data) { + if (!showTwitchPowerUpRedemptions) + return; + + let username = data.user.name; + if (data.user.name.toLowerCase() != data.user.login.toLowerCase()) + username = `${data.user.name} (${data.user.login})`; + const powerUpName = data.custom_power_up.title; + const cost = data.custom_power_up.bits_cost; + const prompt = data.custom_power_up.prompt; + const bitIcon = ``; + + // Render avatars + const avatarURL = await GetAvatar(data.user.login, 'twitch'); + + UpdateAlertBox( + 'twitch', + avatarURL, + `${username} redeemed`, + `${powerUpName} ${bitIcon} ${cost}`, + '', + username, + prompt, + twitchPowerUpRedemptionAction, + data + ); +} + async function TwitchRaid(data) { if (!showTwitchRaids) return; diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json index 61d4982..c919d79 100644 --- a/multistream-alerts/settings/settings.json +++ b/multistream-alerts/settings/settings.json @@ -278,6 +278,23 @@ "showIf": "showTwitchChannelPointRedemptions", "group": "Which Twitch alerts do you want to see?" }, + { + "id": "showTwitchPowerUpRedemptions", + "label": "Power-Up Redemptions", + "description": "", + "type": "checkbox", + "defaultValue": true, + "group": "Which Twitch alerts do you want to see?" + }, + { + "id": "twitchPowerUpRedemptionAction", + "label": "", + "description": "Also run this Streamer.bot Action", + "type": "sb-actions", + "defaultValue": "", + "showIf": "showTwitchPowerUpRedemptions", + "group": "Which Twitch alerts do you want to see?" + }, { "id": "showTwitchCheers", "label": "Cheers",