play button and stuff on the viewer

12 files changed, 150 insertions, 32 deletions

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>