2 files changed, 148 insertions, 2 deletions
diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js
new file mode 100644
index 0000000..df2d075
--- /dev/null
+++ b/public/assets/javascripts/ui/reader/MediaPlayer.js
@@ -0,0 +1,100 @@
+
+var MediaPlayer = FormView.extend({
+	el: "#mediaPlayer",
+		
+	events: {
+		"click [data-role=play-media]": "togglePaused",
+		"click [data-role=mute-media]": "toggleMuted",
+		"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.$("[data-role=play-media]")
+		this.$muteButton = this.$("[data-role=mute-media]")
+	},
+	
+	toggle: function(state) {
+    this.$el.toggleClass("active", 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) {
+		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("paused", ! this.scenery.paused())
+				this.$muteButton.toggleClass("muted", this.scenery.muted())
+
+				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 001d097..9d38daa 100644
--- a/public/assets/javascripts/ui/reader/ReaderView.js
+++ b/public/assets/javascripts/ui/reader/ReaderView.js
@@ -2,17 +2,24 @@
 var ReaderView = View.extend({
 	el: "#readerView",
 	
-	projectAction: "/api/projects/",
+	projectAction: "/api/project/",
 
 	events: {
 	},
 	
 	initialize: function(){
+		this.mediaPlayer = new MediaPlayer ({ parent: this })
 	},
 
 	load: function(name){
+		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, $.proxy(this.ready, this))
+		$.get(this.projectAction + name, this.ready.bind(this))
 	},
 	
 	ready: function(data){
@@ -23,6 +30,45 @@ var ReaderView = View.extend({
 		data.startPosition && scene.camera.move(data.startPosition)
 		
 		editor.permissions.clear()
+		
+		this.listen()
+	},
+	
+	listen: function(){
+		var base = this
+		
+		$(window).on('message', function(event){
+			if (event.originalEvent.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
+		}
+	},
+
+	pick: function(scenery){
+		this.mediaPlayer.pick(scenery)
+	},
+
+	hideExtras: function(){
+		this.mediaPlayer.hide()
 	}
 
 })