Skip to content

Commit 0ab9412

Browse files
steveseguinactions-user
steveseguin
authored and
actions-user
committed
feat: Enhance Hype Display and add host mention highlighting
- **Hype Display (`hype.html`):** - Introduce `align` URL parameter to set horizontal alignment (left, center, right) for the display. - Add `style` URL parameter with predefined layout presets: `compact`, `modern`, `minimal`, and `topbar`. These presets adjust scaling, padding, width, and title visibility. - Refactor existing `alignright` and `hidetitle` URL parameter handling for better integration with new alignment and style options. - Implement new CSS classes for styling different alignments. - **Host Mention Highlighting (`background.js`, `popup.html`):** - Add a new `highlightHostMentions` setting, configurable via `popup.html`, to mark messages that mention a host. - Implement `background.js` logic to detect host name mentions (using `settings.hostnamesext`) within chat messages, highlighting them if found. - Include necessary translation updates for the new setting. [auto-enhanced]
1 parent 1bb635d commit 0ab9412

6 files changed

Lines changed: 208 additions & 76 deletions

File tree

‎background.js‎

Lines changed: 33 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9528,15 +9528,39 @@ async function applyBotActions(data, tab = false) {
95289528
}
95299529
}
95309530

9531-
if (settings.highlightword && settings.highlightword.textsetting.trim() && data.chatmessage) {
9532-
const wordTexts = settings.highlightword.textsetting.split(',').map(text => text.trim());
9533-
const messageText = data.textContent || data.chatmessage;
9534-
if (wordTexts.some(text => messageText.includes(text))) {
9535-
data.highlightColor = "#fff387";
9536-
}
9537-
}
9538-
9539-
if (settings.relaydonos && data.hasDonation && data.chatname && data.type) {
9531+
if (settings.highlightword && settings.highlightword.textsetting.trim() && data.chatmessage) {
9532+
const wordTexts = settings.highlightword.textsetting.split(',').map(text => text.trim());
9533+
const messageText = data.textContent || data.chatmessage;
9534+
if (wordTexts.some(text => messageText.includes(text))) {
9535+
data.highlightColor = "#fff387";
9536+
}
9537+
}
9538+
9539+
if (settings.highlightHostMentions && settings.hostnamesext?.textsetting && data.chatmessage) {
9540+
const rawHosts = settings.hostnamesext.textsetting.split(',');
9541+
const messageText = (data.textContent || data.chatmessage || '').toLowerCase();
9542+
9543+
const hasMention = rawHosts.some(entry => {
9544+
const trimmed = entry.trim();
9545+
if (!trimmed) {
9546+
return false;
9547+
}
9548+
9549+
const [name] = trimmed.toLowerCase().split(':');
9550+
if (!name) {
9551+
return false;
9552+
}
9553+
9554+
const handle = name.startsWith('@') ? name : `@${name}`;
9555+
return messageText.includes(handle);
9556+
});
9557+
9558+
if (hasMention) {
9559+
data.highlightColor = data.highlightColor || "#fff387";
9560+
}
9561+
}
9562+
9563+
if (settings.relaydonos && data.hasDonation && data.chatname && data.type) {
95409564
//if (Date.now() - messageTimeout > 100) {
95419565
// respond to "1" with a "1" automatically; at most 1 time per 100ms.
95429566

‎hype.html‎

Lines changed: 151 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -245,9 +245,35 @@
245245
min-width: 100px;
246246
gap:2px;
247247
}
248-
.short .sourceStatHolder {
249-
height: 74px;
250-
}
248+
.short .sourceStatHolder {
249+
height: 74px;
250+
}
251+
.align-left {
252+
display: block;
253+
margin-left: 0;
254+
margin-right: auto;
255+
text-align: left;
256+
}
257+
.align-right {
258+
display: block;
259+
margin-left: auto;
260+
margin-right: 0;
261+
text-align: right;
262+
}
263+
.align-center {
264+
display: block;
265+
margin-left: auto;
266+
margin-right: auto;
267+
text-align: center;
268+
}
269+
.align-center .sourceStatHolder {
270+
justify-content: center;
271+
}
272+
.align-center [data-viewers],
273+
.align-center [data-chatters] {
274+
text-align: center !important;
275+
justify-content: center;
276+
}
251277
.sourceStatHolder img {
252278
width: calc(var(--width) );
253279
height: calc(var(--width) );
@@ -517,7 +543,10 @@
517543
var customNodeLimit = false;
518544
var body = document.body;
519545
var html = document.documentElement;
520-
var mainOutputWindow = document.getElementById("output");
546+
var mainOutputWindow = document.getElementById("output");
547+
var parentHolder = document.getElementById("parentHolder");
548+
var hypeContainer = document.getElementById("hype");
549+
var hypeTitle = document.getElementById("hypetitle");
521550
var showdupes = true;
522551
var hidereplies = false;
523552
var uniqueId = "";
@@ -616,17 +645,26 @@
616645
console.error(e);
617646
}
618647
}
619-
if (urlParams.has("fontsize")) {
620-
const scaleValue = parseFloat(urlParams.get("fontsize")) || 1.0;
621-
document.documentElement.style.setProperty("--scale", scaleValue);
622-
}
623-
if (urlParams.has("alignright")) {
624-
document.getElementById("parentHolder").style.position = "absolute";
625-
document.getElementById("parentHolder").style.right = "0";
626-
}
627-
if (urlParams.has("hidetitle")) {
628-
document.getElementById("hypetitle").classList.add("hidden");
629-
}
648+
if (urlParams.has("fontsize")) {
649+
const scaleValue = parseFloat(urlParams.get("fontsize")) || 1.0;
650+
document.documentElement.style.setProperty("--scale", scaleValue);
651+
}
652+
var alignment = null;
653+
var alignRightLegacy = urlParams.has("alignright");
654+
if (urlParams.has("align")) {
655+
var requestedAlignment = (urlParams.get("align") || "").toLowerCase();
656+
if (requestedAlignment === "left" || requestedAlignment === "center" || requestedAlignment === "right") {
657+
alignment = requestedAlignment;
658+
}
659+
}
660+
if (alignment === null && alignRightLegacy) {
661+
alignment = "right";
662+
}
663+
if (urlParams.has("hidetitle")) {
664+
if (hypeTitle) {
665+
hypeTitle.classList.add("hidden");
666+
}
667+
}
630668
if (urlParams.has("opacity")) {
631669
getById("output").style.opacity = urlParams.get("opacity") || 0.3
632670
}
@@ -728,16 +766,20 @@
728766
}
729767
var showViewers = true;
730768
var showChatters = true;
731-
if (urlParams.has("viewersonly")) {
732-
showViewers = true;
733-
showChatters = false;
734-
document.getElementById("hype").classList.add("short");
735-
}
736-
if (urlParams.has("chattersonly")) {
737-
showViewers = false;
738-
showChatters = true;
739-
document.getElementById("hype").classList.add("short");
740-
}
769+
if (urlParams.has("viewersonly")) {
770+
showViewers = true;
771+
showChatters = false;
772+
if (hypeContainer) {
773+
hypeContainer.classList.add("short");
774+
}
775+
}
776+
if (urlParams.has("chattersonly")) {
777+
showViewers = false;
778+
showChatters = true;
779+
if (hypeContainer) {
780+
hypeContainer.classList.add("short");
781+
}
782+
}
741783
var titleText = "";
742784
if (showViewers && showChatters) {
743785
titleText = "Active chatters and viewers in the last 5-minutes";
@@ -746,7 +788,9 @@
746788
} else {
747789
titleText = "Active chatters in the last 5-minutes";
748790
}
749-
document.getElementById("hypetitle").textContent = titleText;
791+
if (hypeTitle) {
792+
hypeTitle.textContent = titleText;
793+
}
750794
let style = "default";
751795
if (urlParams.has("style")) {
752796
style = urlParams.get("style");
@@ -764,38 +808,89 @@
764808
combineAll = true;
765809
}
766810

