Add broadcaster insignia

Also surrounded users' name tags in <b> (HTML) tags.

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 = () => {

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 {

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 -%}
+    <b class="{{ insignia_class }}" title="Broadcaster">##</b>
+    {{- '&nbsp;' | safe -}}
+  {%- endif -%}
   <span class="{{ name_class }}" style="color:{{ user.color }};">
     {{- user.name or get_default_name(user) -}}
     {%- if not user.broadcaster and user.name is none -%}
-      <sup class="{{ tag_class }}">{{ user.tag }}</sup>
+      <sup class="{{ tag_class }}"><b>{{ user.tag }}</b></sup>
     {%- endif -%}
   </span>
   {%- if user.tripcode -%}

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] %}
           <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
           {{- '&nbsp;' | 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') }}
           {{- ': ' -}}
           <span class="chat-message__markup">{{ message.markup }}</span>
         {% endwith %}

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 @@
     <ul>
       {% for user_listed in users_watching %}
         <li class="user">
-          {{- appearance(user_listed, name_class='user__name', tag_class='user__name__tag') -}}
+          {{- appearance(user_listed, insignia_class='user__insignia', name_class='user__name', tag_class='user__name__tag') -}}
           {%- if user.token == user_listed.token %} (You){% endif -%}
         </li>
       {% endfor %}
@@ -101,7 +104,7 @@
     <ul>
       {% for user_listed in users_notwatching %}
         <li class="user">
-          {{- appearance(user_listed, name_class='user__name', tag_class='user__name__tag') -}}
+          {{- appearance(user_listed, insignia_class='user__insignia', name_class='user__name', tag_class='user__name__tag') -}}
           {%- if user.token == user_listed.token %} (You){% endif -%}
         </li>
       {% endfor %}