Playlists

[sabjorn]

Problem
BC currently only has one mechanism for storing music for future purchasing--the wishlist. The wishlist cannot be organized into categories. The wishlist page does have a player but you must click on every item in the wishlist to get it to play.

Solution
A playlist (and queue) system for organizing future purchases and providing an easy mechanism to listen sequentially through the playlist.

ACs
* queue is visible on the left side, resembles the visual appearance of the right hand side bandcamp elements (shopping cart, etc)
* a "+" symbol (button) appears:
* on the right side of the "preview" button allows adding to queue
* next to the track or album release page player
* clicking on "+" will:
* add album to queue
* turn on preview indicator flag
* Albums in queue are buttons which when clicked opens player (IFrame)

Future Considerations:

• BuyMusicClub export

[sabjorn]

@emcniece this I think has some relation to #30

With many streaming services, the next queue is basically just another type of playlist. Likely we would want to be able to convert this into a crate.

[sabjorn]

#72 shows that we can get information from an album/track page and so fetch can be used to get the page and then get all the data we need to add the track to a playlist:

let section = fetch("https://halfpastvibe.bandcamp.com/track/strong-disagreement-about-the-quality-of-the-beat")
  .then(response => response.text())
  .then(text => {
    const parser = new DOMParser();
    const htmlDocument = parser.parseFromString(text, "text/html");
    const section = JSON.parse(htmlDocument.documentElement.querySelector('script[type="application/ld+json"]').innerText);
    return section;
  })

[emcniece]

Looks like that should work. Consider adding a .catch((error) => {}) to the end of that promise chain, just in case DOM or JSON parsing fails.

[sabjorn]

HTML5 sortable list!!!

libraries::
https://lukasoppermann.github.io/html5sortable/index.html

or

http://sortablejs.github.io/Sortable/

sortable is quite cool and has a nested thing that could be really cool. For example: anything could be dropped into the "playlists" space, including another nested playlist, a track, or an album (which would actually make a playlist made up of the tracks from the album).

There is support for callbacks on interactions which could be tied to a db backend.

additionally, using sortable could be a really cool way to create a modular UI...

---

or, without a library:

https://stackoverflow.com/questions/10588607/tutorial-for-html5-dragdrop-sortable-list
https://codepen.io/crouchingtigerhiddenadam/pen/qKXgap

[sabjorn]

example of nested sortable: https://jsbin.com/bikecuheza/edit?html,js,console,output

[sabjorn]

note: the concept of a playlist already exists in the html5 world: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/audioTracks

and styling the audio player can likely mostly be done with: https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Video_player_styling_basics

[sabjorn]

API call for getting user purchases:

curl 'https://bandcamp.com/api/fancollection/1/collection_items' \
  --data-raw '{"fan_id":896389,"older_than_token":"1646449273:952244090:t::","count":1000}' \
  --compressed

[sabjorn]

• random shuffling of playlist/queue
• toggle "hide already listened to" -- allowing for returning to queue and listening to only stuff you haven't listened to before

[sabjorn]

todo:

• UI design
• track tracks listened to by user
• popup type in cost for $0 items
• infinite scroll for feed -- example implementation here, and here
• toggle feature individually on each page (w/ global config)
• toggle seeing tracks that have been listened to (w/ global config)
• toggle continuous play mode

[sabjorn]

note:
according to comment here

the ports close after Ports are closed after 5 minutes in MV3. Don't use ports. Use one-time messages.

so everything should likely be done as chrome.runtime.sendMessage