Added Go-Live button to queue panel.

src/views/partial/panels/queue.ejs

@@ -17,13 +17,14 @@ along with this program.  If not, see <https://www.gnu.org/licenses/>. %>
 <div id="queue-panel-layout-controller">
     <div id="queue-controls">
         <div id="queue-control-buttons">
-            <button id="queue-add-media" class="bi-plus-lg"></button>
+            <button title="Add Media" id="queue-add-media" class="bi-plus-lg"></button>
-            <button id="queue-search-media" class="bi-search"></button>
+            <button title="Go Live" id="queue-go-live" class="bi-record2 danger-button"></button>
-            <button id="queue-scroll-lock" class="positive-button"><i class="bi-clock-fill"></i><i class="bi-arrows-expand"></i></button>
+            <button title="Search Channel Schedule" id="queue-search-media" class="bi-search"></button>
-            <button id="queue-date" class="bi-calendar-fill"></button>
+            <button title="Autoscroll"id="queue-scroll-lock" class="positive-button"><i class="bi-clock-fill"></i><i class="bi-arrows-expand"></i></button>
-            <button id="queue-playlists" class="bi-list"></button>
+            <button title="Date Picker" id="queue-date" class="bi-calendar-fill"></button>
-            <button id="queue-clear" class="danger-button bi-trash-fill"></button>
+            <button title="Playlists" id="queue-playlists" class="bi-list"></button>
-            <button id="queue-lock" class="positive-button bi-unlock-fill"></button>
+            <button title="Delete Range" id="queue-clear" class="danger-button bi-trash-fill"></button>
+            <button title="Lock Schedule" id="queue-lock" class="positive-button bi-unlock-fill"></button>
         </div>
         <div id="queue-control-date" style="display: none">
             <i class="bi-caret-left" id="queue-control-date-decrement"></i>

www/css/theme/movie-night.css

@@ -161,13 +161,17 @@ textarea{
     color: var(--accent1);
 }
 
-.danger-button:hover{
+.danger-button:hover, .critical-danger-button, .critical-danger-button:hover{
     background-color: var(--danger0-alt1);
     color: var(--danger0-alt0);
     box-shadow: var(--danger-glow0);
 }
 
-.danger-button:active{
+.critical-danger-button:hover{
+    background-color: var(--danger0-alt2);
+}
+
+.danger-button:active, .critical-danger-button:active{
     background-color: var(--danger0-alt0);
     color: var(--accent0-alt0);
     box-shadow: var(--danger-glow0-alt1);
@@ -520,7 +524,7 @@ div.queue-entry.live {
     font-family: monospace;
 }
 
-#queue-control-buttons button:not(:hover, .danger-button, .positive-button){
+#queue-control-buttons button:not(:hover, .danger-button, .critical-danger-button, .positive-button){
     background-color: var(--bg2-alt1);
 }
 
@@ -578,7 +582,7 @@ div.archived p{
     color: var(--accent1-alt0);
 }
 
-.queue-playlist-control:not(.danger-text, .positive-button, .danger-button, :hover){
+.queue-playlist-control:not(.danger-text, .positive-button, .critical-danger-button, .danger-button, :hover){
     background-color: var(--bg1-alt0);
     color: var(--accent1);
 }

www/js/channel/mediaHandler.js

@@ -174,6 +174,8 @@ class rawFileBase extends mediaHandler{
     }
 
     destroyPlayer(){
+        //Stops playback
+        this.video.pause();
         //Remove player from page
         this.video.remove();
         //Run derived method
@@ -511,9 +513,6 @@ class hlsBase extends rawFileBase{
     constructor(client, player, media, type){
         //Call derived constructor
         super(client, player, media, type);
-
-        //Create property to hold HLS object
-        this.hls = null;
     }
 
     buildPlayer(){
@@ -533,6 +532,14 @@ class hlsBase extends rawFileBase{
         this.hls.on(Hls.Events.MANIFEST_PARSED, this.onMetadataLoad.bind(this));
     }
 
+    end(){
+        //Stop hls.js from loading any more of the stream
+        this.hls.stopLoad();
+
+        //Call derived method
+        super.end();
+    }
+
     onMetadataLoad(){
         //Call derived method
         super.onMetadataLoad();

www/js/channel/panels/queuePanel/queuePanel.js

@@ -63,6 +63,7 @@ class queuePanel extends panelObj{
 
         //Get main control buttons
         this.addMediaButton = this.panelDocument.querySelector('#queue-add-media');
+        this.goLiveButton = this.panelDocument.querySelector('#queue-go-live');
         this.scrollLockButton = this.panelDocument.querySelector('#queue-scroll-lock');
         this.queueDateButton = this.panelDocument.querySelector('#queue-date');
         this.playlistMenuButton = this.panelDocument.querySelector("#queue-playlists");
@@ -109,6 +110,7 @@ class queuePanel extends panelObj{
 
     defineListeners(){
         //Render queue when we receive a new copy of the queue data from the server
+        //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();});
@@ -126,6 +128,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.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));
         this.queueDateButton.addEventListener('click', this.toggleDateControl.bind(this));
         this.playlistMenuButton.addEventListener('click', this.togglePlaylistDiv.bind(this));
@@ -192,6 +195,23 @@ class queuePanel extends panelObj{
         }
     }
 
+    goLive(event){
+        //If we're not livestreaming
+        if(client.player.mediaHandler.type != "livehls"){
+            //Start a livestream
+            client.socket.emit('goLive');
+        //Otherwise
+        }else{
+            //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";
+        }
+    }
+
     lockScroll(event, jumpToDay = true){
         //If we're supposed to jump to the current day
         if(jumpToDay){
@@ -839,7 +859,7 @@ class queuePanel extends panelObj{
 
     renderInterval(date = new Date()){
         this.renderTimeMarker(date);
-        this.renderLiveStream(date);
+        this.renderLiveStream(date, true);
 
 
         //Clear update timer
@@ -966,7 +986,7 @@ class queuePanel extends panelObj{
         }
     }
 
-    renderLiveStream(date = new Date()){
+    renderLiveStream(date = new Date(), intervalRun = false){
         //Grab all live queue entries
         const staleEntry = this.queueContainer.querySelector('.queue-entry.live');
 
@@ -982,6 +1002,28 @@ class queuePanel extends panelObj{
             return;
         }
 
+        //If we haven't updated the Go-Live button yet
+        //This kinda needs to be done here since this might be opened mid-stream :P
+        if(this.goLiveButton.title != "Stop Stream"){
+            this.goLiveButton.classList.replace('danger-button', 'critical-danger-button');
+            this.goLiveButton.title = "Stop Stream";
+        }
+        
+
+        //If this was called by the timer function, and not some other queue-rendering related function
+        if(intervalRun){
+            //Though there is reason to run an if statement here since we dont want the latter over-writing the former every run...
+            //If we're showing the regular icon
+            if(this.goLiveButton.classList.contains('bi-record2')){
+                //Animated it with the other live icon
+                this.goLiveButton.classList.replace('bi-record2', 'bi-record');
+            //otherwise
+            }else{
+                //Show the standard one we always do
+                this.goLiveButton.classList.replace('bi-record', 'bi-record2');
+            }
+        }
+
         //Grab currently playing media
         const nowPlaying = client.player.mediaHandler.nowPlaying;