diff options
Diffstat (limited to 'public/assets')
6 files changed, 91 insertions, 18 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index f92fe9f..c5dd749 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -30,6 +30,7 @@ MX.Video = MX.Object3D.extend({ this.player = document.createElement('video') this.player.addEventListener("loadedmetadata", this.ready.bind(this)) this.player.addEventListener("error", this.error.bind(this)) + this.player.addEventListener("ended", this.finished.bind(this)) this.player.width = this.width this.player.height = this.height this.player.src = this.media.url @@ -68,13 +69,25 @@ MX.Video = MX.Object3D.extend({ this.player.currentTime = n }, + mute: function(){ + this.player.muted = true + }, + + unmute: function(){ + this.player.muted = false + }, + duration: function(){ return this.player.duration }, finished: function(){ console.log("video finished") - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index 5a373ff..c44464e 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -88,6 +88,14 @@ MX.Vimeo = MX.Object3D.extend({ duration: function(){ return this.player.duration }, + + mute: function(){ + this.player.api('setVolume', 0.0) + }, + + unmute: function(){ + this.player.api('setVolume', 0.8) + }, onPlay: function(){ if (this.paused) { @@ -102,7 +110,11 @@ MX.Vimeo = MX.Object3D.extend({ }, finished: function(){ - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } } diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index a31a24d..68bb5f3 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -79,6 +79,7 @@ MX.Youtube = MX.Object3D.extend({ ready: function(){ console.log("youtube ready") + this.seek(0) }, error: function(err){ @@ -127,10 +128,23 @@ MX.Youtube = MX.Object3D.extend({ duration: function(){ return this.player.getDuration() }, + + mute: function(){ + this.player.mute() + }, + + unmute: function(){ + this.player.unMute() + this.player.setVolume(80) + }, finished: function(){ console.log("youtube finished") - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 6117826..e61a0fa 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -57,6 +57,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ seek: function(n){ this.mx.seek(n) }, + + mute: function(muted){ + if (muted) { + this.mx.mute() + } + else { + this.mx.unmute() + } + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 29ec9e5..aea78aa 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -4,9 +4,13 @@ var MediaEditor = FormView.extend({ events: { "click .playButton": "togglePlaying", + "mousedown [name=keyframe]": "stopPropagation", "change [name=keyframe]": "seek", + "change [name=autoplay]": "setAutoplay", + "change [name=loop]": "setLoop", + "change [name=mute]": "setMute", }, - + initialize: function(opt){ this.parent = opt.parent this.__super__.initialize.call(this) @@ -22,6 +26,7 @@ var MediaEditor = FormView.extend({ // video fields this.$playButton = this.$(".playButton") + this.$autoplay = this.$("[name=autoplay]") this.$loop = this.$("[name=loop]") this.$mute = this.$("[name=mute]") this.$keyframe = this.$("[name=keyframe]") @@ -53,11 +58,10 @@ var MediaEditor = FormView.extend({ case "image": this.$(".image").show() this.$(".video").hide() - /* - this.$widthDimension - this.$heightDimension - this.$units - */ + + this.$widthDimension.val( Number(media.widthDimension) || "" ) + this.$heightDimension.val( Number(media.heightDimension) || "" ) + this.$units.val( media.units || "cm" ) break @@ -67,11 +71,12 @@ var MediaEditor = FormView.extend({ this.$(".video").show() this.$(".image").hide() - /* - this.$loop - this.$mute - this.$keyframe - */ + this.$playButton.toggleClass("playing", ! this.scenery.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + this.$mute.prop('checked', !! media.mute) + this.$keyframe.val( Number(media.keyframe || 0) ) + break } @@ -80,15 +85,31 @@ var MediaEditor = FormView.extend({ seek: function(){ var n = parseFloat( this.$keyframe.val() ) this.scenery.seek(n) + + this.scenery.media.keyframe = n }, - + + setAutoplay: function(){ + var checked = this.$autoplay.prop('checked') + this.scenery.media.autoplay = checked + }, + setLoop: function(){ + var checked = this.$loop.prop('checked') + this.scenery.media.loop = checked + }, + setMute: function(){ + var checked = this.$mute.prop('checked') + this.scenery.media.mute = checked + this.scenery.mute(checked) + }, + bind: function(scenery){ this.scenery = scenery - this.scenery.media.bound = true + this.scenery.mx.bound = true }, unbind: function(){ - this.scenery.media.bound = false + this.scenery.mx.bound = false this.scenery = null }, diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js index 5fc6736..999a0e5 100644 --- a/public/assets/javascripts/ui/lib/View.js +++ b/public/assets/javascripts/ui/lib/View.js @@ -84,7 +84,11 @@ var View = (function($, _){ preventDefault: function(e){ e && e.preventDefault() - } + }, + + stopPropagation: function(e){ + e && e.stopPropagation() + }, }); |