Started work on queue panel

src/app/channel/connectedUser.js

@@ -136,8 +136,11 @@ module.exports = class{
             }
         });
 
+        //Get schedule as a temporary array
+        const queue = Array.from(this.channel.queue.schedule);
+
         //Send off the metadata to our user's clients
-        this.emit("clientMetadata", {user: userObj, flairList});
+        this.emit("clientMetadata", {user: userObj, flairList, queue});
     }
 
     async sendSiteEmotes(){

src/app/channel/media/media.js

@@ -18,9 +18,10 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 const crypto = require('node:crypto');
 
 module.exports = class{
-    constructor(title, fileName, id, type, duration){
+    constructor(title, fileName, url, id, type, duration){
         this.title = title;
         this.fileName = fileName
+        this.url = url;
         this.id = id;
         this.type = type;
         this.duration = duration;

src/app/channel/media/queue.js

@@ -156,6 +156,9 @@ module.exports = class{
 
         //Replace the existing schedule map with our new one
         this.schedule = newSchedule;
+
+        //Broadcast the channel queue
+        this.broadcastQueue();
     }
 
     start(mediaObj){
@@ -285,4 +288,8 @@ module.exports = class{
         }
 
     }
+
+    broadcastQueue(){
+        this.server.io.in(this.channel.name).emit('queue',{queue: Array.from(this.schedule)})
+    }
 }

src/app/channel/media/queuedMedia.js

@@ -18,9 +18,9 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
 const media = require('./media');
 
 module.exports = class extends media{
-    constructor(title, fileName, id, type, duration, startTime){
+    constructor(title, fileName, url, id, type, duration, startTime){
         //Call derived constructor
-        super(title, fileName, id, type, duration);
+        super(title, fileName, url, id, type, duration);
         //Set media start time
         this.startTime = startTime;
 
@@ -32,7 +32,7 @@ module.exports = class extends media{
     //statics
     static fromMedia(media, startTime){
         //Create and return queuedMedia object from given media object and arguments 
-        return new this(media.title, media.fileName, media.id, media.type, media.duration, startTime);
+        return new this(media.title, media.fileName, media.url, media.id, media.type, media.duration, startTime);
     }
 
     //methods

src/controllers/panel/queueController.js

@@ -0,0 +1,20 @@
+/*Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>.*/
+
+//root index functions
+module.exports.get = async function(req, res){
+    res.render('partial/panels/queue', {});
+}

src/routers/panelRouter.js

@@ -23,6 +23,7 @@ const placeholderController = require("../controllers/panel/placeholderControlle
 const emoteController = require("../controllers/panel/emoteController");
 const popoutContainerController = require("../controllers/panel/popoutContainerController");
 const profileController = require("../controllers/panel/profileController");
+const queueController = require("../controllers/panel/queueController");
 //Validators
 const accountValidator = require("../validators/accountValidator");
 
@@ -34,5 +35,6 @@ router.get('/placeholder', placeholderController.get);
 router.get('/emote', emoteController.get);
 router.get('/popoutContainer', popoutContainerController.get);
 router.get('/profile', accountValidator.user(), profileController.get);
+router.get('/queue', queueController.get);
 
 module.exports = router;

src/utils/media/yanker.js

@@ -40,7 +40,7 @@ module.exports.yankMedia = async function(url){
             const link = `https://archive.org/download/${mediaInfo.metadata.identifier}/${file.name}`;
 
             //Create new media object from file info
-            mediaList.push(new media(name, name, link, 'ia', Number(file.length)));
+            mediaList.push(new media(name, name, link, link, 'ia', Number(file.length)));
         }
 
         //return media object list

src/views/channel.ejs

@@ -32,17 +32,25 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
     </body>
     <footer>
         <%- include('partial/scripts', {user}); %>
+        <%# 3rd party code %>
         <script src="/socket.io/socket.io.min.js"></script>
+        <%# 1st party code %>
+        <%# admin gunk %>
         <script src="/js/adminUtils.js"></script>
         <script src="/js/popup/banPopup.js"></script>
+        <%# command/chat processing %>
         <script src="/js/channel/commandPreprocessor.js"></script>
         <script src="/js/channel/chatPostprocessor.js"></script>
+        <%# client children %>
         <script src="/js/channel/chat.js"></script>
         <script src="/js/channel/userlist.js"></script>
         <script src="/js/channel/mediaHandler.js"></script>
         <script src="/js/channel/player.js"></script>
         <script src="/js/channel/cpanel.js"></script>
+        <%# panels %>
         <script src="/js/channel/panels/emotePanel.js"></script>
+        <script src="/js/channel/panels/queuePanel.js"></script>
+        <%# main client %>
         <script src="/js/channel/channel.js"></script>
     </footer>
 </html>

src/views/partial/panels/queue.ejs

@@ -0,0 +1,30 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
+<link rel="stylesheet" type="text/css" href="/css/panel/queue.css">
+<div id="queue-controls">
+    <span id="queue-media-prompts">
+        <div class="panel-control-prompt control-prompt">
+            <input placeholder="Media Link..." id="media-link-input" class="control-prompt">
+        </div>
+        <div class="panel-control-prompt control-prompt">
+            <%# Probably not the cleanest way to do this but fuggit %>
+            <input placeholder="Media Name..." id="media-name-input" class="control-prompt">
+            <button id="queue-last-button" class="positive-button">Queue Last</button>
+        </div>
+    </span>
+</div>
+<div id="queue">
+</div>

src/views/popoutContainer.ejs

@@ -20,7 +20,7 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
         <link rel="stylesheet" type="text/css" href="/css/panel.css">
         <title><%= instance %> - NULL_POPOUT</title>
     </head>
-    <body>
+    <body class="cpanel-body">
         <div class="cpanel-div" id="cpanel-div">
             <div class="cpanel-header-div" id="cpanel-header-div">
                 <i class="cpanel cpanel-header-icon cpanel-pin-icon bi-pin-angle-fill" id="cpanel-pin-icon"></i>