Initial

modules/scrolling-banner/css/scrolling-banner.css

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'led_counter-7';
+  src: url('fonts/led_counter-7.ttf') format('truetype');
+}
+#scrollingBannerContainer {
+  z-index: 500;
+  position: fixed;
+  top: 30px;
+  left: -100%;
+  width: 70%;
+  height: 75px;
+  background: linear-gradient(to right, black, #800000);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 30px) 100%, 0 100%);
+}
+#scrollingBannerContainer #scrollingBannerMessage {
+  width: 100%;
+  color: limegreen;
+  font-family: 'led_counter-7', monospace;
+  font-size: 64px;
+  white-space: nowrap;
+  display: inline-block;
+  position: absolute;
+  animation: scrolling 10s linear infinite;
+}
+@keyframes scrolling {
+  0% {
+    transform: translateX(100%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}

modules/scrolling-banner/css/scrolling-banner.less

@@ -0,0 +1,40 @@
+// out: scrolling-banner.css, sourcemap: false, compress: false
+
+@font-face {
+  font-family: 'led_counter-7';
+  src: url('fonts/led_counter-7.ttf') format('truetype');
+}
+
+#scrollingBannerContainer {
+  z-index: 500;
+  position: fixed;
+  top: 30px;
+  left: -100%;
+  width: 70%;
+  height: 75px;
+  background: linear-gradient(to right, black, #800000);
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  clip-path: polygon( 0 0, 100% 0, calc(100% - 30px) 100%, 0 100% );
+  
+  #scrollingBannerMessage {
+    width: 100%;
+    color: limegreen;
+    font-family: 'led_counter-7', monospace;
+    font-size: 64px;
+    white-space: nowrap;
+    display: inline-block;
+    position: absolute;
+    animation: scrolling 10s linear infinite;
+  }
+
+  @keyframes scrolling {
+    0% {
+      transform: translateX(100%);
+    }
+    100% {
+      transform: translateX(-100%);
+    }
+  }
+}

modules/scrolling-banner/scrolling-banner.js

@@ -0,0 +1,50 @@
+;(function() {
+  const moduleUrl = window.getModuleUrl(); 
+  loadCSSModule('overlay-scrollingbanner-css', moduleUrl + '/css/scrolling-banner.css');
+
+	function initModule() {
+		const container = document.getElementById('mainContainer') || document.body;
+		if (!document.getElementById('scrollingBannerContainer')) {
+			const scrollingBannerContainer = document.createElement('div');
+			scrollingBannerContainer.id = 'scrollingBannerContainer';
+
+			const scrollingBannerMessage = document.createElement('div');
+			scrollingBannerMessage.id = 'scrollingBannerMessage';
+      scrollingBannerMessage.innerText = 'Bienvenue sur le stream !'
+
+      scrollingBannerContainer.appendChild(scrollingBannerMessage);
+			container.appendChild(scrollingBannerContainer);
+		}
+  }
+  initModule();
+
+  if (window.SBdispatcher) {
+    SBdispatcher.on('stream-scrollingbanner', data => {
+      showAnnounce(data.message);
+    });
+    SBdispatcher.on('stream-scrollingbanner-hide', () => {
+      hideAnnounce();
+    });
+  }
+
+  function showAnnounce(message = "") {
+    const container = document.getElementById('scrollingBannerContainer');
+    const announceText = document.getElementById('scrollingBannerMessage');
+
+    if (message.length > 0) {
+      announceText.innerText = message;
+    }
+    container._positionDivHandler = () => positionDiv(container);
+    container.addEventListener('animationend', container._positionDivHandler);
+    container.style.animation = "slide-in-left 2s ease forwards";
+  }
+
+  function hideAnnounce() {
+    const container = document.getElementById('scrollingBannerContainer');
+    container._positionDivHandler = () => positionDiv(container);
+    container.addEventListener('animationend', container._positionDivHandler);
+    container.style.animation = "slide-out-left 2s ease forwards";
+  }  
+
+})();
+