muting, autoplay, loop

6 files changed, 91 insertions, 18 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index f92fe9f..c5dd749 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -30,6 +30,7 @@ MX.Video = MX.Object3D.extend({
     this.player = document.createElement('video')
 		this.player.addEventListener("loadedmetadata", this.ready.bind(this))
 		this.player.addEventListener("error", this.error.bind(this))
+		this.player.addEventListener("ended", this.finished.bind(this))
 		this.player.width = this.width
 		this.player.height = this.height
     this.player.src = this.media.url
@@ -68,13 +69,25 @@ MX.Video = MX.Object3D.extend({
 		this.player.currentTime = n
   },
   
+  mute: function(){
+  	this.player.muted = true
+  },
+  
+  unmute: function(){
+  	this.player.muted = false
+  },
+  
   duration: function(){
   	return this.player.duration
   },
   
   finished: function(){
   	console.log("video finished")
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   },
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 5a373ff..c44464e 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -88,6 +88,14 @@ MX.Vimeo = MX.Object3D.extend({
   duration: function(){
 		return this.player.duration
   },
+
+  mute: function(){
+		this.player.api('setVolume', 0.0)
+  },
+  
+  unmute: function(){
+		this.player.api('setVolume', 0.8)
+  },
   
   onPlay: function(){
   	if (this.paused) {
@@ -102,7 +110,11 @@ MX.Vimeo = MX.Object3D.extend({
   },
   
   finished: function(){
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   }
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index a31a24d..68bb5f3 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -79,6 +79,7 @@ MX.Youtube = MX.Object3D.extend({
   
   ready: function(){
   	console.log("youtube ready")
+  	this.seek(0)
   },
   
   error: function(err){
@@ -127,10 +128,23 @@ MX.Youtube = MX.Object3D.extend({
   duration: function(){
   	return this.player.getDuration()
   },
+
+  mute: function(){
+		this.player.mute()
+  },
+  
+  unmute: function(){
+		this.player.unMute()
+		this.player.setVolume(80)
+  },
   
   finished: function(){
   	console.log("youtube finished")
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   }
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 6117826..e61a0fa 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -57,6 +57,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		seek: function(n){
 			this.mx.seek(n)
 		},
+		
+		mute: function(muted){
+			if (muted) {
+				this.mx.mute()
+			}
+			else {
+				this.mx.unmute()
+			}
+		},
 
 		serialize: function(){
 			var data = base.serialize.call(this)
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 29ec9e5..aea78aa 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -4,9 +4,13 @@ var MediaEditor = FormView.extend({
 		
 	events: {
 		"click .playButton": "togglePlaying",
+		"mousedown [name=keyframe]": "stopPropagation",
 		"change [name=keyframe]": "seek",
+		"change [name=autoplay]": "setAutoplay",
+		"change [name=loop]": "setLoop",
+		"change [name=mute]": "setMute",
 	},
-
+	
 	initialize: function(opt){
 		this.parent = opt.parent
 		this.__super__.initialize.call(this)
@@ -22,6 +26,7 @@ var MediaEditor = FormView.extend({
 		
 		// video fields
 		this.$playButton = this.$(".playButton")
+		this.$autoplay = this.$("[name=autoplay]")
 		this.$loop = this.$("[name=loop]")
 		this.$mute = this.$("[name=mute]")
 		this.$keyframe = this.$("[name=keyframe]")
@@ -53,11 +58,10 @@ var MediaEditor = FormView.extend({
 			case "image":
 				this.$(".image").show()
 				this.$(".video").hide()
-				/*
-				this.$widthDimension
-				this.$heightDimension
-				this.$units
-				*/
+
+				this.$widthDimension.val( Number(media.widthDimension) || "" )
+				this.$heightDimension.val( Number(media.heightDimension) || "" )
+				this.$units.val( media.units || "cm" )
 				
 				break
 
@@ -67,11 +71,12 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				/*
-				this.$loop
-				this.$mute
-				this.$keyframe
-				*/
+				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+				this.$mute.prop('checked', !! media.mute)
+				this.$keyframe.val( Number(media.keyframe || 0) )
+
 				break
 		}
 
@@ -80,15 +85,31 @@ var MediaEditor = FormView.extend({
 	seek: function(){
 		var n = parseFloat( this.$keyframe.val() )
 		this.scenery.seek(n)
+		
+		this.scenery.media.keyframe = n
 	},
-	
+
+	setAutoplay: function(){
+		var checked = this.$autoplay.prop('checked')
+		this.scenery.media.autoplay = checked
+	},
+	setLoop: function(){
+		var checked = this.$loop.prop('checked')
+		this.scenery.media.loop = checked
+	},
+	setMute: function(){
+		var checked = this.$mute.prop('checked')
+		this.scenery.media.mute = checked
+		this.scenery.mute(checked)
+	},
+
 	bind: function(scenery){
 		this.scenery = scenery
-		this.scenery.media.bound = true
+		this.scenery.mx.bound = true
 	},
 	
 	unbind: function(){
-		this.scenery.media.bound = false
+		this.scenery.mx.bound = false
 		this.scenery = null
 	},
 
diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js
index 5fc6736..999a0e5 100644
--- a/public/assets/javascripts/ui/lib/View.js
+++ b/public/assets/javascripts/ui/lib/View.js
@@ -84,7 +84,11 @@ var View = (function($, _){
 		
 		preventDefault: function(e){
 			e && e.preventDefault()
-		}
+		},
+		
+		stopPropagation: function(e){
+			e && e.stopPropagation()
+		},
 
 	});