jyapayne/streamer-widgets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add chat dock

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-07 16:07:52 -07:00
commit aad6675a28
10 changed files with 1712 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

54
app/assets/web/widgets/chatdock/index.html Normal file
View file

@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat Dock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chat-dock">
<div id="chat-header">
<div class="platform-tabs">
<button id="tab-all" class="tab active" data-platform="all">All</button>
<button id="tab-twitch" class="tab" data-platform="twitch">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"/></svg>
Twitch
</button>
<button id="tab-youtube" class="tab" data-platform="youtube">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
YouTube
</button>
</div>
<div id="connection-status">
<span class="status-dot"></span>
<span class="status-text">Connecting...</span>
</div>
</div>
<div id="chat-messages"></div>
<div id="chat-input-area">
<div id="input-header">
<div id="send-platform-indicator">
<span id="send-platform-icon"></span>
<span id="send-platform-name">Twitch</span>
</div>
<div id="auth-status">
<span id="auth-status-text">Checking...</span>
<button id="reconnect-btn" title="Reconnect chat (reload tokens)">
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M17.65 6.35A7.958 7.958 0 0012 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08A5.99 5.99 0 0112 18c-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
</button>
</div>
</div>
<div id="input-row">
<input type="text" id="message-input" placeholder="Send a message..." maxlength="500" autocomplete="off">
<button id="send-button" title="Send message">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/></svg>
</button>
</div>
<div id="char-counter"><span id="char-count">0</span>/500</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>