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

assets/js/controllers/queue.controller.js

@@ -1,13 +1,19 @@
 mpdClient.controller('queue', function ($scope, api, serverEvents) {
   $scope.queueSongs = api.getQueue().query()
 
-  $scope.updateQueue = function(data) {
+  $scope.updateQueue = function (data) {
     $scope.queueSongs = data
   }
 
-  $scope.playTrack = function(id) {
-    console.log(id)
+  $scope.playTrack = api.playTrack
+
+  $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/services/server-events.service.js

@@ -2,9 +2,9 @@ mpdClient.factory('serverEvents', function ($rootScope) {
 
   var events = new EventSource('/api/stream')
 
-  events.onmessage = function(e) {
+  events.onmessage = function (e) {
     response = JSON.parse(e.data);
-    $rootScope.$apply(function() {
+    $rootScope.$apply(function () {
       $rootScope.$broadcast('update:' + response.type, response.data)
     })
   }

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>