From a9e269e97914c1676053edbb5ffd7d2b88dbccd5 Mon Sep 17 00:00:00 2001
From: Juliusz Chroboczek <jch@irif.fr>
Date: Wed, 31 Jul 2024 20:22:57 +0200
Subject: [PATCH] Implement caption support in the client.

---
 static/galene.css  | 20 ++++++++++++++++++++
 static/galene.html |  3 +++
 static/galene.js   | 39 ++++++++++++++++++++++++++++++++++++++-
 3 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/static/galene.css b/static/galene.css
index cb41c3c..15394fc 100644
--- a/static/galene.css
+++ b/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; */
diff --git a/static/galene.html b/static/galene.html
index 556eeec..7eb1cd0 100644
--- a/static/galene.html
+++ b/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">
diff --git a/static/galene.js b/static/galene.js
index 19d4945..0bae5df 100644
--- a/static/galene.js
+++ b/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
  */