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

Fixed issues with IA utils, continued work on playlist mgmt UI

Browse source
This commit is contained in:
rainbow napkin 2025-04-01 08:47:34 -04:00
parent 3da88aea2a
commit f4db10fbc3
7 changed files with 142 additions and 56 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -164,10 +164,7 @@ div.dragging-queue-entry{
.queue-playlist-span{
justify-content: space-between;
}
.queue-playlist-div{
padding: 0 0.15em;
padding: 0 0.2em;
margin: 0 0.15em;
}
@ -182,10 +179,27 @@ div.dragging-queue-entry{
user-select: none;
}
.queue-playlist-title-span{
text-wrap: nowrap;
display: flex;
flex-direction: row;
}
.queue-playlist-count{
font-size: 0.8em;
}
.queue-playlist-media-container-div{
resize: vertical;
overflow: scroll;
height: 5em;
}
.queue-playlist-media-container-div p{
margin: 0;
font-size: 0.8em;
}
#queue-create-playlist-popup-div{
display: flex;
flex-direction: column;

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

@ -546,7 +546,13 @@ div.archived p{
border-block: var(--accent1) solid 1px;
}
.not-first-queue-playlist-div{
.queue-playlist-media-container-div{
background-color: var(--bg1-alt0);
border-block: var(--accent1) solid 1px;
}
.queue-playlist-span.not-first{
border-top: var(--bg1-alt0) solid 1px;
}

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

@ -1103,24 +1103,27 @@ class playlistManager{
//Set playlist div dataset
playlistDiv.dataset.name = playlist.name;
//If this isn't our first rodeo
if(playlistIndex != 0){
//make note
playlistDiv.classList.add('not-first-queue-playlist-div');
}
//Create span to hold playlist entry line contents
const playlistSpan = document.createElement('span');
//Set classes
playlistSpan.classList.add('queue-playlist-span');
//If this isn't our first rodeo
if(playlistIndex != 0){
//make note
playlistSpan.classList.add('not-first');
}
//pre-render and keep this so we can use it later
const mediaContainer = renderMedia();
//Append items to playlist entry line
playlistSpan.appendChild(renderLabels());
playlistSpan.appendChild(renderControls());
//Append items to playlist div
playlistDiv.appendChild(playlistSpan);
playlistDiv.appendChild(renderMedia());
playlistDiv.appendChild(mediaContainer);
//Append current playlist div to the channel playlists div
this.channelPlaylistDiv.appendChild(playlistDiv);
@ -1132,6 +1135,16 @@ class playlistManager{
//Set it's class
playlistLabels.classList.add('queue-playlist-labels-span');
//create playlist title span
const playlistTitleSpan = document.createElement('span');
//Set class
playlistTitleSpan.classList.add('queue-playlist-title-span', 'interactive');
//Create playlist title caret
const playlistTitleCaret = document.createElement('i');
//Set class
playlistTitleCaret.classList.add('bi-caret-right-fill');
//Create playlist title label
const playlistTitle = document.createElement('p');
//Set it's class
@ -1139,6 +1152,10 @@ class playlistManager{
//Unescape Sanatized Enteties and safely inject as plaintext
playlistTitle.innerText = utils.unescapeEntities(playlist.name);
//Construct playlist title span
playlistTitleSpan.appendChild(playlistTitleCaret);
playlistTitleSpan.appendChild(playlistTitle);
//Create playlist count label
const playlistCount = document.createElement('p');
//Set it's class
@ -1147,11 +1164,33 @@ class playlistManager{
playlistCount.innerText = `Count: ${playlist.media.length}`;
//Append items to playlist labels span
playlistLabels.appendChild(playlistTitle);
playlistLabels.appendChild(playlistTitleSpan);
playlistLabels.appendChild(playlistCount);
//Define input listeners
playlistTitleSpan.addEventListener('click', toggleMedia.bind(this));
//return playlistLabels
return playlistLabels;
function toggleMedia(){
//If the div is hidden
if(mediaContainer.style.display == 'none'){
//Light up the button
playlistTitleSpan.classList.add('positive');
//Flip the caret
playlistTitleCaret.classList.replace('bi-caret-right-fill', 'bi-caret-down-fill');
//Show the div
mediaContainer.style.display = '';
}else{
//Unlight the button
playlistTitleSpan.classList.remove('positive');
//Flip the caret
playlistTitleCaret.classList.replace('bi-caret-down-fill', 'bi-caret-right-fill');
//Hide the div
mediaContainer.style.display = 'none';
}
}
}
function renderControls(){
@ -1195,14 +1234,28 @@ class playlistManager{
//Create media container div
const mediaContainer = document.createElement('div');
//Set classes
mediaContainer.classList.add('queue-playlist-media-div');
mediaContainer.classList.add('queue-playlist-media-container-div');
//Auto-hide media container
mediaContainer.style.display = 'none';
for(let media of playlist.media){
//Create media div
const mediaDiv = document.createElement('div');
//Set class
mediaDiv.classList.add('queue-playlist-media-div');
//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);
//Append items to media div
mediaDiv.appendChild(mediaTitle);
//Append media div to media container
mediaContainer.appendChild(mediaDiv);
}
//return media container