airsonic / airsonic-ui

[EXPERIMENTAL] Angular based UI Airsonic

Airsonic

Airsonic isn't maintained anymore, you should migrate to airsonic-advanced instead.

---

What is Airsonic?

Airsonic is a free, web-based media streamer, providing ubiquitous access to your music. Use it to share your music with friends, or to listen to your own music while at work. You can stream to multiple players simultaneously, for instance to one player in your kitchen and another in your living room.

Airsonic is designed to handle very large music collections (hundreds of gigabytes). Although optimized for MP3 streaming, it works for any audio or video format that can stream over HTTP, for instance AAC and OGG. By using transcoder plug-ins, Airsonic supports on-the-fly conversion and streaming of virtually any audio format, including WMA, FLAC, APE, Musepack, WavPack and Shorten.

If you have constrained bandwidth, you may set an upper limit for the bitrate of the music streams. Airsonic will then automatically resample the music to a suitable bitrate.

In addition to being a streaming media server, Airsonic works very well as a local jukebox. The intuitive web interface, as well as search and index facilities, are optimized for efficient browsing through large media libraries. Airsonic also comes with an integrated Podcast receiver, with many of the same features as you find in iTunes.

Based on Java technology, Airsonic runs on most platforms, including Windows, Mac, Linux and Unix variants.

History

The original Subsonic is developed by Sindre Mehus. Subsonic was open source through version 6.0-beta1, and closed-source from then onwards.

Libresonic was created and maintained by Eugene E. Kashpureff Jr. It originated as an unofficial("Kang") of Subsonic which did not contain the Licensing code checks present in the official builds. With the announcement of Subsonic's closed-source future, a decision was made to make a full fork and rebrand to Libresonic.

Around July 2017, it was discovered that Eugene had different intentions/goals for the project than some contributors had. Although the developers were hesitant to create a fork as it would fracture/confuse the community even further, it was deemed necessary in order to preserve a community-focused fork. To reiterate this more clearly:

Airsonic's goal is to provide a full-featured, stable, self-hosted media server based on the Subsonic codebase that is free, open source, and community driven.

Pull Requests are always welcome. Keep in mind that we strive to balance stability with new features. As such, all Pull Requests are reviewed before being merged to ensure we continue to meet our goals.

License

Airsonic is free software and licensed under the GNU General Public License version 3. The code in this repository (and associated binaries) are free of any "license key" or other restrictions. If you wish to thank the maintainer of this repository, please consider a donation to the Electronic Frontier Foundation.

The Subsonic source code was released under the GPLv3 through version 6.0-beta1. Beginning with 6.0-beta2, source is no longer provided. Binaries of Subsonic are only available under a commercial license. There is a Subsonic Premium service which adds functionality not available in Airsonic. Subsonic also offers RPM, Deb, Exe, and other pre-built packages that Airsonic currently does not.

The cover zooming feature is provided by jquery.fancyzoom, released under MIT License.

The icons are from the amazing feather project, and are licensed under MIT license.

Usage

Airsonic can be downloaded from GitHub.

Please use the Airsonic documentation for instructions on running Airsonic.

Community

We have several places outside of github for community discussion, questions, etc:

• #airsonic:matrix.org on Matrix
• #airsonic on IRC
• airsonic subreddit

Note that the Matrix room and IRC channel are bridged together.

airsonic-ui's Issues

Cannot connect to local server

Not sure what I'm missing here, or how I can debug further..

