Hello everyone,
I recently create a web interface for beets called Beetle. It is based on top of the beet web API and has the following features:
I have made a demo video, where you can see the design of the beast:
Source: La Bécasse / beetle · GitLab
Wow! This looks seriously awesome!
Welcome @labecasse!
What a brilliant design. Functional, timeless and clear. I like it a lot. Am going to install it and play with it.
Thanks for all the work.
Jan
Thanks ! I hope you will enjoy it. Tell me if you have any difficulty to use it 
@labecasse I’m running into some challenges. Things that I can’t get to work. Might be because of the fact that I’m not a developer.
The whole cloning went well. I then installed node.js and npm with the macOS installer.
I got a message that flask-cors was not available on my system so I installed that too.
I added the info to my Beets config.yaml.
But when I entered
npm run build
I got the following error message:
npm ERR! missing script: build
With the other command
npm run dev
I got the message:
npm ERR! missing script: dev
Searching on the internet pointed me to that I had to add information to the package.json but there was already a lot of data entered. So before I mess things up…
Do you have an idea how to get this running?
I also didn’t understand what was ment by
Also copy the content of ~.env.source~ into ~.env~ and edit it, if you need.
And how to do that.
Sorry for these Beetle noob questions.
And thanks for your help!
Best, Jan
Hello @janpeeters, I am glad you are giving a try 
I wonder if you are running the commands in the correct directory. So check that you are in the beetle directory, in which you can find a file named package.json. This file should contain a JSON object with a key scripts in which the commands dev and build are defined exactly as here. I am thinking that your problem may be similar to this issue, but I don’t understand why.
Just do cp .env.source .env and it will be fine. Anyway, it is not related to the previous error.
Hi @labecasse, thanks!
Yes I’m running it in the Beetle director. Did a ‘cd’.
I tried again today after the cp .env.source .env command.
(and thanks for adding making it more clear on your Github page ;-))
When I do
npm run build
The output tells me that the sapper command can’t be found. I’ve looked on the internet if this is something that I can install but couldn’t find it:
> beetle@0.0.2 build
> sapper build --legacy
sh: sapper: command not found
npm ERR! code 127
npm ERR! path /Users/jpeeters/beetle
npm ERR! command failed
npm ERR! command sh -c sapper build --legacy
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jpeeters/.npm/_logs/2021-02-09T10_03_41_157Z-debug.log
I have no idea why sapper
The log tells the following:
0 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'start' ]
1 info using npm@7.5.1
2 info using node@v15.8.0
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:/usr/local/lib/node_modules/npm/npmrc Completed in 1ms
5 timing config:load:builtin Completed in 1ms
6 timing config:load:cli Completed in 2ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:/Users/jpeeters/beetle/.npmrc Completed in 1ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:/Users/jpeeters/.npmrc Completed in 0ms
11 timing config:load:user Completed in 0ms
12 timing config:load:file:/usr/local/etc/npmrc Completed in 0ms
13 timing config:load:global Completed in 0ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 1ms
16 timing config:load:setUserAgent Completed in 0ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 9ms
19 verbose npm-session 62ee1bed90314060
20 timing npm:load Completed in 22ms
21 timing command:run-script Completed in 86ms
22 verbose stack Error: command failed
22 verbose stack at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/index.js:64:27)
22 verbose stack at ChildProcess.emit (node:events:378:20)
22 verbose stack at maybeClose (node:internal/child_process:1067:16)
22 verbose stack at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
23 verbose pkgid beetle@0.0.2
24 verbose cwd /Users/jpeeters/beetle
25 verbose Darwin 17.7.0
26 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "start"
27 verbose node v15.8.0
28 verbose npm v7.5.1
29 error code 1
30 error path /Users/jpeeters/beetle
31 error command failed
32 error command sh -c node __sapper__/build
33 verbose exit 1
I also tried the command:
BEETLE_API=http://localhost:8337 npm run start
this gives the following output.
> beetle@0.0.2 start
> node __sapper__/build
node:internal/modules/cjs/loader:928
throw err;
^
Error: Cannot find module '/Users/jpeeters/beetle/__sapper__/build'
at Function.Module._resolveFilename (node:internal/modules/cjs/loader:925:15)
at Function.Module._load (node:internal/modules/cjs/loader:769:27)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:76:12)
at node:internal/main/run_main_module:17:47 {
code: 'MODULE_NOT_FOUND',
requireStack: []
}
npm ERR! code 1
npm ERR! path /Users/jpeeters/beetle
npm ERR! command failed
npm ERR! command sh -c node __sapper__/build
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/jpeeters/.npm/_logs/2021-02-09T10_05_13_167Z-debug.log
Does that give more info?
Thanks again, Jan
Ok, I think you are almost done. You certainly just forgot the installation step: npm install.
yes indeed. I thought I did, but seemingly didn’t. Noob award!
All works fine now and I’m going to try it out!
Thanks for your help.
Best, Jan
It works nicely on the machine on which I’ve installed it. Great work!
One thing I’m not able to get working is showing album artwork if accessing the server on another local network computer. I can search and see the search results just not the art work. Do you have a idea what might cause this and how to solve it?
I have Beets and all my music on a MacMini in a cupboard in the hallway and would love to play it on my work computer.
I noticed that when I want to view music by Paul Simon I have to press P. I’m not sure if this is viable to implement but maybe Beetle could show artists under their last name?
Thanks again, Jan
In order to make it work on your local network, you have to configuration the BEETLE_API variable, which set the address of the beets web server. By default, it is set to http://localhost:8337, which makes sense when you use it on the same machine beetle and beets are running. So, you should change the variable to http://LOCAL_IP:8337, where LOCAL_IP is the local IP of your MacMini (see ifconfig to get it).
You have to edit the .env and modify its content to BEETLE_API=http://LOCAL_IP:8337 and run:
npm run build
BEETLE_API=http://LOCAL_IP:8337 npm run start
and now the artworks should be visible from your other computer on http://LOCAL_IP:3000
(I still have to find a way to remove the need of passing the variable for the start command …)
Yes I understand, but I see that I should have sort using the albumartist_sort value to distinguish between artists name made of first and last names (e.g. Paul Simon has the “Simon, Paul” value) and the others (e.g. Green Day, Pink Floyd, Muse …, whose value is equal to the artist name).
Nice idea, thanks (I updated Beetle) !
Hello,
Thanks for this release, it looks great !
Any chance it could support an URI prefix ? I’d like to serve it behind an Apache proxy with the /beetle prefix, but it’s currently trying to download everything from /
Hello,
Thanks you for your interest !
It was definitively missing, so I just added the variable BEETLE_BASE that you can configure in the .env file.
@labecasse Thank you for working on this!
I got it up and running, but I have two problems:
I do not see any album art. I have set my .env correctly to my server’s hostname on the LAN. My issue is that beets web is not serving the album art: e.g. http://myserver.lan:8337/album/42/art returns 404 for the album, even though every track of the album has the album art embedded in the music file. I thought maybe this was because I only keep album art embedded in metadata, and don’t write out cover.jpg files or whatever, but I tried creating a cover.jpg and restarting beet web and it still 404s. What am I missing?
I get a 500 server error every time I click anything, or search for anything. But if I reload the page with Ctrl+R, the query loads. Unfortunately, that clears the currently playing song and play queue, so it’s only limitedly useful as a workaround. I tried with both npm run start and npm run dev but nothing shows up on the console in response to the 500. Is there a log file somewhere? Or a way to enable verbose/debugging mode to learn more about the errors?
Also, questions!
The default view is albums, right? But only by recent? Is an alphabetical albums view not implemented yet? And are there plans to implement a multi-column list view like many players have? Here’s an example of what I mean from the iBroadcast web interface:
Thanks again for sharing this work!
Thanks for trying Beetle 
To answer to your problems:
Yes, I think that the cover.jpg file is required. Are you using the fetchart plugin ? And have you run the command beet fetchart [-f] [query] for the album 42 in order that the beet database contains the link to the cover file ?
I think this error comes from the fact the connection between your browser and the beet api (the one from beet web) is blocked somehow. The fact is that the framework on which beetle is build, handles the connection to beet api the following way: (i) the beetle server queries the beet api and serves a completed HTML page, (ii) for the next pages, the browser directly queries the beet api and update the page. It seems that your error appears in the case (ii), so you should get more details in the browser console.
Indeed, the default view is albums reversely sorted by added date and there is no alphabetical view, but it should be very easy to add it by changing the query at this line. I don’t have planned to implement a multi-column view and I currently don’t have the time to implement it. I also think that it will make the project much more complicated. If you are ready to spend time to create it, I will help you a bit
I’d have a hopefully lighter suggestion : would it be possible to have “play” and “add to playlist” buttons on the search results list ? as on an album page.
It seems quite natural to have these button. So, I will try to add them in a near future.
I implemented it : play controller in search results (2a1fe488) · Commits · La Bécasse / beetle · GitLab. Enjoy
I recently added a new page to Beetle for displaying playlists. It looks as follow:
It relies on the beet playlist plugin which provides a easy way to query the playlist tracks from the web API of Beet.
The only problem is that this plugin do not allow to list the available playlists, so the index page for playlists requires that the playlist list is provided in the configuration file (see details on gitlab).
I look forward to finding a solution to gather the playlist list automatically.
