115 lines
3.9 KiB
JavaScript
115 lines
3.9 KiB
JavaScript
;(function() {
|
||
const moduleUrl = window.getModuleUrl();
|
||
loadCSSModule('overlay-alertvideo-css', moduleUrl + '/css/alert-video.css');
|
||
|
||
function initModule() {
|
||
const container = document.getElementById('mainContainer') || document.body;
|
||
if (!document.getElementById('alertVideoContainer')) {
|
||
const alertVideoContainer = document.createElement('div');
|
||
alertVideoContainer.id = 'alertVideoContainer';
|
||
container.appendChild(alertVideoContainer);
|
||
}
|
||
}
|
||
initModule();
|
||
|
||
if (window.SBdispatcher) {
|
||
SBdispatcher.on('stream-alert:Follow', data => {
|
||
showAlert({
|
||
userName: data.user,
|
||
videoUrl: moduleUrl + '/files/ALERT_follow.webm',
|
||
delay: 12
|
||
});
|
||
});
|
||
SBdispatcher.on('stream-alert:Sub', data => {
|
||
showAlert({
|
||
userName: data.user,
|
||
videoUrl: moduleUrl + '/files/ALERT_sub.webm',
|
||
delay: 12
|
||
});
|
||
});
|
||
SBdispatcher.on('stream-alert:SubGift', data => {
|
||
showAlert({
|
||
userName: data.user,
|
||
videoUrl: moduleUrl + '/files/ALERT_gift.webm',
|
||
delay: 12,
|
||
topLine: 'Abonnement offert à <span class="alert_text-accent alert_variable-username">' + data.param1 + '</span>',
|
||
// bottomLine: 'Il a déjà offert <span class="alert_text-accent alert_variable-username">' + data.param2 +'</span> abonnements à la communauté !'
|
||
}); });
|
||
}
|
||
|
||
function showAlert({ userName, videoUrl, delay = 12, topLine = null, bottomLine = null }) {
|
||
const container = document.createElement('div');
|
||
container.classList.add('alert_outer-container', 'playing');
|
||
|
||
const widget = document.createElement('div');
|
||
widget.classList.add('alert_widget-container');
|
||
|
||
const textContainer = document.createElement('div');
|
||
textContainer.classList.add('alert_text-container');
|
||
|
||
// Zone nom d’utilisateur (au centre de la vidéo)
|
||
const centerTextWrapper = document.createElement('div');
|
||
const usernameText = document.createElement('p');
|
||
usernameText.classList.add('alert_text');
|
||
|
||
const usernameSpan = document.createElement('span');
|
||
usernameSpan.classList.add('alert_text-accent', 'alert_variable-username');
|
||
usernameSpan.textContent = userName;
|
||
|
||
usernameText.appendChild(usernameSpan);
|
||
centerTextWrapper.appendChild(usernameText);
|
||
|
||
// Vidéo
|
||
const videoContainer = document.createElement('div');
|
||
videoContainer.classList.add('alertVideoContainer');
|
||
|
||
const video = document.createElement('video');
|
||
video.classList.add('alertVideo');
|
||
video.autoplay = true;
|
||
video.muted = true;
|
||
video.playsInline = true;
|
||
|
||
const source = document.createElement('source');
|
||
source.src = videoUrl;
|
||
source.type = 'video/webm';
|
||
video.appendChild(source);
|
||
videoContainer.appendChild(video);
|
||
|
||
// Optionnel : ligne de texte en haut
|
||
if (topLine) {
|
||
const topTextContainer = document.createElement('div');
|
||
topTextContainer.classList.add('alert_top-text-container');
|
||
const topText = document.createElement('p');
|
||
topText.classList.add('alert_top-text');
|
||
topText.innerHTML = topLine;
|
||
topTextContainer.appendChild(topText);
|
||
container.appendChild(topTextContainer);
|
||
}
|
||
|
||
// Optionnel : ligne de texte en bas
|
||
if (bottomLine) {
|
||
const bottomTextContainer = document.createElement('div');
|
||
bottomTextContainer.classList.add('alert_bottom-text-container');
|
||
const bottomText = document.createElement('p');
|
||
bottomText.classList.add('alert_bottom-text');
|
||
bottomText.innerHTML = bottomLine;
|
||
bottomTextContainer.appendChild(bottomText);
|
||
container.appendChild(bottomTextContainer);
|
||
}
|
||
|
||
// Assemble tout
|
||
textContainer.appendChild(centerTextWrapper);
|
||
textContainer.appendChild(videoContainer);
|
||
widget.appendChild(textContainer);
|
||
container.appendChild(widget);
|
||
document.getElementById('alertVideoContainer').appendChild(container);
|
||
|
||
setTimeout(() => {
|
||
container.remove();
|
||
}, delay*1000);
|
||
}
|
||
|
||
|
||
})();
|
||
|