From 49cb0746c6925010c0b6711c224dfe3c1350f9d6 Mon Sep 17 00:00:00 2001
From: Dan Barber <dan@new-bamboo.co.uk>
Date: Mon, 14 Apr 2014 12:46:48 +0100
Subject: [PATCH] Add disabled state for buttons.

---
 assets/javascripts/controllers/transport.controller.js | 4 ++++
 assets/javascripts/views/transport.html                | 6 +++---
 assets/stylesheets/transport.css.sass                  | 3 +++
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/assets/javascripts/controllers/transport.controller.js b/assets/javascripts/controllers/transport.controller.js
index fbccd35..194cfa3 100644
--- a/assets/javascripts/controllers/transport.controller.js
+++ b/assets/javascripts/controllers/transport.controller.js
@@ -21,6 +21,10 @@ mpdClient.controller('transport', function ($scope, api, serverEvents) {
     return $scope.status.state == 'play'
   }
 
+  $scope.playingOrPaused = function () {
+    return $scope.status.state == 'play' || $scope.status.state == 'pause'
+  }
+
   $scope.markerPosition = function () {
     return ($scope.elapsedTime / $scope.totalTime) * 100
   }
diff --git a/assets/javascripts/views/transport.html b/assets/javascripts/views/transport.html
index c2fd20e..e32b0d0 100644
--- a/assets/javascripts/views/transport.html
+++ b/assets/javascripts/views/transport.html
@@ -7,10 +7,10 @@
     </div>
   </div>
   <nav class="controls">
-    <button ng-click="sendCommand('previous')">previous</button>
+    <button ng-click="sendCommand('previous')" ng-disabled="!playingOrPaused()">previous</button>
     <button ng-click="sendCommand('pause')" ng-if="playing()">pause</button>
     <button ng-click="sendCommand('play')" ng-if="!playing()">play</button>
-    <button ng-click="sendCommand('stop')">stop</button>
-    <button ng-click="sendCommand('next')">next</button>
+    <button ng-click="sendCommand('stop')" ng-disabled="!playingOrPaused()">stop</button>
+    <button ng-click="sendCommand('next')" ng-disabled="!playingOrPaused()">next</button>
   </nav>
 </div>
diff --git a/assets/stylesheets/transport.css.sass b/assets/stylesheets/transport.css.sass
index 064ebf3..63b2dcf 100644
--- a/assets/stylesheets/transport.css.sass
+++ b/assets/stylesheets/transport.css.sass
@@ -17,6 +17,9 @@
     &:hover, &:focus
       text-shadow: 0 0 10px rgba(255, 255, 255, 1)
 
+    &[disabled]
+      opacity: 0.25
+
   .scrubber
     @include clearfix
     padding: 0.5em 25px 0