tamland / airsonic-refix Goto Github PK
View Code? Open in Web Editor NEWModern web UI for Subsonic compatible servers
License: GNU Affero General Public License v3.0
Modern web UI for Subsonic compatible servers
License: GNU Affero General Public License v3.0
For my subsonic Navidrome library, most songs have 1000 x 1000 covers (in the metadata). The software refuses to load them entirely.
When playing all favourite tracks, there is no way to shuffle playback order.
Not sure if this is a bug or a missing feature :)
Artists & Genres display as generic tiles in a gallery view but it's unlikely that either will acquire artwork (unlike album covers). Would it be possible to add a List View instead?
This one should be pretty straightforward. The airsonic client should call the scrobbling API after a song has been playing for some amount of time, 5 or 10 seconds should be sufficient. Just in order to not scrobble tracks as you're skipping through them.
i see that someone else posted the same issue and it was closed but i want to explain more...
i have the same problem and after checking i found out that airsonic-advanced unite the albums by "album" tag and refix by "album artist",
that's why compilation albums that were tagged with same album name for all files but different album artist (should correctly be "various artists") will show correct in airsonic but will show as seperate albums in refix.
it will be great if we can change the unity manualy (can also be by folder) or hard coded.
thanks
I want to run this app proxied behind an NGINX reverse proxy. I feel like I'm going to have two issues:
I'd like to be able to change the default sorting on the different library tabs.
I use LDAP to authentic my users in Airsonic, but it doesn't seem to work with refix.
Could not log in. (Wrong username or password, but try authenticating via non-hashed password.)
I can login to vanilla Airsonic just fine
Hi, does this client support gapless playback?
Apparently the albums in the Artist view are sorted by year in decending order. It would be nice to also display the year for each album. On the other hand, displaying the Artist name for each album in the Artist view might not be necessary if space is considered precious ;)
It would be great if the clientside could download an album or an individual song directly from the web frontend. Subsonic's API supports this functionailty!
I'm already having to do a custom build to make the project work on ARM. So I might as well also change what's necessary to make it support being behind an nginx proxy, as mentioned in #2.
What do I need to change to make the app available at, say, http://example.com/music/ ?
It would be nice to have a "..." or "Actions" menu on both the album view (that shows the album's tracks), and on each album tile in views that show lists of albums. The menu should contain the following options:
When I start a track, the track plays and the playback progress bar fills, but there is no sound. If I click the play button, I start hearing the track and the pause button appears instead of the play button. If the track ends and the next track starts playing, the issue occurs again.
I'm using the latest docker image and I've tried Firefox and Chromium on Linux.
When I try to build this on my computer using the specified development or production methods (yarn serve), I get a bunch of errors. The docker container does seem to be functioning.
error in ./src/player/Player.vue?vue&type=script&lang=ts&
Module parse failed: Unexpected token (20:32)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| handler(track) {
> document.title = [track?.title, track?.artist || track?.album, 'Airsonic (refix)'].filter(x => !!x).join(' • ');
| }
|
@ ./src/player/Player.vue?vue&type=script&lang=ts& 1:0-324 1:340-343 1:345-666 1:345-666
@ ./src/player/Player.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app/layout/Default.vue?vue&type=script&lang=ts&
@ ./src/app/layout/Default.vue?vue&type=script&lang=ts&
@ ./src/app/layout/Default.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/app/App.vue?vue&type=script&lang=ts&
@ ./src/app/App.vue?vue&type=script&lang=ts&
@ ./src/app/App.vue
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.16.240:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
error in ./src/player/store.ts
Module parse failed: Unexpected token (354:44)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| audio.setVolume(storedMuteState ? 0.0 : storedVolume);
> const url = store.getters['player/track']?.url;
|
| if (url) {
@ ./src/main.ts 11:0-44 19:0-10
@ multi (webpack)-dev-server/client?http://192.168.16.240:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
error in ./src/shared/api.ts
Module parse failed: Unexpected token (37:49)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
|
| if (subsonicResponse.status !== 'ok') {
> const message = subsonicResponse.error?.message || subsonicResponse.status;
| const err = new Error(message);
| return Promise.reject(err);
@ ./src/main.ts 9:0-35 16:16-19
@ multi (webpack)-dev-server/client?http://192.168.16.240:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
error in ./src/shared/config.ts
Module parse failed: Unexpected token (3:17)
File was processed with these loaders:
* ./node_modules/cache-loader/dist/cjs.js
* ./node_modules/babel-loader/lib/index.js
* ./node_modules/ts-loader/index.js
* ./node_modules/eslint-loader/index.js
You may need an additional loader to handle the result of these loaders.
| const env = window.env;
| export const config = {
> serverUrl: env?.SERVER_URL || ''
| };
@ ./src/auth/service.ts 4:0-41 17:18-24 24:9-15
@ ./src/main.ts
@ multi (webpack)-dev-server/client?http://192.168.16.240:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts
When testing the web app hosted on Netlify before deploying myself, I would get "media not suitable" errors.
Opening the web console, I found the attempted playback links, and opened separately, which gave an error that "No video with supported format and MIME type found."
On a limb, I tried changing the format=raw
parameter in the playback URL. Instantly the browser downloaded the file just fine to play.
Is there a reason the airsonic-refix app is expecting a 'raw' format file when I've configured transcoding on the backend? My files are mostly Apple Lossless, which isn't supported by browser local playback.
Currently i have multiple folders/libraries with different audio material. E.g. one for musik one for audio books. In the stock UI it is perfectly possible to only show content from one directory and hide the other.
Second i like to browse my libraries by folder rather media tag. An option to switch like in the original UI and maybe enable list view instead of tiled for long lists would be fantastic.
Hi tamland,
Thanks for your hard work. I've deployed airsonic-refix with the latest Docker image:
Build: 3d1febf239100222d9da9aafa32ae776d27e3ba6
Build date: 2022-01-01
airsonic-refix seems to group albums differently than airsonic-advanced's default frontend. Example:
Is that expected?
I'll be glad to help investigate further.
Here's a dump of the tags from folders Compilations - 2014 - Bromance/CD{1,2}
.
Best,
Vincent
For example, when the user clicks on the "Recently Played" header on the home view, it should open a "Recently Played" view, where more (and only) recently viewed albums would be listed. If you play 10 songs from the random playlist, your 10 most recently played albums are completely changed.
Likewise, the same treatment should be given to "Recently Added", "Most Played", and "Random"
Expanding on this, perhaps the Home menu item on the left should just be replaced by (or in addition to) 4 new menu items that open views showing exclusively the results of one API call with 40 or 50 albums instead of 10.
Navidrome has a 5-star rating system, besides the Favourite system. But no such features are translated to the Airsonic Refix web client.
This touches on #23 "Download button", as a result of which I see that download functionality has been implemented per track. Is it possible / likely to implement download for an entire album as the legacy UI has with the "Download All" link? I would suggest it should go in the top-level album menu as highlighted below:
This will be very useful for offline listening. Talking of which, a secondary question; is it possible to implement offline functionality to choose songs to hear offline? I see it's already PWA-installable (indeed I use the PWA on my OnePlus Nord).
I have Airsonic-refix running on my unRAID server in a Docker container. It points to Navidrome running on the same server. Internally (local IPs), everything works great.
I use Swag/NGINX to route 443 traffic from the outside for most of my apps - Plex, Emby, etc. When I set it up for Airsonic-refix, I indeed get the login screen, but when I enter credentials, I get the error, "Could not log in. (Failed to fetch).
https://imgur.com/a/D4GPp8w
I'm using the latest version of both Docker containers. As I said, everything works internally with local IPs. My other containers accessed from the outside (through Cloudflare) work fine.
Thoughts?
The scripts aren't loaded if I install it in a subdirectory. Please either remove the "/" from JS/CSS paths in index.html or add <base href>
Trying to log in prints this to the console:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://prayujt.com:4040/rest/ping?u=prayuj&s=.... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.
I'm not using any reverse proxy (nginx, apache) to run airsonic-advanced itself.
That would save a lot of time for building discography playlists :)
Hello !
I would like to know if you would be ok to add a new "feature" in your project. The ability to change the name and subname aside of the logo ?
I'll provide a PR if you don't mind, and would be happy to discuss about it with you 🙂
Hello!
The artist art in airsonic-refix does not show up, even though my navidrome instance does return artist art. This is a pain, because every artist in the list now shows the default image.
As far as I can tell, airsonic-refix fetches artist art at /rest/getCoverArt
, but navidrome returns the artist art URL in /rest/getArtist
. This way of fetching artist art has been introduced in subsonic API v1.16.1 (2018) (Relevant code)
Would you consider implementing the subsonic API v1.16.1 way of fetching artist art as a fallback?
Here's an example request. Note the artistImageUrl
in the XML response.
GET https://demo.navidrome.org/rest/getArtist?id=e49c609b542fc51899ee8b53aa858cb4&v=1.15.0&u=demo&s=abcdef&t=2a1f09821be9a1ed948a8eed15a240a2&c=dev
<subsonic-response
xmlns="http://subsonic.org/restapi" status="ok" version="1.16.1" type="navidrome" serverVersion="0.47.5 (86fe1e3b)">
<artist id="e49c609b542fc51899ee8b53aa858cb4" name="Ugress" albumCount="4" artistImageUrl="https://i.scdn.co/image/ab67616100005174c8ea74862d02428c4c394249">
<album id="853353e766c2d8d05cf1091aae4dbcd7" parent="e49c609b542fc51899ee8b53aa858cb4" isDir="true" title="Kosmonaut" name="Kosmonaut" album="Kosmonaut" artist="Ugress" year="2006" genre="Electronic" coverArt="al-853353e766c2d8d05cf1091aae4dbcd7" duration="913" playCount="530" created="2021-01-19T19:09:16.759425233Z" artistId="e49c609b542fc51899ee8b53aa858cb4" userRating="3" songCount="4" isVideo="false"></album>
<album id="d50fb09e4b2647b529c4d42560cb2379" parent="e49c609b542fc51899ee8b53aa858cb4" isDir="true" title="Retroconnaissance" name="Retroconnaissance" album="Retroconnaissance" artist="Ugress" year="2006" genre="Electronic" coverArt="al-d50fb09e4b2647b529c4d42560cb2379" starred="2022-09-09T10:54:10Z" duration="801" playCount="679" created="2021-01-19T19:09:16.774976676Z" artistId="e49c609b542fc51899ee8b53aa858cb4" userRating="5" songCount="4" isVideo="false"></album>
<album id="4d2227515a538fc9650d77189ea75ec2" parent="e49c609b542fc51899ee8b53aa858cb4" isDir="true" title="Sophisticated Wickedness" name="Sophisticated Wickedness" album="Sophisticated Wickedness" artist="Ugress" year="2006" genre="Electronic" coverArt="al-4d2227515a538fc9650d77189ea75ec2" starred="2022-09-19T13:49:53Z" duration="803" playCount="807" created="2021-01-19T19:09:16.820448904Z" artistId="e49c609b542fc51899ee8b53aa858cb4" userRating="3" songCount="5" isVideo="false"></album>
<album id="224562e534e51b2f4c61e1dfcc95aa4d" parent="e49c609b542fc51899ee8b53aa858cb4" isDir="true" title="Chromosome Corrupt EP" name="Chromosome Corrupt EP" album="Chromosome Corrupt EP" artist="Ugress" year="2007" genre="Electronic" coverArt="al-224562e534e51b2f4c61e1dfcc95aa4d" duration="945" playCount="731" created="2021-01-19T19:09:16.747615522Z" artistId="e49c609b542fc51899ee8b53aa858cb4" userRating="3" songCount="4" isVideo="false"></album>
</artist>
</subsonic-response>
Currently the entrypoint script writes the env.js
file to a root-owned folder, so starting the Docker container as non-root causes this to fail. One standard approach is to put env.js
in a subfolder that can be mounted as a volume instead, like /var/www/html/env/env.js
. That way the Docker container can be set to start as the same user who owns the mounted volume.
The /var/www/html/env/
directory can exist within the image (owned by root) so that anyone wanting to run the server like before, as root, it will still work fine.
Sometimes I just want the music to stop at the end of the play queue. There should be at least two 'repeat' modes for the play queue:
Hi.
I am using airsonic not only for streaming but often also the jukebox functionality. I would love to see the possibility to control jukebox via airsonic-refix.
Cheers
Hello
it would be nice having same feauture as airsonic with a random play button on some menus like recently added or genre browsing so that with one click i can add to play queue all songs in random order
thx
Would ARM64 support be possible?
Controlling the volume of my music with the system's volume slider obviously works, but it also controls everything else!
Clearly, this app needs its own volume slider.
I think I would go with the Google Play Music style of placing it between the skip/play/pause/back control set and the times on the lower right.
Is there anyway to customize the font used globally? I've tried lots already.
When I try to connect this to an Ampache server, it throws an error. Ampache uses the Subsonic API, and I assume this does as well. Is there anything I can do to get this to work?
I know I already mentioned this issue, but I thought I'd break it out into its own item for tracking.
I only plan to use this frontend with my personal Airsonic server, so I'd like to be able to configure the frontend to use that server exclusively and have it not even show the server field in the login screen, or at least have the value already populated on the login screen.
I believe the "recently played" and "most played" APIs are not returning with any results, so the home page never finishes loading.
Please tell me how to fix the left column without scrolling
tkanks
I have airsonic running in Ubuntu 18.04 and I want to use this frontend but I don't know how to do it.
I downloaded the code from git and tried the command "yarn install" but the only I got was:
"00h00m00s 0/0: : ERROR: [Errno 2] No such file or directory: 'install'"
First time using yarn, so I am kind of lost.
Need the equivalent of a "Help / About" menu just to show the version or build date or something.
A friend told me he can't pause the player after playback on mobile view.... He tried other browser like Opera / Chrome without success. (Footer Player)
Update:
Volume control does not work too.... and some another trigger in control elements
When I open podcast menu, it toast:
Cannot read properties of undefined (reading 'length')
TypeError: Cannot read properties of undefined (reading 'length') at Ln.normalizePodcast (https://hostname/js/app.5c7e5459.js:1:73100) at Array.map (<anonymous>) at Ln.getPodcasts (https://hostname/js/app.5c7e5459.js:1:71530) at async a.created (https://hotname/js/app.5c7e5459.js:1:49720)
The inputs from issue #1 were helpful, however I'm stuck at the "login"
I'm running airsonic and airsonic-frontend on the same machine (raspberry pi 4)
I'm not an node/npm user and the only way I understand to start the frontend server is using:
sudo yarn serve
For the server I tried
http://server-ip:8080/airsonic
http://localhost:8080/airsonic
http://server-ip:8080/
http://localhost:8080/
all give me "Could not log in. (Network Error)"
Thanks for a great project. Works great on my Firefox on Android. However when I come back to the tab after some time and Firefox reloads the tab, I get a 404 and have to delete the URL path after the server name and reload everything.
There is definitely a use case for listing the albums of a particular artist alphabetically, but more often than not, I prefer to see them listed chronologically.
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.