diff --git a/www/css/panel/queue.css b/www/css/panel/queue.css index 7e75190..e6aa120 100644 --- a/www/css/panel/queue.css +++ b/www/css/panel/queue.css @@ -101,6 +101,7 @@ div.queue-entry{ display: flex; justify-content: center; align-items: center; + user-select: none; } div.queue-entry p{ diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css index 1c80189..31045e3 100644 --- a/www/css/theme/movie-night.css +++ b/www/css/theme/movie-night.css @@ -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{ diff --git a/www/js/channel/panels/queuePanel.js b/www/js/channel/panels/queuePanel.js index d908944..eb6c190 100644 --- a/www/js/channel/panels/queuePanel.js +++ b/www/js/channel/panels/queuePanel.js @@ -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; }