From 8310daa56ffe3f5089ecad56ce6755d457c71008 Mon Sep 17 00:00:00 2001
From: Fergal Moran <fergal.moran@gmail.com>
Date: Tue, 28 Jan 2014 20:23:21 +0000
Subject: [PATCH] Fixed cascading css class toggle on play buttons in mix list

---
 static/js/app/views/mix/mixItemView.coffee | 23 ++++++++++---------
 static/js/app/views/mix/mixItemView.js     | 26 +++++++++++++---------
 templates/views/MixItemView.html           |  4 ++--
 3 files changed, 31 insertions(+), 22 deletions(-)

diff --git a/static/js/app/views/mix/mixItemView.coffee b/static/js/app/views/mix/mixItemView.coffee
index a4afb24..dc3f796 100755
--- a/static/js/app/views/mix/mixItemView.coffee
+++ b/static/js/app/views/mix/mixItemView.coffee
@@ -79,23 +79,26 @@ define ['underscore', 'moment', 'app', 'vent', 'app.lib/dssView', 'utils',
                 @_setupStateUI()
 
         _setupStateUI: ->
-            @ui.playButton.removeClass("play").removeClass("resume").removeClass("pause")
-            @ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause")
-            if @mixState is 1 #playing
-                @ui.playButton.addClass("pause")
-                @ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause")
-            else if @mixState is 2 #paused
-                @ui.playButton.addClass("resume")
-                @ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play")
+            if @app.audioController.isPlayingId @model.id
+                @ui.playButton.removeClass("play").removeClass("resume").removeClass("pause")
+                @ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause")
+                if @mixState is 1 #playing
+                    @ui.playButton.addClass("pause")
+                    @ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause")
+                else if @mixState is 2 #paused
+                    @ui.playButton.addClass("resume")
+                    @ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play")
 
         mixPlay: (button) ->
             vent.trigger('mix:init', @model, $(@el))
 
         mixPause: ->
-            vent.trigger('mix:pause', @model, $(@el))
+            if @app.audioController.isPlayingId @model.id
+                vent.trigger('mix:pause', @model, $(@el))
 
         mixResume: ->
-            vent.trigger('mix:resume', @model, $(@el))
+            if @app.audioController.isPlayingId @model.id
+                vent.trigger('mix:resume', @model, $(@el))
 
         mixFavourite: ->
             console.log("MixItemView: favouriteMix")
diff --git a/static/js/app/views/mix/mixItemView.js b/static/js/app/views/mix/mixItemView.js
index f76bc44..466f467 100755
--- a/static/js/app/views/mix/mixItemView.js
+++ b/static/js/app/views/mix/mixItemView.js
@@ -91,14 +91,16 @@
       };
 
       MixItemView.prototype._setupStateUI = function() {
-        this.ui.playButton.removeClass("play").removeClass("resume").removeClass("pause");
-        this.ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause");
-        if (this.mixState === 1) {
-          this.ui.playButton.addClass("pause");
-          return this.ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause");
-        } else if (this.mixState === 2) {
-          this.ui.playButton.addClass("resume");
-          return this.ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play");
+        if (this.app.audioController.isPlayingId(this.model.id)) {
+          this.ui.playButton.removeClass("play").removeClass("resume").removeClass("pause");
+          this.ui.playButtonIcon.removeClass("icon-play").removeClass("icon-pause");
+          if (this.mixState === 1) {
+            this.ui.playButton.addClass("pause");
+            return this.ui.playButtonIcon.removeClass("icon-play").addClass("icon-pause");
+          } else if (this.mixState === 2) {
+            this.ui.playButton.addClass("resume");
+            return this.ui.playButtonIcon.removeClass("icon-pause").addClass("icon-play");
+          }
         }
       };
 
@@ -107,11 +109,15 @@
       };
 
       MixItemView.prototype.mixPause = function() {
-        return vent.trigger('mix:pause', this.model, $(this.el));
+        if (this.app.audioController.isPlayingId(this.model.id)) {
+          return vent.trigger('mix:pause', this.model, $(this.el));
+        }
       };
 
       MixItemView.prototype.mixResume = function() {
-        return vent.trigger('mix:resume', this.model, $(this.el));
+        if (this.app.audioController.isPlayingId(this.model.id)) {
+          return vent.trigger('mix:resume', this.model, $(this.el));
+        }
       };
 
       MixItemView.prototype.mixFavourite = function() {
diff --git a/templates/views/MixItemView.html b/templates/views/MixItemView.html
index 895936f..1bdcd69 100644
--- a/templates/views/MixItemView.html
+++ b/templates/views/MixItemView.html
@@ -78,8 +78,8 @@
         <div class="row">
             <div class="player-footer">
                 <div class="play-button footer-button">
-                    <a class="mix-state-toggle play blue" data-bypass="true" style="">
-                        <i class="icon-play bigger-180"></i>
+                    <a id="play-button-<%= id %>" class="mix-state-toggle play blue" data-bypass="true" style="">
+                        <i id="play-state-icon-<%= id %>" class="icon-play bigger-180"></i>
                     </a>
                 </div>
                 {% if user.is_authenticated %}