767-
// Apply the style to the parent holder
768-
document.getElementById("parentHolder").classList.add("style-" + style);
811+
// Apply the style to the parent holder
812+
if (parentHolder) {
813+
parentHolder.classList.add("style-" + style);
814+
}
769815

770816
let scale = 1;
771817
if (urlParams.has("scale")) {
772818
scale = parseFloat(urlParams.get("scale")) || 3.0;
773819
}
774-
if (urlParams.has("style")) {
775-
switch (urlParams.get("style")) {
776-
case "compact":
777-
document.documentElement.style.setProperty("--padding", "8px");
778-
document.documentElement.style.setProperty("--width", "24px");
779-
scale = scale * 2;
780-
break;
781-
case "modern":
782-
document.documentElement.style.setProperty("--padding", "10px");
783-
document.documentElement.style.setProperty("--width", "32px");
784-
break;
785-
case "minimal":
786-
document.documentElement.style.setProperty("--padding", "6px");
787-
document.documentElement.style.setProperty("--width", "20px");
788-
document.getElementById("hypetitle").classList.add("hidden");
789-
scale = scale * 3;
790-
break;
791-
case "topbar":
792-
document.getElementById("parentHolder").style.position = "fixed";
793-
document.getElementById("parentHolder").style.right = "0";
794-
document.getElementById("parentHolder").style.top = "0";
795-
document.getElementById("hypetitle").classList.add("hidden");
796-
break;
797-
}
798-
}
820+
if (urlParams.has("style")) {
821+
switch (urlParams.get("style")) {
822+
case "compact":
823+
document.documentElement.style.setProperty("--padding", "8px");
824+
document.documentElement.style.setProperty("--width", "24px");
825+
scale = scale * 2;
826+
break;
827+
case "modern":
828+
document.documentElement.style.setProperty("--padding", "10px");
829+
document.documentElement.style.setProperty("--width", "32px");
830+
break;
831+
case "minimal":
832+
document.documentElement.style.setProperty("--padding", "6px");
833+
document.documentElement.style.setProperty("--width", "20px");
834+
if (hypeTitle) {
835+
hypeTitle.classList.add("hidden");
836+
}
837+
scale = scale * 3;
838+
break;
839+
case "topbar":
840+
if (parentHolder) {
841+
parentHolder.style.position = "fixed";
842+
parentHolder.style.top = "0";
843+
parentHolder.style.left = "";
844+
parentHolder.style.right = "";
845+
parentHolder.style.transform = "";
846+
var topbarAlignment = alignment || "right";
847+
if (topbarAlignment === "center") {
848+
parentHolder.style.left = "50%";
849+
parentHolder.style.transform = "translateX(-50%)";
850+
if (hypeContainer) {
851+
hypeContainer.style.justifyContent = "center";
852+
}
853+
} else if (topbarAlignment === "left") {
854+
parentHolder.style.left = "0";
855+
} else {
856+
parentHolder.style.right = "0";
857+
}
858+
}
859+
if (hypeTitle) {
860+
hypeTitle.classList.add("hidden");
861+
}
862+
break;
863+
}
864+
}
865+
866+
if (alignment && parentHolder) {
867+
if (style !== "topbar") {
868+
parentHolder.classList.add("align-" + alignment);
869+
if (alignment === "left") {
870+
parentHolder.style.marginLeft = "0";
871+
parentHolder.style.marginRight = "auto";
872+
parentHolder.style.textAlign = "left";
873+
} else if (alignment === "right") {
874+
parentHolder.style.marginLeft = "auto";
875+
parentHolder.style.marginRight = "0";
876+
parentHolder.style.textAlign = "right";
877+
} else {
878+
parentHolder.style.marginLeft = "auto";
879+
parentHolder.style.marginRight = "auto";
880+
parentHolder.style.textAlign = "center";
881+
}
882+
if (alignRightLegacy) {
883+
parentHolder.style.position = "absolute";
884+
parentHolder.style.right = "0";
885+
parentHolder.style.left = "";
886+
}
887+
if (alignment === "center" && hypeContainer) {
888+
hypeContainer.style.justifyContent = "center";
889+
}
890+
} else if (alignment === "left" || alignment === "right") {
891+
parentHolder.classList.add("align-" + alignment);
892+
}
893+
}
799894
document.body.style.transform = `scale(${scale})`;
800895
document.body.style.transformOrigin = '0 0';
801896
document.body.style.width = `${100/scale}%`;
@@ -821,7 +916,9 @@
821916
lastUpdated = {};
822917
const hypeEl = document.getElementById("hype");
823918
if (hypeEl) hypeEl.innerHTML = "";
824-
document.getElementById("parentHolder").classList.add("hidden");
919+
if (parentHolder) {
920+
parentHolder.classList.add("hidden");
921+
}
825922
console.log("Hype.html: Cleared local state due to refreshSources action.");
826923
}
827924
}

