Ability to Chat on TikTok Enabled
This commit is contained in:
Rodrigo Emanuel
GitHub
23
chat.html
23
chat.html
@@ -1,4 +1,3 @@
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
@@ -55,11 +54,33 @@
|
|||||||
<div id="chat-input">
|
<div id="chat-input">
|
||||||
<div id="chat-autocomplete-list"></div>
|
<div id="chat-autocomplete-list"></div>
|
||||||
|
|
||||||
|
<div class="settings">
|
||||||
|
<div class="chat-enabler" id="twitch">
|
||||||
|
<img src="images/logo-twitch.svg" alt="">
|
||||||
|
<label class="switch"><input type="checkbox" name="chatOnTwitch" checked><span class="slider"></span></label>
|
||||||
|
</div>
|
||||||
|
<div class="chat-enabler" id="youtube">
|
||||||
|
<img src="images/logo-youtube.svg" alt="">
|
||||||
|
<label class="switch"><input type="checkbox" name="chatOnYoutube" checked><span class="slider"></span></label>
|
||||||
|
</div>
|
||||||
|
<div class="chat-enabler" id="tiktok">
|
||||||
|
<img src="images/logo-tiktok.svg" alt="">
|
||||||
|
<label class="switch"><input type="checkbox" name="chatOnTiktok"><span class="slider"></span></label>
|
||||||
|
<span class="hint">Chat only.<br>Needs setup!<br><a href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#tiktok-chat-setup" target="_blank">Read More</a></span>
|
||||||
|
</div>
|
||||||
|
<div class="chat-enabler" id="kick">
|
||||||
|
<img src="images/logo-kick.svg" alt="">
|
||||||
|
<label class="switch"><input type="checkbox" name="chatOnKick"><span class="slider"></span></label>
|
||||||
|
<span class="hint">Chat only.<br>Needs setup!<br><a href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#kickbot-installation-on-streamerbot" target="_blank">Read More</a></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
<input type="text">
|
<input type="text">
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
<button id="chat-input-send"><i class="fa-solid fa-paper-plane"></i></button>
|
<button id="chat-input-send"><i class="fa-solid fa-paper-plane"></i></button>
|
||||||
|
<button id="chat-input-settings"><i class="fa-solid fa-gear"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
31
css/app.css
31
css/app.css
@@ -576,19 +576,29 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
#chat-input #chat-input-send {
|
#chat-input #chat-input-send {
|
||||||
|
right: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-input #chat-input-settings {
|
||||||
right: 20px;
|
right: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-input .settings {
|
#chat-input .settings {
|
||||||
display: inline-block;
|
display: none;
|
||||||
background: #0c0c0c;
|
background: #0c0c0c;
|
||||||
padding: 10px;
|
padding: 10px 20px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -55px;
|
top: -75px;
|
||||||
right: 0px;
|
right: 0px;
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
|
|
||||||
|
box-shadow: 0 0 10px rgba(255,255,255,0.05)
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-input .settings.active {
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-input .settings::after {
|
#chat-input .settings::after {
|
||||||
@@ -625,6 +635,16 @@ body {
|
|||||||
height: 27px;
|
height: 27px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#chat-input .settings .hint {
|
||||||
|
color: #FFF;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chat-input .settings .hint a {
|
||||||
|
color: #ffcc00;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
/* Hide default HTML checkbox */
|
/* Hide default HTML checkbox */
|
||||||
#chat-input .settings .switch input[type=checkbox] {
|
#chat-input .settings .switch input[type=checkbox] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
@@ -668,7 +688,9 @@ body {
|
|||||||
#chat-input #youtube input[type=checkbox]:checked + .slider {
|
#chat-input #youtube input[type=checkbox]:checked + .slider {
|
||||||
background-color: #FF0000;
|
background-color: #FF0000;
|
||||||
}
|
}
|
||||||
|
#chat-input #tiktok input[type=checkbox]:checked + .slider {
|
||||||
|
background-color: #ff0050;
|
||||||
|
}
|
||||||
#chat-input #kick input[type=checkbox]:checked + .slider {
|
#chat-input #kick input[type=checkbox]:checked + .slider {
|
||||||
background-color: #48d415;
|
background-color: #48d415;
|
||||||
}
|
}
|
||||||
@@ -716,7 +738,6 @@ body {
|
|||||||
|
|
||||||
#chat-autocomplete-list div.autocomplete-item {
|
#chat-autocomplete-list div.autocomplete-item {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all ease-in-out 300ms;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-autocomplete-list div:not(.autocomplete-item) {
|
#chat-autocomplete-list div:not(.autocomplete-item) {
|
||||||
|
|||||||
@@ -11,7 +11,6 @@ body {
|
|||||||
background-color: #121212;
|
background-color: #121212;
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 30px;
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -22,12 +21,69 @@ hr {
|
|||||||
margin: 20px 0;
|
margin: 20px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
padding: 15px 30px;
|
||||||
|
border-bottom: 1px solid #222;
|
||||||
|
margin: 15px 0 0 0;
|
||||||
|
text-align: left;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 i {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 svg {
|
||||||
|
width: 26px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
fill: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 img {
|
||||||
|
width: 26px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 button {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 0;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
|
||||||
|
border: none;
|
||||||
|
background: black;
|
||||||
|
text-align: center;
|
||||||
|
color: #FFF;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
border-radius: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 button i {
|
||||||
|
margin: 0;
|
||||||
|
transition: transform 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.accordion-container {
|
||||||
|
/*max-height: 0;
|
||||||
|
overflow: hidden;*/
|
||||||
|
transition: max-height 0.4s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#chat-divided {
|
#chat-divided {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
gap: 30px;
|
gap: 30px;
|
||||||
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#chat-settings { width: 640px; }
|
#chat-settings { width: 640px; }
|
||||||
@@ -56,16 +112,6 @@ hr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.url-bar input[type=text] {
|
.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;*/
|
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -90,33 +136,20 @@ hr {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.tab-content {
|
.tab-content {
|
||||||
padding: 20px 30px;
|
border-radius: 0 0 20px 20px;
|
||||||
border-radius: 20px;
|
|
||||||
background: #171717;
|
background: #171717;
|
||||||
margin: 20px auto;
|
margin: 0 auto;
|
||||||
text-align: left;
|
text-align: left;
|
||||||
|
margin: 0 0 30px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content h2 {
|
.tab-content .wrapper {
|
||||||
margin-bottom: 15px;
|
padding: 20px 30px;
|
||||||
font-size: 20px;
|
|
||||||
padding: 15px 0px;
|
|
||||||
border-bottom: 1px solid #222;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content h2 i {
|
/* When visible */
|
||||||
margin-right: 5px;
|
.tab-content.open {
|
||||||
}
|
display: block;
|
||||||
|
|
||||||
.tab-content h2 svg {
|
|
||||||
width: 26px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
fill: #FFF;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-content h2 img {
|
|
||||||
width: 26px;
|
|
||||||
vertical-align: bottom;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-content .setting {
|
.tab-content .setting {
|
||||||
|
|||||||
497
index.html
497
index.html
@@ -19,274 +19,329 @@
|
|||||||
<div id="chat-settings">
|
<div id="chat-settings">
|
||||||
<h1>ChatRD - Setup</h1>
|
<h1>ChatRD - Setup</h1>
|
||||||
|
|
||||||
|
<h2><i class="fa-solid fa-screwdriver-wrench"></i> Config</h2>
|
||||||
|
|
||||||
<div class="tab-content" id="config">
|
<div class="tab-content" id="config">
|
||||||
<h2><i class="fa-solid fa-screwdriver-wrench"></i> Config</h2>
|
<div class="wrapper">
|
||||||
|
<div class="setting">
|
||||||
<div class="setting">
|
<small id="memberemotesbstatus" class="offline" style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;">
|
||||||
<small id="memberemotesbstatus" class="offline" style="display: inline-block; padding: 10px 20px 10px 10px; background-color: #232323; color: #FFF; border-radius: 10px;">
|
<i class="fa-solid fa-power-off"></i>
|
||||||
<i class="fa-solid fa-power-off"></i>
|
<span>Streamer.Bot is Offline!</span>
|
||||||
<span>Streamer.Bot is Offline!</span>
|
|
||||||
</small>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting field"><label>Streamer.bot WebSocket Server</label><input type="text" name="streamerBotServerAddress" value="127.0.0.1"></div>
|
|
||||||
<div class="setting field"><label>Streamer.bot WebSocket Port</label><input type="text" name="streamerBotServerPort" value="8080"></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-volume-high"></i> Speaker.Bot is required for Text-to-Speech! <strong><a target="_blank" href="https://github.com/vortisrd/chatrd#-how-to-set-tts-with-speakerbot">Follow the tutorial</a>.</strong></small></label></div>
|
|
||||||
|
|
||||||
<div class="setting"></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Text-to-Speech Chat<br><small>Enables TTS for Chat.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotChat"><span class="slider"></span></label></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Text-to-Speech Events<br><small>Enables TTS for Events.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotEvents"><span class="slider"></span></label></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-content" id="geral">
|
|
||||||
<h2><i class="fa-solid fa-gears"></i> General</h2>
|
|
||||||
<div class="setting select">
|
|
||||||
<label>Language<br><small>Change the chat's events language.</small></label>
|
|
||||||
<select name="language">
|
|
||||||
<option value="ptbr">Brazilian Portuguese</option>
|
|
||||||
<option value="en" selected>English</option>
|
|
||||||
<option value="es">Spanish</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting slider">
|
|
||||||
<label>Chat Font Size<br><small>Changes ChatRD's font size</small></label>
|
|
||||||
<label>
|
|
||||||
<input type="range" id="font-slider" name="chatFontSize" min="0.1" max="2" step="0.1" value="1">
|
|
||||||
<br><em id="font-value" class="slider-value">100%</em>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Scroll Bar<br><small>Adds a scrollbar.</small></label></label><label class="switch"><input type="checkbox" name="chatScrollBar"><span class="slider"></span></label></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Bigger Emotes<br><small>Increases the emotes size from 22px to 32px.</small></label></label><label class="switch"><input type="checkbox" name="chatBiggerEmotes"><span class="slider"></span></label></div>
|
|
||||||
|
|
||||||
<div class="setting"></div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<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> The Chat Field is a <strong>BETA</strong> feature!</small></label></div>
|
|
||||||
|
|
||||||
<div class="setting"></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Chat Field<br><small>Adds a chat field for you to type in your chat.</small></label></label><label class="switch"><input type="checkbox" name="chatField"><span class="slider"></span></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-circle-exclamation"></i> The Chat Field also accepts <strong>/commands</strong>. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#-commands-supported-by-the-chat-field">Commands Supported</a>.</strong></small></label></div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<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> Moderation is a <strong>BETA</strong> feature!</small></label></div>
|
|
||||||
|
|
||||||
<div class="setting"></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Moderation Actions<br><small>Adds buttons when you hover the messages.</small></label></label><label class="switch"><input type="checkbox" name="chatModeration"><span class="slider"></span></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-circle-exclamation"></i> Moderation Actions follows the Commands suported. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#-commands-supported-by-the-chat-field">Read More</a>.</strong></small></label></div>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="setting">
|
|
||||||
<label>Background Color<br><small>Changes ChatRD's background color</small></label>
|
|
||||||
<label>
|
|
||||||
<input type="color" name="chatBackground" value="#121212">
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting slider">
|
|
||||||
<label><i class="fa-solid fa-arrow-turn-up"></i> Background Opacity<br><small>Changes ChatRD's background color opacity</small></label>
|
|
||||||
<label>
|
|
||||||
<input type="range" id="bg-opacity-slider" name="chatBackgroundOpacity" min="0.0" max="1" step="0.1" value="1">
|
|
||||||
<br><em id="bg-opacity-value" class="slider-value">1</em>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Events Mockup<br><small>Will show random fake events when Streamer.bot is <strong><u>offline</u></strong>.</small></label></label><label class="switch"><input type="checkbox" name="eventsMockup" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Avatars</label><label class="switch"><input type="checkbox" name="showAvatar" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Timestamps</label><label class="switch"><input type="checkbox" name="showTimestamps" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> AM/PM</label><label class="switch"><input type="checkbox" name="ampmTimeStamps"><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Badges</label><label class="switch"><input type="checkbox" name="showBadges" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Platform Statistics<br><small>Shows all platform statistics.</small></label><label class="switch"><input type="checkbox" name="showPlatformStatistics" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Ignore Commands<br><small>Ignores texts starting with "!".</small></label><label class="switch"><input type="checkbox" name="excludeCommands" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting field"><label>Ignore Chatters<br><small>Separate their names by commas. eg.: StreamLabs,StreamElements</small></label><input type="text" name="ignoreChatters" value="Streamlabs,Streamelements"></div>
|
|
||||||
<div class="setting field"><label>Hide Chat Msg<br><small>Hides a message after X seconds. (0 disables it)</small></label><input type="number" name="hideAfter" value="0"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-content" id="twitch">
|
|
||||||
<h2><i class="fa-brands fa-twitch"></i> Twitch</h2>
|
|
||||||
<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>
|
|
||||||
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showTwitchSubs" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubs" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showTwitchMassGiftedSubs" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb Users Train<br><small>Shows all users that were gifted a sub on a Gifted Bomb.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubsUserTrain" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Channel Point Rewards</label><label class="switch"><input type="checkbox" name="showTwitchRewardRedemptions" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showTwitchRaids" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Shared Chat</label><label class="switch"><input type="checkbox" name="showTwitchSharedChat" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Statistics<br><small>Shows Twitch Viewers.</small></label><label class="switch"><input type="checkbox" name="showTwitchViewers" checked><span class="slider"></span></label></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tab-content" id="youtube">
|
|
||||||
<h2><i class="fa-brands fa-youtube"></i> YouTube</h2>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Show Super Sticker GIF</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerGif" checked><span class="slider"></span></label></div>
|
|
||||||
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Full Size Super Sticker<br><small>Shows the sticker above the event in full.</small></label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerFullSize"><span class="slider"></span></label></div>
|
|
||||||
|
|
||||||
<div class="setting"><label>Membership<br><small>Show Membership events. <u><strong>Disabling this disables all member events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMemberships" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership<br><small>Shows the person gifting members.</small></label><label class="switch"><input type="checkbox" name="showYouTubeGiftMemberships" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership Train<br><small>Shows all users that were gifted a membership on a massive gifting membership.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMembershipsTrain" checked><span class="slider"></span></label></div>
|
|
||||||
<div class="setting"><label>Statistics<br><small>Shows YouTube Viewers and Likes.</small></label><label class="switch"><input type="checkbox" name="showYouTubeStatistics" checked><span class="slider"></span></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> YouTube API doesn't expose Member Emotes. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#about-youtube-membership-emojis">Read more</a>.</strong></small></label></div>
|
|
||||||
|
|
||||||
<div class="setting"></div>
|
|
||||||
|
|
||||||
|
|
||||||
<div class="setting column">
|
|
||||||
<label>
|
|
||||||
Members Only Emotes
|
|
||||||
<br>
|
|
||||||
<small>You have to add member emotes manually. <em>Really YouTube!?</em> 🤨
|
|
||||||
</small>
|
</small>
|
||||||
</label>
|
|
||||||
<div class="emote-list">
|
|
||||||
|
|
||||||
<span class="emote-item">
|
|
||||||
<button class="add"><i class="fa-solid fa-plus"></i></button>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Textarea for debugging purposes -->
|
<div class="setting field"><label>Streamer.bot WebSocket Server</label><input type="text" name="streamerBotServerAddress" value="127.0.0.1"></div>
|
||||||
<textarea name="youTubeCustomEmotes" style="display: none;">{}</textarea>
|
<div class="setting field"><label>Streamer.bot WebSocket Port</label><input type="text" name="streamerBotServerPort" value="8080"></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-volume-high"></i> Speaker.Bot is required for Text-to-Speech! <strong><a target="_blank" href="https://github.com/vortisrd/chatrd#-how-to-set-tts-with-speakerbot">Follow the tutorial</a>.</strong></small></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Text-to-Speech Chat<br><small>Enables TTS for Chat.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotChat"><span class="slider"></span></label></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Text-to-Speech Events<br><small>Enables TTS for Events.</small></label><label class="switch"><input type="checkbox" name="ttsSpeakerBotEvents"><span class="slider"></span></label></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-content" id="tiktok">
|
|
||||||
<h2><i class="fa-brands fa-tiktok"></i> TikTok</h2>
|
|
||||||
<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>
|
<h2><i class="fa-solid fa-gears"></i> General <button class="accordion" data-target="geral"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
<div class="setting"><label>Gifts</label><label class="switch"><input type="checkbox" name="showTikTokGifts" checked><span class="slider"></span></label></div>
|
<div class="tab-content accordion-container" id="geral">
|
||||||
<div class="setting"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showTikTokSubs" checked><span class="slider"></span></label></div>
|
<div class="wrapper">
|
||||||
<div class="setting"><label>Statistics<br><small>Shows TikTok Viewers and Likes.</small></label><label class="switch"><input type="checkbox" name="showTikTokStatistics" checked><span class="slider"></span></label></div>
|
<div class="setting select">
|
||||||
|
<label>Language<br><small>Change the chat's events language.</small></label>
|
||||||
|
<select name="language">
|
||||||
|
<option value="ptbr">Brazilian Portuguese</option>
|
||||||
|
<option value="en" selected>English</option>
|
||||||
|
<option value="es">Spanish</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting slider">
|
||||||
|
<label>Chat Font Size<br><small>Changes ChatRD's font size</small></label>
|
||||||
|
<label>
|
||||||
|
<input type="range" id="font-slider" name="chatFontSize" min="0.1" max="2" step="0.1" value="1">
|
||||||
|
<br><em id="font-value" class="slider-value">100%</em>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Scroll Bar<br><small>Adds a scrollbar.</small></label></label><label class="switch"><input type="checkbox" name="chatScrollBar"><span class="slider"></span></label></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Bigger Emotes<br><small>Increases the emotes size from 22px to 32px.</small></label></label><label class="switch"><input type="checkbox" name="chatBiggerEmotes"><span class="slider"></span></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<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> The Chat Field is a <strong>BETA</strong> feature!</small></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Chat Field<br><small>Adds a chat field for you to type in your chat.</small></label></label><label class="switch"><input type="checkbox" name="chatField"><span class="slider"></span></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-circle-exclamation"></i> The Chat Field also accepts <strong>/commands</strong>. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#-commands-supported-by-the-chat-field">Commands Supported</a>.</strong></small></label></div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<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> Moderation is a <strong>BETA</strong> feature!</small></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Moderation Actions<br><small>Adds buttons when you hover the messages.</small></label></label><label class="switch"><input type="checkbox" name="chatModeration"><span class="slider"></span></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-circle-exclamation"></i> Moderation Actions follows the Commands suported. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#-commands-supported-by-the-chat-field">Read More</a>.</strong></small></label></div>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="setting">
|
||||||
|
<label>Background Color<br><small>Changes ChatRD's background color</small></label>
|
||||||
|
<label>
|
||||||
|
<input type="color" name="chatBackground" value="#121212">
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting slider">
|
||||||
|
<label><i class="fa-solid fa-arrow-turn-up"></i> Background Opacity<br><small>Changes ChatRD's background color opacity</small></label>
|
||||||
|
<label>
|
||||||
|
<input type="range" id="bg-opacity-slider" name="chatBackgroundOpacity" min="0.0" max="1" step="0.1" value="1">
|
||||||
|
<br><em id="bg-opacity-value" class="slider-value">1</em>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Events Mockup<br><small>Will show random fake events when Streamer.bot is <strong><u>offline</u></strong>.</small></label></label><label class="switch"><input type="checkbox" name="eventsMockup" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Horizontal Direction<br><small>Chat/Events will be horizontal.</small></label></label><label class="switch"><input type="checkbox" name="chatHorizontal"><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Platforms<br><small>Shows the platforms icons.</small></label></label><label class="switch"><input type="checkbox" name="showPlatform" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Avatars</label><label class="switch"><input type="checkbox" name="showAvatar" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Timestamps</label><label class="switch"><input type="checkbox" name="showTimestamps" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> AM/PM</label><label class="switch"><input type="checkbox" name="ampmTimeStamps"><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Badges</label><label class="switch"><input type="checkbox" name="showBadges" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Platform Statistics<br><small>Shows all platform statistics.</small></label><label class="switch"><input type="checkbox" name="showPlatformStatistics" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Ignore Commands<br><small>Ignores texts starting with "!".</small></label><label class="switch"><input type="checkbox" name="excludeCommands" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting field"><label>Ignore Chatters<br><small>Separate their names by commas. eg.: StreamLabs,StreamElements</small></label><input type="text" name="ignoreChatters" value="Streamlabs,Streamelements"></div>
|
||||||
|
<div class="setting field"><label>Hide Chat Msg<br><small>Hides a message after X seconds. (0 disables it)</small></label><input type="number" name="hideAfter" value="0"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tab-content" id="kick">
|
|
||||||
<h2>
|
|
||||||
<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>
|
|
||||||
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> Kick 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>
|
|
||||||
|
|
||||||
<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<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>
|
<h2><i class="fa-brands fa-twitch"></i> Twitch <button class="accordion" data-target="twitch"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="twitch">
|
||||||
<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>
|
<div class="wrapper">
|
||||||
|
<div class="setting"><label>Chat<br><small>Reads Twitch chat.</small></label><label class="switch"><input type="checkbox" name="showTwitchMessages" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"></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"><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> <strong><a href="https://github.com/Sehelitar/Kick.bot/" target="_blank">Kick.Bot</a></strong> is required for events. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main#kickbot-installation-on-streamerbot">Follow the tutorial</a>.</strong></small></label></div>
|
<div class="setting"><label>Announcements</label><label class="switch"><input type="checkbox" name="showTwitchAnnouncements" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showTwitchSubs" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"></div>
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubs" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showTwitchMassGiftedSubs" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showKickFollows" checked><span class="slider"></span></label></div>
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb Users Train<br><small>Shows all users that were gifted a sub on a Gifted Bomb.</small></label><label class="switch"><input type="checkbox" name="showTwitchGiftedSubsUserTrain" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showKickSubs" checked><span class="slider"></span></label></div>
|
<div class="setting"><label>Channel Point Rewards</label><label class="switch"><input type="checkbox" name="showTwitchRewardRedemptions" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showKickGiftedSubs" checked><span class="slider"></span></label></div>
|
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showTwitchRaids" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showKickMassGiftedSubs" checked><span class="slider"></span></label></div>
|
<div class="setting"><label>Shared Chat</label><label class="switch"><input type="checkbox" name="showTwitchSharedChat" checked><span class="slider"></span></label></div>
|
||||||
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showKickRaids" checked><span class="slider"></span></label></div>
|
<div class="setting"><label>Statistics<br><small>Shows Twitch Viewers.</small></label><label class="switch"><input type="checkbox" name="showTwitchViewers" checked><span class="slider"></span></label></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
<h2><i class="fa-brands fa-youtube"></i> YouTube <button class="accordion" data-target="youtube"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="youtube">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="setting"><label>Chat<br><small>Reads YouTube chat.</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>
|
||||||
|
|
||||||
<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><i class="fa-solid fa-arrow-turn-up"></i> Show Super Sticker GIF</label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerGif" 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 class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Full Size Super Sticker<br><small>Shows the sticker above the event in full.</small></label><label class="switch"><input type="checkbox" name="showYouTubeSuperStickerFullSize"><span class="slider"></span></label></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Membership<br><small>Show Membership events. <u><strong>Disabling this disables all member events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMemberships" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership<br><small>Shows the person gifting members.</small></label><label class="switch"><input type="checkbox" name="showYouTubeGiftMemberships" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Membership Train<br><small>Shows all users that were gifted a membership on a massive gifting membership.</small></label><label class="switch"><input type="checkbox" name="showYouTubeMembershipsTrain" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Statistics<br><small>Shows YouTube Viewers and Likes.</small></label><label class="switch"><input type="checkbox" name="showYouTubeStatistics" checked><span class="slider"></span></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> YouTube API doesn't expose Member Emotes. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main?tab=readme-ov-file#about-youtube-membership-emojis">Read more</a>.</strong></small></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="setting column">
|
||||||
|
<label>
|
||||||
|
Members Only Emotes
|
||||||
|
<br>
|
||||||
|
<small>You have to add member emotes manually. <em>Really YouTube!?</em> 🤨
|
||||||
|
</small>
|
||||||
|
</label>
|
||||||
|
<div class="emote-list">
|
||||||
|
|
||||||
|
<span class="emote-item">
|
||||||
|
<button class="add"><i class="fa-solid fa-plus"></i></button>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Textarea for debugging purposes -->
|
||||||
|
<textarea name="youTubeCustomEmotes" style="display: none;">{}</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</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>
|
|
||||||
|
<h2><i class="fa-brands fa-tiktok"></i> TikTok <button class="accordion" data-target="tiktok"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="tiktok">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="setting"><label>Chat<br><small>Reads TikTok chat.</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>
|
||||||
|
<div class="setting"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showTikTokSubs" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Statistics<br><small>Shows TikTok Viewers and Likes.</small></label><label class="switch"><input type="checkbox" name="showTikTokStatistics" checked><span class="slider"></span></label></div>
|
||||||
|
</div>
|
||||||
</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>
|
|
||||||
|
<h2>
|
||||||
|
<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>
|
||||||
|
Kick <button class="accordion" data-target="kick"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="kick">
|
||||||
|
<div class="wrapper">
|
||||||
|
|
||||||
|
<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> Kick 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>
|
||||||
|
|
||||||
|
<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<br><small>Reads Kick chat.</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>
|
||||||
|
|
||||||
|
<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> <strong><a href="https://github.com/Sehelitar/Kick.bot/" target="_blank">Kick.Bot</a></strong> is required for events. <strong><a target="_blank" href="https://github.com/vortisrd/chatrd/tree/main#kickbot-installation-on-streamerbot">Follow the tutorial</a>.</strong></small></label></div>
|
||||||
|
|
||||||
|
<div class="setting"></div>
|
||||||
|
|
||||||
|
<div class="setting"><label>Followers</label><label class="switch"><input type="checkbox" name="showKickFollows" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Subscriptions<br><small>Show Subscription events. <u><strong>Disabling this disables all sub events</strong></u>.</small></label><label class="switch"><input type="checkbox" name="showKickSubs" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Subs<br><small>When a user gifts another user a sub.</small></label><label class="switch"><input type="checkbox" name="showKickGiftedSubs" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label><i class="fa-solid fa-arrow-turn-up"></i> Gifted Bomb<br><small>When a user gifts subs massively.</small></label><label class="switch"><input type="checkbox" name="showKickMassGiftedSubs" checked><span class="slider"></span></label></div>
|
||||||
|
<div class="setting"><label>Raids</label><label class="switch"><input type="checkbox" name="showKickRaids" checked><span class="slider"></span></label></div>
|
||||||
|
</div>
|
||||||
</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>
|
<h2><i class="fa-solid fa-dollar-sign"></i> Donations <button class="accordion" data-target="extras"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
<div class="setting"><label>Orders</label><label class="switch"><input type="checkbox" name="showKofiOrders" checked><span class="slider"></span></label></div>
|
<div class="tab-content accordion-container" id="extras">
|
||||||
|
<div class="wrapper">
|
||||||
|
<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>
|
</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>
|
<h2><i class="fa-brands fa-patreon"></i> Patreon <button class="accordion" data-target="patreon"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="patreon">
|
||||||
|
<div class="wrapper">
|
||||||
|
<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"><label>Subscriptions</label><label class="switch"><input type="checkbox" name="showFourthwallSubscriptions" checked><span class="slider"></span></label></div>
|
<div class="setting"></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>Memberships</label><label class="switch"><input type="checkbox" name="showPatreonMemberships" 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>
|
||||||
|
</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>
|
|
||||||
|
|
||||||
|
<h2><img src="images/logo-tipeeestream.svg" alt=""> TipeeeStream <button class="accordion" data-target="tipeee"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="tipeee">
|
||||||
|
<div class="wrapper">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2><img src="images/logo-kofi.svg" alt=""> Ko-Fi <button class="accordion" data-target="kofi"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="kofi">
|
||||||
|
<div class="wrapper">
|
||||||
|
<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>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<h2><img src="images/logo-fourthwall.svg" alt=""> Fourthwall <button class="accordion" data-target="fourthwall"><i class="fa-solid fa-chevron-down"></i></button></h2>
|
||||||
|
<div class="tab-content accordion-container" id="fourthwall">
|
||||||
|
<div class="wrapper">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
|
|||||||
88
js/app.js
88
js/app.js
@@ -416,14 +416,29 @@ chatInputForm.addEventListener("submit", function(event) {
|
|||||||
|
|
||||||
var chatSendPlatforms = [];
|
var chatSendPlatforms = [];
|
||||||
|
|
||||||
if (showTwitchMessages == true) {
|
const chatOnTwitch = document.querySelector('#chat-input #twitch input[type=checkbox]').checked;
|
||||||
|
const chatOnYoutube = document.querySelector('#chat-input #youtube input[type=checkbox]').checked;
|
||||||
|
const chatOnTiktok = document.querySelector('#chat-input #tiktok input[type=checkbox]').checked;
|
||||||
|
const chatOnKick = document.querySelector('#chat-input #kick input[type=checkbox]').checked;
|
||||||
|
|
||||||
|
console.log(chatOnTwitch,chatOnYoutube,chatOnTiktok,chatOnKick);
|
||||||
|
|
||||||
|
if (chatOnTwitch == true) {
|
||||||
chatSendPlatforms.push('twitch');
|
chatSendPlatforms.push('twitch');
|
||||||
}
|
}
|
||||||
|
|
||||||
if (showYouTubeMessages == true) {
|
if (chatOnYoutube == true) {
|
||||||
chatSendPlatforms.push('youtube');
|
chatSendPlatforms.push('youtube');
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (chatOnTiktok == true) {
|
||||||
|
chatSendPlatforms.push('tiktok');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (chatOnKick == true) {
|
||||||
|
chatSendPlatforms.push('kick');
|
||||||
|
}
|
||||||
|
|
||||||
chatSendPlatforms = chatSendPlatforms.join(',')
|
chatSendPlatforms = chatSendPlatforms.join(',')
|
||||||
|
|
||||||
const chatInput = chatInputForm.querySelector("input[type=text]")
|
const chatInput = chatInputForm.querySelector("input[type=text]")
|
||||||
@@ -441,19 +456,31 @@ chatInputForm.addEventListener("submit", function(event) {
|
|||||||
console.debug('Sending Chat to Streamer.Bot', sendchatstuff);
|
console.debug('Sending Chat to Streamer.Bot', sendchatstuff);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (showKickMessages == true) {
|
// Sends Message to Kick that are not commands
|
||||||
// Sends Message to Kick that are not commands
|
if (chatSendPlatforms.includes('kick')) {
|
||||||
if (chatSendPlatforms.includes('kick')) {
|
if (!chatInputText.startsWith('/')) {
|
||||||
if (!chatInputText.startsWith('/')) {
|
streamerBotClient.doAction(
|
||||||
streamerBotClient.doAction(
|
{ name : "ChatRD Kick Messages" },
|
||||||
{ name : "ChatRD Kick Messages" },
|
{
|
||||||
{
|
"message": chatInputText,
|
||||||
"message": chatInputText,
|
|
||||||
}
|
|
||||||
).then( (sendchatstuff) => {
|
|
||||||
console.debug('Sending Kick Chat to Streamer.Bot', sendchatstuff);
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
).then( (sendchatstuff) => {
|
||||||
|
console.debug('Sending Kick Chat to Streamer.Bot', sendchatstuff);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sends Message to TikTok that are not commands
|
||||||
|
if (chatSendPlatforms.includes('tiktok')) {
|
||||||
|
if (!chatInputText.startsWith('/')) {
|
||||||
|
streamerBotClient.doAction(
|
||||||
|
{ name : "ChatRD TikTok Messages" },
|
||||||
|
{
|
||||||
|
"ttkmessage": chatInputText,
|
||||||
|
}
|
||||||
|
).then( (sendchatstuff) => {
|
||||||
|
console.debug('Sending TikTok Chat to Streamer.Bot', sendchatstuff);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -588,3 +615,36 @@ document.addEventListener('click', function (e) {
|
|||||||
chatcommandslist.innerHTML = '';
|
chatcommandslist.innerHTML = '';
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", function () {
|
||||||
|
|
||||||
|
const settingsPanel = document.querySelector('#chat-input .settings');
|
||||||
|
|
||||||
|
chatSettings.addEventListener('click', function () {
|
||||||
|
settingsPanel.classList.toggle('active');
|
||||||
|
chatSettings.classList.toggle('active');
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const checkboxNames = ["chatOnTwitch", "chatOnYouTube", "chatOnTiktok", "chatOnKick"];
|
||||||
|
|
||||||
|
// Restore checkbox states from localStorage
|
||||||
|
checkboxNames.forEach(name => {
|
||||||
|
const checkbox = document.querySelector(`input[name="${name}"]`);
|
||||||
|
const savedValue = localStorage.getItem(name);
|
||||||
|
if (checkbox && savedValue !== null) {
|
||||||
|
checkbox.checked = savedValue === "true";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Save state to localStorage on change
|
||||||
|
checkboxNames.forEach(name => {
|
||||||
|
const checkbox = document.querySelector(`input[name="${name}"]`);
|
||||||
|
if (checkbox) {
|
||||||
|
checkbox.addEventListener("change", function () {
|
||||||
|
localStorage.setItem(name, checkbox.checked);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
@@ -2,7 +2,7 @@ const showPatreonMemberships = getURLParam("showPatreonMemberships", true
|
|||||||
|
|
||||||
const patreonHandlers = {
|
const patreonHandlers = {
|
||||||
'Patreon.PledgeCreated': (response) => {
|
'Patreon.PledgeCreated': (response) => {
|
||||||
console.debug('Patreon Membersihp', response.data);
|
console.debug('Patreon Membership', response.data);
|
||||||
patreonMemberships(response.data);
|
patreonMemberships(response.data);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
109
js/settings.js
109
js/settings.js
@@ -354,38 +354,99 @@ async function populateEmoteList() {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const accordionButtons = document.querySelectorAll("button.accordion");
|
||||||
|
|
||||||
|
accordionButtons.forEach(button => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
const targetId = button.getAttribute("data-target");
|
||||||
|
const target = document.getElementById(targetId);
|
||||||
|
const icon = button.querySelector("i");
|
||||||
|
|
||||||
|
if (!target || !target.classList.contains("accordion-container")) return;
|
||||||
|
|
||||||
|
const isOpen = target.classList.contains("open");
|
||||||
|
|
||||||
|
// Fecha todos os outros accordions
|
||||||
|
document.querySelectorAll(".accordion-container.open").forEach(container => {
|
||||||
|
if (container !== target) {
|
||||||
|
container.classList.remove("open");
|
||||||
|
container.style.maxHeight = null;
|
||||||
|
|
||||||
|
const otherButton = document.querySelector(`button.accordion[data-target="${container.id}"]`);
|
||||||
|
if (otherButton) {
|
||||||
|
const otherIcon = otherButton.querySelector("i");
|
||||||
|
if (otherIcon) otherIcon.className = "fa-solid fa-chevron-down";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Alterna o atual
|
||||||
|
if (!isOpen) {
|
||||||
|
target.classList.add("open");
|
||||||
|
target.style.maxHeight = target.scrollHeight + "px";
|
||||||
|
if (icon) icon.className = "fa-solid fa-chevron-up";
|
||||||
|
|
||||||
|
// Espera a animação terminar para scrollar
|
||||||
|
target.addEventListener("transitionend", function handler(e) {
|
||||||
|
if (e.propertyName === "max-height") {
|
||||||
|
target.removeEventListener("transitionend", handler);
|
||||||
|
|
||||||
|
const offset = target.getBoundingClientRect().top + window.scrollY - 60;
|
||||||
|
window.scrollTo({
|
||||||
|
top: offset,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
else {
|
||||||
|
target.classList.remove("open");
|
||||||
|
target.style.maxHeight = null;
|
||||||
|
if (icon) icon.className = "fa-solid fa-chevron-down";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
window.addEventListener('load', () => {
|
window.addEventListener('load', () => {
|
||||||
loadSettingsFromLocalStorage();
|
loadSettingsFromLocalStorage();
|
||||||
generateUrl();
|
generateUrl();
|
||||||
pushChangeEvents();
|
pushChangeEvents();
|
||||||
populateEmoteList();
|
populateEmoteList();
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
|
document.querySelectorAll('.nav-bar a').forEach(anchor => {
|
||||||
|
anchor.addEventListener('click', function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
document.querySelectorAll('.nav-bar a').forEach(anchor => {
|
// Remove todas as classes dos links dentro da nav-bar
|
||||||
anchor.addEventListener('click', function (e) {
|
document.querySelectorAll('.nav-bar a').forEach(link => {
|
||||||
e.preventDefault();
|
link.classList.remove('active');
|
||||||
|
|
||||||
// Remove todas as classes dos links dentro da nav-bar
|
|
||||||
document.querySelectorAll('.nav-bar a').forEach(link => {
|
|
||||||
link.classList.remove('active');
|
|
||||||
});
|
|
||||||
|
|
||||||
this.classList.add('active');
|
|
||||||
|
|
||||||
const targetId = this.getAttribute('href');
|
|
||||||
const targetElement = document.querySelector(targetId);
|
|
||||||
|
|
||||||
if (targetElement) {
|
|
||||||
|
|
||||||
const offset = 20; // ajusta 20px acima
|
|
||||||
const y = targetElement.getBoundingClientRect().top + window.scrollY - offset;
|
|
||||||
|
|
||||||
window.scrollTo({
|
|
||||||
top: y,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
this.classList.add('active');
|
||||||
|
|
||||||
|
const targetId = this.getAttribute('href');
|
||||||
|
const targetElement = document.querySelector(targetId);
|
||||||
|
|
||||||
|
if (targetElement) {
|
||||||
|
|
||||||
|
const offset = 60; // ajusta 20px acima
|
||||||
|
const y = targetElement.getBoundingClientRect().top + window.scrollY - offset;
|
||||||
|
|
||||||
|
window.scrollTo({
|
||||||
|
top: y,
|
||||||
|
behavior: 'smooth'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
});
|
});
|
||||||
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user