add streamCarousel to initial page

web/assets/css/bs5.streamCarousel.css

@@ -0,0 +1,19 @@
+#stream-carousel{
+    overflow: hidden;
+    height: 400px;
+}
+#stream-carousel iframe{
+    width: 100%;
+    height: 100%;
+}
+#stream-carousel .carousel-block {
+    display: block;
+    transition: 0.2s;
+    overflow: hidden;
+    width: 100%;
+    height: 0px;
+}
+#stream-carousel .carousel-block.active-block{
+    height: 100%;
+    width: 100%;
+}

web/assets/js/bs5.streamCarousel.js

@@ -0,0 +1,68 @@
+$(document).ready(function(){
+    var streamCarouselBlock = $('#stream-carousel')
+    var loadedCarouselBlocks = []
+    var changeTimer = null;
+    var currentCarouselMonitorId = null;
+    function drawCarouselSet(){
+        var html = ``
+        loadedCarouselBlocks = []
+        $.each(loadedMonitors,function(id,monitor){
+            loadedCarouselBlocks.push(monitor.mid)
+            html += `<div data-mid="${monitor.mid}" class="carousel-block"><iframe></iframe></div>`
+        })
+        streamCarouselBlock.html(html)
+    }
+    function clearCarouselFrames(){
+        $.each(loadedCarouselBlocks,function(n,monitorId){
+            deloadMonitorInCarousel(monitorId)
+        })
+    }
+    function loadMonitorInCarousel(monitorId){
+        currentCarouselMonitorId = `${monitorId}`
+        streamCarouselBlock
+            .find(`.carousel-block[data-mid="${monitorId}"]`)
+            .addClass('active-block')
+            .find('iframe')
+            .attr('src',`${getApiPrefix(`embed`)}/${monitorId}/fullscreen|jquery|relative|gui`)
+    }
+    function deloadMonitorInCarousel(monitorId){
+        streamCarouselBlock
+            .find(`.carousel-block[data-mid="${monitorId}"]`)
+            .removeClass('active-block')
+            .find('iframe')
+            .attr('src',`about:blank`)
+    }
+    function goNextCarouselBlock(){
+        var oldId = `${currentCarouselMonitorId}`
+        var nextId = loadedCarouselBlocks[loadedCarouselBlocks.indexOf(currentCarouselMonitorId) + 1]
+        nextId = nextId ? nextId : loadedCarouselBlocks[0]
+        loadMonitorInCarousel(nextId)
+        setTimeout(function(){
+            deloadMonitorInCarousel(oldId)
+        },3000)
+    }
+    function setAutoChangerInterval(){
+        stopAutoChangerInterval()
+        changeTimer = setInterval(goNextCarouselBlock,10000)
+    }
+    function stopAutoChangerInterval(){
+        clearTimeout(changeTimer)
+    }
+    function initCarousel(){
+        drawCarouselSet()
+        if(loadedCarouselBlocks[0]){
+            loadMonitorInCarousel(currentCarouselMonitorId || loadedCarouselBlocks[0].mid)
+            setAutoChangerInterval()
+        }
+    }
+    addOnTabReopen('initial', function () {
+        initCarousel()
+    })
+    addOnTabAway('initial', function () {
+        clearCarouselFrames()
+        stopAutoChangerInterval()
+    })
+    onDashboardReady(function(){
+        initCarousel()
+    })
+})

web/pages/blocks/home/initial.ejs

@@ -4,6 +4,7 @@
             <% include infoBlocks.ejs %>
         </div>
         <div class="col-md-9">
+            <% include streamCarousel.ejs %>
             <% include recentVideos.ejs %>
         </div>
     </div>

web/pages/blocks/home/streamCarousel.ejs

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="<%-window.libURL%>assets/css/bs5.streamCarousel.css">
+<div id="stream-carousel" class="my-3 p-30 bg-gradient-dark text-white rounded shadow-sm"></div>
+<script src="<%-window.libURL%>assets/js/bs5.streamCarousel.js"></script>