As part of GSoC 2010 I’ve been working on a new mobile client for XMMS2. It is a web app that can be used to remotely control XMMS2 playback.

This web app consists of two parts. First, a python script which exposes an HTTP server and acts as a bridge to the XMMS2 daemon. Second, the actual web app which is gonna use the Sproutcore framework.

We’ve decided to use the Sproutcore framework to build the web UI because it gives us great flexibility. Sproutcore has a very good rendering layer which can be used to build web equivalent of virtually any widget. Plus Sproutcore, in its latest devolpment version has very good support for touch enabled devices.

Here is a mockup of what we want the interface to look like .

The goal is to use the latest web technologies to design an app with a native look-and-feel. In order to achieve that,  I’ve identified 3 core components that are needed and will be reused throughout the app:

  • an iPhone-like tab control
  • a iPhone-like list view
  • a navigation component that offers push/pop like views management

For the past month I’ve been working on them  and we now have working and functional implementations. There’s a live demo of the tab control and navigation system at the following address : http://cherif.ycsoft.org/static/xmms/en/1b1/

Below are two captures of these components :

Tab Control and navigation bar

List view component

Please note that the list view is not present on the previous demo link. This is due to some development limitations. However you can check out the source for the components using git : git://git.xmms.se/xmms2/x2web-allad.git/ or view it online at x2web-allad.git

These components have been packaged under in a framework called Iweb. (framework is Sproutcore lingo for libraries) and will be later contributed back to the open source Sproutcore project.

Now that we have these, work has started on the actual client web application. Stay tuned for some more updates soon :)