From 453d3516339c3a50a64dc2e6876afb5bc20e7fef Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Tue, 25 Mar 2014 12:38:57 +0000
Subject: [PATCH] Update currently playing track and allow playing of track
 with click.

---
 assets/js/controllers/queue.controller.js   | 12 +++++++++---
 assets/js/services/api.service.js           |  4 ++++
 assets/js/services/server-events.service.js |  4 ++--
 assets/js/views/queue.html                  |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/assets/js/controllers/queue.controller.js b/assets/js/controllers/queue.controller.js
index 92e6bc2..e56101a 100644
--- a/assets/js/controllers/queue.controller.js
+++ b/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) })
 })
diff --git a/assets/js/services/api.service.js b/assets/js/services/api.service.js
index 1d0b68a..061e9bc 100644
--- a/assets/js/services/api.service.js
+++ b/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' })
     },
diff --git a/assets/js/services/server-events.service.js b/assets/js/services/server-events.service.js
index a18981f..640d8a1 100644
--- a/assets/js/services/server-events.service.js
+++ b/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)
     })
   }
diff --git a/assets/js/views/queue.html b/assets/js/views/queue.html
index 92987ca..5ce6333 100644
--- a/assets/js/views/queue.html
+++ b/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>