Added Go-Live button to queue panel.
This commit is contained in:
parent
b0cca2c6fc
commit
89f78ae265
|
|
@ -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 id="queue-search-media" class="bi-search"></button>
|
||||
<button id="queue-scroll-lock" class="positive-button"><i class="bi-clock-fill"></i><i class="bi-arrows-expand"></i></button>
|
||||
<button id="queue-date" class="bi-calendar-fill"></button>
|
||||
<button id="queue-playlists" class="bi-list"></button>
|
||||
<button id="queue-clear" class="danger-button bi-trash-fill"></button>
|
||||
<button id="queue-lock" class="positive-button bi-unlock-fill"></button>
|
||||
<button title="Add Media" id="queue-add-media" class="bi-plus-lg"></button>
|
||||
<button title="Go Live" id="queue-go-live" class="bi-record2 danger-button"></button>
|
||||
<button title="Search Channel Schedule" id="queue-search-media" class="bi-search"></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 title="Date Picker" id="queue-date" class="bi-calendar-fill"></button>
|
||||
<button title="Playlists" id="queue-playlists" class="bi-list"></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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue