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

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 !

Titles says everything

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

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

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.

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

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

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?

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

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

its possible to fix it

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 ?

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

https://github.com/videogular/videogular2

• This should simplify media integration.

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 🎉

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

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.

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

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 ?

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

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

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

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]

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 ?

Is this planned to be a progressive web app?

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

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.

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