From fcb7e9746fe4e0b920aabd8c2f1bcb5b9576413e Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Wed, 14 Oct 2026 02:36:22 -0400 Subject: [PATCH 1/5] prevented another 'secdons' bump --- src/views/partial/panels/settings.ejs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/partial/panels/settings.ejs b/src/views/partial/panels/settings.ejs index b0c9e9b..790649f 100644 --- a/src/views/partial/panels/settings.ejs +++ b/src/views/partial/panels/settings.ejs @@ -16,7 +16,7 @@ along with this program. If not, see . %>

Client Settings

-

Playeback Settings

+

Playback Settings

Youtube Player Type:

+ +

Chat nameplate:

+ +

Aspect Ratio Lock Limiter:

diff --git a/www/css/channel.css b/www/css/channel.css index 728201b..216abad 100644 --- a/www/css/channel.css +++ b/www/css/channel.css @@ -171,6 +171,10 @@ p.panel-head-element{ font-size: 10pt; } +.chat-entry-nameplate{ + display: flex; +} + .chat-entry-username, .pm-panel-sesh-entry-username{ margin: auto 0.2em auto 0; text-wrap: nowrap; diff --git a/www/js/channel/chatPostprocessor.js b/www/js/channel/chatPostprocessor.js index 1ab660c..6717e83 100644 --- a/www/js/channel/chatPostprocessor.js +++ b/www/js/channel/chatPostprocessor.js @@ -108,11 +108,19 @@ class chatPostprocessor{ `${classSuffix}-${color}` ); + //Create Date object from message timestamp + let timestamp = new Date(this.rawData.timestamp); + + //Create nameplate span to hold username and high level + let nameplate = document.createElement('span'); + nameplate.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-nameplate`, ); + nameplate.title = timestamp.toLocaleString(); + //Create high-level label let highLevel = document.createElement('p'); highLevel.classList.add(`${classSuffixAlt}-buffer`,`${classSuffix}-entry-high-level`,"high-level"); highLevel.textContent = utils.unescapeEntities(`${this.rawData.highLevel}`); - this.chatEntry.appendChild(highLevel); + nameplate.appendChild(highLevel); //If we're not using classic flair if(this.rawData.flair != "classic"){ @@ -120,7 +128,7 @@ class chatPostprocessor{ flair = `flair-${this.rawData.flair}`; } - //Create username label + //Create username label to the nameplate let userLabel = document.createElement('p'); userLabel.classList.add(`${classSuffixAlt}-buffer`, `${classSuffix}-entry-username`, ); @@ -132,8 +140,11 @@ class chatPostprocessor{ //Inject flair span into user label before the colon userLabel.innerHTML = `${flairSpan.outerHTML}: `; - //Append user label - this.chatEntry.appendChild(userLabel); + //Append user label to the nameplate + nameplate.appendChild(userLabel); + + //Append nameplate to the chat entry + this.chatEntry.appendChild(nameplate); //Create chat body this.chatBody = document.createElement('p'); From 6346b8f14833710c30232b90187868c7a01767e2 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Wed, 14 Oct 2026 03:57:47 -0400 Subject: [PATCH 4/5] Fixed bug in chatMetadata.js --- src/app/chatMetadata.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/chatMetadata.js b/src/app/chatMetadata.js index c187057..c1a1d6a 100644 --- a/src/app/chatMetadata.js +++ b/src/app/chatMetadata.js @@ -28,7 +28,7 @@ class chatMetadata{ * @param {Array} links - Array of URLs/Links included in the message. * @param {Number} timestamp - UTC Epoch from when message was sent */ - constructor(user, flair, highLevel, msg, type, links, timestamp = new Date.now()){ + constructor(user, flair, highLevel, msg, type, links, timestamp = Date.now()){ /** * Name of user who sent the message */ From cd5f1682438030c4b1d5f2bdd66fe65546a48f63 Mon Sep 17 00:00:00 2001 From: rainbow napkin Date: Wed, 14 Oct 2026 04:34:30 -0400 Subject: [PATCH 5/5] Finished work on chat nameplate format settings. --- src/views/partial/panels/settings.ejs | 2 +- www/css/channel.css | 14 +++++++++++++- www/css/theme/movie-night.css | 4 ++++ www/css/theme/the-network-classic.css | 4 ++++ www/js/channel/channel.js | 21 +++++++++++++++++++++ www/js/channel/chat.js | 20 ++++++++++++++++++++ www/js/channel/chatPostprocessor.js | 18 +++++++++++++++--- www/js/channel/panels/settingsPanel.js | 16 ++++++++++++++++ 8 files changed, 94 insertions(+), 5 deletions(-) diff --git a/src/views/partial/panels/settings.ejs b/src/views/partial/panels/settings.ejs index 6882f4e..a467288 100644 --- a/src/views/partial/panels/settings.ejs +++ b/src/views/partial/panels/settings.ejs @@ -50,8 +50,8 @@ along with this program. If not, see . %>

Chat nameplate:

diff --git a/www/css/channel.css b/www/css/channel.css index 216abad..bd96277 100644 --- a/www/css/channel.css +++ b/www/css/channel.css @@ -13,6 +13,10 @@ GNU Affero General Public License for more details. You should have received a copy of the GNU Affero General Public License along with this program. If not, see .*/ +:root{ + --chat-entry-flex-direction: row; +} + body{ height: 100%; } @@ -169,15 +173,23 @@ p.panel-head-element{ display: flex; align-content: center; font-size: 10pt; + flex-direction: var(--chat-entry-flex-direction); } -.chat-entry-nameplate{ +.chat-entry-nameplate, .pm-panel-sesh-entry-nameplate{ display: flex; } .chat-entry-username, .pm-panel-sesh-entry-username{ margin: auto 0.2em auto 0; text-wrap: nowrap; + width: 100%; +} + +.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{ + /* Yeah, yeah, I know, it's gross to use float over flex XP*/ + float: right; + font-size: 8pt; } .chat-entry-body, .pm-panel-sesh-entry-body{ diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index 78c6cbb..5e4d372 100644 --- a/www/css/theme/movie-night.css +++ b/www/css/theme/movie-night.css @@ -542,6 +542,10 @@ select.panel-head-element{ text-decoration-color: var(--danger0-alt0); } +.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{ + color: var(--accent0-alt1); +} + /* popup */ .popup-backer{ diff --git a/www/css/theme/the-network-classic.css b/www/css/theme/the-network-classic.css index 6591897..5d231a9 100644 --- a/www/css/theme/the-network-classic.css +++ b/www/css/theme/the-network-classic.css @@ -452,6 +452,10 @@ p.channel-guide-entry-item{ background-color: var(--bg1-alt0); } +.chat-entry-timestamp, .pm-panel-sesh-entry-timestamp{ + color: var(--accent0-alt0); +} + .serverwhisper{ color: var(--accent0-alt1) } diff --git a/www/js/channel/channel.js b/www/js/channel/channel.js index 13d2bda..010c343 100644 --- a/www/js/channel/channel.js +++ b/www/js/channel/channel.js @@ -327,6 +327,26 @@ class channel{ //Set theme ThemeManager.setTheme(value); //We're fuckin' done here + return; + case 'nameplateFormat': + switch(value){ + //If we're throwin' the nameplate to the left + case 'left': + console.log("FUCK") + document.body.style.setProperty("--chat-entry-flex-direction", "row"); + break; + //If we're throwin' er' up top, or someones bein' some sorta smartass + default: + document.body.style.setProperty("--chat-entry-flex-direction", "column"); + break; + } + + //If the chatbox is loaded in + if(this.chatBox != null){ + //Re render any existing chats + this.chatBox.rerenderBuffer(); + } + return; case 'chatWidthMin': //If the chat isn't loaded @@ -391,6 +411,7 @@ class channel{ ["liveSyncTolerance", 10], ["syncDelta", 6], ["theme", "The Network (Classic)"], + ["nameplateFormat", "left"], ["chatWidthMin", 20], ["disablePortrait", false], ["disableSendButton", false], diff --git a/www/js/channel/chat.js b/www/js/channel/chat.js index b297963..88b271b 100644 --- a/www/js/channel/chat.js +++ b/www/js/channel/chat.js @@ -680,4 +680,24 @@ class chatBox{ this.chatBuffer.scrollTop = this.chatBuffer.scrollHeight - Math.round(this.chatBuffer.getBoundingClientRect().height); } } + + /** + * Re-render buffer from raw data (useful for settings changes) + */ + rerenderBuffer(){ + //Yank existing messages from buffer, converting nodelist to array to avoid annoying behavior in for loops + const buffer = Array.from(this.chatBuffer.children); + + //Iterate through all received messages + for(const message of buffer){ + //Pull raw message data from saved message + const rawData = JSON.parse(message.dataset.rawData); + + //Nuke the message + message.remove(); + + //Re-render chat out to the buffer + this.displayChat(rawData); + } + } } \ No newline at end of file diff --git a/www/js/channel/chatPostprocessor.js b/www/js/channel/chatPostprocessor.js index 6717e83..50c37eb 100644 --- a/www/js/channel/chatPostprocessor.js +++ b/www/js/channel/chatPostprocessor.js @@ -97,8 +97,9 @@ class chatPostprocessor{ const classSuffix = pm ? 'pm-panel-sesh' : 'chat'; const classSuffixAlt = pm ? classSuffix : 'chat-panel'; - //Create chat-entry span + //Create chat-entry span, and store raw message data this.chatEntry = document.createElement('span'); + this.chatEntry.dataset.rawData = JSON.stringify(this.rawData); //Add classes to classlist this.chatEntry.classList.add( @@ -137,8 +138,19 @@ class chatPostprocessor{ flairSpan.classList.add(`${classSuffix}-entry-flair-span`, flair); flairSpan.innerHTML = this.rawData.user; - //Inject flair span into user label before the colon - userLabel.innerHTML = `${flairSpan.outerHTML}: `; + let colonSpan = document.createElement('span'); + colonSpan.classList.add(`${classSuffix}-entry-colon-span`); + if(localStorage.getItem('nameplateFormat') == "left"){ + colonSpan.innerHTML = ': '; + }else if(localStorage.getItem('nameplateFormat') == "timestamp"){ + colonSpan.classList.add(`${classSuffix}-entry-timestamp`); + colonSpan.innerHTML = ` (${timestamp.toLocaleString()})`; + } + + + //Append flair and colon(or timestamp) spans to userLabel + userLabel.appendChild(flairSpan); + userLabel.appendChild(colonSpan); //Append user label to the nameplate nameplate.appendChild(userLabel); diff --git a/www/js/channel/panels/settingsPanel.js b/www/js/channel/panels/settingsPanel.js index 62daf0e..f244114 100644 --- a/www/js/channel/panels/settingsPanel.js +++ b/www/js/channel/panels/settingsPanel.js @@ -62,6 +62,11 @@ class settingsPanel extends panelObj{ */ this.theme = this.panelDocument.querySelector("#settings-panel-theme"); + /** + * Chat nameplate format + */ + this.nameplateFormat = this.panelDocument.querySelector("#settings-panel-nameplate-format"); + /** * Chat Width Minimum while Size-Locked to Media Aspect Ratio */ @@ -144,6 +149,7 @@ class settingsPanel extends panelObj{ this.liveSyncTolerance.addEventListener('change', this.updateLiveSyncTolerance.bind(this)); this.syncDelta.addEventListener('change', this.updateSyncDelta.bind(this)); this.theme.addEventListener('change', this.updateTheme.bind(this)); + this.nameplateFormat.addEventListener('change', this.updateNameplateFormat.bind(this)); this.chatWidthMinimum.addEventListener('change', this.updateChatWidthMinimum.bind(this)); this.disablePortrait.addEventListener('change', this.updateDisablePortrait.bind(this)); this.disableSendButton.addEventListener('change', this.updateDisableSendButton.bind(this)); @@ -163,6 +169,7 @@ class settingsPanel extends panelObj{ this.liveSyncTolerance.value = localStorage.getItem("liveSyncTolerance"); this.syncDelta.value = localStorage.getItem("syncDelta"); this.theme.querySelector('select').value = localStorage.getItem("theme"); + this.nameplateFormat.querySelector('select').value = localStorage.getItem("nameplateFormat"); this.chatWidthMinimum.value = localStorage.getItem("chatWidthMin"); this.disablePortrait.checked = localStorage.getItem("disablePortrait") == 'true'; this.disableSendButton.checked = localStorage.getItem("disableSendButton") == 'true'; @@ -261,6 +268,15 @@ class settingsPanel extends panelObj{ client.processConfig("theme", theme); } + /** + * Update nameplate format + */ + updateNameplateFormat(){ + let format = this.nameplateFormat.querySelector('select').value; + localStorage.setItem("nameplateFormat", format); + client.processConfig("nameplateFormat", format); + } + /** * Handles Chat Width minimum Changes */