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 += `
` + }) + 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 %>