The Sushi – Playing Page

Coolio Playing MusicSo, after discussing how to browse and select music now for the final experience: playing it. In the end, that’s what we did this for. So, when you start to play a Track with iPeng you end up on the “Playing” Screen.

It looks a lot like the one that came with the iPod application on your iPhone/iTouch, but there are some differences.


We have four “views” or “subpages” on the “Playing” screen, the cover view the playlist view, the plugin view and the plugin content view. They are arranged like pages of a book and you can switch between them by “swiping” the pages in and out (that is, you move your finger to the left or to the right on the screen). The “dot indicator” in the top right corner it will show you where you are and how many pages are currently available – three as a default and four after you have selected some plugin content. The page order (from left to right) is:

  • Plugin Content
  • Plugin View
  • Cover View (that’s where you start)
  • Playlist View

On the left of the top bar there is a “back” arrow that will get you back to where you called the “Playing” page from or “Home” if you called it directly.

Cover View

When you load it, the cover view mainly consists of the Album cover of the

currently playing song. On top of it, like on iPod, you have three lines showing you3 lines of information. This information depends on the context of what you are listening to:

  • if you are playing a track from the database, it will show the Artist, Track Title, Album Title
  • if you are playing Internet Radio or Music on Demand, it will show “Remote Streaming” plus the title information provided by your radio stream.

Radio and Empty Playlist screens

Radio Screen Empty Playlist Screen
This is the “Radio” screen, if you see this, your player is tuned into a streaming media source.If your streaming source delivers cover art (like Pandora, Slacker or LastFM do) the cover art will be displayed like album art from the library. This is the “Empty Playlist” screen, if you see this, your playlist is empty or your iPhone/iTouch has lost connection to the server.

The Control Bar

On the lower end of the page, there’s a control bar with the main controls for playing music. It has the following elements, most of which should look familiar from the “iPod-PlayingNow Screen”:

Control Bar

  1. The Play/Pause control. Depending on the current status this either starts or pauses playback of the actual track.
  2. Skip Next/Previous. The right arrow jumps to the start of the next track in the playlist. The behavior of the left arrow is depends on the position in the track: during the first ten seconds, it jumps to the start of the previous track in the playlist, after more then 10s into the song it jumps to the start of the ACTUAL track.
    Note: Although this is similar to what the iPod application or most other players do, it is different from the normal SqueezeCenter behavior.
  3. Power Button. Used to turn the current player on or off.Glows blue while then player is on.
  4. Player Name. If more than one player is connected to the server, the name of the current player is shown here.
  5. Alarm and Timer Indicator. These Indicators are shown when either alarm (upper symbol, not implemented yet) or the timer (lower symbol) are active.
  6. (not shown, new) Home. From v0.3.3 on there’s also a Home button on the bottom right that will directly take you to the Main Menu.

The OverlaysThe Overlays

As with the iPod application, you can click on the cover area. When you do so, two overlays will appear on the top and bottom part of the cover. They will disappear if you click the cover again.

Volume Control

The bottom one has the volume control (or the text “volume control not available for this player”). You were missing that one already? In the iPod application it’s at the very low end of the screen, yet that’s not an option for iPeng since that is occupied by the browser control bar. So it’s on this overlay. It looks like the volume control on the iPod app., yet since mobile Safari does not support dragging of elements, you have to click on the desired volume level instead of dragging the handle.

The Progress Bar

The top overlay looks like the respective one on the iPod application and it has the same controls. In the center, there is the progress bar showing the actual position within the current track, to the left of it is the elapsed time, to the right the total playing time of the track. Below it is the position of the current track in the playlist.

If you click the progress bar, the playback will jump to the respective position in the song. While this is not very exact, given the size of the progress bar, it gives you quick access to the whole track which can be much more elegant than FFW/REW buttons, especially for long tracks.

Note: The iPod application does not show the total song time, but the remaining time.

The Top Overlay

Repeat and Shuffle Controls

To the left of the progress bar, there is the repeat control. It’s a tri-state, meaning upon clicking it it toggles between three states (as shown above):

  1. No Repeat. The playlist is played only once.
  2. Repeat Playlist. The Playlist is repeated over and over again.
  3. Repeat Song. The current track is repeated over and over again.

To the right of the progress bar, there is the shuffle control. It’s also a tri-state with the following sequence:

  1. No Shuffle. The playlist is played “in order” as it was defined.
  2. Shuffle Playlist. The whole playlist is scrambled and the tracks are played in random order.
  3. Shuffle Albums. The Albums in the playlist are played in random order, however, the order within the albums stays as defined.
    Note: the iPod application does not have this mode

Custom Repeat and Shuffle Controls

Some Internet Radios or Music Services will re-define the repeat and shuffle controls to provide other functionality. In the end, “repeat” and “shuffle” don’t make too much sense in a (radio) streaming context. Examples for these re-definitions are:

  • “Thumbs-Up” and “Thumbs-Down” rating functions on Pandora and LastFM
  • “Skip Forward” and “Skip Back” on AlienBBC

These are also the examples that are currently being (graphically) supported by iPeng. If plugins define other functions, these will work as expected but the buttons might not look “iPeng-like”.

The Track Stat Overlay

TrackStat Stars

If you have TrackStat installed, the top overlay will extend below the progress bar and show your track rating (stars). You can change the rating like on the iPod application by clicking a star.

…so much for the Cover View, now you are ready for the second part of the Playing Page: the Playlist Screen.