Sneak peek at itunes based subsonic web UI

[mattgoldspink]

Hi guys,
I noticed a few other users posting their new UI's so thought I'd post a link to some some screen shots of one I've been working on:


http://www.flickr.com/photos/mattgoldspink/4803791582/

http://www.flickr.com/photos/mattgoldspink/4803160459/

http://www.flickr.com/photos/mattgoldspink/4803791010/

http://www.flickr.com/photos/mattgoldspink/4803159975/

I know isubsonic is already taken so I need a better name for it (open to suggestions). I'm hoping to have it all done by the end of next week and it should just be able to be dropped into the exploded war directory on your existing server.

Matt

http://www.mattgoldspink.co.uk/2010/07/18/new-subsonic-web-ui/

[brett]

Looks good man, I like the coverflow

[thomasbruce]

love it! but i think it would look better with another color on the folders. blue, grey or something like that. more toned down than the yellow....

[thomasbruce]

any idea when you will release this UI?

[mattgoldspink]

It's taking a lot longer than expected mainly because the tree based structure that subsonic uses doesn't map so well to the grid like behaviour of itunes, so I've been playing a lot with trying to make the behaviour similar yet without losing any interactivity and experience that a user expects. It'll need a modern browser that supports WebWorkers (Chrome, Safari and Firefox - possibly IE9 may have it now too).

In short I hope to release something in the next few weeks, it may be a bit buggy and missing in features, but I'll have the core stuff.

[thomasbruce]

cool

[mattgoldspink]

Just to show it is coming along

I took your advice about the blue folders and it does fit in a lot more with the rest of the look and feel (possibly needs a slightly different shade of blue). Also it asynchronously loads up all tracks within subfolders when the grid is shown (hence the small grey notification in the lower left of the screen). I plan to toggle this option because ti needs a HTML5 browser and also if you have 3k+ tracks in a folder then it starts to get really sluggish (even when using some rendering tricks in the grid not to show the non-visible rows).
The player panel at the top is almost all done now apart from the search, then i just need to fix a few issues with the grid and coverflow and it should be ready to roll

[deriksen]

Absolutely brilliant mate. Nice work.
A few words on the back-end of this?

//D

[sindre_mehus]

Amazing work!

Let me know when and if you like to promote it on the Subsonic apps page - http://subsonic.org/pages/apps.jsp

Keep it up,
Sindre

[mattgoldspink]

@sindre_mehus
Thanks I hope to get it all up on Google code in the next few weeks.(unfortunately holidays are pending so may get in the way of me getting it complete sooner)

@deriksen
The back-end is purely the web service api from subsonic. I've not touched anything on the server. I aimed to avoid touching it so people can literally just drop the ui code on their server and on first hit it will try autodetect your server and if it can't find it ask you to enter it. It uses cookies to maintain that state which means if you use it on different computers you'll have to do it again, so their is an option to hardcode it in yourself (it'll be in a very obvious place).

[deriksen]

Matt,

Didn't explain myself very well I'm afraid. I meant to ask what you are using to develop your UI, ie code language, core components, prerequisits (php, sql..) etc.

//D

[mattgoldspink]

I see.

It's all javascript using some existing libraries like Ext.js, Jquery, soundmanager 2 and a few Ext.js plugins. Those no server side component.

In theory (and perhaps Sindre could add this in a future release) you could host this UI on another computer and make requests to your server. Cross domain policies in browsers wwon't you let you at the moment, but if JSON and JSONP support was added as return type from the subsonic api then it would work.

[mattgoldspink]

So here's an initial drop of the code at the googlecode project: http://code.google.com/p/subtunes/

I haven't figured out an easy way to get it hooked into the windows installer, but if you're running with Apache on linux then it should be easy to follow the instructions to get it up and running. There are a few known issues but feel free to file suggestions and bugs on the site and I'll do my best to keep on top of them.

At the moment Chrome and Firefox are known to work. I've not tested with other browsers. I'd be interested to hear if people find bugs or confirm if it works out of the box.

Matt

[thomasbruce]

i'm using mac os x but i don't know where to put these files to make it work with subsonic on a mac. can you help?

[mattgoldspink]

I've not got a Mac so can't verify where everything goes, but I believe the following should work:

Go to: /Library/Application Support/Subsonic/jetty/<num>/webapp

Unzip the the subtunes zip file there so the path to the code in the zip is:

/Library/Application Support/Subsonic/jetty/<num>/webapp/subtunes/

That should be all. Then hit:

http://localhost:

And it should work. Let me know if it does and I'll update the docs on the site.