pause/mute button on reader

3 files changed, 35 insertions, 5 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(){