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

---
 public/assets/javascripts/ui/editor/MediaViewer.js | 21 +++++-
 public/assets/javascripts/ui/lib/Parser.js         | 84 ++++++++++++++++------
 2 files changed, 83 insertions(+), 22 deletions(-)

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 2535f1b..b5398ff 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -62,6 +62,16 @@ var MediaViewer = ModalView.extend({
 			case 'vimeo':
 				image.src = media.thumbnail
 				break
+			
+			case 'video':
+				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()
+				break
 		}
 		
 		$span.data("media", media)
@@ -124,7 +134,16 @@ var MediaViewer = ModalView.extend({
 		var $floatingImg = $('.floatingImg');
 		
 		Scenery.nextMedia = media
-		$floatingImg.attr('src', image.attr('src'));
+		
+		switch (media.type) {
+			case "video":
+				$floatingImg.attr('src', 'http://www.rawrcast.com/wp-content/uploads/2010/02/BluePlayButton.png')
+				break
+			
+			default:
+				$floatingImg.attr('src', image.attr('src'))
+				break
+		}
 
 		var height = $floatingImg.height()
 		var width = $floatingImg.width()
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index 705ff04..dfff7b2 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -2,12 +2,18 @@ var Parser = {
 	integrations: [{
 		type: 'image',
 		regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i,
-		async: false,
 		fetch: function(url, done) {
 			var img = new Image ()
 			img.onload = function(){
-				done("", "", img.naturalWidth, img.naturalHeight, "")
+				var width = img.naturalWidth, height = img.naturalHeight
 				img = null
+				done({
+					token: "",
+					thumbnail: "",
+					title: "",
+					width: width,
+					height: height,
+				})
 			}
 			img.src = url
 			if (img.complete) {
@@ -17,10 +23,31 @@ var Parser = {
 		tag: function (media) {
 			return '<img src="' + media.url + '" onerror="imgError(this);">';
 		}
+	}, {
+		type: 'video',
+		regex: /\.(mp4|webm)(\?.*)?$/i,
+		fetch: function(url, done) {
+			var video = document.createElement("video")
+			video.addEventListener("loadedmetadata", function(){
+				var width = video.videoWidth, height = video.videoHeight
+				video = null
+				done({
+					token: "",
+					thumbnail: "",
+					title: "",
+					width: width,
+					height: height,
+				})
+			})
+			video.src = url
+			video.load()
+		},
+		tag: function (media) {
+			return '<video src="' + media.url + '" onerror="imgError(this);">';
+		}
 	}, {
 		type: 'youtube',
 		regex:  /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i,
-		async: false,
 		fetch: function(url, done) {
 			var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0];
 			var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg"
@@ -34,8 +61,14 @@ var Parser = {
 					part: "id,contentDetails,snippet,status",
 				},
 				success: function(result){
-					var res = res.items[0]
-					done(id, thumb, 640, 360, res.snippet.title);
+					var res = result.items[0]
+					done({
+						token: id,
+						thumbnail: thumb,
+						title: res.snippet.title,
+						width: 640,
+						height: 360,
+					})
 				}
 			})
 		},
@@ -45,7 +78,6 @@ var Parser = {
 	}, {
 		type: 'vimeo',
 		regex: /vimeo.com\/\d+$/i,
-		async: true,
 		fetch: function(url, done) {
 			var id = url.match(/\d+$/i)[0];
 			$.ajax({
@@ -54,7 +86,13 @@ var Parser = {
 				success: function(result){
 					if (result.length == 0) { return done(id, "", 640, 360) }
 					var res = result[0]
-					done(id, res.thumbnail_large, res.width, res.height, res.title)
+					done({
+						token: id,
+						thumbnail: res.thumbnail_large,
+						title: res.title,
+						width: res.width,
+						height: res.height,
+					})
 				}
 			})
 		},
@@ -66,7 +104,6 @@ var Parser = {
 	{
 		type: 'soundcloud',
 		regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i,
-		async: true,
 		fetch: function (url, done) {
 			$.ajax({
 				type: 'GET',
@@ -75,7 +112,13 @@ var Parser = {
 					+ '&client_id=' 
 					+ '0673fbe6fc794a7750f680747e863b10',
 				success: function(result) {
-					done(result.id, "");
+					done({
+						token: result.id,
+						thumbnail: "",
+						title: "",
+						width: 100,
+						height: 100,
+					})
 				}
 			});
 		},
@@ -87,9 +130,14 @@ var Parser = {
 	}, {
 		type: 'link',
 		regex: /^http.+/i,
-		async: false,
 		fetch: function(url, done) {
-			done("", "")
+			done({
+				token: "",
+				thumbnail: "",
+				title: "",
+				width: 100,
+				height: 100,
+			})
 		},
 		tag: function (media) {
 			return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>'
@@ -101,16 +149,10 @@ var Parser = {
 	parse: function (url, cb) {
 		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
-				integration.fetch(url, function(token, thumbnail, width, height, title){
-					cb({
-						token: token,
-						thumbnail: thumbnail,
-						type: integration.type,
-						title: title,
-						width: width,
-						height: height,
-						url: url,
-					})
+				integration.fetch(url, function(res){
+					res.url = url
+					res.type = integration.type					
+					cb(res)
 				})
 				return true
 			}
-- 
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/ui')

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/ui')

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 221a14315b09946db2485036bbf4a80295dc4889 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 2 Jul 2014 16:22:51 -0400
Subject: password reset / username dupe stuff from PH

---
 .../assets/javascripts/ui/site/PasswordForgot.js   |  26 ++
 public/assets/javascripts/ui/site/PasswordReset.js |  25 ++
 public/assets/javascripts/ui/site/UsernameTaken.js |  21 ++
 public/assets/stylesheets/app.css                  |   1 -
 server/index.js                                    |   8 +
 server/lib/auth.js                                 | 201 -------------
 server/lib/auth/index.js                           | 331 +++++++++++++++++++++
 server/lib/auth/mail.js                            |  67 +++++
 server/lib/auth/views.js                           |  33 ++
 server/lib/middleware.js                           |   1 +
 server/lib/schemas/User.js                         |  33 +-
 server/lib/upload.js                               |   4 +-
 server/lib/util.js                                 |   6 +-
 views/controls/editor/media-editor.ejs             |  30 ++
 views/controls/editor/settings.ejs                 |   4 +-
 views/mail/password.html.ejs                       |  25 ++
 views/mail/password.text.ejs                       |  11 +
 views/mail/welcome.html.ejs                        |  17 ++
 views/mail/welcome.text.ejs                        |   4 +
 views/partials/scripts.ejs                         |   3 +
 views/partials/sign-in.ejs                         |  75 +++++
 21 files changed, 712 insertions(+), 214 deletions(-)
 create mode 100644 public/assets/javascripts/ui/site/PasswordForgot.js
 create mode 100644 public/assets/javascripts/ui/site/PasswordReset.js
 create mode 100644 public/assets/javascripts/ui/site/UsernameTaken.js
 delete mode 100644 server/lib/auth.js
 create mode 100644 server/lib/auth/index.js
 create mode 100644 server/lib/auth/mail.js
 create mode 100644 server/lib/auth/views.js
 create mode 100644 views/controls/editor/media-editor.ejs
 create mode 100644 views/mail/password.html.ejs
 create mode 100644 views/mail/password.text.ejs
 create mode 100644 views/mail/welcome.html.ejs
 create mode 100644 views/mail/welcome.text.ejs

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/ui/site/PasswordForgot.js b/public/assets/javascripts/ui/site/PasswordForgot.js
new file mode 100644
index 0000000..6ac23c0
--- /dev/null
+++ b/public/assets/javascripts/ui/site/PasswordForgot.js
@@ -0,0 +1,26 @@
+var PasswordForgot = ModalFormView.extend({
+	el: ".mediaDrawer.passwordForgot",
+	action: "/auth/passwordForgot",
+
+	validate: function(){
+		var errors = []
+
+		var email = this.$("#emailInput").val()
+
+		if (! email.length) {
+			errors.push("Please enter your email address");
+		}
+		if (email.indexOf("@") === -1) {
+			errors.push("Sorry, that is not a valid email address");
+		}
+
+		return errors
+	},
+	
+	success: function(res){
+		AlertModal.alert("Check your email, you should receive further instructions momentarily.", function(e){
+			window.location.href = "/"
+		})
+	},
+
+})
diff --git a/public/assets/javascripts/ui/site/PasswordReset.js b/public/assets/javascripts/ui/site/PasswordReset.js
new file mode 100644
index 0000000..77e8684
--- /dev/null
+++ b/public/assets/javascripts/ui/site/PasswordReset.js
@@ -0,0 +1,25 @@
+var PasswordReset = ModalFormView.extend({
+	el: ".mediaDrawer.passwordReset",
+	action: "/auth/password",
+
+	validate: function(){
+		var errors = []
+		
+		var pw1 = this.$("#passwordInput1").val()
+		var pw2 = this.$("#passwordInput2").val()
+
+		if (! pw1.length) {
+			errors.push("Please enter a password");
+		}
+		if (pw1 !== pw2) {
+			errors.push("Passwords don't match");
+		}
+
+		return errors
+	},
+
+	success: function(res){
+		window.location.href = "/profile"
+	}
+
+})
diff --git a/public/assets/javascripts/ui/site/UsernameTaken.js b/public/assets/javascripts/ui/site/UsernameTaken.js
new file mode 100644
index 0000000..fc651e3
--- /dev/null
+++ b/public/assets/javascripts/ui/site/UsernameTaken.js
@@ -0,0 +1,21 @@
+var UsernameTaken = ModalFormView.extend({
+	el: ".mediaDrawer.usernameTaken",
+	action: "/auth/usernameTaken",
+
+	validate: function(){
+		var errors = []
+
+		var username = this.$("#usernameInput").val()
+
+		if (! username.length) {
+			errors.push("Please enter a username");
+		}
+
+		return errors
+	},
+
+	success: function(res){
+		window.location.href = "/profile"
+	}
+
+})
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a2b5d8c..9c80987 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1274,7 +1274,6 @@ button:hover {
 form {
 	max-width: 440px;
 	margin: 0 auto;
-
 }
 form div {
 	float:right;
diff --git a/server/index.js b/server/index.js
index b008131..bb242ee 100644
--- a/server/index.js
+++ b/server/index.js
@@ -61,6 +61,7 @@ site.setup = function(){
 	app.use(passport.initialize());
 	app.use(passport.session());
 	app.use(app.router);
+	app.enable('trust proxy')
 	app.get('env') === 'development' && app.use(express.errorHandler());
 
 	// Essential middleware
@@ -90,6 +91,13 @@ site.route = function () {
 	app.get('/auth/twitter/callback', auth.loggedIn('twitter'));
 	app.get('/auth/facebook', auth.login('facebook'));
 	app.get('/auth/facebook/callback', auth.loggedIn('facebook'));
+	app.get('/auth/usernameTaken', auth.views.usernameTaken);
+	app.post('/auth/usernameTaken', auth.usernameFixed);
+	app.get('/auth/password', auth.views.resetPassword);
+	app.post('/auth/password', auth.resetPassword);
+	app.post('/auth/passwordForgot', auth.forgotPassword);
+
+
 	app.get('/profile', views.profile)
 	app.get('/profile/edit', views.profile)
 	app.get('/profile/:name', views.profile)
diff --git a/server/lib/auth.js b/server/lib/auth.js
deleted file mode 100644
index 018c9ad..0000000
--- a/server/lib/auth.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/* jshint node: true */
-
-var passport = require('passport'),
-	FacebookStrategy = require('passport-facebook').Strategy,
-	TwitterStrategy = require('passport-twitter').Strategy,
-	LocalStrategy = require('passport-local').Strategy,
-	passportSocketIo = require("passport.socketio"),
-	cookieParser = require('express').cookieParser,
-	crypto = require('crypto'),
-	_ = require('lodash'),
-	util = require('./util'),
-	config = require('../../config.json'),
-	User = require('./schemas/User');
-
-var auth = {
-
-	init: function () { 
-		passport.serializeUser(auth.serializeUser);
-		passport.deserializeUser(auth.deserializeUser);
-		
-		passport.use(new LocalStrategy(auth.verifyLocalUser))
-		
-		passport.use(new TwitterStrategy({
-			consumerKey: process.env.VVALLS_TWITTER_KEY || '0L5blfBIapqhpons8bCXdIoGM',
-			consumerSecret: process.env.VVALLS_TWITTER_SECRET || '5EKW7m7inoODqYSKbp7cadBKFp1FghBl4MBDoXNcUjKtodZfuP',
-			callbackURL: 'http://' + config.host + '/auth/twitter/callback'
-		}, auth.insertTwitterUser));
-		
-		passport.use(new FacebookStrategy({
-			clientID: process.env.VVALLS_FACEBOOK_KEY || '719828821410310',
-			clientSecret: process.env.VVALLS_FACEBOOK_SECRET || 'f9aba78e08f37f621eadb88b1409d48c',
-			callbackURL: 'http://' + config.host + '/auth/facebook/callback',
-			enableProof: false,
-		}, auth.insertFacebookUser));
-	},
-	
-	initSockets: function (io, express, SessionStore) {
-		io.set('authorization', passportSocketIo.authorize({
-			cookieParser: cookieParser,
-			passport:     passport,
-			key:          'vvalls.sid',        // the name of the cookie where express/connect stores its session_id
-			secret:       'flibbertigibbet',   // the session_secret to parse the cookie
-			store:        SessionStore,        // we NEED to use a sessionstore. no memorystore please
-			success:      auth.socketSuccess,
-			fail:         auth.socketFail,
-		}));
-	},
-	
-	socketSuccess: function (data, accept) {
-		// console.error('successful connection to socket.io');
-		accept(null, true);
-	},
-	
-	socketFail: function (data, message, error, accept){
-		if (error) {
-			throw new Error(message);
-		}
-		// console.log(data)
-		console.error('failed connection to socket.io:', message);
-
-		// We use this callback to log all of our failed connections.
-		accept(null, false);
-	},
-
-	// technically these return the login middleware
-	login: function (strategy) {
-		return passport.authenticate(strategy);
-	},
-	
-	loggedIn: function (strategy) {
-		return passport.authenticate(strategy, {
-			successReturnToOrRedirect: '/',
-			failureRedirect: '/login'
-		});
-	},
-
-	loggedInLocal: function (req, res, next) {
-		passport.authenticate("local", function(err, user, info){
-			if (err) {
-				return res.json({ error: err });
-			}
-			if (! user) {
-				return info ? res.json(info) : res.redirect("/login");
-			}
-			req.logIn(user, function(err) {
-				if (err) { return next(err); }
-				return res.json({ status: "OK" })
-			});
-		})(req, res, next);
-	},
-
-	logout: function (req, res) {
-		req.logout();
-		res.redirect('/');
-	},
-
-	serializeUser: function (user, done) {
-		done(null, user._id);
-	},
-
-	deserializeUser: function (id, done) {
-		User.findOne({ _id: id }, "_id displayName username photo isStaff", function (err, user) {
-			done(err, user);
-		});
-	},
-
-	signup: function (req, res){
-		var username = util.trim(req.body.username)
-		var password = req.body.password
-		var email = util.trim(req.body.email)
-
-		var shasum = crypto.createHash('sha1')
-		shasum.update(password)
-		password = shasum.digest('hex');
-		
-		User.findOne({ username: username }, "_id username", function (err, user) {
-			if (user) {
-				res.json({ error: { errors: { username: { message: "Username has been taken" } } } })
-				return
-			}
-			var data = {
-				username: username,
-				displayName: username,
-				password: password,
-				email: email,
-				created_ip: util.ip2num(req.connection.remoteAddress),
-				last_ip: util.ip2num(req.connection.remoteAddress),
-				created_at: new Date ()
-			}
-			new User(data).save(function(err, user){
-				if (err || ! data) { return res.json({ error: err }) }
-
-				req.login(user, function(){
-					res.json({ status: "OK", payload: user })
-				})
-			})
-		})
-	},
-
-	verifyLocalUser: function (username, password, done) {
-		User.findOne({ username: username }, function(err, user){
-			if (err) { return done(err); }
-			if (!user) {
-				return done(null, false, { error: { errors: { username: { message: 'Incorrect username.' } }}})
-			}
-			if (! user.validPassword(password)) {
-				return done(null, false, { error: { errors: { password: { message: 'Incorrect password.' } }}})
-			}
-			return done(null, user);
-		});
-	},
-
-	insertTwitterUser: function (accessToken, refreshToken, profile, done) {
-		process.nextTick(function () {
-			var userData = {
-				twitter_id: profile.id,
-				username: profile.username,
-				displayName: profile.displayName,
-				photo: profile.photos[0].value,
-				twitterName: profile.username,
-			};
-			
-			User.findOne({twitter_id: profile.id}, function(err, data){
-				if (! err && data) {
-					return done(err, data);
-				}
-				new User(userData).save(function(err, data){
-					if (err) { console.error(err) }
-					return done(err, data)
-				})
-			});
-			
-		});
-	},
-
-	insertFacebookUser: function (accessToken, refreshToken, profile, done) {
-		process.nextTick(function () {
-			var userData = {
-				facebook_id: profile.id,
-				username: profile.username || profile.displayName.toLowerCase().replace(/ /g,'-'),
-				displayName: profile.displayName,
-				photo: "http://graph.facebook.com/" + profile.id + "/picture?type=large",
-				facebookUrl: profile.username ? "https://facebook.com/" + profile.username : ""
-			};
-
-			User.findOne({facebook_id: profile.id}, function(err, data){
-				if (! err && data) {
-					return done(err, data);
-				}
-				new User(userData).save(function(err, data){
-					if (err) { console.error(err) }
-					return done(err, data)
-				})
-			});
-
-		});
-	},
-
-}
-
-module.exports = auth
diff --git a/server/lib/auth/index.js b/server/lib/auth/index.js
new file mode 100644
index 0000000..99af9b5
--- /dev/null
+++ b/server/lib/auth/index.js
@@ -0,0 +1,331 @@
+/* jshint node: true */
+
+var passport = require('passport'),
+	FacebookStrategy = require('passport-facebook').Strategy,
+	TwitterStrategy = require('passport-twitter').Strategy,
+	LocalStrategy = require('passport-local').Strategy,
+	passportSocketIo = require("passport.socketio"),
+	cookieParser = require('express').cookieParser,
+	crypto = require('crypto'),
+	express = require('express'),
+	_ = require('lodash'),
+	mongoose = require('mongoose'),
+	util = require('../util'),
+	config = require('../../../config.json'),
+	User = require('../schemas/User');
+
+var auth = {
+	views: require('./views'),
+	mail: require('./mail'),
+
+	init: function () { 
+		passport.serializeUser(auth.serializeUser);
+		passport.deserializeUser(auth.deserializeUser);
+		
+		passport.use(new LocalStrategy(auth.verifyLocalUser))
+		
+		passport.use(new TwitterStrategy({
+			consumerKey: process.env.VVALLS_TWITTER_KEY || 'brI5VqBak5yrhCcxU56lj5L3v',
+			consumerSecret: process.env.VVALLS_TWITTER_SECRET || 'ThzaEVWUgkmfzqOs3qcrdonGzgDBjDHTVzPkfY0wFJxjUH6JWZ',
+			callbackURL: 'http://' + config.host + '/auth/twitter/callback'
+		}, auth.insertTwitterUser));
+		
+		/*
+		passport.use(new FacebookStrategy({
+			clientID: process.env.VVALLS_FACEBOOK_KEY || '719828821410310',
+			clientSecret: process.env.VVALLS_FACEBOOK_SECRET || 'f9aba78e08f37f621eadb88b1409d48c',
+			callbackURL: 'http://' + config.host + '/auth/facebook/callback',
+			enableProof: false,
+		}, auth.insertFacebookUser));
+		*/
+		auth.mail.init()
+	},
+	
+	initSockets: function (io, SessionStore) {
+		io.set('authorization', passportSocketIo.authorize({
+			cookieParser: express.cookieParser,
+			passport:     passport,
+			key:          'vvalls.sid',        // the name of the cookie where express/connect stores its session_id
+			secret:       'flibbertigibbet',   // the session_secret to parse the cookie
+			store:        SessionStore,        // we NEED to use a sessionstore. no memorystore please
+			success:      auth.socketSuccess,
+			fail:         auth.socketFail,
+		}));
+	},
+	
+	socketSuccess: function (data, accept) {
+		// console.error('successful connection to socket.io');
+		accept(null, true);
+	},
+	
+	socketFail: function (data, message, error, accept){
+		if (error) {
+			throw new Error(message);
+		}
+		// console.log(data)
+		console.error('failed connection to socket.io:', message);
+
+		// We use this callback to log all of our failed connections.
+		accept(null, false);
+	},
+
+	// technically these return the login middleware
+	login: function (strategy) {
+		return passport.authenticate(strategy);
+	},
+	
+	loggedIn: function (strategy) {
+		return function (req, res, next) {
+			console.log("attempting to use", strategy)
+			
+			passport.authenticate(strategy, function(err, user, info){
+				if (err) {
+					return next(err);
+				}
+				if (! user) {
+					req.session.userData = info
+					return res.redirect('/auth/usernameTaken');
+				}
+				if (! user.created_ip) {
+					user.created_ip = util.ip2num( req.ip )
+				}
+				user.last_ip = util.ip2num( req.ip )
+				user.save(function(err, data){ if (err) console.err('error setting ip for user') })
+				
+				req.logIn(user, function(err) {
+					if (err) { return next(err); }
+					var returnTo = req.session.returnTo
+					delete req.session.returnTo
+					return res.redirect( returnTo || "/profile" );
+				});
+			})(req, res, next);
+		}
+	},
+
+	loggedInLocal: function (req, res, next) {
+		passport.authenticate("local", function(err, user, info){
+			if (err) {
+				return res.json({ error: err });
+			}
+			if (! user) {
+				return info ? res.json(info) : res.redirect("/login");
+			}
+			
+			user.last_ip = util.ip2num( req.ip )
+			user.save(function(err, data){ if (err) console.err('error setting ip for user') })
+
+			req.logIn(user, function(err) {
+				if (err) { return next(err); }
+				var returnTo = req.session.returnTo
+				delete req.session.returnTo
+				return res.json({ status: "OK", returnTo: returnTo || "/profile" })
+			});
+		})(req, res, next);
+	},
+
+	logout: function (req, res) {
+		req.logout();
+		res.redirect('/');
+	},
+
+	serializeUser: function (user, done) {
+		done(null, user._id);
+	},
+
+	deserializeUser: function (id, done) {
+		try {
+			var _id = mongoose.Types.ObjectId(id)
+			User.findOne({ _id: _id }, "_id displayName username photo isStaff", function (err, user) {
+				done(err, user);
+			});
+		}
+		catch (e) {
+			User.findOne({ twitter_id: id }, "_id displayName username photo isStaff", function (err, user) {
+				done(err, user);
+			});
+		}
+	},
+
+	signup: function (req, res){
+		var username = util.trim(req.body.username)
+		var password = req.body.password
+		var email = util.trim(req.body.email)
+
+		var shasum = crypto.createHash('sha1')
+		shasum.update(password)
+		password = shasum.digest('hex');
+		
+		User.findByUsername(username, function (err, user) {
+			if (user) {
+				res.json({ error: { errors: { username: { message: "Username has been taken" } } } })
+				return
+			}
+
+			User.findByEmail(email, function (err, user) {
+				if (user) {
+					res.json({ error: { errors: { username: { message: "Email has already been used" } } } })
+					return
+				}
+				var data = {
+					username: username,
+					displayName: username,
+					password: password,
+					email: email,
+					created_ip: util.ip2num( req.ip ),
+					last_ip: util.ip2num( req.ip ),
+					created_at: new Date ()
+				}
+				new User(data).save(function(err, user){
+					if (err || ! data) { return res.json({ error: err }) }
+					req.login(user, function(){
+						auth.mail.welcome(user, function(){
+							res.json({ status: "OK", payload: user })
+						})
+					})
+				})
+			})
+		})
+	},
+
+	verifyLocalUser: function (username, password, done) {
+		User.findByUsername(username, function(err, user){
+			if (err) { return done(err); }
+			if (! user) {
+				return done(null, false, { error: { errors: { username: { message: 'No such username.' } }}})
+			}
+			if (! user.validPassword(password)) {
+				return done(null, false, { error: { errors: { password: { message: 'Incorrect password.' } }}})
+			}
+			return done(null, user);
+		});
+	},
+
+	insertTwitterUser: function (accessToken, refreshToken, profile, done) {
+		process.nextTick(function () {
+			var userData = {
+				twitter_id: profile.id,
+				username: profile.username,
+				displayName: profile.displayName,
+				photo: profile.photos[0].value,
+				twitterName: profile.username,
+			};
+			User.findOne({twitter_id: profile.id}, function(err, data){
+				if (! err && data) {
+					return done(err, data);
+				}
+				User.findByUsername(profile.username, function(err, data){
+					if (data) {
+						return done(null, false, userData)
+					}
+					new User(userData).save(function(err, data){
+						if (err) {
+							console.error(err)
+						}
+						return done(err, data)
+					})
+				})
+			});
+			
+		});
+	},
+
+	insertFacebookUser: function (accessToken, refreshToken, profile, done) {
+		process.nextTick(function () {
+			var userData = {
+				facebook_id: profile.id,
+				username: profile.username || profile.displayName.toLowerCase().replace(/ /g,'-'),
+				displayName: profile.displayName,
+				photo: "http://graph.facebook.com/" + profile.id + "/picture?type=large",
+				facebookUrl: profile.username ? "https://facebook.com/" + profile.username : ""
+			};
+
+			User.findOne({twitter_id: profile.id}, function(err, data){
+				if (! err && data) {
+					return done(err, data);
+				}
+				User.findByUsername(profile.username, function(err, data){
+					if (data) {
+						return done(null, false, userData)
+					}
+					new User(userData).save(function(err, data){
+						if (err) {
+							console.error(err)
+						}
+						return done(err, data)
+					})
+				})
+			});
+
+		});
+	},
+	
+	usernameFixed: function (req, res) {
+		
+		var userData = req.session.userData
+		if (! userData) {
+			return res.redirect("/")
+		}
+		if (req.isAuthenticated()) {
+			delete req.session.userData
+			return res.redirect("/")
+		}
+
+		var username = util.sanitize(req.body.username)
+
+		User.findByUsername(username, function(err, doc){
+			if (err || doc) {
+				res.json({ error: { errors: { username: { message: "Username has been taken" } } } })
+				return
+			}
+			userData.username = username
+			
+			new User(userData).save(function(err, user){
+				req.logIn(user, function(err) {
+					if (err) { return res.json(err); }
+					var returnTo = req.session.returnTo
+					delete req.session.returnTo
+					return res.json({ status: "OK", returnTo: returnTo || "/profile" })
+				});
+			})
+		})
+	},
+	
+	forgotPassword: function (req, res) {
+		User.findByEmail(req.body.email, function(err, user){
+			if (err || ! user) {
+				res.json({ error: { errors: { email: { message: "That email address was not found." } } } })
+				return
+			}
+			User.resetPasswordNonce(user, function(err){
+				auth.mail.forgotPassword(user, function(){
+					res.json({ success: 'OK' })
+				})
+			})
+		})
+	},
+	
+	resetPassword: function (req, res) {
+		var password = req.body.password
+
+		var shasum = crypto.createHash('sha1')
+		shasum.update(password)
+		password = shasum.digest('hex');
+
+		User.findOne({ passwordNonce: req.body.nonce }, function (err, user){
+			if (err || ! user) {
+				res.json({ error: { errors: { email: { message: "That reset token has already been used." } } } })
+				return
+			}
+			user.password = password
+			user.passwordNonce = ""
+			user.save(function(){
+				req.login(user, function(){
+					res.json({ status: "OK", payload: user })
+				})
+			})
+		})
+	},
+
+}
+
+module.exports = auth
diff --git a/server/lib/auth/mail.js b/server/lib/auth/mail.js
new file mode 100644
index 0000000..a4abccd
--- /dev/null
+++ b/server/lib/auth/mail.js
@@ -0,0 +1,67 @@
+
+var email = require("emailjs"),
+	ejs = require("ejs"),
+	fs = require("fs"),
+	util = require("../util");
+
+var mail = {
+	
+	from: 'Vvalls <info@vvalls.com>',
+	templates: {},
+	
+	init: function(){
+		var names = ["welcome","password"].forEach(function(name){
+			mail.templates[name] = {};
+			var types = ["text","html"].forEach(function(type){
+				fs.readFile("views/mail/" + name + "." + type + ".ejs", function(err, data){
+					mail.templates[name][type] = ejs.compile(data.toString())
+				})
+			})
+		})
+	},
+	
+	connect: function(){
+		var server = email.server.connect({
+			user: process.env.OKFOCUS_EMAIL_USERNAME, 
+			password: process.env.OKFOCUS_EMAIL_PASSWORD, 
+			host: "smtp.sendgrid.net", 
+			ssl: true
+		})
+		return server
+	},
+	
+	send: function(msg, cb){
+		var server = mail.connect()
+		server.send(msg, cb)
+	},
+	
+	welcome: function(user, cb){
+		var message = {
+			 text:    mail.templates.welcome.text(user),
+			 from:    mail.from,
+			 to:      user.email,
+			 subject: "Welcome to Vvalls",
+			 attachment: [
+					{ data: mail.templates.welcome.html(user), alternative: true },
+			 ]
+		};
+		mail.send(message, cb)
+		console.log("sent welcome email to", user.email)
+	},
+	
+	forgotPassword: function(user, cb){
+		var message = {
+			 text:    mail.templates.password.text(user),
+			 from:    mail.from, 
+			 to:      user.email,
+			 subject: "Recover your password",
+			 attachment: [
+					{ data: mail.templates.password.html(user), alternative: true },
+			 ]
+		}
+		mail.send(message, cb)
+		console.log("sent password email to", user.email)
+	},
+}
+
+module.exports = mail
diff --git a/server/lib/auth/views.js b/server/lib/auth/views.js
new file mode 100644
index 0000000..591b06a
--- /dev/null
+++ b/server/lib/auth/views.js
@@ -0,0 +1,33 @@
+
+var util = require('../util'),
+	User = require("../schemas/User");
+
+
+var views = {}
+
+views.usernameTaken = function (req, res) {
+	var userData = req.session.userData
+	if (! userData) {
+		return res.redirect("/")
+	}
+	if (req.isAuthenticated()) {
+		delete req.session.userData
+		return res.redirect("/")
+	}
+	res.render("modal", { opt: { username: util.sanitize(userData.username) } })
+}
+
+views.resetPassword = function (req, res) {
+	var nonce = util.sanitize(req.query.nonce)
+	if (! nonce.length) {
+		return res.redirect("/")
+	}
+	User.findOne({ passwordNonce: nonce }, function (err, user){
+		if (err || ! user) {
+			return res.redirect("/")
+		}
+		res.render("reset-password", { username: user.username, nonce: user.passwordNonce })
+	})
+}
+
+module.exports = views
diff --git a/server/lib/middleware.js b/server/lib/middleware.js
index 0bc3f7a..aec54ad 100644
--- a/server/lib/middleware.js
+++ b/server/lib/middleware.js
@@ -39,6 +39,7 @@ var middleware = {
 		res.locals.user = req.user || {}
 		res.locals.config = config
 		res.locals.profile = null
+		res.locals.opt = {}
 		next()
 	},
 
diff --git a/server/lib/schemas/User.js b/server/lib/schemas/User.js
index 77e2e02..b64f8fc 100644
--- a/server/lib/schemas/User.js
+++ b/server/lib/schemas/User.js
@@ -41,10 +41,8 @@ var UserSchema = new mongoose.Schema({
 		}, "{PATH} is not an acceptable name"]
 	},
 	email: { type: String, default: "" },
-	emailVerified: {
-		type: Boolean,
-	 default: false,
-	},
+	emailVerified: { type: Boolean, default: false, },
+	emailOptout: { type: Boolean, default: false, },
 	password: {
 		type: String,
 		validate: [function (val) {
@@ -52,6 +50,11 @@ var UserSchema = new mongoose.Schema({
 			return true
 		}, "{PATH} is not an acceptable password"]
 	},
+	passwordNonce: {
+		type: String,
+		default: "",
+	},
+
 	location: { type: String, default: "" },
 	photo: { type: String, default: "" },
 	bio: { type: String, default: "" },
@@ -72,6 +75,26 @@ UserSchema.methods.validPassword = function (pw) {
 	shasum.update(pw)
 	return this.password === shasum.digest('hex');
 }
-
+UserSchema.statics.findByUsername = function (username, cb) {
+	this.findOne({ username: new RegExp("^" + username + "$", "i") }, cb)
+}
+UserSchema.statics.findByEmail = function (email, cb) {
+	email = util.escapeRegExp(email)
+	this.findOne({ email: new RegExp("^" + email + "$", "i") }, cb)
+}
+UserSchema.statics.findByIP = function (ip, cb) {
+	ip = util.ip2num(ip)
+	this.findOne({ $or: [{ created_ip: ip }, { last_ip: ip }] }, cb)
+}
+UserSchema.statics.resetPasswordNonce = function(user, cb){
+	crypto.pseudoRandomBytes(256, function (err, buf){
+		var shasum = crypto.createHash('sha1')
+		shasum.update(buf)
+		user.passwordNonce = shasum.digest('hex')
+		user.save(function(err, doc){
+			cb()
+		})
+	})
+}
 module.exports = exports = mongoose.model('user', UserSchema);
 exports.schema = UserSchema;
diff --git a/server/lib/upload.js b/server/lib/upload.js
index 0f6c624..e206f7c 100644
--- a/server/lib/upload.js
+++ b/server/lib/upload.js
@@ -60,7 +60,9 @@ module.exports.put = function (key, file, opt) {
 	}, function(err, s3res) {
 		if (err || s3res.statusCode !== 200) {
 			console.error(err);
-			s3res.resume()
+			if (s3res && s3res.resume) {
+				s3res.resume()
+			}
 			return;
 		}
 
diff --git a/server/lib/util.js b/server/lib/util.js
index aaa8274..6604abe 100644
--- a/server/lib/util.js
+++ b/server/lib/util.js
@@ -16,18 +16,18 @@ util.trim = function (s){ return (s || "").replace(whitespaceHead,"").replace(wh
 util.slugify = function (s){
 	return (s || "").toLowerCase().replace(whitespace,"-").replace(nonAlphanumerics, '-').replace(consecutiveDashes,"-")
 }
-
 util.sanitize = function (s){
 	return (s || "").replace(entities, "")
 }
-
 util.capitalize = function (s) {
 	return (s || "").split(" ").map(util.capitalizeWord).join(" ");
 }
-
 util.capitalizeWord = function (s) {
 	return s.charAt(0).toUpperCase() + s.slice(1);
 }
+util.escapeRegExp: function (s) {
+	return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
+}
 
 
 util.cleanQuery = function (query) {
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
new file mode 100644
index 0000000..93405fc
--- /dev/null
+++ b/views/controls/editor/media-editor.ejs
@@ -0,0 +1,30 @@
+<div class="vvbox settings" id="editorMediaSettings">
+	<input type="hidden" name="_csrf" value="[[- token ]]">
+	<input type="hidden" name="_id" value="new">
+
+	<div class="setting">
+		<input type="text" name="name" placeholder="room name" />
+	</div>
+	
+	<div class="setting">
+		<textarea name="description" placeholder="short description"></textarea>
+	</div>
+
+	<div class="setting">
+		<div class="radio-group">
+			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked>
+			<label class="radio-group__label" for="privacy_private">
+				Everyone
+			</label>
+			<input id="privacy_public" class="radio-group__option" type="radio" name="privacy" value="private">
+			<label class="radio-group__label" for="privacy_public">
+				Just for me
+			</label>
+		</div>
+	</div>
+
+	<div class="setting">
+		<button data-role="save-media">Save</button>
+	</div>
+
+</div>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index a7d6213..867d5f3 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -16,9 +16,7 @@
 	<div class="setting">
 		<textarea name="description" placeholder="short description"></textarea>
 	</div>
-	<div class="setting">
-		<input type="text" placeholder="http://vvalls.com/t987" />
-	</div>
+
 	<div class="setting">
 		<div class="radio-group">
 			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked>
diff --git a/views/mail/password.html.ejs b/views/mail/password.html.ejs
new file mode 100644
index 0000000..f266488
--- /dev/null
+++ b/views/mail/password.html.ejs
@@ -0,0 +1,25 @@
+<html>
+<body>
+
+<p>
+	Hey there,
+</p>
+
+<p>
+	We received a request to reset the password associated with this email address.
+</p>
+
+<p>
+	Click the link below to make a new password:
+</p>
+
+<p>
+	<a href="http://vvalls.com/auth/password?nonce=[[- passwordNonce ]]">http://vvalls.com/auth/password?nonce=[[- passwordNonce ]]</a>
+</p>
+
+<p>
+	If this was requested in error, please disregard this message.
+</p>
+
+</body>
+</html>
diff --git a/views/mail/password.text.ejs b/views/mail/password.text.ejs
new file mode 100644
index 0000000..67e4b60
--- /dev/null
+++ b/views/mail/password.text.ejs
@@ -0,0 +1,11 @@
+
+Hey there,
+
+We received a request to reset the password associated with this email address.
+
+Click the link below to make a new password:
+
+http://vvalls.com/auth/password?nonce=[[- passwordNonce ]]
+
+If this was requested in error, please disregard this message.
+
diff --git a/views/mail/welcome.html.ejs b/views/mail/welcome.html.ejs
new file mode 100644
index 0000000..8b7194b
--- /dev/null
+++ b/views/mail/welcome.html.ejs
@@ -0,0 +1,17 @@
+<html>
+<body>
+
+<p>
+	<a href="http://vvalls.com/"><img src="http://vvalls.com/img/logo.svg"></a>
+</p>
+
+<p>
+	Welcome to Vvalls, [[- username ]]
+</p>
+
+<p>
+	<a href="http://vvalls.com/">www.vvalls.com</a>
+</p>
+
+</body>
+</html>
diff --git a/views/mail/welcome.text.ejs b/views/mail/welcome.text.ejs
new file mode 100644
index 0000000..cab9c15
--- /dev/null
+++ b/views/mail/welcome.text.ejs
@@ -0,0 +1,4 @@
+
+Welcome to Vvalls, [[- username ]]
+
+http://www.posthang.com
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 80be29f..9f0c2f2 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -65,6 +65,9 @@
 
 <script type="text/javascript" src="/assets/javascripts/ui/site/SignInModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/SignUpModal.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/UsernameTaken.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/PasswordForgot.js"></script>
+<script type="text/javascript" src="/assets/javascripts/ui/site/PasswordReset.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/LayoutsModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProjectModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProfileModal.js"></script>
diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs
index 3341aec..11b930f 100644
--- a/views/partials/sign-in.ejs
+++ b/views/partials/sign-in.ejs
@@ -74,4 +74,79 @@
 	</div>
 </div>
 
+<div class="mediaDrawer fixed animate forgotPassword">
+	<div class="box">
+		<form id="forgotPw" method="post" autocomplete="off">
+			<li>
+				Forgot your password?  Enter the email address you used to sign up
+				and we can reset it for you.
+			</li>
+			<li>
+				<label class="description" for="emailInput">Email:</label>
+				<div>
+					<input id="emailInput" name="email" class="element text medium" type="text" maxlength="255" value="" autocomplete="off" spellcheck="false"> 
+				</div>
+			</li> 
+			<li class="buttons">
+				<input id="saveForm" class="bb button" type="submit" value="Submit">
+			</li>
+			<div class="errors">
+				<div>There was a problem with your submission:</div>
+				<div class="errorList"></div>
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="mediaDrawer fixed animate resetPassword">
+	<div class="box">
+		<form id="resetPassword" method="post">
+			<input type="hidden" name="nonce">
+			Please reset your password.
+			<br><br>
+			<li>
+				<label class="description" for="passwordInput1">Password:</label>
+				<div>
+					<input id="passwordInput1" name="password" class="element text medium" type="password" maxlength="255">
+				</div> 
+			</li>
+			<li>
+				<label class="description" for="passwordInput2">Again!</label>
+				<div>
+					<input id="passwordInput2" class="element text medium" type="password" maxlength="255">
+				</div> 
+			</li>
+			<li class="buttons">
+				<input id="saveForm" class="bb button" type="submit" value="Submit" />
+			</li>
+			<div class="errors">
+				<div class="errorList"></div>
+			</div>
+		</form>
+	</div>
+</div>
+
+<div class="mediaDrawer fixed animate usernameTaken">
+	<div class="box">
+		<form id="usernameTaken" method="post" autocomplete="off">
+			We're sorry, the username <b>[[- username ]]</b> is already being used.
+			<br><br>
+			Please choose another username.
+			<br><br>
+			<li>
+				<label class="description" for="usernameInput">Username:</label>
+				<div>
+					<input id="usernameInput" name="username" class="element text medium" type="text" maxlength="255" value="" autocomplete="off" spellcheck="false"> 
+				</div>
+			</li>
+			<li class="buttons">
+				<input id="saveForm" class="bb button" type="submit" value="Submit">
+			</li>
+			<div class="errors">
+				<div class="errorList"></div>
+			</div>
+		</form>
+	</div>
+</div>
+
 [[ } ]]
-- 
cgit v1.2.3-70-g09d2


From 544ee1236d188f1d24654817481abcf8d078facd Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Wed, 2 Jul 2014 17:37:13 -0400
Subject: password reset email; also sends email

---
 package.json                                        |  3 ++-
 .../assets/javascripts/mx/primitives/mx.youtube.js  |  2 +-
 public/assets/javascripts/ui/_router.js             | 21 +++++++++++++++++++++
 public/assets/javascripts/ui/site/PasswordForgot.js |  2 +-
 public/assets/javascripts/ui/site/PasswordReset.js  |  6 ++++++
 public/assets/javascripts/ui/site/UsernameTaken.js  |  6 ++++++
 public/assets/stylesheets/app.css                   |  4 +++-
 server/index.js                                     |  4 ++--
 server/lib/auth/views.js                            |  2 +-
 server/lib/util.js                                  |  2 +-
 views/modal.ejs                                     |  1 +
 views/partials/sign-in.ejs                          | 12 ++++++++----
 12 files changed, 53 insertions(+), 12 deletions(-)

(limited to 'public/assets/javascripts/ui')

diff --git a/package.json b/package.json
index 95af2ab..ca45bff 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "html-entities": "~1.0.10",
     "multer": "~0.1.0",
     "body-parser": "1.3.0",
-    "marked": "~0.3.2"
+    "marked": "~0.3.2",
+    "emailjs": "~0.3.6"
   },
   "devDependencies": {
     "grunt": "~0.4.1",
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 3662d7b..b1d3dfb 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -120,5 +120,5 @@ MX.Youtube = MX.Object3D.extend({
 })
 
 window.onYouTubePlayerAPIReady = function(){
-	console.log("youtube ready")
+	// console.log("youtube ready")
 }
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 6d41d5b..fdeafd5 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -5,6 +5,7 @@ var SiteRouter = Router.extend({
 	events: {
 		"click [data-role='show-signup-modal']": 'signup',
 		"click [data-role='show-signin-modal']": 'signin',
+		"click [data-role='forgot-password']": 'passwordForgot',
 		"click [data-role='new-project-modal']": 'newProject',
 		"click [data-role='edit-project-modal']": 'editProject',
 		"click [data-role='edit-profile-modal']": 'editProfile',
@@ -18,6 +19,11 @@ var SiteRouter = Router.extend({
 	routes: {
 		"/login":               'signin',
 		"/signup":              'signup',
+
+		"/auth/usernameTaken":  'usernameTaken',
+		"/auth/password":       'passwordReset',
+		"/auth/forgotPassword": 'passwordForgot',
+
 		"/profile":             'profile',
 		"/profile/edit":        'editProfile',
 		"/about/:name/edit":    'editDocument',
@@ -40,6 +46,7 @@ var SiteRouter = Router.extend({
 		this.newProjectModal = new NewProjectModal()
 		this.editProjectModal = new EditProjectModal()
 		this.editProfileModal = new EditProfileModal()
+		this.passwordForgotModal = new PasswordForgot()
 		this.documentModal = new DocumentModal()
 		
 		this.route()
@@ -122,6 +129,20 @@ var SiteRouter = Router.extend({
 		this.signInModal.load()
 	},
 	
+	usernameTaken: function(e){
+		this.usernameTakenModal = new UsernameTaken ()
+		this.usernameTakenModal.load()
+	},
+	passwordForgot: function(e){
+		e && e.preventDefault()
+		window.history.pushState(null, document.title, "/auth/forgotPassword")
+		this.passwordForgotModal.load()
+	},
+	passwordReset: function(e){
+		this.passwordResetModal = new PasswordReset ()
+		this.passwordResetModal.load()
+	},
+	
 	profile: function(e){
 		var classes = ['one', 'two', 'three', 'four',
 		               'five', 'six', 'seven', 'eight',
diff --git a/public/assets/javascripts/ui/site/PasswordForgot.js b/public/assets/javascripts/ui/site/PasswordForgot.js
index 6ac23c0..ecbfc07 100644
--- a/public/assets/javascripts/ui/site/PasswordForgot.js
+++ b/public/assets/javascripts/ui/site/PasswordForgot.js
@@ -1,6 +1,6 @@
 var PasswordForgot = ModalFormView.extend({
 	el: ".mediaDrawer.passwordForgot",
-	action: "/auth/passwordForgot",
+	action: "/auth/forgotPassword",
 
 	validate: function(){
 		var errors = []
diff --git a/public/assets/javascripts/ui/site/PasswordReset.js b/public/assets/javascripts/ui/site/PasswordReset.js
index 77e8684..9b87d37 100644
--- a/public/assets/javascripts/ui/site/PasswordReset.js
+++ b/public/assets/javascripts/ui/site/PasswordReset.js
@@ -2,6 +2,12 @@ var PasswordReset = ModalFormView.extend({
 	el: ".mediaDrawer.passwordReset",
 	action: "/auth/password",
 
+	load: function(){
+		var opt = JSON.parse( $("#opt").html() )
+		this.$("[name=nonce]").val( opt.nonce )
+		this.__super__.load.call(this)
+	},
+	
 	validate: function(){
 		var errors = []
 		
diff --git a/public/assets/javascripts/ui/site/UsernameTaken.js b/public/assets/javascripts/ui/site/UsernameTaken.js
index fc651e3..fc9f50a 100644
--- a/public/assets/javascripts/ui/site/UsernameTaken.js
+++ b/public/assets/javascripts/ui/site/UsernameTaken.js
@@ -2,6 +2,12 @@ var UsernameTaken = ModalFormView.extend({
 	el: ".mediaDrawer.usernameTaken",
 	action: "/auth/usernameTaken",
 
+	load: function(){
+		var opt = JSON.parse( $("#opt").html() )
+		this.$("#usernameThatIsTaken").html( opt.username )
+		this.__super__.load.call(this)
+	},
+
 	validate: function(){
 		var errors = []
 
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 9c80987..937e5c4 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -729,8 +729,10 @@ h5 {
   -webkit-transform:translateY(0%);
   transform:translateY(0%);
 }
+.mediaDrawer.table, .mediaDrawer.error,
 .mediaDrawer.signin, .mediaDrawer.signup,
-.mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.error,
+.mediaDrawer.alert, .mediaDrawer.confirm,
+.mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken,
 .mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject {
     display:table;
 }
diff --git a/server/index.js b/server/index.js
index 4b628e4..1db7e04 100644
--- a/server/index.js
+++ b/server/index.js
@@ -92,8 +92,8 @@ site.route = function () {
 	app.post('/auth/usernameTaken', auth.usernameFixed);
 	app.get('/auth/password', auth.views.resetPassword);
 	app.post('/auth/password', auth.resetPassword);
-	app.post('/auth/passwordForgot', auth.forgotPassword);
-
+	app.get('/auth/forgotPassword', views.modal);
+	app.post('/auth/forgotPassword', auth.forgotPassword);
 
 	app.get('/profile', views.profile)
 	app.get('/profile/edit', views.profile)
diff --git a/server/lib/auth/views.js b/server/lib/auth/views.js
index 591b06a..cd31248 100644
--- a/server/lib/auth/views.js
+++ b/server/lib/auth/views.js
@@ -26,7 +26,7 @@ views.resetPassword = function (req, res) {
 		if (err || ! user) {
 			return res.redirect("/")
 		}
-		res.render("reset-password", { username: user.username, nonce: user.passwordNonce })
+		res.render("modal", { opt: { username: user.username, nonce: user.passwordNonce } })
 	})
 }
 
diff --git a/server/lib/util.js b/server/lib/util.js
index 6604abe..87e2d54 100644
--- a/server/lib/util.js
+++ b/server/lib/util.js
@@ -25,7 +25,7 @@ util.capitalize = function (s) {
 util.capitalizeWord = function (s) {
 	return s.charAt(0).toUpperCase() + s.slice(1);
 }
-util.escapeRegExp: function (s) {
+util.escapeRegExp = function (s) {
 	return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&")
 }
 
diff --git a/views/modal.ejs b/views/modal.ejs
index 4550aff..6ed3fa1 100644
--- a/views/modal.ejs
+++ b/views/modal.ejs
@@ -19,5 +19,6 @@
 </div>
 </body>
 [[ include partials/scripts ]]
+<script id="opt" type="text/json">[[- JSON.stringify(opt) ]]</script>
 <script>window.isModalView = true</script>
 </html>
diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs
index 11b930f..3f05fff 100644
--- a/views/partials/sign-in.ejs
+++ b/views/partials/sign-in.ejs
@@ -27,7 +27,8 @@
 				<div class="errorList"></div>
 			</div>
 			<br><br>
-			<a data-role="show-signup-modal" href="#">Make a new account</a>
+			<a data-role="show-signup-modal" href="#">Make a new account</a><br>
+			<a data-role="forgot-password" href="#">Forgot your password?</a>
 		</form>
 	</div>
 </div>
@@ -74,9 +75,11 @@
 	</div>
 </div>
 
-<div class="mediaDrawer fixed animate forgotPassword">
+<div class="mediaDrawer fixed animate passwordForgot">
+	<span class="close">X</span>
 	<div class="box">
 		<form id="forgotPw" method="post" autocomplete="off">
+			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<li>
 				Forgot your password?  Enter the email address you used to sign up
 				and we can reset it for you.
@@ -98,9 +101,10 @@
 	</div>
 </div>
 
-<div class="mediaDrawer fixed animate resetPassword">
+<div class="mediaDrawer fixed animate passwordReset">
 	<div class="box">
 		<form id="resetPassword" method="post">
+			<input type="hidden" name="_csrf" value="[[- token ]]">
 			<input type="hidden" name="nonce">
 			Please reset your password.
 			<br><br>
@@ -129,7 +133,7 @@
 <div class="mediaDrawer fixed animate usernameTaken">
 	<div class="box">
 		<form id="usernameTaken" method="post" autocomplete="off">
-			We're sorry, the username <b>[[- username ]]</b> is already being used.
+			We're sorry, the username <b id="usernameThatIsTaken"></b> is already being used.
 			<br><br>
 			Please choose another username.
 			<br><br>
-- 
cgit v1.2.3-70-g09d2


From 89d6385fe4eb58387d4ddca9d799d1b07ef727f0 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 10 Jul 2014 16:18:07 -0400
Subject: defer yt

---
 .../assets/javascripts/mx/primitives/mx.youtube.js |  29 +++--
 public/assets/javascripts/ui/_router.js            |  29 +++--
 .../assets/javascripts/ui/editor/EditorToolbar.js  |   1 +
 public/assets/javascripts/ui/reader/ReaderView.js  |   3 +
 public/assets/stylesheets/app.css                  |  21 +++-
 public/rectangles.html                             | 124 ---------------------
 server/index.js                                    |   1 +
 server/lib/views.js                                |  25 +++++
 views/projects/list-projects.ejs                   |   5 +-
 9 files changed, 88 insertions(+), 150 deletions(-)
 delete mode 100644 public/rectangles.html

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index b1d3dfb..9925c22 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -24,6 +24,7 @@ MX.Youtube = MX.Object3D.extend({
   },
 
   load: function (ops) {
+  	var base = this
   	var uid = 'player-' + Uid ()
   	var preload = document.createElement("div")
   	preload.id = uid
@@ -34,16 +35,22 @@ 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.defer(uid)
+  },
+  
+  defer: function (uid){
+		if (! YT || ! YT.loaded) {
+			setTimeout(function(){
+				console.log("hwat")
+				this.defer(uid)
+			}.bind(this), 300)
+		}
+		else {
+			this.build(uid)
+		}
+  },
+  
+  build: function(uid){
 		this.player = new YT.Player(uid, {
 			videoId: this.media.token,
 			width: this.width,
@@ -120,5 +127,5 @@ MX.Youtube = MX.Object3D.extend({
 })
 
 window.onYouTubePlayerAPIReady = function(){
-	// console.log("youtube ready")
+	console.log("youtube ready")
 }
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index fdeafd5..ce18b2a 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -35,7 +35,8 @@ var SiteRouter = Router.extend({
 		"/project":             'projectPicker',
 		"/project/new":         'newProject',
 		"/project/new/:layout": 'projectNewWithLayout',
-		"/project/:name":       'projectEditor',
+		"/project/:name":       'project',
+		"/project/:name/view":  'projectViewer',
 	},
 
 	initialize: function(){
@@ -94,21 +95,31 @@ var SiteRouter = Router.extend({
 		this.editorView.loadLayout(layout)
 	},
 
-	projectEditor: function(e, name){
-		app.mode.editor = true
-		app.launch()
-
+	project: function(e, name){
 		if ($(".aboutRoom").length) {
-			this.readerView = new ReaderView()
-			this.readerView.load(name)
+			this.projectViewer(e, name)
 		}
 		else {
-			this.editorView = new EditorView()
-			this.editorView.load(name)
+			this.projectEditor(e, name)
 		}
 	},
 
+	projectEditor: function(e, name){
+		app.mode.editor = true
+		app.launch()
+
+		this.editorView = new EditorView()
+		this.editorView.load(name)
+	},
 	
+	projectViewer: function(e, name){
+		app.mode.editor = true
+		app.launch()
+
+		this.readerView = new ReaderView()
+		this.readerView.load(name)
+	},
+
 /*
 	editProject: function(e){
 		e && e.preventDefault()
diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js
index 210ef6c..4a7c3e8 100644
--- a/public/assets/javascripts/ui/editor/EditorToolbar.js
+++ b/public/assets/javascripts/ui/editor/EditorToolbar.js
@@ -87,6 +87,7 @@ var EditorToolbar = View.extend({
 
 var editor = new function(){
 	this.permissions = new Permissions({
+	  'pick': false,
 		'move': true,
 		'resize': false,
 		'destroy': false,
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 7cd629b..860cc04 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -11,6 +11,9 @@ var ReaderView = View.extend({
 	},
 
 	load: function(name){
+		if (window.location.search.indexOf("noui") !== -1) {
+			$(".logo,.topLinks,#editorView").hide()
+		}
 		name = sanitize(name)
 		$.get(this.projectAction + name, $.proxy(this.ready, this))
 	},
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 937e5c4..684761c 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -158,10 +158,21 @@ h5 {
 .page table.showcase {
   height:70vh;
 }
-.page table td.border{
-  border-right:1px solid;
+.page table td.border {
+	position: relative;
+  border-right: 1px solid;
+}
+iframe.embed {
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+	border: 0;
+	z-index: -1;
+	pointer-events: none;
 }
-.page table td{
+.page table td {
   width: 33.3333%;
   background-size: cover;
   background-repeat: no-repeat;
@@ -169,7 +180,7 @@ h5 {
   border-bottom:1px solid black;
 }
 
-.page table.showcase td{
+.page table.showcase td {
   height: 70vh;
   background-size: cover;
 }
@@ -208,6 +219,7 @@ h5 {
   color:white;
 }
 
+/*
 .room1 {
   position: relative;
   overflow: hidden;
@@ -261,6 +273,7 @@ h5 {
 	-webkit-transform:translateY(0);
 	transform:translateY(0);
 }
+*/
 
 .page .questions {
   background: #55efcb;
diff --git a/public/rectangles.html b/public/rectangles.html
deleted file mode 100644
index befe15c..0000000
--- a/public/rectangles.html
+++ /dev/null
@@ -1,124 +0,0 @@
-<!doctype html>
-<html>
-<head>
-	<link rel="stylesheet" type="text/css" href="assets/stylesheets/css.css">
-<style type="text/css">
-body { background: #fff; }
-body > div {
-	float: left;
-}
-#info {
-	padding: 30px;
-}
-#hud {
-	position: absolute;
-	top:0;left:0;
-	z-index: 10;
-}
-.face {
-	background-color: #fff;
-	transition: 0.1s background-color ease;
-}
-.front { background-color: #fff; }
-.back  { background-color: #fff; }
-.left  { background-color: #fff; }
-.right { background-color: #fff; }
-.floor { background-color: #eee; }
-.ceiling { background-color: rgba(230,230,255,0.3); }
-
-.active.floor { background-color: #ffe; }
-.active.ceiling { background-color: rgba(230,230,255,0.3); }
-
-.dragging .mx-object3d.image {
-	pointer-events: none;
-}
-
-.dot {
-	background:white;
-	border-radius:20px;
-	border: 1px solid black;
-}
-
-.image {
-	background-size: 100% 100%;
-}
-
-/* 
-.face {
-	background-image: url(http://i.asdf.us/im/6f/bgdither_1398274442_jules.gif);
-	background-color: transparent;
-}
- */
-
-#map canvas {
-	border-bottom: 2px solid #ddd;
-	border-right: 2px solid #ddd;
-}
-</style>
-</head>
-<body>
-	<div id="bg"></div>
-	<div id="scene"></div>
-
-	<div id="hud">
-		<div id="map" style="display: block">
-		</div>
-
-		<div id="info">
-			<select id="palette">
-				<option>colors</option>
-				<option>redblue</option>
-				<option>gray</option>
-				<option selected>bone</option>
-				<option>alpha</option>
-				<option>white</option>
-				<option>black</option>
-			</select>
-			<div id="intersects"></div>
-		</div>
-	</div>
-
-</body>
-<script src="assets/javascripts/vendor/jquery.min.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/tube.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/loader.js"></script>
-<script type="text/javascript" src="assets/javascripts/vendor/polyfill.js"></script>
-<script type="text/javascript" src="assets/javascripts/util.js"></script>
-
-<script type="text/javascript" src="assets/javascripts/rectangles/_env.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/colors.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/constants.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/debug.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/sort.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/wheel.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/mouse.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/util/keys.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/room.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/wall.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/tree.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/rect.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/vec2.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/vec3.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/models/mat4.js"></script>
-
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/_rooms.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/builder.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/clipper.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/rooms/mover.js"></script>
-
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/_scenery.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/_image.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/move.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/scenery/image/resize.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.js"></script>
-<script type="text/javascript" src="assets/javascripts/rectangles/engine/map/draw.js"></script>
-
-<script src="assets/javascripts/mx/mx.js"></script>
-<script src="assets/javascripts/mx/extensions/mx.scene.js"></script>
-<script src="assets/javascripts/mx/extensions/mx.movements.js"></script>
-<script src="assets/javascripts/mx/primitives/mx.image.js"></script>
-<script src="assets/javascripts/app.js"></script>
-
-</html>
diff --git a/server/index.js b/server/index.js
index 1db7e04..038b184 100644
--- a/server/index.js
+++ b/server/index.js
@@ -121,6 +121,7 @@ site.route = function () {
 	app.get('/project/new', middleware.ensureAuthenticated, views.modal)
 	app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor)
 	app.get('/project/:slug', middleware.ensureProject, views.editor)
+	app.get('/project/:slug/view', middleware.ensureProject, views.reader)
 
 	app.get('/api/layout', middleware.ensureAuthenticated, api.layouts.index)
 	app.get('/api/layout/:slug', middleware.ensureAuthenticated, api.layouts.show)
diff --git a/server/lib/views.js b/server/lib/views.js
index 000ff4d..89ad646 100644
--- a/server/lib/views.js
+++ b/server/lib/views.js
@@ -44,6 +44,26 @@ views.editor = function (req, res) {
 	}
 }
 
+views.reader = function (req, res) {
+	if (! req.user && ! req.project) {
+		res.redirect('/')
+	}
+	User.findOne({ _id: req.project.user_id }, function(err, user) {
+		if (err || ! user) {
+			console.error(err)
+			res.redirect('/')
+			return
+		}
+		res.render('reader', {
+			name: util.sanitize(req.project.name),
+			description: util.sanitize(req.project.description),
+			date: moment(req.project.updated_at).format("M/DD/YYYY"),
+			author: user.displayName,
+			authorlink: "/profile/" + user.username,
+		})
+	})
+}
+
 views.builder = function (req, res) {
 	res.render('builder')
 }
@@ -102,6 +122,11 @@ views.profile = function (req, res) {
 	
 	function next(user){
 		Project.find({ user_id: user._id }, function(err, projects){
+			projects = projects.map(function(project){
+				project = project.toObject()
+				project.date = moment(project.updated_at).format("M/DD/YYYY")
+				return project
+			})
 			done(err, user, projects)
 		})
 	}
diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs
index 443e26d..42387ba 100644
--- a/views/projects/list-projects.ejs
+++ b/views/projects/list-projects.ejs
@@ -4,12 +4,13 @@
 	<table>
 		<tr>
 
-		[[ projects.forEach(function(project) { ]]
+		[[ projects.forEach(function(project, i) { ]]
 			<td class="border room1">
+				<iframe src="/project/[[- project.slug ]]/view?noui=1" class="embed"></iframe>
 				[[ if (profile._id == project.user_id) { ]]
 				<div class="editBtn">edit</div>
 				[[ } ]]
-				<a href="/project/[[- project.slug ]]" class="roomName">[[- project.name ]]</a>
+				<a href="/project/[[- project.slug ]]" class="roomName">[[- project.name ]]<br>[[- project.date ]]</a>
 			</td>
 		[[ }) ]]
 
-- 
cgit v1.2.3-70-g09d2


From b19511eb75c6490ddc97ea59d82615ce4d9e0e91 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 10 Jul 2014 17:15:54 -0400
Subject: use view iframe on profile, spins on hover

---
 .../assets/javascripts/mx/primitives/mx.youtube.js |  3 +--
 public/assets/javascripts/ui/_router.js            |  7 ++----
 .../assets/javascripts/ui/editor/EditorSettings.js |  2 +-
 public/assets/javascripts/ui/reader/ReaderView.js  | 29 ++++++++++++++++++++++
 public/assets/javascripts/ui/site/ProfileView.js   | 29 ++++++++++++++++++++++
 views/partials/scripts.ejs                         |  1 +
 6 files changed, 63 insertions(+), 8 deletions(-)
 create mode 100644 public/assets/javascripts/ui/site/ProfileView.js

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index 9925c22..118623b 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -41,7 +41,6 @@ MX.Youtube = MX.Object3D.extend({
   defer: function (uid){
 		if (! YT || ! YT.loaded) {
 			setTimeout(function(){
-				console.log("hwat")
 				this.defer(uid)
 			}.bind(this), 300)
 		}
@@ -127,5 +126,5 @@ MX.Youtube = MX.Object3D.extend({
 })
 
 window.onYouTubePlayerAPIReady = function(){
-	console.log("youtube ready")
+	// console.log("youtube api ready")
 }
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index ce18b2a..b3e868a 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -49,6 +49,7 @@ var SiteRouter = Router.extend({
 		this.editProfileModal = new EditProfileModal()
 		this.passwordForgotModal = new PasswordForgot()
 		this.documentModal = new DocumentModal()
+		this.profileView = new ProfileView()
 		
 		this.route()
 		
@@ -155,11 +156,7 @@ var SiteRouter = Router.extend({
 	},
 	
 	profile: function(e){
-		var classes = ['one', 'two', 'three', 'four',
-		               'five', 'six', 'seven', 'eight',
-		               'nine', 'ten', 'eleven', 'twelve',
-		               'thirteen'];
-		$(".bio").addClass(choice(classes));
+		this.profileView.load()
 	},
 	
 	editProfile: function(e){
diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js
index 35bcbe0..1d68b1b 100644
--- a/public/assets/javascripts/ui/editor/EditorSettings.js
+++ b/public/assets/javascripts/ui/editor/EditorSettings.js
@@ -32,7 +32,7 @@ var EditorSettings = FormView.extend({
 		data.startPosition && scene.camera.move(data.startPosition)
 		
 		if (! data.isNew) {
-			console.log(data)
+			// console.log(data)
 			
 			this.$id.val( data._id )
 			this.$name.val( data.name )
diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index 860cc04..e86856c 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -26,6 +26,35 @@ var ReaderView = View.extend({
 		data.startPosition && scene.camera.move(data.startPosition)
 		
 		editor.permissions.clear()
+		
+		//
+		
+		var base = this
+		
+		$(window).on('message', function(event){
+			if (event.origin !== window.location.origin) {
+				return
+			}
+			var message = event.originalEvent.data
+			switch (message) {
+				case "spin-on":
+					base.spinning = true
+					break
+				case "spin-off":
+					base.spinning = false
+					break
+			}
+		})
+		
+		requestAnimationFrame(this.spin.bind(this))
+	},
+	
+	spinning: false,
+	spin: function(){
+		requestAnimationFrame(this.spin.bind(this))
+		if (this.spinning) {
+			scene.camera.rotationY -= 1/180
+		}
 	}
 
 })
diff --git a/public/assets/javascripts/ui/site/ProfileView.js b/public/assets/javascripts/ui/site/ProfileView.js
new file mode 100644
index 0000000..41f04ef
--- /dev/null
+++ b/public/assets/javascripts/ui/site/ProfileView.js
@@ -0,0 +1,29 @@
+
+var ProfileView = View.extend({
+
+	initialize: function(){
+	},
+
+	load: function(){
+		var classes = ['one', 'two', 'three', 'four',
+		               'five', 'six', 'seven', 'eight',
+		               'nine', 'ten', 'eleven', 'twelve',
+		               'thirteen'];
+		$(".bio").addClass(choice(classes));
+		
+		$("td.border").each(function(){
+			var iframe = $(this).find("iframe").get('0')
+			if (! iframe) return
+			console.log(iframe)
+			$(this).on({
+				mouseenter: function(e){
+					iframe.contentWindow.postMessage("spin-on", window.location.origin)
+				},
+				mouseleave: function(e){
+					iframe.contentWindow.postMessage("spin-off", window.location.origin)
+				}
+			})
+		})
+	}
+
+})
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs
index 9f0c2f2..6dd4480 100644
--- a/views/partials/scripts.ejs
+++ b/views/partials/scripts.ejs
@@ -72,6 +72,7 @@
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProjectModal.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/site/EditProfileModal.js"></script>
 <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/BuilderSettings.js"></script>
 <script type="text/javascript" src="/assets/javascripts/ui/builder/BuilderToolbar.js"></script>
-- 
cgit v1.2.3-70-g09d2


From bce442242f167b70be1f7b24190f9e59d3c24e37 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Thu, 10 Jul 2014 18:21:06 -0400
Subject: media editor

---
 public/assets/javascripts/ui/reader/ReaderView.js |  2 +-
 public/assets/javascripts/ui/site/ProfileView.js  |  7 ++--
 views/controls/editor/media-editor.ejs            | 43 ++++++++++++++++-------
 views/controls/editor/settings.ejs                |  2 +-
 views/controls/editor/video-toolbar.ejs           |  7 ----
 views/controls/reader/about-media.ejs             | 16 +++++++++
 6 files changed, 51 insertions(+), 26 deletions(-)
 delete mode 100644 views/controls/editor/video-toolbar.ejs
 create mode 100644 views/controls/reader/about-media.ejs

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js
index e86856c..add1ea1 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -32,7 +32,7 @@ var ReaderView = View.extend({
 		var base = this
 		
 		$(window).on('message', function(event){
-			if (event.origin !== window.location.origin) {
+			if (event.originalEvent.origin !== window.location.origin) {
 				return
 			}
 			var message = event.originalEvent.data
diff --git a/public/assets/javascripts/ui/site/ProfileView.js b/public/assets/javascripts/ui/site/ProfileView.js
index 41f04ef..8661bcd 100644
--- a/public/assets/javascripts/ui/site/ProfileView.js
+++ b/public/assets/javascripts/ui/site/ProfileView.js
@@ -1,20 +1,19 @@
 
 var ProfileView = View.extend({
 
-	initialize: function(){
+	initialize: function() {
 	},
 
-	load: function(){
+	load: function() {
 		var classes = ['one', 'two', 'three', 'four',
 		               'five', 'six', 'seven', 'eight',
 		               'nine', 'ten', 'eleven', 'twelve',
 		               'thirteen'];
 		$(".bio").addClass(choice(classes));
 		
-		$("td.border").each(function(){
+		$("td.border").each(function() {
 			var iframe = $(this).find("iframe").get('0')
 			if (! iframe) return
-			console.log(iframe)
 			$(this).on({
 				mouseenter: function(e){
 					iframe.contentWindow.postMessage("spin-on", window.location.origin)
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 93405fc..95aabb5 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -3,28 +3,45 @@
 	<input type="hidden" name="_id" value="new">
 
 	<div class="setting">
-		<input type="text" name="name" placeholder="room name" />
+		<input type="text" name="name" placeholder="media title">
 	</div>
 	
 	<div class="setting">
 		<textarea name="description" placeholder="short description"></textarea>
 	</div>
+	
+	<div class="video setting">
+		<span class="play">
+			<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="setting">
-		<div class="radio-group">
-			<input id="privacy_private" class="radio-group__option" type="radio" name="privacy" value="public" checked>
-			<label class="radio-group__label" for="privacy_private">
-				Everyone
-			</label>
-			<input id="privacy_public" class="radio-group__option" type="radio" name="privacy" value="private">
-			<label class="radio-group__label" for="privacy_public">
-				Just for me
-			</label>
-		</div>
+	<div class="image setting">
+		Dimensions
+		<input type="text" name="width"> Width
+		<input type="text" name="height"> Height
+		<select name="units">
+			<option value="inches">in</option>
+			<option value="cm">cm</option>
+		</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>
 </div>
diff --git a/views/controls/editor/settings.ejs b/views/controls/editor/settings.ejs
index 867d5f3..6f46be3 100644
--- a/views/controls/editor/settings.ejs
+++ b/views/controls/editor/settings.ejs
@@ -10,7 +10,7 @@
 	</div>
 
 	<div class="setting">
-		<input type="text" name="name" placeholder="room name" />
+		<input type="text" name="name" placeholder="room name">
 	</div>
 	
 	<div class="setting">
diff --git a/views/controls/editor/video-toolbar.ejs b/views/controls/editor/video-toolbar.ejs
deleted file mode 100644
index d4364a2..0000000
--- a/views/controls/editor/video-toolbar.ejs
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="edit menu edit-video">
-	<span class="icon-volume-mute toggled" data-info="mute"></span>
-	<span class="icon-ios7-compose-outline edit-text-toggle" data-info="edit wall text"></span>
-	<span class="icon-ios7-reload" data-info="loop"></span>
-	<span class="icon-ios7-arrow-forward" data-info="autoplay"></span>
-	<span class="icon-ios7-trash-outline" data-info="delete video"></span>
-</div>
diff --git a/views/controls/reader/about-media.ejs b/views/controls/reader/about-media.ejs
new file mode 100644
index 0000000..c6365ad
--- /dev/null
+++ b/views/controls/reader/about-media.ejs
@@ -0,0 +1,16 @@
+<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>
-- 
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/ui')

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/ui')

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/ui')

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/ui')

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/ui')

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/ui')

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/ui')

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 f97fffeebb0f764d1a8951c91d7b90cb9dcb7583 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 15 Jul 2014 15:15:38 -0400
Subject: build macpaint swatches

---
 public/assets/img/palette.gif                      | Bin 0 -> 3262 bytes
 .../assets/javascripts/mx/primitives/mx.video.js   |   4 +-
 .../assets/javascripts/mx/primitives/mx.vimeo.js   |   4 +-
 .../assets/javascripts/mx/primitives/mx.youtube.js |   4 +-
 public/assets/javascripts/ui/_router.js            |  27 ++++++
 .../assets/javascripts/ui/editor/LightControl.js   |   1 +
 public/assets/javascripts/ui/editor/MediaEditor.js |   4 +-
 .../javascripts/ui/editor/WallpaperPicker.js       |  91 +++++++++++++++++++++
 public/assets/javascripts/ui/lib/Router.js         |   4 +
 server/index.js                                    |   2 +
 views/modal.ejs                                    |   2 +-
 11 files changed, 134 insertions(+), 9 deletions(-)
 create mode 100644 public/assets/img/palette.gif

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/img/palette.gif b/public/assets/img/palette.gif
new file mode 100644
index 0000000..39c134f
Binary files /dev/null and b/public/assets/img/palette.gif differ
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js
index 5341226..7f91e34 100644
--- a/public/assets/javascripts/mx/primitives/mx.video.js
+++ b/public/assets/javascripts/mx/primitives/mx.video.js
@@ -19,8 +19,8 @@ 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.muted = this.media.mute
+  	this.paused = !! this.media.autoplay
+		this.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 e7555ef..0301e64 100644
--- a/public/assets/javascripts/mx/primitives/mx.vimeo.js
+++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js
@@ -19,8 +19,8 @@ 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.muted = this.media.mute
+  	this.paused = !! this.media.autoplay
+		this.muted = !! this.media.mute
 		
 		this.load()
   },
diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js
index a06cf5b..8c11da6 100644
--- a/public/assets/javascripts/mx/primitives/mx.youtube.js
+++ b/public/assets/javascripts/mx/primitives/mx.youtube.js
@@ -19,8 +19,8 @@ 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.muted = this.media.mute
+  	this.paused = !! this.media.autoplay
+		this.muted = !! this.media.mute
 		
 		this.load()
   },
diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js
index 2b2c7c0..b59d838 100644
--- a/public/assets/javascripts/ui/_router.js
+++ b/public/assets/javascripts/ui/_router.js
@@ -37,6 +37,8 @@ var SiteRouter = Router.extend({
 		"/project/new/:layout": 'projectNewWithLayout',
 		"/project/:name":       'project',
 		"/project/:name/view":  'projectViewer',
+		
+		"/test/wallpaper":      'testWallpaper',
 	},
 
 	initialize: function(){
@@ -200,5 +202,30 @@ var SiteRouter = Router.extend({
 		// this.documentModal.destroy(name)
 	},
 
+
+	testWallpaper: function(e){
+		var content = document.getElementById("content")
+		content.style.width = "680px"
+		content.style.margin = "0 auto"
+		var wm = new WallpaperManager()
+		app.on('wallpaper-ready', function(){
+			var black = [0,0,0,0]
+			var white = [255,255,255,1.0]
+			var swatches = wm.buildSwatches(black, white, 4)
+			document.body.style.backgroundColor = "#eee"
+			swatches.forEach(function(swatch){
+				swatch.style.margin = "4px"
+				swatch.style.border = "1px solid lime"
+				swatch.style.backgroundColor = "#888"
+				content.appendChild(swatch)
+				swatch.onclick = function(){
+					dataUrl = swatch.toDataURL()
+					document.body.style.backgroundImage = "url(" + dataUrl + ")"
+				}
+			})
+		})
+		wm.init()
+	},
+
 })
 
diff --git a/public/assets/javascripts/ui/editor/LightControl.js b/public/assets/javascripts/ui/editor/LightControl.js
index 20c3577..93d97ed 100644
--- a/public/assets/javascripts/ui/editor/LightControl.js
+++ b/public/assets/javascripts/ui/editor/LightControl.js
@@ -3,6 +3,7 @@ var LightControl = View.extend({
 	el: ".lightcontrol",
 	
 	events: {
+		"mousedown": "stopPropagation",
 	},
 
 	toggle: function(){
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 1ffe7b8..f9eaad5 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -39,7 +39,7 @@ var MediaEditor = FormView.extend({
 	
 	togglePaused: function(state){
 		var state = this.scenery.toggle(state)
-		this.$playButton.toggleClass("playing", ! state)
+		this.$playButton.toggleClass("paused", ! state)
 	},
 	
 	pick: function(scenery) {
@@ -72,7 +72,7 @@ var MediaEditor = FormView.extend({
 				this.$(".video").show()
 				this.$(".image").hide()
 				
-				this.$playButton.toggleClass("paused", 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)
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index ffbd935..474d4c1 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -5,6 +5,9 @@ var WallpaperPicker = View.extend({
 	events: {
 		"click .paper1": 'pick',
 	},
+	
+	initialize: function(){
+	},
 
 	toggle: function(){
     this.$el.toggleClass("active");
@@ -18,3 +21,91 @@ var WallpaperPicker = View.extend({
 	}
 
 })
+
+// pattern
+// scale
+// foreground
+// background
+
+var WallpaperManager = function () {
+
+	var image = new Image ()
+	var imageData
+	var w, h
+	
+	this.masks = []
+	
+	this.init = function(){
+		this.load()
+	}
+	
+	this.load = function(){
+		image.onload = function(){
+			this.loadImageData()
+			this.buildMasks()
+			app.tube('wallpaper-ready')
+		}.bind(this)
+		
+		image.src = "/assets/img/palette.gif"
+	}
+	
+	this.loadImageData = function(){
+		var canvas = document.createElement('canvas')
+		var ctx = canvas.getContext('2d')
+		w = canvas.width = image.naturalWidth
+		h = canvas.height = image.naturalHeight
+		ctx.drawImage(image, 0,0)
+		imageData = ctx.getImageData(0,0,image.naturalWidth,image.naturalHeight).data
+	}
+	
+	this.buildMasks = function(){
+		var mask
+		for (var y = 0; y < 6; y++) {
+			for (var x = 0; x < 16; x++) {
+				mask = this.buildMask(x,y)
+				this.masks.push(mask)
+			}
+		}
+	}
+	
+	this.buildMask = function(x,y){
+		// add the offset of the top-left swatch
+		x = (x * 18) + 15
+		y = (y * 16) + 5
+
+		var mask = new Array(64)
+		var t = 0
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				t = ( w*(y+j) + x+i ) * 4
+				mask[j*8+i] = imageData[t] === 0
+			}
+		}
+		return mask
+	}
+	
+	this.buildSwatches = function(black, white, scale) {
+		var swatches = this.masks.map(function(mask){
+			return this.buildSwatch(mask,black,white,scale)
+		}.bind(this))
+		
+		return swatches
+	}
+	
+	this.buildSwatch = function(mask,black,white,scale){
+		black = 'rgba(' + black.join(',') + ')'
+		white = 'rgba(' + white.join(',') + ')'
+		var canvas = document.createElement("canvas")
+		canvas.width = 8*scale
+		canvas.height = 8*scale
+		var ctx = canvas.getContext('2d')
+		for (var i = 0; i < 8; i++) {
+			for (var j = 0; j < 8; j++) {
+				ctx.fillStyle = mask[j*8+i] ? black : white
+				ctx.fillRect(i*scale, j*scale, scale, scale)
+			}
+		}
+		return canvas
+	}
+	
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/lib/Router.js b/public/assets/javascripts/ui/lib/Router.js
index 214603c..d27654a 100644
--- a/public/assets/javascripts/ui/lib/Router.js
+++ b/public/assets/javascripts/ui/lib/Router.js
@@ -10,6 +10,10 @@ var Router = View.extend({
 				path[i] = null
 			}
 		}
+		
+		if (path[path.length-1] == null) {
+			path.pop()
+		}
 
 		for (var route in this.routes) {
 			var routePath = route.split("/")
diff --git a/server/index.js b/server/index.js
index 038b184..71cd862 100644
--- a/server/index.js
+++ b/server/index.js
@@ -140,6 +140,8 @@ site.route = function () {
 	app.post('/api/media/upload', middleware.ensureAuthenticated, api.media.upload)
 	app.delete('/api/media/destroy', middleware.ensureAuthenticated, api.media.destroy)
 
+	app.get('/test/*', middleware.ensureAuthenticated, middleware.ensureIsStaff, views.modal)
+
 }
 
 
diff --git a/views/modal.ejs b/views/modal.ejs
index 6ed3fa1..7ca869c 100644
--- a/views/modal.ejs
+++ b/views/modal.ejs
@@ -8,7 +8,7 @@
 	<div class="rapper page" style="height: 100%;">
 	[[ include partials/header ]]
 
-	<div style="height: 70%; clear: both;"></div>
+	<div style="height: 70%; clear: both;" id="content"></div>
 
 	[[ include partials/confirm-modal ]]	
 	[[ include partials/sign-in ]]	
-- 
cgit v1.2.3-70-g09d2


From 5a5dc68dd2f9ae198864d7f25b4c9840dbe14d77 Mon Sep 17 00:00:00 2001
From: Jules Laplace <jules@okfoc.us>
Date: Tue, 15 Jul 2014 17:45:10 -0400
Subject: rudimentary wallpaper picking

---
 .../assets/javascripts/rectangles/models/wall.js   |  7 ++++
 .../javascripts/ui/editor/WallpaperPicker.js       | 40 ++++++++++++++++++++--
 public/assets/stylesheets/app.css                  | 11 ++++++
 views/controls/editor/wallpaper.ejs                | 12 ++-----
 4 files changed, 58 insertions(+), 12 deletions(-)

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js
index cc298c6..7ff4ccb 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 if (Scenery.nextWallpaper) {
+					base.wallpaper()
+				}
 				else {
 					app.controller.hideExtras()
 				}
@@ -112,6 +115,10 @@ window.Wall = (function(){
 		this.$walls && this.$walls.css("background-color", color)
 	}
 	
+	Wall.prototype.wallpaper = function(){
+		this.$walls.css("background-image", Scenery.nextWallpaper)
+	}
+	
 	Wall.prototype.siblings = function(){
 		var base = this
 		var match = base.side | base.half_side
diff --git a/public/assets/javascripts/ui/editor/WallpaperPicker.js b/public/assets/javascripts/ui/editor/WallpaperPicker.js
index 474d4c1..cb1e361 100644
--- a/public/assets/javascripts/ui/editor/WallpaperPicker.js
+++ b/public/assets/javascripts/ui/editor/WallpaperPicker.js
@@ -3,10 +3,24 @@ var WallpaperPicker = View.extend({
 	el: ".wallpaper",
 	
 	events: {
-		"click .paper1": 'pick',
+		"click .swatch": 'pick',
 	},
 	
 	initialize: function(){
+		var wm = new WallpaperManager()
+		app.on('wallpaper-ready', function(){
+			var black = [0,0,0,1.0]
+			var white = [255,255,255,1.0]
+			var swatches = wm.buildSwatches(black, white, 2)
+			swatches.forEach(function(swatch){
+				var dataUrl = swatch.toDataURL()
+				var span = document.createElement('span')
+				span.style.backgroundImage = "url(" + dataUrl + ")"
+				span.className = "swatch"
+				this.$el.append(span)
+			}.bind(this))
+		}.bind(this))
+		wm.init()
 	},
 
 	toggle: function(){
@@ -16,8 +30,28 @@ var WallpaperPicker = View.extend({
 	},
 	
 	pick: function(e){
-    $("body").toggleClass("pastePaper");
-    $(e.currentTarget).toggleClass("active");
+    var $swatch = $(e.currentTarget)
+		var $floatingSwatch = $(".floatingSwatch")
+
+    $floatingSwatch.css('background-image', $swatch.css('background-image'))
+
+		Scenery.nextWallpaper = $swatch.css('background-image')
+
+		setTimeout(function(){
+			function _followCursor(e) {
+				$floatingSwatch.css({
+					top: (e.pageY + 10) + 'px',
+					left: (e.pageX + 10) + 'px'
+				});
+			}
+			$(window).on('mousemove', _followCursor);
+			$(window).one('click', function () {
+				$(window).off('mousemove', _followCursor);
+				$floatingSwatch.hide();
+			});
+			$floatingSwatch.show()
+			_followCursor(e);
+		})
 	}
 
 })
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index a2d2120..2583284 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -58,6 +58,17 @@ a{
 
 }
 
+.floatingSwatch {
+	width: 50px;
+	height: 50px;
+	position:absolute;
+	border: 2px solid black;
+	box-shadow: -2px 2px #fff;
+	display: none;
+	z-index: 10;
+	pointer-events: none;
+}
+
 .ants {
 	max-width:320px;
 	height: auto;
diff --git a/views/controls/editor/wallpaper.ejs b/views/controls/editor/wallpaper.ejs
index 82460b7..144e419 100644
--- a/views/controls/editor/wallpaper.ejs
+++ b/views/controls/editor/wallpaper.ejs
@@ -1,10 +1,4 @@
 <div class="vvbox wallpaper">
-	<span class="paper1"></span>
-	<span class="paper2"></span>
-	<span class="paper3"></span>
-	<span class="paper4"></span>
-	<span class="paper5"></span>
-	<span class="paper6"></span>
-	<span class="paper7"></span>
-	<span class="paper8"></span>
-</div>
\ No newline at end of file
+</div>
+
+<div class="floatingSwatch"></div>
-- 
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/ui')

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/ui')

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


From f20841988ccd27780d3801e4a6c32bf9afcc9368 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Thu, 17 Jul 2014 03:04:28 -0400
Subject: conversions between feet/meters/pixels

---
 public/assets/javascripts/app.js                   |   9 +-
 .../javascripts/mx/extensions/mx.movements.js      |   2 +-
 .../assets/javascripts/ui/builder/BuilderInfo.js   | 112 +++++++++++++++++++--
 .../assets/javascripts/ui/builder/BuilderView.js   |   1 +
 public/assets/javascripts/util.js                  |   1 -
 public/assets/stylesheets/app.css                  |   3 +-
 server/lib/schemas/Layout.js                       |   2 +-
 views/controls/builder/info.ejs                    |  25 ++---
 8 files changed, 123 insertions(+), 32 deletions(-)

(limited to 'public/assets/javascripts/ui')

diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js
index 0b441c7..1419d1d 100644
--- a/public/assets/javascripts/app.js
+++ b/public/assets/javascripts/app.js
@@ -17,8 +17,6 @@ else {
 
 var scene, cam, map;
 
-var viewHeight = window.viewHeight || 186
-
 var app = new function(){}
 
 app.mode = { editor: false, builder: false }
@@ -99,4 +97,11 @@ app.position = function(obj){
 	return pos
 }
 
+app.defaults = {
+	viewHeight: window.viewHeight = 186,
+	units: app.units = "ft",
+	footResolution: 36,
+	meterResolution: 100,
+}
+
 document.addEventListener('DOMContentLoaded', app.init)
diff --git a/public/assets/javascripts/mx/extensions/mx.movements.js b/public/assets/javascripts/mx/extensions/mx.movements.js
index f176e8b..191088f 100644
--- a/public/assets/javascripts/mx/extensions/mx.movements.js
+++ b/public/assets/javascripts/mx/extensions/mx.movements.js
@@ -1,6 +1,6 @@
 
 
-MX.Movements = function (cam, viewHeight) {
+MX.Movements = function (cam) {
 
 	var moveForward,
 			moveLeft,
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 53a122d..9bbd385 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -5,28 +5,35 @@ var BuilderInfo = View.extend({
 	events: {
 		"keydown": 'stopPropagation',
 		"change [name=x]": 'changePosition',
-		"change [name=z]": 'changePosition',
+		"change [name=y]": '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',
+		"change [name=viewHeight]": 'changeViewHeight',
 	},
 	
 	initialize: function(opt){
 		this.parent = opt.parent
 		this.$x = this.$("[name=x]")
-		this.$z = this.$("[name=z]")
+		this.$y = this.$("[name=y]")
 		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]")
+		this.$viewHeight = this.$("[name=viewHeight]")
+		this.$unitName = this.$(".unitName")
 		app.on("builder-pick-room", this.pick.bind(this))
 		app.on("builder-destroy-room", this.destroy.bind(this))
 	},
+	
+	load: function(data){
+		this.$viewHeight.unitVal( data.viewHeight || app.defaults.viewHeight )
+		this.$units.val( "ft" )
+		this.$unitName.html( "ft" )
+		this.$resolution.val( app.defaults.footResolution )
+	},
 
 	toggle: function(state){
 		this.$el.toggleClass("active", state)
@@ -44,11 +51,11 @@ var BuilderInfo = View.extend({
 	
 	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 )
+		this.$width.unitVal( room.rect.x.length() )
+		this.$depth.unitVal( room.rect.y.length() )
+		this.$height.unitVal( room.height )
+		this.$x.unitVal( room.rect.x.a )
+		this.$y.unitVal( room.rect.y.a )
 
 		console.log(room)
 	},
@@ -59,12 +66,95 @@ var BuilderInfo = View.extend({
 	},
 	
 	changeDimensions: function(){
+// 		this.$width.unitVal( room.rect.x.length() )
+// 		this.$depth.unitVal( room.rect.y.length() )
+// 		this.$height.unitVal( room.height )
 	},
 	
 	changeUnits: function(){
+		app.units = this.$units.val()
+		this.$('.units').resetUnitVal()
 	},
 	
-	changeCameraHeight: function(){
+	changeViewHeight: function(){
+ 		window.viewHeight = this.$viewHeight.unitVal( )
 	},
 
 })
+
+$.fn.resetUnitVal = function(){
+	this.each(function(){
+		var n = $(this).data("px")
+		$(this).unitVal(n)
+	});
+}
+
+$.fn.unitVal = function(n){
+	var s
+	if (typeof n === "undefined") {
+		s = $(this).val()
+		n = stringToMeasurement( s )
+	}
+	s = measurementToString( n )
+	$(this).val( s ).data("px", n)
+	return n
+}
+
+function measurementToString( n ) {
+	var s, ft, inch
+	switch (app.units) {
+		case 'm':
+			s = round(n/36 * 0.3048 * 100) / 100 + " m"
+			break
+		case 'ft':
+			ft = floor(n / 36)
+			inch = abs(round((n % 36) / 3))
+			s = ft + "'"
+			if (inch > 0) {
+				s += " " + inch + '"'
+			}
+			break
+		case 'px':
+		default:
+			s = round(n) + " px"
+			break
+	}
+	return s
+}
+function stringToMeasurement( s ) {
+	var ft, inch, ft_in, type
+	if (s.indexOf("'") !== -1 || s.indexOf('"') !== -1 || s.indexOf('ft') !== -1) {
+		ft_in = s.match(/[0-9.]+/g)
+		if (ft_in.length >= 2) {
+			ft = parseFloat( ft_in[0] )
+			inch = parseFloat( ft_in[1] )
+		}
+		else if (ft_in.length == 1) {
+			if (s.indexOf('"') !== -1) {
+				ft = 0
+				inch = parseFloat( ft_in[0] )
+			}
+			else {
+				ft = parseFloat( ft_in[0] )
+				inch = 0
+			}
+		}
+		else {
+			ft = inch = 0
+		}
+		n = ft * 36 + inch * 3
+	}
+	else if (type === "m") {
+		n = parseFloat(s.match(/[0-9.]+/)) * 36 / 0.3048
+	}
+	else if (s.indexOf("px") !== -1) {
+		n = parseFloat(s.match(/[0-9.]+/))
+	}
+	else {
+		n = abs( stringToMeasurement( s + app.units ) )
+	}
+	if (s.indexOf('-') !== -1) {
+		n *= -1
+	}
+	return n
+}
\ No newline at end of file
diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js
index 7a92738..555cd58 100644
--- a/public/assets/javascripts/ui/builder/BuilderView.js
+++ b/public/assets/javascripts/ui/builder/BuilderView.js
@@ -26,6 +26,7 @@ var BuilderView = View.extend({
 	
 	ready: function(data){
 		this.settings.load(data)
+		this.info.load(data)
 	},
 	
 	hideExtras: function(){
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index b58da1f..58dcc3a 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -176,4 +176,3 @@ function bitcount(v) {
   v = (v & 0x33333333) + ((v >>> 2) & 0x33333333);
   return ((v + (v >>> 4) & 0xF0F0F0F) * 0x1010101) >>> 24;
 }
-
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 3e6dced..61a4fa9 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1252,10 +1252,11 @@ input[type="range"]::-webkit-slider-thumb {
 }
 .setting.number.halflines input[type=text] {
 	float: left;
-	width: 50px;
+	width: 60px;
 }
 .setting.number.halflines label:nth-of-type(2) {
 	text-align: center;
+	width: 30px;
 }
 
 .setting.number input[type=text] {
diff --git a/server/lib/schemas/Layout.js b/server/lib/schemas/Layout.js
index 33a5262..e3f2616 100644
--- a/server/lib/schemas/Layout.js
+++ b/server/lib/schemas/Layout.js
@@ -25,7 +25,7 @@ var LayoutSchema = new mongoose.Schema({
 	},
 	rooms: [mongoose.Schema.Types.Mixed],
 	startPosition: mongoose.Schema.Types.Mixed,
-	cameraHeight: { type: Number, default: 180 },
+	viewHeight: { type: Number },
 	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 2cc8132..d92d34c 100644
--- a/views/controls/builder/info.ejs
+++ b/views/controls/builder/info.ejs
@@ -1,40 +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">
+		<input type="text" class="units" name="width" id="room-width">
 	</div>
 	<div class="setting number">
 		<label for="room-depth">depth</label>
-		<input type="text" name="depth" id="room-depth">
+		<input type="text" class="units" 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">
+		<input type="text" class="units" 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">
+		<input type="text" class="units" name="x" id="room-x">
+		<label for="room-y">y</label>
+		<input type="text" class="units" name="y" id="room-y">
 	</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>
+			<option value="ft">foot</option>
+			<option value="m">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">
+		<label for="viewHeight">camera height</label>
+		<input type="text" class="units" name="viewHeight" id="viewHeight">
 	</div>
 
 </div>
-- 
cgit v1.2.3-70-g09d2