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

Imrpoved UX in order to prepare for pushback mode.

Browse source
This commit is contained in:
rainbow napkin 2025-05-18 19:12:42 -04:00
parent 8c8b2a6f0b
commit 92edd74aaa
2 changed files with 56 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/views/partial/panels/queue.ejs
View file

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

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

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