Fixed multi-day livestream rendering.

package.json

@@ -5,10 +5,10 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "@braintree/sanitize-url": "^7.1.1",
-    "altcha": "^1.0.7",
+    "altcha": "^2.3.0",
     "altcha-lib": "^1.2.0",
     "argon2": "^0.44.0",
-    "bcrypt": "^5.1.1",
+    "bcrypt": "^6.0.0",
     "bootstrap-icons": "^1.11.3",
     "connect-mongo": "^5.1.0",
     "cookie-parser": "^1.4.7",
@@ -20,8 +20,8 @@
     "hls.js": "^1.6.2",
     "mongoose": "^8.4.3",
     "node-cron": "^3.0.3",
-    "nodemailer": "^7.0.9",
-    "socket.io": "^4.8.1",
+    "nodemailer": "^8.0.7",
+    "socket.io": "^4.2.0",
     "youtube-dl-exec": "^3.0.20"
   },
   "scripts": {

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);
 
+
+            //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`
+                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,9 +1304,12 @@ class queuePanel extends panelObj{
             //Append entry div to queue container
             this.queueContainer.appendChild(entryDiv);
         }else{
+            //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
         function buildTooltip(date = new Date()){