pause/mute button on reader

10 files changed, 119 insertions, 39 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index c5dd749..5341226 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -20,6 +20,7 @@ MX.Video = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -40,12 +41,15 @@ MX.Video = MX.Object3D.extend({
   },
   
   ready: function(){
+		this.seek( this.media.keyframe || 0 )
+
+		if (this.media.mute) {
+			this.mute()
+		}
+
 		if (this.media.autoplay) {
 			this.play()
 		}
-		else {
-			this.player.currentTime = this.player.duration / 3
-		}
   },
   
   error: function(err){
@@ -71,10 +75,12 @@ MX.Video = MX.Object3D.extend({
   
   mute: function(){
   	this.player.muted = true
+  	this.muted = true
   },
   
   unmute: function(){
   	this.player.muted = false
+  	this.muted = false
   },
   
   duration: function(){
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index c44464e..e7555ef 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -20,6 +20,7 @@ MX.Vimeo = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -49,12 +50,21 @@ MX.Vimeo = MX.Object3D.extend({
   	this.player.addEvent('pause', this.onPause.bind(this))
   	this.player.addEvent('finish', this.finished.bind(this))
 
-  	// so annoying that this is async!!
+  	// this is async on vimeo so call it asap
   	this.player.api('getDuration', function(n){
   		console.log("vimeo duration", n)
   		this.player.duration = n
   	}.bind(this))
 
+		if (this.media.mute) {
+			this.mute()
+		}
+		
+		this.seek( this.media.keyframe || 0 )
+
+		if (this.media.autoplay) {
+			this.play()
+		}
   },
   
   error: function(err){
@@ -91,10 +101,12 @@ MX.Vimeo = MX.Object3D.extend({
 
   mute: function(){
 		this.player.api('setVolume', 0.0)
+  	this.muted = true
   },
   
   unmute: function(){
 		this.player.api('setVolume', 0.8)
+  	this.muted = false
   },
   
   onPlay: function(){
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 68bb5f3..a06cf5b 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -20,6 +20,7 @@ MX.Youtube = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -79,7 +80,16 @@ MX.Youtube = MX.Object3D.extend({
   
   ready: function(){
   	console.log("youtube ready")
-  	this.seek(0)
+
+		if (this.media.autoplay) {
+			this.play()
+		}
+  	
+		if (this.media.mute) {
+			this.mute()
+		}
+
+		this.seek( this.media.keyframe || 0 )
   },
   
   error: function(err){
@@ -131,11 +141,13 @@ MX.Youtube = MX.Object3D.extend({
 
   mute: function(){
 		this.player.mute()
+  	this.muted = true
   },
   
   unmute: function(){
 		this.player.unMute()
 		this.player.setVolume(80)
+  	this.muted = false
   },
   
   finished: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index e61a0fa..8cd5e6b 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -43,17 +43,29 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		},
 		
 		toggle: function(shouldPause){
-			if (typeof shouldPause === "undefined") {
+			if (typeof shouldPause !== "boolean") {
 				shouldPause = ! this.mx.paused
 			}
 			shouldPause ? this.mx.pause() : this.mx.play()
 			return shouldPause
 		},
 		
+		toggleMuted: function(shouldMute){
+			if (typeof shouldMute !== "boolean") {
+				shouldMute = ! this.mx.muted
+			}
+			shouldMute ? this.mx.mute() : this.mx.unmute()
+			return shouldMute
+		},
+		
 		paused: function(){
 			return this.mx.paused
 		},
 		
+		muted: function(){
+			return this.mx.muted
+		},
+		
 		seek: function(n){
 			this.mx.seek(n)
 		},
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index c0f35b6..2b2c7c0 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -189,7 +189,7 @@ var SiteRouter = Router.extend({
 		
 		var name = e ? $(e.currentTarget).data("name") : name
 		
-		confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){
+		ConfirmModal.confirm("Are you sure you want to delete " + name + "?", function(){
 			this.documentModal.destroy(name, function(){
 				AlertModal.alert("Document deleted!", function(){
 					window.location.href = "/about"
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))
+	},
 
 })
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
 		}
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 215bbab..a2d2120 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,26 +1220,43 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
-.playButton {
+.playButton,.muteButton {
 	color: white;
 	background: black;
 	border-radius: 50px;
-	padding: 6px 7px 5px;
+	font-size: 22px;
+	padding: 4px 2px 3px 6px;
 	cursor: pointer;
+	margin-right: 5px;
 }
-.playButton .icon-play {
+.playButton .on {
 	display: inline;
 }
-.playButton.playing .icon-play {
+.playButton.paused .on {
 	display: none;
 }
-.playButton .icon-pause {
+.playButton .off {
 	display: none;
 }
-.playButton.playing .icon-pause {
+.playButton.paused .off {
 	display: inline;
 }
 
+.muteButton .on {
+	display: inline;
+	padding-right: 3px;
+}
+.muteButton.muted .on {
+	display: none;
+}
+.muteButton .off {
+	display: none;
+}
+.muteButton.muted .off {
+	display: inline;
+	padding-right: 3px;
+}
+
 button {
   padding: 8px;
   border: 1px solid;
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 46b8a42..65db3ce 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -11,9 +11,9 @@
 	</div>
 	
 	<div class="video setting">
-		<span class="playButton">
-			<span class="icon-play"></span>
-			<span class="icon-pause"></span>
+		<span class="playButton" data-role="play-media">
+			<span class="on icon-play"></span>
+			<span class="off icon-pause"></span>
 		</span>
 <!-- 
 		ion-volume-high
@@ -44,10 +44,6 @@
 		</select>
 	</div>
 
-	<div class="setting">
-		<button data-role="save-media">Save</button>
-	</div>
-	
 	<div class="setting subButtons">
 		<a href="#" data-role="destroy-media">Delete</a>
 	</div>
diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs
index 71f69a8..ca03ec8 100644
--- a/views/controls/reader/media-player.ejs
+++ b/views/controls/reader/media-player.ejs
@@ -1,8 +1,13 @@
 <div class="vvbox settings" id="mediaPlayer">
 
-	<span class="playButton video">
-		<span class="icon-play"></span>
-		<span class="icon-pause"></span>
+	<span class="playButton video" data-role="play-media">
+		<span class="on icon-play"></span>
+		<span class="off icon-pause"></span>
+	</span>
+
+	<span class="muteButton video" data-role="mute-media">
+		<span class="on icon-volume-high"></span>
+		<span class="off icon-volume-mute"></span>
 	</span>
 
 	<span class="name"></span>