defer yt

9 files changed, 88 insertions, 150 deletions

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>
 		[[ }) ]]