From 1fdfe1d45d5be5d3b5db0b82953b60abaf48905b Mon Sep 17 00:00:00 2001 From: vyneer Date: Sat, 9 Dec 2023 21:18:19 +0300 Subject: [PATCH] feat: improve broadcast messages --- assets/chat/css/style.scss | 28 ++++----- assets/chat/img/icon-broadcast.png | Bin 0 -> 16767 bytes assets/chat/js/chat.js | 9 ++- .../chat/js/messages/ChatBroadcastMessage.js | 58 ++++++++++++++++++ assets/chat/js/messages/MessageBuilder.js | 5 +- assets/chat/js/messages/index.js | 1 + assets/chat/js/user.js | 10 +-- 7 files changed, 88 insertions(+), 23 deletions(-) create mode 100644 assets/chat/img/icon-broadcast.png create mode 100644 assets/chat/js/messages/ChatBroadcastMessage.js diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 6cc58035..97ffb9e3 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -535,23 +535,11 @@ hr { } } -/* Broadcasts */ -.msg-broadcast { - background-color: $color-chat-emphasize; - color: $color-text-broadcast !important; - font-size: 1.1em; - font-weight: 400; - padding-top: $gutter-md; - padding-bottom: $gutter-md; - time { - margin-right: $gutter-md; - } -} - .msg-donation, .msg-subscription, .msg-giftsub, -.msg-massgift { +.msg-massgift, +.msg-broadcast { text-shadow: 1px 1px 3px rgba(0, 0, 0, 1); font-size: 1.1em; font-weight: 400; @@ -614,6 +602,18 @@ hr { } } +/* Broadcasts */ +.msg-broadcast { + border-color: $color-text-broadcast; + + .broadcast-icon { + background: transparent url('../img/icon-broadcast.png') no-repeat center + center; + background-size: contain; + filter: invert(100%); + } +} + /* Donations */ .msg-donation { .donation-icon { diff --git a/assets/chat/img/icon-broadcast.png b/assets/chat/img/icon-broadcast.png new file mode 100644 index 0000000000000000000000000000000000000000..1ab16b820709f128b343bcab720bc3955e4acb50 GIT binary patch literal 16767 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 window.location.reload(true), retryMilli); + MessageBuilder.broadcast( - `Restart incoming in ${Math.round(retryMilli / 1000)} seconds ...`, + `Restart incoming in ${Math.round(retryMilli / 1000)} seconds...`, + new ChatUser(), + data.timestamp, ).into(this); } } else { - MessageBuilder.broadcast(data.data, data.timestamp).into(this); + const user = + this.users.get(data.nick.toLowerCase()) ?? new ChatUser(data.user); + MessageBuilder.broadcast(data.data, user, data.timestamp).into(this); } } diff --git a/assets/chat/js/messages/ChatBroadcastMessage.js b/assets/chat/js/messages/ChatBroadcastMessage.js new file mode 100644 index 00000000..6b358e01 --- /dev/null +++ b/assets/chat/js/messages/ChatBroadcastMessage.js @@ -0,0 +1,58 @@ +import { usernameColorFlair } from './ChatUserMessage'; +import ChatEventMessage from './ChatEventMessage'; +import MessageTypes from './MessageTypes'; + +export default class ChatBroadcastMessage extends ChatEventMessage { + constructor(message, user, timestamp = null) { + super(message, timestamp); + this.type = MessageTypes.BROADCAST; + this.user = user; + } + + buildUserTemplate(chat = null) { + if (this.user.displayName !== '') { + const colorFlair = usernameColorFlair(chat.flairs, this.user); + + /** @type HTMLAnchorElement */ + const user = document + .querySelector('#user-template') + ?.content.cloneNode(true).firstElementChild; + user.title = this.title; + user.classList.add(colorFlair?.name); + user.innerText = this.user.displayName; + + const ctrl = document.createElement('span'); + ctrl.innerText = ': '; + + return [user, ctrl]; + } + + return []; + } + + html(chat = null) { + const eventTemplate = super.html(chat); + + const text = eventTemplate.querySelector('.event-bottom')?.innerHTML; + eventTemplate.querySelector('.event-bottom').remove(); + eventTemplate.querySelector('.event-info').innerHTML = text; + + const user = this.buildUserTemplate(chat); + + eventTemplate.querySelector('.event-icon').classList.add('broadcast-icon'); + eventTemplate.querySelector('.event-info').prepend(...user); + + const classes = Array.from(eventTemplate.classList); + const attributes = eventTemplate + .getAttributeNames() + .reduce((object, attributeName) => { + if (attributeName === 'class') return object; + return { + ...object, + [attributeName]: eventTemplate.getAttribute(attributeName), + }; + }, {}); + + return this.wrap(eventTemplate.innerHTML, classes, attributes); + } +} diff --git a/assets/chat/js/messages/MessageBuilder.js b/assets/chat/js/messages/MessageBuilder.js index 4baf7f93..8f908143 100644 --- a/assets/chat/js/messages/MessageBuilder.js +++ b/assets/chat/js/messages/MessageBuilder.js @@ -9,6 +9,7 @@ import ChatDonationMessage from './ChatDonationMessage'; import ChatRegularSubscriptionMessage from './subscriptions/ChatRegularSubscriptionMessage'; import ChatGiftedSubscriptionMessage from './subscriptions/ChatGiftedSubscriptionMessage'; import ChatMassSubscriptionMessage from './subscriptions/ChatMassSubscriptionMessage'; +import ChatBroadcastMessage from './ChatBroadcastMessage'; export default class MessageBuilder { static element(message, classes = []) { @@ -27,8 +28,8 @@ export default class MessageBuilder { return new ChatMessage(message, timestamp, MessageTypes.INFO); } - static broadcast(message, timestamp = null) { - return new ChatMessage(message, timestamp, MessageTypes.BROADCAST); + static broadcast(message, user, timestamp = null) { + return new ChatBroadcastMessage(message, user, timestamp); } static command(message, timestamp = null) { diff --git a/assets/chat/js/messages/index.js b/assets/chat/js/messages/index.js index 4732353c..c7bfbbed 100644 --- a/assets/chat/js/messages/index.js +++ b/assets/chat/js/messages/index.js @@ -12,3 +12,4 @@ export { default as PinnedMessage, checkIfPinWasDismissed, } from './PinnedMessage'; +export { default as ChatBroadcastMessage } from './ChatBroadcastMessage'; diff --git a/assets/chat/js/user.js b/assets/chat/js/user.js index fe6987b5..b7b5628c 100644 --- a/assets/chat/js/user.js +++ b/assets/chat/js/user.js @@ -53,12 +53,12 @@ class ChatUser { this.displayName = user; this.username = this.displayName.toLowerCase(); } else { - this.id = user.id || null; - this.displayName = user.nick || ''; + this.id = user?.id || null; + this.displayName = user?.nick || ''; this.username = this.displayName.toLowerCase(); - this.createdDate = user.createdDate || ''; - this.features = user.features || []; - this.watching = user.watching || null; + this.createdDate = user?.createdDate || ''; + this.features = user?.features || []; + this.watching = user?.watching || null; } }