diff --git a/web/assets/css/bs5.streamCarousel.css b/web/assets/css/bs5.streamCarousel.css index 468ef057..d2b18f76 100644 --- a/web/assets/css/bs5.streamCarousel.css +++ b/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; diff --git a/web/assets/js/bs5.streamCarousel.js b/web/assets/js/bs5.streamCarousel.js index af21b662..eaee83bc 100644 --- a/web/assets/js/bs5.streamCarousel.js +++ b/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 += `
` + if(monitor.mode === 'start' || monitor.mode === 'record'){ + loadedCarouselBlocks.push(monitor.mid) + html += `` + } }) - 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() diff --git a/web/pages/blocks/home/streamCarousel.ejs b/web/pages/blocks/home/streamCarousel.ejs index 67a9157b..6e22fae9 100644 --- a/web/pages/blocks/home/streamCarousel.ejs +++ b/web/pages/blocks/home/streamCarousel.ejs @@ -1,3 +1,10 @@ - +