Playlistmanager

This is the documenation of a private project.

Motivation

ASUS RT-N16
ASUS RT-N16

I use a ASUS RT-N16 router in my network as router, small fileserver and mediaserver.

It runs a modded Version of DD-WRT, kong-mod.
I connected a USB-Stick for optional software as well as an 1.8" USB-harddisk to the router.

The harddisk contains media files (photos, videos and lots of audiofiles).
The embedded minidlna mediaserver is used for streaming media files to serveral clients.

Muvid IR 715-2
Muvid IR 715-2

I felt the need of something to manage the audio-playlists on the mediaserver.
Most dlna-, upnp clients are not able to manage playlists on their own or are not able to store them serverside.
So there was something that needs to be done.

 

 

The second thing is, that I wanted to try out the Google Webtool Kit since a long time.
Sadly there were no commercial projects in queue that might have used it. So I had the idea of realizing the playlist manager project with the GWT as base for the frontend.

Goals

  • Create, edit, delete playlists
  • playlists reside on the server
  • intuitive, easy to use interface
  • Ability to listen to audio files from within the playlist manager
  • lots of other small things

Concept

The application will consist basically of two views.
The first view displays available playlists as well as button for create, edit and delete playlists.

The second view will be the editing view. It shows a file browser and the contents of the currently edited playlist. There will be also buttons for adding files, removing files, cancel editing, save playlist, delete playlist.

Implementation

I started of with the GWT tutorial. First I installed Eclipse as well as the Google Plugin for Eclipse.

First view
first view

Then I changed the code to my needs.
As there are no static html elements I used a RootLayoutPanel as base.
The first view consists of as DockLayoutPanel. At the top position is a HorizontalPanel with all the buttons and a textbox for the name of new playlists. At the main position is a celltable with available playlists. Each entry has an icon as well as the name of the playlist.
At first I used a flextable but it takes ages to render large amount of data.

second view
second view

The second view has a FlowPanel as root because both browsing panels need to use the full screen height and shall be independently scrollable.

First browsing panel is a DockLayoutPanel. At top is a breadcrumb navigation of current folders. Main position has a celltable with the file browser.

Right of the file browser is a vertical panel with the control buttons as well as a container for an audio player.

Far right is the playlist content browser. It is also a DockLayoutPanel. At top is the playlist name. Main position is a celltable with playlist entries.

I will update this documentation continuously and provide pictures as well as source code.

If there are any questions, feel free to contact me.

impressum - disclaimer