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

Continued work on playlist management UI

Browse source
This commit is contained in:
rainbow napkin 2025-03-31 08:35:30 -04:00
parent 1723e8ebd0
commit 3da88aea2a
3 changed files with 80 additions and 68 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
www/css/panel/queue.css
View file

@ -101,6 +101,7 @@ div.queue-entry{
display: flex;
justify-content: center;
align-items: center;
user-select: none;
}
div.queue-entry p{

1
www/css/theme/movie-night.css
View file

@ -414,6 +414,7 @@ select.panel-head-element{
color: var(--accent1);
box-shadow: 3px 3px 1px var(--bg1-alt0) inset;
border-radius: 1em;
border: var(--accent1) solid 1px;
}
#delete-account-popup-title, #delete-channel-popup-title{

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

@ -1095,7 +1095,6 @@ class playlistManager{
//Get playlist from data
const playlist = data[playlistIndex];
//--Create Base Structure---
//Create a new playlist div
const playlistDiv = document.createElement('div');
//Set it's class
@ -1115,86 +1114,97 @@ class playlistManager{
//Set classes
playlistSpan.classList.add('queue-playlist-span');
//--Create Labels---
//Create playlist label span
const playlistLabels = document.createElement('span');
//Set it's class
playlistLabels.classList.add('queue-playlist-labels-span');
//Create playlist title label
const playlistTitle = document.createElement('p');
//Set it's class
playlistTitle.classList.add('queue-playlist-title');
//Create playlist count label
const playlistCount = document.createElement('p');
//Set it's class
playlistCount.classList.add('queue-playlist-count');
//List video count
playlistCount.innerText = `Count: ${playlist.media.length}`;
//--Create Controls--
//Create playlist control span
const playlistControls = document.createElement('span');
//Set it's class
playlistControls.classList.add('queue-playlist-control-span');
//Unescape Sanatized Enteties and safely inject as plaintext
playlistTitle.innerText = utils.unescapeEntities(playlist.name);
//Create queue all button
const playlistQueueRandomButton = document.createElement('button');
//Set it's classes
playlistQueueRandomButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control');
//Inject text content
playlistQueueRandomButton.textContent = 'Queue Random';
//Create queue all button
const playlistQueueAllButton = document.createElement('button');
//Set it's classes
playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control');
//Inject text content
playlistQueueAllButton.textContent = 'Queue All';
//Create delete button
const playlistDeleteButton = document.createElement('button');
//Set it's classes
playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill');
//--Create Media Elements--
//Create Media Container Div
const mediaDiv = renderMedia();
//Append items to playlist labels span
playlistLabels.appendChild(playlistTitle);
playlistLabels.appendChild(playlistCount);
//Append items to playlist control span
playlistControls.appendChild(playlistQueueRandomButton);
playlistControls.appendChild(playlistQueueAllButton);
playlistControls.appendChild(playlistDeleteButton);
//Append items to playlist span
playlistSpan.appendChild(playlistLabels);
playlistSpan.appendChild(playlistControls);
//Append items to playlist entry line
playlistSpan.appendChild(renderLabels());
playlistSpan.appendChild(renderControls());
//Append items to playlist div
playlistDiv.appendChild(playlistSpan);
playlistDiv.appendChild(mediaDiv);
playlistDiv.appendChild(renderMedia());
//Append current playlist span to the channel playlist div
//Append current playlist div to the channel playlists div
this.channelPlaylistDiv.appendChild(playlistDiv);
//Define input event listeners
playlistQueueAllButton.addEventListener('click', queueAll);
playlistDeleteButton.addEventListener('click', deletePlaylist);
//aux rendering functions
function renderLabels(){
//Create playlist label span
const playlistLabels = document.createElement('span');
//Set it's class
playlistLabels.classList.add('queue-playlist-labels-span');
//Create playlist title label
const playlistTitle = document.createElement('p');
//Set it's class
playlistTitle.classList.add('queue-playlist-title');
//Unescape Sanatized Enteties and safely inject as plaintext
playlistTitle.innerText = utils.unescapeEntities(playlist.name);
//Create playlist count label
const playlistCount = document.createElement('p');
//Set it's class
playlistCount.classList.add('queue-playlist-count');
//List video count
playlistCount.innerText = `Count: ${playlist.media.length}`;
//Append items to playlist labels span
playlistLabels.appendChild(playlistTitle);
playlistLabels.appendChild(playlistCount);
//return playlistLabels
return playlistLabels;
}
function renderControls(){
//Create playlist control span
const playlistControls = document.createElement('span');
//Set it's class
playlistControls.classList.add('queue-playlist-control-span');
//Create queue all button
const playlistQueueRandomButton = document.createElement('button');
//Set it's classes
playlistQueueRandomButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control');
//Inject text content
playlistQueueRandomButton.textContent = 'Queue Random';
//Create queue all button
const playlistQueueAllButton = document.createElement('button');
//Set it's classes
playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control');
//Inject text content
playlistQueueAllButton.textContent = 'Queue All';
//Create delete button
const playlistDeleteButton = document.createElement('button');
//Set it's classes
playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill');
//Append items to playlist control span
playlistControls.appendChild(playlistQueueRandomButton);
playlistControls.appendChild(playlistQueueAllButton);
playlistControls.appendChild(playlistDeleteButton);
//Define input event listeners
playlistQueueAllButton.addEventListener('click', queueAll);
playlistDeleteButton.addEventListener('click', deletePlaylist);
return playlistControls;
}
function renderMedia(){
//Create media container div
const mediaContainer = document.createElement('div');
//Set classes
mediaContainer.classList.add('queue-playlist-media-div');
for(let media of playlist.media){
//Create media title
const mediaTitle = document.createElement('p');
//Set class
mediaTitle.classList.add('queue-playlist-media-title');
}
//return media container
return mediaContainer;
}