Add files via upload

chat.html

@@ -59,40 +59,7 @@
                     <input type="text">
                 </form>
 
-                <button id="chat-input-config"><i class="fa-solid fa-gear"></i></button>
                 <button id="chat-input-send"><i class="fa-solid fa-paper-plane"></i></button>
-
-                <div id="chat-input-settings" class="settings animate__faster" style="display: none;">
-                    <span class="chat-enabler" id="twitch">
-                        <img src="images/logo-twitch.svg">
-                        <label class="switch">
-                            <input type="checkbox" data-platform="twitch" name="twitchChatSend" checked>
-                            <span class="slider"></span>
-                        </label>
-                    </span>
-
-                    <span class="chat-enabler" id="youtube">
-                        <img src="images/logo-youtube.svg">
-                        <label class="switch">
-                            <input type="checkbox" data-platform="youtube" name="youtubeChatSend" checked>
-                            <span class="slider"></span>
-                        </label>
-                    </span>
-
-                    <span class="chat-enabler" id="kick" title="Only Chat, No commands.">
-                        <img src="images/logo-kick.svg">
-                        <label class="switch">
-                            <input type="checkbox" data-platform="kick" name="kickChatSend" checked>
-                            <span class="slider"></span>
-                        </label>
-                        <i class="fa-solid fa-triangle-exclamation"></i>
-                    </span>
-
-                    <span class="chat-enabler" id="tiktok">
-                        <img src="images/logo-tiktok.svg">
-                        <i class="fa-solid fa-ban"></i>
-                    </span>
-                </div>
             </div>
         </div>
     </div>

css/app.css

@@ -575,13 +575,8 @@ body {
     color: #ffcc00;
 }
 
-
-#chat-input #chat-input-config {
-    right: 20px;
-}
-
 #chat-input #chat-input-send {
-    right: 60px;
+    right: 20px;
 }
 
 #chat-input .settings {

index.html

@@ -121,7 +121,7 @@
 
 			<div class="tab-content" id="twitch">
 				<h2><i class="fa-brands fa-twitch"></i> Twitch</h2>
-				<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTwitchMessages" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Chat<br><small>Reads Twitch chat. If <strong>Chat Field is on</strong>, allows to send messages.</small></label><label class="switch"><input type="checkbox" name="showTwitchMessages" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTwitchFollows" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Bits</label><label class="switch"><input type="checkbox" name="showTwitchBits" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Announcements</label><label class="switch"><input type="checkbox" name="showTwitchAnnouncements" checked><span class="slider"></span></label></div>
@@ -137,7 +137,7 @@
 
 			<div class="tab-content" id="youtube">
 				<h2><i class="fa-brands fa-youtube"></i> YouTube</h2>
-				<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showYouTubeMessages" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Chat<br><small>Reads YouTube chat. If <strong>Chat Field is on</strong>, allows to send messages.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMessages" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>SuperChat</label><label class="switch"><input type="checkbox" name="showYouTubeSuperChats" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Super Sticker</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickers" checked><span class="slider"></span></label></div>
 				
@@ -178,7 +178,7 @@
 
 			<div class="tab-content" id="tiktok">
 				<h2><i class="fa-brands fa-tiktok"></i> TikTok</h2>
-				<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showTikTokMessages" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Chat<br><small>Reads TikTok chat. Currently doesn't work with <strong>Chat Field</strong>.</small></label><label class="switch"><input type="checkbox" name="showTikTokMessages" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showTikTokFollows" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Likes<br><small>Show likes in <strong>15</strong> increments. Why? <em>Blame TikFinity!</em> 🤣</small></label><label class="switch"><input type="checkbox" name="showTikTokLikes" checked><span class="slider"></span></label></div>
 				<div class="setting"><label>Gifts</label><label class="switch"><input type="checkbox" name="showTikTokGifts" checked><span class="slider"></span></label></div>
@@ -200,7 +200,7 @@
 
 				<div class="setting field"><label>Your Kick Username<br><small>Your user handle. It's on kick.com/<strong><u>username</u></strong></small></label><input type="text" name="kickUserName" value=""></div>
 
-				<div class="setting"><label>Chat</label><label class="switch"><input type="checkbox" name="showKickMessages" checked><span class="slider"></span></label></div>
+				<div class="setting"><label>Chat<br><small>Reads Kick chat. If <strong>Chat Field is on</strong>, allows to send messages.</small></label><label class="switch"><input type="checkbox" name="showKickMessages" checked><span class="slider"></span></label></div>
 				
 				<div class="setting"><label>Statistics<br><small>Show Kick Viewers. Self-updates each 15 seconds.</small></label><label class="switch"><input type="checkbox" name="showKickViewers" checked><span class="slider"></span></label></div>
 