‎popup.html‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8354,19 +8354,27 @@ <h4 style="margin-top: 15px;">Management</h4>
83548354
<span data-translate="enable-dice-rolls">🎲 Respond with a random dice roll on !dice</span>
83558355
</div>
83568356

8357-
<div style="display: inline-block;" title="Automatically identifies questions in chat messages based on keywords like ?, how, what, etc." data-keywords="Q&A QA Q and A ask query queries FAQ help support">
8358-
<label class="switch">
8359-
<input type="checkbox" id="identifyQuestions" data-setting="identifyQuestions" />
8360-
<span class="slider round"></span>
8361-
</label>
8362-
<span data-translate="identify-questions">❓ Identify questions in chat messages</span>
8363-
</div>
8364-
8365-
<div style="display: inline-block; margin-left: 30px;" title="Comma-separated keywords to identify questions (default: ?,Q:,question:,how,what,when,where,why,who,which,could,would,should,can,will)">
8366-
<label class="switch">
8367-
<input type="checkbox" data-setting="questionKeywords" />
8368-
<span class="slider round"></span>
8369-
</label>
8357+
<div style="display: inline-block;" title="Automatically identifies questions in chat messages based on keywords like ?, how, what, etc." data-keywords="Q&A QA Q and A ask query queries FAQ help support">
8358+
<label class="switch">
8359+
<input type="checkbox" id="identifyQuestions" data-setting="identifyQuestions" />
8360+
<span class="slider round"></span>
8361+
</label>
8362+
<span data-translate="identify-questions">❓ Identify questions in chat messages</span>
8363+
</div>
8364+
8365+
<div style="display: inline-block;" title="Highlight messages that mention a host name" data-keywords="host mention highlight trivial">
8366+
<label class="switch">
8367+
<input type="checkbox" id="highlightHostMentions" data-setting="highlightHostMentions" />
8368+
<span class="slider round"></span>
8369+
</label>
8370+
<span data-translate="mark-host-mentions-trivial">🔦 Mark @host messages as trivial events</span>
8371+
</div>
8372+
8373+
<div style="display: inline-block; margin-left: 30px;" title="Comma-separated keywords to identify questions (default: ?,Q:,question:,how,what,when,where,why,who,which,could,would,should,can,will)">
8374+
<label class="switch">
8375+
<input type="checkbox" data-setting="questionKeywords" />
8376+
<span class="slider round"></span>
8377+
</label>
83708378
<div class="textInputContainer" style="display: inline-block; width: 200px;">
83718379
<input type="text" id="questionKeywords" class="textInput" autocomplete="off" placeholder="?,how,what,when,why" data-textsetting="questionKeywords" />
83728380
<label for="questionKeywords"><span data-translate="question-keywords">&gt; Custom question keywords</span></label>

