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

Continued work on playlist management UI

Browse source
This commit is contained in:
rainbow napkin 2025-04-03 01:43:19 -04:00
parent 04dec153ac
commit c3781d6259
7 changed files with 201 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -39,6 +39,9 @@ class playlistManager{
this.channelPlaylistLabel = this.panelDocument.querySelector('#queue-channel-playlist-span');
this.channelPlaylistCaret = this.panelDocument.querySelector('#queue-channel-playlist-toggle');
//Force playlist re-render to fix controls
this.client.socket.emit('getChannelPlaylists');
//Setup Input
this.setupInput();
}
@ -249,7 +252,9 @@ class playlistManager{
playlistControls.appendChild(playlistDeleteButton);
//Define input event listeners
playlistAddURLButton.addEventListener('click', (event)=>{new addURLPopup(event, playlist.name, this.client, this.queuePanel.ownerDoc)})
playlistAddURLButton.addEventListener('click', (event)=>{new addURLPopup(event, playlist.name, this.client, this.queuePanel.ownerDoc)});
playlistDefaultTitlesButton.addEventListener('click', (event)=>{new defaultTitlesPopup(event, playlist.name, playlist.defaultTitles, this.client, this.queuePanel.ownerDoc)});
playlistRenameButton.addEventListener('click', (event)=>{new renamePopup(event, playlist.name, this.client, this.queuePanel.ownerDoc)});
playlistQueueAllButton.addEventListener('click', queueAll);
playlistDeleteButton.addEventListener('click', deletePlaylist);
@ -316,7 +321,7 @@ class newPlaylistPopup{
//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);
this.popup = new canopyUXUtils.popup('/newPlaylist', true, this.asyncConstructor.bind(this), doc, false);
}
asyncConstructor(){
@ -336,7 +341,7 @@ class newPlaylistPopup{
createPlaylist(event){
//If we clicked or hit enter
if(event.key == null || event.key == "Enter"){
if(event.key == null || (event.key == "Enter" && this.defaultTitles !== this.popup.doc.activeElement)){
//If we're saving to the channel
if(this.location.value == 'channel'){
@ -383,7 +388,7 @@ class addURLPopup{
//If we clicked or hit enter
if(event.key == null || event.key == "Enter"){
//Tell the server to create a new channel playlist
//Tell the server to add url to the playlist
this.client.socket.emit('addToChannelPlaylist', {
playlist: this.playlist,
url: this.urlPrompt.value
@ -408,30 +413,31 @@ class defaultTitlesPopup{
//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('/addToPlaylist', true, this.asyncConstructor.bind(this), doc);
this.popup = new canopyUXUtils.popup('/playlistDefaultTitles', true, this.asyncConstructor.bind(this), doc, false);
}
asyncConstructor(){
this.urlPrompt = this.popup.contentDiv.querySelector('#playlist-add-media-popup-prompt');
this.addButton = this.popup.contentDiv.querySelector('#playlist-add-media-popup-button');
this.titlePrompt = this.popup.contentDiv.querySelector('#playlist-default-titles-popup-prompt');
this.titleButton = this.popup.contentDiv.querySelector('#playlist-default-media-popup-button');
this.titlePrompt.textContent = utils.unescapeEntities(this.titles);
this.setupInput();
}
setupInput(){
//Setup input
this.addButton.addEventListener('click', this.addToPlaylist.bind(this));
this.popup.popupDiv.addEventListener('keydown', this.addToPlaylist.bind(this));
this.titleButton.addEventListener('click', this.changeDefaultTitles.bind(this));
this.popup.popupDiv.addEventListener('keydown', this.changeDefaultTitles.bind(this));
}
addToPlaylist(event){
//If we clicked or hit enter
if(event.key == null || event.key == "Enter"){
changeDefaultTitles(event){
//If we clicked or hit enter while the prompt wasn't active
if(event.key == null || (event.key == "Enter" && this.titlePrompt !== this.popup.doc.activeElement)){
//Tell the server to create a new channel playlist
this.client.socket.emit('addToChannelPlaylist', {
//Tell the server to change the titles
this.client.socket.emit('changeDefaultTitlesChannelPlaylist', {
playlist: this.playlist,
url: this.urlPrompt.value
defaultTitles: this.titlePrompt.value.split('\n')
});
//Close the popup
@ -439,3 +445,45 @@ class defaultTitlesPopup{
}
}
}
class renamePopup{
constructor(event, playlist, client, doc){
//Set Client
this.client = client;
//Set playlist
this.playlist = playlist
//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('/renamePlaylist', true, this.asyncConstructor.bind(this), doc);
}
asyncConstructor(){
this.renamePrompt = this.popup.contentDiv.querySelector('#playlist-rename-popup-prompt');
this.renameButton = this.popup.contentDiv.querySelector('#playlist-rename-popup-button');
this.setupInput();
}
setupInput(){
//Setup input
this.renameButton.addEventListener('click', this.changeDefaultTitles.bind(this));
this.popup.popupDiv.addEventListener('keydown', this.changeDefaultTitles.bind(this));
}
changeDefaultTitles(event){
//If we clicked or hit enter while the prompt wasn't active
if(event.key == null || event.key == "Enter"){
//Tell the server to change the titles
this.client.socket.emit('renameChannelPlaylist', {
playlist: this.playlist,
name: this.renamePrompt.value
});
//Close the popup
this.popup.closePopup();
}
}
}