play button

8 files changed, 53 insertions, 97 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index f750c28..b1b9f6b 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -19,11 +19,14 @@ MX.Video = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+  	this.paused = true
 		
 		this.load()
   },
 
   load: function(ops){
+  	this.paused = true
+
     this.player = document.createElement('video')
 		this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this))
 		this.player.addEventListener("error", $.proxy(this.error, this))
@@ -37,7 +40,7 @@ MX.Video = MX.Object3D.extend({
   
   ready: function(){
 		if (this.media.autoplay) {
-			this.player.play()
+			this.play()
 		}
 		else {
 			this.player.currentTime = this.player.duration / 3
@@ -49,14 +52,16 @@ MX.Video = MX.Object3D.extend({
   },
   
   play: function(){
+  	this.paused = false
   	this.player.play()
   },
   
   pause: function(){
+  	this.paused = true
   	this.player.pause()
   },
   
-  seek: function(n){
+	seek: function(n){
   	this.player.currentTime = n
   },
   
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 994c835..e558bc3 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -19,6 +19,7 @@ MX.Vimeo = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+  	this.paused = true
 		
 		this.load()
   },
@@ -57,10 +58,12 @@ MX.Vimeo = MX.Object3D.extend({
   },
   
   play: function(){
+  	this.paused = false
   	this.player.api('play')
   },
   
   pause: function(){
+  	this.paused = true
   	this.player.api('pause')
   },
   
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 118623b..cc0ec0a 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -19,6 +19,7 @@ MX.Youtube = MX.Object3D.extend({
 		ops.className && this.el.classList.add(ops.className)
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
+  	this.paused = true
 		
 		this.load()
   },
@@ -92,8 +93,10 @@ MX.Youtube = MX.Object3D.extend({
   			this.finished()
   			break
   		case 1:  // play
+  			this.paused = false
   			break
   		case 2:  // pause
+  			this.paused = true
   			break
   		case 3:  // buffering
   			break
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index b7e7892..1493fc6 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -20,15 +20,9 @@ var Scenery = new function(){
 				break
 			
 			case 'video':
-				scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id })
-				break
-			
 			case 'youtube':
-				scene_media = new Scenery.types.youtube ({ media: media, wall: wall, id: id })
-				break
-
 			case 'vimeo':
-				scene_media = new Scenery.types.vimeo ({ media: media, wall: wall, id: id })
+				scene_media = new Scenery.types.video ({ 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 a9fce4a..6117826 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -14,7 +14,18 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		},
 
 		build: function(){
-			this.mx = new MX.Video({
+			switch (this.media.type) {
+				case 'video':
+					this.mxType = MX.Video
+					break
+				case 'vimeo':
+					this.mxType = MX.Vimeo
+					break
+				case 'youtube':
+					this.mxType = MX.Youtube
+					break
+			}
+			this.mx = new this.mxType({
 				media: this.media,
 				scale: this.scale,
 				y: this.scale * this.media.height/2,
@@ -31,6 +42,18 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 			this.mx.pause()
 		},
 		
+		toggle: function(shouldPause){
+			if (typeof shouldPause === "undefined") {
+				shouldPause = ! this.mx.paused
+			}
+			shouldPause ? this.mx.pause() : this.mx.play()
+			return shouldPause
+		},
+		
+		paused: function(){
+			return this.mx.paused
+		},
+		
 		seek: function(n){
 			this.mx.seek(n)
 		},
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
deleted file mode 100644
index ded5f87..0000000
--- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
+++ /dev/null
@@ -1,49 +0,0 @@
-
-Scenery.types.vimeo = 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.Vimeo({
-				media: this.media,
-				scale: this.scale,
-				y: this.scale * this.media.height/2,
-				backface: false,
-			})
-			scene.add( this.mx )
-		},
-		
-		play: function(){
-			this.mx.play()
-		},
-		
-		pause: function(){
-			this.mx.pause()
-		},
-		
-		seek: function(n){
-			this.mx.seek(n)
-		},
-		
-		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/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
deleted file mode 100644
index 25d8485..0000000
--- a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
+++ /dev/null
@@ -1,37 +0,0 @@
-
-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({
-				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/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 1ccb5cf..47a938b 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -31,10 +31,16 @@ var MediaEditor = FormView.extend({
 	},
 	
 	togglePlaying: function(){
+		var state = this.scenery.toggle()
+		this.$playButton.toggleClass("playing", ! state)
 	},
 	
 	pick: function(scenery) {
-		this.scenery = scenery
+		if (this.scenery) {
+			this.unbind()
+		}
+	
+		this.bind(scenery)
 		this.$el.addClass("active")
 		
 		var media = scenery.media
@@ -70,5 +76,13 @@ var MediaEditor = FormView.extend({
 				break
 		}
 	},
+	
+	bind: function(scenery){
+		this.scenery = scenery
+	},
+	
+	unbind: function(){
+		this.scenery = null
+	},
 
 })