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

Finshed up work with per-user playlists.

Browse source
This commit is contained in:
rainbow napkin 2025-04-09 01:52:16 -04:00
parent ed78bc7dfc
commit b383e746a7
2 changed files with 190 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/views/partial/popup/newPlaylist.ejs
View file

@ -20,8 +20,8 @@ along with this program. If not, see <https://www.gnu.org/licenses/>. %>
<span> <span>
<label for="location">Save To:</label> <label for="location">Save To:</label>
<select name="location" id="queue-create-playlist-popup-location"> <select name="location" id="queue-create-playlist-popup-location">
<option value="channel">Channel</option> <option value="Channel">Channel</option>
<option value="user">Account</option> <option value="User">Account</option>
</select> </select>
</span> </span>
<button id="queue-create-playlist-popup-save" class="positive-button">Create Playlist</button> <button id="queue-create-playlist-popup-save" class="positive-button">Create Playlist</button>

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

@ -21,6 +21,11 @@ class playlistManager{
this.panelDocument = panelDocument; this.panelDocument = panelDocument;
//Set parent queue panel //Set parent queue panel
this.queuePanel = queuePanel; this.queuePanel = queuePanel;
//Create openMap
this.openMap = {
Channel: new Map(),
User: new Map()
};
//Define Listeners //Define Listeners
this.defineListeners(); this.defineListeners();
@ -28,6 +33,7 @@ class playlistManager{
defineListeners(){ defineListeners(){
this.client.socket.on("chanPlaylists", this.renderChannelPlaylists.bind(this)); this.client.socket.on("chanPlaylists", this.renderChannelPlaylists.bind(this));
this.client.socket.on("userPlaylists", this.renderUserPlaylists.bind(this));
} }
docSwitch(){ docSwitch(){
@ -44,6 +50,7 @@ class playlistManager{
//Force playlist re-render to fix controls //Force playlist re-render to fix controls
this.client.socket.emit('getChannelPlaylists'); this.client.socket.emit('getChannelPlaylists');
this.client.socket.emit('getUserPlaylists');
//Setup Input //Setup Input
this.setupInput(); this.setupInput();
@ -95,228 +102,263 @@ class playlistManager{
} }
} }
checkOpenPlaylists(){ checkOpenPlaylists(location){
//If open map is a string, indicating we just renamed a playlist with it's media open //If open map is a string, indicating we just renamed a playlist with it's media open
if(typeof this.openMap == 'string'){ if(typeof this.openMap[location] == 'string'){
//Create new map to hold status with the new name of the renamed playlist already added //Create new map to hold status with the new name of the renamed playlist already added
this.openMap = new Map([[this.openMap, true]]); this.openMap[location] = new Map([[this.openMap[location], true]]);
}else{ }else{
//Create new map to hold status //Create new map to hold status
this.openMap = new Map(); this.openMap[location] = new Map();
} }
let mediaContainerDivs = [];
if(location == 'Channel'){
mediaContainerDivs = this.channelPlaylistDiv.querySelectorAll('.queue-playlist-media-container-div')
}else{
mediaContainerDivs = this.userPlaylistDiv.querySelectorAll('.queue-playlist-media-container-div')
}
//For each container Div rendered //For each container Div rendered
for(let containerDiv of this.channelPlaylistDiv.querySelectorAll('.queue-playlist-media-container-div')){ for(let containerDiv of mediaContainerDivs){
//Set whether or not it's visible in the map //Set whether or not it's visible in the map
this.openMap.set(containerDiv.dataset['playlist'], (containerDiv.style.display != 'none')); this.openMap[location].set(containerDiv.dataset['playlist'], (containerDiv.style.display != 'none'));
} }
} }
//Main playlist rendering functions
renderChannelPlaylists(data){ renderChannelPlaylists(data){
//Check for open playlists //Check for open playlists
this.checkOpenPlaylists(); this.checkOpenPlaylists('Channel');
console.log(this.openMap);
//Clear channel playlist div //Clear channel playlist div
this.channelPlaylistDiv.innerHTML = ''; this.channelPlaylistDiv.innerHTML = '';
//Append rendered playlists
this.channelPlaylistDiv.append(...this.renderPlaylists(data, 'Channel'));
}
renderUserPlaylists(data){
//Check for open playlists
this.checkOpenPlaylists('User');
//Clear channel playlist div
this.userPlaylistDiv.innerHTML = '';
//Append rendered playlists
this.userPlaylistDiv.append(...this.renderPlaylists(data, 'User'));
}
renderPlaylists(data, location){
const playlists = [];
//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
this.playlist = data[playlistIndex]; const playlist = data[playlistIndex];
//Create a new playlist div //Create a new playlist div
this.playlistDiv = document.createElement('div'); const playlistDiv = document.createElement('div');
//Set it's class //Set it's class
this.playlistDiv.classList.add('queue-playlist-div'); playlistDiv.classList.add('queue-playlist-div');
//Create span to hold playlist entry line contents //Create span to hold playlist entry line contents
this.playlistSpan = document.createElement('span'); const playlistSpan = document.createElement('span');
//Set classes //Set classes
this.playlistSpan.classList.add('queue-playlist-span'); playlistSpan.classList.add('queue-playlist-span');
//If this isn't our first rodeo //If this isn't our first rodeo
if(this.playlistIndex != 0){ if(playlistIndex != 0){
//make note //make note
this.playlistSpan.classList.add('not-first'); playlistSpan.classList.add('not-first');
} }
//Render out playlist entry contents //assemble playlist entry line
this.renderLabels(); playlistSpan.append(
this.renderControls(); this.renderLabels(playlist, location),
this.renderMedia(); this.renderControls(playlist, location)
);
//Append entry items to playlist entry line //assemble playlist div
this.playlistSpan.appendChild(this.playlistLabels); playlistDiv.append(
this.playlistSpan.appendChild(this.playlistControls); playlistSpan,
this.renderMedia(playlist, location),
);
//Append entry line and contents to playlist div //add playlist div to playlists array
this.playlistDiv.appendChild(this.playlistSpan); playlists.push(playlistDiv);
this.playlistDiv.appendChild(this.mediaContainer);
//Append current playlist div to the channel playlists div
this.channelPlaylistDiv.appendChild(this.playlistDiv);
} }
return playlists;
} }
//aux rendering functions //aux rendering functions
renderLabels(){ renderLabels(playlist, location){
//Create playlist label span //Create playlist label span
this.playlistLabels = document.createElement('span'); const playlistLabels = document.createElement('span');
//Set it's class //Set it's class
this.playlistLabels.classList.add('queue-playlist-labels-span'); playlistLabels.classList.add('queue-playlist-labels-span');
//create playlist title span //create playlist title span
this.playlistTitleSpan = document.createElement('span'); const playlistTitleSpan = document.createElement('span');
//Set class //Set class
this.playlistTitleSpan.classList.add('queue-playlist-title-span', 'interactive'); playlistTitleSpan.classList.add('queue-playlist-title-span', 'interactive');
//Create playlist title caret //Create playlist title caret
this.playlistTitleCaret = document.createElement('i'); const playlistTitleCaret = document.createElement('i');
//If this is supposed to be open //If this is supposed to be open
if(this.openMap.get(this.playlist.name)){ if(this.openMap[location].get(playlist.name)){
//Set class accordingly //Set class accordingly
this.playlistTitleSpan.classList.add('positive'); playlistTitleSpan.classList.add('positive');
this.playlistTitleCaret.classList.add('bi-caret-down-fill'); playlistTitleCaret.classList.add('bi-caret-down-fill');
//otherwise //otherwise
}else{ }else{
//Set class accordingly //Set class accordingly
this.playlistTitleCaret.classList.add('bi-caret-right-fill'); playlistTitleCaret.classList.add('bi-caret-right-fill');
} }
//Create playlist title label //Create playlist title label
this.playlistTitle = document.createElement('p'); const playlistTitle = document.createElement('p');
//Set it's class //Set it's class
this.playlistTitle.classList.add('queue-playlist-title'); playlistTitle.classList.add('queue-playlist-title');
//Unescape Sanatized Enteties and safely inject as plaintext //Unescape Sanatized Enteties and safely inject as plaintext
this.playlistTitle.innerText = utils.unescapeEntities(this.playlist.name); playlistTitle.innerText = utils.unescapeEntities(playlist.name);
//Construct playlist title span //Construct playlist title span
this.playlistTitleSpan.appendChild(this.playlistTitleCaret); playlistTitleSpan.appendChild(playlistTitleCaret);
this.playlistTitleSpan.appendChild(this.playlistTitle); playlistTitleSpan.appendChild(playlistTitle);
//Create playlist count label //Create playlist count label
this.playlistCount = document.createElement('p'); const playlistCount = document.createElement('p');
//Set it's class //Set it's class
this.playlistCount.classList.add('queue-playlist-count'); playlistCount.classList.add('queue-playlist-count');
//List video count //List video count
this.playlistCount.innerText = `Count: ${this.playlist.media.length}`; playlistCount.innerText = `Count: ${playlist.media.length}`;
//Append items to playlist labels span //Append items to playlist labels span
this.playlistLabels.appendChild(this.playlistTitleSpan); playlistLabels.appendChild(playlistTitleSpan);
this.playlistLabels.appendChild(this.playlistCount); playlistLabels.appendChild(playlistCount);
//Define input listeners //Define input listeners
this.playlistTitleSpan.addEventListener('click', this.toggleMedia.bind(this)); playlistTitleSpan.addEventListener('click', this.toggleMedia.bind(this));
return playlistLabels;
} }
renderControls(){ renderControls(playlist, location){
//Create playlist control span //Create playlist control span
this.playlistControls = document.createElement('span'); const playlistControls = document.createElement('span');
//Set it's class //Set it's class
this.playlistControls.classList.add('queue-playlist-control-span'); playlistControls.classList.add('queue-playlist-control-span');
//Set dataset //Set dataset
this.playlistControls.dataset['playlist'] = this.playlist.name; playlistControls.dataset['playlist'] = playlist.name;
playlistControls.dataset['location'] = location;
//Create queue all button //Create queue all button
this.playlistQueueRandomButton = document.createElement('button'); const playlistQueueRandomButton = document.createElement('button');
//Set it's classes //Set it's classes
this.playlistQueueRandomButton.classList.add('queue-playlist-queue-random-button', 'queue-playlist-control'); playlistQueueRandomButton.classList.add('queue-playlist-queue-random-button', 'queue-playlist-control');
//Inject text content //Inject text content
this.playlistQueueRandomButton.textContent = 'Random'; playlistQueueRandomButton.textContent = 'Random';
//Set title //Set title
this.playlistQueueRandomButton.title = 'Queue Random Item from Playlist'; playlistQueueRandomButton.title = 'Queue Random Item from Playlist';
//Create queue all button //Create queue all button
this.playlistQueueAllButton = document.createElement('button'); const playlistQueueAllButton = document.createElement('button');
//Set it's classes //Set it's classes
this.playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control', 'not-first'); playlistQueueAllButton.classList.add('queue-playlist-queue-all-button', 'queue-playlist-control', 'not-first');
//Inject text content //Inject text content
this.playlistQueueAllButton.textContent = 'All'; playlistQueueAllButton.textContent = 'All';
//Set title //Set title
this.playlistQueueAllButton.title = 'Queue Entire Playlist'; playlistQueueAllButton.title = 'Queue Entire Playlist';
//Create add from URL button //Create add from URL button
this.playlistAddURLButton = document.createElement('button'); const playlistAddURLButton = document.createElement('button');
//Set it's classes //Set it's classes
this.playlistAddURLButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'positive-button', 'not-first'); playlistAddURLButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'positive-button', 'not-first');
//Set Tile //Set Tile
this.playlistAddURLButton.title = 'Add To Playlist From URL' 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)
this.playlistAddIcon = document.createElement('i'); const playlistAddIcon = document.createElement('i');
this.playlistLinkIcon = document.createElement('i'); const playlistLinkIcon = document.createElement('i');
//set classes //set classes
this.playlistAddIcon.classList.add('bi-plus-lg'); playlistAddIcon.classList.add('bi-plus-lg');
this.playlistLinkIcon.classList.add('bi-link-45deg'); playlistLinkIcon.classList.add('bi-link-45deg');
//Append icons to URL button //Append icons to URL button
this.playlistAddURLButton.appendChild(this.playlistAddIcon); playlistAddURLButton.appendChild(playlistAddIcon);
this.playlistAddURLButton.appendChild(this.playlistLinkIcon); playlistAddURLButton.appendChild(playlistLinkIcon);
//Create default titles button //Create default titles button
this.playlistDefaultTitlesButton = document.createElement('button'); const playlistDefaultTitlesButton = document.createElement('button');
//Set classes //Set classes
this.playlistDefaultTitlesButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-tags-fill', 'positive-button', 'not-first'); playlistDefaultTitlesButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-tags-fill', 'positive-button', 'not-first');
//Set title //Set title
this.playlistDefaultTitlesButton.title = 'Change Default Titles' playlistDefaultTitlesButton.title = 'Change Default Titles'
//Set dataset //Set dataset
this.playlistDefaultTitlesButton.dataset['titles'] = JSON.stringify(this.playlist.defaultTitles); playlistDefaultTitlesButton.dataset['titles'] = JSON.stringify(playlist.defaultTitles);
//Create rename button //Create rename button
this.playlistRenameButton = document.createElement('button'); const playlistRenameButton = document.createElement('button');
//Set it's classes //Set it's classes
this.playlistRenameButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-input-cursor-text', 'positive-button', 'not-first'); playlistRenameButton.classList.add('queue-playlist-add-url-button', 'queue-playlist-control', 'bi-input-cursor-text', 'positive-button', 'not-first');
//Set title //Set title
this.playlistRenameButton.title = 'Rename Playlist' playlistRenameButton.title = 'Rename Playlist'
//Create delete button //Create delete button
this.playlistDeleteButton = document.createElement('button'); const playlistDeleteButton = document.createElement('button');
//Set it's classes //Set it's classes
this.playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill', 'not-first'); playlistDeleteButton.classList.add('queue-playlist-delete-button', 'queue-playlist-control', 'danger-button', 'bi-trash-fill', 'not-first');
//Set title //Set title
this.playlistDeleteButton.title = 'Delete Playlist' playlistDeleteButton.title = 'Delete Playlist'
//Append items to playlist control span //Append items to playlist control span
this.playlistControls.appendChild(this.playlistQueueRandomButton); playlistControls.append(
this.playlistControls.appendChild(this.playlistQueueAllButton); playlistQueueRandomButton,
this.playlistControls.appendChild(this.playlistAddURLButton); playlistQueueAllButton,
this.playlistControls.appendChild(this.playlistDefaultTitlesButton); playlistAddURLButton,
this.playlistControls.appendChild(this.playlistRenameButton); playlistDefaultTitlesButton,
this.playlistControls.appendChild(this.playlistDeleteButton); playlistRenameButton,
playlistDeleteButton
);
//Define input event listeners //Define input event listeners
this.playlistAddURLButton.addEventListener('click', this.addURL.bind(this)); playlistAddURLButton.addEventListener('click', this.addURL.bind(this));
this.playlistDefaultTitlesButton.addEventListener('click', this.editDefaultTitles.bind(this)); playlistDefaultTitlesButton.addEventListener('click', this.editDefaultTitles.bind(this));
this.playlistRenameButton.addEventListener('click', this.renamePlaylist.bind(this)); playlistRenameButton.addEventListener('click', this.renamePlaylist.bind(this));
this.playlistQueueRandomButton.addEventListener('click', this.queueRandom.bind(this)); playlistQueueRandomButton.addEventListener('click', this.queueRandom.bind(this));
this.playlistQueueAllButton.addEventListener('click', this.queueAll.bind(this)); playlistQueueAllButton.addEventListener('click', this.queueAll.bind(this));
this.playlistDeleteButton.addEventListener('click', this.deletePlaylist.bind(this)); playlistDeleteButton.addEventListener('click', this.deletePlaylist.bind(this));
return playlistControls;
} }
renderMedia(){ renderMedia(playlist, location){
//Create media container div //Create media container div
this.mediaContainer = document.createElement('div'); const mediaContainer = document.createElement('div');
//Set classes //Set classes
this.mediaContainer.classList.add('queue-playlist-media-container-div'); mediaContainer.classList.add('queue-playlist-media-container-div');
//If the playlist wasn't set to open in the open map //If the playlist wasn't set to open in the open map
if(!this.openMap.get(this.playlist.name)){ if(!this.openMap[location].get(playlist.name)){
//Auto-hide media container //Auto-hide media container
this.mediaContainer.style.display = 'none'; mediaContainer.style.display = 'none';
} }
//Set dataset //Set dataset
this.mediaContainer.dataset['playlist'] = this.playlist.name; mediaContainer.dataset['playlist'] = playlist.name;
for(let mediaIndex in this.playlist.media){ for(let mediaIndex in playlist.media){
//Grab media object from playlist //Grab media object from playlist
this.media = this.playlist.media[mediaIndex]; const media = playlist.media[mediaIndex];
//Sanatize title text //Sanatize title text
const title = utils.unescapeEntities(this.media.title); const title = utils.unescapeEntities(media.title);
//Create media div //Create media div
const mediaDiv = document.createElement('div'); const mediaDiv = document.createElement('div');
@ -338,56 +380,57 @@ class playlistManager{
//Inject text content //Inject text content
mediaTitle.innerText = title; mediaTitle.innerText = title;
//Render out media controls
this.renderMediaControls();
//Append items to media div //Append items to media div
mediaDiv.appendChild(mediaTitle); mediaDiv.append(
mediaDiv.appendChild(this.mediaControlSpan); mediaTitle,
this.renderMediaControls(media, playlist, location)
);
//Append media div to media container //Append media div to media container
this.mediaContainer.appendChild(mediaDiv); mediaContainer.appendChild(mediaDiv);
} }
//return media container //return media container
this.mediaContainer; return mediaContainer;
} }
renderMediaControls(){ renderMediaControls(media, playlist, location){
//Create media control span //Create media control span
this.mediaControlSpan = document.createElement('span'); const mediaControlSpan = document.createElement('span');
//Set it's class //Set it's class
this.mediaControlSpan.classList.add('queue-playlist-media-control-span'); mediaControlSpan.classList.add('queue-playlist-media-control-span');
//Set dataset //Set dataset
this.mediaControlSpan.dataset['playlist'] = this.playlist.name; mediaControlSpan.dataset['playlist'] = playlist.name;
this.mediaControlSpan.dataset['uuid'] = this.media.uuid; mediaControlSpan.dataset['uuid'] = media.uuid;
mediaControlSpan.dataset['location'] = location;
//Create Queue Media icon //Create Queue Media icon
const queueMediaIcon = document.createElement('i'); const queueMediaIcon = document.createElement('i');
//set class //set class
queueMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-queue-icon', 'bi-play-circle'); queueMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-queue-icon', 'bi-play-circle');
//Set title //Set title
queueMediaIcon.title = (`Queue '${this.media.title}'`); queueMediaIcon.title = (`Queue '${media.title}'`);
//Create delete media icon //Create delete media icon
const deleteMediaIcon = document.createElement('i'); const deleteMediaIcon = document.createElement('i');
//set class //set class
deleteMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-delete-icon', 'danger-text', 'bi-trash-fill'); deleteMediaIcon.classList.add('queue-playlist-control', 'queue-playlist-media-delete-icon', 'danger-text', 'bi-trash-fill');
//Set title //Set title
deleteMediaIcon.title = `Delete '${this.media.title}' from playlist '${this.playlist.name}'`; deleteMediaIcon.title = `Delete '${media.title}' from playlist '${playlist.name}'`;
//Append items to media control span //Append items to media control span
this.mediaControlSpan.appendChild(queueMediaIcon); mediaControlSpan.appendChild(queueMediaIcon);
this.mediaControlSpan.appendChild(deleteMediaIcon); mediaControlSpan.appendChild(deleteMediaIcon);
//Handle input event listeners //Handle input event listeners
queueMediaIcon.addEventListener('click', this.queueMedia.bind(this)); queueMediaIcon.addEventListener('click', this.queueMedia.bind(this));
deleteMediaIcon.addEventListener('click', this.deleteMedia.bind(this)); deleteMediaIcon.addEventListener('click', this.deleteMedia.bind(this));
//Return media control span
return mediaControlSpan;
} }
//I'd rather make this a class function but it's probably cleaner to not have to parent crawl
toggleMedia(event){ toggleMedia(event){
//Grab playlist title caret //Grab playlist title caret
const playlistTitleCaret = event.target.querySelector('i'); const playlistTitleCaret = event.target.querySelector('i');
@ -413,9 +456,11 @@ class playlistManager{
} }
addURL(event){ addURL(event){
console.log(event.target.parentNode.dataset['location']);
new addURLPopup( new addURLPopup(
event, event,
event.target.parentNode.dataset['playlist'], event.target.parentNode.dataset['playlist'],
event.target.parentNode.dataset['location'],
this.client, this.client,
this.queuePanel.ownerDoc this.queuePanel.ownerDoc
); );
@ -427,6 +472,7 @@ class playlistManager{
event, event,
event.target.parentNode.dataset['playlist'], event.target.parentNode.dataset['playlist'],
JSON.parse(event.target.dataset['titles']), JSON.parse(event.target.dataset['titles']),
event.target.parentNode.dataset['location'],
this.client, this.client,
this.queuePanel.ownerDoc this.queuePanel.ownerDoc
); );
@ -448,29 +494,29 @@ class playlistManager{
//If the media container is visible //If the media container is visible
if(mediaContainer.style.display != 'none'){ if(mediaContainer.style.display != 'none'){
//Set openMap to new name indicating the new playlist has it's media opened //Set openMap to new name indicating the new playlist has it's media opened
this.openMap = newName; this.openMap[event.target.parentNode.dataset['location']] = newName;
} }
} }
} }
queueAll(event){ queueAll(event){
this.client.socket.emit('queueChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']}); this.client.socket.emit(`queue${event.target.parentNode.dataset['location']}Playlist`, {playlist: event.target.parentNode.dataset['playlist']});
} }
queueMedia(event){ queueMedia(event){
this.client.socket.emit('queueFromChannelPlaylist',{playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']}); this.client.socket.emit(`queueFrom${event.target.parentNode.dataset['location']}Playlist`,{playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']});
} }
queueRandom(event){ queueRandom(event){
this.client.socket.emit('queueRandomFromChannelPlaylist',{playlist: event.target.parentNode.dataset['playlist']}); this.client.socket.emit(`queueRandomFrom${event.target.parentNode.dataset['location']}Playlist`,{playlist: event.target.parentNode.dataset['playlist']});
} }
deletePlaylist(event){ deletePlaylist(event){
this.client.socket.emit('deleteChannelPlaylist', {playlist: event.target.parentNode.dataset['playlist']}); this.client.socket.emit(`delete${event.target.parentNode.dataset['location']}Playlist`, {playlist: event.target.parentNode.dataset['playlist']});
} }
deleteMedia(event){ deleteMedia(event ){
this.client.socket.emit('deleteChannelPlaylistMedia', {playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']}); this.client.socket.emit(`delete${event.target.parentNode.dataset['location']}PlaylistMedia`, {playlist: event.target.parentNode.dataset['playlist'], uuid: event.target.parentNode.dataset['uuid']});
} }
} }
@ -504,14 +550,11 @@ class newPlaylistPopup{
//If we clicked or hit enter //If we clicked or hit enter
if(event.key == null || (event.key == "Enter" && this.defaultTitles !== this.popup.doc.activeElement)){ if(event.key == null || (event.key == "Enter" && this.defaultTitles !== this.popup.doc.activeElement)){
//If we're saving to the channel //Tell the server to create a new playlist
if(this.location.value == 'channel'){ this.client.socket.emit(`create${this.location.value}Playlist`, {
//Tell the server to create a new channel playlist playlist: this.name.value,
this.client.socket.emit('createChannelPlaylist', { defaultTitles: this.defaultTitles.value.split('\n')
playlist: this.name.value, });
defaultTitles: this.defaultTitles.value.split('\n')
})
}
//Close the popup //Close the popup
this.popup.closePopup(); this.popup.closePopup();
@ -520,13 +563,16 @@ class newPlaylistPopup{
} }
class addURLPopup{ class addURLPopup{
constructor(event, playlist, client, doc){ constructor(event, playlist, location, client, doc){
//Set Client //Set Client
this.client = client; this.client = client;
//Set playlist //Set playlist
this.playlist = playlist this.playlist = playlist
//Set location
this.location = location;
//Create media popup and call async constructor when done //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 :( //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('/addToPlaylist', true, this.asyncConstructor.bind(this), doc); this.popup = new canopyUXUtils.popup('/addToPlaylist', true, this.asyncConstructor.bind(this), doc);
@ -550,7 +596,8 @@ class addURLPopup{
if(event.key == null || event.key == "Enter"){ if(event.key == null || event.key == "Enter"){
//Tell the server to add url to the playlist //Tell the server to add url to the playlist
this.client.socket.emit('addToChannelPlaylist', { this.client.socket.emit(`addTo${this.location}Playlist`, {
//this.client.socket.emit(`addToChannelPlaylist`, {
playlist: this.playlist, playlist: this.playlist,
url: this.urlPrompt.value url: this.urlPrompt.value
}); });
@ -562,13 +609,16 @@ class addURLPopup{
} }
class defaultTitlesPopup{ class defaultTitlesPopup{
constructor(event, playlist, titles, client, doc){ constructor(event, playlist, titles, location, client, doc){
//Set Client //Set Client
this.client = client; this.client = client;
//Set playlist //Set playlist
this.playlist = playlist this.playlist = playlist
//Set location
this.location = location;
//Set title string //Set title string
this.titles = titles.join('\n'); this.titles = titles.join('\n');
@ -596,7 +646,7 @@ class defaultTitlesPopup{
if(event.key == null || (event.key == "Enter" && this.titlePrompt !== this.popup.doc.activeElement)){ if(event.key == null || (event.key == "Enter" && this.titlePrompt !== this.popup.doc.activeElement)){
//Tell the server to change the titles //Tell the server to change the titles
this.client.socket.emit('changeDefaultTitlesChannelPlaylist', { this.client.socket.emit(`changeDefaultTitles${this.location}Playlist`, {
playlist: this.playlist, playlist: this.playlist,
defaultTitles: this.titlePrompt.value.split('\n') defaultTitles: this.titlePrompt.value.split('\n')
}); });
@ -615,6 +665,7 @@ class renamePopup{
//Set playlist //Set playlist
this.playlist = playlist this.playlist = playlist
//Set callback
this.cb = cb; this.cb = cb;
//Create media popup and call async constructor when done //Create media popup and call async constructor when done