Ajout d'une fonctionnalité de notification sonore dans la shoutbox pour les modérateurs Twitch. Implémentation d'un système de détection de visibilité de l'onglet et d'un son de notification lorsque l'onglet n'est pas actif. Cela améliore l'expérience utilisateur en alertant les modérateurs des nouveaux messages même lorsqu'ils ne regardent pas la shoutbox.

webapp/templates/twitch-moderation.html

@@ -889,6 +889,28 @@ document.addEventListener('keydown', function(e) {
 var shoutboxKnownIds = new Set();
 var shoutboxLastTimestamp = '';
 var shoutboxAutoScroll = true;
+var shoutboxTabVisible = true;
+var shoutboxAudioCtx = null;
+
+document.addEventListener('visibilitychange', function() {
+	shoutboxTabVisible = !document.hidden;
+});
+
+function shoutboxBeep() {
+	try {
+		if (!shoutboxAudioCtx) shoutboxAudioCtx = new (window.AudioContext || window.webkitAudioContext)();
+		var osc = shoutboxAudioCtx.createOscillator();
+		var gain = shoutboxAudioCtx.createGain();
+		osc.connect(gain);
+		gain.connect(shoutboxAudioCtx.destination);
+		osc.frequency.value = 660;
+		osc.type = 'sine';
+		gain.gain.setValueAtTime(0.15, shoutboxAudioCtx.currentTime);
+		gain.gain.exponentialRampToValueAtTime(0.001, shoutboxAudioCtx.currentTime + 0.3);
+		osc.start(shoutboxAudioCtx.currentTime);
+		osc.stop(shoutboxAudioCtx.currentTime + 0.3);
+	} catch(e) {}
+}
 
 var SHOUTBOX_COLORS = [
 	'#6366f1', '#8b5cf6', '#ec4899', '#14b8a6', '#f59e0b',
@@ -946,6 +968,8 @@ function addShoutboxItem(item) {
 
 	display.appendChild(line);
 
+	if (!shoutboxTabVisible) shoutboxBeep();
+
 	while (display.children.length > 200) display.removeChild(display.firstChild);
 	if (shoutboxAutoScroll) display.scrollTop = display.scrollHeight;
 }