diff options
Diffstat (limited to 'public/assets')
8 files changed, 53 insertions, 97 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index f750c28..b1b9f6b 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -19,11 +19,14 @@ MX.Video = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") + this.paused = true this.load() }, load: function(ops){ + this.paused = true + this.player = document.createElement('video') this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this)) this.player.addEventListener("error", $.proxy(this.error, this)) @@ -37,7 +40,7 @@ MX.Video = MX.Object3D.extend({ ready: function(){ if (this.media.autoplay) { - this.player.play() + this.play() } else { this.player.currentTime = this.player.duration / 3 @@ -49,14 +52,16 @@ MX.Video = MX.Object3D.extend({ }, play: function(){ + this.paused = false this.player.play() }, pause: function(){ + this.paused = true this.player.pause() }, - seek: function(n){ + seek: function(n){ this.player.currentTime = n }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index 994c835..e558bc3 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -19,6 +19,7 @@ MX.Vimeo = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") + this.paused = true this.load() }, @@ -57,10 +58,12 @@ MX.Vimeo = MX.Object3D.extend({ }, play: function(){ + this.paused = false this.player.api('play') }, pause: function(){ + this.paused = true this.player.api('pause') }, diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 118623b..cc0ec0a 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -19,6 +19,7 @@ MX.Youtube = MX.Object3D.extend({ ops.className && this.el.classList.add(ops.className) this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") + this.paused = true this.load() }, @@ -92,8 +93,10 @@ MX.Youtube = MX.Object3D.extend({ this.finished() break case 1: // play + this.paused = false break case 2: // pause + this.paused = true break case 3: // buffering break diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index b7e7892..1493fc6 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -20,15 +20,9 @@ var Scenery = new function(){ break case 'video': - scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) - break - case 'youtube': - scene_media = new Scenery.types.youtube ({ media: media, wall: wall, id: id }) - break - case 'vimeo': - scene_media = new Scenery.types.vimeo ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) break } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index a9fce4a..6117826 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -14,7 +14,18 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ }, build: function(){ - this.mx = new MX.Video({ + switch (this.media.type) { + case 'video': + this.mxType = MX.Video + break + case 'vimeo': + this.mxType = MX.Vimeo + break + case 'youtube': + this.mxType = MX.Youtube + break + } + this.mx = new this.mxType({ media: this.media, scale: this.scale, y: this.scale * this.media.height/2, @@ -31,6 +42,18 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ this.mx.pause() }, + toggle: function(shouldPause){ + if (typeof shouldPause === "undefined") { + shouldPause = ! this.mx.paused + } + shouldPause ? this.mx.pause() : this.mx.play() + return shouldPause + }, + + paused: function(){ + return this.mx.paused + }, + seek: function(n){ this.mx.seek(n) }, diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js deleted file mode 100644 index ded5f87..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js +++ /dev/null @@ -1,49 +0,0 @@ - -Scenery.types.vimeo = Scenery.types.base.extend(function(base){ - - var exports = { - - init: function(opt){ - base.init.call(this, opt) - this.scale = this.media.scale = 300 / max(300, this.media.width) - - this.build() - this.bind() - this.set_wall() - this.recenter() - }, - - build: function(){ - this.mx = new MX.Vimeo({ - media: this.media, - scale: this.scale, - y: this.scale * this.media.height/2, - backface: false, - }) - scene.add( this.mx ) - }, - - play: function(){ - this.mx.play() - }, - - pause: function(){ - this.mx.pause() - }, - - seek: function(n){ - this.mx.seek(n) - }, - - serialize: function(){ - var data = base.serialize.call(this) - return data - }, - - deserialize: function(data){ - this.mx.move(data.position) - }, - } - - return exports -}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js deleted file mode 100644 index 25d8485..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js +++ /dev/null @@ -1,37 +0,0 @@ - -Scenery.types.youtube = Scenery.types.base.extend(function(base){ - - var exports = { - - init: function(opt){ - base.init.call(this, opt) - this.scale = this.media.scale = 300 / max(300, this.media.width) - - this.build() - this.bind() - this.set_wall() - this.recenter() - }, - - build: function(){ - this.mx = new MX.Youtube({ - media: this.media, - scale: this.scale, - y: this.scale * this.media.height/2, - backface: false, - }) - scene.add( this.mx ) - }, - - serialize: function(){ - var data = base.serialize.call(this) - return data - }, - - deserialize: function(data){ - this.mx.move(data.position) - }, - } - - return exports -}) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 1ccb5cf..47a938b 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -31,10 +31,16 @@ var MediaEditor = FormView.extend({ }, togglePlaying: function(){ + var state = this.scenery.toggle() + this.$playButton.toggleClass("playing", ! state) }, pick: function(scenery) { - this.scenery = scenery + if (this.scenery) { + this.unbind() + } + + this.bind(scenery) this.$el.addClass("active") var media = scenery.media @@ -70,5 +76,13 @@ var MediaEditor = FormView.extend({ break } }, + + bind: function(scenery){ + this.scenery = scenery + }, + + unbind: function(){ + this.scenery = null + }, }) |