diff --git a/src/views/partial/panels/queue.ejs b/src/views/partial/panels/queue.ejs
index d069434..c81a134 100644
--- a/src/views/partial/panels/queue.ejs
+++ b/src/views/partial/panels/queue.ejs
@@ -17,13 +17,14 @@ along with this program. If not, see . %>
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 84b4564..8e17813 100644
--- a/www/css/theme/movie-night.css
+++ b/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);
}
diff --git a/www/js/channel/mediaHandler.js b/www/js/channel/mediaHandler.js
index ab92989..5432ebd 100644
--- a/www/js/channel/mediaHandler.js
+++ b/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();
diff --git a/www/js/channel/panels/queuePanel/queuePanel.js b/www/js/channel/panels/queuePanel/queuePanel.js
index 826b1da..1ef06c9 100644
--- a/www/js/channel/panels/queuePanel/queuePanel.js
+++ b/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;