rainbownapkin/canopy
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Added Go-Live button to queue panel.

Browse source
This commit is contained in:
rainbow napkin 2025-05-16 06:32:45 -04:00
parent b0cca2c6fc
commit 89f78ae265
4 changed files with 70 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

46
www/js/channel/panels/queuePanel/queuePanel.js
View file

@ -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;