From 1dcc48ec2f0ecc2f7ae6c04e1edc47076a2b2351 Mon Sep 17 00:00:00 2001
From: Moe <github@m03.ca>
Date: Sat, 18 Sep 2021 23:34:55 -0700
Subject: [PATCH] add streamCarousel to initial page

---
 web/assets/css/bs5.streamCarousel.css    | 19 +++++++
 web/assets/js/bs5.streamCarousel.js      | 68 ++++++++++++++++++++++++
 web/pages/blocks/home/initial.ejs        |  1 +
 web/pages/blocks/home/streamCarousel.ejs |  3 ++
 4 files changed, 91 insertions(+)
 create mode 100644 web/assets/css/bs5.streamCarousel.css
 create mode 100644 web/assets/js/bs5.streamCarousel.js
 create mode 100644 web/pages/blocks/home/streamCarousel.ejs

diff --git a/web/assets/css/bs5.streamCarousel.css b/web/assets/css/bs5.streamCarousel.css
new file mode 100644
index 00000000..468ef057
--- /dev/null
+++ b/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%;
+}
diff --git a/web/assets/js/bs5.streamCarousel.js b/web/assets/js/bs5.streamCarousel.js
new file mode 100644
index 00000000..3ecc9118
--- /dev/null
+++ b/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()
+    })
+})
diff --git a/web/pages/blocks/home/initial.ejs b/web/pages/blocks/home/initial.ejs
index 33815455..76591a9f 100644
--- a/web/pages/blocks/home/initial.ejs
+++ b/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>
diff --git a/web/pages/blocks/home/streamCarousel.ejs b/web/pages/blocks/home/streamCarousel.ejs
new file mode 100644
index 00000000..67a9157b
--- /dev/null
+++ b/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>