From ea0729cbd6c2095d80293e2ba2225168f0c2ddb3 Mon Sep 17 00:00:00 2001 From: ElementalAlchemist Date: Thu, 20 Oct 2022 22:34:15 -0500 Subject: [PATCH] Show system messages (raids, subscriptions, etc.) in the chat replay --- thrimbletrimmer/scripts/common.js | 123 ++++++++++++++++----- thrimbletrimmer/scripts/edit.js | 5 + thrimbletrimmer/scripts/stream.js | 5 + thrimbletrimmer/styles/thrimbletrimmer.css | 4 + 4 files changed, 109 insertions(+), 28 deletions(-) diff --git a/thrimbletrimmer/scripts/common.js b/thrimbletrimmer/scripts/common.js index 5813854..66a8635 100644 --- a/thrimbletrimmer/scripts/common.js +++ b/thrimbletrimmer/scripts/common.js @@ -512,7 +512,8 @@ async function getChatLog(startWubloaderTime, endWubloaderTime) { if ( chatLine.command !== "PRIVMSG" && chatLine.command !== "CLEARMSG" && - chatLine.command !== "CLEARCHAT" + chatLine.command !== "CLEARCHAT" && + chatLine.command !== "USERNOTICE" ) { continue; } @@ -530,22 +531,9 @@ function renderChatMessage(chatMessageData) { const sendTimeElement = document.createElement("div"); sendTimeElement.classList.add("chat-replay-message-time"); - const messageTime = videoHumanTimeFromDateTime(chatMessageData.when); - sendTimeElement.innerText = messageTime; + sendTimeElement.innerText = videoHumanTimeFromDateTime(chatMessageData.when); - var displayName = ""; - if (chatMessage.tags.hasOwnProperty("display-name")) { - displayName = chatMessage.tags["display-name"]; - } else { - displayName = chatMessage.sender; - } - - const senderNameElement = document.createElement("div"); - senderNameElement.classList.add("chat-replay-message-sender"); - if (chatMessage.tags.hasOwnProperty("color")) { - senderNameElement.style.color = chatMessage.tags.color; - } - senderNameElement.innerText = displayName; + const senderNameElement = createMessageSenderElement(chatMessageData); const messageTextElement = document.createElement("div"); messageTextElement.classList.add("chat-replay-message-text"); @@ -570,6 +558,96 @@ function renderChatMessage(chatMessageData) { messageTextElement.appendChild(replyContainer); } + addChatMessageTextToElement(chatMessageData, messageTextElement); + + const messageContainer = createMessageContainer(chatMessageData, false); + messageContainer.appendChild(sendTimeElement); + messageContainer.appendChild(senderNameElement); + messageContainer.appendChild(messageTextElement); + return messageContainer; +} + +function renderSystemMessages(chatMessageData) { + const chatMessage = chatMessageData.message; + if (chatMessage.command !== "USERNOTICE" || chatMessage.params[0] != `#${globalStreamName}`) { + return []; + } + + const messages = []; + + const sendTimeElement = document.createElement("div"); + sendTimeElement.classList.add("chat-replay-message-time"); + sendTimeElement.innerText = videoHumanTimeFromDateTime(chatMessageData.when); + + const systemTextElement = document.createElement("div"); + systemTextElement.classList.add("chat-replay-message-text"); + systemTextElement.classList.add("chat-replay-message-system"); + systemTextElement.appendChild(document.createTextNode(chatMessage.tags["system-msg"])); + + const firstMessageContainer = createMessageContainer(chatMessageData, true); + firstMessageContainer.appendChild(sendTimeElement); + firstMessageContainer.appendChild(systemTextElement); + messages.push(firstMessageContainer); + + if (chatMessage.params.length === 1) { + return messages; + } + + const emptySendTimeElement = document.createElement("div"); + emptySendTimeElement.classList.add("chat-replay-message-time"); + + const senderNameElement = createMessageSenderElement(chatMessageData); + + const messageTextElement = document.createElement("div"); + messageTextElement.classList.add("chat-replay-message-text"); + addChatMessageTextToElement(chatMessageData, messageTextElement); + + const secondMessageContainer = createMessageContainer(chatMessageData, false); + secondMessageContainer.appendChild(emptySendTimeElement); + secondMessageContainer.appendChild(senderNameElement); + secondMessageContainer.appendChild(messageTextElement); + messages.push(secondMessageContainer); + + return messages; +} + +function createMessageContainer(chatMessageData, isSystemMessage) { + const chatMessage = chatMessageData.message; + const messageContainer = document.createElement("div"); + messageContainer.classList.add("chat-replay-message"); + if (chatMessage.tags.hasOwnProperty("id")) { + if (isSystemMessage) { + messageContainer.id = `chat-replay-message-system-${chatMessage.tags.id}`; + } else { + messageContainer.id = `chat-replay-message-${chatMessage.tags.id}`; + } + } + messageContainer.dataset.sender = chatMessage.sender; + return messageContainer; +} + +function getMessageDisplayName(chatMessageData) { + const chatMessage = chatMessageData.message; + if (chatMessage.tags.hasOwnProperty("display-name")) { + return chatMessage.tags["display-name"]; + } + return chatMessage.sender; +} + +function createMessageSenderElement(chatMessageData) { + const chatMessage = chatMessageData.message; + const senderNameElement = document.createElement("div"); + senderNameElement.classList.add("chat-replay-message-sender"); + if (chatMessage.tags.hasOwnProperty("color")) { + senderNameElement.style.color = chatMessage.tags.color; + } + senderNameElement.innerText = getMessageDisplayName(chatMessageData); + return senderNameElement; +} + +function addChatMessageTextToElement(chatMessageData, messageTextElement) { + const chatMessage = chatMessageData.message; + let chatMessageText = chatMessage.params[1]; if (chatMessageText.startsWith("\u0001ACTION")) { messageTextElement.classList.add("chat-replay-message-text-action"); @@ -623,15 +701,4 @@ function renderChatMessage(chatMessageData) { } else { messageTextElement.appendChild(document.createTextNode(chatMessageText)); } - - const messageContainer = document.createElement("div"); - messageContainer.classList.add("chat-replay-message"); - if (chatMessage.tags.hasOwnProperty("id")) { - messageContainer.id = `chat-replay-message-${chatMessage.tags.id}`; - } - messageContainer.dataset.sender = chatMessage.sender; - messageContainer.appendChild(sendTimeElement); - messageContainer.appendChild(senderNameElement); - messageContainer.appendChild(messageTextElement); - return messageContainer; -} +} \ No newline at end of file diff --git a/thrimbletrimmer/scripts/edit.js b/thrimbletrimmer/scripts/edit.js index e67865c..43fd2b9 100644 --- a/thrimbletrimmer/scripts/edit.js +++ b/thrimbletrimmer/scripts/edit.js @@ -1591,6 +1591,11 @@ function renderChatLog() { childNode.classList.add("chat-replay-message-cleared"); } } + } else if (chatMessage.message.command === "USERNOTICE") { + const chatDOMList = renderSystemMessages(chatMessage); + for (const chatDOM of chatDOMList) { + chatReplayParent.appendChild(chatDOM); + } } } } diff --git a/thrimbletrimmer/scripts/stream.js b/thrimbletrimmer/scripts/stream.js index f3de096..e7e8e17 100644 --- a/thrimbletrimmer/scripts/stream.js +++ b/thrimbletrimmer/scripts/stream.js @@ -329,5 +329,10 @@ function handleChatMessage(chatReplayContainer, chatMessage) { messageElem.classList.add("chat-replay-message-cleared"); } } + } else if (chatMessage.message.command === "USERNOTICE") { + const chatDOMList = renderSystemMessages(chatMessage); + for (const chatDOM of chatDOMList) { + chatReplayContainer.appendChild(chatDOM); + } } } diff --git a/thrimbletrimmer/styles/thrimbletrimmer.css b/thrimbletrimmer/styles/thrimbletrimmer.css index c28d2f5..7557f62 100644 --- a/thrimbletrimmer/styles/thrimbletrimmer.css +++ b/thrimbletrimmer/styles/thrimbletrimmer.css @@ -392,6 +392,10 @@ a, font-style: italic; } +.chat-replay-message-system { + color: #aaf; +} + .chat-replay-message-text-action .chat-replay-message-reply:not(.chat-replay-message-text-action) { font-style: normal; /* Clear the italics from the action */ }