‎translations/blank.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -492,6 +492,7 @@
492492
"trim-mesages-to-200": "Trim messages to 200 characters... ",
493493
"trim-names-to-8": "Trim names longer than",
494494
"trivial-shading-events": "🤏🕶️ Allow background shading for trivial events ",
495+
"mark-host-mentions-trivial": "🔦 Mark @host messages as trivial events ",
495496
"trovo": "&gt; Trovo",
496497
"ttscommand": "🗣️ Any message containing <input type=\"text\" id=\"ttscommandcustom\" class=\"textInput instant\" autocomplete=\"off\" placeholder=\"!say\" data-textparam1=\"ttscommand\" value=\"!say\" title=\"You need to include the ! if you want it\" style=\"width:36px\"> will be read out ",
497498
"turn-message-portion-into-a-rounded-bubble": "💭 Turn message portion into a rounded bubble ",

‎translations/en-uk.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -364,6 +364,7 @@
364364
"highlight-new-entries": "✨ Highlight new entries",
365365
"highlightwaitlist": "🔦 Highlight top entry",
366366
"highlightword": "🔦 Highlight word",
367+
"mark-host-mentions-trivial": "🔦 Mark @host messages as trivial events",
367368
"hindi": "Hindi",
368369
"horizontal-scrolling-messages": " ↔️ Horizontal scrolling messages ",
369370
"hostFirstSimilarOnly": "🕺 Host first message only if similar",

‎translations/en-us.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -374,6 +374,7 @@
374374
"highlight-new-entries": "✨ Highlight new entries",
375375
"highlightwaitlist": "🔦 Highlight top entry",
376376
"highlightword": "🔦 Highlight word",
377+
"mark-host-mentions-trivial": "🔦 Mark @host messages as trivial events",
377378
"hindi": "Hindi",
378379
"horizontal-scrolling-messages": " ↔️ Horizontal scrolling messages ",
379380
"hostFirstSimilarOnly": "🕺 Host first message only if similar",

0 commit comments

Comments
 (0)