cleaner stream carousel operation

web/assets/css/bs5.streamCarousel.css

@@ -1,11 +1,25 @@
 #stream-carousel{
     overflow: hidden;
     height: 400px;
+    position: relative;
 }
 #stream-carousel iframe{
     width: 100%;
     height: 100%;
 }
+#stream-carousel .stream-carousel-inner{
+    width: 100%;
+    height: 100%;
+}
+#stream-carousel .stream-carousel-label{
+    padding: 0.5rem 2rem;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    border-radius: 5px 0 0 0;
+    background: rgba(0,0,0,0.6);
+    color: #fff;
+}
 #stream-carousel .carousel-block {
     display: block;
     transition: 0.2s;

web/assets/js/bs5.streamCarousel.js

@@ -1,5 +1,7 @@
 $(document).ready(function(){
     var streamCarouselBlock = $('#stream-carousel')
+    var streamCarouselBlockInner = streamCarouselBlock.find('.stream-carousel-inner')
+    var streamCarouselBlockLabel = streamCarouselBlock.find('.stream-carousel-label')
     var loadedCarouselBlocks = []
     var changeTimer = null;
     var currentCarouselMonitorId = null;
@@ -10,10 +12,12 @@ $(document).ready(function(){
         var html = ``
         loadedCarouselBlocks = []
         $.each(loadedMonitors,function(id,monitor){
-            loadedCarouselBlocks.push(monitor.mid)
-            html += `<div data-mid="${monitor.mid}" class="carousel-block"><iframe></iframe></div>`
+            if(monitor.mode === 'start' || monitor.mode === 'record'){
+                loadedCarouselBlocks.push(monitor.mid)
+                html += `<div data-mid="${monitor.mid}" class="carousel-block"><iframe></iframe></div>`
+            }
         })
-        streamCarouselBlock.html(html)
+        streamCarouselBlockInner.html(html)
     }
     function clearCarouselFrames(){
         $.each(loadedCarouselBlocks,function(n,monitorId){
@@ -22,14 +26,18 @@ $(document).ready(function(){
     }
     function loadMonitorInCarousel(monitorId){
         currentCarouselMonitorId = `${monitorId}`
-        streamCarouselBlock
+        var loadedMonitor = loadedMonitors[monitorId]
+        var monitorName = loadedMonitor.name
+        var monitorStatus = loadedMonitor.status
+        streamCarouselBlockLabel.html(`${monitorName} : ${monitorStatus}`)
+        streamCarouselBlockInner
             .find(`.carousel-block[data-mid="${monitorId}"]`)
             .addClass('active-block')
             .find('iframe')
             .attr('src',`${getApiPrefix(`embed`)}/${monitorId}/fullscreen|jquery|relative`)
     }
     function deloadMonitorInCarousel(monitorId){
-        streamCarouselBlock
+        streamCarouselBlockInner
             .find(`.carousel-block[data-mid="${monitorId}"]`)
             .removeClass('active-block')
             .find('iframe')
@@ -39,10 +47,14 @@ $(document).ready(function(){
         var oldId = `${currentCarouselMonitorId}`
         var nextId = loadedCarouselBlocks[loadedCarouselBlocks.indexOf(currentCarouselMonitorId) + 1]
         nextId = nextId ? nextId : loadedCarouselBlocks[0]
-        loadMonitorInCarousel(nextId)
-        setTimeout(function(){
-            deloadMonitorInCarousel(oldId)
-        },6000)
+        if(oldId === nextId){
+            clearInterval(changeTimer)
+        }else{
+            loadMonitorInCarousel(nextId)
+            setTimeout(function(){
+                deloadMonitorInCarousel(oldId)
+            },6000)
+        }
     }
     function setAutoChangerInterval(){
         stopAutoChangerInterval()

web/pages/blocks/home/streamCarousel.ejs

@@ -1,3 +1,10 @@
 <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>
+<div id="stream-carousel" class="my-3 bg-gradient-dark text-white rounded shadow-sm">
+    <div class="stream-carousel-inner">
+
+    </div>
+    <div class="stream-carousel-label">
+        <i class="fa fa-spinner fa-pulse"></i>
+    </div>
+</div>
 <script src="<%-window.libURL%>assets/js/bs5.streamCarousel.js"></script>