1 files changed, 142 insertions, 0 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
new file mode 100644
index 0000000..7a5327e
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -0,0 +1,142 @@
+MX.Vimeo = MX.Object3D.extend({
+
+  init: function (ops) {
+  
+  	this.type = "Vimeo"
+
+		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
+		
+		ops.className && this.el.classList.add(ops.className)
+		this.backface && this.el.classList.add("backface-visible")		
+		this.el.classList.add("video")
+  	this.paused = !! this.media.autoplay
+		this.muted = app.muted || !! this.media.mute
+		
+		this.load()
+  },
+
+  load: function (ops) {
+  	var uid = 'player-' + Uid ()
+  	var preload = document.createElement("iframe")
+  	preload.id = uid
+  	preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&player_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.border = "0"
+  	preload.style.pointerEvents = "none"
+  	preload.className = "preload"
+  	this.el.appendChild(preload)
+  	this.player = $f(preload)
+
+  	this.player.addEvent('ready', this.ready.bind(this))
+  },
+  
+  ready: function(){
+  	console.log("vimeo ready")
+
+  	// wait until ready before binding events. other events: play, pause
+  	this.player.addEvent('play', this.onPlay.bind(this))
+  	this.player.addEvent('pause', this.onPause.bind(this))
+  	this.player.addEvent('finish', this.finished.bind(this))
+
+  	// this is async on vimeo so call it asap
+  	this.player.api('getDuration', function(n){
+  		console.log("vimeo duration", n)
+  		this.player.duration = n
+  	}.bind(this))
+
+		if (this.media.mute) {
+			this.mute()
+		}
+		
+		this.seek( this.media.keyframe || 0 )
+
+		if (this.media.autoplay) {
+			this.play()
+		}
+  },
+  
+  error: function(err){
+  	console.log("vimeo error", err)
+  },
+  
+  play: function(){
+  	this.paused = false
+  	this.player.api('play')
+  },
+  
+  pause: function(){
+  	this.paused = true
+  	this.player.api('pause')
+  },
+  
+  seek: function(n){
+  	// defer seek until we have duration
+  	if (! this.duration()) {
+  		setTimeout(function(){
+  			this.seek(n)
+  		}.bind(this), 300)
+  		return
+  	}
+  	
+		if (n < 1) {
+			n = n * this.duration()
+		}
+		this.player.api('seekTo', max(0, n-1))
+		if (this.paused) {
+			this.paused = false
+			this.play()
+			setTimeout(function(){
+				this.pause()
+			}.bind(this), 1000)
+		}
+  },
+  
+  duration: function(){
+		return this.player.duration
+  },
+
+  mute: function(){
+		this.player.api('setVolume', 0.0)
+  	this.muted = true
+  },
+  
+  unmute: function(){
+		this.player.api('setVolume', 0.8)
+  	this.muted = false
+  },
+  
+  onPlay: function(){
+  	if (this.paused) {
+  		this.pause()
+  	}
+  },
+  
+  onPause: function(){
+  	if (! this.paused) {
+  		this.play()
+  	}
+  },
+  
+  finished: function(){
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
+  		$(".playButton").removeClass('playing')
+  	}
+  }
+  
+})