Update currently playing track and allow playing of track with click.

assets/js/controllers/queue.controller.js

@@ -5,9 +5,15 @@ mpdClient.controller('queue', function ($scope, api, serverEvents) {
     $scope.queueSongs = data
   }
 
-  $scope.playTrack = function(id) {
+  $scope.playTrack = api.playTrack
-    console.log(id)
+
+  $scope.updatePlaying = function (songid) {
+    $scope.queueSongs.forEach(function (song) {
+      if (song.id == songid) { song.playing = true }
+      else if (song.playing == true) { song.playing = false }
+    })
   }
 
   $scope.$on('update:queue', function (evt, data) { $scope.updateQueue(data) })
+  $scope.$on('update:status', function (evt, data) { $scope.updatePlaying(data.songid) })
 })

assets/js/services/api.service.js

@@ -7,6 +7,10 @@ mpdClient.factory('api', function ($rootScope, $http, $resource) {
       $http({ method: 'PUT', url: apiUrl + '/control/' + command })
     },
 
+    playTrack: function (pos) {
+      $http({ method: 'PUT', url: apiUrl + '/control/play', params: { pos: pos } })
+    },
+
     getStatus: function () {
       return $http({ method: 'GET', url: apiUrl + '/status' })
     },

assets/js/views/queue.html

@@ -4,7 +4,7 @@
     <h1>Queue</h1>
   </header>
   <ol class="songs">
-    <li ng-repeat="song in queueSongs" ng-class="{ playing: song.playing }">
+    <li ng-repeat="song in queueSongs" ng-click="playTrack(song.pos)" ng-class="{ playing: song.playing }">
       <p class="title">{{ song.title }}</p>
       <p class="artist">{{ song.artist }}</p>
       <p class="length">{{ song.length | formatLength }}</p>