pause/mute button on reader

1 files changed, 17 insertions, 5 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 4e1132c..1ffe7b8 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,13 +3,14 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
-		"click .playButton": "togglePlaying",
+		"click [data-role=play-media]": "togglePaused",
 		"mousedown [name=keyframe]": "stopPropagation",
 		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
 		"change [name=loop]": "setLoop",
 		"change [name=mute]": "setMute",
+		"click [data-role=destroy-media]": "destroy",
 	},
 	
 	initialize: function(opt){
@@ -25,7 +26,7 @@ var MediaEditor = FormView.extend({
 		this.$units = this.$("[name=units]")
 		
 		// video fields
-		this.$playButton = this.$(".playButton")
+		this.$playButton = this.$("[data-role=play-media]")
 		this.$autoplay = this.$("[name=autoplay]")
 		this.$loop = this.$("[name=loop]")
 		this.$mute = this.$("[name=mute]")
@@ -36,8 +37,8 @@ var MediaEditor = FormView.extend({
     this.$el.toggleClass("active", state);
 	},
 	
-	togglePlaying: function(){
-		var state = this.scenery.toggle()
+	togglePaused: function(state){
+		var state = this.scenery.toggle(state)
 		this.$playButton.toggleClass("playing", ! state)
 	},
 	
@@ -71,7 +72,7 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+				this.$playButton.toggleClass("paused", this.scenery.paused())
 				this.$autoplay.prop('checked', !! media.autoplay)
 				this.$loop.prop('checked', !! media.loop)
 				this.$mute.prop('checked', !! media.mute)
@@ -97,6 +98,9 @@ var MediaEditor = FormView.extend({
 	setAutoplay: function(){
 		var checked = this.$autoplay.prop('checked')
 		this.scenery.media.autoplay = checked
+		if (checked && this.scenery.paused()) {
+			this.togglePaused()
+		}
 	},
 	setLoop: function(){
 		var checked = this.$loop.prop('checked')
@@ -117,5 +121,13 @@ var MediaEditor = FormView.extend({
 		this.scenery.mx.bound = false
 		this.scenery = null
 	},
+	
+	destroy: function(){
+		ConfirmModal.confirm("Are you sure you want to this media?", function(){
+			var scenery = this.scenery
+			this.hide()
+			Scenery.remove(scenery.id)
+		}.bind(this))
+	},
 
 })