From 30182d272ff8f485aa7efc926cc4d6ba7380ebd0 Mon Sep 17 00:00:00 2001 From: Darius Rapalis Date: Thu, 29 Jun 2023 08:49:35 +0300 Subject: [PATCH] Extracted all colors --- css.css | 30 +- js.js | 1367 +++++++++++++++++++++++++++++-------------------------- 2 files changed, 732 insertions(+), 665 deletions(-) diff --git a/css.css b/css.css index 2e17b7e..614f07f 100644 --- a/css.css +++ b/css.css @@ -7,12 +7,12 @@ */ :root { - /* On streamer message */ + /*!* On streamer message *!*/ --rouded-corners-and-heart-next-to-username-color: #FFDEE6; --top-right-heart-and-bottom-left-heart-color: #FFDEE6; --top-and-bottom-border-lines-color: #FFDEE6; - /* Both streamer and non-streamer messages */ + /*!* Both streamer and non-streamer messages *!*/ --background-gradient-top-color: #491824; --background-gradient-bottom-color: #67192C; --message-text-color: #FFAEC2; @@ -20,21 +20,27 @@ --username-bubble-background-color: #FFDEE6; --username-bubble-text-color: #FF4976; - /* On non-streamer messages */ + /*!* On non-streamer messages *!*/ --right-border-color: #FF4976; --bottom-border-color: #FF4976; --top-border-color: #FF4976; --top-right-border-piece-color: #FF4976; - /* Event bubble */ + /*!* Event bubble *!*/ --event-background-gradient-top-color: #FF5F84; --event-background-gradient-bottom-color: #FF4976; --event-right-border-color: #FFAEC2; --event-icon-background-color: #FFDEE6; --event-text-color: #ffffff; - --#FFAEC2; + --event-top-left-border-color: #FFAEC2; + --event-top-center-border-color: #FFAEC2; + --event-top-right-border-color: #FFAEC2; + --event-bottom-left-border-color: #FFAEC2; + --event-bottom-right-border-color: #FFAEC2; + --event-left-top-border-color: #FFAEC2; + --event-left-bottom-border-color: #FFAEC2; - /* Unknowns */ + /*!* Unknowns *!*/ --unknown-color-1: #00FFFF; /* original value: #FF4976; */ --unknown-color-2: #009999; /* original value: #FF4976; */ } @@ -447,7 +453,7 @@ p { .alert-top-border .separator-2 { height: 4px; - background: var(--event-top-middle-border-color); + background: var(--event-top-center-border-color); border-radius: 10px; width: 100%; } @@ -478,7 +484,7 @@ p { .alert-bottom-border .separator-1 { height: 4px; - background: #FFAEC2; + background: var(--event-bottom-left-border-color); border-radius: 10px; width: 100%; margin-left: 16px; @@ -486,7 +492,7 @@ p { .alert-bottom-border .separator-2 { height: 4px; - background: #FFAEC2; + background: var(--event-bottom-right-border-color); border-radius: 10px; width: 50%; margin-right: 16px; @@ -510,7 +516,7 @@ p { .alert-left-border .separator-1 { height: 100%; - background: #FFAEC2; + background: var(--event-left-top-border-color); border-radius: 10px; width: 4px; margin-top: 16px; @@ -518,7 +524,7 @@ p { .alert-left-border .separator-2 { height: 50%; - background: #FFAEC2; + background: var(--event-left-bottom-border-color); border-radius: 10px; width: 4px; margin-bottom: 16px; @@ -562,4 +568,4 @@ p { opacity: 1; transform: translateY(0); } -} \ No newline at end of file +} diff --git a/js.js b/js.js index 6585cc0..cebe686 100644 --- a/js.js +++ b/js.js @@ -8,6 +8,67 @@ let ver = "1.0" +const colorSettings = { + streamerIconColor: '#FF4976', + modIconColor: '#FF4976', + vipIconColor: '#FF4976', + subIconColor: '#FF4976', + cornerPieceUnderBadgeColor: '#FF4976', + + streamerRightBorderColor: '#FF4976', + + messageMentionedUsernameColor: '#FF4976', + + nonStreamerHeartNextToUsernameColor: '#FF4976', + nonStreamerHeartTopLeftColor: '#FFAEC2', + heartInChatBubbleOnTheRightColor: '#FFAEC2', + nonStreamerTopRightCornerColor: '#FF4976', + nonStreamerBottomRightCornerColor: '#FF4976', + nonStreamerBottomLeftCornerColor: '#FF4976', + nonStreamerHeartBottomLeftColor: '#FFAEC2', + + eventBorderTopRightCornerColor: '#FFAEC2', + eventBorderTopLeftCornerColor: '#FFAEC2', + eventBorderBottomRightCornerColor: '#FFAEC2', + eventBorderBottomLeftCornerColor: '#FFAEC2', + eventTopLeftHeartColor: '#FFAEC2', + eventTopRightHeartColor: '#FFAEC2', + eventBottomHeartColor: '#FFAEC2', + eventLeftHeartColor: '#FFAEC2', + + eventBackgroundLeftEnvelopeInsidesColor: '#FFAEC2', + eventBackgroundLeftEnvelopeOuterBorderColor: '#FFAEC2', + eventBackgroundLeftEnvelopeBottomLeftInsideLineColor: '#FFAEC2', + eventBackgroundLeftEnvelopeBottomRightInsideLineColor: '#FFAEC2', + eventBackgroundLeftEnvelopeInsideTopLinesColor: '#FFAEC2', + + eventBackgroundRightEnvelopeInsidesColor: '#FFAEC2', + eventBackgroundRightEnvelopeOuterBorderColor: '#FFAEC2', + eventBackgroundRightEnvelopeBottomLeftInsideLineColor: '#FFAEC2', + eventBackgroundRightEnvelopeBottomRightInsideLineColor: '#FFAEC2', + eventBackgroundRightEnvelopeInsideTopLinesColor: '#FFAEC2', + + eventBackgroundLeftHeartColor: '#FFAEC2', + unknown_1: '#FFAEC2', + unknown_2: '#FFAEC2', + eventBackgroundLeftWhiskersColor: '#FFDEE6', + eventBackgroundRightWhiskersColor: '#FFDEE6', + eventBackgroundSubscribeHeartLeftColor: '#FF4976', + eventBackgroundSubscribeHeartRightColor: '#FFDEE6', + eventBackgroundReSubscribeHeartLeftColor: '#FF4976', + eventBackgroundReSubscribeHeartRightColor: '#FFDEE6', + eventBackgroundGiftManyHeartLeftColor: '#FF4976', + eventBackgroundGiftManyHeartRightColor: '#FFDEE6', + eventBackgroundGiftOneHeartLeftColor: '#FF4976', + eventBackgroundGiftOneHeartRightColor: '#FFDEE6', + eventBackgroundCheerHeartLeftColor: '#FF4976', + eventBackgroundCheerHeartRightColor: '#FFDEE6', + eventBackgroundDonationHeartLeftColor: '#FF4976', + eventBackgroundDonationHeartRightColor: '#FFDEE6', + + +}; + // Defining useful global variables let msgLimit, hideAfter, hideCommands, provider, hasEmotes, widget_width; let totalMsg = 0; @@ -26,539 +87,539 @@ let previousMsg = null; let displayedMsg = [] let events = { - cheer: { - enabled: false, - min: 1, - class: "cheer" - }, - tip: { - enabled: false, - min: 1, - currency: "$", - class: "tip" - }, - sub: { - enabled: false, - class: "sub" - }, - resub: { - enabled: false, - class: "resub" - }, - gift: { - enabled: false, - class: "gift" - }, - direct: { - enabled: false, - class: "direct" - } + cheer: { + enabled: false, + min: 1, + class: "cheer" + }, + tip: { + enabled: false, + min: 1, + currency: "$", + class: "tip" + }, + sub: { + enabled: false, + class: "sub" + }, + resub: { + enabled: false, + class: "resub" + }, + gift: { + enabled: false, + class: "gift" + }, + direct: { + enabled: false, + class: "direct" + } } // Initial setup on widget startup window.addEventListener('onWidgetLoad', async function (obj) { - // Grabbing chat settings from fields - const fieldData = obj.detail.fieldData; + // Grabbing chat settings from fields + const fieldData = obj.detail.fieldData; - hideAfter = fieldData.hideAfter; - msgLimit = fieldData.messagesLimit; - hideCommands = fieldData.hideCommands; - displayPronouns = fieldData.displayPronouns; + hideAfter = fieldData.hideAfter; + msgLimit = fieldData.messagesLimit; + hideCommands = fieldData.hideCommands; + displayPronouns = fieldData.displayPronouns; - events.cheer.enabled = fieldData.cheerEnabled; - events.cheer.min = fieldData.cheerMin; + events.cheer.enabled = fieldData.cheerEnabled; + events.cheer.min = fieldData.cheerMin; - events.tip.enabled = fieldData.tipEnabled; - events.tip.min = fieldData.tipMin; - events.tip.currency = fieldData.tipCurrency; + events.tip.enabled = fieldData.tipEnabled; + events.tip.min = fieldData.tipMin; + events.tip.currency = fieldData.tipCurrency; - events.sub.enabled = fieldData.subEnabled; + events.sub.enabled = fieldData.subEnabled; - events.resub.enabled = fieldData.resubEnabled; + events.resub.enabled = fieldData.resubEnabled; - events.gift.enabled = fieldData.giftEnabled; + events.gift.enabled = fieldData.giftEnabled; - events.direct.enabled = fieldData.directEnabled; + events.direct.enabled = fieldData.directEnabled; - widget_width = $(document).width(); - channelName = fieldData.testMessageName + widget_width = $(document).width(); + channelName = fieldData.testMessageName - test_streamer = new CustomEvent("onEventReceived", { - detail: { - listener: "message", - event: { - service: "twitch", - data: { - time: Date.now(), - tags: { - "badge-info": "", - badges: "broadcaster/1,subscriber/1", - color: "#5B99FF", - "display-name": "StreamElements", - emotes: "25:46-50", - flags: "", - id: "43285909-412c-4eee-b80d-89f72ba53142", - mod: "1", - "room-id": "85827806", - subscriber: "0", - "tmi-sent-ts": "1579444549265", - turbo: "0", - "user-id": "100135110", - "user-type": "mod" - }, - nick: channelName, - userId: "100135110", - displayName: "Broadcaster", - displayColor: "#5B99FF", - badges: [{ - type: "moderator", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", - description: "Moderator" - }, { - type: "partner", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", - description: "Verified" - }], - channel: channelName, - text: "Check it out - only on Ko-Fi!", - isAction: !1, - emotes: [{ - type: "twitch", - name: "Kappa", - id: "25", - gif: !1, - urls: { - 1: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", - 2: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", - 4: "https://static-cdn.jtvnw.net/emoticons/v1/25/3.0" - }, - start: 46, - end: 50 - }], - msgId: "" - }, - renderedText: 'Lorem Ipsum Broadcaster Test' - } - } - }); + test_streamer = new CustomEvent("onEventReceived", { + detail: { + listener: "message", + event: { + service: "twitch", + data: { + time: Date.now(), + tags: { + "badge-info": "", + badges: "broadcaster/1,subscriber/1", + color: "#5B99FF", + "display-name": "StreamElements", + emotes: "25:46-50", + flags: "", + id: "43285909-412c-4eee-b80d-89f72ba53142", + mod: "1", + "room-id": "85827806", + subscriber: "0", + "tmi-sent-ts": "1579444549265", + turbo: "0", + "user-id": "100135110", + "user-type": "mod" + }, + nick: channelName, + userId: "100135110", + displayName: "Broadcaster", + displayColor: "#5B99FF", + badges: [{ + type: "moderator", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", + description: "Moderator" + }, { + type: "partner", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", + description: "Verified" + }], + channel: channelName, + text: "Check it out - only on Ko-Fi!", + isAction: !1, + emotes: [{ + type: "twitch", + name: "Kappa", + id: "25", + gif: !1, + urls: { + 1: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", + 2: "https://static-cdn.jtvnw.net/emoticons/v1/25/1.0", + 4: "https://static-cdn.jtvnw.net/emoticons/v1/25/3.0" + }, + start: 46, + end: 50 + }], + msgId: "" + }, + renderedText: 'Lorem Ipsum Broadcaster Test' + } + } + }); - test_mod = new CustomEvent("onEventReceived", { - detail: { - listener: "message", - event: { - service: "twitch", - data: { - time: Date.now(), - tags: { - "badge-info": "", - badges: "moderator/1,partner/1", - color: "#5B99FF", - "display-name": "StreamElements", - emotes: "25:46-50", - flags: "", - id: "43285909-412c-4eee-b80d-89f72ba53142", - mod: "1", - "room-id": "85827806", - subscriber: "0", - "tmi-sent-ts": "1579444549265", - turbo: "0", - "user-id": "100135110", - "user-type": "mod" - }, - nick: channelName, - userId: "100135110", - displayName: 'Moderator', - displayColor: "#5B99FF", - badges: [{ - type: "moderator", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", - description: "Moderator" - }, { - type: "partner", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", - description: "Verified" - }], - channel: channelName, - text: "Custom alert are here too! Chat can send you their love-letters.", - isAction: !1, - emotes: [], - msgId: "" - }, - renderedText: 'Test message. ' - } - } - }); + test_mod = new CustomEvent("onEventReceived", { + detail: { + listener: "message", + event: { + service: "twitch", + data: { + time: Date.now(), + tags: { + "badge-info": "", + badges: "moderator/1,partner/1", + color: "#5B99FF", + "display-name": "StreamElements", + emotes: "25:46-50", + flags: "", + id: "43285909-412c-4eee-b80d-89f72ba53142", + mod: "1", + "room-id": "85827806", + subscriber: "0", + "tmi-sent-ts": "1579444549265", + turbo: "0", + "user-id": "100135110", + "user-type": "mod" + }, + nick: channelName, + userId: "100135110", + displayName: 'Moderator', + displayColor: "#5B99FF", + badges: [{ + type: "moderator", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", + description: "Moderator" + }, { + type: "partner", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", + description: "Verified" + }], + channel: channelName, + text: "Custom alert are here too! Chat can send you their love-letters.", + isAction: !1, + emotes: [], + msgId: "" + }, + renderedText: 'Test message. ' + } + } + }); - test_sub = new CustomEvent("onEventReceived", { - detail: { - listener: "message", - event: { - service: "twitch", - data: { - time: Date.now(), - tags: { - "badge-info": "", - badges: "subscriber/1", - color: "#5B99FF", - "display-name": "StreamElements", - emotes: "25:46-50", - flags: "", - id: "43285909-412c-4eee-b80d-89f72ba53142", - mod: "1", - "room-id": "85827806", - subscriber: "0", - "tmi-sent-ts": "1579444549265", - turbo: "0", - "user-id": "100135110", - "user-type": "mod" - }, - nick: channelName, - userId: "100135110", - displayName: 'Subscriber', - displayColor: "#5B99FF", - badges: [{ - type: "moderator", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", - description: "Moderator" - }, { - type: "partner", - version: "1", - url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", - description: "Verified" - }], - channel: channelName, - text: "To celebrate, a Free to Use, Valentine's themed, hearty chat widget.", - isAction: !1, - emotes: [], - msgId: "" - }, - renderedText: 'Test message. ' - } - } - }); + test_sub = new CustomEvent("onEventReceived", { + detail: { + listener: "message", + event: { + service: "twitch", + data: { + time: Date.now(), + tags: { + "badge-info": "", + badges: "subscriber/1", + color: "#5B99FF", + "display-name": "StreamElements", + emotes: "25:46-50", + flags: "", + id: "43285909-412c-4eee-b80d-89f72ba53142", + mod: "1", + "room-id": "85827806", + subscriber: "0", + "tmi-sent-ts": "1579444549265", + turbo: "0", + "user-id": "100135110", + "user-type": "mod" + }, + nick: channelName, + userId: "100135110", + displayName: 'Subscriber', + displayColor: "#5B99FF", + badges: [{ + type: "moderator", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/3267646d-33f0-4b17-b3df-f923a41db1d0/3", + description: "Moderator" + }, { + type: "partner", + version: "1", + url: "https://static-cdn.jtvnw.net/badges/v1/d12a2e27-16f6-41d0-ab77-b780518f00a3/3", + description: "Verified" + }], + channel: channelName, + text: "To celebrate, a Free to Use, Valentine's themed, hearty chat widget.", + isAction: !1, + emotes: [], + msgId: "" + }, + renderedText: 'Test message. ' + } + } + }); - test_reg = new CustomEvent("onEventReceived", { - detail: { - listener: "message", - event: { - service: "twitch", - data: { - time: Date.now(), - tags: { - "badge-info": "", - badges: "", - color: "#5B99FF", - "display-name": "StreamElements", - emotes: "25:46-50", - flags: "", - id: "43285909-412c-4eee-b80d-89f72ba53142", - mod: "1", - "room-id": "85827806", - subscriber: "0", - "tmi-sent-ts": "1579444549265", - turbo: "0", - "user-id": "100135110", - "user-type": "mod" - }, - nick: channelName, - userId: "100135110", - displayName: channelName, - displayColor: "#5B99FF", - badges: [], - channel: channelName, - text: "Test message. Kappa", - isAction: !1, - emotes: [], - msgId: "" - }, - renderedText: 'Test message. ' - } - } - }); - test_reg.detail.event.data.text = fieldData.testMessageText; + test_reg = new CustomEvent("onEventReceived", { + detail: { + listener: "message", + event: { + service: "twitch", + data: { + time: Date.now(), + tags: { + "badge-info": "", + badges: "", + color: "#5B99FF", + "display-name": "StreamElements", + emotes: "25:46-50", + flags: "", + id: "43285909-412c-4eee-b80d-89f72ba53142", + mod: "1", + "room-id": "85827806", + subscriber: "0", + "tmi-sent-ts": "1579444549265", + turbo: "0", + "user-id": "100135110", + "user-type": "mod" + }, + nick: channelName, + userId: "100135110", + displayName: channelName, + displayColor: "#5B99FF", + badges: [], + channel: channelName, + text: "Test message. Kappa", + isAction: !1, + emotes: [], + msgId: "" + }, + renderedText: 'Test message. ' + } + } + }); + test_reg.detail.event.data.text = fieldData.testMessageText; - // Grabbing the service used for chatbox (Twitch, YouTube, Mixer) - fetch('https://api.streamelements.com/kappa/v2/channels/' + obj.detail.channel.id + '/') - .then(response => response.json()).then((profile) => { - provider = profile.provider; - }); + // Grabbing the service used for chatbox (Twitch, YouTube, Mixer) + fetch('https://api.streamelements.com/kappa/v2/channels/' + obj.detail.channel.id + '/') + .then(response => response.json()).then((profile) => { + provider = profile.provider; + }); - removeSelector = ".message-row:nth-last-child(n+" + (msgLimit + 1) + ")" + removeSelector = ".message-row:nth-last-child(n+" + (msgLimit + 1) + ")" - // Setting up the list of users whose messages will be ignored - ignoredUsers = fieldData.ignoredUsers.toLowerCase() - .replace(" ", "").split(","); - commands = fieldData.ignoredCommands.toLowerCase() - .replace(" ", "").split(","); + // Setting up the list of users whose messages will be ignored + ignoredUsers = fieldData.ignoredUsers.toLowerCase() + .replace(" ", "").split(","); + commands = fieldData.ignoredCommands.toLowerCase() + .replace(" ", "").split(","); }); // Listen for StreamElements events window.addEventListener('onEventReceived', function (obj) { - // Define what to do on different events + // Define what to do on different events - if (obj.detail.event.listener === 'widget-button') { - switch (obj.detail.event.field) { - case 'testMessage': - test_streamer.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) - window.dispatchEvent(test_streamer); - break; - case 'testMessage1': - test_mod.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) - window.dispatchEvent(test_mod); - break - case 'testMessage2': - test_sub.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) - window.dispatchEvent(test_sub); - break - case 'testMessage3': - test_reg.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) - window.dispatchEvent(test_reg); - break - } + if (obj.detail.event.listener === 'widget-button') { + switch (obj.detail.event.field) { + case 'testMessage': + test_streamer.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) + window.dispatchEvent(test_streamer); + break; + case 'testMessage1': + test_mod.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) + window.dispatchEvent(test_mod); + break + case 'testMessage2': + test_sub.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) + window.dispatchEvent(test_sub); + break + case 'testMessage3': + test_reg.detail.event.data.msgId = (Math.random() + 1).toString(36).substring(7) + (Math.random() + 1).toString(36).substring(7) + window.dispatchEvent(test_reg); + break + } + } + + // Check for events that correspond to message deletion + if (obj.detail.listener === "delete-message") { + const msgId = obj.detail.event.msgId; + $(`.message-row[data-msgid=${msgId}]`).remove(); + return; + } else if (obj.detail.listener === "delete-messages") { + const sender = obj.detail.event.userId; + $(`.message-row[data-sender=${sender}]`).remove(); + return; + } + + if (obj.detail.listener === "cheer-latest") { + let evt = obj.detail.event; + let username = evt.name; + let amount = evt.amount; + if (amount < events.cheer.min || !events.cheer.enabled) { + return + } + alertCheer(username, amount); + return + } + + if (obj.detail.listener === "tip-latest") { + let evt = obj.detail.event; + let username = evt.name; + let amount = evt.amount; + if (amount < events.tip.min || !events.tip.enabled) { + return + } + alertTip(username, amount); + return + } + + if (obj.detail.listener === "subscriber-latest") { + let evt = obj.detail.event; + let username = evt.name; + let amount = evt.amount; + let bulkGifted = evt.bulkGifted; + let sender = evt.sender; + let isCommunityGift = false; + isCommunityGift = evt.isCommunityGift; + + let gifted = false; + gifted = evt.gifted; + + if (isCommunityGift) return; + + if (bulkGifted && events.gift.enabled) { + alertBulkGift(username, amount); + } else if (gifted && events.direct.enabled) { + alertGift(sender, username); + } else if (amount > 1 && events.resub.enabled) { + alertReSub(username, amount); + } else if (events.sub.enabled) { + alertSub(username); + } + return; + } + + // Check if the event is a chat message + if (obj.detail.listener === "message") { + let data = obj.detail.event.data; + + if (ignoredUsers.indexOf(data.nick) !== -1) { + return; } - // Check for events that correspond to message deletion - if (obj.detail.listener === "delete-message") { - const msgId = obj.detail.event.msgId; - $(`.message-row[data-msgid=${msgId}]`).remove(); - return; - } else if (obj.detail.listener === "delete-messages") { - const sender = obj.detail.event.userId; - $(`.message-row[data-sender=${sender}]`).remove(); - return; + let role = check_role(data); + let name = data.displayName; + let message = attachEmotes(data); + + let badges = ``; + if (displayBadges) { + for (let i = 0; i < data.badges.length; i++) { + badge = data.badges[i]; + badges += ` `; + } } - if (obj.detail.listener === "cheer-latest") { - let evt = obj.detail.event; - let username = evt.name; - let amount = evt.amount; - if (amount < events.cheer.min || !events.cheer.enabled) { - return - } - alertCheer(username, amount); - return + const emoteOnly = isEmote(data); + + const isCommand = commands.some(prefix => data.text.startsWith(prefix)); + if (isCommand && hideCommands === "yes") { + return; } - if (obj.detail.listener === "tip-latest") { - let evt = obj.detail.event; - let username = evt.name; - let amount = evt.amount; - if (amount < events.tip.min || !events.tip.enabled) { - return - } - alertTip(username, amount); - return + let pn = null; + + const pn_api = fetch('https://pronouns.alejo.io/api/users/' + data.displayName.toLowerCase()) + .then((response) => response.json()) + .then((user) => { + if (!user.length) { + return null; + } else return user[0].pronoun_id; + }); + + const printAddress = async () => { + pn = await pn_api; + switch (pn) { + case "aeaer": + pn = "ae/aer"; + break; + case "eem": + pn = "e/em"; + break; + case "faefaer": + pn = "fae/faer"; + break; + case "hehim": + pn = "he/him"; + break; + case "heshe": + pn = "he/she"; + break; + case "hethem": + pn = "he/they"; + break; + case "itits": + pn = "it/its"; + break; + case "perper": + pn = "per/per"; + break; + case "sheher": + pn = "she/her"; + break; + case "shethem": + pn = "she/they"; + break; + case "theythem": + pn = "they/them"; + break; + case "vever": + pn = "ve/ver"; + break; + case "xexem": + pn = "xe/xem"; + break; + case "ziehir": + pn = "zie/hir"; + break; + default: + break; + } + return pn; } - if (obj.detail.listener === "subscriber-latest") { - let evt = obj.detail.event; - let username = evt.name; - let amount = evt.amount; - let bulkGifted = evt.bulkGifted; - let sender = evt.sender; - let isCommunityGift = false; - isCommunityGift = evt.isCommunityGift; - - let gifted = false; - gifted = evt.gifted; - - if (isCommunityGift) return; - - if (bulkGifted && events.gift.enabled) { - alertBulkGift(username, amount); - } else if (gifted && events.direct.enabled) { - alertGift(sender, username); - } else if (amount > 1 && events.resub.enabled) { - alertReSub(username, amount); - } else if (events.sub.enabled) { - alertSub(username); - } - return; - } - - // Check if the event is a chat message - if (obj.detail.listener === "message") { - let data = obj.detail.event.data; - - if (ignoredUsers.indexOf(data.nick) !== -1) { - return; - } - - let role = check_role(data); - let name = data.displayName; - let message = attachEmotes(data); - - let badges = ``; - if (displayBadges) { - for (let i = 0; i < data.badges.length; i++) { - badge = data.badges[i]; - badges += ` `; - } - } - - const emoteOnly = isEmote(data); - - const isCommand = commands.some(prefix => data.text.startsWith(prefix)); - if (isCommand && hideCommands === "yes") { - return; - } - - let pn = null; - - const pn_api = fetch('https://pronouns.alejo.io/api/users/' + data.displayName.toLowerCase()) - .then((response) => response.json()) - .then((user) => { - if (!user.length) { - return null; - } else return user[0].pronoun_id; - }); - - const printAddress = async () => { - pn = await pn_api; - switch (pn) { - case "aeaer": - pn = "ae/aer"; - break; - case "eem": - pn = "e/em"; - break; - case "faefaer": - pn = "fae/faer"; - break; - case "hehim": - pn = "he/him"; - break; - case "heshe": - pn = "he/she"; - break; - case "hethem": - pn = "he/they"; - break; - case "itits": - pn = "it/its"; - break; - case "perper": - pn = "per/per"; - break; - case "sheher": - pn = "she/her"; - break; - case "shethem": - pn = "she/they"; - break; - case "theythem": - pn = "they/them"; - break; - case "vever": - pn = "ve/ver"; - break; - case "xexem": - pn = "xe/xem"; - break; - case "ziehir": - pn = "zie/hir"; - break; - default: - break; - } - return pn; - } - - printAddress().then(pn => addMessage(name, null, role, badges, message, emoteOnly, data.isAction, data.userId, data.msgId, pn)); - } + printAddress().then(pn => addMessage(name, null, role, badges, message, emoteOnly, data.isAction, data.userId, data.msgId, pn)); + } }); // A function that renders the message in DOM function addMessage(name, reply, badge, badges, message, isEmote, isAction, userId, msgId, pn) { - // Advance the counter of total messages by 1 to keep track - // of how many there are at any point - totalMsg += 1; - // Define a CSS class for a certain action - const actionClass = isAction ? "action" : ""; - const emoteOnly = isEmote ? "emote-only" : ""; + // Advance the counter of total messages by 1 to keep track + // of how many there are at any point + totalMsg += 1; + // Define a CSS class for a certain action + const actionClass = isAction ? "action" : ""; + const emoteOnly = isEmote ? "emote-only" : ""; - let pn_none = "" - if (!displayPronouns || pn == null) { - pn_none = "style='display: none'" + let pn_none = "" + if (!displayPronouns || pn == null) { + pn_none = "style='display: none'" + } + + const mentions = message.match(/@\S+/g) + if (mentions) { + for (var i = 0; i < mentions.length; i++) { + message = message.replace(mentions[i], `

${mentions[i]}

`) } + } - const mentions = message.match(/@\S+/g) - if (mentions) { - for (var i = 0; i < mentions.length; i++) { - message = message.replace(mentions[i], `

${mentions[i]}

`) - } - } + let roleIcon, broadcasterClass; - let roleIcon, broadcasterClass; + broadcasterClass = ''; + let broadcasterBorder = ''; + let broadcasterFill = ''; - broadcasterClass = ''; - let broadcasterBorder = ''; - let broadcasterFill = ''; - - role = badge[0] - switch (role) { - case "broadcaster": - roleIcon = ` + role = badge[0] + switch (role) { + case "broadcaster": + roleIcon = `
- +
` - broadcasterClass = 'white-border'; - broadcasterFill = 'white-fill'; - broadcasterBorder = 'style="border-right: solid 4px #FFDEE6 !important;"' - break - case "moderator": - roleIcon = ` + broadcasterClass = 'white-border'; + broadcasterFill = 'white-fill'; + broadcasterBorder = 'style="border-right: solid 4px '+colorSettings.streamerRightBorderColor+' !important;"' + break + case "moderator": + roleIcon = `
+ fill="${colorSettings.modIconColor}" />
` - break - case "vip": - roleIcon = ` + break + case "vip": + roleIcon = `
+ fill="${colorSettings.vipIconColor}" />
` - break - case "artist": - roleIcon = `` - break - case "subscriber": - roleIcon = ` + break + case "artist": + roleIcon = `` + break + case "subscriber": + roleIcon = `
+ fill="${colorSettings.subIconColor}" />
` - break; - default: - roleIcon = `` - break - } + break; + default: + roleIcon = `` + break + } - name_ = name.concat(""); + name_ = name.concat(""); - let fullMsg = ` + let fullMsg = `
@@ -569,7 +630,7 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user + fill="${colorSettings.cornerPieceUnderBadgeColor}" />
@@ -585,7 +646,7 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user + stroke="${colorSettings.nonStreamerHeartNextToUsernameColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
@@ -593,7 +654,7 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user + fill="${colorSettings.nonStreamerHeartTopLeftColor}" />
@@ -607,14 +668,14 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user
-
-
@@ -627,14 +688,14 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user + stroke="${colorSettings.heartInChatBubbleOnTheRightColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
- @@ -642,7 +703,7 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.nonStreamerHeartBottomLeftColor}" />
@@ -655,54 +716,54 @@ function addMessage(name, reply, badge, badges, message, isEmote, isAction, user
` - const element = $.parseHTML(fullMsg); + const element = $.parseHTML(fullMsg); - if (hideAfter !== 999) { - $(element).appendTo('.main-container').delay(hideAfter * 1000).animate({ - opacity: 0 - }, 'fast', function () { - $(element).remove(); - }); - } else { - $(element).appendTo('.main-container'); - } + if (hideAfter !== 999) { + $(element).appendTo('.main-container').delay(hideAfter * 1000).animate({ + opacity: 0 + }, 'fast', function () { + $(element).remove(); + }); + } else { + $(element).appendTo('.main-container'); + } - // Removes messages if the total number - // of messages goes over the limit - if (totalMsg > msgLimit) { - removeRow(); - } + // Removes messages if the total number + // of messages goes over the limit + if (totalMsg > msgLimit) { + removeRow(); + } } function appendAlert(block) { - let alertTemplate = ` + let alertTemplate = `
-
- +
-
-
@@ -713,7 +774,7 @@ function appendAlert(block) { + stroke="${colorSettings.eventTopLeftHeartColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
@@ -721,7 +782,7 @@ function appendAlert(block) { + fill="${colorSettings.eventTopRightHeartColor}" />
@@ -734,7 +795,7 @@ function appendAlert(block) { xmlns="http://www.w3.org/2000/svg"> + stroke="${colorSettings.eventBottomHeartColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
@@ -747,7 +808,7 @@ function appendAlert(block) { xmlns="http://www.w3.org/2000/svg"> + stroke="${colorSettings.eventLeftHeartColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" />
@@ -759,7 +820,7 @@ function appendAlert(block) {
- + + fill="${colorSettings.eventBackgroundLeftEnvelopeInsidesColor}" /> - + - + stroke="${colorSettings.eventBackgroundLeftEnvelopeInsideTopLinesColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> + fill="${colorSettings.eventBackgroundRightEnvelopeInsidesColor}" /> - + - + stroke="${colorSettings.eventBackgroundRightEnvelopeInsideTopLinesColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> + stroke="${colorSettings.unknown_1}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> + stroke="${colorSettings.unknown_2}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> + stroke="${colorSettings.eventBackgroundLeftHeartColor}" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" /> @@ -813,7 +874,7 @@ function appendAlert(block) {
-
@@ -822,7 +883,7 @@ function appendAlert(block) {
-
@@ -832,30 +893,30 @@ function appendAlert(block) {
` - let element; - element = $.parseHTML(alertTemplate); + let element; + element = $.parseHTML(alertTemplate); - if (hideAfter !== 999) { - $(element).appendTo('.main-container').delay(hideAfter * 1000).animate({ - opacity: 0 - }, 'fast', function () { - $(element).remove(); - }); - } else { - $(element).appendTo('.main-container'); - } + if (hideAfter !== 999) { + $(element).appendTo('.main-container').delay(hideAfter * 1000).animate({ + opacity: 0 + }, 'fast', function () { + $(element).remove(); + }); + } else { + $(element).appendTo('.main-container'); + } - // Removes messages if the total number - // of messages goes over the limit - if (totalMsg > msgLimit) { - removeRow(); - } + // Removes messages if the total number + // of messages goes over the limit + if (totalMsg > msgLimit) { + removeRow(); + } } function alertSub(username) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -864,12 +925,12 @@ function alertSub(username) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundSubscribeHeartLeftColor}" />
-
@@ -884,12 +945,12 @@ function alertSub(username) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } function alertReSub(username, amount) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -898,12 +959,12 @@ function alertReSub(username, amount) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundReSubscribeHeartLeftColor}" />
-
@@ -918,12 +979,12 @@ function alertReSub(username, amount) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } function alertBulkGift(username, amount) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -932,12 +993,12 @@ function alertBulkGift(username, amount) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundGiftManyHeartLeftColor}" />
-
@@ -952,12 +1013,12 @@ function alertBulkGift(username, amount) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } function alertGift(sender, target) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -966,12 +1027,12 @@ function alertGift(sender, target) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundGiftOneHeartLeftColor}" />
-
@@ -986,12 +1047,12 @@ function alertGift(sender, target) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } function alertCheer(username, amount) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -1000,12 +1061,12 @@ function alertCheer(username, amount) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundCheerHeartLeftColor}" />
-
@@ -1020,12 +1081,12 @@ function alertCheer(username, amount) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } function alertTip(username, amount) { - totalMsg += 1; - let block_to_append = ` + totalMsg += 1; + let block_to_append = `
@@ -1034,12 +1095,12 @@ function alertTip(username, amount) { xmlns="http://www.w3.org/2000/svg"> + fill="${colorSettings.eventBackgroundDonationHeartLeftColor}" />
-
@@ -1054,132 +1115,132 @@ function alertTip(username, amount) {
` - appendAlert(block_to_append) + appendAlert(block_to_append) } // A set of helper functions to handle emotes function attachEmotes(message) { - let text = html_encode(message.text); - let data = message.emotes; - if (data[0]) { - hasEmotes = "has-emotes" - } else { - hasEmotes = "" + let text = html_encode(message.text); + let data = message.emotes; + if (data[0]) { + hasEmotes = "has-emotes" + } else { + hasEmotes = "" + } + let isEmoteOnly = isEmote(message) + if (typeof message.attachment !== "undefined") { + if (typeof message.attachment.media !== "undefined") { + if (typeof message.attachment.media.image !== "undefined") { + text = `${message.text}`; + } } - let isEmoteOnly = isEmote(message) - if (typeof message.attachment !== "undefined") { - if (typeof message.attachment.media !== "undefined") { - if (typeof message.attachment.media.image !== "undefined") { - text = `${message.text}`; + } + return text + .replace( + /([^\s]*)/gi, + function (m, key) { + let result = data.filter(emote => { + return html_encode(emote.name) === key + }); + if (typeof result[0] !== "undefined") { + let url; + if (isEmoteOnly) { + url = result[0]['urls'][4]; + } else { + url = result[0]['urls'][1]; + } + if (provider === "twitch") { + return ``; + } else { + if (typeof result[0].coords === "undefined") { + result[0].coords = { + x: 0, + y: 0 + }; } - } - } - return text - .replace( - /([^\s]*)/gi, - function (m, key) { - let result = data.filter(emote => { - return html_encode(emote.name) === key - }); - if (typeof result[0] !== "undefined") { - let url; - if (isEmoteOnly) { - url = result[0]['urls'][4]; - } else { - url = result[0]['urls'][1]; - } - if (provider === "twitch") { - return ``; - } else { - if (typeof result[0].coords === "undefined") { - result[0].coords = { - x: 0, - y: 0 - }; - } - let x = parseInt(result[0].coords.x); - let y = parseInt(result[0].coords.y); + let x = parseInt(result[0].coords.x); + let y = parseInt(result[0].coords.y); - let width = "28px"; - let height = "auto"; - - if (provider === "mixer") { - if (result[0].coords.width) { - width = `${result[0].coords.width}px`; - } - if (result[0].coords.height) { - height = `${result[0].coords.height}px`; - } - } - return `
`; - } - } else return key; + let width = "28px"; + let height = "auto"; + if (provider === "mixer") { + if (result[0].coords.width) { + width = `${result[0].coords.width}px`; + } + if (result[0].coords.height) { + height = `${result[0].coords.height}px`; + } } - ); + return `
`; + } + } else return key; + + } + ); } function html_encode(e) { - return e.replace(/[<>"^]/g, function (e) { - return "&#" + e.charCodeAt(0) + ";"; - }); + return e.replace(/[<>"^]/g, function (e) { + return "&#" + e.charCodeAt(0) + ";"; + }); } function check_role(data) { - let role - let badges = data.tags.badges; - if (badges.includes('broadcaster')) { - role = 'broadcaster' - } else if (badges.includes('moderator')) { - role = 'moderator' - } else if (badges.includes('vip')) { - role = 'vip' - } else if (badges.includes('artist-badge')) { - role = 'artist' - } else if (badges.includes('subscriber')) { - role = 'subscriber' - } + let role + let badges = data.tags.badges; + if (badges.includes('broadcaster')) { + role = 'broadcaster' + } else if (badges.includes('moderator')) { + role = 'moderator' + } else if (badges.includes('vip')) { + role = 'vip' + } else if (badges.includes('artist-badge')) { + role = 'artist' + } else if (badges.includes('subscriber')) { + role = 'subscriber' + } - let isSub = false - if (badges.includes('subscriber')) { - isSub = true - } + let isSub = false + if (badges.includes('subscriber')) { + isSub = true + } - return [role, isSub] + return [role, isSub] } function removeRow() { - if (!$(removeSelector).length) { - return; - } + if (!$(removeSelector).length) { + return; + } - $(removeSelector).stop(true) + $(removeSelector).stop(true) - $(removeSelector).animate({ - opacity: 0 - }, 'fast', function () { - $(removeSelector).remove(); - }); + $(removeSelector).animate({ + opacity: 0 + }, 'fast', function () { + $(removeSelector).remove(); + }); } function isEmote(data) { - let msg = data.text; - msg = msg.replace(/\s\s+/g, ' '); - let msg_split = msg.split(" "); + let msg = data.text; + msg = msg.replace(/\s\s+/g, ' '); + let msg_split = msg.split(" "); - let emotes = data.emotes; + let emotes = data.emotes; - let emoteOnly = true; - const emote_names = emotes.map((e) => e.name); + let emoteOnly = true; + const emote_names = emotes.map((e) => e.name); - for (let i = 0; i < msg_split.length; i++) { - if (!emote_names.includes(msg_split[i])) { - emoteOnly = false - } + for (let i = 0; i < msg_split.length; i++) { + if (!emote_names.includes(msg_split[i])) { + emoteOnly = false } - return emoteOnly; + } + return emoteOnly; } function getRandomInt(max) { - return Math.floor(Math.random() * max); -} \ No newline at end of file + return Math.floor(Math.random() * max); +}