ADDED Ko-Fi, Fourthwall, TipeeeStream and Patreon

README.md

@@ -1,6 +1,6 @@
 # 💬 ChatRD
 
-ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok**, **Kick** (and more to come). 
+ChatRD is a chat overlay widget for OBS that unifies messages and events from **Twitch**, **YouTube**, **TikTok**, **Kick**, **Streamlabs**, **StreamElements**, **Patreon**, **TipeeeStream**, **Ko-Fi**, **Fourthwall** (and more to come). 
 
 ![ChatRD Config UI](https://i.imgur.com/kDYPY1g.png)
 
@@ -29,6 +29,7 @@ Make sure your **Twitch** and **YouTube** accounts are connected on **Streamer.B
 6. Choose your desired options.
 7. Click **"Copy URL"**.
 8. Add the copied URL as a Browser Source in OBS. Or use it in your browser to read chat. 😊
+9. For **Streamlabs**, **StreamElements**, **Patreon**, **TipeeeStream**, **Ko-Fi** and **Fourthwall**, you need to connect them to your Streamer.Bot account to their website. Follow the tutorial links in each section presented in the [Settings Page](https://vortisrd.github.io/chatrd).
 
 
 ### Kick.Bot installation on Streamer.Bot
@@ -92,10 +93,6 @@ Also, at any point either **Kick** or **Kick.Bot** might change their stuff, so
 ## 📝 To-Do List
 
 - Trovo
-- Patreon
-- Ko-Fi
-- TipeeeStream
-- Fourthwall
 - LivePix
 - Tipa.Ai
 

chat.html

@@ -70,6 +70,10 @@
     <script src="js/youtube/module.js"></script>
     <script src="js/tiktok/module.js"></script>
     <script src="js/kick/module.js"></script>
+    <script src="js/patreon/module.js"></script>
+    <script src="js/tipeeestream/module.js"></script>
+    <script src="js/kofi/module.js"></script>
+    <script src="js/fourthwall/module.js"></script>
 
     <script src="js/streamlabs/module.js"></script>
     <script src="js/streamelements/module.js"></script>

css/app.css

@@ -360,6 +360,84 @@ body {
 
 
 
+#chat .message.patreon.event > div {
+    background: #ff5900;
+    background: linear-gradient(180deg,rgba(255, 89, 0, 1) 0%, rgba(199, 70, 0, 1) 100%);
+}
+
+
+
+
+
+
+
+#chat .message.tipeeestream.event > div {
+    background: #E02F44;
+    background: linear-gradient(180deg,rgba(224, 47, 68, 1) 0%, rgba(140, 35, 47, 1) 100%);
+}
+
+
+
+
+
+
+
+#chat .message.kofi.event > div {
+    background: #72A5F2;
+    background: linear-gradient(180deg,rgba(114, 165, 242, 1) 0%, rgba(81, 115, 166, 1) 100%);
+}
+
+
+
+
+
+
+
+
+#chat .message.fourthwall.event.order > div .platform { order: 1; }
+#chat .message.fourthwall.event.order > div .image { 
+    order: 2;
+    width: max-content;
+    height: 72px;
+    filter: drop-shadow(0px 0px 6px rgba(0,0,0,0.25));
+    padding: 5px 10px 5px 0;
+}
+#chat .message.fourthwall.event.order  > div .image img { 
+    width: max-content;
+    height: 100%;
+    border-radius: 5px;
+}
+#chat .message.fourthwall.event.order > div .info { order: 3; }
+#chat .message.fourthwall.event.order.giantimage > div {
+    flex-wrap: wrap;
+}
+#chat .message.fourthwall.event.order.giantimage > div .platform { order: 2; }
+#chat .message.fourthwall.event.order.giantimage > div .image {
+    order: 1;
+    flex: 0 0 100%;
+    height: 202px;
+    text-align: center;
+    margin: 10px 0;
+}
+#chat .message.fourthwall.event.order.giantimage > div .image img {
+    width: max-content;
+    height: 192px;
+}
+#chat .message.fourthwall.event.order.giantimage > div .info { order: 3; }
+
+#chat .message.fourthwall.event > div {
+    background: #0044ff;
+    background: linear-gradient(180deg,rgba(0, 68, 255, 1) 0%, rgba(0, 47, 176, 1) 100%);
+}
+
+
+
+
+
+
+
+
+
 
 #chat.horizontal {
     display: flex;

css/settings.css