ERROR DOMException [NetworkError: "A network error occurred."
code: 19
nsresult: 0x80530013
location: http://localhost:4200/polyfills.bundle.js:5289]  vendor.bundle.js:58542:5
	defaultErrorLogger http://localhost:4200/vendor.bundle.js:58542:5
	["../../../core/@angular/core.es5.js"]/</ErrorHandler.prototype.handleError http://localhost:4200/vendor.bundle.js:58602:9
	["../../../core/@angular/core.es5.js"]/</PlatformRef_.prototype._bootstrapModuleFactoryWithZone/</</<.next http://localhost:4200/vendor.bundle.js:62025:119
	["../../../core/@angular/core.es5.js"]/</EventEmitter.prototype.subscribe/schedulerFn< http://localhost:4200/vendor.bundle.js:61157:36
	["../../../../rxjs/Subscriber.js"]/SafeSubscriber.prototype.__tryOrUnsub http://localhost:4200/vendor.bundle.js:12472:13
	["../../../../rxjs/Subscriber.js"]/SafeSubscriber.prototype.next http://localhost:4200/vendor.bundle.js:12419:17
	["../../../../rxjs/Subscriber.js"]/Subscriber.prototype._next http://localhost:4200/vendor.bundle.js:12359:9
	["../../../../rxjs/Subscriber.js"]/Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:12323:13
	["../../../../rxjs/Subject.js"]/Subject.prototype.next http://localhost:4200/vendor.bundle.js:12067:17
	["../../../core/@angular/core.es5.js"]/</EventEmitter.prototype.emit http://localhost:4200/vendor.bundle.js:61143:54
	forkInnerZoneWithAngularBehavior/zone._inner<.onHandleError/< http://localhost:4200/vendor.bundle.js:61434:57
	["../../../../zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.invoke http://localhost:4200/polyfills.bundle.js:2937:17
	["../../../../zone.js/dist/zone.js"]/</</Zone.prototype.run http://localhost:4200/polyfills.bundle.js:2687:24
	["../../../core/@angular/core.es5.js"]/</NgZone.prototype.runOutsideAngular http://localhost:4200/vendor.bundle.js:61366:68
	forkInnerZoneWithAngularBehavior/zone._inner<.onHandleError http://localhost:4200/vendor.bundle.js:61434:13
	["../../../../zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.handleError http://localhost:4200/polyfills.bundle.js:2941:17
	["../../../../zone.js/dist/zone.js"]/</</Zone.prototype.scheduleTask http://localhost:4200/polyfills.bundle.js:2788:17
	["../../../../zone.js/dist/zone.js"]/</</Zone.prototype.scheduleMacroTask http://localhost:4200/polyfills.bundle.js:2804:20
	patchXHR/sendNative</< http://localhost:4200/polyfills.bundle.js:5314:24
	patchMethod/proto[name] http://localhost:4200/polyfills.bundle.js:3819:24
	["../../../common/@angular/common/http.es5.js"]/HttpXhrBackend.prototype.handle/< http://localhost:4200/vendor.bundle.js:29108:13
	["../../../../rxjs/Observable.js"]/Observable.prototype._trySubscribe http://localhost:4200/vendor.bundle.js:11812:20
	["../../../../rxjs/Observable.js"]/Observable.prototype.subscribe http://localhost:4200/vendor.bundle.js:11800:60
	subscribeToResult http://localhost:4200/vendor.bundle.js:16711:20
	["../../../../rxjs/operator/mergeMap.js"]/MergeMapSubscriber.prototype._innerSub http://localhost:4200/vendor.bundle.js:15430:18
	["../../../../rxjs/operator/mergeMap.js"]/MergeMapSubscriber.prototype._tryNext http://localhost:4200/vendor.bundle.js:15427:9
	["../../../../rxjs/operator/mergeMap.js"]/MergeMapSubscriber.prototype._next http://localhost:4200/vendor.bundle.js:15410:13
	["../../../../rxjs/Subscriber.js"]/Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:12323:13
	["../../../../rxjs/observable/ScalarObservable.js"]/ScalarObservable.prototype._subscribe http://localhost:4200/vendor.bundle.js:13990:13
	["../../../../rxjs/Observable.js"]/Observable.prototype._trySubscribe http://localhost:4200/vendor.bundle.js:11812:20
	["../../../../rxjs/Observable.js"]/Observable.prototype.subscribe http://localhost:4200/vendor.bundle.js:11800:60
	["../../../../rxjs/operator/mergeMap.js"]/MergeMapOperator.prototype.call http://localhost:4200/vendor.bundle.js:15385:16
	["../../../../rxjs/Observable.js"]/Observable.prototype.subscribe http://localhost:4200/vendor.bundle.js:11797:13
	["../../../../rxjs/operator/filter.js"]/FilterOperator.prototype.call http://localhost:4200/vendor.bundle.js:14591:16
	["../../../../rxjs/Observable.js"]/Observable.prototype.subscribe http://localhost:4200/vendor.bundle.js:11797:13
	["../../../../rxjs/operator/map.js"]/MapOperator.prototype.call http://localhost:4200/vendor.bundle.js:14990:16
	["../../../../rxjs/Observable.js"]/Observable.prototype.subscribe http://localhost:4200/vendor.bundle.js:11797:13
	["../../../../../src/app/login/login.component.ts"]/LoginComponent.prototype.onSubmit http://localhost:4200/main.bundle.js:581:9
	View_LoginComponent_0/< ng:///AppModule/LoginComponent.ngfactory.js:190:27
	viewDef/handleEvent http://localhost:4200/vendor.bundle.js:69536:98
	callWithDebugContext http://localhost:4200/vendor.bundle.js:70997:39
	debugHandleEvent http://localhost:4200/vendor.bundle.js:70585:12
	dispatchEvent http://localhost:4200/vendor.bundle.js:66129:12
	renderEventHandlerClosure/< http://localhost:4200/vendor.bundle.js:66740:20
	decoratePreventDefault/< http://localhost:4200/vendor.bundle.js:81403:53
	["../../../../zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.invokeTask http://localhost:4200/polyfills.bundle.js:2970:17
	forkInnerZoneWithAngularBehavior/zone._inner<.onInvokeTask http://localhost:4200/vendor.bundle.js:61403:24
	["../../../../zone.js/dist/zone.js"]/</</ZoneDelegate.prototype.invokeTask http://localhost:4200/polyfills.bundle.js:2969:17
	["../../../../zone.js/dist/zone.js"]/</</Zone.prototype.runTask http://localhost:4200/polyfills.bundle.js:2737:28
	["../../../../zone.js/dist/zone.js"]/</</ZoneTask.invokeTask http://localhost:4200/polyfills.bundle.js:3044:24
	patchEventTarget/invokeTask http://localhost:4200/polyfills.bundle.js:3972:9
	patchEventTarget/globalZoneAwareCallback http://localhost:4200/polyfills.bundle.js:3990:17
DOMException [NetworkError: "A network error occurred."
code: 19
nsresult: 0x80530013
location: http://localhost:4200/polyfills.bundle.js:5289]

Install instructions missing a step?

Working on getting a dev instance running and ran into this issue:

$ ng serve
node_modules appears empty, you may need to run `npm install`

This was after I had installed angular according to the instructions. After doing an npm install, things seem to get along farther. Perhaps we can reduce the npm install -g @angular/cli to npm install?

information

Bonjour

L’ancienne interface va totalement disparaître?

car j'aimais bien l’allure de l’ancienne je trouve qu'elle faisais site d’écoute en streaming hyper professionnel.
la nouvelle je la trouve trop simpliste

Cordialement

airsonic-ui glitche

I love the new ui using the site but when I click settings nothing happens

its possible to fix it

Steps to Version 1

Here I would like to keep a list to track what needs to be done for an MVP to be developed. This should be in a state where we can ship it with airsonic as an experimental UI.

• Add Logout and improve logout menu to show user name.
• Add Current playing track information to media player bar.
• Add the ability to queue songs. #12
• Add a basic settings page
• Improve test coverage
• Improve error handling. Should display errors to user.

Breakout API services into JS SDK

I think it would be really useful to breakout the API services and put them into a dedicated SDK to encourage development of third party apps for Airsonic

Using SVG pictures for faster load ?

I think we should consider using svg pictures for all the icons and others pictures !

This is mainly to be more lightweight and fast !

Or if we could get ride of pictures it would be also great.

Another idea would be to, for example, use an icon set like Font awesome or better ?

Add I18n to start translating

IMO we could start thinking at internationalization :

If we translate strings by strings ( each time you add one ) it will be easier than translating a huge pack of strings.

And I don't think it worth keeping the old translations ( maybe cherry pick some strings ).

Secondly we currently have problems with bad escaping in the current UI. So we should think at somehting that isolate each string well !

Add a way to queue music

Should queue up whole album when song played from album. Should allow user to queue random songs with one click to current queue.

Login don't update profile dropdown menu with username

signing in don't update profile dropdown menu with user name, at least not directly after the login, after refreshing the page everything is just fine

DEMO doesn't work

In the bottom of https://airsonic.github.io/demo/ but there is no mention of what credentials should we enter on authorization page (after we click "Airsonic new UI" button).

Show artist's pictures

It would be nice to show the pictures of the artists on the artists view.

Logout don't stop audio stream

Titles says everything

Rethink auth service

The current state of airsonic ( master branch ) is broken.

Here is the problem:

• Page loads and tries to fetch the translation files via the HTTPClient (ngx-translate)
• The HTTP request faces the basic auth system if has not user => route to /login
• So the HTTP request never get the .json files present in /assets/i18n/*
• Results in a broken system

If I disable the translate.setDefaultLang('en'); the translation service don't work at all.

So since our UI will handle a way more complex system, I think we really need to use something like Guards.

Using guards will give us the possibility to allow some component access (based on the routes) depending on the permissions the user have.
This involves to load the permissions by loading them at login (using the getUser Api call )
Loading permissions at login will also allow us to verify if user really exists ( instead of simply generating token+salt and trying to go the the main (home) component and face a HTTP 401), This gives us also a better way to handle errors.

So the guards will allow or not route depending on the users permissions using CanActivate. This will allow us to let everyone to fetch the assets via HTTP.

Other solution regarding the translation service would be not to load over HTTP.

So @bfkelsey, I would like some of your time so we discuss a bit about his, the vulnerabilities of this solutions, any thoughts ?

Choose a specific music folder

This is a enhancement but I also faced an issue related to this.

• I have 2 different music folders, and some albums are present in both and are duplicate.
• In the back-end I allow my user only to access the music folder 1.
• In the Airsonic-ui, I can list songs from both music folder.
• After clicking on a track, it plays.
• but after clicking on the duplicate song (not allowed from 2 music folder), I get a 403 (which is expected).

So first I think they are a problem in the back-end that don't separate the music folders right (cc @muff1nman ).
And we need to add the ability to choose between the music folders, and not merge albums if they are duplicate since they are from different music folders.

Global road-map to a full featured frontend

In addition to the current #14 Steps to V1, I propose a global road-map with all targeted features.
This will allow us to know who is working on what, and discuss on some global ideas.
If it comes to discuss on a specific topic, we will need to open a dedicated issue.

My (our ?) philosophy is to release when it's ready, as a quality app, not a buggy app !

List of existing features that we need to keep :

• Global frames / Design [This will be a constant discussion] [assigned @jooola]

• Login page with server choice (either local server or external?)

• Forgotten password

• Translation system [assigned @jooola]

• Auth system + roles guard (See #54) [assigned @jooola]

• Error handling

• User settings (Profile) [assigned @jooola]

  • Avatar (Gravatar ? No ugly icons please ^^) [assigned @jooola]
  • Last.FM (should this be frontend related of backend ?)

• Administration settings [assigned @CharlesSchaack && @jooola]

  • Media folders
  • Advanced
  • Users [assigned @CharlesSchaack]
  • Players
  • Transcoding
  • Podcasts
  • Sharing
  • TV & Radio
  • Theming
  • DLNA/UPnP
  • Sonos
  • Advanced monitoring
  • Last.FM global settings

• Audio player

• Play queue and all related functionnalities

• Video player

• Search

• Advanced search

• Music folders selector

• Podcasts

• Podcasts RSS playlists feed (/podcast.view?suffix=.rss)

• Playlists

• Internet TV

• Internet Radio

• Download utility

• Upload utility

• Display utilities : List view / Album cover view toggler

• Drag and drop utility

• Monitoring (for all users ?)

• About page

  • Contributors cloud ^^ Yayyy

• Tooltips for help

• Starring

• Rating

• Dedicated shuffle play play lists creator

• Keyboard shortcuts

If I missed something please let me know on the community channels please, (lets try to keep this issue as clean as possible).

If you want to contribute some code please contact us, so we can assign you on a feature !

• Each features has to pass the karma tests
• We will try to stay as close as possible from latest updates ( angular/boostrap ) while we are in experimental.
• The translations targets can be translated @ transifex

Technologies :
Angular / Boostrap / Boostrap-ng / Material icons

Happy coding 🎉

Cover art should be loaded based on the "coverArt" attribute

The coverArt attribute, not the id attribute, should be used in the id parameter of the query to getCoverArt. If the (optional) coverArt attribute is omitted then some generic cover art should be displayed (e.g. a gray square or perhaps something more interesting).

Should the menu options be completely hidden when the sidebar is collapsed

Would it make the application more usable to keep the options visible even when it is collapsed?

If the screen size is say 1280x720 then keep them visible and give the user the option to expand so the text is displayed too
If on mobile device then collapse it completely and just show the hamburger menu button

Don't use pictures for albums without cover art but somehting more lightweight

I suggest we remove the system that generates picture with album name and artist.
This loads a huge amount of picture.

We could simply use svg model and change the artist and album name following the model.
Or more lightweight don't use a picture at all ! simply css and some js !

Also the pictures are 160x160 big, so this isn't really scalable ...

PWA

Is this planned to be a progressive web app?

Replace media player with videogular

https://github.com/videogular/videogular2

• This should simplify media integration.

Mobile first design

The new UI scales pretty well as is on mobile devices but it could work even better on mobile devices. With PWAs/Service-worker apps gaining more traction and the ability to pin them to a devices home screen as if they were native apps it would save users having to find another application to stream music to their handheld device. Though native apps do give users the ability to cache songs so not sure if this would work well with PWAs.

Add volume controls to player

Some kind of volume controls will be needed to adjust the volume of the current song.

Profil menu don't close when clicking outside the menu

Title says almost everything :
The profile menu ( upper right ) don't close itself when clicking outside the menu.

Which translation system shoudl we use ?

I'm asking myself which language system we should use ?

Because the angular embed i18n system looks not really dynamic.

Why not something like this that ships services and all the tools to switch the language of the App.

Also I'm gonna add our translations files on Transifex so we can translate everything properly as we grow and cherry pick most of the string from current airsonic UI.

@bfkelsey any thoughts ?

Remove unused pictures

Some pictures will never be used and could be removed ( better start with less and cleaner than too much and a mess ).

This pictures mainly are in the themes folders :

• jamstash ( we aren't providing attached app within airsonic we use the docs )
• donate ( We don't ask money )
• android
• apps
• paypal

Live preview

What do you think of getting a live preview of the current work ?

at airsonic.github.io/demo/airsonic-ui ?