From b8ead193602aa7b9a79e71d3300106277511a11f Mon Sep 17 00:00:00 2001
From: Mow910 <mohamednidbella@gmail.com>
Date: Sat, 7 Mar 2026 00:06:07 +0100
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20fonctionnalit=C3=A9s=20de=20person?=
 =?UTF-8?q?nalisation=20dans=20la=20shoutbox=20pour=20les=20mod=C3=A9rateu?=
 =?UTF-8?q?rs=20Twitch.=20Impl=C3=A9mentation=20de=20la=20gestion=20de=20l?=
 =?UTF-8?q?a=20taille=20de=20la=20police=20et=20d'un=20bouton=20pour=20act?=
 =?UTF-8?q?iver/d=C3=A9sactiver=20le=20son=20des=20notifications.=20Mise?=
 =?UTF-8?q?=20=C3=A0=20jour=20de=20l'interface=20utilisateur=20pour=20am?=
 =?UTF-8?q?=C3=A9liorer=20l'exp=C3=A9rience=20de=20mod=C3=A9ration.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webapp/templates/twitch-moderation.html | 42 ++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/webapp/templates/twitch-moderation.html b/webapp/templates/twitch-moderation.html
index 24ec397..990f31f 100644
--- a/webapp/templates/twitch-moderation.html
+++ b/webapp/templates/twitch-moderation.html
@@ -311,7 +311,16 @@
 				<span>Shoutbox Modos</span>
 				<span class="text-xs text-gray-400" id="shoutboxCount"></span>
 			</div>
-			<div class="flex items-center gap-2">
+			<div class="flex items-center gap-3">
+				<div class="flex items-center gap-1.5">
+					<button onclick="shoutboxFontSize(-1)" class="text-gray-400 hover:text-white text-xs leading-none px-1" title="Réduire la police">A-</button>
+					<span class="text-gray-500 text-xs" id="shoutboxFontLabel">12</span>
+					<button onclick="shoutboxFontSize(1)" class="text-gray-400 hover:text-white text-xs leading-none px-1" title="Agrandir la police">A+</button>
+				</div>
+				<button onclick="toggleShoutboxSound()" id="shoutboxSoundBtn" class="text-xs flex items-center gap-1 text-green-400 hover:text-green-300" title="Son activé">
+					<svg class="w-3.5 h-3.5" id="shoutboxSoundIcon" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M17.95 6.05a8 8 0 010 11.9M11 5L6 9H2v6h4l5 4V5z"></path></svg>
+					<span id="shoutboxSoundLabel">Son</span>
+				</button>
 				<button onclick="openShoutboxPopout()" class="text-xs text-indigo-400 hover:text-indigo-300 flex items-center gap-1" title="Ouvrir en popup">
 					<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
 					Popout
@@ -985,12 +994,41 @@ var shoutboxLastTimestamp = '';
 var shoutboxAutoScroll = true;
 var shoutboxTabVisible = true;
 var shoutboxAudioCtx = null;
+var shoutboxSoundEnabled = localStorage.getItem('shoutbox_sound') !== 'off';
+var shoutboxFontSizePx = parseInt(localStorage.getItem('shoutbox_fontsize')) || 12;
 
 document.addEventListener('visibilitychange', function() {
 	shoutboxTabVisible = !document.hidden;
 });
 
+function shoutboxApplyFontSize() {
+	var display = document.getElementById('shoutboxDisplay');
+	if (display) display.style.fontSize = shoutboxFontSizePx + 'px';
+	var label = document.getElementById('shoutboxFontLabel');
+	if (label) label.textContent = shoutboxFontSizePx;
+	localStorage.setItem('shoutbox_fontsize', shoutboxFontSizePx);
+}
+
+function shoutboxFontSize(delta) {
+	shoutboxFontSizePx = Math.max(8, Math.min(20, shoutboxFontSizePx + delta));
+	shoutboxApplyFontSize();
+}
+
+function shoutboxUpdateSoundUI() {
+	var btn = document.getElementById('shoutboxSoundBtn');
+	if (!btn) return;
+	btn.className = 'text-xs flex items-center gap-1 ' + (shoutboxSoundEnabled ? 'text-green-400 hover:text-green-300' : 'text-red-400 hover:text-red-300');
+	btn.title = shoutboxSoundEnabled ? 'Son activé' : 'Son désactivé';
+}
+
+function toggleShoutboxSound() {
+	shoutboxSoundEnabled = !shoutboxSoundEnabled;
+	localStorage.setItem('shoutbox_sound', shoutboxSoundEnabled ? 'on' : 'off');
+	shoutboxUpdateSoundUI();
+}
+
 function shoutboxBeep() {
+	if (!shoutboxSoundEnabled) return;
 	try {
 		if (!shoutboxAudioCtx) shoutboxAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
 		var osc = shoutboxAudioCtx.createOscillator();
@@ -1186,6 +1224,8 @@ document.getElementById('shoutboxDisplay').addEventListener('scroll', function()
 	shoutboxAutoScroll = this.scrollHeight - this.scrollTop <= this.clientHeight + 30;
 });
 
+shoutboxApplyFontSize();
+shoutboxUpdateSoundUI();
 setInterval(fetchShoutbox, 3000);
 fetchShoutbox();
 setInterval(shoutboxHeartbeat, 10000);