From 589cb1f4288f74341dfb310cac4b5c51c06b87b7 Mon Sep 17 00:00:00 2001 From: Mow910 Date: Tue, 10 Mar 2026 18:02:55 +0100 Subject: [PATCH] =?UTF-8?q?Ajout=20d'un=20bouton=20de=20notification=20pou?= =?UTF-8?q?r=20les=20nouveaux=20messages=20dans=20la=20shoutbox,=20permett?= =?UTF-8?q?ant=20aux=20mod=C3=A9rateurs=20Twitch=20de=20voir=20facilement?= =?UTF-8?q?=20les=20messages=20non=20lus.=20Mise=20=C3=A0=20jour=20de=20la?= =?UTF-8?q?=20logique=20de=20d=C3=A9filement=20automatique=20et=20gestion?= =?UTF-8?q?=20des=20compteurs=20de=20messages=20non=20lus.=20Am=C3=A9liora?= =?UTF-8?q?tion=20de=20l'interface=20utilisateur=20pour=20une=20meilleure?= =?UTF-8?q?=20exp=C3=A9rience=20de=20mod=C3=A9ration.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- webapp/templates/shoutbox-popout.html | 47 ++++++++++++++++++++++--- webapp/templates/twitch-moderation.html | 43 ++++++++++++++++++++-- 2 files changed, 83 insertions(+), 7 deletions(-) diff --git a/webapp/templates/shoutbox-popout.html b/webapp/templates/shoutbox-popout.html index 9ec0952..0fae3f0 100644 --- a/webapp/templates/shoutbox-popout.html +++ b/webapp/templates/shoutbox-popout.html @@ -29,8 +29,14 @@
-
-
Aucun message
+
+
+
Aucun message
+
+
En ligne
@@ -55,6 +61,7 @@ var lastTimestamp = ''; var autoScroll = true; var tabVisible = true; var audioCtx = null; +var unreadCount = 0; document.addEventListener('visibilitychange', function() { tabVisible = !document.hidden; }); @@ -145,7 +152,26 @@ function addItem(item) { display.appendChild(line); if (!tabVisible) beep(); while (display.children.length > 200) display.removeChild(display.firstChild); - if (autoScroll) display.scrollTop = display.scrollHeight; + if (autoScroll) { + display.scrollTop = display.scrollHeight; + } else { + unreadCount++; + var btn = document.getElementById('newMsgBtn'); + var txt = document.getElementById('newMsgText'); + if (btn && txt) { + txt.textContent = unreadCount + ' nouveau' + (unreadCount > 1 ? 'x' : '') + ' message' + (unreadCount > 1 ? 's' : ''); + btn.classList.remove('hidden'); + } + } +} + +function scrollToBottom() { + var d = document.getElementById('shoutboxDisplay'); + d.scrollTop = d.scrollHeight; + autoScroll = true; + unreadCount = 0; + var btn = document.getElementById('newMsgBtn'); + if (btn) btn.classList.add('hidden'); } function updateOnline(users) { @@ -170,7 +196,15 @@ function poll() { fetch(url) .then(function(r) { return r.json(); }) .then(function(data) { - if (data.items && data.items.length > 0) data.items.forEach(addItem); + if (data.items && data.items.length > 0) { + data.items.forEach(addItem); + if (autoScroll) { + setTimeout(function() { + var d = document.getElementById('shoutboxDisplay'); + d.scrollTop = d.scrollHeight; + }, 0); + } + } if (data.timestamp) lastTimestamp = data.timestamp; if (data.online_users) updateOnline(data.online_users); var cnt = document.getElementById('shoutboxCount'); @@ -202,6 +236,11 @@ function sendShoutboxMessage(event) { document.getElementById('shoutboxDisplay').addEventListener('scroll', function() { autoScroll = this.scrollHeight - this.scrollTop <= this.clientHeight + 30; + if (autoScroll && unreadCount > 0) { + unreadCount = 0; + var btn = document.getElementById('newMsgBtn'); + if (btn) btn.classList.add('hidden'); + } }); setInterval(poll, 3000); diff --git a/webapp/templates/twitch-moderation.html b/webapp/templates/twitch-moderation.html index 990f31f..53d08ba 100644 --- a/webapp/templates/twitch-moderation.html +++ b/webapp/templates/twitch-moderation.html @@ -329,8 +329,14 @@
-
-
Aucun message
+
+
+
Aucun message
+
+
En ligne
@@ -994,6 +1000,7 @@ var shoutboxLastTimestamp = ''; var shoutboxAutoScroll = true; var shoutboxTabVisible = true; var shoutboxAudioCtx = null; +var shoutboxUnreadCount = 0; var shoutboxSoundEnabled = localStorage.getItem('shoutbox_sound') !== 'off'; var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 12; @@ -1124,7 +1131,26 @@ function addShoutboxItem(item) { if (!shoutboxTabVisible) shoutboxBeep(); while (display.children.length > 200) display.removeChild(display.firstChild); - if (shoutboxAutoScroll) display.scrollTop = display.scrollHeight; + if (shoutboxAutoScroll) { + display.scrollTop = display.scrollHeight; + } else { + shoutboxUnreadCount++; + var btn = document.getElementById('shoutboxNewMsgBtn'); + var txt = document.getElementById('shoutboxNewMsgText'); + if (btn && txt) { + txt.textContent = shoutboxUnreadCount + ' nouveau' + (shoutboxUnreadCount > 1 ? 'x' : '') + ' message' + (shoutboxUnreadCount > 1 ? 's' : ''); + btn.classList.remove('hidden'); + } + } +} + +function shoutboxScrollToBottom() { + var d = document.getElementById('shoutboxDisplay'); + d.scrollTop = d.scrollHeight; + shoutboxAutoScroll = true; + shoutboxUnreadCount = 0; + var btn = document.getElementById('shoutboxNewMsgBtn'); + if (btn) btn.classList.add('hidden'); } function updateOnlineList(users) { @@ -1164,6 +1190,12 @@ function fetchShoutbox() { .then(function(data) { if (data.items && data.items.length > 0) { data.items.forEach(addShoutboxItem); + if (shoutboxAutoScroll) { + setTimeout(function() { + var d = document.getElementById('shoutboxDisplay'); + d.scrollTop = d.scrollHeight; + }, 0); + } } if (data.timestamp) shoutboxLastTimestamp = data.timestamp; if (data.online_users) updateOnlineList(data.online_users); @@ -1222,6 +1254,11 @@ function clearShoutbox() { document.getElementById('shoutboxDisplay').addEventListener('scroll', function() { shoutboxAutoScroll = this.scrollHeight - this.scrollTop <= this.clientHeight + 30; + if (shoutboxAutoScroll && shoutboxUnreadCount > 0) { + shoutboxUnreadCount = 0; + var btn = document.getElementById('shoutboxNewMsgBtn'); + if (btn) btn.classList.add('hidden'); + } }); shoutboxApplyFontSize();