pwr
January 19, 2020, 10:11am
1
Hello all,
I have my music collection in beets and play everything via mpd. I’ve given up in my quest to find a functional mpd client that allows browsing albums by cover art, but I wondered if anyone knew if this is possible just with beets?
I don’t mean the ability to interact with albums at all, just to a visual grid representation that I can scroll through until my heart is content.
Any ideas?
adrian
January 19, 2020, 5:08pm
2
Hi! That’s an interesting dream… it seems like it would actually not be that hard to build such a frontend for the web
plugin if scrolling through album art images in a web browser appeals. A hypothetical JavaScript tool could load all the images for all albums through the existing API.
valrus
December 29, 2024, 3:30pm
3
Four years later, I saw this thread and I’ve opened a PR adding this to the web plugin!
beetbox:master
← valrus:album-view
opened 06:14AM - 29 Dec 24 UTC
## Description
This PR adds a "browse albums" page to the web plugin's UI, wi… th a couple tweaks (via query params, to preserve backwards compatibility) to the API in order to enable it. This is a feature that's been [requested](https://discourse.beets.io/t/anyone-know-a-way-to-browse-by-cover-art/1073) and [kind of hacked together](https://github.com/beetbox/beets/discussions/4063) in the past. This implementation has the following characteristics:
1. Album covers displayed in a grid, sorta similar to [CoverGrid](https://www.suruatoel.xyz/codes/mcg) for mpd.
2. The grid is not interactable (at this time) — it's only for browsing.
3. Albums will be loaded in _random_ order. This is more fun than seeing the alphabetically first albums on every load.
4. Album covers load as they scroll into view, to avoid making thousands of requests to the server at once for big libraries. (But I think it's still possible to send a lot of requests at once by dragging the scrollbar.)
5. It's possible to switch between the item view and album browser and the playing track will continue to play.
It includes assorted other improvements to the web plugin as well. A list summarizing the changes:
1. Entering a search query now shows "Loading..." in the results list while the request is in progress.
2. The search form is now "sticky" and stays at the top of the results list when you scroll down.
3. The player now shows the name of the playing song, if one is playing.
4. Most CSS has been converted from floats to CSS flexbox and grid as appropriate. (This may break compatibility with some very old browsers, so I'm fine reverting it if it's important to keep that compatibility.)
5. [underscore.js](https://underscorejs.org/) and [backbone.js](https://backbonejs.org/) have been updated to the most recent versions. (Ditto potential compatibility issues; I haven't checked but I will if it's important.)
6. Non-breaking web API change: if a request to the `album_art` route includes the `b64` query string (regardless of its value), the art data will be returned as base64 data rather than binary. This was mainly because this conversion was easier (for me) to do in Python than in JavaScript.
7. Non-breaking web API change: if a request to the `all_albums` route includes the `random` query string (regardless of value), the albums will be returned in random order.
Here is what the browser looks like. I figured others will likely have libraries like mine where the album art situation is patchy so I tried to make the alt text look nice:
![beets_browser](https://github.com/user-attachments/assets/de629d28-73d0-4b95-810f-5cce2fd53236)
## To Do
I haven't done any of these yet because I'm not sure this will even get merged, much less what from its current state will end up making it in. It doesn't really change any of the documented functionality of the web plugin. And there are no tests as the JS is completely untested and the API changes are not straightforward or particularly interesting to test (randomness? base-64 encoding?)
That said, I'm happy to do any of these that reviewers would like me to and I'll certainly add a changelog entry if this gets to a mergeable state.
- [ ] Documentation.
- [ ] Changelog.
- [ ] Tests.