A stream.place client in a single index.html
shows chat replies now
+90
-3
+90
-3
index.html
+90
-3
index.html
···
384
384
flex-shrink: 0;
385
385
}
386
386
387
+
.chat-reply-preview {
388
+
display: flex;
389
+
align-items: baseline;
390
+
gap: 0.3rem;
391
+
font-size: 0.7rem;
392
+
color: var(--text-dim);
393
+
padding: 0.15rem 0 0.1rem 0.6rem;
394
+
border-left: 2px solid #ffffff18;
395
+
margin-bottom: 0.2rem;
396
+
overflow: hidden;
397
+
cursor: pointer;
398
+
}
399
+
400
+
.chat-reply-preview:hover {
401
+
border-left-color: #ffffff30;
402
+
}
403
+
404
+
.chat-reply-author {
405
+
font-weight: 600;
406
+
flex-shrink: 0;
407
+
}
408
+
409
+
.chat-reply-text {
410
+
white-space: nowrap;
411
+
overflow: hidden;
412
+
text-overflow: ellipsis;
413
+
opacity: 0.6;
414
+
}
415
+
387
416
.chat-empty {
388
417
flex: 1;
389
418
display: flex;
···
1561
1590
const msgEl = document.createElement("div");
1562
1591
msgEl.className = "chat-msg";
1563
1592
1593
+
if (data.uri) {
1594
+
msgEl.dataset.uri = data.uri;
1595
+
}
1596
+
if (data.record?.reply?.parent?.uri) {
1597
+
msgEl.dataset.parentUri = data.record.reply.parent.uri;
1598
+
}
1599
+
if (data.record?.reply?.root?.uri) {
1600
+
msgEl.dataset.rootUri = data.record.reply.root.uri;
1601
+
}
1602
+
1603
+
// Reply preview
1604
+
if (data.replyTo) {
1605
+
const replyPreview = document.createElement("div");
1606
+
replyPreview.className = "chat-reply-preview";
1607
+
1608
+
const replyAuthor = document.createElement("span");
1609
+
replyAuthor.className = "chat-reply-author";
1610
+
const replyHandle = data.replyTo.author?.handle || "unknown";
1611
+
const replyColor = data.replyTo.chatProfile?.color;
1612
+
let replyAuthorColor = "#4ade80";
1613
+
if (replyColor && replyColor.red !== undefined) {
1614
+
replyAuthorColor = `rgb(${replyColor.red}, ${replyColor.green}, ${replyColor.blue})`;
1615
+
}
1616
+
replyAuthor.style.color = replyAuthorColor;
1617
+
replyAuthor.textContent = replyHandle;
1618
+
1619
+
const replyText = document.createElement("span");
1620
+
replyText.className = "chat-reply-text";
1621
+
const parentText = data.replyTo.record?.text || "";
1622
+
replyText.textContent = parentText.length > 80
1623
+
? parentText.slice(0, 80) + "…"
1624
+
: parentText;
1625
+
1626
+
replyPreview.appendChild(replyAuthor);
1627
+
replyPreview.appendChild(replyText);
1628
+
1629
+
// Click to scroll to parent message
1630
+
if (data.replyTo.uri) {
1631
+
replyPreview.dataset.uri = data.replyTo.uri;
1632
+
replyPreview.addEventListener("click", () => {
1633
+
const parent = chatMessages.querySelector(
1634
+
`[data-uri="${CSS.escape(data.replyTo.uri)}"]`
1635
+
);
1636
+
if (parent) {
1637
+
parent.scrollIntoView({ behavior: "smooth", block: "center" });
1638
+
parent.style.background = "#ffffff12";
1639
+
setTimeout(() => { parent.style.background = ""; }, 1500);
1640
+
}
1641
+
});
1642
+
}
1643
+
1644
+
msgEl.appendChild(replyPreview);
1645
+
}
1646
+
1647
+
const msgContent = document.createElement("div");
1648
+
1564
1649
const authorSpan = document.createElement("span");
1565
1650
authorSpan.className = "chat-msg-author";
1566
1651
authorSpan.style.color = authorColor;
···
1574
1659
timeSpan.className = "chat-msg-time";
1575
1660
timeSpan.textContent = timeStr;
1576
1661
1577
-
msgEl.appendChild(timeSpan);
1578
-
msgEl.appendChild(authorSpan);
1579
-
msgEl.appendChild(textSpan);
1662
+
msgContent.appendChild(timeSpan);
1663
+
msgContent.appendChild(authorSpan);
1664
+
msgContent.appendChild(textSpan);
1665
+
1666
+
msgEl.appendChild(msgContent);
1580
1667
1581
1668
if (indexedAtDate < videoLoadedAt) {
1582
1669
chatMessages.appendChild(msgEl);