@@ -37,12 +37,12 @@ a { color: #ffcc00; }
 }
 
 .url-bar {
-    margin: 20px 0;
+    margin: 0 0 20px 0;
     font-size: 16px;
 }
 
 .url-bar input[type=text] {
-    font-family: "Inter", sans-serif;
+    /*font-family: "Inter", sans-serif;
     border: none;
     background: #171717;
     color: #FFF;
@@ -51,7 +51,8 @@ a { color: #ffcc00; }
     width: 100%;
     text-align: center;
     outline: none;
-    font-size: 14px;
+    font-size: 14px;*/
+    display: none;
 }
 
 
@@ -99,6 +100,11 @@ a { color: #ffcc00; }
     fill: #FFF;
 }
 
+.tab-content h2 img {
+    width: 26px;
+    vertical-align: bottom;
+}
+
 .tab-content .setting {
     display: flex;
     justify-content: space-between;
@@ -292,10 +298,29 @@ a { color: #ffcc00; }
     background-color: #00dd63;
 }
 
+.tab-content#patreon .setting input[type=checkbox]:checked + .slider {
+    background-color: #ff5900;
+}
+
+.tab-content#tipeee .setting input[type=checkbox]:checked + .slider {
+    background-color: #e02f44;
+}
+
+.tab-content#kofi .setting input[type=checkbox]:checked + .slider {
+    background-color: #72a5f2;
+}
+
+.tab-content#fourthwall .setting input[type=checkbox]:checked + .slider {
+    background-color: #0042ff;
+}
+
 .tab-content .setting input[type=checkbox]:disabled + .slider {
     background-color: #000 !important;
 }
 
+
+
+
 #font-value {
     display: inline-block;
     font-style: normal;
@@ -331,6 +356,11 @@ footer a svg {
     fill: #ffcc00;
 }
 
