sabjorn / bandcampenhancementsuite Goto Github PK
View Code? Open in Web Editor NEWA Chrome Extension providing extra functionality for Bandcamp
License: MIT License
A Chrome Extension providing extra functionality for Bandcamp
License: MIT License
i imagine this would be pretty straightforward to add support for
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:
It would be nice to be able to selective enable/disable features. This could then be extended for each feature to have some fine grained control (for example: configuring step size for jump forward/back audio feature; and/or changing the keybindings for the keyboard controls).
Ideally this would be a framework that is easily extended for each feature (each feature script talks to the background.js and acquires all the information it needs when it loads). Some sort of config struct could be used to unify the front/back end parameters.
Visually, nested menus would be good but to start off maybe just an omni list of controls?
This was actually a request from Dan Godlovitch.
In essence, controlling volume on album pages with a slider would be nice. Even better would be adding the same functionality to the IFrame player.
This is relatively easy to do since the HTML5 audio element has volume control, e.g.:
let audio = document.querySelector("audio");
audio.volume = .3;
The iframe width is too narrow (but looks good).
Adding something like this: https://stackoverflow.com/questions/6219031/how-can-i-resize-a-div-by-dragging-just-one-side-of-it
would allow users to change the iframe window width easily when desired.
your addon is superb. maybe it is possible to add repeat button for an album?
#38 introduces a CI pipeline example using Github Workflows. It should be possible to create a workflow that publishes this extension to the Chrome store using this: https://github.com/marketplace/actions/chrome-extension-upload-publish
Secrets will have to be managed by the extension owner, and can be added & obfuscated in the repo settings.
If this is an appealing idea, a workflow could be triggered when a release is published, or when master branch is updated.
Currently, users won't know if there is a new version of the extension. A notification for new versions would be ideal.
Might be possible to implement with: https://developer.chrome.com/apps/notifications
now that preview state is cached, users should be able to easily clear the cache (for the page) by clicking a button at the top of the page. Ideally, inserted into the actual bandcamp menu.
Basically, if you click on the track playbar slider (the little nub that you used to have to grab to drag around) it will jump to another position in the playbar.
This isn't the worst thing but it's a bit strange. It might be an interaction between the original bandcamp code and BES.
It also might not make sense to fix this if a new player is going to be built.
the error handling for chrome.runtime.connect
throughout the extension may not actually be useful.
example:
BandcampEnhancementSuite/src/waveform.js
Lines 26 to 35 in 38341fc
The documentation seems to point to this method as not throwing errors...
It may be that users want to support this project but never end up on the Github page. Adding the Sponsorship link to the extension in some way may help.
Potential place:
Previews should be mutually exclusive.
Currently there is nothing to explicitly inform users that their preview has been saved. Instead it is an implicit change of the history flag UI element.
A tooltip can inform the users that an album preview state was saved by having it pop up above the history flag UI element.
Sometimes the first track cued up on an album page is not the first in the order of the album. While there may be artistic reasons for this, it's annoying.
Soltution:
have JS find first play button and click it twice quickly.
The recent removal of jQuery (#37) resulted in a size reduction of content.js
from 2.62MB to 1.96MB. It's a step in the right direction, but 2MB for a JS bundle is still huge.
The only major imports are winston
and idb
, and it's surprising that these two libraries would include so much code. I suspect that Webpack is polyfilling a lot of code, which may be unnecessary given that the deploy target is an update-enforced ES6-compatible browser.
Webpack should produce a smaller build if the compile target is changed, and if compression and minification for distribution builds are enabled.
Recently found that the preview button will show up on Twitter and mess things up there.
Should be some way to check if it is a bandcamp page.
Using *.bandcamp.com
does not work because some pages are redirected from other domains.
Downloading a large number of albums is annoying.
Generate a list of wget
/curl
commands to download everything after purchase.
Here is an example (second response): https://stackoverflow.com/questions/3665115/how-to-create-a-file-in-memory-for-user-to-download-but-not-through-server
Additionally, parallelizing should be possible with this: https://stackoverflow.com/questions/7577615/parallel-wget-in-bash
Didn't want to get into Git Projects yet so I'm just making an issue as a way to track what's remaining for this release.
This error comes up on album pages:
Error in event handler: TypeError: Cannot read property 'classList' of null
at LabelView.setHistory
it is likely caused by line 44 of label_view.js
which does not check if historybox
exists. On non-label pages these history boxes do not exist.
If a preview
button will not load, try to find out what reason (e.g, vinyl only, no streaming) and tell user.
In the default Bandcamp player, to skip forward the playhead must be targeted with the mouse and dragged.
This feature would add youtube like scrubbing:
Currently, only clicking preview on an album will set the "previewed marker" to "true".
When album pages are loaded directly, they should also set the "previewed marker" to "true".
The major challenge for this feature is the fact that not all albums on a page will have the same domain and this will make using localStorage
difficult. For example, on the moodhut discography, some albums are attached to https://penderstreetsteppers.bandcamp.com instead of https://moodhut.bandcamp.com. Sharing between subdomains is prohibited with browsers.
It looks like moving from localStorage
and towards chrome.storage is the way to go.
This will allow the user to view the tracklist much more easily rather than having to scroll down to the bottom of the page (on some releases this is quite far down).
this can be done by moving:
<table class="track_list track_table" id="track_table"></table>
to be right under
<div class="inline_player "></div>
Preview button does not work with albums with single track
Problem
The way Chrome Storage is implemented is flawed. It stores all data as one item but the maximum number of bytes of an item is too small:
from the documentation: QUOTA_BYTES_PER_ITEM 8,192
Potential Solutions
npm
package stuff is part of this repo but the README does not contain any information about how to setup/run these steps.
npm run package
was not updated when the name of the project changed so the created resources are still called: BandcampLabelView.zip
and contained in this zip is a directory named BandcampLabelView
.
The user facing documentation is sparse at best. All features should be documented including screenshots (or, better, interactive demo).
This documentation is needs better visibility of features on the Chrome store.
there isn't really anything special being done with JQuery so migrating to pure JS would remove a dependency.
The current state allows users to download a .txt
file which provides cURL
commands to download their purchases.
However, it is possible to download the files via JS and server them after they have downloaded.
This would be a far easier and user friendly experience.
On the branch feat/previewed_state_save
, the preview button does not respond properly. It does not save state it the preview window is not closed before moving to the next preview.
Using a distributed database (https://github.com/orbitdb/orbit-db) it should be possible for every user to contribute to a cache of audio data.
This would start with caching and sharing the waveform data but eventually could include other audio feature extraction (bpm, key, etc)
It turns out that the Ids for tracks are available on the player page in a application/ld+json
as show here this can be accessed with:
var jsonld = JSON.parse(document.querySelector('script[type="application/ld+json"]').innerText);
which results in this:
{
"additionalProperty": [
{
"value": 1,
"name": "featured_track_num",
"@type": "PropertyValue"
}
],
"@id": "https://halfpastvibe.bandcamp.com/album/stonks-market",
"keywords": "Electronic, House, dance, electro, techno, Berlin",
"description": "Half Past Vibe Records is pleased to share \"Stonks Market.\"\r\n\r\nThis release marks the first release by Düsseldorf based producer and DJ Anodized. Usually a traditional Deutschland techno aficionado, with this release Anodized flexes his capacity for diversity through tracks flavoured with the roots of house.\r\n\r\nAs an additional bonus feature, included in this release is an edit by label co-founder Dataist.\r\n\r\nOur mission at Half Past Vibe Records is to develop and distribute bleeding-edge auditory dance solutions, to provide disc jockeys and electronic music professionals with the tools they need to deliver effective, high-quality performances and to engage their dancefloor customers.\r\n\r\nWe're here to remind you: Just Be Yourself!",
"datePublished": "19 Sep 2020 14:08:42 GMT",
"numTracks": 4,
"dateModified": "19 Sep 2020 14:08:42 GMT",
"name": "Stonks Market",
"@type": "MusicAlbum",
"@context": "https://schema.org",
"byArtist": {
"additionalProperty": [
{
"value": 857243381,
"name": "band_id",
"@type": "PropertyValue"
}
],
"genre": "https://bandcamp.com/tag/electronic",
"@id": "https://halfpastvibe.bandcamp.com",
"description": "Record label leveraging the latest and greatest technological innovations of the twenty-first-century to deliver top-shelf house and techno to the masses.\n▼\t▼\t▼\[email protected]",
"@type": "MusicGroup",
"name": "Anodized",
"sameAs": [
"http://halfpastvibe.com",
"https://github.com/halfpastviberecords",
"https://soundcloud.com/halfpastviberecords"
],
"image": "https://f4.bcbits.com/img/0021678655_10.jpg"
},
"comment": [
{
"text": [
"Innovative, hard hitting mix out of techno, house and breakbeat vibes.",
"Favorite track: strong disagreement about the quality of the beat"
],
"author": {
"url": "https://bandcamp.com/kzmrkndnsk",
"name": "kzmrkndnsk",
"@type": "Person",
"image": "https://f4.bcbits.com/img/0021797610_10.jpg"
},
"@type": "Comment"
}
],
"image": "https://f4.bcbits.com/img/a4062273676_10.jpg",
"track": {
"@type": "ItemList",
"numberOfItems": 4,
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"additionalProperty": [
{
"value": 2209953934,
"name": "track_id",
"@type": "PropertyValue"
},
{
"value": 386.977,
"name": "duration_secs",
"@type": "PropertyValue"
},
{
"value": "https://t4.bcbits.com/stream/bbbafadb1cafa4a1a8d4bee291e23371/mp3-128/2209953934?p=0&ts=1613221074&t=b026d5d048a5365ed8dbdcfd2294c663fdc5e852&token=1613221074_af77b23dd27eb66b6929783e2424bc37ab2a9813",
"name": "file_mp3-128",
"@type": "PropertyValue"
},
{
"value": true,
"name": "streaming",
"@type": "PropertyValue"
},
{
"value": 1,
"name": "tracknum",
"@type": "PropertyValue"
}
],
"@id": "https://halfpastvibe.bandcamp.com/track/strong-disagreement-about-the-quality-of-the-beat",
"duration": "P00H06M26S",
"name": "strong disagreement about the quality of the beat",
"@type": [
"MusicRecording"
]
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"additionalProperty": [
{
"value": 3907461273,
"name": "track_id",
"@type": "PropertyValue"
},
{
"value": 343.451,
"name": "duration_secs",
"@type": "PropertyValue"
},
{
"value": "https://t4.bcbits.com/stream/213906695805bd1580d52099d4e4c2f2/mp3-128/3907461273?p=0&ts=1613221074&t=0061592332e4c785ad520bac02a0bb92e29edcec&token=1613221074_9ec236532eec0f9af14863bbe6820ac2f516033e",
"name": "file_mp3-128",
"@type": "PropertyValue"
},
{
"value": true,
"name": "streaming",
"@type": "PropertyValue"
},
{
"value": 2,
"name": "tracknum",
"@type": "PropertyValue"
}
],
"@id": "https://halfpastvibe.bandcamp.com/track/chomsky-chumps",
"duration": "P00H05M43S",
"name": "chomsky chumps",
"@type": [
"MusicRecording"
]
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"additionalProperty": [
{
"value": 2405165665,
"name": "track_id",
"@type": "PropertyValue"
},
{
"value": 363.944,
"name": "duration_secs",
"@type": "PropertyValue"
},
{
"value": "https://t4.bcbits.com/stream/527dbc049decbb265c48d81a5437eb9d/mp3-128/2405165665?p=0&ts=1613221074&t=6b5440d61268283fc7a75f583c712c920a36a686&token=1613221074_a2e88965b1369e0e3618ff8e3c09d5f5274eca76",
"name": "file_mp3-128",
"@type": "PropertyValue"
},
{
"value": true,
"name": "streaming",
"@type": "PropertyValue"
},
{
"value": 3,
"name": "tracknum",
"@type": "PropertyValue"
}
],
"@id": "https://halfpastvibe.bandcamp.com/track/anxious-stonks",
"duration": "P00H06M03S",
"name": "anxious stonks",
"@type": [
"MusicRecording"
]
}
},
{
"@type": "ListItem",
"position": 4,
"item": {
"additionalProperty": [
{
"value": 1063313400,
"name": "track_id",
"@type": "PropertyValue"
},
{
"value": 394.419,
"name": "duration_secs",
"@type": "PropertyValue"
},
{
"value": "https://t4.bcbits.com/stream/75ec1922d40ef932e63a8e40ff09164c/mp3-128/1063313400?p=0&ts=1613221074&t=7640c2973549cd7391bc9275528bd40ffdf9e4bf&token=1613221074_c0f7969c6579b82e911dcd77f3a35e363308fac3",
"name": "file_mp3-128",
"@type": "PropertyValue"
},
{
"value": true,
"name": "streaming",
"@type": "PropertyValue"
},
{
"value": 4,
"name": "tracknum",
"@type": "PropertyValue"
}
],
"@id": "https://halfpastvibe.bandcamp.com/track/strong-disagreement-about-the-quality-of-the-beat-dataists-interdimensional-radio-edit",
"duration": "P00H06M34S",
"name": "strong disagreement about the quality of the beat (Dataist's Interdimensional Radio Edit)",
"@type": [
"MusicRecording"
]
}
}
]
},
"albumRelease": [
{
"offers": {
"url": "https://halfpastvibe.bandcamp.com/album/stonks-market#download-buy",
"price": 4,
"availability": "OnlineOnly",
"@type": "Offer",
"priceCurrency": "EUR",
"priceSpecification": {
"minPrice": 4
}
},
"@id": "https://halfpastvibe.bandcamp.com/album/stonks-market#download",
"url": "https://halfpastvibe.bandcamp.com/album/stonks-market#download",
"musicReleaseFormat": "DigitalFormat",
"description": "Includes high-quality download in MP3, FLAC and more. Paying supporters also get unlimited streaming via the free Bandcamp app.",
"@type": [
"Product",
"MusicRelease"
],
"name": "Stonks Market",
"image": "https://f4.bcbits.com/img/a4062273676_10.jpg"
}
]
}
using this, the waveform could be generated on page load for all tracks (or, possible some subset) and then the waveform loaded on track play.
additionally, there is a different location where the audio stream can be accessed that uses the Bandcamp domain (this would remove the need for the extra domain privilege in the manifest). This url can be found by inspecting the audio
element on a user's page when listening to a track.
Add artists and labels to page which is just a giant list of releases you can preview.
from Chrome review:
"Great extension for bandcamp and I use it all the time but there is a bug with the keyboard shortcuts - the key events on an album page are hijacked even when the search bar is active, so that searching for more than one word delimited with spaces is impossible on an album page as pressing space just starts / stops the media. The workaround is to do your searching from the homepage or a label page. Will revise to 5* if this is fixed..."
Some labels have albums at the top of their pages which are formatted with larger photos. It is some sort of promo thing.
These albums do not get a preview button.
likely using https://github.com/jeresig/jquery.hotkeys
required shortcuts:
IDB does not have any built in functionality to import/export database tables.
This is annoying for a few reasons. Right now, data is locked to a user's machine and so migrating to a different machine means their history is lost. Other database stuff (playlist, configurations, etc) may also be valuable to import/export.
This feature could take a few different approaches:
Even though:
// Prevent Logger output during tests
sandbox.stub(dh, "log");
is set in the tests, the logger still prints to screen when running tests
Doing this will likely mean moving away from the IFrame
currently used and creating a background service which loads the desired player page, modifies it, and then serves it to the user.
adding a record to the cart takes too long.
1-click add to cart.
When adding a purchase to the cart, here is the minimum request required:
curl 'https://halfpastvibe.bandcamp.com/cart/cb' \
--data-raw 'req=add&item_type=a&item_id=3895330325&unit_price=1.50&quantity=1band_id=857243381&client_id=47553DD1BB1C596CB470D15D816841095A483E4E449BC0AEB354F655DA82EF15&sync_num=6' \
--compressed
The client_id
is likely the cart ID which appears to be available from a script tag on page load.
It is easy to get the purchase price for releases that have a price but for "pay what you want" there is an issue. Perhaps a default value can be set (say 1 USD) but could be updated in configs by user.
Alternatively, there could be a field next to the "add to cart" button to input a price which would be automatically set to the correct value except for "pay what you want" where the user would be required to enter a number.
The example below only has a Buy the Full Digital Album
link instead of a tracklist. This may be causing the issue.
,
and .
jump forward/backward 1s
CMD
+ Forward Arrow
: jumps forward 10s
CMD
+ Back Arrow
: jumps backwards 10s
CMD
+ Up Arrow
: increase volume by 10%
CMD
+ Down Arrow
: decrease volume by 10%
w
: toggle waveform display
additionally, the values above should be adjustable with user config
this shows an interesting way of keeping track of multiple keypresses. Effectively registers that a key is pressed in a dictionary or array so that it persists as it's pressed. Then you can check different combinations.
Makes the above VERY easy to implement.
Problem: It can be hard to keep track of albums listened to. For example, after a computer restart the Bandcamp pages will be reloaded and you end up at the top of the screen.
Solution: Keep track of the albums which have had the preview button pushed. Make this visible and, possibly, store the "last previewed" somewhere for quick access.
Requirements
MVP:
localstorage
api)Nice to have
Example: CMD + Back Arrow no longer allows user to go back to previous page in browser
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.