Clicking on a track in the queue will now play that track.

assets/js/controls/queue.js

@@ -5,6 +5,19 @@ var Queue = can.Control.extend({
       queueSongs: options.queueSongs,
       status: options.status
     }));
+  },
+
+  playSong: function(pos) {
+    can.ajax({
+      url: '/api/control/play',
+      data: { pos: pos },
+      type: 'PUT'
+    });
+  },
+
+  'li click': function(element, event) {
+    var pos = $(element).data('pos');
+    this.playSong(pos);
   }
 
 });

models/control.rb

@@ -6,8 +6,8 @@ class Control
       [:play, :stop, :next, :previous, :pause]
     end
 
-    def play
-      MPDConnection.mpd.play
+    def play(pos = nil)
+      MPDConnection.mpd.play(pos)
     end
 
     def stop

models/song.rb

@@ -1,17 +1,18 @@
 require './models/mpd_connection'
 
-class Song < Struct.new(:id, :artist, :album, :title, :playing)
+class Song < Struct.new(:id, :artist, :album, :title, :pos, :playing)
 
-  def initialize(song, playing: false)
+  def initialize(song, pos: nil, playing: false)
     self.id = song.id
     self.artist = song.artist
     self.album = song.album
     self.title  = song.title
+    self.pos = pos
     self.playing = playing
   end
 
   def self.queue
     current_song = MPDConnection.mpd.status[:songid]
-    MPDConnection.mpd.queue.map { |song| self.new(song, playing: (song.id == current_song)) }
+    MPDConnection.mpd.queue.map { |song| self.new(song, playing: (song.id == current_song), pos: song.pos) }
   end
 end

mpd_client.rb

@@ -89,6 +89,10 @@ class MPDClient < Sinatra::Base
       JSON({ data: Song.queue.map(&:to_h) })
     end
 
+    put '/control/play' do
+      Control.play(params[:pos])
+    end
+
     put '/control/:action' do
       if Control.controls.include?(params[:action].to_sym)
         Control.send(params[:action])

public/views/queue.ejs

@@ -1,6 +1,6 @@
 <ol id="queue">
   <% list(queueSongs, function(song) { %>
-    <li id="<%= song.attr('id') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
+    <li id="<%= song.attr('id') %>" data-pos="<%= song.attr('pos') %>" <%= song.attr('playing') ? 'class="playing"' : '' %>>
       <p class="title"><%= song.attr('title') %></p>
       <p class="artist"><%= song.attr('artist') %></p>
     </li>