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

Refactored/Beautified existing playlist managment UI code.

Browse source
This commit is contained in:
rainbow napkin 2025-04-04 06:10:32 -04:00
parent c3781d6259
commit c8c59feb7f
2 changed files with 238 additions and 201 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
www/css/global.css
View file

@ -81,6 +81,12 @@ div.dynamic-container, div.nested-dynamic-container{
margin: 0.5em 0; margin: 0.5em 0;
} }
button i{
/* Yeah I don't need event.target returning icons, thanks babe */
/* Granted most buttons should just hold the icon class themselves, some buttons with multiple icons in need this :P */
pointer-events: none;
}
/* Navbar */ /* Navbar */
#navbar{ #navbar{
display: flex; display: flex;

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

@ -80,198 +80,203 @@ class playlistManager{
//For every playlist sent down from the server //For every playlist sent down from the server
for(let playlistIndex in data){ for(let playlistIndex in data){
//Get playlist from data //Get playlist from data
const playlist = data[playlistIndex]; this.playlist = data[playlistIndex];
//Create a new playlist div //Create a new playlist div
const playlistDiv = document.createElement('div'); this.playlistDiv = document.createElement('div');
//Set it's class //Set it's class
playlistDiv.classList.add('queue-playlist-div'); this.playlistDiv.classList.add('queue-playlist-div');
//Set playlist div dataset //Set playlist div dataset
playlistDiv.dataset.name = playlist.name; this.playlistDiv.dataset.name = this.playlist.name;
//Create span to hold playlist entry line contents //Create span to hold playlist entry line contents
const playlistSpan = document.createElement('span'); this.playlistSpan = document.createElement('span');
//Set classes //Set classes
playlistSpan.classList.add('queue-playlist-span'); this.playlistSpan.classList.add('queue-playlist-span');
//If this isn't our first rodeo //If this isn't our first rodeo
if(playlistIndex != 0){ if(this.playlistIndex != 0){
//make note //make note
playlistSpan.classList.add('not-first'); this.playlistSpan.classList.add('not-first');
} }
//pre-render and keep this so we can use it later //Render out playlist entry contents
const mediaContainer = renderMedia(); this.renderLabels();
this.renderControls();
this.renderMedia();
//Append items to playlist entry line //Append entry items to playlist entry line
playlistSpan.appendChild((renderLabels.bind(this))()); this.playlistSpan.appendChild(this.playlistLabels);
playlistSpan.appendChild((renderControls.bind(this))()); this.playlistSpan.appendChild(this.playlistControls);
//Append items to playlist div //Append entry line and contents to playlist div
playlistDiv.appendChild(playlistSpan); this.playlistDiv.appendChild(this.playlistSpan);
playlistDiv.appendChild(mediaContainer); this.playlistDiv.appendChild(this.mediaContainer);
//Append current playlist div to the channel playlists div //Append current playlist div to the channel playlists div
this.channelPlaylistDiv.appendChild(playlistDiv); this.channelPlaylistDiv.appendChild(this.playlistDiv);
}
}
//aux rendering functions //aux rendering functions
function renderLabels(){ renderLabels(){
//Create playlist label span //Create playlist label span
const playlistLabels = document.createElement('span'); this.playlistLabels = document.createElement('span');
//Set it's class //Set it's class
playlistLabels.classList.add('queue-playlist-labels-span'); this.playlistLabels.classList.add('queue-playlist-labels-span');
//create playlist title span //create playlist title span
const playlistTitleSpan = document.createElement('span'); this.playlistTitleSpan = document.createElement('span');
//Set class //Set class
playlistTitleSpan.classList.add('queue-playlist-title-span', 'interactive'); this.playlistTitleSpan.classList.add('queue-playlist-title-span', 'interactive');
//Create playlist title caret //Create playlist title caret
const playlistTitleCaret = document.createElement('i'); this.playlistTitleCaret = document.createElement('i');
//Set class //Set class
playlistTitleCaret.classList.add('bi-caret-right-fill'); this.playlistTitleCaret.classList.add('bi-caret-right-fill');
//Create playlist title label //Create playlist title label
const playlistTitle = document.createElement('p'); this.playlistTitle = document.createElement('p');
//Set it's class //Set it's class
playlistTitle.classList.add('queue-playlist-title'); this.playlistTitle.classList.add('queue-playlist-title');
//Unescape Sanatized Enteties and safely inject as plaintext //Unescape Sanatized Enteties and safely inject as plaintext
playlistTitle.innerText = utils.unescapeEntities(playlist.name); this.playlistTitle.innerText = utils.unescapeEntities(this.playlist.name);
//Construct playlist title span //Construct playlist title span
playlistTitleSpan.appendChild(playlistTitleCaret); this.playlistTitleSpan.appendChild(this.playlistTitleCaret);
playlistTitleSpan.appendChild(playlistTitle); this.playlistTitleSpan.appendChild(this.playlistTitle);
//Create playlist count label //Create playlist count label
const playlistCount = document.createElement('p'); this.playlistCount = document.createElement('p');
//Set it's class //Set it's class
playlistCount.classList.add('queue-playlist-count'); this.playlistCount.classList.add('queue-playlist-count');
//List video count //List video count
playlistCount.innerText = `Count: ${playlist.media.length}`; this.playlistCount.innerText = `Count: ${this.playlist.media.length}`;
//Append items to playlist labels span //Append items to playlist labels span
playlistLabels.appendChild(playlistTitleSpan); this.playlistLabels.appendChild(this.playlistTitleSpan);
playlistLabels.appendChild(playlistCount); this.playlistLabels.appendChild(this.playlistCount);
//Define input listeners //Define input listeners
playlistTitleSpan.addEventListener('click', toggleMedia.bind(this)); this.playlistTitleSpan.addEventListener('click', toggleMedia.bind(this));
//return playlistLabels
return playlistLabels;
//I'd rather make this a class function but it's probably cleaner to not have to parent crawl
function toggleMedia(){ function toggleMedia(){
//If the div is hidden //If the div is hidden
if(mediaContainer.style.display == 'none'){ if(this.mediaContainer.style.display == 'none'){
//Light up the button //Light up the button
playlistTitleSpan.classList.add('positive'); this.playlistTitleSpan.classList.add('positive');
//Flip the caret //Flip the caret
playlistTitleCaret.classList.replace('bi-caret-right-fill', 'bi-caret-down-fill'); this.playlistTitleCaret.classList.replace('bi-caret-right-fill', 'bi-caret-down-fill');
//Show the div //Show the div
mediaContainer.style.display = ''; this.mediaContainer.style.display = '';
}else{ }else{
//Unlight the button //Unlight the button
playlistTitleSpan.classList.remove('positive'); this.playlistTitleSpan.classList.remove('positive');
//Flip the caret //Flip the caret
playlistTitleCaret.classList.replace('bi-caret-down-fill', 'bi-caret-right-fill'); this.playlistTitleCaret.classList.replace('bi-caret-down-fill', 'bi-caret-right-fill');
//Hide the div //Hide the div
mediaContainer.style.display = 'none'; this.mediaContainer.style.display = 'none';
} }
} }
} }
function renderControls(){ renderControls(){
//Create playlist control span //Create playlist control span
const playlistControls = document.createElement('span'); this.playlistControls = document.createElement('span');
//Set it's class //Set it's class
playlistControls.classList.add('queue-playlist-control-span'); this.playlistControls.classList.add('queue-playlist-control-span');
//Set dataset
this.playlistControls.dataset['playlist'] = this.playlist.name;
//Create queue all button //Create queue all button
const playlistQueueRandomButton = document.createElement('button'); this.playlistQueueRandomButton = document.createElement('button');
//Set it's classes //Set it's classes
playlistQueueRandomButton.classList.add('queue-playlist-queue-random-button', 'queue-playlist-control'); this.playlistQueueRandomButton.classList.add('queue-playlist-queue-random-button', 'queue-playlist-control');
//Inject text content //Inject text content
playlistQueueRandomButton.textContent = 'Random'; this.playlistQueueRandomButton.textContent = 'Random';
//Set title //Set title
playlistQueueRandomButton.title = 'Queue Random Item from Playlist'; this.playlistQueueRandomButton.title = 'Queue Random Item from Playlist';
//Create queue all button //Create queue all button
const playlistQueueAllButton = document.createElement('button'); this.playlistQueueAllButton = document.createElement('button');
//Set it's classes //Set it's classes
playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control'); this.playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control');
//Inject text content //Inject text content
playlistQueueAllButton.textContent = 'All'; this.playlistQueueAllButton.textContent = 'All';
//Set title //Set title
playlistQueueAllButton.title = 'Queue Entire Playlist'; this.playlistQueueAllButton.title = 'Queue Entire Playlist';
//Create add from URL button //Create add from URL button
const playlistAddURLButton = document.createElement('button'); this.playlistAddURLButton = document.createElement('button');
//Set it's classes //Set it's classes
playlistAddURLButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'positive-button'); this.playlistAddURLButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'positive-button');
//Set Tile //Set Tile
playlistAddURLButton.title = 'Add To Playlist From URL' this.playlistAddURLButton.title = 'Add To Playlist From URL'
//Create playlist icons (we're using two so we're putting them inside the button :P) //Create playlist icons (we're using two so we're putting them inside the button :P)
const playlistAddIcon = document.createElement('i'); this.playlistAddIcon = document.createElement('i');
const playlistLinkIcon = document.createElement('i'); this.playlistLinkIcon = document.createElement('i');
//set classes //set classes
playlistAddIcon.classList.add('bi-plus-lg'); this.playlistAddIcon.classList.add('bi-plus-lg');
playlistLinkIcon.classList.add('bi-link-45deg'); this.playlistLinkIcon.classList.add('bi-link-45deg');
playlistAddURLButton.appendChild(playlistAddIcon); this.playlistAddURLButton.appendChild(this.playlistAddIcon);
playlistAddURLButton.appendChild(playlistLinkIcon); this.playlistAddURLButton.appendChild(this.playlistLinkIcon);
//Create default titles button //Create default titles button
const playlistDefaultTitlesButton = document.createElement('button'); this.playlistDefaultTitlesButton = document.createElement('button');
//Set classes //Set classes
playlistDefaultTitlesButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-tags-fill', 'positive-button'); this.playlistDefaultTitlesButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-tags-fill', 'positive-button');
//Set title //Set title
playlistDefaultTitlesButton.title = 'Change Default Titles' this.playlistDefaultTitlesButton.title = 'Change Default Titles'
//Set dataset
this.playlistDefaultTitlesButton.dataset['titles'] = JSON.stringify(this.playlist.defaultTitles);
//Create rename button //Create rename button
const playlistRenameButton = document.createElement('button'); this.playlistRenameButton = document.createElement('button');
//Set it's classes //Set it's classes
playlistRenameButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-input-cursor-text', 'positive-button'); this.playlistRenameButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-input-cursor-text', 'positive-button');
//Set title //Set title
playlistRenameButton.title = 'Rename Playlist' this.playlistRenameButton.title = 'Rename Playlist'
//Create delete button //Create delete button
const playlistDeleteButton = document.createElement('button'); this.playlistDeleteButton = document.createElement('button');
//Set it's classes //Set it's classes
playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill'); this.playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill');
//Set title //Set title
playlistDeleteButton.title = 'Delete Playlist' this.playlistDeleteButton.title = 'Delete Playlist'
//Append items to playlist control span //Append items to playlist control span
playlistControls.appendChild(playlistQueueRandomButton); this.playlistControls.appendChild(this.playlistQueueRandomButton);
playlistControls.appendChild(playlistQueueAllButton); this.playlistControls.appendChild(this.playlistQueueAllButton);
playlistControls.appendChild(playlistAddURLButton); this.playlistControls.appendChild(this.playlistAddURLButton);
playlistControls.appendChild(playlistDefaultTitlesButton); this.playlistControls.appendChild(this.playlistDefaultTitlesButton);
playlistControls.appendChild(playlistRenameButton); this.playlistControls.appendChild(this.playlistRenameButton);
playlistControls.appendChild(playlistDeleteButton); this.playlistControls.appendChild(this.playlistDeleteButton);
//Define input event listeners //Define input event listeners
playlistAddURLButton.addEventListener('click', (event)=>{new addURLPopup(event, playlist.name, this.client, this.queuePanel.ownerDoc)}); this.playlistAddURLButton.addEventListener('click', this.addURL.bind(this));
playlistDefaultTitlesButton.addEventListener('click', (event)=>{new defaultTitlesPopup(event, playlist.name, playlist.defaultTitles, this.client, this.queuePanel.ownerDoc)}); this.playlistDefaultTitlesButton.addEventListener('click', this.editDefaultTitles.bind(this));
playlistRenameButton.addEventListener('click', (event)=>{new renamePopup(event, playlist.name, this.client, this.queuePanel.ownerDoc)}); this.playlistRenameButton.addEventListener('click', this.renamePlaylist.bind(this));
playlistQueueAllButton.addEventListener('click', queueAll); this.playlistQueueAllButton.addEventListener('click', this.queueAll.bind(this));
playlistDeleteButton.addEventListener('click', deletePlaylist); this.playlistDeleteButton.addEventListener('click', this.deletePlaylist.bind(this));
return playlistControls;
} }
function renderMedia(){ renderMedia(){
//Create media container div //Create media container div
const mediaContainer = document.createElement('div'); this.mediaContainer = document.createElement('div');
//Set classes //Set classes
mediaContainer.classList.add('queue-playlist-media-container-div'); this.mediaContainer.classList.add('queue-playlist-media-container-div');
//Auto-hide media container //Auto-hide media container
mediaContainer.style.display = 'none'; this.mediaContainer.style.display = 'none';
for(let mediaIndex in playlist.media){ for(let mediaIndex in this.playlist.media){
//Grab media object from playlist //Grab media object from playlist
const media = playlist.media[mediaIndex]; const media = this.playlist.media[mediaIndex];
//Create media div //Create media div
const mediaDiv = document.createElement('div'); const mediaDiv = document.createElement('div');
@ -294,22 +299,48 @@ class playlistManager{
mediaDiv.appendChild(mediaTitle); mediaDiv.appendChild(mediaTitle);
//Append media div to media container //Append media div to media container
mediaContainer.appendChild(mediaDiv); this.mediaContainer.appendChild(mediaDiv);
} }
//return media container //return media container
return mediaContainer; this.mediaContainer;
}
addURL(event){
new addURLPopup(
event,
event.target.parentNode.dataset['playlist'],
this.client,
this.queuePanel.ownerDoc
);
} }
//playlist control functions //playlist control functions
function queueAll(){ editDefaultTitles(event){
client.socket.emit('queueChannelPlaylist', {playlist: playlist.name}); new defaultTitlesPopup(
event,
event.target.parentNode.dataset['playlist'],
JSON.parse(event.target.dataset['titles']),
this.client,
this.queuePanel.ownerDoc
);
} }
function deletePlaylist(){ renamePlaylist(event){
client.socket.emit('deleteChannelPlaylist', {playlist: playlist.name}); new renamePopup(
event,
event.target.parentNode.dataset['playlist'],
this.client,
this.queuePanel.ownerDoc
);
} }
queueAll(event){
client.socket.emit('queueChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']});
} }
deletePlaylist(event){
client.socket.emit('deleteChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']});
} }
} }