diff --git a/www/js/channel/panels/queuePanel/queuePanel.js b/www/js/channel/panels/queuePanel/queuePanel.js index 7eefc46..2bfd1c7 100644 --- a/www/js/channel/panels/queuePanel/queuePanel.js +++ b/www/js/channel/panels/queuePanel/queuePanel.js @@ -1233,6 +1233,11 @@ class queuePanel extends panelObj{ //Convert start epoch to JS date object const started = new Date(nowPlaying.startTime); + //If the date the scheduler is set to isn't within the livestream + if(!utils.isSameDate(started, this.day) && !utils.dateWithinRange(started, new Date(), this.day)){ + return; + } + //If this started today if(utils.isSameDate(this.day, started)){ //Set entryDiv top-border location based on start time @@ -1246,15 +1251,29 @@ class queuePanel extends panelObj{ entryDiv.style.top = `${this.offsetByDate(dawn)}px`; //Apply rest of the styling rules for items that started yestarday - entryDiv.classList.add('started-yesterday') + entryDiv.classList.add('started-yesterday'); } //Create entry title const entryTitle = document.createElement('p'); entryTitle.textContent = utils.unescapeEntities(nowPlaying.title); - //Set entry div bottom-border location based on current time, round to match time marker - entryDiv.style.bottom = `${Math.round(this.offsetByDate(date, true))}px` + + //If we're looking at today + if(utils.isSameDate(this.day, new Date())){ + //Set entry div bottom-border location based on current time, round to match time marker + entryDiv.style.bottom = `${Math.round(this.offsetByDate(date, true))}px`; + }else{ + //Get midnight + const dusk = new Date(); + dusk.setHours(23,59,59,999); + + //Set stream to continue to run into the next morning + entryDiv.style.bottom = `${Math.round(this.offsetByDate(dusk, true))}px`; + + //Apply rest of the styling rules for items that end after today + entryDiv.classList.add('ends-tomorrow'); + } //Assembly entryDiv entryDiv.appendChild(entryTitle); @@ -1285,8 +1304,11 @@ class queuePanel extends panelObj{ //Append entry div to queue container this.queueContainer.appendChild(entryDiv); }else{ - //Update existing entry, round offset to match time marker - staleEntry.style.bottom = `${Math.round(this.offsetByDate(date, true))}px` + //If we're looking at today + if(utils.isSameDate(this.day, new Date())){ + //Update existing entry, round offset to match time marker + staleEntry.style.bottom = `${Math.round(this.offsetByDate(date, true))}px` + } } //Keep tooltip date seperate so it re-calculates live duration properly