stream/streamerbot-overlay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add image + noDelay

Browse Source
This commit is contained in:
Stephane Bouvard
2025-08-09 14:17:54 +02:00
parent c06890426c
commit 7c3d0b0436
4 changed files with 111 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
modules/popup/popup.js
View File

@@ -2,6 +2,8 @@
const moduleUrl = window.getModuleUrl();
loadCSSModule('overlay-popup-css', moduleUrl + '/css/popup.css');
const FADE_OUT_MS = 500;
function initModule() {
const container = document.getElementById('mainContainer') || document.body;
if (!document.getElementById('popupContainer')) {
@@ -12,18 +14,10 @@
}
initModule();
if (window.SBdispatcher) {
SBdispatcher.on('stream-popup', data => {
showPopup(
data.param1,
data.param2,
parseFloat(data.param3) || 3,
data.param4 != null ? parseFloat(data.param4) : -1,
data.param5 != null ? parseFloat(data.param5) : -1
);
});
}
// Tableau global des popups actifs pour éviter le chevauchement
window._activePopups = window._activePopups || [];
// ===== Helpers =====
function randomPercent(min = 0, max = 100) {
const minClamped = Math.ceil(min);
const maxClamped = Math.floor(max);
@@ -34,46 +28,96 @@
return !(r1.right < r2.left || r1.left > r2.right || r1.bottom < r2.top || r1.top > r2.bottom);
}
// Tableau global des popups actifs pour éviter le chevauchement
window._activePopups = window._activePopups || [];
function findPopupByRef(ref) {
if (!ref) return null;
return window._activePopups.find(el => el.dataset && el.dataset.ref === String(ref)) || null;
}
function removePopupElement(popupEl) {
if (!popupEl || !popupEl.isConnected) return;
if (popupEl._timeoutId) {
clearTimeout(popupEl._timeoutId);
popupEl._timeoutId = null;
}
popupEl.classList.add('fade-out');
setTimeout(() => {
if (popupEl && popupEl.remove) popupEl.remove();
const idx = window._activePopups.indexOf(popupEl);
if (idx !== -1) window._activePopups.splice(idx, 1);
}, FADE_OUT_MS);
}
// ===== API =====
/**
* Supprime manuellement un popup par sa référence.
* @param {string} reference
* @returns {boolean} true si supprimé, false sinon
*/
function deletePopup(reference) {
const target = findPopupByRef(reference);
if (target) {
removePopupElement(target);
return true;
}
return false;
}
// Expose globalement
window.deletePopup = deletePopup;
/**
* Affiche un popup dans #mainContainer (ou body si absent).
* @param {string} title Titre du popup
* @param {string} message Contenu HTML du message
* @param {number} delaySeconds Durée d'affichage en secondes
* @param {number} delaySeconds Durée d'affichage en secondes. -1 = ne pas auto-supprimer
* @param {number|null} posX Position horizontale en %, -1 ou null = aléatoire
* @param {number|null} posY Position verticale en %, -1 ou null = aléatoire
* @param {string|null} reference Identifiant unique pour ce popup (permet deletePopup)
* @param {string|null} image URL d'une image à afficher dans le popup
*/
function showPopup(title, message, delaySeconds, posX = -1, posY = -1) {
function showPopup(title, message, delaySeconds, posX = -1, posY = -1, reference = null, image = null) {
const container = document.getElementById('popupContainer') || document.body;
const activePopups = window._activePopups;
const maxAttempts = 10;
// Remplacer un popup existant de même référence
if (reference) {
const existing = findPopupByRef(reference);
if (existing) removePopupElement(existing);
}
let attempt = 0;
let popup, rect;
do {
if (popup) {
popup.remove();
}
// Calcul position (entre 10% et 90% si aléatoire)
if (popup) popup.remove();
const x = (posX == null || posX < 0) ? randomPercent(10, 90) : posX;
const y = (posY == null || posY < 0) ? randomPercent(10, 90) : posY;
// Création de l'élément popup
popup = document.createElement('div');
popup.classList.add('overlay-popup');
popup.style.position = 'absolute';
popup.style.left = `${x}%`;
popup.style.top = `${y}%`;
// Contenu
if (reference) popup.dataset.ref = String(reference);
const header = document.createElement('h3');
header.innerText = title;
const body = document.createElement('div');
body.innerHTML = message;
popup.append(header, body);
if (image) {
const img = document.createElement('img');
img.src = image;
img.alt = title || 'image';
img.classList.add('overlay-popup-image');
popup.append(img);
}
container.appendChild(popup);
rect = popup.getBoundingClientRect();
attempt++;
@@ -82,17 +126,31 @@
activePopups.some(other => isOverlapping(rect, other.getBoundingClientRect()))
);
// Conserve ce popup dans la liste des actifs
activePopups.push(popup);
// Suppression après délai et retrait de la liste
setTimeout(() => {
popup.classList.add('fade-out');
setTimeout(() => {
popup.remove();
const idx = activePopups.indexOf(popup);
if (idx !== -1) activePopups.splice(idx, 1);
}, 500);
}, delaySeconds * 1000);
if (delaySeconds !== -1) {
popup._timeoutId = setTimeout(() => removePopupElement(popup), delaySeconds * 1000);
}
}
// ===== Events =====
if (window.SBdispatcher) {
SBdispatcher.on('stream-popup', data => {
showPopup(
data.param1, // title
data.param2, // message (HTML)
parseFloat(data.param3) || 3, // delaySeconds
data.param4 != null ? parseFloat(data.param4) : -1, // posX
data.param5 != null ? parseFloat(data.param5) : -1, // posY
data.param6 != null ? String(data.param6) : null, // reference
data.param7 != null ? String(data.param7) : null // image URL
);
});
// >>> Nouveau : suppression par event
SBdispatcher.on('stream-popup-delete', data => {
// data.param1 = reference
deletePopup(data?.param1 != null ? String(data.param1) : null);
});
}
})();