truncate long reply context if wrapped, small fixes, meta tags

crazysmc · crazysmc · commit 7675c8fed604 · 2025-07-06T15:41:03.000+02:00
diff --git a/tchat.html b/tchat.html
@@ -1,7 +1,15 @@
 <!doctype html>
 <html lang=en>
 <meta charset=utf-8>
+<meta name=application-name content="tChat – Chat overlay for Twitch">
+<meta name=author content=crazysmc>
+<meta name=description
+      content="Twitch chat overlay with all emotes and pronouns support">
+<meta name=keywords
+      content=twitch,shared,chat,stream,overlay,7tv,bttv,ffz,betterttv,frankerfacez,pronouns,alejo,emotes,effects,badges,paints
+      >
 <meta name=viewport content="width=device-width">
+<meta name=robots content=index>
 <title>crazysmc – tChat – Chat overlay for Twitch</title>
 <base target=_blank>
 <link rel=stylesheet href=tchat/style.css>
@@ -172,8 +180,9 @@ <h1>tChat – Twitch chat overlay for OBS or browser</h1>
 animated ones if enabled in 7TV.
 You can also join several channels simultaneously and get a combined view.
 
-<p><a href=https://github.com/crazysmc/crazysmc.github.io/tree/master/tchat
-      >Open source</a>
+<p>Runs without a backend, fully in Javascript.
+<a href=https://github.com/crazysmc/crazysmc.github.io/tree/master/tchat
+   >Open source</a>
 
 <hr>
 
@@ -378,8 +387,8 @@ <h2>Custom Styles</h2>
 <p>The structure of the document generated by the chat overlay should allow
 for great customisability using added CSS snippets.
 
-<p>Adding a new browser source in OBS will give you a default CSS that looks
-like this:
+<p>Adding a new browser source in OBS will give you a <strong>default</strong>
+CSS that looks like this:
 
 <blockquote><code>
   body {
@@ -390,7 +399,8 @@ <h2>Custom Styles</h2>
 
 <p>This will make the overlay transparent and make sure it has no scrollbars.
 
-<p>You can add more CSS rules to this; here are some examples.
+<p>You can <strong>add</strong> more CSS rules to this; here are some
+examples.
 Just pick the one you want and append them in the Custom CSS option.
 (To make the textbox bigger, you can drag the divider below the preview at the
 top upwards.)
diff --git a/tchat/style.css b/tchat/style.css
@@ -154,8 +154,10 @@ img {
 }
 
 .reply i {
-  font-size: 0.8em;
   float: left;
+  font-size: 0.8em;
+  line-height: initial;
+  margin-top: 0.777778em;
   width: 100%;
 }
 
@@ -174,6 +176,10 @@ img {
   grid-row-start: 1;
 }
 
+.delete {
+  text-decoration: line-through 0.24em #ff00007f;
+}
+
 @media (max-width: 40rem) {
   .chat-line { display: block; }
   .reply i   { float: none; }
diff --git a/tchat/twitch.js b/tchat/twitch.js
@@ -7,6 +7,7 @@ const conf = {
   nick: 'justinfan64537', // same as anonymous chatterino
   joins: opt.getAll ('join'),
   timeout: parseInt (opt.get ('time'), 10) * 1000,
+  maxReplyLen: 100,
   emoteStyle: opt.has ('static') ? 'static' : 'default',
   emoteScale: ({ 2: '2', 3: '3' })[opt.get ('scale')] ?? '1',
   avatarSize: ({ 2: '50x50', 3: '70x70' })[opt.get ('scale')] ?? '28x28',
@@ -99,7 +100,7 @@ function receive (event)
         {
           for (const del of conf.chat.querySelectorAll
                (`.chat-line[data-room-id="${rid}"][data-user-id="${uid}"]`))
-            del.remove ();
+            deleteMessage (del);
           const seconds = msg.tags['ban-duration'];
           const action = seconds
             ? 'timed out for ' + conf.duration.format ({ seconds })
@@ -111,7 +112,7 @@ function receive (event)
         {
           for (const del of conf.chat.querySelectorAll
                (`.chat-line[data-room-id="${rid}"]`))
-            del.remove ();
+            deleteMessage (del);
           msg.source = '';
           msg.params[1] = 'The chat has been cleared.';
         }
@@ -120,8 +121,7 @@ function receive (event)
         break;
 
       case 'CLEARMSG':
-        document.getElementById (msg.tags['target-msg-id'])
-          ?.remove ();
+        deleteMessage (document.getElementById (msg.tags['target-msg-id']));
         break;
 
       case 'JOIN':
@@ -173,6 +173,16 @@ function reduceColors ()
       delete conf.colors[uid];
 }
 
+function deleteMessage (msg)
+{
+  if (!msg)
+    return;
+  if (opt.has ('rm'))
+    msg.classList.add ('delete');
+  else
+    msg.remove ();
+}
+
 async function joinedRoom (rid)
 {
   if (conf.joinedRooms.includes (rid))
@@ -407,10 +417,12 @@ function formatChat (msg, p)
   if (msg.tags['msg-param-color'] == 'PRIMARY')
     p.style.borderRightColor = conf.badges.room[rid]?.primary ?? '';
 
-  const replyTo = msg.tags['reply-parent-msg-body'];
+  let replyTo = msg.tags['reply-parent-msg-body'];
   if (replyTo)
   {
     const reply = conf.template.reply.cloneNode (true);
+    if (opt.has ('style', 'wrap') && replyTo.length > conf.maxReplyLen)
+      replyTo = replyTo.slice (0, conf.maxReplyLen) + '…';
     reply.firstElementChild.textContent = replyTo;
     const replyMsg = reply.querySelector ('.message');
     replyMsg.replaceChildren (...message.childNodes);
@@ -556,6 +568,7 @@ function extEmotes (msg, rid, uid, message)
         prefix.previousSibling.remove ();
       prefix.classList.remove ('prefix');
       prefix.nextSibling.classList.add (...prefix.classList);
+      prefix.nextSibling.title = prefix.alt + ' ' + prefix.nextSibling.title;
       prefix.remove ();
     }
   }
@@ -569,6 +582,7 @@ function extEmotes (msg, rid, uid, message)
     {
       suffix.classList.remove ('suffix');
       suffix.previousSibling.classList.add (...suffix.classList);
+      suffix.previousSibling.title += ' ' + suffix.alt;
       suffix.remove ();
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -154,8 +154,10 @@ img {`
`154`	`154`	`}`
`155`	`155`
`156`	`156`	`.reply i {`
`157`		`- font-size: 0.8em;`
`158`	`157`	`float: left;`
	`158`	`+ font-size: 0.8em;`
	`159`	`+ line-height: initial;`
	`160`	`+ margin-top: 0.777778em;`
`159`	`161`	`width: 100%;`
`160`	`162`	`}`
`161`	`163`
`@@ -174,6 +176,10 @@ img {`
`174`	`176`	`grid-row-start: 1;`
`175`	`177`	`}`
`176`	`178`
	`179`	`+.delete {`
	`180`	`+ text-decoration: line-through 0.24em #ff00007f;`
	`181`	`+}`
	`182`	`+`
`177`	`183`	`@media (max-width: 40rem) {`
`178`	`184`	`.chat-line { display: block; }`
`179`	`185`	`.reply i { float: none; }`