Implement caption support in the client.

static/galene.css

@@ -1328,6 +1328,26 @@ header .collapse:hover {
 
 }
 
+#captions-container {
+    position: absolute;
+    bottom: 40px;
+    width: 100%;
+    pointer-events: none;
+    z-index: 1390;
+    alpha: 0;
+}
+
+#captions {
+    margin: auto;
+    padding: 0 0.4rem 0 0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    text-align: center;
+    pointer-events: none;
+    background-color: rgba(255,255,255,.7);
+    color: #000;
+}
+
 :root{
     --contextualMenuBg: #eee;
     --contextualMenuShadow: 1px 1px 1px #444; */

static/galene.html

@@ -99,6 +99,9 @@
                   <div id="peers"></div>
                 </div>
               </div>
+              <div id="captions-container" class="invisible">
+                <div id="captions"></div>
+              </div>
               <div class="login-container invisible" id="login-container">
                 <div class="login-box">
                   <form id="loginform" class="loginform">

static/galene.js

@@ -2962,6 +2962,11 @@ let lastMessage = {};
  * @param {string|HTMLElement} message
  */
 function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, message) {
+    if(kind === 'caption') {
+        displayCaption(message);
+        return;
+    }
+
     let row = document.createElement('div');
     row.classList.add('message-row');
     let container = document.createElement('div');
@@ -3063,7 +3068,7 @@ function addToChatbox(id, peerId, dest, nick, time, privileged, history, kind, m
         box.scrollTop = box.scrollHeight - box.clientHeight;
     }
 
-    return message;
+    return;
 }
 
 /**
@@ -3108,6 +3113,38 @@ function chatMessageMenu(elt) {
     });
 }
 
+/**
+ * @param {string|HTMLElement} message
+ */
+function setCaption(message) {
+    let container = document.getElementById('captions-container');
+    let captions = document.getElementById('captions');
+    if(!message) {
+        captions.replaceChildren();
+        container.classList.add('invisible');
+    } else {
+        if(message instanceof HTMLElement)
+            captions.replaceChildren(message);
+        else
+            captions.textContent = message;
+        container.classList.remove('invisible');
+    }
+}
+
+let captionsTimer = null;
+
+/**
+ * @param {string|HTMLElement} message
+ */
+function displayCaption(message) {
+    if(captionsTimer != null) {
+        clearTimeout(captionsTimer);
+        captionsTimer = null;
+    }
+    setCaption(message);
+    captionsTimer = setTimeout(() => setCaption(null), 3000);
+}
+
 /**
  * @param {string|HTMLElement} message
  */