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

Make twitch/youtube chat widget

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-07 12:47:09 -07:00
commit 0842dccf73
22 changed files with 3787 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

470
app/assets/web/config.html Normal file
View file

@ -0,0 +1,470 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Chat Configuration - Streamer Widgets</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f8fafc;
color: #334155;
margin: 0;
padding: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
header {
background: #0f172a;
color: white;
padding: 24px 32px;
}
h1 {
margin: 0;
font-size: 24px;
font-weight: 600;
}
.content {
padding: 32px;
}
.section {
margin-bottom: 32px;
padding-bottom: 24px;
border-bottom: 1px solid #e2e8f0;
}
.section:last-child {
border-bottom: none;
}
h2 {
font-size: 18px;
margin: 0 0 16px;
color: #1e293b;
}
.form-group {
margin-bottom: 16px;
}
label {
display: block;
margin-bottom: 6px;
font-weight: 500;
font-size: 14px;
}
input[type="text"],
input[type="number"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #cbd5e1;
border-radius: 6px;
font-size: 14px;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-right: 8px;
}
.checkbox-label {
display: flex;
align-items: center;
margin-bottom: 8px;
cursor: pointer;
}
button {
background: #0f172a;
color: white;
border: none;
padding: 10px 20px;
border-radius: 6px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
margin-right: 8px;
}
button:hover {
background: #1e293b;
}
button.secondary {
background: #e2e8f0;
color: #0f172a;
}
button.secondary:hover {
background: #cbd5e1;
}
button:disabled {
background: #94a3b8;
cursor: not-allowed;
opacity: 0.7;
}
button:disabled:hover {
background: #94a3b8;
}
.status {
margin-top: 16px;
padding: 12px;
border-radius: 6px;
font-size: 14px;
display: none;
}
.status.success {
background: #dcfce7;
color: #166534;
display: block;
}
.status.error {
background: #fee2e2;
color: #991b1b;
display: block;
}
.platform-status {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
margin-left: 8px;
}
.connected {
background: #dcfce7;
color: #166534;
}
.disconnected {
background: #fee2e2;
color: #991b1b;
}
.help-text {
font-size: 12px;
color: #64748b;
margin-top: 4px;
}
.warning-box {
background: #fef3c7;
border: 1px solid #f59e0b;
border-radius: 6px;
padding: 16px;
margin-bottom: 24px;
}
.warning-box h3 {
margin: 0 0 8px 0;
font-size: 14px;
font-weight: 600;
color: #92400e;
}
.warning-box p {
margin: 0 0 8px 0;
font-size: 13px;
color: #78350f;
line-height: 1.5;
}
.warning-box code {
background: rgba(0,0,0,0.1);
padding: 2px 6px;
border-radius: 3px;
font-family: monospace;
font-size: 12px;
}
.warning-box ul {
margin: 8px 0;
padding-left: 20px;
}
.warning-box li {
margin: 4px 0;
font-size: 13px;
color: #78350f;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Live Chat Configuration</h1>
</header>
<div class="content">
<!-- Twitch Section -->
<div class="section">
<h2>
Twitch
<span id="twitch-status" class="platform-status disconnected">Not Connected</span>
</h2>
<div class="form-group">
<label for="twitch-channel">Channel Name</label>
<input type="text" id="twitch-channel" placeholder="your_channel_name">
<div class="help-text">Enter the Twitch channel you want to monitor. Chat works immediately - no login required!</div>
</div>
<button id="twitch-login-btn" onclick="loginTwitch()">Login with Twitch</button>
<span id="twitch-login-note" class="help-text" style="display: inline; margin-left: 8px;">(Optional - for extra features)</span>
</div>
<!-- YouTube Section -->
<div class="section">
<h2>
YouTube
<span id="youtube-status" class="platform-status disconnected">Not Logged In</span>
</h2>
<div id="youtube-not-configured" class="warning-box" style="display: none; margin-bottom: 16px;">
<h3>⚠️ YouTube Not Available</h3>
<p>YouTube requires OAuth credentials to be configured. See the Advanced Settings section below for setup instructions.</p>
</div>
<div class="form-group">
<label for="youtube-video-id">Video/Stream ID <span style="color: #64748b; font-weight: normal;">(Optional)</span></label>
<input type="text" id="youtube-video-id" placeholder="Leave blank to auto-detect your stream">
<div class="help-text">
<strong>Auto-detect:</strong> Leave blank to automatically find your active live stream<br>
<strong>Manual:</strong> Enter a video ID from the URL (e.g., youtube.com/watch?v=<strong>dQw4w9WgXcQ</strong>)
</div>
</div>
<button id="youtube-login-btn" onclick="loginYouTube()">Login with YouTube</button>
</div>
<!-- Emote Providers -->
<div class="section">
<h2>Emote Providers</h2>
<label class="checkbox-label">
<input type="checkbox" id="enable-ffz" checked>
Enable FrankerFaceZ emotes
</label>
<label class="checkbox-label">
<input type="checkbox" id="enable-bttv" checked>
Enable BetterTTV emotes
</label>
<label class="checkbox-label">
<input type="checkbox" id="enable-7tv" checked>
Enable 7TV emotes
</label>
</div>
<!-- Display Settings -->
<div class="section">
<h2>Display Settings</h2>
<div class="form-group">
<label for="max-messages">Maximum Messages</label>
<input type="number" id="max-messages" value="50" min="10" max="200">
<div class="help-text">Number of messages to keep in the widget</div>
</div>
<label class="checkbox-label">
<input type="checkbox" id="show-timestamps" checked>
Show timestamps
</label>
<label class="checkbox-label">
<input type="checkbox" id="show-badges" checked>
Show user badges
</label>
<label class="checkbox-label">
<input type="checkbox" id="unified-view" checked>
Unified view (mix both platforms)
</label>
</div>
<!-- Actions -->
<div class="section">
<button onclick="saveConfig()">Save Configuration</button>
<button class="secondary" onclick="window.location.href='/'">Back to Widgets</button>
<div id="status" class="status"></div>
</div>
<!-- Advanced Settings -->
<div class="section" style="background: #f1f5f9; margin: 0 -32px -32px; padding: 24px 32px; border-radius: 0 0 12px 12px;">
<details>
<summary style="cursor: pointer; font-size: 16px; font-weight: 600; color: #1e293b; margin-bottom: 12px;">
🔧 Advanced Settings
</summary>
<div style="margin-top: 16px;">
<p style="font-size: 14px; color: #64748b; margin: 0 0 12px;">
Configuration files are stored at:
</p>
<code id="config-path-display" style="display: block; background: #e2e8f0; padding: 10px 12px; border-radius: 6px; font-size: 13px; margin-bottom: 12px; word-break: break-all;"></code>
<button class="secondary" onclick="openConfigDirectory()">📁 Open Config Directory</button>
<div id="oauth-setup-instructions" style="margin-top: 20px; padding-top: 16px; border-top: 1px solid #cbd5e1; display: none;">
<h4 style="margin: 0 0 12px; font-size: 14px; color: #1e293b;">Setting Up OAuth Credentials</h4>
<p style="font-size: 13px; color: #64748b; line-height: 1.6;">
To enable login functionality, you need to create OAuth apps and add your credentials to <code>config.json</code>:
</p>
<ul style="font-size: 13px; color: #64748b; line-height: 1.8; padding-left: 20px;">
<li><strong>Twitch:</strong> Create an app at <a href="https://dev.twitch.tv/console/apps" target="_blank">dev.twitch.tv/console/apps</a></li>
<li><strong>YouTube:</strong> Create credentials in <a href="https://console.cloud.google.com/" target="_blank">Google Cloud Console</a> with YouTube Data API v3 enabled</li>
</ul>
<p style="font-size: 13px; color: #64748b;">
Set redirect URI to: <code>http://localhost:8765/auth/twitch/callback</code> (or youtube)
</p>
</div>
</div>
</details>
</div>
</div>
</div>
<script>
// Check OAuth configuration status
async function checkOAuthStatus() {
try {
const resp = await fetch('/api/oauth/status');
if (resp.ok) {
const data = await resp.json();
const configPathDisplay = document.getElementById('config-path-display');
const youtubeWarning = document.getElementById('youtube-not-configured');
const oauthSetupInstructions = document.getElementById('oauth-setup-instructions');
// Always show the config file path
if (configPathDisplay) {
configPathDisplay.textContent = data.config_file;
}
// Handle Twitch OAuth status
const twitchBtn = document.getElementById('twitch-login-btn');
const twitchNote = document.getElementById('twitch-login-note');
if (!data.twitch_configured) {
twitchBtn.disabled = true;
twitchBtn.title = 'OAuth not configured - chat still works anonymously!';
twitchBtn.textContent = 'Login Unavailable';
twitchNote.textContent = '(Chat works without login!)';
}
// Handle YouTube OAuth status
const youtubeBtn = document.getElementById('youtube-login-btn');
if (!data.youtube_configured) {
youtubeBtn.disabled = true;
youtubeBtn.title = 'OAuth credentials required for YouTube';
youtubeWarning.style.display = 'block';
}
// Show OAuth setup instructions if either platform is not configured
if (!data.twitch_configured || !data.youtube_configured) {
oauthSetupInstructions.style.display = 'block';
}
}
} catch (err) {
console.error('Failed to check OAuth status:', err);
}
}
// Load current configuration
async function loadConfig() {
try {
const resp = await fetch('/api/chat/config');
if (resp.ok) {
const config = await resp.json();
// Populate form
document.getElementById('twitch-channel').value = config.twitch_channel || '';
document.getElementById('youtube-video-id').value = config.youtube_video_id || '';
document.getElementById('enable-ffz').checked = config.enable_ffz !== false;
document.getElementById('enable-bttv').checked = config.enable_bttv !== false;
document.getElementById('enable-7tv').checked = config.enable_7tv !== false;
document.getElementById('max-messages').value = config.max_messages || 50;
document.getElementById('show-timestamps').checked = config.show_timestamps !== false;
document.getElementById('show-badges').checked = config.show_badges !== false;
document.getElementById('unified-view').checked = config.unified_view !== false;
}
} catch (err) {
console.error('Failed to load config:', err);
}
}
// Check authentication status (whether user has logged in)
async function checkAuthStatus() {
try {
const resp = await fetch('/api/auth/status');
if (resp.ok) {
const data = await resp.json();
// Update Twitch status
const twitchStatus = document.getElementById('twitch-status');
if (data.twitch_authenticated) {
twitchStatus.className = 'platform-status connected';
twitchStatus.textContent = 'Logged In';
} else {
twitchStatus.className = 'platform-status disconnected';
twitchStatus.textContent = 'Not Logged In';
}
// Update YouTube status
const youtubeStatus = document.getElementById('youtube-status');
if (data.youtube_authenticated) {
youtubeStatus.className = 'platform-status connected';
youtubeStatus.textContent = 'Logged In';
} else {
youtubeStatus.className = 'platform-status disconnected';
youtubeStatus.textContent = 'Not Logged In';
}
}
} catch (err) {
console.error('Failed to check auth status:', err);
}
}
async function saveConfig() {
const config = {
twitch_channel: document.getElementById('twitch-channel').value,
youtube_video_id: document.getElementById('youtube-video-id').value,
enable_ffz: document.getElementById('enable-ffz').checked,
enable_bttv: document.getElementById('enable-bttv').checked,
enable_7tv: document.getElementById('enable-7tv').checked,
max_messages: parseInt(document.getElementById('max-messages').value),
show_timestamps: document.getElementById('show-timestamps').checked,
show_badges: document.getElementById('show-badges').checked,
unified_view: document.getElementById('unified-view').checked,
};
try {
const resp = await fetch('/api/chat/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(config),
});
const status = document.getElementById('status');
if (resp.ok) {
status.className = 'status success';
status.textContent = 'Configuration saved successfully!';
} else {
status.className = 'status error';
status.textContent = 'Failed to save configuration';
}
} catch (err) {
const status = document.getElementById('status');
status.className = 'status error';
status.textContent = 'Error: ' + err.message;
}
}
function loginTwitch() {
window.open('/auth/twitch/login', 'TwitchAuth', 'width=600,height=700');
}
function loginYouTube() {
window.open('/auth/youtube/login', 'YouTubeAuth', 'width=600,height=700');
}
// Called by OAuth popup when authentication succeeds
window.onAuthComplete = function(platform) {
console.log(`${platform} authentication complete`);
checkAuthStatus();
};
async function openConfigDirectory() {
try {
const resp = await fetch('/api/config/open-directory', { method: 'POST' });
const data = await resp.json();
if (resp.ok) {
// Directory opened successfully
} else {
const path = document.getElementById('config-path-display').textContent;
alert('Failed to open directory. Path: ' + path);
}
} catch (err) {
alert('Error: ' + err.message);
}
}
// Load config and check status on page load
checkOAuthStatus();
loadConfig();
checkAuthStatus();
</script>
</body>
</html>