js/app.js

@@ -406,7 +406,6 @@ function hexToRGBA(hexadecimal,opacity) {
 
 
 
-const chatInputConfig = document.getElementById("chat-input-config");
 const chatInputSend = document.getElementById("chat-input-send");
 const chatInputForm = document.querySelector("#chat-input form");
 const chatInput = chatInputForm.querySelector("input[type=text]")
@@ -417,14 +416,13 @@ chatInputForm.addEventListener("submit", function(event) {
 
     var chatSendPlatforms = [];
 
-    const settingsContainer = document.getElementById("chat-input-settings");
+    if (showTwitchMessages == true) {
-    const checkboxes = settingsContainer.querySelectorAll('input[type="checkbox"]');
+        chatSendPlatforms.push('twitch');
+    }
 
-    checkboxes.forEach(checkbox => {
+    if (showYouTubeMessages == true) {
-        const checked = checkbox.checked;
+        chatSendPlatforms.push('youtube');
-        const platform = checkbox.getAttribute('data-platform');        
+    }
-        if (checked == true) { chatSendPlatforms.push(platform); }
-    });
 
     chatSendPlatforms = chatSendPlatforms.join(',')
 
@@ -432,7 +430,6 @@ chatInputForm.addEventListener("submit", function(event) {
     const chatInputText = chatInput.value;
 
     // Sends Message to Twitch and YouTube 
-
     streamerBotClient.doAction(
     { name : "ChatRD Messages and Commands" },
     {
@@ -444,6 +441,7 @@ chatInputForm.addEventListener("submit", function(event) {
         console.debug('Sending Chat to Streamer.Bot', sendchatstuff);
     });
     
+    if (showKickMessages == true) {
         // Sends Message to Kick that are not commands
         if (chatSendPlatforms.includes('kick')) {
             if (!chatInputText.startsWith('/')) {
@@ -457,6 +455,7 @@ chatInputForm.addEventListener("submit", function(event) {
                 });
             }
         }
+    }
 
     chatInput.value = '';
 });
@@ -465,41 +464,7 @@ chatInputSend.addEventListener("click", function () {
     chatInputForm.requestSubmit();
 });
 
-chatInputConfig.addEventListener("click", function () {
-    const isHidden = chatSettings.style.display === "none" || chatSettings.classList.contains("animate__fadeOutDown");
 
-    if (isHidden) {
-      // Remover animação de saída (caso ainda esteja presente)
-        chatSettings.classList.remove("animate__fadeOutDown");
-
-        // Mostrar com animação de entrada
-        chatSettings.style.display = "block";
-        chatSettings.classList.add("animate__animated", "animate__fadeInUp");
-
-        // Limpa as classes após a animação
-        chatSettings.addEventListener("animationend", function handler() {
-            chatSettings.classList.remove("animate__animated", "animate__fadeInUp");
-            chatSettings.removeEventListener("animationend", handler);
-        });
-
-        chatInputConfig.classList.add("active");
-    }
-
-    else {
-        // Começar animação de saída
-        chatSettings.classList.remove("animate__fadeInUp");
-        chatSettings.classList.add("animate__animated", "animate__fadeOutDown");
-
-        // Após animação, esconder elemento
-        chatSettings.addEventListener("animationend", function handler() {
-            chatSettings.style.display = "none";
-            chatSettings.classList.remove("animate__animated", "animate__fadeOutDown");
-            chatSettings.removeEventListener("animationend", handler);
-        });
-
-        chatInputConfig.classList.remove("active");
-    }
-});
 
 
 async function executeModCommand(event, command) {
@@ -520,31 +485,6 @@ async function executeModCommand(event, command) {
 }
 
 
-document.addEventListener("DOMContentLoaded", () => {
-    const settingsContainer = document.getElementById("chat-input-settings");
-
-    // Seleciona apenas checkboxes DENTRO do container
-    const checkboxes = settingsContainer.querySelectorAll('input[type="checkbox"]');
-
-    checkboxes.forEach(checkbox => {
-        const name = checkbox.name;
-        if (!name) return; // Ignora se o checkbox não tem 'name'
-
-        // Restaurar estado salvo
-        const saved = localStorage.getItem(name);
-        if (saved !== null) {
-            checkbox.checked = saved === "true";
-        }
-
-        // Salvar alterações
-        checkbox.addEventListener("change", () => {
-            localStorage.setItem(name, checkbox.checked);
-        });
-    });
-});
-
-
-
 let chatcommands = {
     "Twitch" : [
         { "name" : "/me", "usage" : "[message]"  },