Initial

modules/alert-video/alert-video.js

@@ -0,0 +1,114 @@
+;(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 &agrave; <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);
+  }
+
+
+})();
+

modules/alert-video/css/alert-video.css

@@ -0,0 +1,133 @@
+#alertVideoContainer {
+  z-index: 400;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+#alertVideoContainer .alert_outer-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 800px;
+  height: 600px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 1rem;
+  box-sizing: border-box;
+}
+#alertVideoContainer .alert_outer-container.playing {
+  animation: 12s alert-animation ease-in-out forwards;
+}
+#alertVideoContainer .alert_widget-container {
+  display: flex;
+  background-color: #FFFFFF00;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  border-radius: 10px;
+}
+#alertVideoContainer .alert_text-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  max-height: 100%;
+  max-width: 100%;
+}
+#alertVideoContainer .alert_text {
+  font-family: 'Roboto', sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+  color: #FFFFFF;
+  width: 100%;
+  padding-top: 100px;
+  animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  visibility: hidden;
+}
+#alertVideoContainer .alert_text-accent {
+  color: #ccaaff;
+}
+#alertVideoContainer .alert_top-text-container {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  text-align: center;
+  padding-top: 1rem;
+  z-index: 2;
+  animation: fadeIn 2s 0.5s, fadeOut 2s 10s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+}
+#alertVideoContainer .alert_top-text-container .alert_top-text {
+  font-family: 'Roboto', sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+  color: #FFFFFF;
+  width: 100%;
+  padding-top: 100px;
+  text-shadow: 0 0 4px #000, 0 0 10px #000;
+  animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  visibility: hidden;
+}
+#alertVideoContainer .alert_bottom-text-container {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  padding-bottom: 1rem;
+  z-index: 2;
+  animation: fadeIn 2s 0.5s, fadeOut 2s 10s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+}
+#alertVideoContainer .alert_bottom-text-container .alert_bottom-text {
+  font-family: 'Roboto', sans-serif;
+  font-size: 24px;
+  font-weight: 600;
+  color: #FFFFFF;
+  width: 100%;
+  padding-top: 100px;
+  text-shadow: 0 0 4px #000, 0 0 10px #000;
+  animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+  animation-fill-mode: forwards;
+  opacity: 0;
+  visibility: hidden;
+}
+#alertVideoContainer .alertVideoContainer {
+  display: flex;
+  width: 50%;
+  position: absolute;
+  z-index: -1;
+  justify-content: center;
+  align-self: center;
+}
+#alertVideoContainer .alertVideoContainer .alertVideo {
+  width: 100%;
+  height: 100%;
+}
+@keyframes alert-animation {
+  0% {
+    visibility: hidden;
+  }
+  8.333333333333332% {
+    visibility: visible;
+  }
+  91.66666666666667% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

modules/alert-video/css/alert-video.less

@@ -0,0 +1,154 @@
+// out: alert-video.css, sourcemap: false, compress: false
+
+#alertVideoContainer {
+  z-index: 400;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  .alert_outer-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 800px;
+    height: 600px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 1rem;
+    box-sizing: border-box;
+  }
+  .alert_outer-container.playing {
+    animation: 12s alert-animation ease-in-out forwards;
+  }
+
+  .alert_widget-container {
+    display: flex;
+    background-color: #FFFFFF00;
+    width: 100%;
+    height: 100%;
+    padding: 16px;
+    border-radius: 10px;
+
+  }
+
+  .alert_text-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+    z-index: 1;
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  .alert_text {
+    font-family: 'Roboto', sans-serif;
+    font-size: 24px;
+    font-weight: 600;
+    color: #FFFFFF;
+    width: 100%;
+    padding-top: 100px;
+    animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+    animation-fill-mode: forwards;
+    opacity: 0;
+    visibility: hidden;
+  }    
+
+  .alert_text-accent {
+    color: #ccaaff;
+  }
+
+  .alert_top-text-container {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    text-align: center;
+    padding-top: 1rem;
+    z-index: 2;
+    animation: fadeIn 2s 0.5s, fadeOut 2s 10s;
+    animation-fill-mode: forwards;
+    opacity: 0;
+
+    .alert_top-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 24px;
+      font-weight: 600;
+      color: #FFFFFF;
+      width: 100%;
+      padding-top: 100px;
+
+      text-shadow: 0 0 4px #000, 0 0 10px #000;
+
+      animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+      animation-fill-mode: forwards;
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  .alert_bottom-text-container {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+    padding-bottom: 1rem;
+    z-index: 2;
+    animation: fadeIn 2s 0.5s, fadeOut 2s 10s;
+    animation-fill-mode: forwards;
+    opacity: 0;
+
+    .alert_bottom-text {
+      font-family: 'Roboto', sans-serif;
+      font-size: 24px;
+      font-weight: 600;
+      color: #FFFFFF;
+      width: 100%;
+      padding-top: 100px;
+
+      text-shadow: 0 0 4px #000, 0 0 10px #000;
+
+      animation: hideIn 1.5s, fadeIn 2s 1.5s, fadeOut 2s 8.5s;
+      animation-fill-mode: forwards;
+      opacity: 0;
+      visibility: hidden;
+
+    }    
+  }
+
+  .alertVideoContainer {
+    display: flex;
+    width: 50%;
+    position: absolute;
+    z-index: -1;
+    justify-content: center;
+    align-self: center;
+
+    .alertVideo {
+      width: 100%;
+      height: 100%;
+    }  
+  }
+
+
+  @keyframes alert-animation {
+      0% {
+        visibility: hidden;
+      }
+      8.333333333333332% {
+        visibility: visible;
+      }
+      91.66666666666667% {
+        opacity: 1;
+      }
+      100% {
+          opacity: 0;
+      }
+  }  
+}