+footer a img {
+    width: 24px;
+    vertical-align: bottom;
+}
+
 footer .nav-bar {
     display: inline-flex;
     flex-direction: row;

images/logo-fourthwall.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M330.1,230.7l-11.4,54.8-52.4,3.7-9.8,29.8h136.1l31.3,165.6,27.6-165.6,80.5.4,28,165.2,31.3-165.6h80.9l-55.2,250.2-91.8-.2-29.6-176.4-37.3,176.1-88-1.1-56.9-241.2c-8.2-3-5,7.8-6,12.3-2.6,11.7-4.9,23.5-7.2,35.2l-56.8,3.9-38.5,191.5h-77.3l40.5-193.1-33.2-1.9,9.1-51.7,34.6-4c6.5-28,12.3-60.5,39.7-76.2,5.2-3,31.8-11.6,36.2-11.6h75.4Z"/>
+</svg>

images/logo-kofi.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+
+      .st1 {
+        mask: url(#mask);
+      }
+
+      .st2 {
+        fill: #202020;
+      }
+
+      .st3 {
+        fill: #ff5a16;
+      }
+    </style>
+    <mask id="mask" x="83" y="145.9" width="632" height="507.1" maskUnits="userSpaceOnUse">
+      <g id="mask0_1_219">
+        <path class="st0" d="M715,145.9H83v507.1h632V145.9Z"/>
+      </g>
+    </mask>
+  </defs>
+  <g class="st1">
+    <g>
+      <path class="st0" d="M335.7,653c-92,0-166.8-41.1-210.7-115.9-38.8-65.5-42-136.4-42-215.7s14.1-87.9,40.9-118.3c24.6-27.9,59.4-46,98-51,45.9-5.8,102.9-6.3,162.2-6.3,96.5,0,123.7,1.2,161.7,5,50.5,5,93,23.9,122.9,54.5,30.3,31.1,46.4,72.7,46.4,120.3v9.6c0,81.2-54.3,149.1-129.9,167.6-5.6,13.3-12.6,26.6-20.9,39.6l-.2.3c-26.6,41.2-89.3,110.3-209.2,110.3h-19.1,0Z"/>
+      <path class="st0" d="M541.8,190.7c-35.9-3.6-60.9-4.8-157.7-4.8s-114.7.6-157.1,6c-56.2,7.2-104,50.2-104,129.7s4.2,141,36.4,195.4c36.4,62.1,97.4,96.2,176.3,96.2h19.1c96.8,0,149.4-51.4,175.7-92,11.4-17.9,19.7-35.8,25.1-53.8,68.7-6,119.5-62.7,119.5-132v-9.6c0-74.7-49-126.7-133.2-135h0Z"/>
+      <path class="st2" d="M123,321.5c0-79.5,47.8-122.5,104-129.7,42.4-5.4,95-6,157.1-6,96.8,0,121.9,1.2,157.7,4.8,84.3,8.4,133.2,60.3,133.2,135v9.6c0,69.3-50.8,126.1-119.5,132-5.4,17.9-13.7,35.8-25.1,53.8-26.3,40.6-78.9,92-175.7,92h-19.1c-78.9,0-139.8-34.1-176.3-96.2-32.3-54.4-36.4-114.7-36.4-195.4"/>
+      <path class="st0" d="M167.8,322.1c0,77.1,4.8,126.7,29.9,172.7,28.7,53.2,80.7,73.5,139.8,73.5h18.5c77.7,0,115.3-37.6,136.2-70.5,10.2-16.7,19.1-35.2,23.9-58.6l3.6-14.9h21.5c47.8,0,89-38.8,89-88.4v-9c0-55.6-34.6-84.9-95-92-34.1-3-54.4-4.2-151.2-4.2s-111.7.6-147,6c-49.6,7.2-69.3,35.2-69.3,85.4"/>
+      <path class="st2" d="M519.7,363.3c0,7.2,5.4,12.6,14.9,12.6,30.5,0,47.2-17.3,47.2-46s-16.7-46.6-47.2-46.6-14.9,5.4-14.9,12.6v67.5h0Z"/>
+      <path class="st3" d="M226.3,359.8c0,35.2,19.7,65.7,44.8,89.6,16.7,16.1,43,32.9,60.9,43.6,5.4,3,10.8,4.8,16.7,4.8s13.1-1.8,17.9-4.8c17.9-10.8,44.2-27.5,60.3-43.6,25.7-23.9,45.4-54.4,45.4-89.6s-28.7-72.3-69.9-72.3-41.2,12.6-53.8,29.9c-11.4-17.3-28.7-29.9-53.2-29.9-41.8,0-69.3,34-69.3,72.3"/>
+    </g>
+  </g>
+</svg>

images/logo-patreon.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M694.3,279.9c-.8,47.8-15.1,88-42.8,120.7-26.8,33.5-63.3,56.2-109.4,67.9-26.8,5.9-50.7,13.4-71.7,22.6-21.8,10.1-41.1,26-57.9,47.8-13.4,19.3-25.6,42.4-36.5,69.2-12.6,31-28.1,58.7-46.5,83-18.5,25.2-44.9,38.1-79.2,39-44.5-3.4-77.2-25.6-98.1-66.7-21-41.9-34-88.9-39-140.9-5.9-52-8.4-94.3-7.5-127,0-57,10.5-110.3,31.4-159.7,21.8-49.5,59.1-87.6,111.9-114.5,46.1-20.9,96.4-32.7,150.9-35.2,55.3-2.5,106.9,4.2,154.7,20.1,38.6,12.6,71.3,34,98.1,64.1,26,31,39.8,67.5,41.5,109.4Z"/>
+</svg>

images/logo-tipeeestream.svg

@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
+  <!-- Generator: Adobe Illustrator 29.0.0, SVG Export Plug-In . SVG Version: 2.1.0 Build 186)  -->
+  <defs>
+    <style>
+      .st0 {
+        fill: #fff;
+      }
+    </style>
+  </defs>
+  <path class="st0" d="M248,251.9h74.5c1,3.9,1.9,7.5,2.2,11.6.8,10.7,1.1,83.5-1.2,88.5s-3.9,4.3-4.2,4.3h-71.3v162.9c0,1.7,6.5,9.2,8.6,10.6,19.7,12.8,60.8-10.6,65.7-7.2,1.6,3.7,2.1,7.4,2.4,11.4,1.3,18.3,2.5,64-.2,80.9-2.5,15.9-30.3,22.3-44.1,26.1-57.2,16-126.4,18.7-149-47.9-2.2-6.6-6.9-21-6.9-27.1v-209.8h-35.1c-6.2,0-7.1-9.2-7.5-13.8-.9-10.4-1.1-81.4,1.2-86.3s3.9-4.3,4.2-4.3h34.1l3.2-3.2v-70.3c0-3.4,7.3-9.2,10.6-10.7,15.3-6.7,77.3-25.9,93.2-28.2,8.6-1.2,19.7.2,19.7,11.2v101.2h0Z"/>
+  <path class="st0" d="M685.7,122l-263.5.5h0c-18.5,2.7-28.7,16.1-29.4,34.5v483.6c1.9,22.5,12.6,33.2,35.1,35.1,81.6,7,173-5.4,255.7,0,20.6-.4,34.7-14.4,35.1-35.1V157c-.9-20.6-12.6-32.9-33.1-35ZM675.6,510c-3.8,20.5-13.2,36.8-26.2,49.5-51,49.9-158.8,44-216.1,12.9v-71.3s0,0,0,0h0s0,0,0,0h0c0,0,0,0,0,0,3.4-2.6,33.8,12.5,39.8,14.5,24.3,8.1,86,24.7,111.9,5.3,4.2-3.2,7.5-7.3,9.5-12.6,18.8-49.7-58.3-69.1-90.4-87.6-47.6-27.5-77.3-68.9-64.1-126.6,4.6-20.3,14.2-36,27.1-47.9,50.5-46.5,152.3-33.5,208.9-4.9l-25.7,61.7s0,0,0,0h0c-28.8-12.1-105.8-37.1-126.9-5.5-4.1,6.3-6.1,14.7-5,25.9,1.3,13.8,13,24.2,27.4,32.6,10.2,4.8,23.7,10.5,41.5,19.7,2.1,1,4.1,2,5.9,2.9,54.5,29.1,95.4,62.9,82.5,131.5Z"/>
+</svg>

index.html

@@ -151,7 +151,7 @@
 					Kick
 				</h2>
 				
-				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-triangle-exclamation"></i> This is a <strong>BETA</strong> feature! <a href="https://github.com/vortisrd/chatrd/tree/main#%EF%B8%8F-kick-is-a-beta-feature" target="_blank">Read more</a>.</small></label></div>
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-triangle-exclamation"></i> This is a <strong>BETA</strong> feature! <strong><a href="https://github.com/vortisrd/chatrd/tree/main#%EF%B8%8F-kick-is-a-beta-feature" target="_blank">Read more</a></strong>.</small></label></div>
 
 				<div class="setting"></div>
 
@@ -176,24 +176,94 @@
 
 			<div class="tab-content" id="extras">
 				<h2><i class="fa-solid fa-dollar-sign"></i> Donations</h2>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect Streamlabs to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/streamlabs">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect StreamElements to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/streamelements">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
 				<div class="setting"><label>Streamlabs Tips</label><label class="switch"><input type="checkbox" name="showStreamlabsDonations" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>StreamElements Tips</label><label class="switch"><input type="checkbox" name="showStreamElementsTips" checked><span class="slider"></span></label></div>
 			</div>
 
+			<div class="tab-content" id="patreon">
+				<h2><i class="fa-brands fa-patreon"></i> Patreon</h2>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect Patreon to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/patreon">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
+				<div class="setting"><label>Memberships</label><label class="switch"><input type="checkbox" name="showPatreonMemberships" checked><span class="slider"></span></label></div>
+			</div>
+
+			<div class="tab-content" id="tipeee">
+				<h2><img src="images/logo-tipeeestream.svg" alt=""> TipeeeStream</h2>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect TipeeeStream to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/tipeee-stream">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
+				<div class="setting"><label>Donations</label><label class="switch"><input type="checkbox" name="showTipeeeDonations" checked><span class="slider"></span></label></div>
+			</div>
+
+			<div class="tab-content" id="kofi">
+				<h2><img src="images/logo-kofi.svg" alt=""> Ko-Fi</h2>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect Ko-Fi to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/ko-fi">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
+				<div class="setting"><label>Subscription</label><label class="switch"><input type="checkbox" name="showKofiSubscriptions" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Donations</label><label class="switch"><input type="checkbox" name="showKofiDonations" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Orders</label><label class="switch"><input type="checkbox" name="showKofiOrders" checked><span class="slider"></span></label></div>
+			</div>
+
+			<div class="tab-content" id="fourthwall">
+				<h2><img src="images/logo-fourthwall.svg" alt=""> Fourthwall</h2>
+
+				<div class="setting"><small style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;"><i class="fa-solid fa-circle-exclamation"></i> You need to connect Fourthwall to Streamer.Bot. <strong><a target="_blank" href="https://docs.streamer.bot/guide/integrations/fourthwall">Follow the tutorial</a>.</strong></small></label></div>
+
+				<div class="setting"></div>
+
+				<div class="setting"><label>Donations</label><label class="switch"><input type="checkbox" name="showFourthwallDonations" checked><span class="slider"></span></label></div>
+				
+				<div class="setting"><label>Orders</label><label class="switch"><input type="checkbox" name="showFourthwallOrders" checked><span class="slider"></span></label></div>
+
+				<div class="setting"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showFourthwallSubscriptions" checked><span class="slider"></span></label></div>
+
+				<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Show Order Image</small></label><label class="switch"><input type="checkbox" name="showFourthwallShowImage" checked><span class="slider"></span></label></div>
+				<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Full Size Order Image<br><small>Shows the image above the event in full.</small></label><label class="switch"><input type="checkbox" name="showFourthwallBigImage" checked><span class="slider"></span></label></div>
+
+				<div class="setting"><label>Gift Purchase</label><label class="switch"><input type="checkbox" name="showFourthwallGiftPurchase" checked><span class="slider"></span></label></div>
+				<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Show Gift Image</label><label class="switch"><input type="checkbox" name="showFourthwallShowGiftImage" checked><span class="slider"></span></label></div>
+				<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Full Size Gift Image<br><small>Shows the image above the event in full.</small></label><label class="switch"><input type="checkbox" name="showFourthwallBigGiftImage" checked><span class="slider"></span></label></div>
+
+				<div class="setting"><label>Gift Draw</label><label class="switch"><input type="checkbox" name="showFourthwallGiftDraw" checked><span class="slider"></span></label></div>
+
+				<div class="setting field"><label>Gift Command<br><small>Command used to join the Gift Draw. </small></label><input type="text" name="fourthWallGiftDrawCommand" value="!enter"></div>
+			</div>
+
 			<footer>
 
 				<div class="nav-bar">
-					<a href="#config" class="active"><i class="fa-solid fa-screwdriver-wrench"></i></a>
+					<a title="Config" href="#config" class="active"><i class="fa-solid fa-screwdriver-wrench"></i></a>
-					<a href="#geral"><i class="fa-solid fa-gears"></i></a>
+					<a title="General" href="#geral"><i class="fa-solid fa-gears"></i></a>
-					<a href="#twitch"><i class="fa-brands fa-twitch"></i></a>
+					<a title="Twitch" href="#twitch"><i class="fa-brands fa-twitch"></i></a>
-					<a href="#youtube"><i class="fa-brands fa-youtube"></i></a>
+					<a title="YouTube" href="#youtube"><i class="fa-brands fa-youtube"></i></a>
-					<a href="#tiktok"><i class="fa-brands fa-tiktok"></i></a>
+					<a title="TikTok" href="#tiktok"><i class="fa-brands fa-tiktok"></i></a>
-					<a href="#kick">
+					<a title="Kick" href="#kick">
 						<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 800 800">
 							<polygon class="st0" points="336 111 336 239 401 239 401 175 465 175 465 111 657 111 657 303 593 303 593 367 529 367 529 432 593 432 593 496 657 496 657 689 465 689 465 624 401 624 401 560 336 560 336 689 143 689 143 111 336 111"/>
 						</svg>
 					</a>
-					<a href="#extras"><i class="fa-solid fa-dollar-sign"></i></a>
+					<a title="Donations" href="#extras"><i class="fa-solid fa-dollar-sign"></i></a>
+					<a title="Patreon" href="#patreon"><i class="fa-brands fa-patreon"></i></a>
+					<a title="TipeeeStream" href="#tipeee"><img src="images/logo-tipeeestream.svg"></a>
+					<a title="Ko-Fi" href="#kofi"><img src="images/logo-kofi.svg"></a>
+					<a title="FourthWall" href="#fourthwall"><img src="images/logo-fourthwall.svg"></a>
 					
 				</div>
 

js/app-mockup.js

@@ -216,7 +216,8 @@ function generateMockEvent() {
         
         'kick-follow', 'kick-sub',
         'kick-giftsub', 'kick-giftbomb', 'kick-raid',
-        
+
+        'patreon-membership', 'tipeeestream-tip',
 
         'streamlabs-tip', 'streamelements-tip',
     ];
@@ -723,6 +724,52 @@ function generateMockEvent() {
 
 
 
+        case 'patreon-membership' :
+
+            var data = {
+                attributes: {
+                    full_name:  user.name,
+                    will_pay_amount_cents: Math.floor(Math.random() * (10000 - 1000)) + 1000
+                }
+            };
+
+            patreonMemberships(data);
+
+        break;
+        
+
+
+
+
+
+
+
+
+
+
+        case 'tipeeestream-tip' :
+
+            var data = {
+                user: user.name,
+                amount: Math.floor(Math.random() * 2000) + 1,
+                currency: 'USD',
+                message: messagetext
+            };
+
+            tipeeeStreamDonation(data);
+
+        break;
+        
+
+
+
+
+
+
+
+
+
+
         case 'streamlabs-tip' :
 
             var data = {

js/fourthwall/module.js

@@ -0,0 +1,288 @@
+const showShopifyOrders              = getURLParam("showShopifyOrders", true);
+
+const shopifyMessageHandlers = {
+    'Shopify.OrderPaid': (response) => {
+        console.debug('Shopify Order Paid', response.data);
+        //shopifyOrderPaidMessage(response.data);
+    },
+};
+
+for (const [event, handler] of Object.entries(shopifyMessageHandlers)) {
+    streamerBotClient.on(event, handler);
+}
+
+
+async function shopifyOrderPaidMessage(data) {
+    
+    if (showShopifyOrders == false) return;
+
+    const {
+        username : userName,
+        amount,
+        currency,
+        message: text
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = formatCurrency(amount,currency);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.donation({
+            money: money,
+            message: text
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+
+async function fourthwallOrderMessage(data) {
+    
+    if (showFourthwallOrders == false) return;
+
+    const username = data.username;
+	const total = data.total;
+	const currency = data.currency;
+	const item = data.variants[0].name;
+	const itemsQuantity = data.variants.length;
+	const text = stripStringFromHtml(data.statmessageus);
+	const imageUrl = data.variants[0].image;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var userName = '';
+    if (username == undefined) { userName = currentLang.fourthwall.someone(); }
+    else { userName = username; }
+
+    var money = '';
+    if (total == 0) { money = 0; }
+    else { money = formatCurrency(total,currency); }
+
+    var fourthWallImage = '';
+    if (showFourthwallShowImage == true) {
+        fourthWallImage = imageUrl
+    }
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.order({
+            money: money,
+            firstItem: item,
+            items: itemsQuantity,
+            message: text,
+            image: fourthWallImage
+        }),
+    ]);
+
+    const classes = ['order'];
+    if (showFourthwallBigImage == true) {
+        classes.push('giantimage');
+    }
+
+    const messageData = {
+        classes: classes.join(' '),
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+
+async function fourthwallSubMessage(data) {
+    
+    if (showFourthwallSubscriptions == false) return;
+
+    const {
+        nickname : userName,
+        amount,
+        currency
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = formatCurrency(amount,currency);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.donation({
+            money: money
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+
+async function fourthwallGiftMessage(data) {
+    
+    if (showFourthwallGiftPurchase == false) return;
+
+    const userName = data.username;
+	const total = data.total;
+	const currency = data.currency;
+	const gifts = data.gifts.length;
+	const item = data.offer.name;
+	const imageUrl = data.offer.imageUrl;
+	const text = stripStringFromHtml(data.statmessageus);
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = '';
+    if (total == 0) { money = 0; }
+    else { money = formatCurrency(total,currency); }
+
+    var fourthWallImage = '';
+    if (showFourthwallShowGiftImage == true) {
+        fourthWallImage = imageUrl
+    }
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.gift({
+            money: money,
+            firstItem: item,
+            items: gifts,
+            message: text,
+            image: fourthWallImage
+        }),
+    ]);
+
+    const classes = ['gift'];
+    if (showFourthwallBigGiftImage == true) {
+        classes.push('giantimage');
+    }
+
+    const messageData = {
+        classes: classes.join(' '),
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+async function fourthwallGiftDrawStartMessage(data) {
+    
+    if (showFourthwallGiftDraw == false) return;
+
+    const {
+        offer: {
+            name: itemName
+        },
+        durationSeconds
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.drawstart({
+            gift: itemName,
+            command: fourthWallGiftDrawCommand
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+async function fourthwallGiftDrawEndMessage(data) {
+    
+    if (showFourthwallGiftDraw == false) return;
+
+    const {
+        data: {
+            gifts
+        }
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.fourthwall.drawend({
+            winners: getWinnersList(gifts)
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'fourthwall', messageData);
+}
+
+
+
+
+async function getWinnersList(gifts) {
+	const winners = gifts.map(gift => gift.winner).filter(Boolean); // Remove null/undefined
+
+	const numWinners = winners.length;
+
+	if (numWinners === 0) { return ""; }
+	if (numWinners === 1) { return winners[0]; }
+	if (numWinners === 2) { return `${winners[0]} and ${winners[1]}`; }
+
+	// For 3 or more, use the Oxford comma style: A, B, and C
+	const allButLast = winners.slice(0, -1).join(", ");
+	const lastWinner = winners[winners.length - 1];
+	return `${allButLast}, and ${lastWinner}`;
+}

js/kofi/module.js

@@ -0,0 +1,184 @@
+const showKofiSubscriptions             = getURLParam("showKofiSubscriptions", true);
+const showKofiDonations                 = getURLParam("showKofiDonations", true);
+const showKofiOrders                    = getURLParam("showKofiOrders", true);
+
+const kofiMessageHandlers = {
+    'Kofi.Donation': (response) => {
+        console.debug('Kofi Donation', response.data);
+        kofiDonationMessage(response.data);
+    },
+    'Kofi.Subscription': (response) => {
+        console.debug('Kofi Sub', response.data);
+        kofiSubMessage(response.data);
+    },
+    'Kofi.Resubscription': (response) => {
+        console.debug('Kofi Resub', response.data);
+        kofiReSubMessage(response.data);
+    },
+    'Kofi.ShopOrder': (response) => {
+        console.debug('Kofi Order', response.data);
+        kofiOrderMessage(response.data);
+    },
+};
+
+for (const [event, handler] of Object.entries(kofiMessageHandlers)) {
+    streamerBotClient.on(event, handler);
+}   
+
+
+async function kofiDonationMessage(data) {
+    
+    if (showKofiDonations == false) return;
+
+    const {
+        from : userName,
+        amount,
+        currency,
+        message: text
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = formatCurrency(amount,currency);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.kofi.donation({
+            money: money,
+            message: text
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'kofi', messageData);
+}   
+
+
+async function kofiSubMessage(data) {
+    
+    if (showKofiSubscriptions == false) return;
+
+    const {
+        from : userName,
+        amount,
+        currency,
+        message: text
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = formatCurrency(amount,currency);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.kofi.sub({
+            money: money,
+            message: text
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'kofi', messageData);
+}   
+
+
+async function kofiReSubMessage(data) {
+    
+    if (showKofiSubscriptions == false) return;
+
+    const {
+        from : userName,
+        tier,
+        message: text
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.kofi.resub({
+            tier: tier,
+            message: text
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'kofi', messageData);
+}
+
+
+async function kofiOrderMessage(data) {
+    
+    if (showKofiOrders == false) return;
+    const {
+        from : userName,
+        amount,
+        currency,
+        message: text,
+        items
+    } = data;
+
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    var money = '';
+
+    if (amount == 0) { money = 0; }
+    else { money = formatCurrency(amount,currency); }
+
+    var itemsQuantity = items.length
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.kofi.order({
+            money: money,
+            items: itemsQuantity
+        }),
+    ]);
+
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    
+    addEventToChat(userID, messageID, 'kofi', messageData);
+}

js/lang/en.js

@@ -93,5 +93,71 @@ const en = {
 
         raid : ({ viewers }) => ` raided the channel with <i class="fa-solid fa-users"></i> <strong>${viewers} viewers</strong>`
         
+    },
+
+    patreon: {
+        membership: ({ money }) => ` pledged a membership ($${money})`
+        
+    },
+
+    tipeeestream : {
+        tip : ({ money, message }) => ` donated 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
+    },
+
+    kofi : {
+        donation : ({ money, message }) => ` donated 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
+        sub : ({ money, tier, message }) => ` subscribed <strong>${money}</strong>${tier ? '(Tier '+tier+')' : ''}${message ? '<br>'+message : ''}`,
+        resub : ({ money, tier, message }) => ` subscribed <strong>${money}</strong>${tier ? '(Tier '+tier+')' : ''}${message ? '<br>'+message : ''}`,
+        order : ({ money, items }) => ` ordered <strong>${items} ${items == 1 ? 'item' : 'items'} (${money == 0 ? 'Free' : money})`,
+    },
+
+    fourthwall : {
+        someone : () => `Someone`,
+
+        donation : ({ money, message }) => ` donated 🪙 <strong>${money}</strong>${message ? '<br>'+message : ''}`,
+        sub : ({ money }) => ` subscribed <strong>(${money})</strong>`,
+
+        order : ({
+            money,
+            firstItem,
+            items,
+            message,
+            image,
+            
+        }) => ` 
+        ${image ? '<br>': ''}
+        ordered <strong>${firstItem}</strong> ${items > 1 ? 'and <strong>'+(items - 1)+' other '+((items - 1) == 1 ? 'item' : 'items')+'</strong>' : ''} 
+        (${money == 0 ? 'Free' : money})
+        ${message.trim() ? '<br>'+message : ''}
+        ${image ? '</span></span><span class="image"><img src="'+image+'"></span>': ''}
+        `,
+
+        gift : ({
+            money,
+            firstItem,
+            items,
+            message,
+            image,
+            
+        }) => ` 
+        ${image ? '<br>': ''}
+        gifted <strong>${items}x ${firstItem}</strong>
+        (${money == 0 ? 'Free' : money})
+        ${message.trim() ? '<br>'+message : ''}
+        ${image ? '</span></span><span class="image"><img src="'+image+'"></span>': ''}
+        `,
+
+
+        
+        drawstart : ({ gift, command }) => ` 
+        <strong><i class="fa-solid fa-gift fa-beat"></i> Giveaway started!</strong> 
+        Type ${command} to have a chance to win <strong>${gift}</strong>`,
+
+        drawend : ({ winners }) => ` 
+        <strong>🎉 Giveaway Ended!</strong> 
+        Congratulations <strong>${winners}</strong>`,
+
+
+
     },
 }

js/patreon/module.js

@@ -0,0 +1,46 @@
+const showPatreonMemberships        = getURLParam("showPatreonMemberships", true);
+
+const patreonHandlers = {
+    'Patreon.PledgeCreate': (response) => {
+        console.debug('Patreon Membersihp', response.data);
+        patreonMemberships(response.data);
+    },
+};
+for (const [event, handler] of Object.entries(patreonHandlers)) {
+    streamerBotClient.on(event, handler);
+}
+
+
+
+async function patreonMemberships(data) {
+    
+    if (showPatreonMemberships == false) return;
+
+    const {
+        attributes: {
+            full_name: userName,
+            will_pay_amount_cents: money
+        }
+    } = data;
+    
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.patreon.membership({
+            money : (money / 100).toFixed(2)
+        })
+    ]);
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    addEventToChat(userID, messageID, 'patreon', messageData);
+}

js/streamelements/module.js

@@ -2,7 +2,7 @@ const showStreamElementsTips        = getURLParam("showStreamElementsTips", true
 
 const streamElementsHandlers = {
     'StreamElements.Tip': (response) => {
-        console.debug(response.data);
+        console.debug('StreamElements Event', response.data);
         streamElementsEventMessage(response.data);
     },
 };
@@ -32,7 +32,7 @@ async function streamElementsEventMessage(data) {
             message : messageFromUser
         })
     ]);
-    const classes = 'streamelements';
+    const classes = '';
     const messageData = {
         classes: classes,
         avatar,

js/streamlabs/module.js

@@ -2,7 +2,7 @@ const showStreamlabsDonations       = getURLParam("showStreamlabsDonations", tru
 
 const streamLabsHandlers = {
     'Streamlabs.Donation': (response) => {
-        console.debug(response.data);
+        console.debug('StreamLabs Event', response.data);
         streamLabsEventMessage(response.data);
     },
 };
@@ -30,7 +30,7 @@ async function streamLabsEventMessage(data) {
             message : messageFromUser
         })
     ]);
-    const classes = 'streamlabs';
+    const classes = '';
     const messageData = {
         classes: classes,
         avatar,

js/tipeeestream/module.js

@@ -0,0 +1,47 @@
+const showTipeeeDonations        = getURLParam("showTipeeeDonations", true);
+
+const tipeeeHandlers = {
+    'TipeeeStream.Donation': (response) => {
+        console.debug('TipeeeStream Donation', response.data);
+        tipeeeStreamDonation(response.data);
+    },
+};
+for (const [event, handler] of Object.entries(tipeeeHandlers)) {
+    streamerBotClient.on(event, handler);
+}
+
+
+
+async function tipeeeStreamDonation(data) {
+    
+    if (showTipeeeDonations == false) return;
+
+    const {
+        user: userName,
+        amount,
+        currency,
+        message: text
+    } = data;
+    
+    const userID = createRandomString(40);
+    const messageID = createRandomString(40);
+
+    const [avatar, message] = await Promise.all([
+        '',
+        currentLang.tipeeestream.tip({
+            money : formatCurrency(amount,currency),
+            message: text
+        })
+    ]);
+    const classes = '';
+    const messageData = {
+        classes: classes,
+        avatar,
+        badges: '',
+        userName,
+        color: '#FFF',
+        message,
+        reply: '',
+    };
+    addEventToChat(userID, messageID, 'tipeeestream', messageData);
+}