From eac88be42cc1a7f85c7a0533414e1047e0addc39 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 23 Jun 2014 18:11:59 -0400
Subject: stubbing in stuff for videos/embeds

---
 .../rectangles/engine/scenery/_scenery.js          |  6 +++-
 .../rectangles/engine/scenery/types/_object.js     |  3 ++
 .../rectangles/engine/scenery/types/embed.js       | 38 ++++++++++++++++++++++
 .../rectangles/engine/scenery/types/image.js       |  1 +
 .../rectangles/engine/scenery/types/video.js       | 12 ++++++-
 5 files changed, 58 insertions(+), 2 deletions(-)
 create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/embed.js

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 74801e9..d44ad41 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -19,9 +19,13 @@ var Scenery = new function(){
 				scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id })
 				break
 			
+			case 'video':
+				scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id })
+				break
+			
 			case 'youtube':
 			case 'vimeo':
-				scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id })
+				scene_media = new Scenery.types.embed ({ media: media, wall: wall, id: id })
 				break
 		}
 
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
index 05c760b..65f3a94 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js
@@ -35,6 +35,9 @@ Scenery.types.base = Fiber.extend(function(base){
 		destroy: function(){
 			this.unbind()
 			scene.remove(this.mx)
+			this.mx.media = null
+			this.mx.ops = null
+			this.mx = null
 			this.move = null
 			this.media = null
 			this.dimensions = null
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js
new file mode 100644
index 0000000..58bc58d
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js
@@ -0,0 +1,38 @@
+
+Scenery.types.embed = 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.Embed({
+				src: this.media.url,
+				poster: this.media.thumbnail,
+				media: this.media,
+				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/rectangles/engine/scenery/types/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
index b668e6a..99c1810 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js
@@ -17,6 +17,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){
 			this.mx = new MX.Image({
 				src: this.media.url,
 				scale: this.scale,
+				media: this.media,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index b34e55c..a8b3722 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -14,13 +14,23 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		},
 
 		build: function(){
-			this.mx = new MX.Image({
+			this.mx = new MX.Video({
 				src: this.media.url,
+				media: this.media,
 				y: this.scale * this.media.height/2,
 				backface: false,
 			})
 			scene.add( this.mx )
 		},
+		
+		play: function(){
+		},
+		
+		pause: function(){
+		},
+		
+		seek: function(){
+		},
 
 		serialize: function(){
 			var data = base.serialize.call(this)
-- 
cgit v1.2.3-70-g09d2


From 1b69dbd0897b21e9613c08811da5ca8e4c863cfa Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 24 Jun 2014 16:04:19 -0400
Subject: putting mp4/webm videos on walls

---
 .../assets/javascripts/mx/primitives/mx.video.js   | 27 +++++++++------
 .../assets/javascripts/mx/primitives/mx.vimeo.js   |  6 ++--
 .../assets/javascripts/mx/primitives/mx.youtube.js |  6 ++--
 .../rectangles/engine/scenery/_scenery.js          |  5 ++-
 .../rectangles/engine/scenery/types/embed.js       | 38 ---------------------
 .../rectangles/engine/scenery/types/video.js       |  8 ++++-
 .../rectangles/engine/scenery/types/vimeo.js       | 39 ++++++++++++++++++++++
 .../rectangles/engine/scenery/types/youtube.js     | 39 ++++++++++++++++++++++
 public/assets/javascripts/ui/editor/MediaViewer.js |  1 -
 public/assets/stylesheets/app.css                  | 12 +++++--
 server/lib/api/media.js                            |  1 +
 server/lib/upload.js                               |  4 ++-
 12 files changed, 125 insertions(+), 61 deletions(-)
 delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/embed.js
 create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
 create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/youtube.js

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index c9ec339..b2727c0 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -4,11 +4,14 @@ MX.Video = MX.Object3D.extend({
   	this.type = "Video"
 
     var layer = this
-    layer.width = 0
-    layer.height = 0
+    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
@@ -30,15 +33,22 @@ MX.Video = MX.Object3D.extend({
 
   loadVideo: function(ops){
     var layer = this
-  	layer.ops = defaults(ops, layer.ops)
 
     var video = document.createElement('video')
 		video.addEventListener("loadedmetadata", function(){
-			//
-			video.play()
+			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.el.appendChild(video)
   },
   
   move: function(ops){
@@ -49,11 +59,6 @@ MX.Video = MX.Object3D.extend({
   	}
 		layer.dirty = true
 		layer.update()
-  },
-
-	toString: function(){
-		var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ")
-		return this.__toString(params)
-	},
+  }
 
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index b65f35a..b8efa17 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -11,9 +11,9 @@ MX.Vimeo = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
-		layer.rotationX = layer.ops.rotationX || 0
-		layer.rotationY = layer.ops.rotationY || 0
-		layer.rotationZ = layer.ops.rotationZ || 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
 		
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 068ef9f..3756d80 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -11,9 +11,9 @@ MX.Youtube = MX.Object3D.extend({
 		layer.x = ops.x || 0
 		layer.y = ops.y || 0
 		layer.z = ops.z || 0
-		layer.rotationX = layer.ops.rotationX || 0
-		layer.rotationY = layer.ops.rotationY || 0
-		layer.rotationZ = layer.ops.rotationZ || 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
 		
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/embed.js b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js
deleted file mode 100644
index 58bc58d..0000000
--- a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js
+++ /dev/null
@@ -1,38 +0,0 @@
-
-Scenery.types.embed = 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.Embed({
-				src: this.media.url,
-				poster: this.media.thumbnail,
-				media: this.media,
-				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/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/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
new file mode 100644
index 0000000..488d23c
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
@@ -0,0 +1,39 @@
+
+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({
+				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
+})
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
+})
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index b5398ff..88c3b18 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -67,7 +67,6 @@ var MediaViewer = ModalView.extend({
 				image = document.createElement('video')
 				image.addEventListener("loadedmetadata", function(){
 					image.currentTime = image.duration * 1/3
-					console.log(image.duration, image.currentTime)
 				})
 				image.src = media.url
 				image.load()
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 53365b7..a2b5d8c 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -511,19 +511,27 @@ h5 {
   cursor: -webkit-grabbing;
   cursor: -moz-grabbing;
 }
-.mx-object3d.image, .mx-object3d canvas,
+.mx-object3d.image,
+.mx-object3d.video,
+.mx-object3d canvas,
 .mx-object3d.backface-hidden {
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility:    hidden;
   -ms-backface-visibility:     hidden;
   backface-visibility:         hidden;
 }
-.mx-object3d.backface-visible, .mx-object3d.backface-visible canvas{
+.mx-object3d.backface-visible,
+.mx-object3d.backface-visible canvas{
   -webkit-backface-visibility: visible;
   -moz-backface-visibility:    visible;
   -ms-backface-visibility:     visible;
   backface-visibility:         visible;
 }
+.mx-object3d iframe,
+.mx-object3d video {
+	pointer-events: none;
+}
+
 #hud {
 	position: fixed;
 	top:0;left:0;
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 48446ca..9699c16 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -32,6 +32,7 @@ var media = {
 		data.type = "image"
 		
 		upload.put("media", req.files.image, {
+			username: req.user.username,
 			unacceptable: function(err){
 				res.json({ error: { errors: { avatar: { message: "Problem saving image: " + err } } } })
 			},
diff --git a/server/lib/upload.js b/server/lib/upload.js
index a5d7871..0f6c624 100644
--- a/server/lib/upload.js
+++ b/server/lib/upload.js
@@ -24,7 +24,9 @@ module.exports.put = function (key, file, opt) {
 	var ts = moment().format('YYYYMMDD')
 
 	var extension = acceptableuploadTypes[file.mimetype]
-	filename = (+now) + "-"
+	filename = (+now)
+					 + (opt.username ? "-" + opt.username : "")
+					 + "-"
 				   + file.originalname.replace(/\..*$/,"")
 							.replace(/[^0-9a-zA-Z]+/g,"-")
 							.substr(-128)
-- 
cgit v1.2.3-70-g09d2


From 06f4b34b8670d6dcebfd7b000dd2921ca778dfae Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Wed, 25 Jun 2014 00:22:50 -0400
Subject: yt, vimeo, video api

---
 .../assets/javascripts/mx/primitives/mx.video.js   | 99 +++++++++++++---------
 .../assets/javascripts/mx/primitives/mx.vimeo.js   | 91 ++++++++++++++------
 .../assets/javascripts/mx/primitives/mx.youtube.js | 56 +++++++++++-
 .../rectangles/engine/scenery/types/vimeo.js       |  2 -
 .../rectangles/engine/scenery/types/youtube.js     |  2 -
 .../javascripts/ui/builder/BuilderSettings.js      |  6 +-
 .../assets/javascripts/ui/builder/BuilderView.js   |  2 +-
 .../assets/javascripts/ui/editor/EditorSettings.js |  6 +-
 public/assets/javascripts/ui/editor/EditorView.js  |  4 +-
 public/assets/javascripts/ui/reader/ReaderView.js  |  2 +-
 public/assets/javascripts/ui/site/LayoutsModal.js  |  6 +-
 server/index.js                                    | 22 ++---
 12 files changed, 200 insertions(+), 98 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine')

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/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/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/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)
-- 
cgit v1.2.3-70-g09d2


From 9a2cfe7da6808a04b7c668075e9e9598ddb5ae04 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 11 Jul 2014 17:07:05 -0400
Subject: basic media editor

---
 .../javascripts/rectangles/engine/scenery/move.js  |  6 ++
 .../assets/javascripts/ui/editor/EditorToolbar.js  |  2 +-
 public/assets/javascripts/ui/editor/EditorView.js  |  2 +-
 public/assets/javascripts/ui/editor/MediaEditor.js | 69 ++++++++++++++++++++++
 public/assets/stylesheets/app.css                  | 23 +++++---
 views/controls/editor/media-editor.ejs             | 30 ++++++----
 views/editor.ejs                                   |  2 +-
 views/partials/scripts.ejs                         |  3 +-
 8 files changed, 115 insertions(+), 22 deletions(-)
 create mode 100644 public/assets/javascripts/ui/editor/MediaEditor.js

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index bad0a55..aa7ddd1 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -26,6 +26,12 @@ Scenery.move = function(base){
 			Scenery.remove(base.id)
 			return
 		}
+
+		if (editor.permissions.pick) {
+			// load the modal
+			app.router.editorView.mediaEditor.pick(base)
+		}
+
 		if (! (editor.permissions.move || editor.permissions.resize) ) {
 			e.clickAccepted = false
 			return
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 4a7c3e8..a3abc5a 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -87,7 +87,7 @@ var EditorToolbar = View.extend({
 
 var editor = new function(){
 	this.permissions = new Permissions({
-	  'pick': false,
+	  'pick': true,
 		'move': true,
 		'resize': false,
 		'destroy': false,
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 2bb2d61..017e241 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -13,6 +13,7 @@ var EditorView = View.extend({
 		this.settings = new EditorSettings ({ parent: this })
 		this.mediaViewer = new MediaViewer ({ parent: this })
 		this.mediaUpload = new MediaUpload ({ parent: this })
+		this.mediaEditor = new MediaEditor ({ parent: this })
 		this.wallpaperPicker = new WallpaperPicker ({ parent: this })
 		this.lightControl = new LightControl ({ parent: this })
 	},
@@ -39,4 +40,3 @@ var EditorView = View.extend({
 	}
 
 })
-
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
new file mode 100644
index 0000000..8d6d517
--- /dev/null
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -0,0 +1,69 @@
+
+var MediaEditor = FormView.extend({
+	el: "#mediaEditor",
+		
+	events: {
+	},
+
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$("[name=name]")
+		this.$description = this.$("[name=description]")
+		this.$autoplay = this.$("[name=autoplay]")
+
+		// image fields
+		this.$widthDimension = this.$("[name=width]")
+		this.$heightDimension = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		
+		// video fields
+		this.$playButton = this.$(".play")
+		this.$loop = this.$("[name=loop]")
+		this.$mute = this.$("[name=mute]")
+		this.$keyframe = this.$("[name=keyframe]")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", state);
+	},
+	
+	pick: function(scenery) {
+		this.$el.addClass("active")
+		
+		var media = scenery.media
+		
+		this.$name.val(media.title)
+		this.$description.val(media.description)
+		
+		switch (media.type) {
+			case "image":
+				this.$(".image").show()
+				this.$(".video").hide()
+				/*
+				this.$widthDimension
+				this.$heightDimension
+				this.$units
+				*/
+				
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".video").show()
+				this.$(".image").hide()
+				
+				/*
+				this.$loop
+				this.$mute
+				this.$keyframe
+				*/
+				
+				
+				break
+		}
+	},
+
+})
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 684761c..7389810 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1106,7 +1106,7 @@ input[type=range] {
     -webkit-appearance: none;
     -moz-appearance: none;
     background-color: black;
-    width: 200px;
+    width: 180px;
     height:3px;
 }
 
@@ -1176,13 +1176,15 @@ input[type="range"]::-webkit-slider-thumb {
 #startpoint.active:hover {
   text-decoration:none;
 }
-.settings input[type="text"], textarea{
+.settings input[type="text"] {
   border: 1px solid #000;
   font-size: 15px;
   padding: 5px;
 }
 
 .settings textarea {
+	border: 1px solid #000;
+	padding: 5px;
   font-size: 12px;
   width: 100%;
   max-height: 200px;
@@ -1193,7 +1195,7 @@ input[type="range"]::-webkit-slider-thumb {
   border: 1px solid #000;
 }
 
-.settings .setting{
+.settings .setting {
   margin-bottom:10px;
 }
 .setting.subButtons {
@@ -1210,6 +1212,13 @@ input[type="range"]::-webkit-slider-thumb {
 .settings .setting:last-child{
   margin-bottom:0px;
 }
+.settings input[type="text"].number {
+	width: 60px;
+}
+
+.setting label {
+	padding-right: 5px;
+}
 
 button {
   padding: 8px;
@@ -1372,23 +1381,23 @@ form li textarea {
 	margin-top: 20px;
 }
 
-.video {
+.demo .video {
   height:80vh;
   min-height:300px;
 }
 
-.video span {
+.demo .video span {
   font-size:100px;
   color:white;
   cursor:pointer;
 }
-.video span.videoTitle {
+.demo .video span.videoTitle {
   font-size: 29px;
   font-weight: 300;
   padding: 3px 7px;
 }
 
-.video span.icon-ios7-play-outline:hover {
+.demo .video span.icon-ios7-play-outline:hover {
   color:lightgreen;
 }
 
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 95aabb5..483fa72 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -1,4 +1,4 @@
-<div class="vvbox settings" id="editorMediaSettings">
+<div class="vvbox settings" id="mediaEditor">
 	<input type="hidden" name="_csrf" value="[[- token ]]">
 	<input type="hidden" name="_id" value="new">
 
@@ -15,24 +15,32 @@
 			<span class="ion-play"></span>
 			<span class="ion-pause"></span>
 		</span>
-		
 <!-- 
 		ion-volume-high
 		ion-volume-mute
  -->
-		
-		<input type="checkbox" name="autoplay" value="1"> Autoplay
-		<input type="checkbox" name="loop" value="1"> Loop
-		<input type="checkbox" name="mute" value="1"> Mute
-		<input type="range" min="0" max="1" name="keyframe"> Initial Still
+	</div>
+	<div class="video setting">
+		<input type="checkbox" name="autoplay" value="1" id="video_autoplay">
+		<label for="video_autoplay">Autoplay</label>
+		<input type="checkbox" name="loop" value="1" id="video_loop">
+		<label for="video_loop">Loop</label>
+		<input type="checkbox" name="mute" value="1" id="video_mute">
+		<label for="video_mute">Mute</label>
+	</div>
+
+	<div class="video setting">
+		Initial Still
+		<br>
+		<input type="range" min="0" max="1" value="0" step="0.01" name="keyframe">
 	</div>
 
 	<div class="image setting">
-		Dimensions
-		<input type="text" name="width"> Width
-		<input type="text" name="height"> Height
+		Dimensions<br>
+		<input type="text" name="width" placeholder="width" class="number">
+		<input type="text" name="height" placeholder="height" class="number">
 		<select name="units">
-			<option value="inches">in</option>
+			<option value="inch">inch</option>
 			<option value="cm">cm</option>
 		</select>
 	</div>
diff --git a/views/editor.ejs b/views/editor.ejs
index a79eb9a..5d1e052 100755
--- a/views/editor.ejs
+++ b/views/editor.ejs
@@ -13,8 +13,8 @@
 
 		<div id="editorView">
 			[[ include controls/editor/toolbar ]]
-			[[ include controls/editor/video-toolbar ]]
 			[[ include controls/editor/media-drawer ]]
+			[[ include controls/editor/media-editor ]]
 			[[ include controls/editor/wallpaper ]]
 			[[ include controls/editor/light-control ]]
 			[[ include controls/editor/settings ]]
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 6dd4480..40bb306 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -78,13 +78,14 @@
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
 
+<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorToolbar.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/LightControl.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/editor/MediaEditor.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaUpload.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/MediaViewer.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script>
 
-- 
cgit v1.2.3-70-g09d2


From 1826bed806b079c6e44703a4e5f424b7aed7bd96 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Fri, 11 Jul 2014 17:29:41 -0400
Subject: play button

---
 .../rectangles/engine/scenery/types/video.js         |  3 ---
 .../rectangles/engine/scenery/types/vimeo.js         | 14 +++++++++++++-
 public/assets/javascripts/ui/editor/MediaEditor.js   |  5 +++++
 public/assets/stylesheets/app.css                    | 20 ++++++++++++++++++++
 views/controls/editor/media-editor.ejs               |  5 ++---
 5 files changed, 40 insertions(+), 7 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 2f6dc01..a9fce4a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -15,10 +15,7 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 
 		build: function(){
 			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,
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
index 697c66a..ded5f87 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
@@ -22,7 +22,19 @@ Scenery.types.vimeo = Scenery.types.base.extend(function(base){
 			})
 			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
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 8d6d517..1ccb5cf 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,6 +3,7 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
+		"click .play": "togglePlaying",
 	},
 
 	initialize: function(opt){
@@ -29,7 +30,11 @@ var MediaEditor = FormView.extend({
     this.$el.toggleClass("active", state);
 	},
 	
+	togglePlaying: function(){
+	},
+	
 	pick: function(scenery) {
+		this.scenery = scenery
 		this.$el.addClass("active")
 		
 		var media = scenery.media
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 7389810..4296223 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,6 +1220,26 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
+.setting .play {
+	color: white;
+	background: black;
+	border-radius: 50px;
+	padding: 6px 7px 5px;
+	cursor: pointer;
+}
+.setting .play .icon-play {
+	display: inline;
+}
+.setting .play.playing .icon-play {
+	display: none;
+}
+.setting .play .icon-pause {
+	display: none;
+}
+.setting .play.playing .icon-pause {
+	display: inline;
+}
+
 button {
   padding: 8px;
   border: 1px solid;
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 483fa72..12ab2b4 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -12,8 +12,8 @@
 	
 	<div class="video setting">
 		<span class="play">
-			<span class="ion-play"></span>
-			<span class="ion-pause"></span>
+			<span class="icon-play"></span>
+			<span class="icon-pause"></span>
 		</span>
 <!-- 
 		ion-volume-high
@@ -28,7 +28,6 @@
 		<input type="checkbox" name="mute" value="1" id="video_mute">
 		<label for="video_mute">Mute</label>
 	</div>
-
 	<div class="video setting">
 		Initial Still
 		<br>
-- 
cgit v1.2.3-70-g09d2


From 3aac2d44b49d28c4a3e99d74d6d7769e985c2d02 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 14 Jul 2014 11:25:59 -0400
Subject: play button

---
 .../assets/javascripts/mx/primitives/mx.video.js   |  9 +++-
 .../assets/javascripts/mx/primitives/mx.vimeo.js   |  3 ++
 .../assets/javascripts/mx/primitives/mx.youtube.js |  3 ++
 .../rectangles/engine/scenery/_scenery.js          |  8 +---
 .../rectangles/engine/scenery/types/video.js       | 25 ++++++++++-
 .../rectangles/engine/scenery/types/vimeo.js       | 49 ----------------------
 .../rectangles/engine/scenery/types/youtube.js     | 37 ----------------
 public/assets/javascripts/ui/editor/MediaEditor.js | 16 ++++++-
 8 files changed, 53 insertions(+), 97 deletions(-)
 delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
 delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/youtube.js

(limited to 'public/assets/javascripts/rectangles/engine')

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
+	},
 
 })
-- 
cgit v1.2.3-70-g09d2


From 9825b711480eb5b6022ce6b56b8a6914c5f43e52 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 14 Jul 2014 13:05:57 -0400
Subject: pick initial frame

---
 .../assets/javascripts/mx/primitives/mx.video.js   | 12 ++++--
 .../assets/javascripts/mx/primitives/mx.vimeo.js   | 43 ++++++++++++++++++----
 .../assets/javascripts/mx/primitives/mx.youtube.js | 21 ++++++++---
 .../javascripts/rectangles/engine/scenery/move.js  |  6 +--
 public/assets/javascripts/ui/_router.js            | 12 +++---
 .../javascripts/ui/builder/BuilderSettings.js      |  4 +-
 .../assets/javascripts/ui/builder/BuilderView.js   |  2 +-
 .../assets/javascripts/ui/editor/EditorSettings.js |  4 +-
 public/assets/javascripts/ui/editor/EditorView.js  |  4 +-
 public/assets/javascripts/ui/editor/MediaEditor.js | 17 ++++++---
 public/assets/javascripts/ui/editor/MediaUpload.js |  8 ++--
 public/assets/javascripts/ui/editor/MediaViewer.js |  4 +-
 public/assets/javascripts/ui/lib/FormView.js       |  4 +-
 public/assets/javascripts/ui/reader/ReaderView.js  |  2 +-
 public/assets/javascripts/ui/site/DocumentModal.js |  4 +-
 .../assets/javascripts/ui/site/EditProfileModal.js |  4 +-
 .../assets/javascripts/ui/site/EditProjectModal.js |  4 +-
 public/assets/javascripts/ui/site/LayoutsModal.js  |  6 +--
 public/assets/stylesheets/app.css                  | 10 ++---
 views/controls/editor/media-editor.ejs             |  2 +-
 20 files changed, 111 insertions(+), 62 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index b1b9f6b..f92fe9f 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -28,8 +28,8 @@ MX.Video = MX.Object3D.extend({
   	this.paused = true
 
     this.player = document.createElement('video')
-		this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this))
-		this.player.addEventListener("error", $.proxy(this.error, this))
+		this.player.addEventListener("loadedmetadata", this.ready.bind(this))
+		this.player.addEventListener("error", this.error.bind(this))
 		this.player.width = this.width
 		this.player.height = this.height
     this.player.src = this.media.url
@@ -62,7 +62,10 @@ MX.Video = MX.Object3D.extend({
   },
   
 	seek: function(n){
-  	this.player.currentTime = n
+		if (n < 1) {
+			n = n * this.duration()
+		}
+		this.player.currentTime = n
   },
   
   duration: function(){
@@ -71,6 +74,9 @@ MX.Video = MX.Object3D.extend({
   
   finished: function(){
   	console.log("video finished")
+  	if (this.media.bound) {
+  		$(".playButton").removeClass('playing')
+  	}
   },
   
 
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index e558bc3..5a373ff 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -26,30 +26,34 @@ MX.Vimeo = MX.Object3D.extend({
 
   load: function (ops) {
   	var uid = 'player-' + Uid ()
-  	var preload = document.createElement("div")
+  	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', $.proxy(this.ready, this))
+
+  	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('finish', $.proxy(this.finished, this))
+  	this.player.addEvent('play', this.onPlay.bind(this))
+  	this.player.addEvent('pause', this.onPause.bind(this))
+  	this.player.addEvent('finish', this.finished.bind(this))
 
   	// so annoying that this is async!!
-  	this.player.api('getDuration', $.proxy(function(n){
+  	this.player.api('getDuration', function(n){
   		console.log("vimeo duration", n)
   		this.player.duration = n
-  	}, this))
+  	}.bind(this))
 
   },
   
@@ -68,14 +72,39 @@ MX.Vimeo = MX.Object3D.extend({
   },
   
   seek: function(n){
-  	this.player.api('seekTo', n)
+		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
   },
   
+  onPlay: function(){
+  	if (this.paused) {
+  		this.pause()
+  	}
+  },
+  
+  onPause: function(){
+  	if (! this.paused) {
+  		this.play()
+  	}
+  },
+  
   finished: function(){
+  	if (this.media.bound) {
+  		$(".playButton").removeClass('playing')
+  	}
   }
   
 })
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index cc0ec0a..a31a24d 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -56,9 +56,9 @@ MX.Youtube = MX.Object3D.extend({
 			width: this.width,
 			height: this.height,
 			events: {
-				onReady: $.proxy(this.ready, this),
-				onError: $.proxy(this.error, this),
-				onStateChange: $.proxy(this.statechange, this),
+				onReady: this.ready.bind(this),
+				onError: this.error.bind(this),
+				onStateChange: this.statechange.bind(this),
 			},
 			playerVars: {
 				autohide: 1,
@@ -93,10 +93,11 @@ MX.Youtube = MX.Object3D.extend({
   			this.finished()
   			break
   		case 1:  // play
-  			this.paused = false
+  			if (this.paused) {
+  				this.pause()
+  			}
   			break
   		case 2:  // pause
-  			this.paused = true
   			break
   		case 3:  // buffering
   			break
@@ -106,15 +107,20 @@ MX.Youtube = MX.Object3D.extend({
   },
   
   play: function(){
+		this.paused = false
   	this.player.playVideo()
   },
   
   pause: function(){
+		this.paused = true
 		this.player.pauseVideo()
   },
   
   seek: function(n, allowSeekAhead){
-  	allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true
+		if (n < 1) {
+			n = n * this.duration()
+		}
+		allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true
   	this.player.seekTo(n, true) // set to false if seeking manually
   },
   
@@ -124,6 +130,9 @@ MX.Youtube = MX.Object3D.extend({
   
   finished: function(){
   	console.log("youtube finished")
+  	if (this.media.bound) {
+  		$(".playButton").removeClass('playing')
+  	}
   }
   
 })
diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index aa7ddd1..6229162 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -27,10 +27,8 @@ Scenery.move = function(base){
 			return
 		}
 
-		if (editor.permissions.pick) {
-			// load the modal
-			app.router.editorView.mediaEditor.pick(base)
-		}
+		// load the modal
+		app.router.editorView.mediaEditor.pick(base)
 
 		if (! (editor.permissions.move || editor.permissions.resize) ) {
 			e.clickAccepted = false
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index b3e868a..886b8be 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -189,13 +189,13 @@ var SiteRouter = Router.extend({
 		
 		var name = e ? $(e.currentTarget).data("name") : name
 		
-		confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){
-			this.documentModal.destroy(name, $.proxy(function(){
-				AlertModal.alert("Document deleted!", $.proxy(function(){
+		confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){
+			this.documentModal.destroy(name, function(){
+				AlertModal.alert("Document deleted!", function(){
 					window.location.href = "/about"
-				}, this))
-			}, this))
-		}, this))
+				}.bind(this))
+			}.bind(this))
+		}.bind(this))
 		
 		// this.documentModal.destroy(name)
 	},
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 9fcd55f..6006868 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -57,7 +57,7 @@ var BuilderSettings = FormView.extend({
 	
 	destroy: function(){
 		var msg = "Are you sure you want to delete the layout " + sanitize(this.$name.val()) + "?"
-		ConfirmModal.confirm(msg, $.proxy(function(){
+		ConfirmModal.confirm(msg, function(){
 			$.ajax({
 				url: this.destroyAction,
 				type: "delete",
@@ -66,7 +66,7 @@ var BuilderSettings = FormView.extend({
 					window.location.href = "/layout"
 				}
 			})
-		}, this))
+		}.bind(this))
 	},
 
 	toggle: function(){
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index b42d3e7..a83bf43 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -20,7 +20,7 @@ var BuilderView = View.extend({
 		
 		name = sanitize(name)
 		
-		$.get(this.action + name, $.proxy(this.ready, this))
+		$.get(this.action + name, this.ready.bind(this))
 	},
 	
 	ready: function(data){
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 1d68b1b..887c894 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -65,7 +65,7 @@ var EditorSettings = FormView.extend({
 	
 	destroy: function(){
 		var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?"
-		ConfirmModal.confirm(msg, $.proxy(function(){
+		ConfirmModal.confirm(msg, function(){
 			$.ajax({
 				url: this.destroyAction,
 				type: "delete",
@@ -74,7 +74,7 @@ var EditorSettings = FormView.extend({
 					window.location.href = "/project"
 				}
 			})
-		}, this))
+		}.bind(this))
 	},
 
 	toggle: function(){
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 017e241..322637e 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -20,12 +20,12 @@ var EditorView = View.extend({
 
 	load: function(name){
 		name = sanitize(name)
-		$.get(this.projectAction + name, $.proxy(this.ready, this))
+		$.get(this.projectAction + name, this.ready.bind(this))
 	},
 	
 	loadLayout: function(layout){
 		layout = sanitize(layout)
-		$.get(this.layoutAction + layout, $.proxy(this.readyLayout, this))
+		$.get(this.layoutAction + layout, this.readyLayout.bind(this))
 	},
 	
 	ready: function(data){
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 47a938b..29ec9e5 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,7 +3,8 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
-		"click .play": "togglePlaying",
+		"click .playButton": "togglePlaying",
+		"change [name=keyframe]": "seek",
 	},
 
 	initialize: function(opt){
@@ -20,7 +21,7 @@ var MediaEditor = FormView.extend({
 		this.$units = this.$("[name=units]")
 		
 		// video fields
-		this.$playButton = this.$(".play")
+		this.$playButton = this.$(".playButton")
 		this.$loop = this.$("[name=loop]")
 		this.$mute = this.$("[name=mute]")
 		this.$keyframe = this.$("[name=keyframe]")
@@ -39,7 +40,7 @@ var MediaEditor = FormView.extend({
 		if (this.scenery) {
 			this.unbind()
 		}
-	
+
 		this.bind(scenery)
 		this.$el.addClass("active")
 		
@@ -71,17 +72,23 @@ var MediaEditor = FormView.extend({
 				this.$mute
 				this.$keyframe
 				*/
-				
-				
 				break
 		}
+
+	},
+	
+	seek: function(){
+		var n = parseFloat( this.$keyframe.val() )
+		this.scenery.seek(n)
 	},
 	
 	bind: function(scenery){
 		this.scenery = scenery
+		this.scenery.media.bound = true
 	},
 	
 	unbind: function(){
+		this.scenery.media.bound = false
 		this.scenery = null
 	},
 
diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js
index b7fea07..86bf767 100644
--- a/public/assets/javascripts/ui/editor/MediaUpload.js
+++ b/public/assets/javascripts/ui/editor/MediaUpload.js
@@ -39,7 +39,7 @@ var MediaUpload = View.extend({
 		var url = this.$url.val()
 		this.$url.val("")
 		
-		Parser.parse(url, $.proxy(function(media){
+		Parser.parse(url, function(media){
 			if (! media) {
 				alert("Not a valid image/video link")
 				return
@@ -53,8 +53,8 @@ var MediaUpload = View.extend({
 				url: this.createAction,
 				data: media,
 			})
-			request.done($.proxy(this.add, this))
-		}, this))
+			request.done(this.add.bind(this))
+		}.bind(this))
 	},
 	
 	handleFileSelect: function(e) {
@@ -109,7 +109,7 @@ var MediaUpload = View.extend({
 			processData: false,
 			contentType: false,
 		})
-		request.done($.proxy(this.add, this))
+		request.done(this.add.bind(this))
 	},
 	
 	add: function(media){
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 88c3b18..264ed7c 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -40,12 +40,12 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", $.proxy(this.populate, this))
+		$.get("/api/media/user", this.populate.bind(this))
 	},
 
 	populate: function(data){
 		this.loaded = true
-		data && data.forEach($.proxy(this.add, this))
+		data && data.forEach(this.add.bind(this))
 		this.__super__.show.call(this)
 	},
 	
diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js
index 0106ce0..219952d 100644
--- a/public/assets/javascripts/ui/lib/FormView.js
+++ b/public/assets/javascripts/ui/lib/FormView.js
@@ -26,9 +26,9 @@ var FormView = View.extend({
 				this.$errorList.append('<div>' + errors[i] + '</div>');
 			}
 			this.$errors.css("opacity", 1.0);
-			setTimeout($.proxy(function(){
+			setTimeout(function(){
 				this.$errors.show().css("opacity", 1.0);
-			}, this), 200)
+			}.bind(this), 200)
 		}
 	},
 	
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index add1ea1..bbdd437 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -15,7 +15,7 @@ var ReaderView = View.extend({
 			$(".logo,.topLinks,#editorView").hide()
 		}
 		name = sanitize(name)
-		$.get(this.projectAction + name, $.proxy(this.ready, this))
+		$.get(this.projectAction + name, this.ready.bind(this))
 	},
 	
 	ready: function(data){
diff --git a/public/assets/javascripts/ui/site/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js
index 6f16169..067977d 100644
--- a/public/assets/javascripts/ui/site/DocumentModal.js
+++ b/public/assets/javascripts/ui/site/DocumentModal.js
@@ -20,7 +20,7 @@ var DocumentModal = ModalFormView.extend({
 
 		this.action = this.updateAction
 		
-		$.get("/api/docs", { name: name }, $.proxy(function(data){
+		$.get("/api/docs", { name: name }, function(data){
 			if (data.isNew) {
 				this.action = this.createAction
 			}
@@ -31,7 +31,7 @@ var DocumentModal = ModalFormView.extend({
 			this.$("[name='new_name']").val(name)
 
 			this.show()
-		}, this))
+		}.bind(this))
 	},
 	
 	success: function(res){
diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js
index 6b89ad8..b023923 100644
--- a/public/assets/javascripts/ui/site/EditProfileModal.js
+++ b/public/assets/javascripts/ui/site/EditProfileModal.js
@@ -6,7 +6,7 @@ var EditProfileModal = ModalFormView.extend({
 
 	load: function(){
 		this.reset()
-		$.get("/api/profile", $.proxy(function(data){
+		$.get("/api/profile", function(data){
 			console.log(data)
 			
 			for (var i in data) {
@@ -23,7 +23,7 @@ var EditProfileModal = ModalFormView.extend({
 			}
 			
 			this.show()
-		}, this))
+		}.bind(this))
 	},
 
 	validate: function(){
diff --git a/public/assets/javascripts/ui/site/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js
index 356d8b7..20baa54 100644
--- a/public/assets/javascripts/ui/site/EditProjectModal.js
+++ b/public/assets/javascripts/ui/site/EditProjectModal.js
@@ -31,7 +31,7 @@ var EditProjectModal = ModalView.extend({
 		var fields = this.$form.serializeArray()
 		
 		var request = $.post(this.action, $.param(fields));
-		request.done($.proxy(function (response) {
+		request.done(function (response) {
 			if (response.error) {
 				this.$errors.show();
 				for (var key in response.error.errors) {
@@ -42,7 +42,7 @@ var EditProjectModal = ModalView.extend({
 			else {
 				window.location.href = "/profile"
 			}
-		}, this));
+		}.bind(this));
 	}
 
 })
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index d474aa7..3b9e6cd 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -8,18 +8,18 @@ var LayoutsIndex = View.extend({
 	load: function(type){
 		this.$templates.children("span").remove()
 		
-		$.get(this.action, $.proxy(this.populate, this))
+		$.get(this.action, this.populate.bind(this))
 	},
 
 	populate: function(data){
-		data.forEach($.proxy(function(room){
+		data.forEach(function(room){
 			var $span = $("<span>")
 			// $span.html(JSON.stringify(room))
 			$span.data("slug", room.slug)
 			$span.css("background-image", "url(" + room.photo + ")")
 			
 			this.$templates.append($span)
-		}, this))
+		}.bind(this))
 		this.show()
 	}
 
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 4296223..500f444 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,23 +1220,23 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
-.setting .play {
+.setting .playButton {
 	color: white;
 	background: black;
 	border-radius: 50px;
 	padding: 6px 7px 5px;
 	cursor: pointer;
 }
-.setting .play .icon-play {
+.setting .playButton .icon-play {
 	display: inline;
 }
-.setting .play.playing .icon-play {
+.setting .playButton.playing .icon-play {
 	display: none;
 }
-.setting .play .icon-pause {
+.setting .playButton .icon-pause {
 	display: none;
 }
-.setting .play.playing .icon-pause {
+.setting .playButton.playing .icon-pause {
 	display: inline;
 }
 
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 12ab2b4..46b8a42 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -11,7 +11,7 @@
 	</div>
 	
 	<div class="video setting">
-		<span class="play">
+		<span class="playButton">
 			<span class="icon-play"></span>
 			<span class="icon-pause"></span>
 		</span>
-- 
cgit v1.2.3-70-g09d2


From 9fe187effeaf4a2e6205e2f1f52b32b8823f4f10 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 14 Jul 2014 15:21:12 -0400
Subject: muting, autoplay, loop

---
 .../assets/javascripts/mx/primitives/mx.video.js   | 15 ++++++-
 .../assets/javascripts/mx/primitives/mx.vimeo.js   | 14 ++++++-
 .../assets/javascripts/mx/primitives/mx.youtube.js | 16 ++++++-
 .../rectangles/engine/scenery/types/video.js       |  9 ++++
 public/assets/javascripts/ui/editor/MediaEditor.js | 49 +++++++++++++++-------
 public/assets/javascripts/ui/lib/View.js           |  6 ++-
 server/lib/api/media.js                            |  1 -
 server/lib/schemas/Media.js                        | 13 ++++++
 server/lib/schemas/Project.js                      |  4 --
 9 files changed, 104 insertions(+), 23 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index f92fe9f..c5dd749 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -30,6 +30,7 @@ MX.Video = MX.Object3D.extend({
     this.player = document.createElement('video')
 		this.player.addEventListener("loadedmetadata", this.ready.bind(this))
 		this.player.addEventListener("error", this.error.bind(this))
+		this.player.addEventListener("ended", this.finished.bind(this))
 		this.player.width = this.width
 		this.player.height = this.height
     this.player.src = this.media.url
@@ -68,13 +69,25 @@ MX.Video = MX.Object3D.extend({
 		this.player.currentTime = n
   },
   
+  mute: function(){
+  	this.player.muted = true
+  },
+  
+  unmute: function(){
+  	this.player.muted = false
+  },
+  
   duration: function(){
   	return this.player.duration
   },
   
   finished: function(){
   	console.log("video finished")
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   },
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 5a373ff..c44464e 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -88,6 +88,14 @@ MX.Vimeo = MX.Object3D.extend({
   duration: function(){
 		return this.player.duration
   },
+
+  mute: function(){
+		this.player.api('setVolume', 0.0)
+  },
+  
+  unmute: function(){
+		this.player.api('setVolume', 0.8)
+  },
   
   onPlay: function(){
   	if (this.paused) {
@@ -102,7 +110,11 @@ MX.Vimeo = MX.Object3D.extend({
   },
   
   finished: function(){
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   }
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index a31a24d..68bb5f3 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -79,6 +79,7 @@ MX.Youtube = MX.Object3D.extend({
   
   ready: function(){
   	console.log("youtube ready")
+  	this.seek(0)
   },
   
   error: function(err){
@@ -127,10 +128,23 @@ MX.Youtube = MX.Object3D.extend({
   duration: function(){
   	return this.player.getDuration()
   },
+
+  mute: function(){
+		this.player.mute()
+  },
+  
+  unmute: function(){
+		this.player.unMute()
+		this.player.setVolume(80)
+  },
   
   finished: function(){
   	console.log("youtube finished")
-  	if (this.media.bound) {
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
   		$(".playButton").removeClass('playing')
   	}
   }
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 6117826..e61a0fa 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -57,6 +57,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		seek: function(n){
 			this.mx.seek(n)
 		},
+		
+		mute: function(muted){
+			if (muted) {
+				this.mx.mute()
+			}
+			else {
+				this.mx.unmute()
+			}
+		},
 
 		serialize: function(){
 			var data = base.serialize.call(this)
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 29ec9e5..aea78aa 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -4,9 +4,13 @@ var MediaEditor = FormView.extend({
 		
 	events: {
 		"click .playButton": "togglePlaying",
+		"mousedown [name=keyframe]": "stopPropagation",
 		"change [name=keyframe]": "seek",
+		"change [name=autoplay]": "setAutoplay",
+		"change [name=loop]": "setLoop",
+		"change [name=mute]": "setMute",
 	},
-
+	
 	initialize: function(opt){
 		this.parent = opt.parent
 		this.__super__.initialize.call(this)
@@ -22,6 +26,7 @@ var MediaEditor = FormView.extend({
 		
 		// video fields
 		this.$playButton = this.$(".playButton")
+		this.$autoplay = this.$("[name=autoplay]")
 		this.$loop = this.$("[name=loop]")
 		this.$mute = this.$("[name=mute]")
 		this.$keyframe = this.$("[name=keyframe]")
@@ -53,11 +58,10 @@ var MediaEditor = FormView.extend({
 			case "image":
 				this.$(".image").show()
 				this.$(".video").hide()
-				/*
-				this.$widthDimension
-				this.$heightDimension
-				this.$units
-				*/
+
+				this.$widthDimension.val( Number(media.widthDimension) || "" )
+				this.$heightDimension.val( Number(media.heightDimension) || "" )
+				this.$units.val( media.units || "cm" )
 				
 				break
 
@@ -67,11 +71,12 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				/*
-				this.$loop
-				this.$mute
-				this.$keyframe
-				*/
+				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+				this.$mute.prop('checked', !! media.mute)
+				this.$keyframe.val( Number(media.keyframe || 0) )
+
 				break
 		}
 
@@ -80,15 +85,31 @@ var MediaEditor = FormView.extend({
 	seek: function(){
 		var n = parseFloat( this.$keyframe.val() )
 		this.scenery.seek(n)
+		
+		this.scenery.media.keyframe = n
 	},
-	
+
+	setAutoplay: function(){
+		var checked = this.$autoplay.prop('checked')
+		this.scenery.media.autoplay = checked
+	},
+	setLoop: function(){
+		var checked = this.$loop.prop('checked')
+		this.scenery.media.loop = checked
+	},
+	setMute: function(){
+		var checked = this.$mute.prop('checked')
+		this.scenery.media.mute = checked
+		this.scenery.mute(checked)
+	},
+
 	bind: function(scenery){
 		this.scenery = scenery
-		this.scenery.media.bound = true
+		this.scenery.mx.bound = true
 	},
 	
 	unbind: function(){
-		this.scenery.media.bound = false
+		this.scenery.mx.bound = false
 		this.scenery = null
 	},
 
diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js
index 5fc6736..999a0e5 100644
--- a/public/assets/javascripts/ui/lib/View.js
+++ b/public/assets/javascripts/ui/lib/View.js
@@ -84,7 +84,11 @@ var View = (function($, _){
 		
 		preventDefault: function(e){
 			e && e.preventDefault()
-		}
+		},
+		
+		stopPropagation: function(e){
+			e && e.stopPropagation()
+		},
 
 	});
 
diff --git a/server/lib/api/media.js b/server/lib/api/media.js
index 9699c16..16f9d41 100644
--- a/server/lib/api/media.js
+++ b/server/lib/api/media.js
@@ -43,7 +43,6 @@ var media = {
 		})
 		
 		function done () {
-			console.log(data)
 			new Media(data).save(function(err, rec) {
 				if (err || ! rec) { return res.json({ error: err }) }
 				res.json(rec)
diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js
index b415bae..1f26b8e 100644
--- a/server/lib/schemas/Media.js
+++ b/server/lib/schemas/Media.js
@@ -33,6 +33,19 @@ var MediaSchema = new mongoose.Schema({
 		type: String,
 		default: ""
 	},
+	description: {
+		type: String,
+		default: ""
+	},
+	autoplay: { type: Boolean, default: false },
+	loop: { type: Boolean, default: false },
+	mute: { type: Boolean, default: true },
+	keyframe: { type: Number, default: 0.0 },
+
+	widthDimension: { type: Number },
+	heightDimension: { type: Number },
+	units: { type: String },
+	
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 });
diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js
index 75cefc5..0f54eaa 100644
--- a/server/lib/schemas/Project.js
+++ b/server/lib/schemas/Project.js
@@ -27,10 +27,6 @@ var ProjectSchema = new mongoose.Schema({
 	photo: {
 		type: String,
 	},
-	about: {
-		type: String,
-		default: ""
-	},
 	rooms: [mongoose.Schema.Types.Mixed],
 	walls: [mongoose.Schema.Types.Mixed],
 	media: [mongoose.Schema.Types.Mixed],
-- 
cgit v1.2.3-70-g09d2


From 7ded9f91d3f3ab538425122be07f7436275b9b8d Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Mon, 14 Jul 2014 18:04:21 -0400
Subject: play button and stuff on the viewer

---
 .../javascripts/rectangles/engine/scenery/move.js  |  2 +-
 .../assets/javascripts/rectangles/models/wall.js   |  3 +
 public/assets/javascripts/ui/_router.js            |  8 +-
 public/assets/javascripts/ui/editor/EditorView.js  |  8 ++
 public/assets/javascripts/ui/editor/MediaEditor.js |  9 ++-
 public/assets/javascripts/ui/reader/MediaPlayer.js | 92 ++++++++++++++++++++++
 public/assets/javascripts/ui/reader/ReaderView.js  | 15 +++-
 public/assets/stylesheets/app.css                  | 11 +--
 views/controls/reader/about-media.ejs              | 16 ----
 views/controls/reader/media-player.ejs             | 14 ++++
 views/partials/scripts.ejs                         |  3 +-
 views/reader.ejs                                   |  1 +
 12 files changed, 150 insertions(+), 32 deletions(-)
 create mode 100644 public/assets/javascripts/ui/reader/MediaPlayer.js
 delete mode 100644 views/controls/reader/about-media.ejs
 create mode 100644 views/controls/reader/media-player.ejs

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js
index 6229162..94a4e52 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/move.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/move.js
@@ -28,7 +28,7 @@ Scenery.move = function(base){
 		}
 
 		// load the modal
-		app.router.editorView.mediaEditor.pick(base)
+		app.controller.pick(base)
 
 		if (! (editor.permissions.move || editor.permissions.resize) ) {
 			e.clickAccepted = false
diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index b2a5b12..cc298c6 100644
--- a/public/assets/javascripts/rectangles/models/wall.js
+++ b/public/assets/javascripts/rectangles/models/wall.js
@@ -45,6 +45,9 @@ window.Wall = (function(){
 				if (Scenery.nextMedia) {
 					Scenery.addNextToWall(base)
 				}
+				else {
+					app.controller.hideExtras()
+				}
 			}
 		})
 	}
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 886b8be..c0f35b6 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -61,7 +61,7 @@ var SiteRouter = Router.extend({
 		app.mode.builder = true
 		app.launch()
 
-		this.builderView = new BuilderView()
+		this.builderView = app.controller = new BuilderView()
 		this.builderView.load(name)
 	},
 	
@@ -92,7 +92,7 @@ var SiteRouter = Router.extend({
 		layout = slugify(layout)
 		
 		window.history.pushState(null, document.title, "/project/new/" + layout)
-		this.editorView = new EditorView()
+		this.editorView = app.controller = new EditorView()
 		this.editorView.loadLayout(layout)
 	},
 
@@ -109,7 +109,7 @@ var SiteRouter = Router.extend({
 		app.mode.editor = true
 		app.launch()
 
-		this.editorView = new EditorView()
+		this.editorView = app.controller = new EditorView()
 		this.editorView.load(name)
 	},
 	
@@ -117,7 +117,7 @@ var SiteRouter = Router.extend({
 		app.mode.editor = true
 		app.launch()
 
-		this.readerView = new ReaderView()
+		this.readerView = app.controller = new ReaderView()
 		this.readerView.load(name)
 	},
 
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 322637e..4067c4d 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -37,6 +37,14 @@ var EditorView = View.extend({
 	readyLayout: function(data){
 		data.isNew = true
 		this.ready(data)
+	},
+	
+	pick: function(scenery){
+		this.mediaEditor.pick(scenery)
+	},
+	
+	hideExtras: function(){
+		this.mediaEditor.hide()
 	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index aea78aa..4e1132c 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -5,6 +5,7 @@ var MediaEditor = FormView.extend({
 	events: {
 		"click .playButton": "togglePlaying",
 		"mousedown [name=keyframe]": "stopPropagation",
+		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
 		"change [name=loop]": "setLoop",
@@ -17,7 +18,6 @@ var MediaEditor = FormView.extend({
 		
 		this.$name = this.$("[name=name]")
 		this.$description = this.$("[name=description]")
-		this.$autoplay = this.$("[name=autoplay]")
 
 		// image fields
 		this.$widthDimension = this.$("[name=width]")
@@ -79,7 +79,13 @@ var MediaEditor = FormView.extend({
 
 				break
 		}
+	},
 
+	hide: function(scenery){
+		if (this.scenery) {
+			this.unbind()
+		}
+		this.toggle(false)
 	},
 	
 	seek: function(){
@@ -88,7 +94,6 @@ var MediaEditor = FormView.extend({
 		
 		this.scenery.media.keyframe = n
 	},
-
 	setAutoplay: function(){
 		var checked = this.$autoplay.prop('checked')
 		this.scenery.media.autoplay = checked
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
new file mode 100644
index 0000000..74054b4
--- /dev/null
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -0,0 +1,92 @@
+
+var MediaPlayer = FormView.extend({
+	el: "#mediaPlayer",
+		
+	events: {
+		"click .playButton": "togglePlaying",
+		"mousedown": "stopPropagation",
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.__super__.initialize.call(this)
+		
+		this.$name = this.$(".name")
+		this.$description = this.$(".description")
+
+		// image fields
+		this.$dimensions = this.$(".dimensions")
+		
+		// video fields
+		this.$playButton = this.$(".playButton")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", state);
+	},
+	
+	togglePlaying: function(){
+		var state = this.scenery.toggle()
+		this.$playButton.toggleClass("playing", ! state)
+	},
+	
+	pick: function(scenery) {
+		var media = scenery.media
+
+		if (this.scenery) {
+			this.unbind()
+		}
+		if (media.type == "image") {
+			if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length)) {
+				this.hide()
+				return
+			}
+		}
+
+		this.bind(scenery)
+		this.$el.addClass("active")
+				
+		this.$name.html(media.title)
+		this.$description.html(media.description)
+		
+		switch (media.type) {
+			case "image":
+				this.$(".image").show()
+				this.$(".video").hide()
+
+				this.$widthDimension.html( Number(media.widthDimension) || "" )
+				this.$heightDimension.html( Number(media.heightDimension) || "" )
+				this.$units.html( media.units || "cm" )
+				
+				break
+
+			case "youtube":
+			case "vimeo":
+			case "video":
+				this.$(".video").show()
+				this.$(".image").hide()
+				
+				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+
+				break
+		}
+	},
+	
+	hide: function(scenery){
+		if (this.scenery) {
+			this.unbind()
+		}
+		this.toggle(false)
+	},
+	
+	bind: function(scenery){
+		this.scenery = scenery
+		this.scenery.mx.bound = true
+	},
+	
+	unbind: function(){
+		this.scenery.mx.bound = false
+		this.scenery = null
+	},
+
+})
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index bbdd437..a2c2983 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -8,6 +8,7 @@ var ReaderView = View.extend({
 	},
 	
 	initialize: function(){
+		this.mediaPlayer = new MediaPlayer ({ parent: this })
 	},
 
 	load: function(name){
@@ -27,8 +28,10 @@ var ReaderView = View.extend({
 		
 		editor.permissions.clear()
 		
-		//
-		
+		this.listen()
+	},
+	
+	listen: function(){
 		var base = this
 		
 		$(window).on('message', function(event){
@@ -55,6 +58,14 @@ var ReaderView = View.extend({
 		if (this.spinning) {
 			scene.camera.rotationY -= 1/180
 		}
+	},
+
+	pick: function(scenery){
+		this.mediaPlayer.pick(scenery)
+	},
+
+	hideExtras: function(){
+		this.mediaPlayer.hide()
 	}
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 500f444..215bbab 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,23 +1220,23 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
-.setting .playButton {
+.playButton {
 	color: white;
 	background: black;
 	border-radius: 50px;
 	padding: 6px 7px 5px;
 	cursor: pointer;
 }
-.setting .playButton .icon-play {
+.playButton .icon-play {
 	display: inline;
 }
-.setting .playButton.playing .icon-play {
+.playButton.playing .icon-play {
 	display: none;
 }
-.setting .playButton .icon-pause {
+.playButton .icon-pause {
 	display: none;
 }
-.setting .playButton.playing .icon-pause {
+.playButton.playing .icon-pause {
 	display: inline;
 }
 
@@ -1507,6 +1507,7 @@ form li textarea {
   bottom: 10px;
   padding-right:10px;
   background:rgba(255,255,255,0.95);
+  z-index: 2;
 }
 
 .share h2 {
diff --git a/views/controls/reader/about-media.ejs b/views/controls/reader/about-media.ejs
deleted file mode 100644
index c6365ad..0000000
--- a/views/controls/reader/about-media.ejs
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="vvbox" id="aboutMedia">
-
-	<span class="name"></span><br>
-	<span class="author"></span><br>
-	<span class="description"></span><br>
-	<span class="dimensions"></span><br>
-	
-	<div class="video">
-		<span class="play">
-			<span class="ion-play"></span>
-			<span class="ion-pause"></span>
-		</span>
-		<input type="range" min="0" max="1" name="keyframe">
-	</div>
-
-</div>
diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs
new file mode 100644
index 0000000..71f69a8
--- /dev/null
+++ b/views/controls/reader/media-player.ejs
@@ -0,0 +1,14 @@
+<div class="vvbox settings" id="mediaPlayer">
+
+	<span class="playButton video">
+		<span class="icon-play"></span>
+		<span class="icon-pause"></span>
+	</span>
+
+	<span class="name"></span>
+	
+	<div class="author"></div>
+	<div class="description"></div>
+	<div class="dimensions"></div>
+	
+</div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 40bb306..47a027e 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -38,8 +38,6 @@
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/_object.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/image.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/video.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/youtube.js"></script>
-<script type="text/javascript" src="/assets/javascripts/rectangles/engine/scenery/types/vimeo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/_map.js"></script>
 <script type="text/javascript" src="/assets/javascripts/rectangles/engine/map/ui_editor.js"></script>
@@ -88,6 +86,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/editor/WallpaperPicker.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/reader/ReaderView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/reader/MediaPlayer.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/_router.js"></script>
 
diff --git a/views/reader.ejs b/views/reader.ejs
index c389431..44fb2dd 100644
--- a/views/reader.ejs
+++ b/views/reader.ejs
@@ -13,6 +13,7 @@
 
 		<div id="editorView">
 			[[ include controls/reader/about-room ]]
+			[[ include controls/reader/media-player ]]
 		</div>
 	</div>
 
-- 
cgit v1.2.3-70-g09d2


From cdce6146956b5e6f335022631d9ffeae6c90efcc Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 15 Jul 2014 10:42:35 -0400
Subject: pause/mute button on reader

---
 .../assets/javascripts/mx/primitives/mx.video.js   | 12 ++++++---
 .../assets/javascripts/mx/primitives/mx.vimeo.js   | 14 +++++++++-
 .../assets/javascripts/mx/primitives/mx.youtube.js | 14 +++++++++-
 .../rectangles/engine/scenery/types/video.js       | 14 +++++++++-
 public/assets/javascripts/ui/_router.js            |  2 +-
 public/assets/javascripts/ui/editor/MediaEditor.js | 22 ++++++++++++----
 public/assets/javascripts/ui/reader/MediaPlayer.js | 30 ++++++++++++++--------
 public/assets/stylesheets/app.css                  | 29 ++++++++++++++++-----
 views/controls/editor/media-editor.ejs             | 10 +++-----
 views/controls/reader/media-player.ejs             | 11 +++++---
 10 files changed, 119 insertions(+), 39 deletions(-)

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index c5dd749..5341226 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -20,6 +20,7 @@ MX.Video = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -40,12 +41,15 @@ MX.Video = MX.Object3D.extend({
   },
   
   ready: function(){
+		this.seek( this.media.keyframe || 0 )
+
+		if (this.media.mute) {
+			this.mute()
+		}
+
 		if (this.media.autoplay) {
 			this.play()
 		}
-		else {
-			this.player.currentTime = this.player.duration / 3
-		}
   },
   
   error: function(err){
@@ -71,10 +75,12 @@ MX.Video = MX.Object3D.extend({
   
   mute: function(){
   	this.player.muted = true
+  	this.muted = true
   },
   
   unmute: function(){
   	this.player.muted = false
+  	this.muted = false
   },
   
   duration: function(){
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index c44464e..e7555ef 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -20,6 +20,7 @@ MX.Vimeo = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -49,12 +50,21 @@ MX.Vimeo = MX.Object3D.extend({
   	this.player.addEvent('pause', this.onPause.bind(this))
   	this.player.addEvent('finish', this.finished.bind(this))
 
-  	// so annoying that this is async!!
+  	// 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){
@@ -91,10 +101,12 @@ MX.Vimeo = MX.Object3D.extend({
 
   mute: function(){
 		this.player.api('setVolume', 0.0)
+  	this.muted = true
   },
   
   unmute: function(){
 		this.player.api('setVolume', 0.8)
+  	this.muted = false
   },
   
   onPlay: function(){
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 68bb5f3..a06cf5b 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -20,6 +20,7 @@ MX.Youtube = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = true
+		this.muted = this.media.mute
 		
 		this.load()
   },
@@ -79,7 +80,16 @@ MX.Youtube = MX.Object3D.extend({
   
   ready: function(){
   	console.log("youtube ready")
-  	this.seek(0)
+
+		if (this.media.autoplay) {
+			this.play()
+		}
+  	
+		if (this.media.mute) {
+			this.mute()
+		}
+
+		this.seek( this.media.keyframe || 0 )
   },
   
   error: function(err){
@@ -131,11 +141,13 @@ MX.Youtube = MX.Object3D.extend({
 
   mute: function(){
 		this.player.mute()
+  	this.muted = true
   },
   
   unmute: function(){
 		this.player.unMute()
 		this.player.setVolume(80)
+  	this.muted = false
   },
   
   finished: function(){
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index e61a0fa..8cd5e6b 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -43,17 +43,29 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 		},
 		
 		toggle: function(shouldPause){
-			if (typeof shouldPause === "undefined") {
+			if (typeof shouldPause !== "boolean") {
 				shouldPause = ! this.mx.paused
 			}
 			shouldPause ? this.mx.pause() : this.mx.play()
 			return shouldPause
 		},
 		
+		toggleMuted: function(shouldMute){
+			if (typeof shouldMute !== "boolean") {
+				shouldMute = ! this.mx.muted
+			}
+			shouldMute ? this.mx.mute() : this.mx.unmute()
+			return shouldMute
+		},
+		
 		paused: function(){
 			return this.mx.paused
 		},
 		
+		muted: function(){
+			return this.mx.muted
+		},
+		
 		seek: function(n){
 			this.mx.seek(n)
 		},
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index c0f35b6..2b2c7c0 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -189,7 +189,7 @@ var SiteRouter = Router.extend({
 		
 		var name = e ? $(e.currentTarget).data("name") : name
 		
-		confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){
+		ConfirmModal.confirm("Are you sure you want to delete " + name + "?", function(){
 			this.documentModal.destroy(name, function(){
 				AlertModal.alert("Document deleted!", function(){
 					window.location.href = "/about"
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 4e1132c..1ffe7b8 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,13 +3,14 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
-		"click .playButton": "togglePlaying",
+		"click [data-role=play-media]": "togglePaused",
 		"mousedown [name=keyframe]": "stopPropagation",
 		"mousedown": "stopPropagation",
 		"change [name=keyframe]": "seek",
 		"change [name=autoplay]": "setAutoplay",
 		"change [name=loop]": "setLoop",
 		"change [name=mute]": "setMute",
+		"click [data-role=destroy-media]": "destroy",
 	},
 	
 	initialize: function(opt){
@@ -25,7 +26,7 @@ var MediaEditor = FormView.extend({
 		this.$units = this.$("[name=units]")
 		
 		// video fields
-		this.$playButton = this.$(".playButton")
+		this.$playButton = this.$("[data-role=play-media]")
 		this.$autoplay = this.$("[name=autoplay]")
 		this.$loop = this.$("[name=loop]")
 		this.$mute = this.$("[name=mute]")
@@ -36,8 +37,8 @@ var MediaEditor = FormView.extend({
     this.$el.toggleClass("active", state);
 	},
 	
-	togglePlaying: function(){
-		var state = this.scenery.toggle()
+	togglePaused: function(state){
+		var state = this.scenery.toggle(state)
 		this.$playButton.toggleClass("playing", ! state)
 	},
 	
@@ -71,7 +72,7 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+				this.$playButton.toggleClass("paused", this.scenery.paused())
 				this.$autoplay.prop('checked', !! media.autoplay)
 				this.$loop.prop('checked', !! media.loop)
 				this.$mute.prop('checked', !! media.mute)
@@ -97,6 +98,9 @@ var MediaEditor = FormView.extend({
 	setAutoplay: function(){
 		var checked = this.$autoplay.prop('checked')
 		this.scenery.media.autoplay = checked
+		if (checked && this.scenery.paused()) {
+			this.togglePaused()
+		}
 	},
 	setLoop: function(){
 		var checked = this.$loop.prop('checked')
@@ -117,5 +121,13 @@ var MediaEditor = FormView.extend({
 		this.scenery.mx.bound = false
 		this.scenery = null
 	},
+	
+	destroy: function(){
+		ConfirmModal.confirm("Are you sure you want to this media?", function(){
+			var scenery = this.scenery
+			this.hide()
+			Scenery.remove(scenery.id)
+		}.bind(this))
+	},
 
 })
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
index 74054b4..df2d075 100644
--- a/public/assets/javascripts/ui/reader/MediaPlayer.js
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -3,7 +3,8 @@ var MediaPlayer = FormView.extend({
 	el: "#mediaPlayer",
 		
 	events: {
-		"click .playButton": "togglePlaying",
+		"click [data-role=play-media]": "togglePaused",
+		"click [data-role=mute-media]": "toggleMuted",
 		"mousedown": "stopPropagation",
 	},
 	
@@ -18,16 +19,22 @@ var MediaPlayer = FormView.extend({
 		this.$dimensions = this.$(".dimensions")
 		
 		// video fields
-		this.$playButton = this.$(".playButton")
+		this.$playButton = this.$("[data-role=play-media]")
+		this.$muteButton = this.$("[data-role=mute-media]")
 	},
 	
 	toggle: function(state) {
     this.$el.toggleClass("active", state);
 	},
 	
-	togglePlaying: function(){
-		var state = this.scenery.toggle()
-		this.$playButton.toggleClass("playing", ! state)
+	togglePaused: function(state){
+		var state = this.scenery.toggle(state)
+		this.$playButton.toggleClass("paused", ! state)
+	},
+	
+	toggleMuted: function(state){
+		var state = this.scenery.toggleMuted(state)
+		this.$muteButton.toggleClass("muted", state)
 	},
 	
 	pick: function(scenery) {
@@ -45,7 +52,7 @@ var MediaPlayer = FormView.extend({
 
 		this.bind(scenery)
 		this.$el.addClass("active")
-				
+		
 		this.$name.html(media.title)
 		this.$description.html(media.description)
 		
@@ -54,9 +61,9 @@ var MediaPlayer = FormView.extend({
 				this.$(".image").show()
 				this.$(".video").hide()
 
-				this.$widthDimension.html( Number(media.widthDimension) || "" )
-				this.$heightDimension.html( Number(media.heightDimension) || "" )
-				this.$units.html( media.units || "cm" )
+// 				this.$widthDimension.html( Number(media.widthDimension) || "" )
+// 				this.$heightDimension.html( Number(media.heightDimension) || "" )
+// 				this.$units.html( media.units || "cm" )
 				
 				break
 
@@ -65,8 +72,9 @@ var MediaPlayer = FormView.extend({
 			case "video":
 				this.$(".video").show()
 				this.$(".image").hide()
-				
-				this.$playButton.toggleClass("playing", ! this.scenery.paused())
+
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
+				this.$muteButton.toggleClass("muted", this.scenery.muted())
 
 				break
 		}
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 215bbab..a2d2120 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,26 +1220,43 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
-.playButton {
+.playButton,.muteButton {
 	color: white;
 	background: black;
 	border-radius: 50px;
-	padding: 6px 7px 5px;
+	font-size: 22px;
+	padding: 4px 2px 3px 6px;
 	cursor: pointer;
+	margin-right: 5px;
 }
-.playButton .icon-play {
+.playButton .on {
 	display: inline;
 }
-.playButton.playing .icon-play {
+.playButton.paused .on {
 	display: none;
 }
-.playButton .icon-pause {
+.playButton .off {
 	display: none;
 }
-.playButton.playing .icon-pause {
+.playButton.paused .off {
 	display: inline;
 }
 
+.muteButton .on {
+	display: inline;
+	padding-right: 3px;
+}
+.muteButton.muted .on {
+	display: none;
+}
+.muteButton .off {
+	display: none;
+}
+.muteButton.muted .off {
+	display: inline;
+	padding-right: 3px;
+}
+
 button {
   padding: 8px;
   border: 1px solid;
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 46b8a42..65db3ce 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -11,9 +11,9 @@
 	</div>
 	
 	<div class="video setting">
-		<span class="playButton">
-			<span class="icon-play"></span>
-			<span class="icon-pause"></span>
+		<span class="playButton" data-role="play-media">
+			<span class="on icon-play"></span>
+			<span class="off icon-pause"></span>
 		</span>
 <!-- 
 		ion-volume-high
@@ -44,10 +44,6 @@
 		</select>
 	</div>
 
-	<div class="setting">
-		<button data-role="save-media">Save</button>
-	</div>
-	
 	<div class="setting subButtons">
 		<a href="#" data-role="destroy-media">Delete</a>
 	</div>
diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs
index 71f69a8..ca03ec8 100644
--- a/views/controls/reader/media-player.ejs
+++ b/views/controls/reader/media-player.ejs
@@ -1,8 +1,13 @@
 <div class="vvbox settings" id="mediaPlayer">
 
-	<span class="playButton video">
-		<span class="icon-play"></span>
-		<span class="icon-pause"></span>
+	<span class="playButton video" data-role="play-media">
+		<span class="on icon-play"></span>
+		<span class="off icon-pause"></span>
+	</span>
+
+	<span class="muteButton video" data-role="mute-media">
+		<span class="on icon-volume-high"></span>
+		<span class="off icon-volume-mute"></span>
 	</span>
 
 	<span class="name"></span>
-- 
cgit v1.2.3-70-g09d2


From e17d458b644fddccd522d0475f531b487c4d95ef Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 16 Jul 2014 15:29:10 -0400
Subject: some bugfixes.. info window for builder

---
 .../assets/javascripts/mx/primitives/mx.video.js   |  2 +-
 .../assets/javascripts/mx/primitives/mx.vimeo.js   | 10 ++++++-
 .../assets/javascripts/mx/primitives/mx.youtube.js |  2 +-
 .../javascripts/rectangles/engine/rooms/builder.js |  4 +--
 .../javascripts/rectangles/engine/rooms/clipper.js |  7 +++--
 .../rectangles/engine/scenery/types/video.js       |  3 ++
 public/assets/javascripts/ui/_router.js            |  1 -
 public/assets/javascripts/ui/reader/ReaderView.js  |  3 ++
 public/assets/javascripts/ui/site/LayoutsModal.js  |  7 +++++
 public/assets/stylesheets/app.css                  | 25 +++++++++++++++-
 views/builder.ejs                                  |  3 +-
 views/controls/builder/info.ejs                    | 35 ++++++++++++++++++++++
 views/controls/editor/media-editor.ejs             |  4 +--
 views/partials/sign-in.ejs                         |  4 +--
 views/projects/layouts-modal.ejs                   |  8 +++++
 views/projects/list-projects.ejs                   |  2 +-
 16 files changed, 105 insertions(+), 15 deletions(-)
 create mode 100644 views/controls/builder/info.ejs

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index 7f91e34..b28204d 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -20,7 +20,7 @@ MX.Video = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = !! this.media.autoplay
-		this.muted = !! this.media.mute
+		this.muted = app.muted || !! this.media.mute
 		
 		this.load()
   },
diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js
index 0301e64..7a5327e 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -20,7 +20,7 @@ MX.Vimeo = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = !! this.media.autoplay
-		this.muted = !! this.media.mute
+		this.muted = app.muted || !! this.media.mute
 		
 		this.load()
   },
@@ -82,6 +82,14 @@ MX.Vimeo = MX.Object3D.extend({
   },
   
   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()
 		}
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 8c11da6..47d5507 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -20,7 +20,7 @@ MX.Youtube = MX.Object3D.extend({
 		this.backface && this.el.classList.add("backface-visible")		
 		this.el.classList.add("video")
   	this.paused = !! this.media.autoplay
-		this.muted = !! this.media.mute
+		this.muted = app.muted || !! this.media.mute
 		
 		this.load()
   },
diff --git a/public/assets/javascripts/rectangles/engine/rooms/builder.js b/public/assets/javascripts/rectangles/engine/rooms/builder.js
index e6625ec..49e55dc 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/builder.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/builder.js
@@ -20,8 +20,8 @@ Rooms.builder = new function(){
 		}
 	}
 	function build (){
-		Rooms.regions.forEach(function(room){
-			build_walls(room).forEach(function(el){
+		Rooms.regions.forEach(function(region){
+			build_walls(region).forEach(function(el){
 				els.push(el)
 				scene.add(el)
 			})
diff --git a/public/assets/javascripts/rectangles/engine/rooms/clipper.js b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
index eb467cd..e2bb894 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/clipper.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/clipper.js
@@ -20,12 +20,15 @@ Rooms.clipper = new function(){
 	
 	// Given a set of overlapping rooms, clip any intersections, then cull any duplicate polygons
 	base.solve_rects = function(){
-		if (Rooms.count() == 0) return
+		if (Rooms.count() == 0) {
+			Rooms.regions = regions = []
+			return
+		}
 		
 		base.reset_rects()
 		base.clip_rects()
 		base.cull_rects()
-		
+
 		Rooms.regions = sort_rects_by_position(regions)
 	}
 	
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 8cd5e6b..d3e2e76 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -25,6 +25,9 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 					this.mxType = MX.Youtube
 					break
 			}
+			if (app.muted) {
+				this.media.mute = true
+			}
 			this.mx = new this.mxType({
 				media: this.media,
 				scale: this.scale,
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index b59d838..d070d55 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -160,7 +160,6 @@ var SiteRouter = Router.extend({
 	profile: function(e){
 		this.profileView.load()
 	},
-	
 	editProfile: function(e){
 		e && e.preventDefault()
 		window.history.pushState(null, document.title, "/profile/edit")	
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index a2c2983..9d38daa 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -15,6 +15,9 @@ var ReaderView = View.extend({
 		if (window.location.search.indexOf("noui") !== -1) {
 			$(".logo,.topLinks,#editorView").hide()
 		}
+		if (window.location.search.indexOf("mute") !== -1) {
+			app.muted = true
+		}
 		name = sanitize(name)
 		$.get(this.projectAction + name, this.ready.bind(this))
 	},
diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js
index 3b9e6cd..4948b0e 100644
--- a/public/assets/javascripts/ui/site/LayoutsModal.js
+++ b/public/assets/javascripts/ui/site/LayoutsModal.js
@@ -3,6 +3,8 @@ var LayoutsIndex = View.extend({
 
 	initialize: function(){
 		this.$templates = this.$(".templates")
+		this.$noTemplates = this.$(".no-templates")
+		this.$form = this.$("form")
 	},
 
 	load: function(type){
@@ -12,6 +14,11 @@ var LayoutsIndex = View.extend({
 	},
 
 	populate: function(data){
+		if (! data.length) {
+			this.$templates.hide()
+			this.$form.hide()
+			this.$noTemplates.show()
+		}
 		data.forEach(function(room){
 			var $span = $("<span>")
 			// $span.html(JSON.stringify(room))
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 2583284..2e3358a 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -469,6 +469,9 @@ iframe.embed {
 
 .templates {
 }
+.no-templates {
+	display: none;
+}
 
 .templates span{
   background-position: center;
@@ -1130,6 +1133,11 @@ input[type="range"]::-webkit-slider-thumb {
     cursor:pointer;
 }
 
+.settings.info {
+  right: auto;
+  left: 10px;
+}
+
 .settings {
   padding: 20px;
   bottom: 20px;
@@ -1228,8 +1236,23 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 .setting label {
+	font-size: 12px;
+	font-weight: 300;
 	padding-right: 5px;
 }
+.setting.number label {
+	width: 50px;
+	display: inline-block;
+	float: left;
+	position: relative;
+	top: 5px;
+}
+.setting.number input[type=text] {
+	width: 150px;
+}
+.setting.number.twoline label {
+	top: 0px;
+}
 
 .playButton,.muteButton {
 	color: white;
@@ -1485,7 +1508,7 @@ form li textarea {
   background:lightgreen;
 }
 */
-.box b.info {
+.box b.signin-tagline {
   display: inline-block;
   width: 100%;
   margin-bottom: 18px;
diff --git a/views/builder.ejs b/views/builder.ejs
index 61e84c3..afb8c66 100644
--- a/views/builder.ejs
+++ b/views/builder.ejs
@@ -12,6 +12,7 @@
 		[[ include partials/header ]]
 		
 		<div id="builderView">
+			[[ include controls/builder/info ]]
 			[[ include controls/builder/toolbar ]]
 			[[ include controls/builder/settings ]]
 		</div>
@@ -20,7 +21,6 @@
 		<div id="minimap" class="vvbox">
 			<span class="el"></span>
 		</div>
-	-->
 
 		<select id="palette">
 			<option>colors</option>
@@ -31,6 +31,7 @@
 			<option>white</option>
 			<option>black</option>
 		</select>
+	-->
 
 		<div id="hud">
 			<div id="map" style="display: block">
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
new file mode 100644
index 0000000..af0a76d
--- /dev/null
+++ b/views/controls/builder/info.ejs
@@ -0,0 +1,35 @@
+<div class="vvbox active settings info active" id="builderInfo">
+	<div class="setting number">
+		<label for="room-width">width</label>
+		<input type="text" name="width" id="room-width">
+	</div>
+	<div class="setting number">
+		<label for="room-depth">depth</label>
+		<input type="text" name="depth" id="room-depth">
+	</div>
+	<div class="setting number twoline">
+		<label for="room-height">ceiling height</label>
+		<input type="text" name="height" id="room-height">
+	</div>
+
+	<div class="setting number twoline">
+		<label for="builder-units">units</label>
+		<select id="builder-units" name="units">
+			<option value="px">pixels</option>
+			<option value="foot">foot</option>
+			<option value="meter">meter</option>
+		</select>
+	</div>
+
+	<div class="setting number">
+		<label for="builder-resolution">px/<span class="unitName"></span></label>
+		<input type="text" name="resolution" id="builder-resolution">
+	</div>
+
+	<div class="setting number twoline">
+		<label for="camera-height">camera height</label>
+		<input type="text" name="camera-height" id="camera-height">
+		<span class="unitName"></span>
+	</div>
+
+</div>
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 65db3ce..5db1fb2 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -29,9 +29,9 @@
 		<label for="video_mute">Mute</label>
 	</div>
 	<div class="video setting">
-		Initial Still
+		<label for="video-keyframe">Initial Still</label>
 		<br>
-		<input type="range" min="0" max="1" value="0" step="0.01" name="keyframe">
+		<input type="range" min="0" max="1" value="0" step="0.01" name="keyframe" id="video-keyframe">
 	</div>
 
 	<div class="image setting">
diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs
index 3f05fff..8268b2a 100644
--- a/views/partials/sign-in.ejs
+++ b/views/partials/sign-in.ejs
@@ -6,7 +6,7 @@
 		<form id="signIn" method="post">
 			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign in with Facebook</span></a>
-			<b class="info">– or the ol' fashion way –</b>
+			<b class="signin-tagline">– or the ol' fashion way –</b>
 			<li>
 				<label class="description" for="usernameInput">Username:</label>
 				<div>
@@ -39,7 +39,7 @@
 		<form id="signUp" method="post">
 			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<a href="/auth/facebook" class="facebook"><b class="icon-social-facebook"></b><span>Sign up with Facebook</span></a>
-			<b class="info">– or the ol' fashion way –</b>
+			<b class="signin-tagline">– or the ol' fashion way –</b>
 			<li>
 				<label class="description" for="usernameInput">Username:</label>
 				<div>
diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs
index 75b2641..97f1e61 100644
--- a/views/projects/layouts-modal.ejs
+++ b/views/projects/layouts-modal.ejs
@@ -5,6 +5,9 @@
 		<div class="templates">
 			<h1>Edit Room Layouts</h1>
 		</div>
+		<div class="no-templates">
+			There are no room layouts available. Please <a href="/layout/new">create a new one.</a>
+		</div>
 		<form>
 			<input data-role="create-new-layout" class="button_text" type="submit" value="New Layout">
 		</form>
@@ -18,6 +21,8 @@
 		<div class="templates">
 			<h1>Your Projects</h1>
 		</div>
+		<div class="no-templates">
+		</div>
 		<form>
 			<input class="button_text" type="submit" value="New Project">
 		</form>
@@ -31,6 +36,9 @@
 		<div class="templates">
 			<h1>Choose Room Template</h1>
 		</div>
+		<div class="no-templates">
+			There are no room layouts available. Please <a href="/layout/new">create a new one.</a>
+		</div>
 		<form>
 			<input class="button_text" type="submit" value="Create Project">
 		</form>
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index 42387ba..2c12af0 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -6,7 +6,7 @@
 
 		[[ projects.forEach(function(project, i) { ]]
 			<td class="border room1">
-				<iframe src="/project/[[- project.slug ]]/view?noui=1" class="embed"></iframe>
+				<iframe src="/project/[[- project.slug ]]/view?noui=1&mute=1" class="embed"></iframe>
 				[[ if (profile._id == project.user_id) { ]]
 				<div class="editBtn">edit</div>
 				[[ } ]]
-- 
cgit v1.2.3-70-g09d2


From d81c96616859a57d5d5d63a6ae7b1492a5c4974a Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 16 Jul 2014 16:30:33 -0400
Subject: display room dimensions

---
 .../javascripts/rectangles/engine/map/ui_editor.js |  8 ++-
 .../javascripts/rectangles/engine/rooms/_rooms.js  |  1 +
 .../assets/javascripts/ui/builder/BuilderInfo.js   | 70 ++++++++++++++++++++++
 .../javascripts/ui/builder/BuilderSettings.js      |  5 +-
 .../assets/javascripts/ui/builder/BuilderView.js   |  4 ++
 .../assets/javascripts/ui/editor/EditorSettings.js |  1 +
 public/assets/javascripts/ui/editor/MediaEditor.js |  1 +
 public/assets/stylesheets/app.css                  | 11 ++++
 server/lib/schemas/Layout.js                       |  1 +
 views/controls/builder/info.ejs                    |  7 ++-
 views/partials/scripts.ejs                         |  3 +-
 11 files changed, 107 insertions(+), 5 deletions(-)
 create mode 100644 public/assets/javascripts/ui/builder/BuilderInfo.js

(limited to 'public/assets/javascripts/rectangles/engine')

diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index ea7a356..577ea32 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -53,16 +53,21 @@ Map.UI.Editor = function(map){
 		if (intersects.length && base.permissions.destroy) {
 			base.mouse.down = false
 			Rooms.remove(intersects[0])
+			app.tube("builder-destroy-room", intersects[0])
 			return
 		}
 		else if (intersects.length && (base.permissions.move || base.permissions.resize)) {
 			base.dragging = intersects[0]
 			base.resizing = base.permissions.resize && base.dragging.rect.nearEdge(cursor.x.a, cursor.y.a, resize_margin / map.zoom)
 			base.dragging.rect.translation.sides = base.resizing
+			app.tube("builder-pick-room", intersects[0])
 		}
 		else if (base.permissions.create) {
 			base.creating = true
 		}
+		else if (intersects.length) {
+			app.tube("builder-pick-room", intersects[0])
+		}
 
 		if (e.shiftKey && base.dragging) {
 			base.dragging.rect.quantize(10/map.zoom)
@@ -109,7 +114,8 @@ Map.UI.Editor = function(map){
 			if (cursor.height() > side_min && cursor.width() > side_min) {
 				cursor.x.abs().quantize(1)
 				cursor.y.abs().quantize(1)
-				Rooms.add_with_rect( cursor )
+				var room = Rooms.add_with_rect( cursor )
+				app.tube("builder-pick-room", room)
 			}
 		}
 		
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 48931e9..e0033e3 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -26,6 +26,7 @@ var Rooms = new function(){
 			height: 500
 		})
 		base.add(room)
+		return room
 	}
 	
 	base.remove = function(room){
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
new file mode 100644
index 0000000..53a122d
--- /dev/null
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -0,0 +1,70 @@
+
+var BuilderInfo = View.extend({
+	el: "#builderInfo",
+
+	events: {
+		"keydown": 'stopPropagation',
+		"change [name=x]": 'changePosition',
+		"change [name=z]": 'changePosition',
+		"change [name=width]": 'changeDimensions',
+		"change [name=depth]": 'changeDimensions',
+		"change [name=height]": 'changeDimensions',
+		"change [name=units]": 'changeUnits',
+		"change [name=resolution]": 'changeResolution',
+		"change [name=camera-height]": 'changeCameraHeight',
+	},
+	
+	initialize: function(opt){
+		this.parent = opt.parent
+		this.$x = this.$("[name=x]")
+		this.$z = this.$("[name=z]")
+		this.$width = this.$("[name=width]")
+		this.$depth = this.$("[name=depth]")
+		this.$height = this.$("[name=height]")
+		this.$units = this.$("[name=units]")
+		this.$resolution = this.$("[name=resolution]")
+		this.$cameraHeight = this.$("[name=camera-height]")
+		app.on("builder-pick-room", this.pick.bind(this))
+		app.on("builder-destroy-room", this.destroy.bind(this))
+	},
+
+	toggle: function(state){
+		this.$el.toggleClass("active", state)
+	},
+	
+	show: function(){	
+		this.toggle(true)
+	},
+	
+	hide: function(){	
+		this.toggle(false)
+	},
+
+	room: null,
+	
+	pick: function(room){
+		this.room = room
+		this.$width.val( room.rect.x.length() )
+		this.$depth.val( room.rect.y.length() )
+		this.$height.val( room.height )
+		this.$x.val( room.rect.x.a )
+		this.$z.val( room.rect.y.a )
+
+		console.log(room)
+	},
+
+	destroy: function(room){
+		this.room = null
+		this.hide()
+	},
+	
+	changeDimensions: function(){
+	},
+	
+	changeUnits: function(){
+	},
+	
+	changeCameraHeight: function(){
+	},
+
+})
diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js
index 6006868..c551f95 100644
--- a/public/assets/javascripts/ui/builder/BuilderSettings.js
+++ b/public/assets/javascripts/ui/builder/BuilderSettings.js
@@ -7,6 +7,7 @@ var BuilderSettings = FormView.extend({
 	destroyAction: "/api/layout/destroy",
 
 	events: {
+		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='save-layout']": 'save',
 		"click [data-role='clone-layout']": 'clone',
@@ -69,8 +70,8 @@ var BuilderSettings = FormView.extend({
 		}.bind(this))
 	},
 
-	toggle: function(){
-		this.$el.toggleClass("active")
+	toggle: function(state){
+		this.$el.toggleClass("active", state)
 	},
 
 	enterSubmit: function (e) {
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index a83bf43..7a92738 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -8,6 +8,7 @@ var BuilderView = View.extend({
 	},
 	
 	initialize: function(){
+		this.info = new BuilderInfo ({ parent: this })
 		this.toolbar = new BuilderToolbar ({ parent: this })
 		this.settings = new BuilderSettings ({ parent: this })
 	},
@@ -26,5 +27,8 @@ var BuilderView = View.extend({
 	ready: function(data){
 		this.settings.load(data)
 	},
+	
+	hideExtras: function(){
+	}
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 887c894..13a6f60 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -7,6 +7,7 @@ var EditorSettings = FormView.extend({
 	destroyAction: "/api/project/destroy",
 
 	events: {
+		"keydown": 'stopPropagation',
 		"keydown [name=name]": 'enterSubmit',
 		"click [data-role='save-project']": 'save',
 		"click [data-role='clone-project']": 'clone',
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index f9eaad5..a075e6b 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,6 +3,7 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
+		"keydown": 'stopPropagation',
 		"click [data-role=play-media]": "togglePaused",
 		"mousedown [name=keyframe]": "stopPropagation",
 		"mousedown": "stopPropagation",
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 2e3358a..3e6dced 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1247,6 +1247,17 @@ input[type="range"]::-webkit-slider-thumb {
 	position: relative;
 	top: 5px;
 }
+.setting.number.halflines {
+	height: 30px;
+}
+.setting.number.halflines input[type=text] {
+	float: left;
+	width: 50px;
+}
+.setting.number.halflines label:nth-of-type(2) {
+	text-align: center;
+}
+
 .setting.number input[type=text] {
 	width: 150px;
 }
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index b096b85..33a5262 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -25,6 +25,7 @@ var LayoutSchema = new mongoose.Schema({
 	},
 	rooms: [mongoose.Schema.Types.Mixed],
 	startPosition: mongoose.Schema.Types.Mixed,
+	cameraHeight: { type: Number, default: 180 },
 	user_id: { type: mongoose.Schema.ObjectId, index: true },
 	created_at: { type: Date },
 	updated_at: { type: Date },
diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs
index af0a76d..2cc8132 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -11,6 +11,12 @@
 		<label for="room-height">ceiling height</label>
 		<input type="text" name="height" id="room-height">
 	</div>
+	<div class="setting number halflines">
+		<label for="room-x">x</label>
+		<input type="text" name="x" id="room-x">
+		<label for="room-z">z</label>
+		<input type="text" name="z" id="room-z">
+	</div>
 
 	<div class="setting number twoline">
 		<label for="builder-units">units</label>
@@ -29,7 +35,6 @@
 	<div class="setting number twoline">
 		<label for="camera-height">camera height</label>
 		<input type="text" name="camera-height" id="camera-height">
-		<span class="unitName"></span>
 	</div>
 
 </div>
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 47a027e..2173cd5 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -72,9 +72,10 @@
 <script type="text/javascript" src="/assets/javascripts/ui/site/DocumentModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/ProfileView.js"></script>
 
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
-<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderView.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderInfo.js"></script>
 
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorView.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/editor/EditorSettings.js"></script>
-- 
cgit v1.2.3-70-g09d2