From 92edd74aaa92e665c2da5fde9adb3876ee4582c0 Mon Sep 17 00:00:00 2001
From: rainbow napkin <ourforest@tuta.io>
Date: Sun, 18 May 2025 19:12:42 -0400
Subject: [PATCH] Imrpoved UX in order to prepare for pushback mode.

---
 src/views/partial/panels/queue.ejs            |  8 +++
 .../channel/panels/queuePanel/queuePanel.js   | 60 +++++++++++++++----
 2 files changed, 56 insertions(+), 12 deletions(-)

diff --git a/src/views/partial/panels/queue.ejs b/src/views/partial/panels/queue.ejs
index c81a134..fb2484e 100644
--- a/src/views/partial/panels/queue.ejs
+++ b/src/views/partial/panels/queue.ejs
@@ -42,6 +42,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
                 <button id="queue-at-button" class="positive-button">Queue At...</button>
             </div>
         </div>
+        <div id="queue-live-prompts" style="display: none;">
+            <div class="panel-control-prompt control-prompt">
+                <%# Probably not the cleanest way to do this but fuggit %>
+                <input placeholder="Livestream Name..." id="queue-live-prompts-name-input" class="control-prompt">
+                <button id="queue-live-prompts-overwrite-button" data-mode="overwrite" title="Go Live, over-writing any media scheduled during the live stream." class="danger-button">Go Live (Overwrite)</button>
+                <button id="queue-live-prompts-pushback-button" data-mode="pushback" title="Go Live, pushing-back any media scheduled during, or after the live steam." class="danger-button">Go Live (Pushback)</button>
+            </div>
+        </div>
         <div id="queue-playlist-prompts" style="display: none;">
             <span class="queue-playlist-label-span interactive" id="queue-add-playlist-span">
                 <i class="bi-plus" id="queue-add-playlist-icon"></i>
