diff --git a/src/app/channel/media/playlistHandler.js b/src/app/channel/media/playlistHandler.js
index 8b73805..5b56c8b 100644
--- a/src/app/channel/media/playlistHandler.js
+++ b/src/app/channel/media/playlistHandler.js
@@ -32,106 +32,196 @@ module.exports = class{
}
defineListeners(socket){
- //socket.on("queue", (data) => {this.queueURL(socket, data)});
socket.on("getChannelPlaylists", () => {this.getChannelPlaylists(socket)});
socket.on("createChannelPlaylist", (data) => {this.createChannelPlaylist(socket, data)});
socket.on("deleteChannelPlaylist", (data) => {this.deleteChannelPlaylist(socket, data)});
socket.on("addToChannelPlaylist", (data) => {this.addToChannelPlaylist(socket, data)});
socket.on("queueChannelPlaylist", (data) => {this.queueChannelPlaylist(socket, data)});
+ socket.on("renameChannelPlaylist", (data) => {this.renameChannelPlaylist(socket, data)});
}
//--- USER-FACING PLAYLIST FUNCTIONS ---
async getChannelPlaylists(socket, chanDB){
- //if we wherent handed a channel document
- if(chanDB == null){
- //Pull it based on channel name
- chanDB = await channelModel.findOne({name: this.channel.name});
- }
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
- //Return playlists
- socket.emit('chanPlaylists', chanDB.getPlaylists());
+ //Return playlists
+ socket.emit('chanPlaylists', chanDB.getPlaylists());
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
+ }
}
async createChannelPlaylist(socket, data, chanDB){
- //if we wherent handed a channel document
- if(chanDB == null){
- //Pull it based on channel name
- chanDB = await channelModel.findOne({name: this.channel.name});
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
+
+ //If the title is too long
+ if(!validator.isLength(data.playlist, {max:30})){
+ //Bitch, moan, complain...
+ loggerUtils.socketErrorHandler(socket, "Playlist name too long!", "validation");
+ //and ignore it!
+ return;
+ }
+
+ //Escape/trim the playlist name
+ const name = validator.escape(validator.trim(data.playlist));
+
+ //Add playlist to the channel doc
+ chanDB.media.playlists.push({
+ name,
+ defaultTitles: data.defaultTitles
+ });
+
+ //Save the channel doc
+ await chanDB.save();
+
+ //Return playlists from channel doc
+ socket.emit('chanPlaylists', chanDB.getPlaylists());
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
}
-
- //Add playlist to the channel doc
- chanDB.media.playlists.push({
- name: data.playlist,
- defaultTitles: data.defaultTitles
- });
-
- //Save the channel doc
- await chanDB.save();
-
- //Return playlists from channel doc
- socket.emit('chanPlaylists', chanDB.getPlaylists());
}
async deleteChannelPlaylist(socket, data, chanDB){
- //if we wherent handed a channel document
- if(chanDB == null){
- //Pull it based on channel name
- chanDB = await channelModel.findOne({name: this.channel.name});
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
+
+ //Delete playlist name
+ await chanDB.deletePlaylistByName(data.playlist);
+
+ //Return playlists from channel doc
+ socket.emit('chanPlaylists', chanDB.getPlaylists());
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
}
-
- //Delete playlist name
- await chanDB.deletePlaylistByName(data.playlist);
-
- //Return playlists from channel doc
- socket.emit('chanPlaylists', chanDB.getPlaylists());
}
async addToChannelPlaylist(socket, data, chanDB){
- //if we wherent handed a channel document
- if(chanDB == null){
- //Pull it based on channel name
- chanDB = await channelModel.findOne({name: this.channel.name});
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
+
+ let url = data.url
+
+ //If we where given a bad URL
+ if(!validator.isURL(url)){
+ //Attempt to fix the situation by encoding it
+ url = encodeURI(url);
+
+ //If it's still bad
+ if(!validator.isURL(url)){
+ //Bitch, moan, complain...
+ loggerUtils.socketErrorHandler(socket, "Bad URL!", "validation");
+ //and ignore it!
+ return;
+ }
+ }
+
+ //Pull media metadata
+ let mediaList = await yanker.yankMedia(url);
+
+ //If we didn't get any media
+ if(mediaList.length == 0 || mediaList == null){
+ //Bitch, moan, complain...
+ loggerUtils.socketErrorHandler(socket, "No media found!", "queue");
+ //and ignore it!
+ return;
+ }
+
+ //Add media object to the given playlist
+ await chanDB.addToPlaylist(data.playlist, mediaList[0]);
+
+ //Return playlists from channel doc
+ socket.emit('chanPlaylists', chanDB.getPlaylists());
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
}
-
- //Pull media metadata
- let mediaList = await yanker.yankMedia(data.url);
-
- //Add media object to the given playlist
- await chanDB.addToPlaylist(data.playlist, mediaList[0]);
-
- //Return playlists from channel doc
- socket.emit('chanPlaylists', chanDB.getPlaylists());
}
async queueChannelPlaylist(socket, data, chanDB){
- //if we wherent handed a channel document
- if(chanDB == null){
- //Pull it based on channel name
- chanDB = await channelModel.findOne({name: this.channel.name});
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
+
+ //Pull a valid start time from input, or make one up if we can't
+ let start = this.channel.queue.getStart(data.start);
+
+ //Grab playlist from the DB
+ let playlist = chanDB.getPlaylistByName(data.playlist);
+
+ //Create an empty array to hold our media list
+ const mediaList = [];
+
+ //Iterate through playlist media
+ for(let item of playlist.media){
+ //Rehydrate a full phat media object from the flat DB entry
+ let mediaObj = item.rehydrate();
+
+ //Set media title from default titles
+ mediaObj.title = playlist.defaultTitles[Math.floor(Math.random() * playlist.defaultTitles.length)];
+
+ //Push rehydrated item on to the mediaList
+ mediaList.push(mediaObj);
+ }
+
+ //Convert array of standard media objects to queued media objects, and push to schedule
+ this.channel.queue.scheduleMedia(queuedMedia.fromMediaArray(mediaList, start), socket, chanDB);
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
}
+ }
- //Pull a valid start time from input, or make one up if we can't
- let start = this.channel.queue.getStart(data.start);
+ async renameChannelPlaylist(socket, data, chanDB){
+ try{
+ //if we wherent handed a channel document
+ if(chanDB == null){
+ //Pull it based on channel name
+ chanDB = await channelModel.findOne({name: this.channel.name});
+ }
- //Grab playlist from the DB
- let playlist = chanDB.getPlaylistByName(data.playlist);
+ //If the title is too long
+ if(!validator.isLength(data.name, {max:30})){
+ //Bitch, moan, complain...
+ loggerUtils.socketErrorHandler(socket, "Playlist name too long!", "validation");
+ //and ignore it!
+ return;
+ }
- //Create an empty array to hold our media list
- const mediaList = [];
+ //Escape/trim the playlist name
+ const name = validator.escape(validator.trim(data.name));
- //Iterate through playlist media
- for(let item of playlist.media){
- //Rehydrate a full phat media object from the flat DB entry
- let mediaObj = item.rehydrate();
+ //Find playlist
+ let playlist = chanDB.getPlaylistByName(data.playlist);
- //Set media title from default titles
- mediaObj.title = playlist.defaultTitles[Math.floor(Math.random() * playlist.defaultTitles.length)];
+ //Change playlist name
+ chanDB.media.playlists[playlist.listIndex].name = name;
- //Push rehydrated item on to the mediaList
- mediaList.push(mediaObj);
+ //Save channel document
+ await chanDB.save();
+
+ //Return playlists from channel doc
+ socket.emit('chanPlaylists', chanDB.getPlaylists());
+ }catch(err){
+ return loggerUtils.socketExceptionHandler(socket, err);
}
-
- //Convert array of standard media objects to queued media objects, and push to schedule
- this.channel.queue.scheduleMedia(queuedMedia.fromMediaArray(mediaList, start), socket, chanDB);
}
}
\ No newline at end of file
diff --git a/src/app/channel/media/queue.js b/src/app/channel/media/queue.js
index d6610f7..bc21bcb 100644
--- a/src/app/channel/media/queue.js
+++ b/src/app/channel/media/queue.js
@@ -626,7 +626,7 @@ module.exports = class{
}
//If we fucked with the DB during the main loop
- if(chanDB == null && !volatile){
+ if(chanDB != null && !volatile){
try{
//Save the database
chanDB.save();
diff --git a/src/schemas/channel/channelSchema.js b/src/schemas/channel/channelSchema.js
index 20112bd..90adb7f 100644
--- a/src/schemas/channel/channelSchema.js
+++ b/src/schemas/channel/channelSchema.js
@@ -559,10 +559,7 @@ channelSchema.methods.getPlaylists = function(){
//this.media.playlists.forEach((playlist) => {
for(let playlist of this.media.playlists){
//Push an object with select information from the emote to the emote list
- playlists.push({
- name: playlist.name,
- count: playlist.media.length
- });
+ playlists.push(playlist.dehydrate());
}
//return the emote list
@@ -584,11 +581,13 @@ channelSchema.methods.getPlaylistByName = function(name){
let foundPlaylist = null;
//Crawl through active playlists
- this.playlistCrawl((playlist) => {
+ this.playlistCrawl((playlist, listIndex) => {
//If we found a match based on name
if(playlist.name == name){
//Keep it
foundPlaylist = playlist;
+ //Pass down the list index
+ foundPlaylist.listIndex = listIndex;
}
});
@@ -597,45 +596,25 @@ channelSchema.methods.getPlaylistByName = function(name){
}
channelSchema.methods.deletePlaylistByName = async function(name){
- //Create null value to hold our found playlist
- let foundIndex = null;
-
- //Crawl through active playlists
- this.playlistCrawl((playlist, listIndex) => {
- //If we found a match based on name
- if(playlist.name == name){
- //Yoink it's index
- foundIndex = listIndex;
- }
- });
+ //Find the playlist
+ let playlist = this.getPlaylistByName(name);
//splice out the given playlist
- this.media.playlists.splice(foundIndex, 1);
+ this.media.playlists.splice(playlist.listIndex, 1);
//save the channel document
await this.save();
}
channelSchema.methods.addToPlaylist = async function(name, media){
- //Create variable to hold found index
- let foundIndex = null
-
- //Crawl through active playlists
- this.playlistCrawl((playlist, listIndex) => {
- //If the playlist name matches
- if(playlist.name == name){
- //Push the given media into the found playlist
-
- //Make note of the found index
- foundIndex = listIndex
- }
- });
+ //Find the playlist
+ let playlist = this.getPlaylistByName(name);
//Set media status schema discriminator
media.status = 'saved';
//Add the media to the playlist
- this.media.playlists[foundIndex].media.push(media);
+ this.media.playlists[playlist.listIndex].media.push(media);
//Save the changes made to the chan doc
await this.save();
diff --git a/src/schemas/channel/media/playlistSchema.js b/src/schemas/channel/media/playlistSchema.js
index e5c9750..e4d7d10 100644
--- a/src/schemas/channel/media/playlistSchema.js
+++ b/src/schemas/channel/media/playlistSchema.js
@@ -24,6 +24,7 @@ const playlistSchema = new mongoose.Schema({
name: {
type: mongoose.SchemaTypes.String,
required: true,
+ unique: true
},
media: [playlistMediaSchema],
defaultTitles:[{
@@ -33,8 +34,26 @@ const playlistSchema = new mongoose.Schema({
}]
});
-playlistSchema.methods.test = function(){
- console.log(this.name);
+//methods
+playlistSchema.methods.dehydrate = function(){
+ //Create empty array to hold media
+ const mediaArray = [];
+
+ //Fill media array
+ for(let media of this.media){
+ mediaArray.push({
+ title: media.title,
+ url: media.url,
+ duration: media.duration
+ });
+ }
+
+ //return dehydrated playlist
+ return {
+ name: this.name,
+ media: mediaArray,
+ defaultTitles: this.defaultTitles
+ }
}
module.exports = playlistSchema;
\ No newline at end of file
diff --git a/src/views/partial/panels/queue.ejs b/src/views/partial/panels/queue.ejs
index 5b5b7d3..d069434 100644
--- a/src/views/partial/panels/queue.ejs
+++ b/src/views/partial/panels/queue.ejs
@@ -41,6 +41,22 @@ along with this program. If not, see . %>
+
+
+
+
Create Playlist
+
+
+
+
Channel Playlists
+
+
+
+
+
User Playlists
+
+
+
diff --git a/src/views/partial/popup/newPlaylist.ejs b/src/views/partial/popup/newPlaylist.ejs
new file mode 100644
index 0000000..196ad3e
--- /dev/null
+++ b/src/views/partial/popup/newPlaylist.ejs
@@ -0,0 +1,28 @@
+<%# Canopy - The next generation of stoner streaming software
+Copyright (C) 2024-2025 Rainbownapkin and the TTN Community
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU Affero General Public License as
+published by the Free Software Foundation, either version 3 of the
+License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License
+along with this program. If not, see . %>
+
Create Playlist
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/www/css/panel/queue.css b/www/css/panel/queue.css
index 75a7224..7e75190 100644
--- a/www/css/panel/queue.css
+++ b/www/css/panel/queue.css
@@ -25,7 +25,6 @@ along with this program. If not, see .*/
left: 0;
right: 0;
z-index: 4;
- padding: 0.15em 0.3em;
}
#queue-control-offset{
@@ -38,6 +37,7 @@ along with this program. If not, see .*/
display: flex;
flex-direction: row;
justify-content: space-between;
+ margin: 0.15em 0.3em;
}
@@ -133,6 +133,82 @@ div.dragging-queue-entry{
}
/* queue controls */
+/* media prompts */
+#queue-media-prompts{
+ margin: 0.15em 0.3em;
+}
+
+/* playlist manager */
+.queue-playlist-label-span{
+ display: flex;
+ flex-direction: row;
+ width: fit-content;
+ margin-left: 0.15em;
+}
+
+.queue-playlist-label-span p{
+ margin: 0;
+}
+
+.queue-playlists-div{
+ margin: 0;
+}
+
+.queue-playlist-span, .queue-playlist-labels-span{
+ display: flex;
+ flex-direction: row;
+ align-items: baseline;
+ text-wrap: nowrap;
+}
+
+.queue-playlist-span{
+ justify-content: space-between;
+}
+
+.queue-playlist-div{
+ padding: 0 0.15em;
+ margin: 0 0.15em;
+}
+
+.queue-playlist-control{
+ border-radius: 0;
+ padding: 0.2em 0.1em;
+ font-size: 0.8em;
+}
+
+.queue-playlist-span p{
+ margin: 0 0.15em;
+ user-select: none;
+}
+
+.queue-playlist-count{
+ font-size: 0.8em;
+}
+
+#queue-create-playlist-popup-div{
+ display: flex;
+ flex-direction: column;
+}
+
+#queue-create-playlist-popup-div span{
+ display: flex;
+ justify-content: space-around;
+ text-wrap: nowrap;
+}
+
+#queue-create-playlist-popup-div span select{
+ width: 100%;
+}
+
+
+#queue-create-playlist-popup-div *{
+ margin: 0.1em;
+}
+
+#queue-create-playlist-popup-default-titles{
+ resize: vertical;
+}
+
/* date */
#queue-control-date{
display: flex;
diff --git a/www/css/theme/movie-night.css b/www/css/theme/movie-night.css
index 4bec538..1c80189 100644
--- a/www/css/theme/movie-night.css
+++ b/www/css/theme/movie-night.css
@@ -539,6 +539,25 @@ div.archived p{
color: var(--bg2-alt1);
}
+.queue-playlists-div{
+ background-color: var(--bg1);
+ color: var(--accent1);
+ border-block: var(--accent1) solid 1px;
+}
+
+.not-first-queue-playlist-div{
+ border-top: var(--bg1-alt0) solid 1px;
+}
+
+.queue-playlist-count{
+ color: var(--accent1-alt0);
+}
+
+.queue-playlist-control:not(.danger-button):not(:hover){
+ background-color: var(--bg1-alt0);
+ color: var(--accent1);
+}
+
/* altcha theming*/
div.altcha{
box-shadow: 4px 4px 1px var(--bg1-alt0) inset;
diff --git a/www/js/channel/panels/queuePanel.js b/www/js/channel/panels/queuePanel.js
index 8a5a5e1..d908944 100644
--- a/www/js/channel/panels/queuePanel.js
+++ b/www/js/channel/panels/queuePanel.js
@@ -17,6 +17,9 @@ class queuePanel extends panelObj{
//Autoscroll boolean
this.autoscroll = true;
+ //Setup child classes
+ this.playlistManager = new playlistManager(client, panelDocument, this);
+
//Define non-input event listeners
this.defineListeners();
}
@@ -43,13 +46,15 @@ class queuePanel extends panelObj{
//Get main control buttons
this.addMediaButton = this.panelDocument.querySelector('#queue-add-media');
this.scrollLockButton = this.panelDocument.querySelector('#queue-scroll-lock');
- this.queueDateButton = this.panelDocument.querySelector('#queue-date')
+ this.queueDateButton = this.panelDocument.querySelector('#queue-date');
+ this.playlistMenuButton = this.panelDocument.querySelector("#queue-playlists");
this.clearMediaButton = this.panelDocument.querySelector('#queue-clear');
this.queueLockButton = this.panelDocument.querySelector('#queue-lock');
//Get control divs
this.addMediaDiv = this.panelDocument.querySelector('#queue-media-prompts');
this.queueDateDiv = this.panelDocument.querySelector('#queue-control-date');
+ this.playlistDiv = this.panelDocument.querySelector('#queue-playlist-prompts');
//Get control div elements
//Add Media
@@ -70,6 +75,10 @@ class queuePanel extends panelObj{
//Setup panel input
this.setupInput();
+
+ //Pass the new panelDoc and docSwitch() call down to child classes
+ this.playlistManager.panelDocument = this.panelDocument;
+ this.playlistManager.docSwitch();
}
closer(){
@@ -99,6 +108,7 @@ class queuePanel extends panelObj{
this.addMediaButton.addEventListener('click', this.toggleAddMedia.bind(this));
this.scrollLockButton.addEventListener('click', this.lockScroll.bind(this));
this.queueDateButton.addEventListener('click', this.toggleDateControl.bind(this));
+ this.playlistMenuButton.addEventListener('click', this.togglePlaylistDiv.bind(this));
this.clearMediaButton.addEventListener('click', this.clearMedia.bind(this));
this.queueLockButton.addEventListener('click', this.lockSchedule.bind(this));
@@ -203,6 +213,24 @@ class queuePanel extends panelObj{
}
}
+ togglePlaylistDiv(event){
+ //If the div is hidden
+ if(this.playlistDiv.style.display == 'none'){
+ //Query playlists
+ client.socket.emit('getChannelPlaylists');
+
+ //Light up the button
+ this.playlistMenuButton.classList.add('positive-button');
+ //Show the div
+ this.playlistDiv.style.display = '';
+ }else{
+ //Unlight the button
+ this.playlistMenuButton.classList.remove('positive-button');
+ //Hide the div
+ this.playlistDiv.style.display = 'none';
+ }
+ }
+
clearMedia(event){
//Call up the popup
new clearPopup(event, this.client, null, this.ownerDoc);
@@ -1003,6 +1031,233 @@ class queuePanel extends panelObj{
}
}
+class playlistManager{
+ constructor(client, panelDocument, queuePanel){
+ //Set client
+ this.client = client;
+ //Set panel document
+ this.panelDocument = panelDocument;
+ //Set parent queue panel
+ this.queuePanel = queuePanel;
+
+ //Define Listeners
+ this.defineListeners();
+ }
+
+ defineListeners(){
+ this.client.socket.on("chanPlaylists", this.renderChannelPlaylists.bind(this));
+ }
+
+ docSwitch(){
+ //Grab menus
+ this.channelPlaylistDiv = this.panelDocument.querySelector("#queue-channel-playlist-div");
+
+ //Grab controls
+ this.createPlaylistSpan = this.panelDocument.querySelector('#queue-add-playlist-span');
+ this.channelPlaylistLabel = this.panelDocument.querySelector('#queue-channel-playlist-span');
+ this.channelPlaylistCaret = this.panelDocument.querySelector('#queue-channel-playlist-toggle');
+
+ //Setup Input
+ this.setupInput();
+ }
+
+ setupInput(){
+ this.createPlaylistSpan.addEventListener('click', (event)=>{new newPlaylistPopup(event, this.client, this.queuePanel.ownerDoc)})
+ this.channelPlaylistLabel.addEventListener('click', this.toggleChannelPlaylists.bind(this));
+ }
+
+ /* queue control button functions */
+ toggleChannelPlaylists(event){
+ //If the div is hidden
+ if(this.channelPlaylistDiv.style.display == 'none'){
+ //Light up the button
+ this.channelPlaylistLabel.classList.add('positive');
+ //Flip the caret
+ this.channelPlaylistCaret.classList.replace('bi-caret-right-fill', 'bi-caret-down-fill');
+ //Show the div
+ this.channelPlaylistDiv.style.display = '';
+ }else{
+ //Unlight the button
+ this.channelPlaylistLabel.classList.remove('positive');
+ //Flip the caret
+ this.channelPlaylistCaret.classList.replace('bi-caret-down-fill', 'bi-caret-right-fill');
+ //Hide the div
+ this.channelPlaylistDiv.style.display = 'none';
+ }
+ }
+
+ renderChannelPlaylists(data){
+ //Clear channel playlist div
+ this.channelPlaylistDiv.innerHTML = '';
+
+ //For every playlist sent down from the server
+ for(let playlistIndex in data){
+ //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
+ playlistDiv.classList.add('queue-playlist-div');
+
+ //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');
+
+ //--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 div
+ playlistDiv.appendChild(playlistSpan);
+ playlistDiv.appendChild(mediaDiv);
+
+ //Append current playlist span to the channel playlist div
+ this.channelPlaylistDiv.appendChild(playlistDiv);
+
+ //Define input event listeners
+ playlistQueueAllButton.addEventListener('click', queueAll);
+ playlistDeleteButton.addEventListener('click', deletePlaylist);
+
+ //aux rendering functions
+ function renderMedia(){
+ //Create media container div
+ const mediaContainer = document.createElement('div');
+ //Set classes
+ mediaContainer.classList.add('queue-playlist-media-div');
+
+ //return media container
+ return mediaContainer;
+ }
+
+ //playlist control functions
+ function queueAll(){
+ client.socket.emit('queueChannelPlaylist', {playlist: playlist.name});
+ }
+
+ function deletePlaylist(){
+ client.socket.emit('deleteChannelPlaylist', {playlist: playlist.name});
+ }
+ }
+ }
+
+}
+
+class newPlaylistPopup{
+ constructor(event, client, doc){
+ //Set Client
+ this.client = client;
+
+ //Create media popup and call async constructor when done
+ //unfortunately we cant call constructors asyncronously, and we cant call back to this from super, so we can't extend this as it stands :(
+ this.popup = new canopyUXUtils.popup('/newPlaylist', true, this.asyncConstructor.bind(this), doc);
+ }
+
+ asyncConstructor(){
+ this.name = this.popup.contentDiv.querySelector('#queue-create-playlist-popup-name');
+ this.defaultTitles = this.popup.contentDiv.querySelector('#queue-create-playlist-popup-default-titles');
+ this.location = this.popup.contentDiv.querySelector('#queue-create-playlist-popup-location');
+ this.saveButton = this.popup.contentDiv.querySelector('#queue-create-playlist-popup-save');
+
+ this.setupInput();
+ }
+
+ setupInput(){
+ //Setup input
+ this.saveButton.addEventListener('click', this.createPlaylist.bind(this));
+ this.popup.popupDiv.addEventListener('keydown', this.createPlaylist.bind(this));
+ }
+
+ createPlaylist(event){
+ //If we clicked or hit enter
+ if(event.key == null || event.key == "Enter"){
+
+ //If we're saving to the channel
+ if(this.location.value == 'channel'){
+ //Tell the server to create a new channel playlist
+ this.client.socket.emit('createChannelPlaylist', {
+ playlist: this.name.value,
+ defaultTitles: this.defaultTitles.value.split('\n')
+ })
+ }
+
+ //Close the popup
+ this.popup.closePopup();
+ }
+ }
+
+
+}
+
class schedulePopup{
constructor(event, client, url, title, cb, doc){
//Set Client