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

Added random and individual queuing from playlists.

Browse source
This commit is contained in:
rainbow napkin 2025-04-05 15:53:07 -04:00
parent e61d9deb52
commit e629c63b2c
6 changed files with 244 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

71
www/js/channel/panels/queuePanel/playlistManager.js
View file

@ -151,7 +151,6 @@ class playlistManager{
//Create playlist title caret
this.playlistTitleCaret = document.createElement('i');
//If this is supposed to be open
if(this.openMap.get(this.playlist.name)){
//Set class accordingly
@ -268,6 +267,7 @@ class playlistManager{
this.playlistAddURLButton.addEventListener('click', this.addURL.bind(this));
this.playlistDefaultTitlesButton.addEventListener('click', this.editDefaultTitles.bind(this));
this.playlistRenameButton.addEventListener('click', this.renamePlaylist.bind(this));
this.playlistQueueRandomButton.addEventListener('click', this.queueRandom.bind(this));
this.playlistQueueAllButton.addEventListener('click', this.queueAll.bind(this));
this.playlistDeleteButton.addEventListener('click', this.deletePlaylist.bind(this));
}
@ -289,42 +289,38 @@ class playlistManager{
for(let mediaIndex in this.playlist.media){
//Grab media object from playlist
const media = this.playlist.media[mediaIndex];
this.media = this.playlist.media[mediaIndex];
//Sanatize title text
const title = utils.unescapeEntities(this.media.title);
//Create media div
const mediaDiv = document.createElement('div');
//Set class
mediaDiv.classList.add('queue-playlist-media-div');
//Inject title
mediaDiv.title = title;
//If this isn't our first rodeo
if(mediaIndex != 0){
mediaDiv.classList.add('not-first');
}
//Create media title
const mediaTitle = document.createElement('p');
//Set class
mediaTitle.classList.add('queue-playlist-media-title');
//Inject text content
mediaTitle.innerText = utils.unescapeEntities(media.title);
mediaTitle.innerText = title;
const deleteMediaIcon = document.createElement('i');
//set class
deleteMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-delete-icon', 'danger-text', 'bi-trash-fill');
//Set title
deleteMediaIcon.title = 'Delete media from playlist';
//Set dataset
//It's probably more effecient to set this at mediaContainer level, but I don't want to crawl multiple parents later on
deleteMediaIcon.dataset['playlist'] = this.playlist.name;
deleteMediaIcon.dataset['uuid'] = media.uuid;
//Render out media controls
this.renderMediaControls();
//Append items to media div
mediaDiv.appendChild(mediaTitle);
mediaDiv.appendChild(deleteMediaIcon);
mediaDiv.appendChild(this.mediaControlSpan);
//Handle input event listeners
deleteMediaIcon.addEventListener('click', this.deleteMedia.bind(this));
//Append media div to media container
this.mediaContainer.appendChild(mediaDiv);
@ -334,6 +330,39 @@ class playlistManager{
this.mediaContainer;
}
renderMediaControls(){
//Create media control span
this.mediaControlSpan = document.createElement('span');
//Set it's class
this.mediaControlSpan.classList.add('queue-playlist-media-control-span');
//Set dataset
this.mediaControlSpan.dataset['playlist'] = this.playlist.name;
this.mediaControlSpan.dataset['uuid'] = this.media.uuid;
//Create Queue Media icon
const queueMediaIcon = document.createElement('i');
//set class
queueMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-queue-icon', 'bi-play-circle');
//Set title
queueMediaIcon.title = (`Queue '${this.media.title}'`);
//Create delete media icon
const deleteMediaIcon = document.createElement('i');
//set class
deleteMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-delete-icon', 'danger-text', 'bi-trash-fill');
//Set title
deleteMediaIcon.title = `Delete '${this.media.title}' from playlist '${this.playlist.name}'`;
//Append items to media control span
this.mediaControlSpan.appendChild(queueMediaIcon);
this.mediaControlSpan.appendChild(deleteMediaIcon);
//Handle input event listeners
queueMediaIcon.addEventListener('click', this.queueMedia.bind(this));
deleteMediaIcon.addEventListener('click', this.deleteMedia.bind(this));
}
//I'd rather make this a class function but it's probably cleaner to not have to parent crawl
toggleMedia(event){
//Grab playlist title caret
@ -404,12 +433,20 @@ class playlistManager{
this.client.socket.emit('queueChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']});
}
queueMedia(event){
this.client.socket.emit('queueFromChannelPlaylist',{playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']});
}
queueRandom(event){
this.client.socket.emit('queueRandomFromChannelPlaylist',{playlist: event.target.parentNode.dataset['playlist']});
}
deletePlaylist(event){
this.client.socket.emit('deleteChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']});
}
deleteMedia(event){
this.client.socket.emit('deleteChannelPlaylistMedia', {playlist: event.target.dataset['playlist'], uuid: event.target.dataset['uuid']});
this.client.socket.emit('deleteChannelPlaylistMedia', {playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']});
}
}