+
+
+
+
+
+
+
+
+ 0
+
+
+
+
+ 0
+ 0
+
+
+
+
+ 0
+ 0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/app.css b/css/app.css
new file mode 100644
index 0000000..e0dd47e
--- /dev/null
+++ b/css/app.css
@@ -0,0 +1,400 @@
+/* Basic reset and styling */
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+.sn-notify-outline { --sn-notify-background-color: #27272a; }
+.sn-notify-outline .sn-notify-title { --sn-notify-title-color: #FFFFFF; }
+.sn-notify-outline .sn-notify-text { --sn-notify-text-color: rgba(255,255,255,0.5); }
+
+/* Full-page container styling */
+html {
+ width: 100vw;
+ height: 100vh;
+ font-family: "Inter", sans-serif;
+ scroll-behavior: smooth;
+ overflow-wrap: break-word;
+}
+
+
+body {
+ background-color: #121212;
+ overflow: hidden;
+}
+
+.wrapper {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+
+#chat {
+ position: absolute;
+ width: 100%;
+ bottom: 0px;
+ padding: 20px;
+}
+
+#chat .message {
+ color: #FFF;
+ font-size: 18px;
+ line-height: 150%;
+ text-shadow: 2px 2px 2px rgba(0,0,0,0.75);
+ transition: all ease-in-out 300ms;
+ margin: 5px 0;
+}
+
+#chat .message img {
+ height: 22px;
+ vertical-align: middle;
+}
+
+#chat .message .text img.gigantify {
+ height: 84px;
+ display: block;
+ margin: 10px 0 5px 0;
+}
+
+#chat .message .user { font-weight: bold; }
+
+#chat .message .time {
+ display: inline-block;
+ background: rgba(0,0,0,0.5);
+ font-size: 12px;
+ padding: 0px 10px;
+ border-radius: 5px;
+}
+
+#chat .message .avatar {
+ display: inline-block;
+ margin: 2px 0px;
+}
+
+#chat .message .avatar img {
+ height: 28px;
+ border-radius: 100px;
+}
+
+#chat .message .platform {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ background: #000;
+ width: 24px;
+ height: 24px;
+ font-size: 18px;
+ transform: translateY(2px);
+ border-radius: 5px;
+ text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
+}
+
+#chat .message .badges i {
+ display: inline-flex;
+ justify-content: center;
+ align-items: center;
+ background: #000;
+ width: 24px;
+ height: 24px;
+ font-size: 12px;
+ border-radius: 5px;
+ margin: 0 5px 0 0;
+ text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
+}
+
+#chat .message .reply {
+ max-width: 100%;
+ flex-basis: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+
+ font-size: 14px;
+ color: #999;
+}
+
+#chat .message .reply i {
+ transform: rotate(90deg);
+ margin: 0 5px;
+}
+
+
+#chat .message .shared {
+ max-width: 100%;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ display: block;
+ text-shadow: none;
+ font-size: 14px;
+ margin: 2px 0;
+ color: #999;
+}
+
+#chat .message .shared span {
+ display: inline-block;
+ border-radius: 5px;
+ padding: 2px 10px 2px 5px;
+ background: #a970ff;
+ color: #fff;
+}
+
+#chat .message .shared i {
+ margin: 0 3px;
+}
+
+
+#chat .message.event {
+ text-shadow: 2px 2px 2px rgba(0,0,0,0.25);
+ font-size: 16px;
+}
+
+#chat .message.event .platform {
+ background: none;
+ margin: 2px 7px 0 6px;
+ transform: translateY(0px);
+}
+
+#chat .message.event > div {
+ padding: 5px 15px 5px 5px;
+ margin: 2px 0 0 0;
+ border-radius: 5px;
+ background: rgba(0,0,0,0.15);
+ display: inline-flex;
+ align-items: center;
+}
+
+
+
+/*#chat .message.twitch .platform { background: #a970ff; }*/
+
+#chat .message.twitch .platform { color: #a970ff; background: transparent !important; text-shadow: 0px 0px 0px #a970ff;}
+#chat .message.twitch .platform::after {
+ content: '';
+ background: #FFF;
+ width: 11px;
+ height: 10px;
+ position: absolute;
+ z-index: -1;
+ transform: translate(1px,-3px);
+}
+#chat .message.twitch.event .platform {
+ color: #FFF;
+}
+#chat .message.twitch.event .platform::after {
+ background: transparent;
+ text-shadow: none;
+}
+
+
+#chat .message.twitch .badges img { margin: 0 2px; }
+#chat .message.twitch.event > div {
+ background: rgba(169,112,255,0.85);
+ background: linear-gradient(180deg, rgba(169,112,255,0.85) 0%, rgba(95,67,138,0.85) 100%);
+}
+#chat .message.twitch.event .platform { background: transparent; }
+
+#chat .message.twitch.announcement > div {
+ padding: 10px 15px 13px 10px;
+ display: inline-block;
+ border-bottom: 2px solid #ffcc00;
+ background: rgba(18,18,18,0.85);
+ background: linear-gradient(180deg, rgba(18,18,18,0.85) 1%, rgba(0,0,0,0.85) 100%);
+}
+
+#chat .message.twitch.announcement .reply {
+ padding: 2px;
+ color: #ffcc00;
+}
+
+#chat .message.twitch.announcement .reply i {
+ transform: rotate(0deg);
+}
+
+#chat .message.twitch.announcement .platform {
+ margin: 0;
+}
+
+#chat .message.twitch.rewards-redemption > div {
+ padding: 10px 15px 13px 10px;
+ display: inline-block;
+ border-bottom: 2px solid #ffcc00;
+ background: rgba(18,18,18,0.85);
+ background: linear-gradient(180deg, rgba(18,18,18,0.85) 1%, rgba(0,0,0,0.85) 100%);
+}
+#chat .message.twitch.rewards-redemption .reply {
+ padding: 2px;
+ color: #FFF;
+}
+
+#chat .message.twitch.rewards-redemption .reply i {
+ transform: rotate(0deg);
+ color: #ffcc00;
+}
+
+#chat .message.twitch.rewards-redemption .platform {
+ margin: 0;
+}
+
+
+
+
+
+
+
+
+/*#chat .message.youtube .platform { background: #ff0000; }*/
+#chat .message.youtube .platform { color: #FF0000; background: transparent !important; }
+#chat .message.youtube .platform::after { content: ''; background: #FFF; width: 5px; height: 5px; position: absolute; z-index: -1; }
+
+#chat .message.youtube.event .platform { color: #FFF; }
+#chat .message.youtube.event .platform::after { background: transparent; }
+
+#chat .message.youtube.event > div {
+ background: rgba(255,0,0,0.85);
+ background: linear-gradient(180deg, rgba(255,0,0,0.85) 1%, rgba(136,0,0,0.85) 100%);
+}
+#chat .message.youtube.event .platform { background: transparent; }
+
+
+#chat .message.youtube.owner .user {
+ background: #ffd600;
+ color: #121212 !important;
+ border-radius: 5px;
+ padding: 2px 5px;
+ margin-right: 5px;
+ text-shadow: 2px 2px 2px rgba(0,0,0,0);
+}
+
+#chat .message.youtube.owner .badges i.fa-solid.fa-video { background: #ff0000 }
+
+#chat .message.youtube.mod .user { color: #5e84f1 !important; }
+#chat .message.youtube.mod .badges i.fa-solid.fa-wrench { background: #5e84f1 }
+
+#chat .message.youtube.sub .user { color: #2ba640 !important; }
+#chat .message.youtube.sub .badges i.fa-solid.fa-star { background: #2ba640; }
+
+#chat .message.youtube .badges i.fa-solid.fa-check { background: #999; }
+
+
+#chat .message.youtube.event.supersticker > div .platform { order: 1; }
+#chat .message.youtube.event.supersticker > div .sticker {
+ order: 2;
+ width: 48px;
+ height: 48px;
+ filter: drop-shadow(0px 0px 6px rgba(0,0,0,1));
+ padding: 5px 10px 5px 0;
+}
+#chat .message.youtube.event.supersticker > div .sticker img {
+ width: 100%;
+ height: 100%;
+}
+#chat .message.youtube.event.supersticker > div .info { order: 3; }
+
+
+
+
+
+#chat .message.streamlabs .platform { background: #80f5d2; }
+#chat .message.streamlabs.event > div {
+ background: rgba(128,245,210,0.85);
+ background: linear-gradient(180deg, rgba(128,245,210,0.85) 1%, rgba(8,108,78,0.85) 100%);
+}
+#chat .message.streamlabs.event .platform { background: transparent; }
+
+
+
+#chat .message.streamelements .platform { background: #2700ff; }
+#chat .message.streamelements.event > div {
+ background: rgba(39,0,255,0.85);
+ background: linear-gradient(180deg, rgba(39,0,255,0.85) 1%, rgba(13,0,88,0.85) 100%);
+}
+#chat .message.streamelements.event .platform { background: transparent; }
+
+
+
+
+
+
+
+/*#chat .message.tiktok .platform { background: #000; }*/
+#chat .message.tiktok .platform { color: #FFF; background: transparent !important; }
+
+#chat .message.tiktok.event > div {
+ background: rgba(255,0,80,0.85);
+ background: linear-gradient(180deg, rgba(255,0,80,0.85) 1%, rgba(120,0,38,0.85) 100%);
+}
+#chat .message.tiktok.event .platform { background: transparent; }
+
+#chat .message.tiktok.mod .badges i.fa-solid.fa-wrench {
+ background: #121212;
+}
+
+
+
+
+
+
+
+
+#chat.horizontal {
+ display: flex;
+ align-items: flex-end;
+ width: max-content;
+ right: 0;
+ gap: 15px;
+}
+
+
+
+#statistics {
+ position: fixed;
+ z-index: 11;
+ width: 100%;
+ top: 0; left: 0;
+ padding: 20px;
+ font-size: 14px;
+ display: flex;
+ gap: 15px;
+ justify-content: flex-end;
+ backdrop-filter: blur(5px);
+ font-weight: bold;
+ -webkit-mask-image: linear-gradient(to top, transparent, black 40%);
+ mask-image: linear-gradient(to top, transparent, black 40%);
+}
+
+
+#statistics .platform {
+ background: #000;
+ color: #FFF;
+ padding: 10px 15px;
+ border-radius: 100px;
+
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-wrap: nowrap;
+}
+
+#statistics .platform i.fa-brands {
+ margin-right: 5px;
+}
+
+#statistics .platform > span {
+ display: inline-block;
+ margin: 0 5px;
+}
+
+#statistics .platform#twitch {
+ background: #a970ff;
+}
+
+#statistics .platform#youtube {
+ background: #FF0000;
+}
+
+#statistics .platform#tiktok {
+ background: #ff0050;
+}
\ No newline at end of file
diff --git a/css/settings.css b/css/settings.css
new file mode 100644
index 0000000..11f6bc7
--- /dev/null
+++ b/css/settings.css
@@ -0,0 +1,413 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Inter", sans-serif;
+ scroll-behavior: smooth;
+ overflow-wrap: break-word;
+ background-color: #121212;
+ color: #FFF;
+ text-align: center;
+ padding: 30px;
+ font-size: 16px;
+}
+
+a { color: #ffcc00; }
+
+
+#chat-divided {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ gap: 30px;
+}
+
+#chat-settings { width: 640px; }
+#chat-preview { width: calc(100% - 640px); }
+
+#chat-preview iframe {
+ position: sticky;
+ top: 30px;
+ left: 0;
+ width: 100%;
+ height: calc(100vh - 60px);
+}
+
+.url-bar {
+ margin: 20px 0;
+ font-size: 16px;
+}
+
+.url-bar input[type=text] {
+ font-family: "Inter", sans-serif;
+ border: none;
+ background: #171717;
+ color: #FFF;
+ padding: 15px 30px;
+ border-radius: 10px;
+ width: 100%;
+ text-align: center;
+ outline: none;
+ font-size: 14px;
+}
+
+
+.url-bar button {
+ font-family: "Inter", sans-serif;
+ font-weight: bold;
+ border: none;
+ padding: 15px 30px;
+ margin-top: 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ background: #252525;
+ color: #FFF;
+ transition: .4s;
+ width: 100%;
+ font-size: 14px;
+}
+
+.url-bar button:hover {
+ background: #292929;
+}
+
+.tab-content {
+ padding: 20px 30px;
+ border-radius: 20px;
+ background: #171717;
+ margin: 20px auto;
+ text-align: left;
+}
+
+.tab-content h2 {
+ margin-bottom: 15px;
+ font-size: 20px;
+ padding: 15px 0px;
+ border-bottom: 1px solid #222;
+}
+
+.tab-content h2 i {
+ margin-right: 5px;
+}
+
+.tab-content .setting {
+ display: flex;
+ justify-content: space-between;
+ padding: 5px 0px;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ align-items: center;
+}
+
+.tab-content .setting.column {
+ flex-direction: column;
+}
+
+.tab-content .setting.column label {
+ width: 100%;
+}
+
+.tab-content .setting.column .emote-list {
+ width:100%;
+ display: flex;
+ flex-wrap: wrap; /* allow items to wrap */
+ gap: 10px;
+ margin-top: 15px;
+}
+
+.tab-content .setting.column .emote-list .emote-item {
+ width: 96px;
+ height: 96px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ background: #222;
+ border-radius: 10px;
+}
+
+.tab-content .setting.column .emote-list .emote-item button {
+ position: absolute;
+ top: 0;
+ right: 0;
+ width: 36px;
+ height: 36px;
+
+ border-radius: 10px;
+
+ transition: .4s;
+
+ text-align: center;
+ background: none;
+ border: none;
+ cursor: pointer;
+}
+
+.tab-content .setting.column .emote-list .emote-item button.add {
+ top: 50%;
+ left: 50%;
+ right: unset;
+
+ transform: translate(-50%,-50%);
+
+ width: 100%;
+ height: 100%;
+ font-size: 36px;
+}
+
+.tab-content .setting.column .emote-list .emote-item button.add:hover {
+ background-color: #333;
+}
+
+.tab-content .setting.column .emote-list .emote-item button.add i {
+ vertical-align: middle;
+}
+
+
+.tab-content .setting.column .emote-list .emote-item em {
+ display: block;
+ margin-top: 5px;
+ font-size: 9px;
+}
+
+.tab-content .setting.column .emote-list .emote-item img {
+ height: 24px;
+}
+
+
+.tab-content .setting i {
+ font-size: 14px;
+ color: #666;
+ margin: 0 10px;
+}
+
+.tab-content .setting i.fa-arrow-turn-up {
+ transform: rotate(90deg);
+}
+
+
+.tab-content .setting small { color: #777; }
+
+.tab-content .setting input[type=text],
+.tab-content .setting input[type=number],
+.tab-content .setting textarea {
+ font-family: "Inter", sans-serif;
+ border: none;
+ background:#222;
+ color: #FFF;
+ padding: 10px 20px;
+ border-radius: 10px;
+ outline: none;
+}
+
+.tab-content .setting textarea {
+ width: 100%;
+ height: 200px;
+ margin-top: 15px;
+}
+
+.tab-content .setting.select select {
+ font-family: "Inter", sans-serif;
+ border: none;
+ background:#222;
+ color: #FFF;
+ padding: 10px 20px 10px 10px;
+ border-radius: 10px;
+ outline: none;
+}
+
+.tab-content .setting .switch {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 27px;
+}
+
+/* Hide default HTML checkbox */
+.tab-content .setting .switch input[type=checkbox] {
+ opacity: 1;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.tab-content .setting .slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: #CCC;
+ transition: .4s;
+ border-radius: 30px;
+}
+
+.tab-content .setting .slider:before {
+ position: absolute;
+ content: "";
+ height: 1.3em;
+ width: 1.2em;
+ border-radius: 16px;
+ left: 5px;
+ top: 3px;
+ bottom: 0;
+ background-color: white;
+ transition: .4s;
+}
+
+.tab-content .setting input[type=checkbox]:checked + .slider {
+ background-color: #03c4de;
+}
+
+.tab-content .setting input[type=checkbox]:checked + .slider:before {
+ transform: translateX(1.4em);
+}
+
+.tab-content#twitch .setting input[type=checkbox]:checked + .slider {
+ background-color: #a970ff;
+}
+.tab-content#youtube .setting input[type=checkbox]:checked + .slider {
+ background-color: #FF0000;
+}
+.tab-content#tiktok .setting input[type=checkbox]:checked + .slider {
+ background-color: #ff0050;
+}
+
+.tab-content#extras .setting input[type=checkbox]:checked + .slider {
+ background-color: #00dd63;
+}
+
+.tab-content .setting input[type=checkbox]:disabled + .slider {
+ background-color: #000 !important;
+}
+
+
+footer {
+ position: sticky;
+ bottom: 0;
+ padding: 20px;
+ background: rgba(18,18,18,0.5);
+ backdrop-filter: blur(10px);
+ margin-top: 20px;
+ font-size: 14px;
+}
+
+footer a {
+ display: inline-block;
+ margin: 10px 5px;
+ font-size: 20px;
+ color: #ffcc00;
+}
+
+@media only screen and (max-width: 768px) {
+
+ #chat-divided {
+ flex-direction: column;
+ }
+
+ #chat-settings {
+ width: 100%;
+ }
+
+ #chat-settings .field {
+ width: 100%;
+ display: block;
+ }
+
+ #chat-settings .field input {
+ width: 100%;
+ margin: 10px 0;
+ }
+
+ #chat-preview {
+ display: none;
+ }
+
+ footer { font-size: 12px; }
+}
+
+
+.modal {
+ position: fixed;
+ top: 0; left: 0;
+ width: 100%; height: 100%;
+ background: rgba(0, 0, 0, 0.75);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 999;
+}
+
+.modal.hidden {
+ display: none;
+}
+
+.modal-content {
+ background: #121212;
+ padding: 1.5em;
+ border-radius: 1em;
+ width: 640px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
+ display: flex;
+ flex-direction: column;
+ gap: 1em;
+}
+
+
+.modal-content input[type=text],
+.modal-content input[type=number],
+.modal-content textarea {
+ font-family: "Inter", sans-serif;
+ border: none;
+ background:#222;
+ color: #FFF;
+ padding: 10px 20px;
+ border-radius: 10px;
+ outline: none;
+ margin-top: 10px;
+}
+
+
+.modal-content button {
+ font-family: "Inter", sans-serif;
+ font-weight: bold;
+ border: none;
+ padding: 15px 30px;
+ margin-top: 10px;
+ border-radius: 10px;
+ cursor: pointer;
+ background: #252525;
+ color: #FFF;
+ transition: .4s;
+ width: 100%;
+ font-size: 14px;
+}
+
+.modal-content #confirmAddEmote {
+ background: #00dd63;
+}
+
+.modal-content #cancelAddEmote {
+ background: #ff0000;
+}
+
+.modal-content h3 {
+ margin: 0 0 0.5em;
+}
+
+.modal-content label {
+ display: flex;
+ flex-direction: column;
+ font-size: 0.9em;
+}
+
+.modal-buttons {
+ display: flex;
+ justify-content: flex-end;
+ gap: 1em;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..a422bbd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,153 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/js/app-mockup.js b/js/app-mockup.js
new file mode 100644
index 0000000..5bc8461
--- /dev/null
+++ b/js/app-mockup.js
@@ -0,0 +1,685 @@
+/* ----------------------- */
+/* MOCKUP SYSTEM */
+/* ----------------------- */
+
+let mockupInterval = null;
+let isMockupActive = false;
+const mockupDelay = 2500; // 2 seconds between events
+let mockupConnectionState = false; // Track mock connection state
+
+// Sample data for mockup events
+const mockData = {
+ avatars: [
+ 'https://static-cdn.jtvnw.net/user-default-pictures-uv/dbdc9198-def8-11e9-8681-784f43822e80-profile_image-300x300.png',
+ 'https://static-cdn.jtvnw.net/user-default-pictures-uv/13e5fa74-defa-11e9-809c-784f43822e80-profile_image-300x300.png',
+ 'https://static-cdn.jtvnw.net/user-default-pictures-uv/215b7342-def9-11e9-9a66-784f43822e80-profile_image-300x300.png',
+ 'https://static-cdn.jtvnw.net/user-default-pictures-uv/ce57700a-def9-11e9-842d-784f43822e80-profile_image-300x300.png'
+ ],
+ users: [
+ { name: 'Ninja' },
+ { name: 'SypherPK' },
+ { name: 'CouRageJD', },
+ { name: 'Gaules' },
+ { name: 'Nadeshot' },
+ { name: 'WILDCAT', },
+ { name: 'NickEh30' },
+ { name: 'LEGIQN' },
+ { name: 'moistcr1tikal' },
+ { name: 'FISHNOTHING' },
+ { name: 'smii7y' },
+ { name: 'kinggothalion', },
+ { name: 'harrisheller' },
+ { name: 'kaicenat' },
+ { name: 'caseoh_' }
+ ],
+ messages: [
+ "Hey everyone! How's the stream going?",
+ "This game looks awesome!",
+ "LOL that was hilarious",
+ "GG WP!",
+ "When are you playing Minecraft next?",
+ "Love the new overlay!",
+ "First time watching, this is great!",
+ "Can you explain that strategy again?",
+ "Greetings from Germany!",
+ "What's your favorite game?",
+
+ "Let's gooooo!",
+ "That clutch tho 🔥",
+ "I can't stop laughing 😂",
+ "You just destroyed them!",
+ "What a play!",
+ "Did anyone else see that??",
+ "Streamer luck confirmed 😆",
+ "Please do that move again!",
+ "Bro you cracked?",
+ "This chat is wild tonight",
+
+ "Can you shout out my friend?",
+ "What setup are you using?",
+ "Mic sounds super clean",
+ "W stream fr",
+ "Hydrate check! 💧",
+ "Pet the dog on stream pls",
+ "That reaction time 😳",
+ "You're my comfort streamer 🧡",
+ "This game brings back memories",
+ "Why is this so intense omg",
+
+ "Chat, what’s your favorite snack?",
+ "That edit was slick",
+ "Mobile gang where you at?",
+ "Sheeesh 🥶",
+ "This is better than Netflix",
+ "How long you been streaming?",
+ "Can we get some hype in the chat?",
+ "I wish I was this good",
+ "Can mods ban that guy?",
+ "Backseat gaming intensifies 😅",
+
+ "This reminds me of old-school Twitch",
+ "Nice aim bot... jk (I hope)",
+ "Wanna 1v1?",
+ "The vibes are immaculate today",
+ "Who else is vibing with the music?",
+ "That moment needs to be clipped",
+ "Streamer out here cooking 🔥",
+ "Yo, this community is chill",
+ "Day made. Thanks for the laughs!",
+ "Okay but that was actually insane"
+ ],
+
+ emotes: [
+ {
+ "id": "emotesv2_9eade28238d64e83b0219a9025d4692d",
+ "type": "Twitch",
+ "name": "AnotherRecord",
+ "startIndex": 24,
+ "endIndex": 36,
+ "imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/emotesv2_9eade28238d64e83b0219a9025d4692d/default/dark/2.0"
+ },
+ {
+ "id": "301428702",
+ "type": "Twitch",
+ "name": "BOP",
+ "startIndex": 20,
+ "endIndex": 22,
+ "imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/301428702/default/dark/2.0"
+ },
+ {
+ "id": "354",
+ "type": "Twitch",
+ "name": "4Head",
+ "startIndex": 14,
+ "endIndex": 18,
+ "imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/354/default/dark/2.0"
+ },
+ {
+ "id": "425618",
+ "type": "Twitch",
+ "name": "LUL",
+ "startIndex": 10,
+ "endIndex": 12,
+ "imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/425618/default/dark/2.0"
+ },
+ {
+ "id": "305954156",
+ "type": "Twitch",
+ "name": "PogChamp",
+ "startIndex": 0,
+ "endIndex": 7,
+ "imageUrl": "https://static-cdn.jtvnw.net/emoticons/v2/305954156/default/dark/2.0"
+ }
+ ],
+ emotesInsideMessages: [
+ 'PogChamp',
+ 'LUL',
+ 'BOP',
+ '4Head',
+ 'AnotherRecord'
+ ],
+ rewards: [
+ 'Highlight My Message',
+ 'Play Sound Effect',
+ 'Choose Next Game',
+ 'Song Request',
+ 'Dad Joke',
+ 'Hydration Check'
+ ],
+ announcements: [
+ 'Welcome to the stream everyone!',
+ 'Don\'t forget to follow for stream notifications!',
+ 'We\'re going to raid someone awesome after this game!',
+ 'Thanks for all the subs today!',
+ 'New emotes coming next week!'
+ ],
+ badges: [
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/28ac9d77-bba9-4281-aba9-716081aee210/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/c4a29737-e8a5-4420-917a-314a447f083e/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/ae1c6c62-c057-4fad-a1d4-663bf988701f/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/bbbe0db0-a598-423e-86d0-f9fb98ca1933/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/2de71f4f-b152-4308-a426-127a4cf8003a/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/4149750c-9582-4515-9e22-da7d5437643b/3" },
+ { "imageUrl": "https://static-cdn.jtvnw.net/badges/v1/5864739a-5e58-4623-9450-a2c0555ef90b/3" }
+ ],
+ superstickers: [
+ { "imageUrl": "https://lh3.googleusercontent.com/G2OgWJkuvSullUPp2i09zG_WR0IpQu-6Ti4pFXn_FJ1OkR6zU5GdiP9cBavimQopETyojInsRCe8uefjJBqn=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/-21C0x6zYcDxpJVYKl8CCKroyjW2Hdvh2FWBipCTFhonaPy2cSJZWTGvmjsoBJu-LedOHQrw1Qu7TYXxIlxv=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/kpwCxm65pv0p2YMunCEHaYcD1A0TnwTg4uSJMDsBriu6cZSGOAjXw_CPvV5PajvWEq1LANypR_WHRpA7HU8=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/y4t53UFh4eWO9FmuXgELtXn0cWsZEAJOWCExbumx2vcNclm2VYJkd4Omo7lKLxOg78zaXBmukrN0ONPRDwM=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/aQTC6r0gjuns5TwJTMoA_mqOH3mizXxzlAJqh_CpLx8lWyKiUgS_EjTATRTX0Qzm8MlZyXAg7r6kFzlH8HgS=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/oUIeg07YsvEuUcF7wOg6U3o1dOCANoBWuF1DYr2jGPFOyQ-bEFRiFm-6gU3urJPaX_AqtZgsNpGb0KNimA=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/gauEuKs0cTW_YrtkKit45UrShY7KuK2-Kh9RV3H3Eirtx2KY6PHLeaDHbFz-l9OGMYISF0F57Wk2lzTiHw=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/PQlPxOdeVk_oY3D_Ow0JRXvV3AbVIEoApzvenbfgsAHoLF4_EgxCV7Dsd-kqMsCAqhHhNG0vUY2Ssoa03iW_=s148-rwa" },
+ { "imageUrl": "https://lh3.googleusercontent.com/Cmmj_3s8DpgpuHdOhUmIZQU0Gmex9IISD2SNk4UQY-HA1jHfSPYCk6-gZ-PEpLKGHgyEfZNRCiAV_lHC_Q=s148-rwa" },
+ ],
+ tiktokGifts: [
+ { name: "Rose", coins: 1 },
+ { name: "Finger Heart", coins: 5 },
+ { name: "TikTok", coins: 10 },
+ { name: "Confetti", coins: 100 },
+ { name: "Galaxy", coins: 1000 }
+ ]
+};
+
+// Function to generate a random mockup event
+function generateMockEvent() {
+ const eventTypes = [
+ 'twitch-chat', 'twitch-chat', 'twitch-chat', 'twitch-chat', 'twitch-chat',
+
+ 'twitch-follow', 'twitch-bits', 'twitch-sub', 'twitch-resub',
+ 'twitch-giftsub', 'twitch-giftbomb', 'twitch-raid',
+ 'twitch-announcement', 'twitch-reward', 'twitch-gigantifyemote',
+
+ 'youtube-chat', 'youtube-chat', 'youtube-chat', 'youtube-chat', 'youtube-chat',
+ 'youtube-superchat', 'youtube-supersticker', 'youtube-newsponsor', 'youtube-membermilestone', 'youtube-membergift',
+
+ 'tiktok-chat', 'tiktok-chat', 'tiktok-chat', 'tiktok-chat', 'tiktok-chat',
+ 'tiktok-follow', 'tiktok-sub', 'tiktok-gift',
+
+ 'streamlabs-tip', 'streamelements-tip',
+ ];
+
+ // Select random event type and user
+
+ const fakeAvatar = mockData.avatars[Math.floor(Math.random() * mockData.avatars.length)];
+ const eventType = eventTypes[Math.floor(Math.random() * eventTypes.length)];
+ const user = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+ const announcement = mockData.announcements[Math.floor(Math.random() * mockData.announcements.length)];
+ const reward = mockData.rewards[Math.floor(Math.random() * mockData.rewards.length)];
+ const emote = mockData.emotes[Math.floor(Math.random() * mockData.emotes.length)];
+ const emotesInsideMessages = mockData.emotesInsideMessages[Math.floor(Math.random() * mockData.emotesInsideMessages.length)];
+ const messagetext = mockData.messages[Math.floor(Math.random() * mockData.messages.length)];
+ const messageId = randomString(40);
+
+ const shuffledBadges = [...mockData.badges].sort(() => Math.random() - 0.5);
+ const badgeCount = Math.floor(Math.random() * 3) + 1; // 1 to 3
+ const badgeschosen = shuffledBadges.slice(0, badgeCount);
+
+ const randomIndex = Math.floor(Math.random() * mockData.superstickers.length);
+ const randomStickerUrl = mockData.superstickers[randomIndex].imageUrl;
+
+ const tiktokGift = mockData.tiktokGifts[Math.floor(Math.random() * mockData.tiktokGifts.length)];
+
+ const firstMessage = Math.random() < 0.1;
+
+ switch(eventType) {
+ case 'twitch-chat' :
+
+ var data = {
+ emotes: mockData.emotes,
+ message: {
+ username: user.name.toLowerCase(),
+ color: randomColor(),
+ displayName: user.name,
+ message: messagetext + ' ' + emotesInsideMessages,
+ firstMessage: firstMessage,
+ badges: badgeschosen,
+ },
+ messageId: messageId,
+ };
+
+ const ifHasReply = Math.random() < 0.05;
+ if (ifHasReply) {
+ data.message.isReply = true;
+ var replier = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+ data.message.reply = {
+ userName: replier.name,
+ msgBody: mockData.messages[Math.floor(Math.random() * mockData.messages.length)]
+ };
+ }
+
+ const ifHasShared = Math.random() < 0.05;
+ if (ifHasShared) {
+ data.message.isSharedChat = true;
+ var sharedParentUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+
+ data.sharedChat = {
+ sourceRoom: {
+ name: sharedParentUser.name
+ }
+ };
+ }
+
+
+ twitchChatMessage(data);
+
+ break;
+ case 'twitch-follow' :
+
+ var data = {
+ user_id: user.name.toLowerCase(),
+ user_name: user.name,
+ };
+
+ twitchFollowMessage(data);
+
+ break;
+ case 'twitch-bits' :
+
+ var data = {
+
+ emotes: mockData.emotes,
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ message: {
+ bits: Math.floor(Math.random() * 10000) + 1,
+ message: messagetext,
+ },
+ messageId: messageId,
+ };
+
+ twitchBitsMessage(data);
+
+ break;
+ case 'twitch-sub' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ duration_months: 1,
+ sub_tier: parseInt(Math.floor(Math.random() * 3) + 1),
+ isPrime: Math.random() < 0.1,
+ text: messagetext
+ }
+
+ twitchSubMessage(data);
+
+ break;
+ case 'twitch-resub' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ cumulativeMonths: Math.floor(Math.random() * 50) + 1,
+ subTier: parseInt(Math.floor(Math.random() * 3) + 1),
+ isPrime: Math.random() < 0.1,
+ text: messagetext
+ }
+
+ twitchReSubMessage(data);
+
+ break;
+ case 'twitch-giftsub' :
+
+ var gifterUser = mockData.users[Math.floor(Math.random() * mockData.users.length)];
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ recipient: { name: gifterUser.name },
+ durationMonths: Math.floor(Math.random() * 50) + 1,
+ subTier: parseInt(Math.floor(Math.random() * 3) + 1),
+ cumlativeTotal: Math.floor(Math.random() * 200) + 1
+ }
+
+ twitchGiftMessage(data);
+
+ break;
+ case 'twitch-giftbomb' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ total: Math.floor(Math.random() * 50) + 1,
+ sub_tier: parseInt(Math.floor(Math.random() * 3) + 1),
+ cumulative_total: Math.floor(Math.random() * 200) + 1
+ }
+
+ twitchGiftSubsMessage(data);
+
+ break;
+ case 'twitch-raid' :
+
+ var data = {
+ from_broadcaster_user_login: user.name.toLowerCase(),
+ from_broadcaster_user_name: user.name,
+ viewers: Math.floor(Math.random() * 200) + 1
+ }
+
+ twitchRaidMessage(data);
+
+ break;
+ case 'twitch-announcement' :
+
+ var data = {
+ messageId: messageId,
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ text: announcement,
+ parts: mockData.emotes
+ }
+
+ twitchAnnouncementMessage(data);
+
+ break;
+ case 'twitch-reward' :
+
+ var data = {
+ user_id: user.name.toLowerCase(),
+ user_name: user.name,
+ user_input: announcement,
+ reward: {
+ title: reward
+ }
+ }
+
+ twitchRewardRedemption(data);
+
+ break;
+
+ case 'youtube-chat' :
+
+ var amIMod = Math.random() < 0.1;
+ var amISub = Math.random() < 0.1;
+ var amIOwner = Math.random() < 0.1;
+
+ if (amIOwner == true) {
+ amIMod = false;
+ amISub = false;
+ }
+
+ var data = {
+ user : {
+ id: user.name.toLowerCase(),
+ profileImageUrl: fakeAvatar,
+ name: user.name,
+ isVerified: Math.random() < 0.2,
+ isSponsor: amISub,
+ isModerator: amIMod,
+ isOwner: amIOwner,
+ },
+ emotes: mockData.emotes,
+ message: messagetext,
+ eventId: messageId,
+ };
+
+ youTubeChatMessage(data);
+
+ break;
+ case 'youtube-superchat' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name,
+ },
+ eventId: messageId,
+ amount: '$' + Math.floor(Math.random() * 2000) + 1,
+ message : messagetext
+ };
+
+ youTubeSuperChatMessage(data);
+
+ break;
+ case 'youtube-supersticker' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name
+ },
+ eventId: messageId,
+ amount: '$' + Math.floor(Math.random() * 2000) + 1,
+ _fVK15WwYFFCcGLW0zi1jLCJXj3f: {
+ imageUrl: randomStickerUrl
+ }
+ };
+
+ youTubeSuperStickerMessage(data);
+
+
+ break;
+ case 'youtube-newsponsor' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name,
+ },
+ eventId: messageId,
+ levelName: parseInt(Math.floor(Math.random() * 3) + 1),
+ months: 1
+ };
+
+ youTubeNewSponsorMessage(data);
+
+ break;
+ case 'youtube-membermilestone' :
+
+ var data = {
+ user: {
+ id: user.name.toLowerCase(),
+ name: user.name,
+ },
+ eventId: messageId,
+ levelName: parseInt(Math.floor(Math.random() * 3) + 1),
+ months: Math.floor(Math.random() * 50) + 1,
+ message: messagetext
+ };
+
+ youTubeNewSponsorMessage(data);
+
+
+ break;
+ case 'youtube-membergift' :
+
+ var data = {
+ user : {
+ id: user.name.toLowerCase(),
+ name: user.name,
+ },
+ tier: parseInt(Math.floor(Math.random() * 3) + 1),
+ count: Math.floor(Math.random() * 50) + 1,
+ eventId: messageId,
+ };
+
+ youTubeGiftedMembersMessage(data);
+
+ break;
+
+ case 'tiktok-chat' :
+
+ var data = {
+ userId: user.name.toLowerCase(),
+ nickname: user.name,
+ profilePictureUrl: fakeAvatar,
+ isSubscriber: Math.random() < 0.2,
+ isModerator: Math.random() < 0.1,
+ isOwner: Math.random() < 0.05,
+
+ emotes: {},
+
+ comment: messagetext,
+
+ msgId: messageId,
+ };
+
+ tiktokChatMessage(data);
+
+ break;
+ case 'tiktok-follow' :
+
+ var data = {
+ userId: user.name.toLowerCase(),
+ nickname: user.name,
+ profilePictureUrl: fakeAvatar,
+ msgId: messageId,
+ };
+
+ tiktokFollowMessage(data);
+
+ break;
+ case 'tiktok-sub' :
+
+ var data = {
+ userId: user.name.toLowerCase(),
+ nickname: user.name,
+ profilePictureUrl: fakeAvatar,
+ msgId: messageId,
+ subMonth: Math.floor(Math.random() * 50) + 1
+ };
+
+ tiktokSubMessage(data);
+
+ break;
+ case 'tiktok-gift' :
+
+ var data = {
+ userId: user.name.toLowerCase(),
+ nickname: user.name,
+ profilePictureUrl: fakeAvatar,
+ msgId: messageId,
+
+ giftName: tiktokGift.name,
+ repeatCount: Math.floor(Math.random() * 50) + 1,
+ diamondCount: tiktokGift.coins,
+ };
+
+ tiktokGiftMessage(data);
+
+
+ break;
+
+ case 'streamlabs-tip' :
+
+ var data = {
+ from: user.name,
+ formattedAmount: Math.floor(Math.random() * 2000) + 1,
+ currency: 'USD',
+ message: messagetext
+ };
+
+ streamLabsEventMessage(data);
+
+ break;
+
+ case 'streamelements-tip' :
+
+ var data = {
+ username: user.name,e,
+ amount: Math.floor(Math.random() * 2000) + 1,
+ currency: 'USD',
+ message: messagetext
+ };
+
+ streamElementsEventMessage(data);
+
+ break;
+ }
+}
+
+// Function to start the mockup system
+function startMockupSystem() {
+ if (!isMockupActive) {
+ console.debug('Starting mockup system...');
+ isMockupActive = true;
+ mockupConnectionState = false;
+
+ // Add a notification about mockup mode
+ notifyInfo({
+ title: "Streamer.Bot Disconnected",
+ text: "Running in mockup mode. Showing sample events."
+ });
+
+ // Start with a few initial events
+ for (let i = 0; i < 3; i++) {
+ setTimeout(() => generateMockEvent(), i * 500);
+ }
+
+ // Set interval for regular events
+ mockupInterval = setInterval(generateMockEvent, mockupDelay);
+
+ // Update statistics for demo
+ updateMockStatistics();
+ }
+}
+
+// Function to stop the mockup system
+function stopMockupSystem() {
+ if (isMockupActive) {
+ console.debug('Stopping mockup system...');
+ isMockupActive = false;
+ mockupConnectionState = true;
+ clearInterval(mockupInterval);
+ mockupInterval = null;
+
+ document.querySelector('#statistics #twitch .viewers span').textContent = '0';
+ document.querySelector('#statistics #youtube .viewers span').textContent = '0';
+ document.querySelector('#statistics #youtube .likes span').textContent = '0';
+ document.querySelector('#statistics #tiktok .viewers span').textContent = '0';
+ document.querySelector('#statistics #tiktok .likes span').textContent = '0';
+ }
+}
+
+// Function to update mock statistics
+function updateMockStatistics() {
+ if (showPlatformStatistics) {
+ if (showTwitchViewers) {
+ document.querySelector('#statistics #twitch .viewers span').textContent = formatNumber(Math.floor(Math.random() * 500) + 50);
+ }
+
+ if (showYouTubeStatistics) {
+ document.querySelector('#statistics #youtube .viewers span').textContent = formatNumber(Math.floor(Math.random() * 300) + 20);
+ document.querySelector('#statistics #youtube .likes span').textContent = formatNumber(Math.floor(Math.random() * 1000) + 100);
+ }
+
+ if (showTikTokStatistics) {
+ document.querySelector('#statistics #tiktok .viewers span').textContent = formatNumber(Math.floor(Math.random() * 800) + 200);
+ document.querySelector('#statistics #tiktok .likes span').textContent = formatNumber(Math.floor(Math.random() * 5000) + 500);
+ }
+ }
+}
+
+
+
+
+function randomIntFromInterval(min, max) {
+ return Math.floor(Math.random() * (max - min + 1) + min);
+}
+
+
+function randomString(length) {
+ const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ let result = "";
+ for (let i = 0; i < length; i++) {
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return result;
+}
+
+function randomColor() {
+ const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
+ return randomColor;
+}
\ No newline at end of file
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..9977759
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,292 @@
+/* ----------------------- */
+/* OPTIONS */
+/* ----------------------- */
+
+const streamerBotServerAddress = getURLParam("streamerBotServerAddress", "127.0.0.1");
+const streamerBotServerPort = getURLParam("streamerBotServerPort", "8080");
+let streamerBotConnected = false;
+const chatThreshhold = 50;
+const chatContainer = document.querySelector('#chat');
+const currentLang = lang[getURLParam("language", 'ptbr')];
+const eventsMockup = getURLParam("eventsMockup", true);
+const chatHorizontal = getURLParam("chatHorizontal", false);
+const showPlatform = getURLParam("showPlatform", false);
+const showAvatar = getURLParam("showAvatar", false);
+const showTimestamps = getURLParam("showTimestamps", false);
+const ampmTimeStamps = getURLParam("ampmTimeStamps", false);
+const showBadges = getURLParam("showBadges", true);
+const showPlatformStatistics = getURLParam("showPlatformStatistics", false);
+const hideAfter = getURLParam("hideAfter", 0);
+const ignoreChatters = getURLParam("ignoreChatters", "");
+const excludeCommands = getURLParam("excludeCommands", true);
+
+const avatars = new Map();
+const userColors = new Map();
+
+const ignoreUserList = ignoreChatters.split(',').map(item => item.trim().toLowerCase()) || [];
+
+/* ----------------------- */
+/* START */
+/* ----------------------- */
+
+if (showPlatformStatistics == false) { document.querySelector('#statistics').style.display = 'none'; }
+if (chatHorizontal == true) { chatContainer.classList.add('horizontal'); }
+
+/* ----------------------- */
+/* STREAMER.BOT CONNECTION */
+/* ----------------------- */
+
+const streamerBotClient = new StreamerbotClient({
+ host: streamerBotServerAddress,
+ port: streamerBotServerPort,
+ onConnect: (data) => {
+ console.debug( currentLang.streamerbotconnected );
+ console.debug(data);
+ streamerBotConnected = true;
+ notifySuccess({
+ title: currentLang.streamerbotconnected,
+ text: ``
+ });
+ if (eventsMockup == true) { stopMockupSystem(); }
+ },
+ onDisconnect: () => {
+ console.error(currentLang.streamerbotdisconnected);
+ streamerBotConnected = false;
+ if (eventsMockup == true) { startMockupSystem(); }
+
+ }
+});
+
+
+/* ----------------------- */
+/* UTILITIES */
+/* ----------------------- */
+
+
+
+async function addMessageToChat(userID, messageID, platform, data) {
+
+ const html = DOMPurify.sanitize(`
+
+
+
+ ChatRD - Setup
+ + +
+
+
+ Config
+ + + +
+
+
+ General
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Twitch
+ + + + + + + + + + + + +
+
+
+ YouTube
+ + + + + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ TikTok
+ + + + + +
+
+
+
+ Donations
+ + +
+
+
+
+
+ `);
+
+ chatContainer.insertAdjacentHTML('beforeend', html);
+
+ const messageElement = document.getElementById(messageID);
+
+ if (hideAfter > 0) {
+ setTimeout(function () {
+ messageElement.style.opacity = 0;
+ setTimeout(function () {
+ messageElement.remove();
+ }, 1000);
+ }, Math.floor(hideAfter * 1000));
+ }
+
+ removeExtraChatMessages();
+}
+
+
+
+async function addEventToChat(userID, messageID, platform, data) {
+
+ const html = DOMPurify.sanitize(`
+
+ `);
+
+ chatContainer.insertAdjacentHTML('beforeend', html);
+
+ const messageElement = document.getElementById(messageID);
+
+ if (hideAfter > 0) {
+ setTimeout(function () {
+ messageElement.style.opacity = 0;
+ setTimeout(function () {
+ messageElement.remove();
+ }, 1000);
+ }, Math.floor(hideAfter * 1000));
+ }
+
+ removeExtraChatMessages();
+}
+
+
+const whatTimeIsIt = () => {
+ const now = new Date();
+ const hours24 = now.getHours();
+ const minutes = now.getMinutes().toString().padStart(2, '0');
+ const ampm = hours24 >= 12 ? 'PM' : 'AM';
+ const hours12 = (hours24 % 12) || 12;
+
+ if (ampmTimeStamps == true) { return `${hours12}:${minutes} ${ampm}`; }
+ else { return `${hours24}:${minutes}`; }
+};
+
+
+function removeExtraChatMessages() {
+ const chatMessages = chatContainer.querySelectorAll('div.message').length;
+ if (chatMessages >= chatThreshhold) {
+ for (let i = 0; i < Math.floor(chatThreshhold/2); i++) {
+ chatContainer.removeChild(chatContainer.firstElementChild);
+ }
+ }
+}
+
+
+// Function to format large numbers (e.g., 1000 => '1K')
+function formatNumber(num) {
+ if (num >= 1000000) {
+ let numStr = (num / 1000000).toFixed(1);
+ if (numStr.endsWith('.0')) {
+ numStr = numStr.slice(0, -2);
+ }
+ return numStr + 'M';
+ }
+ else if (num >= 1000) {
+ let numStr = (num / 1000).toFixed(1);
+ if (numStr.endsWith('.0')) {
+ numStr = numStr.slice(0, -2);
+ }
+ return numStr + 'K';
+ }
+ return num.toString();
+}
+
+
+function formatCurrency(amount, currencyCode) {
+ return new Intl.NumberFormat(undefined, {
+ style: 'currency',
+ currency: currencyCode,
+ minimumFractionDigits: 0,
+ maximumFractionDigits: 2
+ }).format(amount);
+}
+
+
+
+function createRandomColor(platform, username) {
+ if (userColors.get(platform).has(username)) {
+ return userColors.get(platform).get(username);
+ }
+ else {
+ const randomColor = "hsl(" + Math.random() * 360 + ", 100%, 75%)";
+ userColors.get(platform).set(username, randomColor);
+ return randomColor;
+ }
+}
+
+
+function createRandomString(length) {
+ const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+ let result = "";
+ for (let i = 0; i < length; i++) {
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
+ }
+ return result;
+}
+
+function getURLParam(param, defaultValue) {
+ const chatQueryString = window.location.search;
+ const urlParams = new URLSearchParams(chatQueryString);
+ const paramVar = urlParams.get(param);
+
+ switch (paramVar) {
+ case 'true':
+ return true;
+
+ case 'false':
+ return false;
+
+ case null:
+ case undefined:
+ return defaultValue;
+
+ default:
+ return paramVar;
+ }
+}
+
+
+const pushNotify = (data) => {
+
+ const SimpleNotify = {
+ effect: 'fade',
+ speed: 500,
+ customClass: 'toasty',
+ customIcon: '',
+ showIcon: true,
+ showCloseButton: true,
+ autoclose: true,
+ autotimeout: 5000,
+ notificationsGap: null,
+ notificationsPadding: null,
+ type: 'outline',
+ position: 'x-center bottom',
+ customWrapper: '',
+ };
+
+ const mergedData = {
+ ...SimpleNotify,
+ ...data
+ }
+
+ new Notify (mergedData);
+}
+
+const notifyError = (err) => {
+ err.status = 'error';
+ pushNotify(err);
+}
+
+const notifyInfo = (info) => {
+ info.status = 'info';
+ pushNotify(info);
+}
+
+const notifyWarning = (warn) => {
+ warn.status = 'warning';
+ pushNotify(warn);
+}
+
+
+const notifySuccess = (success) => {
+ success.status = 'success';
+ pushNotify(success);
+}
+
+
+
+function escapeRegex(string) {
+ return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
diff --git a/js/lang/en.js b/js/lang/en.js
new file mode 100644
index 0000000..e02522d
--- /dev/null
+++ b/js/lang/en.js
@@ -0,0 +1,76 @@
+const en = {
+ streamerbotconnected: 'Streamer.bot Online!',
+ streamerbotdisconnected: 'Streamer.bot Disconnected!',
+
+ twitch : {
+ follow : () => ` followed the channel`,
+ announcement : () => `
+
+ ${!data.shared ? '' : data.shared}
+
+ ${showTimestamps == true ? ''+whatTimeIsIt()+'' : ''}
+
+ ${showPlatform == true ? '' : '' }
+
+ ${showAvatar == true ? '
' : ''}
+
+ ${showBadges == true ? ''+data.badges+'' : ''}
+
+ ${data.userName}:
+
+ ${!data.reply ? '' : data.reply}
+
+ ${data.message}
+
+ 📢 Announcement
`,
+ channelpoints : ({ title }) => ` Channel Points - ${title}
`,
+ bits : ({ bits, message }) => ` cheered ${bits} bits${message ? ''+message : ''}`, + + sub : ({ months, isPrime, tier }) => ` subscribed for + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'month' : 'months'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})`, + + resub : ({ months, isPrime, tier, message }) => ` subscribed for + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'month' : 'months'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)}) + ${message ? '
'+message : '' }`, + + gifted : ({ gifted, months, tier }) => ` gifted + ${months || 1 } ${months == 1 ? 'month' : 'months'} + of Tier ${tier.toString().charAt(0)} ${months == 1 ? 'sub' : 'subs'} + to ${gifted}`, + + giftedbomb : ({ count, total, tier }) => ` gifted ${count} subs (Tier ${tier.toString().charAt(0)}) to the Community, ${total || 1} ${total == 1 ? 'gift' : 'gifts'} in total`, + + raid : ({ viewers }) => ` raided the channel with ${viewers} viewers` + + }, + + + youtube : { + superchat : ({ money, message }) => ` superchatted ${money} + ${message ? '
'+message : ''} + `, + + supersticker : ({ money, sticker }) => ` + ${sticker ? '
': ''} + sent a supersticker of ${money} + ${sticker ? '
'+message : ''}`, + + giftedmembers : ({ total, tier }) => ` gifted ${total} ${total == 1 ? 'membership' : 'memberships'} (Tier ${tier}) to the channel`, + + giftedtrainmembers : ({ gifted, tier }) => ` gifted a membership + (${tier}) + to ${gifted}`, + + }, + + + streamlabs : { + tip : ({ money, message }) => ` donated 🪙 ${money}${message ? '
'+message : ''}`, + }, + + + streamelements : { + tip : ({ money, message }) => ` donated 🪙 ${money}${message ? '
'+message : ''}`, + }, + + + tiktok : { + follow : () => ` followed the channel`, + sub : ({ months }) => ` subscribed for ${months || 1 } ${(months && months > 1) ? 'months' : 'month'}`, + gift : ({ gift, count, coins }) => ` gifted ${gift} x${count} (🪙 ${coins} ${(coins && coins > 1) ? 'coins' : 'coin'})`, + + } +} \ No newline at end of file diff --git a/js/lang/es.js b/js/lang/es.js new file mode 100644 index 0000000..7cca7d8 --- /dev/null +++ b/js/lang/es.js @@ -0,0 +1,69 @@ +const es = { + streamerbotconnected: '¡Streamer.bot en línea!', + streamerbotdisconnected: '¡Streamer.bot desconectado!', + + twitch : { + follow : () => ` siguió el canal`, + announcement : () => `
📢 Anuncio
`,
+ channelpoints : ({ title }) => ` Puntos del canal - ${title}
`,
+ bits : ({ bits, message }) => ` envió ${bits} bits${message ? ''+message : ''}`, + + sub : ({ months, isPrime, tier }) => ` se suscribió por + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'mes' : 'meses'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})`, + + resub : ({ months, isPrime, tier, message }) => ` se volvió a suscribir por + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'mes' : 'meses'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)}) + ${message ? '
'+message : '' }`, + + gifted : ({ gifted, months, tier }) => ` regaló + ${months || 1 } ${months == 1 ? 'mes' : 'meses'} + de Tier ${tier.toString().charAt(0)} ${months == 1 ? 'suscripción' : 'suscripciones'} + a ${gifted}`, + + giftedbomb : ({ count, total, tier }) => ` regaló ${count} suscripciones (Tier ${tier.toString().charAt(0)}) a la comunidad, ${total || 1} ${total == 1 ? 'regalo' : 'regalos'} en total`, + + raid : ({ viewers }) => ` hizo una raid al canal con ${viewers} espectadores` + }, + + youtube : { + superchat : ({ money, message }) => ` envió un superchat ${money} + ${message ? '
'+message : ''} + `, + + supersticker : ({ money, sticker }) => ` + ${sticker ? '
': ''} + envió un supersticker de ${money} + ${sticker ? '
'+message : ''}`, + + giftedmembers : ({ total, tier }) => ` regaló ${total} ${total == 1 ? 'membresía' : 'membresías'} (Tier ${tier}) al canal`, + + giftedtrainmembers : ({ gifted, tier }) => ` regaló una membresía + (Tier ${tier}) + a ${gifted}`, + }, + + streamlabs : { + tip : ({ money, message }) => ` donó 🪙 ${money}${message ? '
'+message : ''}`, + }, + + streamelements : { + tip : ({ money, message }) => ` donó 🪙 ${money}${message ? '
'+message : ''}`, + }, + + tiktok : { + follow : () => ` siguió el canal`, + sub : ({ months }) => ` se suscribió por ${months || 1 } ${(months && months > 1) ? 'meses' : 'mes'}`, + gift : ({ gift, count, coins }) => ` regaló ${gift} x${count} (🪙 ${coins} ${(coins && coins > 1) ? 'monedas' : 'moneda'})`, + } +} diff --git a/js/lang/lang.js b/js/lang/lang.js new file mode 100644 index 0000000..3d1e47b --- /dev/null +++ b/js/lang/lang.js @@ -0,0 +1,5 @@ +const lang = { + ptbr : ptbr, + en : en, + es: es +} \ No newline at end of file diff --git a/js/lang/ptbr.js b/js/lang/ptbr.js new file mode 100644 index 0000000..8abddb5 --- /dev/null +++ b/js/lang/ptbr.js @@ -0,0 +1,76 @@ +const ptbr = { + streamerbotconnected: 'Streamer.bot Conectado!', + streamerbotdisconnected: 'Streamer.bot Desconectado!', + + twitch : { + follow : () => ` seguiu o canal`, + announcement : () => `
📢 Anúncio
`,
+ channelpoints : ({ title }) => ` Pontos do Canal - ${title}
`,
+ bits : ({ bits, message }) => ` doou ${bits} bits${message ? ''+message : ''}`, + + sub : ({ months, isPrime, tier }) => ` se inscreveu por + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'mês' : 'meses'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)})`, + + resub : ({ months, isPrime, tier, message }) => ` se inscreveu por + ${isPrime == true ? '' : ''} + ${months || 1 } ${months == 1 ? 'mês' : 'meses'} + (${isPrime == true ? 'Prime' : 'Tier '+tier.toString().charAt(0)}) + ${message ? '
'+message : '' }`, + + gifted : ({ gifted, months, tier }) => ` doou + ${months || 1 } ${months == 1 ? 'mês' : 'meses'} + de Tier ${tier.toString().charAt(0)} + para ${gifted}`, + + giftedbomb : ({ count, total, tier }) => ` doou ${count} inscrições (Tier ${tier.toString().charAt(0)}) para a Comunidade, totalizando ${total || 1} ${total == 1 ? 'doação' : 'doações'}`, + + raid : ({ viewers }) => ` raidou o canal com ${viewers} pessoas` + + }, + + + youtube : { + superchat : ({ money, message }) => ` fez um superchat de ${money} + ${message ? '
'+message : ''} + `, + + supersticker : ({ money, sticker }) => ` + ${sticker ? '
': ''} + enviou um super sticker de ${money} + ${sticker ? '
'+message : ''}`, + + giftedmembers : ({ total, tier }) => ` doou ${total} ${total == 1 ? 'inscrição' : 'inscrições'} (Tier ${tier}) para o canal`, + + giftedtrainmembers : ({ gifted, tier }) => ` doou uma assinatura + (${tier}) + para ${gifted}`, + + }, + + + streamlabs : { + tip : ({ money, message }) => ` doou 🪙 ${money}${message ? '
'+message : ''}`, + }, + + + streamelements : { + tip : ({ money, message }) => ` doou 🪙 ${money}${message ? '
'+message : ''}`, + }, + + + tiktok : { + follow : () => ` seguiu o canal`, + sub : ({ months }) => ` se inscreveu por ${months || 1 } ${(months && months > 1) ? 'meses' : 'mês'}`, + gift : ({ gift, count, coins }) => ` doou ${gift} x${count} (🪙 ${coins} ${(coins && coins > 1) ? 'moedas' : 'moeda'})`, + + } +} \ No newline at end of file diff --git a/js/settings.js b/js/settings.js new file mode 100644 index 0000000..3b33f68 --- /dev/null +++ b/js/settings.js @@ -0,0 +1,316 @@ +let streamerBotClient; +let streamerBotConnected = false; + +async function saveSettingsToLocalStorage() { + const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)"); + const textfields = document.querySelectorAll("input[type=text]:not(.avoid)"); + const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)"); + const selects = document.querySelectorAll("select:not(.avoid)"); + + const hiddenField = document.querySelector("textarea[name=youTubeCustomEmotes]:not(.avoid)"); + + const settings = {}; + + checkboxes.forEach((checkbox) => { + settings[checkbox.name] = checkbox.checked; + }); + textfields.forEach((textfield) => { + settings[textfield.name] = textfield.value; + }); + numberfields.forEach((numberfield) => { + settings[numberfield.name] = numberfield.value; + }); + selects.forEach((select) => { + settings[select.name] = select.value; + }); + + localStorage.setItem("chatWidgetSettings", JSON.stringify(settings)); + + if (streamerBotConnected == true) { + streamerBotClient.doAction( + { name : "YouTube Custom Emotes" }, + { + "chatrdytcustomemotes": JSON.stringify(hiddenField.value.trim()), + } + ).then( (setglobals) => { + console.debug('Saving YouTube Emotes from Streamer.Bot', setglobals); + }); + } + +} + + +async function loadSettingsFromLocalStorage() { + const saved = localStorage.getItem("chatWidgetSettings"); + if (!saved) return; + + const settings = JSON.parse(saved); + + Object.keys(settings).forEach((key) => { + const input = document.querySelector(`[name="${key}"]`); + if (input) { + if (input.type === "checkbox") { + input.checked = settings[key]; + } else { + input.value = settings[key]; + } + } + }); + + var streamerBotServerAddress = document.querySelector('input[type=text][name=streamerBotServerAddress]').value; + var streamerBotServerPort = document.querySelector('input[type=text][name=streamerBotServerPort]').value; + + streamerBotClient = new StreamerbotClient({ + host: streamerBotServerAddress, + port: streamerBotServerPort, + onConnect: (data) => { + streamerBotConnected = true; + + var sbstatus = document.getElementById('memberemotesbstatus'); + + sbstatus.style.color = '#00dd63'; + sbstatus.textContent = 'Streamer.Bot is Online!'; + + streamerBotClient.getGlobals().then( (getglobals) => { + const settings = JSON.parse(getglobals.variables.chatrdytcustomemotes.value); + console.debug('Getting YouTube Emotes from Streamer.Bot', settings); + const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]"); + textarea.value = settings; + + populateEmoteList(); + }); + + }, + onDisconnect: () => { + console.error('Streamer.bot Disconnected!'); + + streamerBotConnected = false; + + var sbstatus = document.getElementById('memberemotesbstatus'); + sbstatus.style.color = '#ff0000'; + sbstatus.textContent = 'Streamer.Bot Needs to be Online!'; + } + }); + +} + + +async function pushChangeEvents() { + const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)"); + const textfields = document.querySelectorAll("input[type=text]:not(.avoid)"); + const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)"); + const selects = document.querySelectorAll("select:not(.avoid)"); + + checkboxes.forEach((checkbox) => { + checkbox.addEventListener('change', () => { + generateUrl(); + saveSettingsToLocalStorage(); + }); + }); + textfields.forEach((textfield) => { + textfield.addEventListener('input', () => { + generateUrl(); + saveSettingsToLocalStorage(); + }); + }); + numberfields.forEach((numberfield) => { + numberfield.addEventListener('input', () => { + generateUrl(); + saveSettingsToLocalStorage(); + }); + }); + selects.forEach((select) => { + select.addEventListener('change', () => { + generateUrl(); + saveSettingsToLocalStorage(); + }); + }); + textfields.forEach((textfield) => { + textfield.addEventListener('input', () => { + generateUrl(); + saveSettingsToLocalStorage(); + }); + }); +} + + +async function generateUrl() { + document.getElementById("outputUrl").value = ''; + + var runThisLocally = document.querySelector("input[type=checkbox][name=runThisLocally]").checked; + var baseUrl = ''; + + if (runThisLocally == false) { + baseUrl = 'https://vortisrd.github.io/chatrd/chat.html' + } + + const checkboxes = document.querySelectorAll("input[type=checkbox]:not(.avoid)"); + const textfields = document.querySelectorAll("input[type=text]:not(.avoid)"); + const numberfields = document.querySelectorAll("input[type=number]:not(.avoid)"); + const selects = document.querySelectorAll("select:not(.avoid)"); + + const params = new URLSearchParams(); + + selects.forEach((select) => { + params.set(select.name, select.value); + }); + checkboxes.forEach((checkbox) => { + params.set(checkbox.name, checkbox.checked); + }); + textfields.forEach((textfield) => { + params.set(textfield.name, textfield.value); + }); + numberfields.forEach((numberfield) => { + params.set(numberfield.name, numberfield.value); + }); + + document.getElementById("outputUrl").value = baseUrl + '?' + params.toString(); + document.querySelector('#chat-preview iframe').src = 'chat.html?'+params.toString(); +} + +async function copyUrl() { + + const output = document.getElementById("outputUrl"); + + output.select(); + document.execCommand("copy"); + + const button = document.querySelector('.url-bar button'); + const buttonDefaulText = 'Copy URL'; + + button.textContent = 'ChatRD URL Copied!'; + button.style.backgroundColor = "#00dd63"; + + setTimeout(() => { + button.textContent = buttonDefaulText; + button.removeAttribute('style'); + }, 3000); + + +} + + + +async function setupAddEmoteModal() { + const modal = document.getElementById("addEmoteModal"); + const nameInput = document.getElementById("newEmoteName"); + const urlInput = document.getElementById("newEmoteURL"); + const confirmBtn = document.getElementById("confirmAddEmote"); + const cancelBtn = document.getElementById("cancelAddEmote"); + const addButton = document.querySelector("#youtube .emote-item:last-child .add"); + const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]"); + + if (!modal || !addButton || !textarea) return; + + // Show modal + addButton.onclick = () => { + if (streamerBotConnected == true) { + nameInput.value = ""; + urlInput.value = ""; + modal.classList.remove("hidden"); + nameInput.focus(); + } + else { + alert("Streamer.bot is Offline!"); + return; + } + }; + + // Cancel + cancelBtn.onclick = () => { + modal.classList.add("hidden"); + }; + + // Confirm + confirmBtn.onclick = () => { + const name = nameInput.value.trim(); + const url = urlInput.value.trim(); + + if (!name || !url) { + alert("Both fields are required."); + return; + } + + let emotes; + try { + emotes = JSON.parse(textarea.value); + } catch (err) { + console.error("Invalid JSON", err); + alert("Emote data is invalid."); + return; + } + + if (emotes[name]) { + alert(`Emote "${name}" already exists.`); + return; + } + + // Add and update + emotes[name] = url; + textarea.value = JSON.stringify(emotes, null, 4); + modal.classList.add("hidden"); + populateEmoteList(); + }; +} + + + +async function populateEmoteList() { + const textarea = document.querySelector("textarea[name=youTubeCustomEmotes]"); + const emoteList = document.querySelector("#youtube .emote-list"); + + if (!textarea || !emoteList) return; + + const addButtonSpan = emoteList.querySelector(".emote-item:last-child"); + + // Remove all emote items except the add button + emoteList.querySelectorAll(".emote-item").forEach(item => { + if (item !== addButtonSpan) { + item.remove(); + } + }); + + let emotes; + try { + emotes = JSON.parse(textarea.value); + } catch (e) { + console.error("Invalid JSON in YouTube Emotes textarea", e); + return; + } + + // Recreate each emote item + for (const [emoteName, emoteUrl] of Object.entries(emotes)) { + const span = document.createElement("span"); + span.classList.add("emote-item"); + span.innerHTML = ` +
${replyData.userName}: ${replyData.msgBody}
` :
+ '';
+
+ var sharedChat = '';
+ if (isSharedChat) {
+ if (showTwitchSharedChat == true) {
+ if (!data.sharedChat.primarySource)
+ {
+ var sharedChat = ``;
+ }
+ }
+ else if (!data.sharedChat.primarySource && showTwitchSharedChat == false) {
+ return;
+ }
+ }
+
+ const messageData = {
+ classes: classes.join(' '),
+ avatar,
+ badges,
+ userName,
+ color,
+ message,
+ shared: sharedChat,
+ reply: replyHTML,
+ };
+
+ addMessageToChat(userID, messageId, 'twitch', messageData);
+}
+
+
+
+async function twitchChatMessageGiantEmote(data) {
+
+ if (showTwitchMessages == false) return;
+
+ const {
+ user_login: userID,
+ gigantified_emote: { id: emoteGigantify }
+ } = data;
+ const userMessages = chatContainer.querySelectorAll(`.twitch.message[data-user="${userID}"]`);
+
+ if (userMessages.length === 0) return;
+
+ const firstMessage = userMessages[0];
+ const emoteImages = firstMessage.querySelectorAll(`img[data-emote-id="${emoteGigantify}"]`);
+
+ if (emoteImages.length === 0) return;
+
+ emoteImages.forEach(img => {
+ img.classList.add("gigantify");
+ if (img.src.endsWith("2.0")) {
+ img.src = img.src.replace("2.0", "3.0");
+ }
+ });
+}
+
+
+
+async function twitchFollowMessage(data) {
+
+ if (showTwitchFollows == false) return;
+
+ const {
+ user_id : userID,
+ user_name : userName
+ } = data;
+
+ const messageID = createRandomString(40);
+
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.follow(),
+ ]);
+
+ const classes = 'follow';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+
+async function twitchBitsMessage(data) {
+
+ if (showTwitchBits == false) return;
+
+ const {
+ messageId : messageID,
+ user : {
+ id : userID,
+ name : userName
+ }
+ } = data;
+
+ data.message.message = data.message.message.replace(/\bCheer\d+\b/g, '').replace(/\s+/g, ' ').trim();
+
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.bits({
+ bits: data.message.bits,
+ message : await getTwitchEmotes(data)
+ }),
+ ]);
+
+ const classes = 'bits';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+
+async function twitchAnnouncementMessage(data) {
+
+ if (showTwitchAnnouncements == false) return;
+
+ const {
+ messageId : messageID,
+ user : {
+ id : userID,
+ name : userName
+ }
+ } = data;
+
+
+ data.message = {
+ message: await getTwitchAnnouncementEmotes(data)
+ };
+
+
+ const replyHTML = currentLang.twitch.announcement();
+
+ const [avatar, message] = await Promise.all([
+ '',
+ ` ${data.message.message}`
+ ]);
+
+ const classes = 'announcement';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: replyHTML,
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchRewardRedemption(data) {
+
+ if (showTwitchRewardRedemptions == false) return;
+
+ const {
+ user_id : userID,
+ user_name : userName,
+ } = data;
+ const messageID = createRandomString(40);
+ const replyHTML = currentLang.twitch.channelpoints({ title : data.reward.title });
+ const [avatar, message] = await Promise.all([
+ '',
+ ` ${data.user_input}`
+ ]);
+ const classes = 'rewards-redemption';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: replyHTML,
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchSubMessage(data) {
+
+ if (showTwitchSubs == false) return;
+
+ const {
+ user : {
+ id : userID,
+ name : userName
+ }
+ } = data;
+
+ const messageID = createRandomString(40);
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.sub({
+ months : data.duration_months,
+ isPrime : data.isPrime,
+ tier : data.sub_tier
+ })
+ ]);
+
+ const classes = 'sub';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchReSubMessage(data) {
+
+ if (showTwitchSubs == false) return;
+
+ const {
+ user : {
+ id : userID,
+ name : userName
+ },
+ text
+ } = data;
+
+ const messageID = createRandomString(40);
+
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.resub({
+ months : data.cumulativeMonths,
+ isPrime : data.isPrime,
+ tier : data.subTier,
+ message : text
+ })
+ ]);
+
+ const classes = 'sub';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchGiftMessage(data) {
+
+ if (data.fromCommunitySubGift === false) {
+ if (showTwitchSubs == false || showTwitchGiftedSubs == false) return;
+ }
+ else {
+ if (showTwitchSubs == false || showTwitchGiftedSubsUserTrain == false) return;
+ }
+
+
+ const {
+ user : {
+ id : userID,
+ name : userName
+ }
+ } = data;
+
+ const messageID = createRandomString(40);
+
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.gifted({
+ gifted : data.recipient.name,
+ months : data.durationMonths,
+ tier : data.subTier,
+ total : data.cumlativeTotal
+ })
+ ]);
+
+ const classes = 'sub';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+
+async function twitchGiftSubsMessage(data) {
+
+ if (showTwitchSubs == false || showTwitchMassGiftedSubs == false) return;
+
+ const {
+ user : {
+ id : userID,
+ name : userName
+ }
+ } = data;
+
+ const messageID = createRandomString(40);
+
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.giftedbomb({ count : data.total, tier : data.sub_tier, total : data.cumulative_total })
+ ]);
+
+ const classes = 'sub';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchRaidMessage(data) {
+
+ if (showTwitchRaids == false) return;
+
+ const {
+ from_broadcaster_user_login: userID,
+ from_broadcaster_user_name: userName
+ } = data;
+
+ const messageID = createRandomString(40);
+ const [avatar, message] = await Promise.all([
+ '',
+ currentLang.twitch.raid({ viewers : data.viewers })
+ ]);
+
+ const classes = 'raid';
+ const messageData = {
+ classes: classes,
+ avatar,
+ badges: '',
+ userName,
+ color: '#FFF',
+ message,
+ reply: '',
+ };
+
+ addEventToChat(userID, messageID, 'twitch', messageData);
+}
+
+
+async function twitchChatMessageDeleted(data) {
+ document.getElementById(data.messageId)?.remove();
+}
+
+
+async function twitchUserBanned(data) {
+ chatContainer.querySelectorAll(`[data-user="${data.user_login}"]`).forEach(element => {
+ element.remove();
+ });
+}
+
+
+async function twitchChatClearMessages() {
+ chatContainer.innerHTML = '';
+}
+
+
+async function twitchUpdateStatistics(data) {
+
+ if (showPlatformStatistics == false || showTwitchViewers == false) return;
+
+ const viewers = DOMPurify.sanitize(data.viewers);
+ document.querySelector('#statistics #twitch .viewers span').textContent = formatNumber(viewers);
+}
+
+
+async function getTwitchEmotes(data) {
+ const message = data.message.message;
+ const emotes = data.emotes;
+ const words = message.split(" ");
+ emotes.sort((a, b) => b.startIndex - a.startIndex);
+ for (let i = 0; i < words.length; i++) {
+ emotes.forEach(emote => {
+ if (words[i] === emote.name) {
+ words[i] = `