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

Make the twitch chat widget more configurable

Browse source
This commit is contained in:
Joey Yakimowich-Payne 2026-01-07 13:44:25 -07:00
commit 1218e601ae
5 changed files with 509 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -187,6 +187,8 @@
const theme = document.getElementById('livechat-theme').value;
const direction = document.getElementById('livechat-direction').value;
const fontsize = document.getElementById('livechat-fontsize').value;
const hidetime = document.getElementById('livechat-hidetime').value;
const urlInput = document.getElementById('livechat-url');
const openLink = document.getElementById('livechat-open');
@ -195,6 +197,8 @@
if (theme !== 'dark') params.push(`theme=${theme}`);
if (direction !== 'down') params.push(`direction=${direction}`);
if (fontsize !== 'medium') params.push(`fontsize=${fontsize}`);
if (hidetime === 'true') params.push(`hidetime=true`);
if (params.length > 0) {
url += '?' + params.join('&');

10
app/assets/web/widgets/livechat/app.js
View file

@ -27,6 +27,16 @@ class LiveChatWidget {
document.body.classList.add('direction-up');
}
// Font size: small, medium (default), large, xlarge
const fontSize = urlParams.get('fontsize') || 'medium';
document.body.classList.add(`font-${fontSize}`);
// Hide timestamp option
const hideTime = urlParams.get('hidetime');
if (hideTime === 'true' || hideTime === '1') {
document.body.classList.add('hide-time');
}
this.init();
}

52
app/assets/web/widgets/livechat/style.css
View file

@ -43,6 +43,40 @@ body.theme-dark .chat-message {
background: rgba(0, 0, 0, 0.6);
}
/* Font size options */
body.font-small {
--chat-font-size: 12px;
--chat-username-size: 12px;
--chat-badge-size: 14px;
--chat-emote-size: 20px;
}
body.font-medium {
--chat-font-size: 14px;
--chat-username-size: 14px;
--chat-badge-size: 16px;
--chat-emote-size: 24px;
}
body.font-large {
--chat-font-size: 18px;
--chat-username-size: 18px;
--chat-badge-size: 20px;
--chat-emote-size: 32px;
}
body.font-xlarge {
--chat-font-size: 24px;
--chat-username-size: 24px;
--chat-badge-size: 26px;
--chat-emote-size: 40px;
}
/* Hide timestamp option */
body.hide-time .timestamp {
display: none;
}
#chat-container {
width: 100vw;
height: 100vh;
@ -53,7 +87,7 @@ body.theme-dark .chat-message {
#chat-messages {
flex: 1;
overflow-y: auto;
overflow-y: hidden;
overflow-x: hidden;
display: flex;
flex-direction: column;
@ -168,8 +202,8 @@ body.direction-up .chat-message {
}
.badge {
width: 18px;
height: 18px;
width: var(--chat-badge-size, 18px);
height: var(--chat-badge-size, 18px);
display: inline-flex;
align-items: center;
justify-content: center;
@ -190,19 +224,19 @@ body.direction-up .chat-message {
.username {
font-weight: bold;
font-size: 14px;
font-size: var(--chat-username-size, 14px);
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}
.timestamp {
font-size: 11px;
font-size: calc(var(--chat-font-size, 14px) * 0.8);
color: #aaa;
opacity: 0.8;
}
/* Message text */
.message-text {
font-size: 14px;
font-size: var(--chat-font-size, 14px);
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
@ -213,8 +247,10 @@ body.direction-up .chat-message {
display: inline-block;
vertical-align: middle;
margin: 0 2px;
max-height: 28px;
max-width: 28px;
height: var(--chat-emote-size, 28px);
width: auto;
max-width: calc(var(--chat-emote-size, 28px) * 3);
object-fit: contain;
image-rendering: pixelated;
}