pause/mute button on reader

1 files changed, 19 insertions, 11 deletions

diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
index 74054b4..df2d075 100644
--- a/public/assets/javascripts/ui/reader/MediaPlayer.js
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -3,7 +3,8 @@ var MediaPlayer = FormView.extend({
 	el: "#mediaPlayer",
 		
 	events: {
-		"click .playButton": "togglePlaying",
+		"click [data-role=play-media]": "togglePaused",
+		"click [data-role=mute-media]": "toggleMuted",
 		"mousedown": "stopPropagation",
 	},
 	
@@ -18,16 +19,22 @@ var MediaPlayer = FormView.extend({
 		this.$dimensions = this.$(".dimensions")
 		
 		// video fields
-		this.$playButton = this.$(".playButton")
+		this.$playButton = this.$("[data-role=play-media]")
+		this.$muteButton = this.$("[data-role=mute-media]")
 	},
 	
 	toggle: function(state) {
     this.$el.toggleClass("active", state);
 	},
 	
-	togglePlaying: function(){
-		var state = this.scenery.toggle()
-		this.$playButton.toggleClass("playing", ! state)
+	togglePaused: function(state){
+		var state = this.scenery.toggle(state)
+		this.$playButton.toggleClass("paused", ! state)
+	},
+	
+	toggleMuted: function(state){
+		var state = this.scenery.toggleMuted(state)
+		this.$muteButton.toggleClass("muted", state)
 	},
 	
 	pick: function(scenery) {
@@ -45,7 +52,7 @@ var MediaPlayer = FormView.extend({
 
 		this.bind(scenery)
 		this.$el.addClass("active")
-				
+		
 		this.$name.html(media.title)
 		this.$description.html(media.description)
 		
@@ -54,9 +61,9 @@ var MediaPlayer = FormView.extend({
 				this.$(".image").show()
 				this.$(".video").hide()
 
-				this.$widthDimension.html( Number(media.widthDimension) || "" )
-				this.$heightDimension.html( Number(media.heightDimension) || "" )
-				this.$units.html( media.units || "cm" )
+// 				this.$widthDimension.html( Number(media.widthDimension) || "" )
+// 				this.$heightDimension.html( Number(media.heightDimension) || "" )
+// 				this.$units.html( media.units || "cm" )
 				
 				break
 
@@ -65,8 +72,9 @@ var MediaPlayer = FormView.extend({
 			case "video":
 				this.$(".video").show()
 				this.$(".image").hide()
-				
-				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
+				this.$muteButton.toggleClass("muted", this.scenery.muted())
 
 				break
 		}