103
app/assets/web/index.html
View file

@ -80,6 +80,7 @@
.widget-url-row {
display: flex;
align-items: center;
gap: 8px;
background: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 6px;
@ -87,7 +88,56 @@
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: 13px;
color: #475569;
overflow-x: auto;
}
.widget-url-row input {
flex: 1;
border: none;
background: transparent;
font-family: inherit;
font-size: inherit;
color: inherit;
outline: none;
min-width: 0;
}
.copy-btn {
background: #0f172a;
color: white;
border: none;
padding: 4px 10px;
border-radius: 4px;
font-size: 12px;
cursor: pointer;
flex-shrink: 0;
}
.copy-btn:hover {
background: #1e293b;
}
.widget-options {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin-top: 8px;
padding-top: 12px;
border-top: 1px solid #e2e8f0;
}
.option-group {
display: flex;
flex-direction: column;
gap: 6px;
}
.option-group label {
font-size: 12px;
font-weight: 600;
color: #64748b;
text-transform: uppercase;
}
.option-group select {
padding: 6px 10px;
border: 1px solid #cbd5e1;
border-radius: 4px;
font-size: 13px;
background: white;
cursor: pointer;
}
.footer {
border-top: 1px solid #e2e8f0;
@ -97,6 +147,13 @@
color: #64748b;
text-align: center;
}
.footer a {
color: #0f172a;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
code {
font-family: inherit;
background: rgba(0,0,0,0.05);
@ -118,8 +175,50 @@
</ul>
</div>
<div class="footer">
Server running at <code>{{HOSTPORT}}</code>
Server running at <code>{{HOSTPORT}}</code> · <a href="/config">Configure Chat</a>
</div>
</div>
<script>
// Live Chat URL generator
function updateLiveChatUrl() {
const baseUrl = document.getElementById('livechat-base-url');
if (!baseUrl) return;
const theme = document.getElementById('livechat-theme').value;
const direction = document.getElementById('livechat-direction').value;
const urlInput = document.getElementById('livechat-url');
const openLink = document.getElementById('livechat-open');
let url = baseUrl.value;
const params = [];
if (theme !== 'dark') params.push(`theme=${theme}`);
if (direction !== 'down') params.push(`direction=${direction}`);
if (params.length > 0) {
url += '?' + params.join('&');
}
urlInput.value = url;
openLink.href = url;
}
function copyUrl(inputId) {
const input = document.getElementById(inputId);
input.select();
navigator.clipboard.writeText(input.value).then(() => {
const btn = input.parentElement.querySelector('.copy-btn');
const originalText = btn.textContent;
btn.textContent = 'Copied!';
setTimeout(() => btn.textContent = originalText, 1500);
});
}
// Initialize on page load
document.addEventListener('DOMContentLoaded', () => {
updateLiveChatUrl();
});
</script>
</body>
</html>

277
app/assets/web/widgets/livechat/app.js Normal file
View file

@ -0,0 +1,277 @@
class LiveChatWidget {
constructor() {
this.ws = null;
this.messagesContainer = document.getElementById('chat-messages');
this.maxMessages = 50;
this.autoScroll = true;
this.reconnectAttempts = 0;
this.maxReconnectAttempts = 10;
this.platformIcons = {
twitch: `<svg width="20" height="20" viewBox="0 0 24 24" fill="#9146FF"><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>`,
youtube: `<svg width="20" height="20" viewBox="0 0 24 24" fill="#FF0000"><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>`,
};
// Apply theme from URL query param
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme');
if (theme === 'light') {
document.body.classList.add('theme-light');
} else {
document.body.classList.add('theme-dark');
}
// Direction: 'down' = newest at bottom (default), 'up' = newest at top
this.direction = urlParams.get('direction') || 'down';
if (this.direction === 'up') {
document.body.classList.add('direction-up');
}
this.init();
}
init() {
this.showStatus('Connecting to chat...', 'connecting');
this.connect();
// Handle scroll to detect manual scrolling
this.messagesContainer.addEventListener('scroll', () => {
const container = this.messagesContainer;
const isAtBottom = container.scrollHeight - container.scrollTop <= container.clientHeight + 50;
this.autoScroll = isAtBottom;
});
}
connect() {
const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
const wsUrl = `${protocol}//${window.location.host}/ws`;
this.ws = new WebSocket(wsUrl);
this.ws.onopen = () => {
console.log('Chat WebSocket connected');
this.reconnectAttempts = 0;
this.clearStatus();
};
this.ws.onmessage = (event) => {
try {
const data = JSON.parse(event.data);
this.handleMessage(data);
} catch (err) {
console.error('Failed to parse message:', err);
}
};
this.ws.onerror = (error) => {
console.error('WebSocket error:', error);
};
this.ws.onclose = () => {
console.log('Chat WebSocket disconnected');
this.showStatus('Disconnected. Reconnecting...', 'error');
this.reconnect();
};
}
reconnect() {
if (this.reconnectAttempts >= this.maxReconnectAttempts) {
this.showStatus('Failed to connect. Please refresh.', 'error');
return;
}
this.reconnectAttempts++;
const delay = Math.min(1000 * Math.pow(2, this.reconnectAttempts), 30000);
setTimeout(() => {
console.log(`Reconnecting... (attempt ${this.reconnectAttempts})`);
this.connect();
}, delay);
}
handleMessage(data) {
switch (data.type) {
case 'chat_message':
this.addChatMessage(data.data);
break;
case 'chat_history':
// Initial history load (comes in oldest-to-newest order)
if (data.data && Array.isArray(data.data)) {
// For both directions, we add messages in order
// The addChatMessage handles placement based on direction
data.data.forEach(msg => this.addChatMessage(msg, false));
if (this.direction === 'down') {
this.scrollToBottom();
}
}
break;
default:
// Ignore other message types
break;
}
}
addChatMessage(messageData, shouldAnimate = true) {
const msgElement = this.createMessageElement(messageData);
if (!shouldAnimate) {
msgElement.style.animation = 'none';
}
if (this.direction === 'up') {
// Direction UP: newest at bottom (anchored), older messages bubble upward
// With flex-direction: column-reverse, prepending puts new message at visual bottom
this.messagesContainer.insertBefore(msgElement, this.messagesContainer.firstChild);
// Limit total messages (remove oldest = last child = visually at top)
while (this.messagesContainer.children.length > this.maxMessages) {
this.messagesContainer.removeChild(this.messagesContainer.lastChild);
}
} else {
// Direction DOWN (default): newest at bottom, scroll down
this.messagesContainer.appendChild(msgElement);
// Limit total messages (remove oldest = first child = visually at top)
while (this.messagesContainer.children.length > this.maxMessages) {
this.messagesContainer.removeChild(this.messagesContainer.firstChild);
}
if (this.autoScroll) {
this.scrollToBottom();
}
}
}
createMessageElement(data) {
const msg = document.createElement('div');
msg.className = `chat-message ${data.platform}`;
msg.dataset.messageId = data.id;
if (data.is_action) {
msg.classList.add('action');
}
// Platform icon (optional)
if (data.platform) {
const iconDiv = document.createElement('div');
iconDiv.className = 'platform-icon';
iconDiv.innerHTML = this.platformIcons[data.platform] || '';
msg.appendChild(iconDiv);
}
// Message content
const content = document.createElement('div');
content.className = 'message-content';
// User info line
const userInfo = document.createElement('div');
userInfo.className = 'user-info';
// Badges
if (data.user.badges && data.user.badges.length > 0) {
const badgesContainer = document.createElement('div');
badgesContainer.className = 'user-badges';
data.user.badges.forEach(badge => {
const badgeEl = document.createElement('span');
badgeEl.className = 'badge';
badgeEl.title = badge.name;
if (badge.icon_url) {
badgeEl.innerHTML = `<img src="${badge.icon_url}" alt="${badge.name}">`;
} else {
// Simple text badge fallback
badgeEl.textContent = badge.name.charAt(0).toUpperCase();
}
badgesContainer.appendChild(badgeEl);
});
userInfo.appendChild(badgesContainer);
}
// Username
const username = document.createElement('span');
username.className = 'username';
username.textContent = data.user.display_name;
if (data.user.color) {
username.style.color = data.user.color;
}
userInfo.appendChild(username);
// Timestamp (optional)
const timestamp = document.createElement('span');
timestamp.className = 'timestamp';
timestamp.textContent = this.formatTime(data.timestamp);
userInfo.appendChild(timestamp);
content.appendChild(userInfo);
// Message text with emotes
const messageText = document.createElement('div');
messageText.className = 'message-text';
messageText.innerHTML = this.parseMessageWithEmotes(data.message, data.emotes);
content.appendChild(messageText);
msg.appendChild(content);
return msg;
}
parseMessageWithEmotes(message, emotes) {
if (!emotes || emotes.length === 0) {
return this.escapeHtml(message);
}
// Build a map of emote codes to emote data
const emoteMap = {};
emotes.forEach(emote => {
emoteMap[emote.code] = emote;
});
// Split message into words and replace emotes
const words = message.split(' ');
const result = words.map(word => {
if (emoteMap[word]) {
const emote = emoteMap[word];
const animatedClass = emote.is_animated ? 'animated' : '';
return `<img class="emote ${animatedClass}" src="${emote.url}" alt="${emote.code}" title="${emote.code} (${emote.provider})">`;
}
return this.escapeHtml(word);
});
return result.join(' ');
}
escapeHtml(text) {
const div = document.createElement('div');
div.textContent = text;
return div.innerHTML;
}
formatTime(timestamp) {
const date = new Date(timestamp);
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
return `${hours}:${minutes}`;
}
scrollToBottom() {
this.messagesContainer.scrollTop = this.messagesContainer.scrollHeight;
}
showStatus(message, className = '') {
this.messagesContainer.innerHTML = `<div class="status-message ${className}">${message}</div>`;
}
clearStatus() {
const statusMsg = this.messagesContainer.querySelector('.status-message');
if (statusMsg) {
statusMsg.remove();
}
}
}
// Initialize when DOM is ready
document.addEventListener('DOMContentLoaded', () => {
new LiveChatWidget();
});

15
app/assets/web/widgets/livechat/index.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Chat</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chat-container">
<div id="chat-messages"></div>
</div>
<script src="app.js"></script>
</body>
</html>

266
app/assets/web/widgets/livechat/style.css Normal file
View file

@ -0,0 +1,266 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: transparent;
overflow: hidden;
color: #fff; /* Default dark mode text */
}
/* Light Theme overrides */
body.theme-light {
color: #1a1a1a;
}
body.theme-light .chat-message {
background: rgba(255, 255, 255, 0.85);
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
body.theme-light .username {
text-shadow: none;
}
body.theme-light .timestamp {
color: #666;
}
body.theme-light .badge {
background: rgba(0, 0, 0, 0.1);
color: #333;
}
body.theme-light #chat-messages::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
}
/* Dark Theme (Default) overrides for clarity */
body.theme-dark .chat-message {
background: rgba(0, 0, 0, 0.6);
}
#chat-container {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
padding: 10px;
}
#chat-messages {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
gap: 4px;
}
/* Hide scrollbar but keep functionality */
#chat-messages::-webkit-scrollbar {
width: 4px;
}
#chat-messages::-webkit-scrollbar-track {
background: transparent;
}
#chat-messages::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
}
/* Chat message */
.chat-message {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 10px;
background: rgba(0, 0, 0, 0.4);
border-radius: 4px;
animation: slideIn 0.2s ease-out;
word-wrap: break-word;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(-20px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Direction UP: Messages anchor to bottom, bubble upward */
body.direction-up #chat-messages {
flex-direction: column-reverse;
justify-content: flex-start;
}
body.direction-up .chat-message {
animation: slideUp 0.2s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.chat-message.twitch {
border-left: 3px solid #9146FF;
}
.chat-message.youtube {
border-left: 3px solid #FF0000;
}
.chat-message.action {
font-style: italic;
background: rgba(100, 100, 100, 0.3);
}
/* Platform icon */
.platform-icon {
flex-shrink: 0;
width: 20px;
height: 20px;
margin-top: 2px;
}
.platform-icon img {
width: 100%;
height: 100%;
}
/* Message content area */
.message-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
/* User info line */
.user-info {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.user-badges {
display: flex;
gap: 4px;
align-items: center;
}
.badge {
width: 18px;
height: 18px;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
font-size: 10px;
font-weight: bold;
background: rgba(255, 255, 255, 0.15);
border-radius: 3px;
color: #fff;
text-transform: uppercase;
}
.badge img {
width: 100%;
height: 100%;
border-radius: 3px;
}
.username {
font-weight: bold;
font-size: 14px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.timestamp {
font-size: 11px;
color: #aaa;
opacity: 0.8;
}
/* Message text */
.message-text {
font-size: 14px;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
}
/* Emotes */
.emote {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
max-height: 28px;
max-width: 28px;
image-rendering: pixelated;
}
.emote.animated {
image-rendering: auto;
}
/* Roles */
.role-badge {
display: inline-block;
padding: 2px 6px;
border-radius: 3px;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.1);
}
.role-badge.broadcaster {
background: #e91916;
}
.role-badge.moderator {
background: #00ad03;
}
.role-badge.vip {
background: #e005b9;
}
.role-badge.subscriber {
background: #6441a5;
}
/* Loading/Error states */
.status-message {
text-align: center;
padding: 20px;
color: #aaa;
font-size: 14px;
}
.error {
color: #ff6b6b;
}
.connecting {
color: #4ecdc4;
}