Merge branch 'master' of github.com:okfocus/vvalls

16 files changed, 435 insertions, 26 deletions

diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js
index 575e9c0..b8557bf 100644
--- a/public/assets/javascripts/mx/primitives/mx.image.js
+++ b/public/assets/javascripts/mx/primitives/mx.image.js
@@ -12,7 +12,7 @@ MX.Image = MX.Object3D.extend({
 		this.backface = ops.backface || false
 			
 		ops.className && this.el.classList.add(ops.className)
-		this.backface && this.el.classList.add("backface-visible")		
+		this.backface && this.el.classList.add("backface-visible")
 		this.el.classList.add("image")
 		this.el.classList.add("mx-scenery")
 
diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js
new file mode 100644
index 0000000..75286d9
--- /dev/null
+++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js
@@ -0,0 +1,125 @@
+MX.Soundcloud = MX.Object3D.extend({
+  init: function (ops) {
+  
+  	this.type = "Soundcloud"
+		this.media = ops.media
+    this.width = 0
+    this.height = 0
+		this.x = ops.x || 0
+		this.y = ops.y || 0
+		this.z = ops.z || 0
+		this.scale = ops.scale || 1
+		this.backface = ops.backface || false
+			
+		ops.className && this.el.classList.add(ops.className)
+		this.backface && this.el.classList.add("backface-visible")
+		this.el.classList.add("audio")
+		this.el.classList.add("mx-scenery")
+
+		this.el.style.backgroundRepeat = 'no-repeat'
+		this.paused = true
+
+  	this.ops = ops
+  },
+
+  load: function(ops){
+    if (ops) {
+      ops = this.ops = defaults(ops, this.ops)
+    }
+    else {
+      ops = this.ops
+    }
+
+  	this.width = ops.media.width
+  	this.height = ops.media.height
+
+  	var tag = Parser.lookup.soundcloud.tag(ops.media)
+  	var $iframe = $(tag)
+  	var iframe = $iframe[0]
+  	$iframe.css('z-index', '-1')
+  	this.el.appendChild( iframe )
+
+  	var overlay = this.overlay = document.createElement("div")
+  	overlay.style.width = "100%"
+  	overlay.style.height = "100%"
+  	overlay.style.position = "absolute"
+  	overlay.style.top = "0"
+  	overlay.style.left = "0"
+  	overlay.style.zIndex = "2"
+  	overlay.className = "overlay"
+  	this.el.appendChild(overlay)
+  	
+  	this.player = SC.Widget( iframe )
+  	this.player.setVolume(80)
+  	
+  	this.duration = 0
+  	
+  	this.player.bind(SC.Widget.Events.READY, this.ready.bind(this))
+//   	this.player.bind(SC.Widget.Events.LOAD_PROGRESS, this.loadProgress.bind(this))
+//   	this.player.bind(SC.Widget.Events.PLAY_PROGRESS, this.playProgress.bind(this))
+  	this.player.bind(SC.Widget.Events.PLAY, this.didPlay.bind(this))
+  	this.player.bind(SC.Widget.Events.PAUSE, this.didPause.bind(this))
+  	this.player.bind(SC.Widget.Events.FINISH, this.finished.bind(this))
+  },
+  
+  ready: function(){
+		this.seek( this.media.keyframe || 0 )
+
+  	if (this.media.autoplay) {
+  	  this.play()
+  	}
+
+  	this.player.getDuration(function(duration){
+  	  this.duration = duration
+  	}.bind(this))
+  },
+  
+  play: function(){
+    this.player.play()
+  },
+  
+  pause: function(){
+    this.player.pause()
+  },
+
+  toggle: function(state){
+    if (typeof state === "boolean") {
+      if (state) this.play()
+      else this.pause()
+    }
+    else {
+      this.player.toggle()
+    }
+  },
+  
+  seek: function(n){
+		if (n < 1) {
+			n = n * this.duration
+		}
+		this.player.seekTo(n)
+  },
+
+  setLoop: function(state){
+		this.media.loop = state
+  },
+  
+  didPlay: function(){
+    this.paused = false
+  },
+  
+  didPause: function(){
+    this.paused = true
+  },
+  
+  finished: function(){
+  	console.log("soundcloud finished")
+  	if (this.media.loop) {
+  		this.seek(0)
+  		this.play()
+  	}
+  	else if (this.bound) {
+  		$(".playButton").removeClass('playing')
+  	}
+  },
+  
+})
diff --git a/public/assets/javascripts/rectangles/engine/map/ui_editor.js b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
index c838b8b..d1b0b89 100644
--- a/public/assets/javascripts/rectangles/engine/map/ui_editor.js
+++ b/public/assets/javascripts/rectangles/engine/map/ui_editor.js
@@ -42,6 +42,7 @@ Map.UI.Editor = function(map){
 		cursor.y.div(map.dimensions.b).sub(0.5).mul(map.dimensions.b / map.zoom).sub(map.center.b)
 
 		if (e.ctrlKey || e.which === 3) {
+		  if (Rooms.regions.length == 0) return
 			cursor.quantize(1/map.zoom)
 			map.center.a = cursor.x.a
 			map.center.b = -cursor.y.a
@@ -226,7 +227,32 @@ Map.UI.Editor = function(map){
 			return r.focused // = r.rect.contains(cursor.x.a, cursor.y.a)
 		})
 		
-		if (intersects.length) {
+		if (intersects.length && window.heightIsGlobal) {
+		  var rooms = Rooms.values()
+		  wheelState = wheelState || rooms[0].height
+		  var height = clamp( ~~(rooms[0].height + deltaY * 2), height_min, height_max )
+		  rooms.forEach(function(room){
+		    room.height = height
+		  })
+		  
+		  app.tube("builder-pick-room", intersects[0])
+
+      clearTimeout(wheelTimeout)
+			wheelTimeout = setTimeout(function(){
+        UndoStack.push({
+          type: "update-rooms-height",
+          undo: wheelState,
+          redo: height
+        })
+        Rooms.rebuild()
+
+        // TODO: watch individual scenery object here
+        Minotaur.watch( app.router.editorView.settings )
+
+        wheelState = null
+			}, 250)
+		}
+		else if (intersects.length) {
 			wheelState = wheelState || intersects[0].copy()
 			
 			intersects[0].height = clamp( ~~(intersects[0].height + deltaY * 2), height_min, height_max )
diff --git a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
index 5686aba..46c1d7f 100644
--- a/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
+++ b/public/assets/javascripts/rectangles/engine/rooms/_rooms.js
@@ -81,6 +81,10 @@
 		base.forEach = function(f){
 			return base.values().forEach(f)
 		}
+
+		base.some = function(f){
+			return base.values().some(f)
+		}
 	
 		base.map = function(f){
 			return base.values().map(f)
diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
index 436712a..d03e0e1 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js
@@ -27,9 +27,14 @@ var Scenery = new function(){
 				scene_media = new Scenery.types.video (opt)
 				break
 			
+			case 'soundcloud':
+			  if (is_mobile) return
+				scene_media = new Scenery.types.audio (opt)
+				break
+			
 			case 'text':
 			  scene_media = new Scenery.types.text (opt)
-			  scene_media.focused = true
+			  scene_media.focused = !! opt.newMedia
 			  break
 		}
 		base.list[scene_media.id] = scene_media
@@ -37,6 +42,7 @@ var Scenery = new function(){
 	}
 	
 	base.addNextToWall = function(opt){
+	  opt.newMedia = true
 		opt.media = base.nextMedia
 		opt.index = opt.index || 0
 		var scene_media = base.add(opt)
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js
new file mode 100644
index 0000000..82f984e
--- /dev/null
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js
@@ -0,0 +1,73 @@
+
+Scenery.types.audio = Scenery.types.base.extend(function(base){
+
+	var exports = {
+	
+	  type: 'audio',
+	
+		init: function(opt){
+
+			opt.scale = 1.0
+
+			base.init.call(this, opt)
+
+			this.build()
+			this.bind()
+			this.place(opt)
+		},
+
+		build: function(){
+			this.mx = new MX.Soundcloud({
+				scale: this.scale,
+				media: this.media,
+				y: this.scale * this.media.height/2,
+				backface: false,
+			})
+			scene.add( this.mx )
+			this.mx.load()
+		},
+
+		serialize: function(){
+			var data = base.serialize.call(this)
+			return data
+		},
+	
+		deserialize: function(data){
+			this.mx.move(data.position)
+			this.mx.ops.width = data.dimensions.a
+			this.mx.ops.height = data.dimensions.b
+      this.dimensions.deserialize(data.dimensions)
+		},
+
+		play: function(){
+			this.mx.play()
+		},
+		
+		pause: function(){
+			this.mx.pause()
+		},
+		
+		toggle: function(){
+		  this.mx.toggle()
+		},
+
+		paused: function(){
+			return this.mx.paused
+		},
+		
+		muted: function(){
+			return this.mx.muted
+		},
+		
+		seek: function(n){
+			this.mx.seek(n)
+		},
+	
+    setLoop: function(shouldLoop){
+			this.mx.setLoop(shouldLoop)
+		},
+		
+	}
+	
+	return exports
+})
diff --git a/public/assets/javascripts/rectangles/engine/scenery/undo.js b/public/assets/javascripts/rectangles/engine/scenery/undo.js
index 6ad9e0d..8b85d02 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/undo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/undo.js
@@ -111,7 +111,17 @@
         Rooms.rebuild()
       },
     },
-    
+   
+    {
+      type: "update-rooms-height",
+      undo: function(state){
+        var rooms = Rooms.values()
+        rooms.forEach(function(room){
+          room.height = state
+        })
+      },
+    },
+     
     //
 
     {
diff --git a/public/assets/javascripts/ui/builder/BuilderInfo.js b/public/assets/javascripts/ui/builder/BuilderInfo.js
index 7606361..9a7dbf9 100644
--- a/public/assets/javascripts/ui/builder/BuilderInfo.js
+++ b/public/assets/javascripts/ui/builder/BuilderInfo.js
@@ -16,6 +16,7 @@ var BuilderInfo = View.extend({
 		"change [name=units]": 'changeUnits',
 		"keydown [name=viewHeight]": 'enterViewHeight',
 		"change [name=viewHeight]": 'changeViewHeight',
+		"change [name=heightGlobal]": 'changeHeightGlobal',
 		"click [data-role=destroy-room]": 'destroy',
 	},
 	
@@ -31,6 +32,7 @@ var BuilderInfo = View.extend({
 		this.$unitName = this.$(".unitName")
 		this.$noSelection = this.$(".no-selection")
 		this.$settings = this.$(".setting")
+		this.$heightGlobalCheckbox = this.$("[name=heightGlobal]")
 		app.on("builder-pick-room", this.pick.bind(this))
 		app.on("builder-destroy-room", this.hide.bind(this))
 		app.on("builder-pick-nothing", this.deselect.bind(this))
@@ -40,6 +42,18 @@ var BuilderInfo = View.extend({
 		this.$viewHeight.unitVal( window.viewHeight = data.viewHeight || app.defaults.viewHeight )
 		this.$units.val( "ft" )
 		this.$unitName.html( "ft" )
+
+    if (Rooms.regions.length == 0) {
+      this.changeHeightGlobal(true)
+    }
+    else {
+      var rooms = Rooms.values()
+      var height = rooms[0].height
+      var differentHeights = Rooms.some(function(room){
+        return room.height != height
+      })
+      this.changeHeightGlobal( ! differentHeights )
+    }
 	},
 
 	toggle: function(state){
@@ -118,7 +132,12 @@ var BuilderInfo = View.extend({
 	},
 	changeHeight: function(e){
 		e.stopPropagation()
-		this.room.height = this.$height.unitVal()
+		var height = this.room.height = this.$height.unitVal()
+		if (window.heightIsGlobal) {
+		  Rooms.forEach(function(room){
+		    room.height = height
+		  })
+		}
     Rooms.rebuild()
 	},
 	changeX: function(e){
@@ -141,5 +160,13 @@ var BuilderInfo = View.extend({
   changeViewHeight: function(){
  		window.viewHeight = this.$viewHeight.unitVal( )
 	},
+	changeHeightGlobal: function(state){
+	  if (typeof state == "boolean") {
+      this.$heightGlobalCheckbox.prop("checked", state)
+      window.heightIsGlobal = state
+      return
+	  }
+	  window.heightIsGlobal = this.$heightGlobalCheckbox.prop("checked")
+	},
 
 })
diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js
index 3773366..4a2f712 100644
--- a/public/assets/javascripts/ui/editor/EditorView.js
+++ b/public/assets/javascripts/ui/editor/EditorView.js
@@ -50,7 +50,7 @@ var EditorView = View.extend({
 	
 	readyLayout: function(data){
 		data.isNew = true
-		$('#help-button').trigger("click")
+		// $('#help-button').trigger("click")
 		this.ready(data)
 	},
 	
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index de93f6e..6068c48 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -51,7 +51,7 @@ var MediaEditor = FormView.extend({
 	},
 	
 	pick: function(scenery) {
-		if (this.scenery) {
+		if (this.scenery && scenery !== this.scenery) {
 			this.unbind()
 		}
 
@@ -67,22 +67,24 @@ var MediaEditor = FormView.extend({
 		
 		// console.log(media)
 		
-		this.$name.val(media.title || filenameFromUrl(media.url) )
+		this.$name.val(media.title) // || filenameFromUrl(media.url) )
 		this.$description.val(media.description)
 		this.setDimensions()
 		this.$units.val( "ft" )
 		
 		switch (media.type) {
 			case "image":
-				this.$(".image").show()
 				this.$(".video").hide()
+				this.$(".audio").hide()
+				this.$(".image").show()
 				break
 
 			case "youtube":
 			case "vimeo":
 			case "video":
-				this.$(".video").show()
 				this.$(".image").hide()
+				this.$(".audio").hide()
+				this.$(".video").show()
 				
 				this.$playButton.toggleClass("paused", ! this.scenery.paused())
 				this.$autoplay.prop('checked', !! media.autoplay)
@@ -90,6 +92,15 @@ var MediaEditor = FormView.extend({
 				this.$mute.prop('checked', !! media.mute)
 				this.$keyframe.val( Number(media.keyframe || 0) )
 				break
+			
+			case "soundcloud":
+				this.$(".image").hide()
+				this.$(".video").hide()
+				this.$(".audio").show()
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
+				this.$autoplay.prop('checked', !! media.autoplay)
+				this.$loop.prop('checked', !! media.loop)
+			  break
 		}
 	},
 
@@ -161,6 +172,7 @@ var MediaEditor = FormView.extend({
 	
 	unbind: function(){
 	  if (this.scenery) {
+	    this.scenery.focused = false
 	    if (this.tainted && this.scenery.media) {
         this.scenery.media.title = this.$name.val()
         this.scenery.media.description = this.$description.val()
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index 9593ab7..029252d 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -16,13 +16,14 @@ var MediaViewer = ModalView.extend({
 		'click #randomize': "randomize",
 		'click .mediaContainer': "pick",
 		'click .viewMore': "load",
+		'keydown #tumblr-url': 'enterTumblrUrl',
 	},
 	
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
 
-		this.$myMedia = this.$(".myMedia")
+		this.$myMedia = this.$(".myMedia").addClass('active')
 		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
 
@@ -37,12 +38,14 @@ var MediaViewer = ModalView.extend({
 		this.$deleteMedia = this.$("#deleteMedia")
 		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
+		
+		this.$tumblrUrl = this.$("#tumblr-url")
   },
 
 	wallpaperToggle: function(){
     this.$wallpaperMedia.addClass("active")
     this.$foundMedia.addClass("inactive")
-    this.$myMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive").removeClass('active')
     this.$("a").removeClass("active")
     this.$foundToggle.addClass("active")
 	},
@@ -50,7 +53,7 @@ var MediaViewer = ModalView.extend({
 	foundToggle: function(){
     this.$wallpaperMedia.removeClass("active")
     this.$foundMedia.addClass("active")
-    this.$myMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive").removeClass('active')
     this.$("a").removeClass("active")
     this.$foundToggle.addClass("active")
 	},
@@ -58,7 +61,7 @@ var MediaViewer = ModalView.extend({
 	userToggle: function(){
     this.$wallpaperMedia.removeClass("active")
     this.$foundMedia.removeClass("active")
-    this.$myMedia.removeClass("inactive")
+    this.$myMedia.removeClass("inactive").addClass('active')
     this.$("a").removeClass("active")
     this.$userToggle.addClass("active")
 	},
@@ -120,7 +123,7 @@ var MediaViewer = ModalView.extend({
 	},
 	
 	randomize: function(){
-	  var $divs = this.$myMediaContainer.find(".mediaContainer").toArray()
+	  var $divs = this.$(".active .container").find(".mediaContainer").toArray()
 	  if ($divs.length < 3) {
 	    $divs = $divs.concat( this.$foundMediaContainer.find(".mediaContainer").toArray() )
 	  }
@@ -190,6 +193,10 @@ var MediaViewer = ModalView.extend({
 				image.src = media.url
 				image.load()
 				break
+			
+			case 'soundcloud':
+				image.src = media.thumbnail
+			  break
 		}
 		
 		$span.data("media", media)
@@ -250,6 +257,7 @@ var MediaViewer = ModalView.extend({
 
 		switch (media.type) {
 			case "video":
+			case "soundcloud":
 				$floatingImg.attr('src', '/assets/img/playbutton.png')
 				break
 			
@@ -285,4 +293,17 @@ var MediaViewer = ModalView.extend({
 		$ants.addClass('edit')
 		_followCursor(e)
 	},
+	
+	enterTumblrUrl: function(e){
+		e.stopPropagation()
+		if (e.keyCode !== 13) { return }
+		var url = this.$tumblrUrl.val()
+		Parser.tumblr(url, function(media_list){
+			console.log(media_list)
+			this.$foundMediaContainer.empty()
+			media_list.reverse().forEach(function(media){
+				this.add(media, this.$foundMediaContainer)
+			}.bind(this))
+		}.bind(this))
+	},
 })
diff --git a/public/assets/javascripts/ui/editor/TextEditor.js b/public/assets/javascripts/ui/editor/TextEditor.js
index d897f91..53d5b9f 100644
--- a/public/assets/javascripts/ui/editor/TextEditor.js
+++ b/public/assets/javascripts/ui/editor/TextEditor.js
@@ -96,6 +96,7 @@ var TextEditor = FormView.extend({
 	
 	unbind: function(){
 	  if (this.scenery) {
+	    this.scenery.focused = false
       if (this.tainted) {
         Minotaur.watch( app.router.editorView.settings )
       }
@@ -119,7 +120,7 @@ var TextEditor = FormView.extend({
   },
   
   pick: function(scenery){
-		if (this.scenery) {
+		if (this.scenery && scenery !== this.scenery) {
 			this.unbind()
 		}
 
diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js
index d68f58b..411f425 100644
--- a/public/assets/javascripts/ui/lib/Parser.js
+++ b/public/assets/javascripts/ui/lib/Parser.js
@@ -115,7 +115,6 @@ var Parser = {
 			return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>'
 		}
 	},
-	/*
 	{
 		type: 'soundcloud',
 		regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i,
@@ -127,24 +126,27 @@ var Parser = {
 					+ '&client_id=' 
 					+ '0673fbe6fc794a7750f680747e863b10',
 				success: function(result) {
+				  // console.log(result)
 					done({
 						url: url,
 						type: "soundcloud",
 						token: result.id,
-						thumbnail: "",
-						title: "",
-						width: 100,
-						height: 100,
+						thumbnail: result.artwork_url || result.user.avatar_url,
+						title: result.user.username + " - " + result.title,
+						width: 166,
+						height: 166,
 					})
 				}
 			});
 		},
 		tag: function (media) {
-			return '<iframe width="400" height="166" scrolling="no" frameborder="no"' +
+			return '<iframe width="166" height="166" scrolling="no" frameborder="no"' +
 					'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + media.token +
 					'&amp;color=ff6600&amp;auto_play=false&amp;show_artwork=true"></iframe>'
 		}
-	}, {
+	},
+  /*
+	{
 		type: 'link',
 		regex: /^http.+/i,
 		fetch: function(url, done) {
@@ -165,6 +167,82 @@ var Parser = {
 	*/
 	],
 
+  tumblr: function(url, cb){
+    var domain = url.replace(/^https?:\/\//,"").split("/")[0]
+    if (domain.indexOf(".") == -1) {
+    	domain += ".tumblr.com"
+    }
+    $.ajax({
+      type: 'GET', 
+      url: "http://" + domain + "/api/read",
+      dataType: "jsonp",
+      data: {
+        format: "json",
+      },
+      success: function(data){
+        var media_list = []
+        var blog = data.tumblelog
+        
+        data.posts.forEach(parse)
+        cb(media_list)
+
+        function parse(post){
+          var media, caption, url
+          switch (post.type) {
+            case 'photo':
+              caption = stripHTML(post['photo-caption'])
+              if (post.photos.length) {
+                post.photos.forEach(function(photo){
+                  var media = {
+                    url: photo['photo-url-1280'],
+                    type: "image",
+                    token: "",
+                    thumbnail: photo['photo-url-500'],
+                    description: caption,
+                    width: parseInt(photo.width),
+                    height: parseInt(photo.height),
+                  }
+                  media_list.push(media)
+                })
+              }
+              else {
+                media = {
+                  url: post['photo-url-1280'],
+                  type: "image",
+                  token: "",
+                  thumbnail: post['photo-url-500'],
+                  description: caption,
+                  width: parseInt(post.width),
+                  height: parseInt(post.height),
+                }
+                media_list.push(media)
+              }
+              break
+            case 'video':
+              url = post['video-source']
+              if (url.indexOf("http") !== 0) { break }
+              if (Parser.lookup.youtube.regex.test(url)) {
+                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"
+                media = {
+                  url: post['video-source'],
+                  type: "youtube",
+                  token: id,
+                  thumbnail: thumb,
+                  title: stripHTML(post['video-caption']),
+                  width: 640,
+                  height: 360,
+                }
+                media_list.push(media)
+              }
+              break
+          }
+        }
+//         console.log(post)
+      }
+    })
+  },
+
 	parse: function (url, cb) {
 		var matched = Parser.integrations.some(function(integration){
 			if (integration.regex.test(url)) {
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
index 42e7596..8424d9c 100644
--- a/public/assets/javascripts/ui/reader/MediaPlayer.js
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -49,6 +49,9 @@ var MediaPlayer = FormView.extend({
 				return false
 			}
 		}
+		else if (media.type == "text") {
+		  return false
+		}
 
 		this.bind(scenery)
 		this.$el.addClass("active")
@@ -58,8 +61,9 @@ var MediaPlayer = FormView.extend({
 		
 		switch (media.type) {
 			case "image":
-				this.$(".image").show()
 				this.$(".video").hide()
+				this.$(".audio").hide()
+				this.$(".image").show()
 
 // 				this.$widthDimension.html( Number(media.widthDimension) || "" )
 // 				this.$heightDimension.html( Number(media.heightDimension) || "" )
@@ -70,13 +74,22 @@ var MediaPlayer = FormView.extend({
 			case "youtube":
 			case "vimeo":
 			case "video":
-				this.$(".video").show()
 				this.$(".image").hide()
+				this.$(".audio").hide()
+				this.$(".video").show()
 
 				this.$playButton.toggleClass("paused", ! this.scenery.paused())
 				this.$muteButton.toggleClass("muted", this.scenery.muted())
 
 				break
+			
+			case "soundcloud":
+				this.$(".image").hide()
+				this.$(".video").hide()
+				this.$(".audio").show()
+
+				this.$playButton.toggleClass("paused", ! this.scenery.paused())
+			  break
 		}
 		return true
 	},
diff --git a/public/assets/javascripts/util.js b/public/assets/javascripts/util.js
index 1749836..609bdd6 100644
--- a/public/assets/javascripts/util.js
+++ b/public/assets/javascripts/util.js
@@ -10,6 +10,7 @@ if (window.$) {
 
 function trim (s){ return s.replace(/^\s+/,"").replace(/\s+$/,"") }
 function sanitize (s){ return (s || "").replace(new RegExp("[<>&]", 'g'), "") }
+function stripHTML (s){ return (s || "").replace(/<[^>]+>/g, "") }
 function capitalize (s){ return s.split(" ").map(capitalizeWord).join(" ") }
 function capitalizeWord (s){ return s.charAt(0).toUpperCase() + s.slice(1) }
 function slugify (s){ return (s || "").toLowerCase().replace(/\s/g,"-").replace(/[^-_a-zA-Z0-9]/g, '-').replace(/-+/g,"-") }
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 99d501b..1a48a86 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1582,7 +1582,8 @@ border-left: 1px solid black;
 	transition:opacity 0.3s ease-in-out;
 }
 .reader #minimap {
-	right: 20px;
+	right: 10px;
+	bottom: 10px;
 	left: auto;
 	-webkit-transform:translateX(180px);
 	-moz-transform:translateX(180px);
@@ -2141,6 +2142,17 @@ input[type="range"]::-webkit-slider-thumb {
 	top: 0px;
 }
 
+.setting.number #room-height {
+  width: 60px;
+}
+.setting.number #room-height-global-label {
+  float: none;
+  margin-left: 6px;
+}
+.setting.number #room-height-global-label:after {
+  content: '';
+}
+
 #mediaEditor .setting.number label {
 	width: 40px;
 }