play button and stuff on the viewer

1 files changed, 92 insertions, 0 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..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
+	},
+
+})