diff --git a/www/js/channel/panels/queuePanel/queuePanel.js b/www/js/channel/panels/queuePanel/queuePanel.js
index e2c7be4..49a8540 100644
--- a/www/js/channel/panels/queuePanel/queuePanel.js
+++ b/www/js/channel/panels/queuePanel/queuePanel.js
@@ -72,6 +72,7 @@ class queuePanel extends panelObj{
 
         //Get control divs
         this.addMediaDiv = this.panelDocument.querySelector('#queue-media-prompts');
+        this.goLiveDiv = this.panelDocument.querySelector('#queue-live-prompts');
         this.queueDateDiv = this.panelDocument.querySelector('#queue-control-date');
         this.playlistDiv = this.panelDocument.querySelector('#queue-playlist-prompts');
 
@@ -81,6 +82,10 @@ class queuePanel extends panelObj{
         this.addMediaNamePrompt = this.panelDocument.querySelector('#media-name-input');
         this.queueLastButton = this.panelDocument.querySelector('#queue-last-button');
         this.queueAtButton = this.panelDocument.querySelector('#queue-at-button');
+        //Go Live
+        this.goLiveNamePrompt = this.panelDocument.querySelector("#queue-live-prompts-name-input");
+        this.goLiveOverwriteButton = this.panelDocument.querySelector("#queue-live-prompts-overwrite-button");
+        this.goLivePushbackButton = this.panelDocument.querySelector("#queue-live-prompts-pushback-button");
         //Date Queue date
         this.queueDateDecrement = this.panelDocument.querySelector('#queue-control-date-decrement');
         this.queueDateIncrement = this.panelDocument.querySelector('#queue-control-date-increment');
@@ -113,8 +118,8 @@ class queuePanel extends panelObj{
         //Render queue should be called within an arrow function so that it's called with default parameters, and not handed an event as a date
         this.client.socket.on("clientMetadata", () => {this.renderQueue();});
         this.client.socket.on("queue", () => {this.renderQueue();});
-        this.client.socket.on("start", () => {this.renderQueue();});
-        this.client.socket.on("end", () => {this.renderQueue();});
+        this.client.socket.on("start", this.handleStart.bind(this));
+        this.client.socket.on("end", this.handleEnd.bind(this));
         this.client.socket.on("lock", this.handleScheduleLock.bind(this));
         this.client.socket.on("error", this.handleQueueError.bind(this));
     }
@@ -128,7 +133,7 @@ class queuePanel extends panelObj{
 
         //control bar controls
         this.addMediaButton.addEventListener('click', this.toggleAddMedia.bind(this));
-        this.goLiveButton.addEventListener('click', this.goLive.bind(this));
+        this.goLiveButton.addEventListener('click', this.toggleGoLive.bind(this));
         this.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));
         this.queueDateButton.addEventListener('click', this.toggleDateControl.bind(this));
         this.playlistMenuButton.addEventListener('click', this.togglePlaylistDiv.bind(this));
@@ -139,6 +144,9 @@ class queuePanel extends panelObj{
         //Add Media
         this.queueLastButton.addEventListener('click', this.queueLast.bind(this))
         this.queueAtButton.addEventListener('click', this.queueAt.bind(this))
+        //Go Live
+        this.goLiveOverwriteButton.addEventListener('click', this.goLive.bind(this));
+        this.goLivePushbackButton.addEventListener('click', this.goLive.bind(this));
         //Queue Date
         this.queueDateDecrement.addEventListener('click', this.decrementDate.bind(this));
         this.queueDateIncrement.addEventListener('click', this.incrementDate.bind(this));
@@ -146,6 +154,25 @@ class queuePanel extends panelObj{
     }
 
     /* socket.io listeners */
+    handleStart(data){
+        //If we're starting an HLS Livestream
+        if(data.media != null && data.media.type == 'livehls'){
+            //Hide the 'goLive' controls
+            this.goLiveDiv.style.display = 'none';
+        }
+
+        this.renderQueue();
+    }
+
+    handleEnd(data){
+        //Reset Go Live button
+        this.goLiveButton.classList.replace('critical-danger-button', 'danger-button');
+        this.goLiveButton.classList.replace('bi-record', 'bi-record2');
+        this.goLiveButton.title = "Go Live";
+
+        this.renderQueue();
+    }
+
     handleScheduleLock(){
         //Get queue lock button icon
         const icon = this.queueLockButton.querySelector('i');
@@ -195,21 +222,31 @@ class queuePanel extends panelObj{
         }
     }
 
-    goLive(event){
+    toggleGoLive(event){
         //If we're not livestreaming
         if(client.player.mediaHandler.type != "livehls"){
-            //Start a livestream
-            client.socket.emit('goLive');
+            //If the div is hidden
+            if(this.goLiveDiv.style.display == 'none'){
+                //Show the div
+                this.goLiveDiv.style.display = '';
+            }else{
+                //Hide the div
+                this.goLiveDiv.style.display = 'none';
+            }
         //Otherwise
         }else{
+            //Hide the div, if it isn't already
+            this.goLiveDiv.style.display = 'none';
+
             //Stop the livestream
             client.socket.emit('stop');
-
-            //Reset Go Live button
-            this.goLiveButton.classList.replace('critical-danger-button', 'danger-button');
-            this.goLiveButton.classList.replace('bi-record', 'bi-record2');
-            this.goLiveButton.title = "Go Live";
         }
+
+    }
+
+    goLive(event){
+        //Start a livestream
+        client.socket.emit('goLive',{title: this.goLiveNamePrompt.value, mode: event.target.dataset['mode']});
     }
 
     lockScroll(event, jumpToDay = true){
@@ -1206,7 +1243,6 @@ class queuePanel extends panelObj{
     }
 
     getMediaEnd(media){
-        console.log(media);
         //If we have an early end
         if(media.earlyEnd != null){
             return media.startTime + (media.earlyEnd * 1000);