diff --git a/multistream-alerts/index.html b/multistream-alerts/index.html index ab16a0f..3e6224c 100644 --- a/multistream-alerts/index.html +++ b/multistream-alerts/index.html @@ -21,8 +21,15 @@ to nutty -
- I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum +
+
+ + +
+
+ + I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum I drink cum +
diff --git a/multistream-alerts/script.js b/multistream-alerts/script.js index 861c3f3..8d1dcbb 100644 --- a/multistream-alerts/script.js +++ b/multistream-alerts/script.js @@ -11,10 +11,14 @@ const avatarMap = new Map(); const alertBox = document.getElementById('alertBox'); const avatarElement = document.getElementById('avatar'); +const avatarSmallElement = document.getElementById('avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes'); const usernameLabel = document.getElementById('username'); +const usernameTheSecondLabel = document.getElementById('usernameTheSecond'); const descriptionLabel = document.getElementById('description'); const attributeLabel = document.getElementById('attribute'); const theContentThatShowsFirstInsteadOfSecond = document.getElementById('theContentThatShowsFirstInsteadOfSecond'); +const theContentThatShowsLastInsteadOfFirst = document.getElementById('theContentThatShowsLastInsteadOfFirst'); + const messageLabel = document.getElementById('message'); let widgetLocked = false; // Needed to lock animation from overlapping @@ -63,7 +67,7 @@ const showKofiDonations = GetBooleanParam("showKofiDonations", true); const showTipeeeStreamDonations = GetBooleanParam("showTipeeeStreamDonations", true); const showFourthwallAlerts = GetBooleanParam("showFourthwallAlerts", true); -const animationSpeed = GetIntParam("showTwitchSharedChat", 8000); +const animationSpeed = GetIntParam("animationSpeed", 8000); const furryMode = GetBooleanParam("furryMode", false); @@ -257,9 +261,25 @@ async function TwitchSub(data) { const avatarURL = await GetAvatar(username); if (!isPrime) - UpdateAlertBox('twitch', avatarURL, `${username}`, `subscribed with Tier ${subTier.charAt(0)}`); + UpdateAlertBox( + 'twitch', + avatarURL, + `${username}`, + `subscribed with Tier ${subTier.charAt(0)}`, + '', + username, + '' + ); else - UpdateAlertBox('twitch', avatarURL, `${username}`, `used their Prime Sub`); + UpdateAlertBox( + 'twitch', + avatarURL, + `${username}`, + `used their Prime Sub`, + '', + username, + '' + ); } async function TwitchResub(data) { @@ -283,6 +303,7 @@ async function TwitchResub(data) { `${username}`, `resubscribed with Tier ${subTier.charAt(0)}`, `${cumulativeMonths} months`, + username, message ); else @@ -292,6 +313,7 @@ async function TwitchResub(data) { `${username}`, `used their Prime Sub`, `${cumulativeMonths} months`, + username, message ); } @@ -319,6 +341,7 @@ async function TwitchGiftSub(data) { `${username}`, `gifted a Tier ${subTier.charAt(0)} subscription`, `to ${recipient}`, + username, messageText ); } @@ -342,6 +365,7 @@ async function TwitchRewardRedemption(data) { `${username} redeemed`, `${rewardName} ${channelPointIcon} ${cost}`, '', + username, userInput ); } @@ -363,6 +387,7 @@ async function TwitchRaid(data) { `${username}`, `is raiding with a party of ${viewers}`, '', + username, '' ); } @@ -377,9 +402,10 @@ function YouTubeSuperChat(data) { UpdateAlertBox( 'youtube', avatarURL, - `🪙 ${data.user.name}`, + `${data.user.name}`, `sent a Super Chat (${data.amount})`, '', + data.user.name, data.message ); } @@ -397,6 +423,7 @@ function YouTubeSuperSticker(data) { `${data.user.name}`, `sent a Super Sticker (${data.amount})`, '', + data.user.name, '' ); } @@ -414,6 +441,7 @@ function YouTubeNewSponsor(data) { `⭐ New ${data.levelName}`, `Welcome ${data.user.name}!`, '', + data.user.name, '' ); } @@ -431,6 +459,7 @@ function YouTubeGiftMembershipReceived(data) { `${data.gifter.name}`, `gifted a membership`, `to ${data.user.name} (${data.tier})!`, + data.gifter.name, '' ); } @@ -451,6 +480,7 @@ async function StreamlabsDonation(data) { `${donater}`, `donated ${currency}${formattedAmount}`, ``, + donater, message ); } @@ -471,6 +501,7 @@ async function StreamElementsTip(data) { `${donater}`, `donated ${currency}${formattedAmount}`, ``, + donater, message ); } @@ -492,6 +523,7 @@ function PatreonPledgeCreated(data) { `${user}`, `joined Patreon ($${amount})`, ``, + user, `` ); } @@ -516,6 +548,7 @@ function KofiDonation(data) { `${user}`, `donated $${amount}`, ``, + user, message ); else @@ -524,6 +557,7 @@ function KofiDonation(data) { `${user}`, `donated ${currency} ${amount}`, ``, + user, message ); } @@ -548,6 +582,7 @@ function KofiSubscription(data) { `${user}`, `subscribed ($${amount})`, ``, + user, message ); else @@ -556,6 +591,7 @@ function KofiSubscription(data) { `${user}`, `subscribed (${currency} ${amount})`, ``, + user, message ); } @@ -578,6 +614,7 @@ function KofiResubscription(data) { `${user}`, `subscribed (${tier})`, ``, + user, message ); } @@ -610,6 +647,7 @@ function KofiShopOrder(data) { `${user}`, `ordered ${itemTotal} item(s) on Ko-fi `, `${formattedAmount}`, + user, message ); } @@ -634,6 +672,7 @@ function TipeeeStreamDonation(data) { `${user}`, `donated $${amount}`, ``, + user, message ); else @@ -643,6 +682,7 @@ function TipeeeStreamDonation(data) { `${user}`, `donated ${currency} ${amount}`, ``, + user, message ); } @@ -684,6 +724,7 @@ function FourthwallOrderPlaced(data) { `${user}`, `ordered ${item}`, attributeText, + user, message ); } @@ -712,6 +753,7 @@ function FourthwallDonation(data) { `${user}`, `donated ${formattedAmount}`, '', + user, message ); } @@ -739,6 +781,7 @@ function FourthwallSubscriptionPurchased(data) { `${user}`, `subscribed ${formattedAmount}`, '', + user, '' ); } @@ -779,6 +822,7 @@ function FourthwallGiftPurchase(data) { `${user}`, `gifted ${contents}`, attributesText, + user, message ); } @@ -797,6 +841,7 @@ function FourthwallGiftDrawStarted(data) { `🎁 ${itemName} Giveaway!`, `Type !join in the next ${durationSeconds} seconds for your chance to win!`, '', + '', '' ); } @@ -815,6 +860,7 @@ function FourthwallGiftDrawEnded(data) { `🥳 GIVEAWAY ENDED 🥳`, `Congratulations ${GetWinnersList(data.gifts)}!`, '', + '', '' ); } @@ -1096,12 +1142,12 @@ function GetWinnersList(gifts) { // return furryWords.join(''); // } -function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attributeText, message) { +function UpdateAlertBox(platform, avatarURL, headerText, descriptionText, attributeText, username, message) { // Check if the widget is in the middle of an animation // If any alerts are requested while the animation is playing, it should be added to the alert queue if (widgetLocked) { console.debug("Animation is progress, added alert to queue"); - let data = { platform: platform, avatarURL: avatarURL, usernameText: usernameText, descriptionText: descriptionText, attributeText: attributeText, message: message }; + let data = { platform: platform, avatarURL: avatarURL, headerText: headerText, descriptionText: descriptionText, attributeText: attributeText, message: message }; alertQueue.push(data); return; } @@ -1116,14 +1162,16 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr // Render avatars if (showAvatar) { avatarElement.src = avatarURL; + avatarSmallElement.src = avatarURL; } // Set labels - usernameLabel.innerHTML = usernameText != null ? usernameText : ''; + usernameLabel.innerHTML = headerText != null ? headerText : ''; + usernameTheSecondLabel.innerHTML = username != null ? username : ''; descriptionLabel.innerHTML = descriptionText != null ? descriptionText : ''; attributeLabel.innerHTML = attributeText != null ? attributeText : ''; messageLabel.innerHTML = message != null ? `${message}` : ''; - messageLabel.style.opacity = 0; + theContentThatShowsLastInsteadOfFirst.style.opacity = 0; alertBox.style.height = theContentThatShowsFirstInsteadOfSecond.offsetHeight + 40 + "px"; alertBox.style.animation = 'slideInFromTop 0.5s ease-out forwards'; @@ -1133,13 +1181,11 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr // (3) Calculate the height of message label // (4) Set the height of alertBox // (a) Add in the CSS animation when this is working - setTimeout(() => { - alertBox.style.transition = 'all 0.5s ease-in-out'; - alertBox.style.height = messageLabel.offsetHeight + 40 + "px"; + alertBox.style.height = theContentThatShowsLastInsteadOfFirst.offsetHeight + 40 + "px"; theContentThatShowsFirstInsteadOfSecond.style.opacity = 0; - messageLabel.style.opacity = 1; + theContentThatShowsLastInsteadOfFirst.style.opacity = 1; setTimeout(() => { alertBox.style.animation = 'slideBackUp 0.5s ease-out forwards'; @@ -1147,13 +1193,13 @@ function UpdateAlertBox(platform, avatarURL, usernameText, descriptionText, attr setTimeout(() => { alertBox.style.transition = ''; theContentThatShowsFirstInsteadOfSecond.style.opacity = 1; - messageLabel.style.opacity = 0; + theContentThatShowsLastInsteadOfFirst.style.opacity = 0; alertBox.style.height = '0px'; widgetLocked = false; if (alertQueue.length > 0) { console.debug("Pulling next alert from the queue"); let data = alertQueue.shift(); - UpdateAlertBox(data.platform, data.avatarURL, data.usernameText, data.descriptionText, data.attributeText, data.message) + UpdateAlertBox(data.platform, data.avatarURL, data.headerText, data.descriptionText, data.attributeText, data.message) } }, 1000); }, messageLabel.innerText.trim() != '' ? animationSpeed : 0); diff --git a/multistream-alerts/settings/settings.json b/multistream-alerts/settings/settings.json index 412d29f..e31e2a5 100644 --- a/multistream-alerts/settings/settings.json +++ b/multistream-alerts/settings/settings.json @@ -1,13 +1,5 @@ { "settings": [ - { - "id": "showPlatform", - "label": "Show Platform", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, { "id": "showAvatar", "label": "Show Avatar", @@ -16,46 +8,6 @@ "defaultValue": true, "group": "Appearance" }, - { - "id": "showTimestamps", - "label": "Show Timestamps", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, - { - "id": "showBadges", - "label": "Show Badges", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, - { - "id": "showPronouns", - "label": "Show Pronouns", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, - { - "id": "showUsername", - "label": "Show Username", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, - { - "id": "showMessage", - "label": "Show Message", - "description": "Honestly, if you turn this off, you're stupid lmao", - "type": "checkbox", - "defaultValue": true, - "group": "Appearance" - }, { "id": "font", "label": "Font", @@ -75,13 +27,19 @@ "group": "Appearance" }, { - "id": "lineSpacing", - "label": "Line Spacing", + "id": "showAvatar", + "label": "Show Avatar", "description": "", - "type": "number", - "min": 0, - "defaultValue": 1.7, - "step": ".1", + "type": "checkbox", + "defaultValue": true, + "group": "Appearance" + }, + { + "id": "useCustomBackground", + "label": "Use Custom Background", + "description": "", + "type": "checkbox", + "defaultValue": true, "group": "Appearance" }, { @@ -106,254 +64,90 @@ { "id": "hideAfter", "label": "Hide After", - "description": "Messages fade after X seconds (0 to disable)", + "description": "Alerts will show for X seconds", "type": "number", - "min": 0, + "min": 1, "max": 120, "defaultValue": 0, "group": "General" }, { - "id": "excludeCommands", - "label": "Exclude Commands", - "description": "Hide messages starting with \"!\"", - "type": "checkbox", - "defaultValue": true, - "group": "General" - }, - { - "id": "ignoreChatters", - "label": "Ignore Chatters", - "description": "Ignored chatters will not be shown", - "type": "text", - "defaultValue": "StreamElements,Streamlabs", - "group": "General" - }, - { - "id": "scrollDirection", - "label": "Scroll Direction", + "id": "showAnimation", + "label": "Show Animation", "description": "", "type": "select", "options": [ { - "value": 1, - "label": "Normal" + "value": "fade-in", + "label": "Fade In" }, { - "value": 2, - "label": "Reversed" + "value": "slide-from-top", + "label": "Slide From Top" + }, + { + "value": "slide-from-bottom", + "label": "Slide From Bottom" + }, + { + "value": "slide-from-left", + "label": "Slide From Left" + }, + { + "value": "slide-from-right", + "label": "Slide From Right" } ], - "defaultValue": 1, + "defaultValue": "fade-in", "group": "General" }, { - "id": "inlineChat", - "label": "In-line Chat", - "description": "Remove the line space after the username", - "type": "checkbox", - "defaultValue": false, - "group": "General" - }, - { - "id": "imageEmbedPermissionLevel", - "label": "Embed Images", - "description": "Automatically embed images for these users", - "type": "select", - "options": [ - { - "value": 40, - "label": "Broadcaster" - }, - { - "value": 30, - "label": "Mods & Broadcaster" - }, - { - "value": 20, - "label": "VIPs, Mods & Broadcaster" - }, - { - "value": 15, - "label": "Subs, VIPs, Mods & Broadcaster" - }, - { - "value": 10, - "label": "Everyone" - }, - { - "value": 69420, - "label": "Nobody" - } - ], - "defaultValue": 20, - "group": "General" - }, - { - "id": "showTwitchMessages", - "label": "Chat Messages", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which Twitch messages do you want to see?" - }, - { - "id": "showTwitchAnnouncements", - "label": "Announcements", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which Twitch messages do you want to see?" - }, - { - "id": "showTwitchSubs", - "label": "New Subscribers", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which Twitch messages do you want to see?" - }, - { - "id": "showTwitchChannelPointRedemptions", - "label": "Channel Point Redemptions", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which Twitch messages do you want to see?" - }, - { - "id": "showTwitchRaids", - "label": "Raids", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which Twitch messages do you want to see?" - }, - { - "id": "showTwitchSharedChat", - "label": "Shared Chat Messages", + "id": "hideAnimation", + "label": "Hide Animation", "description": "", "type": "select", "options": [ { - "value": 2, - "label": "Show & Highlight" + "value": "fade-out", + "label": "Fade Out" }, { - "value": 1, - "label": "Show but do not highlight" + "value": "slide-top", + "label": "Slide Top" }, { - "value": 0, - "label": "Do not show" + "value": "slide-bottom", + "label": "Slide Bottom" + }, + { + "value": "slide-left", + "label": "Slide Left" + }, + { + "value": "slide-right", + "label": "Slide Right" } ], - "defaultValue": 2, - "group": "Which Twitch messages do you want to see?" + "defaultValue": "fade-in", + "group": "General" }, { - "id": "showYouTubeMessages", - "label": "Chat Messages", + "id": "alignment", + "label": "Alignment", "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which YouTube messages do you want to see?" - }, - { - "id": "showYouTubeSuperChats", - "label": "Super Chats", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which YouTube messages do you want to see?" - }, - { - "id": "showYouTubeSuperStickers", - "label": "Super Stickers", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which YouTube messages do you want to see?" - }, - { - "id": "showYouTubeMemberships", - "label": "Memberships", - "description": "", - "type": "checkbox", - "defaultValue": true, - "group": "Which YouTube messages do you want to see?" - }, - { - "id": "showStreamlabsDonations", - "label": "Streamlabs Tips", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "showStreamElementsTips", - "label": "StreamElements Tips", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "showPatreonMemberships", - "label": "Patreon Memberships", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "showKofiDonations", - "label": "Ko-fi Donations", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "showTipeeeStreamDonations", - "label": "TipeeeStream Donations", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "showFourthwallAlerts", - "label": "Fourthwall Alerts", - "description": "Click to connect", - "type": "checkbox", - "defaultValue": true, - "group": "Which donation messages do you want to see?" - }, - { - "id": "furryMode", - "label": "Furry Mode", - "description": "Meow", - "type": "checkbox", - "defaultValue": false, - "group": "Very Important Stuff" - }, - { - "id": "address", - "label": "Address", - "description": "Streamer.bot Websocket Server Address", - "type": "text", - "defaultValue": "127.0.0.1", - "group": "Advanced" - }, - { - "id": "port", - "label": "Port", - "description": "Streamer.bot Websocket Server Port", - "type": "text", - "defaultValue": "8080", - "group": "Advanced" + "type": "select", + "options": [ + { + "value": "align-to-bottom", + "label": "Align To Bottom" + }, + { + "value": "align-to-top", + "label": "Align To Top" + } + ], + "defaultValue": "align-to-bottom", + "group": "General" } ] } \ No newline at end of file diff --git a/multistream-alerts/style.css b/multistream-alerts/style.css index 7f6cb8b..0a31fed 100644 --- a/multistream-alerts/style.css +++ b/multistream-alerts/style.css @@ -40,6 +40,7 @@ html { display: block; position: absolute; width: 100%; + height: 100%; padding: calc(2 * var(--margin)); box-sizing: border-box; } @@ -84,6 +85,17 @@ html { transition: inherit; } +#theContentThatShowsLastInsteadOfFirst { + position: absolute; + display: block; + align-items: center; + z-index: 0; + position: absolute; + left: var(--margin); + top: var(--margin); + transition: inherit; +} + #avatar { display: inline; max-width: 100%; @@ -93,6 +105,15 @@ html { margin-right: 0.75em; } +#avatarButItsSmallerThanTheOneFromBeforeForPrettinessPurposes { + display: inline; + max-width: 100%; + height: 2em; + filter: drop-shadow(0px 0px 7px rgba(0, 0, 0, 0.5)); + object-fit: cover; + margin-right: 0.75em; +} + #contents { flex-grow: 1; } @@ -102,6 +123,11 @@ html { font-weight: 600; } +#usernameTheSecond { + font-size: 1em; + font-weight: 600; +} + #description { font-size: 1em; font-weight: 400; @@ -121,7 +147,6 @@ html { } #message { - position: absolute; width: calc(100% - 2 * var(--margin)); z-index: 0; left: var(--margin); @@ -154,6 +179,78 @@ html { } } +@keyframes slideInFromBottom { + 0% { + transform: translateY(100%); + opacity: 0; + } + + 100% { + transform: translateY(0); + opacity: 1; + } +} + +@keyframes slideBackDown { + 0% { + transform: translateY(0); + opacity: 1; + } + + 100% { + transform: translateY(100%); + opacity: 0; + } +} + +@keyframes slideInFromLeft { + 0% { + transform: translateX(-100%); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideBackLeft { + 0% { + transform: translateX(0); + opacity: 1; + } + + 100% { + transform: translateX(-100%); + opacity: 0; + } +} + +@keyframes slideInFromRight { + 0% { + transform: translateX(100%); + opacity: 0; + } + + 100% { + transform: translateX(0); + opacity: 1; + } +} + +@keyframes slideBackRight { + 0% { + transform: translateX(0); + opacity: 1; + } + + 100% { + transform: translateX(100%); + opacity: 0; + } +} + /*****************/ /** CARD COLORS **/ /*****************/