yt, vimeo, video api

1 files changed, 65 insertions, 26 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 344a450..994c835 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -4,36 +4,75 @@ MX.Vimeo = MX.Object3D.extend({
   
   	this.type = "Vimeo"
 
-    var layer = this
-		layer.media = ops.media
-		layer.width = ops.media.width
-		layer.height = ops.media.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
+		this.media = ops.media
+		this.width = ops.media.width
+		this.height = ops.media.height
+		this.x = ops.x || 0
+		this.y = ops.y || 0
+		this.z = ops.z || 0
+		this.rotationX = ops.rotationX || 0
+		this.rotationY = ops.rotationY || 0
+		this.rotationZ = ops.rotationZ || 0
+		this.scale = ops.scale || 1
+		this.backface = ops.backface || false
 		
-		if (layer.backface) {
-			layer.el.classList.add("backface-visible")
-		}
-
-    if (ops.src) {
-    	this.loadEmbed(ops)
-    }
+		ops.className && this.el.classList.add(ops.className)
+		this.backface && this.el.classList.add("backface-visible")		
+		this.el.classList.add("video")
 		
-		if (ops.className) {
-			layer.el.classList.add(ops.className)
-		}
-		layer.el.style.backgroundRepeat = 'no-repeat'
+		this.load()
+  },
 
+  load: function (ops) {
+  	var uid = 'player-' + Uid ()
+  	var preload = document.createElement("div")
+  	preload.id = uid
+  	preload.style.backgroundImage = "url(" + this.media.thumbnail + ")"
+  	preload.style.width = this.media.width + "px"
+  	preload.style.height = this.media.height + "px"
+  	preload.style.pointerEvents = "none"
+  	preload.className = "preload"
+  	this.el.appendChild(preload)
+  	
+  	this.player = $f(preload)
+  	this.player.addEvent('ready', $.proxy(this.ready, this))
   },
+  
+  ready: function(){
+  	console.log("vimeo ready")
 
-  loadEmbed: function(ops){
-    var layer = this
-  }
+  	// wait until ready before binding events. other events: play, pause
+  	this.player.addEvent('finish', $.proxy(this.finished, this))
+
+  	// so annoying that this is async!!
+  	this.player.api('getDuration', $.proxy(function(n){
+  		console.log("vimeo duration", n)
+  		this.player.duration = n
+  	}, this))
 
+  },
+  
+  error: function(err){
+  	console.log("vimeo error", err)
+  },
+  
+  play: function(){
+  	this.player.api('play')
+  },
+  
+  pause: function(){
+  	this.player.api('pause')
+  },
+  
+  seek: function(n){
+  	this.player.api('seekTo', n)
+  },
+  
+  duration: function(){
+		return this.player.duration
+  },
+  
+  finished: function(){
+  }
+  
 })