tamland/airsonic-refix

Modern web UI for Subsonic compatible servers

airsonic-refix's Issues

404 refreshing tab / navigating direct to URL

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.

[Bug] Title Numbers counting

Fallback to count entries for TrackID if IDTag is unavailable

Left Sidebar

Please tell me how to fix the left column without scrolling
tkanks

Fails to play back due to "format=raw" disregarding transcoding requirements.

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.

[Question] How to build to support nginx proxied version

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/ ?

LDAP Auth

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

Gapless

Hi, does this client support gapless playback?

[Bug] Special Chars in Search no result (Blank Page)

No result e.g. if I use a special char like !

Work

Blank Page (issue)

search?q= Blank searchbar show a blank page too and I think a urlencode is needed or I'm wrong -> ?q=!

refix group by "album artist" instead of "album" tag

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

refix:

airsonic-advanced

Does not load HD album covers

For my subsonic Navidrome library, most songs have 1000 x 1000 covers (in the metadata). The software refuses to load them entirely.

[Enhancement] Show Album Year in Artist view

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 ;)

How to make it work?

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.

Cannot read properties of undefined

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)

"Could not log in. (Failed to fetch)" error

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?

Doesn't work with Ampache

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?

Errors when building

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

[Feature Request] Clicking titles on home view should show view for that heading exclusively

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.

• Recently played
• Recently added
• Most played
• Random

[Feature Request] Album tiles need "..." actions menu like tracks.

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:

• "Play album next [shuffled]" Expected result is that the tracks of the album are inserted into the play queue after the currently playing track either in track order or in random order (shuffled).
• "Add album to queue [shuffled]". Expected result is that the tracks of the album are inserted at the end of the play queue either in track order or in random order (shuffled).
• "Star/Unstar album". Expected result is that the album is starred/unstarred appropriately.

[Question] Running proxied behind NGINX?

I want to run this app proxied behind an NGINX reverse proxy. I feel like I'm going to have two issues:

1. Can I configure this app to run from a subfolder? i.e., http://example.com/airsonic-frontend or something similar.
2. Am I correct in assuming that the connection to the actual Airsonic server is done from the client browser, and not from the web server hosting the app? Several Airsonic Android apps provide a configuration option for a primary and secondary URL for the same Airsonic server so that it can be accessed from both inside (directly) and outside your home network (proxied). Is this sort of configuration possible? I feel like that's more of a feature request.

[Bug] Playback / pause state is broken on iOS (Mobile)

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

Video.mp4

[Bug] Empty Queue least one Track still there

Queue don't clear fully the list

[Feature Request] Repeat modes in playlist

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:

• Repeat (behaves as it does currently: when the end of the play queue is reached, it starts over from the beginning)
• Normal (Stops playing when it reaches the end of the play queue)

"Albums" vs "CDs"

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

Support for ARM/ARM64

Would ARM64 support be possible?

[Feature Request] Show/Edit Track Rating (Navidrome)

Navidrome has a 5-star rating system, besides the Favourite system. But no such features are translated to the Airsonic Refix web client.

Using a different font for the entire app

Is there anyway to customize the font used globally? I've tried lots already.

Playback no sound

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.

[Proposal] Ability to change the instance name (`airsonic`) and subname (`refix`)

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 🙂

[Feature Request] Need a way to tell what version of the frontend is running.

Need the equivalent of a "Help / About" menu just to show the version or build date or something.

Use relative URLs

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>

[Feature Request] Have the ability to configure the airsonic server in advance

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.

[Feature Request] Last FM scrobbling

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.

http://www.subsonic.org/pages/api.jsp#scrobble

Download button

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!

"Now Playing" gets confused when the same track is added more than once.

It seems that if you add the same track to the "now playing" list more than once, it gets confused and thinks they are actually the same playlist entry. In the screenshot below, the 3rd track is actually the one playing, but both the 1st and 3rd are showing as such.

[Feature Request] Add random play / add to queue buttons

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

[Feature Request] Add whole Albums to Playlists via drag and drop

That would save a lot of time for building discography playlists :)

[Feature request] add media folder handling

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.

Be able to change the default sorting on the library tabs

I'd like to be able to change the default sorting on the different library tabs.

Add support for running Docker container as non-root user

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.

Can't log in using airsonic-advanced

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.

[Feature request] Ability to control Jukebox

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

Could not log in. (Network Error)

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)"

[Bug] If a new user has not played anything, "Home" tab does not load properly.

I believe the "recently played" and "most played" APIs are not returning with any results, so the home page never finishes loading.

[Feature Request] Optionally sort artist's albums chronologically

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.

[Interface Request] List View rather Than Tiles (Gallery)

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?

[Feature request] Download all (i.e an album)

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).

[Bug/Feature Request] Shuffle favourites tracks

When playing all favourite tracks, there is no way to shuffle playback order.

Not sure if this is a bug or a missing feature :)

[Feature Request] Volume control

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.

gonic

Add support for artist art (navidrome)

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>