From ade3ca4e9ecac0c86a5ec6b3937cb37224f0b616 Mon Sep 17 00:00:00 2001 From: n9k Date: Fri, 4 Mar 2022 13:23:28 +0000 Subject: [PATCH] Add broadcaster insignia Also surrounded users' name tags in (HTML) tags. --- anonstream/static/anonstream.js | 37 +++++++++++++------- anonstream/static/style.css | 4 +++ anonstream/templates/macros/user.html | 7 +++- anonstream/templates/nojs_chat_messages.html | 6 +++- anonstream/templates/nojs_chat_users.html | 7 ++-- 5 files changed, 44 insertions(+), 17 deletions(-) diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js index da61576..82ede0a 100644 --- a/anonstream/static/anonstream.js +++ b/anonstream/static/anonstream.js @@ -120,11 +120,7 @@ const create_chat_message = (object) => { chat_message_time.title = `${object.date} ${object.time_seconds}`; chat_message_time.innerText = object.time_minutes; - const [ - chat_message_name, - chat_message_tripcode_nbsp, - chat_message_tripcode, - ] = create_chat_user_components(user); + const chat_message_user_components = create_chat_user_components(user); const chat_message_markup = document.createElement("span"); chat_message_markup.classList.add("chat-message__markup"); @@ -132,9 +128,9 @@ const create_chat_message = (object) => { chat_message.insertAdjacentElement("beforeend", chat_message_time); chat_message.insertAdjacentHTML("beforeend", " "); - chat_message.insertAdjacentElement("beforeend", chat_message_name); - chat_message.insertAdjacentElement("beforeend", chat_message_tripcode_nbsp); - chat_message.insertAdjacentElement("beforeend", chat_message_tripcode); + for (const chat_message_user_component of chat_message_user_components) { + chat_message.insertAdjacentElement("beforeend", chat_message_user_component); + } chat_message.insertAdjacentHTML("beforeend", ": "); chat_message.insertAdjacentElement("beforeend", chat_message_markup); @@ -146,9 +142,11 @@ const create_chat_user_name = (user) => { chat_user_name.innerText = get_user_name({user}); //chat_user_name.dataset.color = user.color; // not working in any browser if (!user.broadcaster && user.name === null) { + const b = document.createElement("b"); + b.innerText = user.tag; const chat_user_name_tag = document.createElement("sup"); chat_user_name_tag.classList.add("chat-name__tag"); - chat_user_name_tag.innerText = user.tag; + chat_user_name_tag.innerHTML = b.outerHTML; chat_user_name.insertAdjacentElement("beforeend", chat_user_name_tag); } return chat_user_name; @@ -167,7 +165,20 @@ const create_chat_user_components = (user) => { chat_user_tripcode.innerHTML = user.tripcode.digest; } - return [chat_user_name, chat_user_tripcode_nbsp, chat_user_tripcode]; + let result; + if (!user.broadcaster) { + result = []; + } else { + const chat_user_insignia = document.createElement("b"); + chat_user_insignia.classList.add("chat-insignia") + chat_user_insignia.title = "Broadcaster"; + chat_user_insignia.innerText = "##"; + const chat_user_insignia_nbsp = document.createElement("span"); + chat_user_insignia_nbsp.innerHTML = " " + result = [chat_user_insignia, chat_user_insignia_nbsp]; + } + result.push(...[chat_user_name, chat_user_tripcode_nbsp, chat_user_tripcode]); + return result; } const create_and_add_chat_message = (object) => { const chat_message = create_chat_message(object); @@ -386,9 +397,9 @@ const disable_captcha = () => { } const set_title = (title) => { - const element = document.createElement("h1"); - element.innerText = title.replaceAll(/\r?\n/g, " "); - info_title.innerHTML = element.outerHTML; + const h1 = document.createElement("h1"); + h1.innerText = title.replaceAll(/\r?\n/g, " "); + info_title.innerHTML = h1.outerHTML; } const update_uptime = () => { diff --git a/anonstream/static/style.css b/anonstream/static/style.css index 69c00fd..c6f722c 100644 --- a/anonstream/static/style.css +++ b/anonstream/static/style.css @@ -192,6 +192,10 @@ noscript { .chat-message__time { color: #b2b2b3; font-size: 10pt; + cursor: default; +} +.chat-insignia { + text-shadow: 0 0 2px orangered; cursor: help; } .chat-name { diff --git a/anonstream/templates/macros/user.html b/anonstream/templates/macros/user.html index a1ef0a4..8aa85b8 100644 --- a/anonstream/templates/macros/user.html +++ b/anonstream/templates/macros/user.html @@ -1,6 +1,7 @@ {% macro appearance( user, + insignia_class, name_class, tag_class, tripcode_nbsp_class='for-tripcode', @@ -8,10 +9,14 @@ ) %} {{- '' -}} + {%- if user.broadcaster -%} + ## + {{- ' ' | safe -}} + {%- endif -%} {{- user.name or get_default_name(user) -}} {%- if not user.broadcaster and user.name is none -%} - {{ user.tag }} + {{ user.tag }} {%- endif -%} {%- if user.tripcode -%} diff --git a/anonstream/templates/nojs_chat_messages.html b/anonstream/templates/nojs_chat_messages.html index 75b9928..892d052 100644 --- a/anonstream/templates/nojs_chat_messages.html +++ b/anonstream/templates/nojs_chat_messages.html @@ -100,6 +100,10 @@ .chat-message__time { color: #b2b2b3; font-size: 10pt; + cursor: default; + } + .chat-message__insignia { + text-shadow: 0 0 2px orangered; cursor: help; } .chat-message__name { @@ -141,7 +145,7 @@ {% with user = users_by_token[message.token] %} {{- ' ' | safe -}} - {{ appearance(user, name_class='chat-message__name', tag_class='chat-message__name__tag') }} + {{ appearance(user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }} {{- ': ' -}} {{ message.markup }} {% endwith %} diff --git a/anonstream/templates/nojs_chat_users.html b/anonstream/templates/nojs_chat_users.html index f59f1a6..dda922f 100644 --- a/anonstream/templates/nojs_chat_users.html +++ b/anonstream/templates/nojs_chat_users.html @@ -61,6 +61,9 @@ .user { line-height: 1.4375; } + .user__insignia { + cursor: help; + } .user__name { font-weight: bold; cursor: default; @@ -91,7 +94,7 @@