putting mp4/webm videos on walls

4 files changed, 53 insertions, 4 deletions

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
+})