yt, vimeo, video api

12 files changed, 199 insertions, 97 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index 1b17994..2fbf6be 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -4,52 +4,69 @@ MX.Video = MX.Object3D.extend({
   
   	this.type = "Video"
 
-    var layer = this
-    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
-    layer.el.classList.add('video')
-
-		if (layer.backface) {
-			layer.el.classList.add("backface-visible")
-		}
-
-    if (ops.src) {
-    	this.load(ops)
-    }
+		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 (ops.className) {
-			layer.el.classList.add(ops.className)
-		}
-		layer.el.style.backgroundRepeat = 'no-repeat'
+		ops.className && this.el.classList.add(ops.className)
+		this.backface && this.el.classList.add("backface-visible")		
+		this.el.classList.add("video")
+		
+		this.load()
   },
 
   load: function(ops){
-    var layer = this
-
-    var video = document.createElement('video')
-		video.addEventListener("loadedmetadata", function(){
-			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.player = document.createElement('video')
+		this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this))
+		this.player.addEventListener("error", $.proxy(this.error, this))
+		this.player.width = this.width
+		this.player.height = this.height
+    this.player.src = this.media.url
+    this.player.load()
     
-    this.el.appendChild(video)
+    this.el.appendChild(this.player)
+  },
+  
+  ready: function(){
+		if (this.media.autoplay) {
+			video.play()
+		}
+		else {
+			video.currentTime = video.duration / 3
+		}
+  },
+  
+  error: function(err){
+  	console.log("video error", err)
   },
+  
+  play: function(){
+  	this.player.play()
+  },
+  
+  pause: function(){
+  	this.player.pause()
+  },
+  
+  seek: function(n){
+  	this.player.currentTime = n
+  },
+  
+  duration: function(){
+  	return this.player.duration
+  },
+  
+  finished: function(){
+  	console.log("video finished")
+  },
+  
 
 })
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(){
+  }
+  
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index b21184d..3662d7b 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -24,7 +24,7 @@ MX.Youtube = MX.Object3D.extend({
   },
 
   load: function (ops) {
-  	var uid = 'player-' + Uid()
+  	var uid = 'player-' + Uid ()
   	var preload = document.createElement("div")
   	preload.id = uid
   	preload.style.backgroundImage = "url(" + this.media.thumbnail + ")"
@@ -34,6 +34,16 @@ MX.Youtube = MX.Object3D.extend({
   	preload.className = "preload"
   	this.el.appendChild(preload)
   	
+  	// simply defer if not loaded yet
+  	YT = YT || {
+  		Player: function(){
+				var args = arguments
+				setTimeout(function(){
+					base.player = YT.loading ? YT.Player (args) : new YT.Player(args)
+				}, 300)
+			}
+  	}
+  	
 		this.player = new YT.Player(uid, {
 			videoId: this.media.token,
 			width: this.width,
@@ -41,7 +51,22 @@ MX.Youtube = MX.Object3D.extend({
 			events: {
 				onReady: $.proxy(this.ready, this),
 				onError: $.proxy(this.error, this),
-			}
+				onStateChange: $.proxy(this.statechange, this),
+			},
+			playerVars: {
+				autohide: 1,
+				autoplay: 0,
+				disablekb: 1,
+				controls: 0,
+				enablejsapi: 1,
+				fs: 0,
+				modestbranding: 1,
+				iv_load_policy: 3, // no annotations
+				loop: 0,
+				showinfo: 0,
+				rel: 0,
+				wmode: 'opaque',
+			},
 		})
   },
   
@@ -53,6 +78,24 @@ MX.Youtube = MX.Object3D.extend({
   	console.log("youtube error", err)
   },
   
+  statechange: function(e){
+  	switch (e.data) {
+  		case -1: // unstarted
+  			break
+  		case 0:  // finished
+  			this.finished()
+  			break
+  		case 1:  // play
+  			break
+  		case 2:  // pause
+  			break
+  		case 3:  // buffering
+  			break
+  		case 5:  // cued
+  			break
+  	}
+  },
+  
   play: function(){
   	this.player.playVideo()
   },
@@ -61,10 +104,17 @@ MX.Youtube = MX.Object3D.extend({
 		this.player.pauseVideo()
   },
   
-  seek: function(n){
+  seek: function(n, allowSeekAhead){
+  	allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true
+  	this.player.seekTo(n, true) // set to false if seeking manually
   },
   
   duration: function(){
+  	return this.player.getDuration()
+  },
+  
+  finished: function(){
+  	console.log("youtube finished")
   }
   
 })
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
index 488d23c..697c66a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
@@ -15,8 +15,6 @@ Scenery.types.vimeo = Scenery.types.base.extend(function(base){
 
 		build: function(){
 			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,
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
index 3a3aadd..25d8485 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js
@@ -15,8 +15,6 @@ Scenery.types.youtube = Scenery.types.base.extend(function(base){
 
 		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,
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 9b2f753..9fcd55f 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -2,9 +2,9 @@
 var BuilderSettings = FormView.extend({
 	el: "#builderSettings",
 	
-	createAction: "/api/layouts/new",
-	updateAction: "/api/layouts/edit",
-	destroyAction: "/api/layouts/destroy",
+	createAction: "/api/layout/new",
+	updateAction: "/api/layout/edit",
+	destroyAction: "/api/layout/destroy",
 
 	events: {
 		"keydown [name=name]": 'enterSubmit',
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index 33aface..b42d3e7 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -2,7 +2,7 @@
 var BuilderView = View.extend({
 	el: "#builderView",
 	
-	action: "/api/layouts/",
+	action: "/api/layout/",
 
 	events: {
 	},
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index b9f4560..35bcbe0 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -2,9 +2,9 @@
 var EditorSettings = FormView.extend({
 	el: "#editorSettings",
 	
-	createAction: "/api/projects/new",
-	updateAction: "/api/projects/edit",
-	destroyAction: "/api/projects/destroy",
+	createAction: "/api/project/new",
+	updateAction: "/api/project/edit",
+	destroyAction: "/api/project/destroy",
 
 	events: {
 		"keydown [name=name]": 'enterSubmit',
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index b87ac83..2bb2d61 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -2,8 +2,8 @@
 var EditorView = View.extend({
 	el: "#editorView",
 	
-	projectAction: "/api/projects/",
-	layoutAction: "/api/layouts/",
+	projectAction: "/api/project/",
+	layoutAction: "/api/layout/",
 
 	events: {
 	},
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 001d097..7cd629b 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -2,7 +2,7 @@
 var ReaderView = View.extend({
 	el: "#readerView",
 	
-	projectAction: "/api/projects/",
+	projectAction: "/api/project/",
 
 	events: {
 	},
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 46ed634..d474aa7 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -28,7 +28,7 @@ var LayoutsIndex = View.extend({
 var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.projects",
 
-	action: "/api/projects",
+	action: "/api/project",
 
 	events: {
 		"click .templates span": 'toggleActive',
@@ -65,7 +65,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.layouts",
 
-	action: "/api/layouts",
+	action: "/api/layout",
 
 	events: {
 		"click .templates span": 'toggleActive',
@@ -93,7 +93,7 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({
 var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({
 	el: ".mediaDrawer.newProject",
 
-	action: "/api/layouts",
+	action: "/api/layout",
 
 	events: {
 		"click .templates span": 'toggleActive',
diff --git a/server/index.js b/server/index.js
index aed0ea1..b008131 100644
--- a/server/index.js
+++ b/server/index.js
@@ -113,17 +113,17 @@ site.route = function () {
 	app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor)
 	app.get('/project/:slug', middleware.ensureProject, views.editor)
 
-	app.get('/api/layouts', middleware.ensureAuthenticated, api.layouts.index)
-	app.get('/api/layouts/:slug', middleware.ensureAuthenticated, api.layouts.show)
-	app.post('/api/layouts/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.create)
-	app.post('/api/layouts/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.update)
-	app.delete('/api/layouts/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy)
+	app.get('/api/layout', middleware.ensureAuthenticated, api.layouts.index)
+	app.get('/api/layout/:slug', middleware.ensureAuthenticated, api.layouts.show)
+	app.post('/api/layout/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.create)
+	app.post('/api/layout/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.update)
+	app.delete('/api/layout/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy)
 
-	app.get('/api/projects', middleware.ensureAuthenticated, api.projects.index)
-	app.get('/api/projects/:slug', api.projects.show)
-	app.post('/api/projects/new', middleware.ensureAuthenticated, api.projects.create)
-	app.post('/api/projects/edit', middleware.ensureAuthenticated, api.projects.update)
-	app.delete('/api/projects/destroy', middleware.ensureAuthenticated, api.projects.destroy)
+	app.get('/api/project', middleware.ensureAuthenticated, api.projects.index)
+	app.get('/api/project/:slug', api.projects.show)
+	app.post('/api/project/new', middleware.ensureAuthenticated, api.projects.create)
+	app.post('/api/project/edit', middleware.ensureAuthenticated, api.projects.update)
+	app.delete('/api/project/destroy', middleware.ensureAuthenticated, api.projects.destroy)
 
 	app.get('/api/media/user', middleware.ensureAuthenticated, api.media.user)
 	app.post('/api/media/new', middleware.ensureAuthenticated, api.media.create)