putting mp4/webm videos on walls

8 files changed, 75 insertions, 22 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index c9ec339..b2727c0 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -4,11 +4,14 @@ MX.Video = MX.Object3D.extend({
   	this.type = "Video"
 
     var layer = this
-    layer.width = 0
-    layer.height = 0
+    layer.width = ops.width
+    layer.height = ops.height
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
+		layer.rotationX = ops.rotationX || 0
+		layer.rotationY = ops.rotationY || 0
+		layer.rotationZ = ops.rotationZ || 0
 		layer.scale = ops.scale || 1
 		layer.backface = ops.backface || false
 		layer.media = ops.media
@@ -30,15 +33,22 @@ MX.Video = MX.Object3D.extend({
 
   loadVideo: function(ops){
     var layer = this
-  	layer.ops = defaults(ops, layer.ops)
 
     var video = document.createElement('video')
 		video.addEventListener("loadedmetadata", function(){
-			//
-			video.play()
+			if (ops.autoplay) {
+				video.play()
+			}
+			else {
+				video.currentTime = video.duration / 3
+			}
 		})
+		video.width = layer.width
+		video.height = layer.height
     video.src = ops.src
     video.load()
+    
+    this.el.appendChild(video)
   },
   
   move: function(ops){
@@ -49,11 +59,6 @@ MX.Video = MX.Object3D.extend({
   	}
 		layer.dirty = true
 		layer.update()
-  },
-
-	toString: function(){
-		var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ")
-		return this.__toString(params)
-	},
+  }
 
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index b65f35a..b8efa17 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -11,9 +11,9 @@ MX.Vimeo = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
-		layer.rotationX = layer.ops.rotationX || 0
-		layer.rotationY = layer.ops.rotationY || 0
-		layer.rotationZ = layer.ops.rotationZ || 0
+		layer.rotationX = ops.rotationX || 0
+		layer.rotationY = ops.rotationY || 0
+		layer.rotationZ = ops.rotationZ || 0
 		layer.scale = ops.scale || 1
 		layer.backface = ops.backface || false
 		
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 068ef9f..3756d80 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -11,9 +11,9 @@ MX.Youtube = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
-		layer.rotationX = layer.ops.rotationX || 0
-		layer.rotationY = layer.ops.rotationY || 0
-		layer.rotationZ = layer.ops.rotationZ || 0
+		layer.rotationX = ops.rotationX || 0
+		layer.rotationY = ops.rotationY || 0
+		layer.rotationZ = ops.rotationZ || 0
 		layer.scale = ops.scale || 1
 		layer.backface = ops.backface || false
 		
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index d44ad41..b7e7892 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -24,8 +24,11 @@ var Scenery = new function(){
 				break
 			
 			case 'youtube':
+				scene_media = new Scenery.types.youtube ({ media: media, wall: wall, id: id })
+				break
+
 			case 'vimeo':
-				scene_media = new Scenery.types.embed ({ media: media, wall: wall, id: id })
+				scene_media = new Scenery.types.vimeo ({ media: media, wall: wall, id: id })
 				break
 		}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index a8b3722..2f6dc01 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -17,6 +17,9 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 			this.mx = new MX.Video({
 				src: this.media.url,
 				media: this.media,
+				width: this.media.width,
+				height: this.media.height,
+				scale: this.scale,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
@@ -24,12 +27,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		},
 		
 		play: function(){
+			this.mx.play()
 		},
 		
 		pause: function(){
+			this.mx.pause()
 		},
 		
-		seek: function(){
+		seek: function(n){
+			this.mx.seek(n)
 		},
 
 		serialize: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
index 58bc58d..488d23c 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
@@ -1,5 +1,5 @@
 
-Scenery.types.embed = Scenery.types.base.extend(function(base){
+Scenery.types.vimeo = Scenery.types.base.extend(function(base){
 
 	var exports = {
 	
@@ -14,10 +14,11 @@ Scenery.types.embed = Scenery.types.base.extend(function(base){
 		},
 
 		build: function(){
-			this.mx = new MX.Embed({
+			this.mx = new MX.Vimeo({
 				src: this.media.url,
 				poster: this.media.thumbnail,
 				media: this.media,
+				scale: this.scale,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
new file mode 100644
index 0000000..3a3aadd
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
@@ -0,0 +1,39 @@
+
+Scenery.types.youtube = Scenery.types.base.extend(function(base){
+
+	var exports = {
+	
+		init: function(opt){
+			base.init.call(this, opt)
+			this.scale = this.media.scale = 300 / max(300, this.media.width)
+
+			this.build()
+			this.bind()
+			this.set_wall()
+			this.recenter()
+		},
+
+		build: function(){
+			this.mx = new MX.Youtube({
+				src: this.media.url,
+				poster: this.media.thumbnail,
+				media: this.media,
+				scale: this.scale,
+				y: this.scale * this.media.height/2,
+				backface: false,
+			})
+			scene.add( this.mx )
+		},
+
+		serialize: function(){
+			var data = base.serialize.call(this)
+			return data
+		},
+	
+		deserialize: function(data){
+			this.mx.move(data.position)
+		},
+	}
+	
+	return exports
+})
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index b5398ff..88c3b18 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -67,7 +67,6 @@ var MediaViewer = ModalView.extend({
 				image = document.createElement('video')
 				image.addEventListener("loadedmetadata", function(){
 					image.currentTime = image.duration * 1/3
-					console.log(image.duration, image.currentTime)
 				})
 				image.src = media.url
 				image.load()