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');