diff options
Diffstat (limited to 'public/assets')
11 files changed, 189 insertions, 87 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 1b17994..2fbf6be 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -4,52 +4,69 @@ MX.Video = MX.Object3D.extend({ this.type = "Video" - var layer = this - layer.width = ops.width - layer.height = ops.height - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.rotationX = ops.rotationX || 0 - layer.rotationY = ops.rotationY || 0 - layer.rotationZ = ops.rotationZ || 0 - layer.scale = ops.scale || 1 - layer.backface = ops.backface || false - layer.media = ops.media - layer.el.classList.add('video') - - if (layer.backface) { - layer.el.classList.add("backface-visible") - } - - if (ops.src) { - this.load(ops) - } + this.media = ops.media + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - if (ops.className) { - layer.el.classList.add(ops.className) - } - layer.el.style.backgroundRepeat = 'no-repeat' + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("video") + + this.load() }, load: function(ops){ - var layer = this - - var video = document.createElement('video') - video.addEventListener("loadedmetadata", function(){ - if (ops.autoplay) { - video.play() - } - else { - video.currentTime = video.duration / 3 - } - }) - video.width = layer.width - video.height = layer.height - video.src = ops.src - video.load() + this.player = document.createElement('video') + this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this)) + this.player.addEventListener("error", $.proxy(this.error, this)) + this.player.width = this.width + this.player.height = this.height + this.player.src = this.media.url + this.player.load() - this.el.appendChild(video) + this.el.appendChild(this.player) + }, + + ready: function(){ + if (this.media.autoplay) { + video.play() + } + else { + video.currentTime = video.duration / 3 + } + }, + + error: function(err){ + console.log("video error", err) }, + + play: function(){ + this.player.play() + }, + + pause: function(){ + this.player.pause() + }, + + seek: function(n){ + this.player.currentTime = n + }, + + duration: function(){ + return this.player.duration + }, + + finished: function(){ + console.log("video finished") + }, + }) diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index 344a450..994c835 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -4,36 +4,75 @@ MX.Vimeo = MX.Object3D.extend({ this.type = "Vimeo" - var layer = this - layer.media = ops.media - layer.width = ops.media.width - layer.height = ops.media.height - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.rotationX = ops.rotationX || 0 - layer.rotationY = ops.rotationY || 0 - layer.rotationZ = ops.rotationZ || 0 - layer.scale = ops.scale || 1 - layer.backface = ops.backface || false + this.media = ops.media + this.width = ops.media.width + this.height = ops.media.height + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.rotationX = ops.rotationX || 0 + this.rotationY = ops.rotationY || 0 + this.rotationZ = ops.rotationZ || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - if (layer.backface) { - layer.el.classList.add("backface-visible") - } - - if (ops.src) { - this.loadEmbed(ops) - } + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("video") - if (ops.className) { - layer.el.classList.add(ops.className) - } - layer.el.style.backgroundRepeat = 'no-repeat' + this.load() + }, + load: function (ops) { + var uid = 'player-' + Uid () + var preload = document.createElement("div") + preload.id = uid + preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" + preload.style.width = this.media.width + "px" + preload.style.height = this.media.height + "px" + preload.style.pointerEvents = "none" + preload.className = "preload" + this.el.appendChild(preload) + + this.player = $f(preload) + this.player.addEvent('ready', $.proxy(this.ready, this)) }, + + ready: function(){ + console.log("vimeo ready") - loadEmbed: function(ops){ - var layer = this - } + // wait until ready before binding events. other events: play, pause + this.player.addEvent('finish', $.proxy(this.finished, this)) + + // so annoying that this is async!! + this.player.api('getDuration', $.proxy(function(n){ + console.log("vimeo duration", n) + this.player.duration = n + }, this)) + }, + + error: function(err){ + console.log("vimeo error", err) + }, + + play: function(){ + this.player.api('play') + }, + + pause: function(){ + this.player.api('pause') + }, + + seek: function(n){ + this.player.api('seekTo', n) + }, + + duration: function(){ + return this.player.duration + }, + + finished: function(){ + } + }) diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index b21184d..3662d7b 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -24,7 +24,7 @@ MX.Youtube = MX.Object3D.extend({ }, load: function (ops) { - var uid = 'player-' + Uid() + var uid = 'player-' + Uid () var preload = document.createElement("div") preload.id = uid preload.style.backgroundImage = "url(" + this.media.thumbnail + ")" @@ -34,6 +34,16 @@ MX.Youtube = MX.Object3D.extend({ preload.className = "preload" this.el.appendChild(preload) + // simply defer if not loaded yet + YT = YT || { + Player: function(){ + var args = arguments + setTimeout(function(){ + base.player = YT.loading ? YT.Player (args) : new YT.Player(args) + }, 300) + } + } + this.player = new YT.Player(uid, { videoId: this.media.token, width: this.width, @@ -41,7 +51,22 @@ MX.Youtube = MX.Object3D.extend({ events: { onReady: $.proxy(this.ready, this), onError: $.proxy(this.error, this), - } + onStateChange: $.proxy(this.statechange, this), + }, + playerVars: { + autohide: 1, + autoplay: 0, + disablekb: 1, + controls: 0, + enablejsapi: 1, + fs: 0, + modestbranding: 1, + iv_load_policy: 3, // no annotations + loop: 0, + showinfo: 0, + rel: 0, + wmode: 'opaque', + }, }) }, @@ -53,6 +78,24 @@ MX.Youtube = MX.Object3D.extend({ console.log("youtube error", err) }, + statechange: function(e){ + switch (e.data) { + case -1: // unstarted + break + case 0: // finished + this.finished() + break + case 1: // play + break + case 2: // pause + break + case 3: // buffering + break + case 5: // cued + break + } + }, + play: function(){ this.player.playVideo() }, @@ -61,10 +104,17 @@ MX.Youtube = MX.Object3D.extend({ this.player.pauseVideo() }, - seek: function(n){ + seek: function(n, allowSeekAhead){ + allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true + this.player.seekTo(n, true) // set to false if seeking manually }, duration: function(){ + return this.player.getDuration() + }, + + finished: function(){ + console.log("youtube finished") } }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js index 488d23c..697c66a 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js @@ -15,8 +15,6 @@ Scenery.types.vimeo = Scenery.types.base.extend(function(base){ build: function(){ this.mx = new MX.Vimeo({ - src: this.media.url, - poster: this.media.thumbnail, media: this.media, scale: this.scale, y: this.scale * this.media.height/2, diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js index 3a3aadd..25d8485 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js @@ -15,8 +15,6 @@ Scenery.types.youtube = Scenery.types.base.extend(function(base){ build: function(){ this.mx = new MX.Youtube({ - src: this.media.url, - poster: this.media.thumbnail, media: this.media, scale: this.scale, y: this.scale * this.media.height/2, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 9b2f753..9fcd55f 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -2,9 +2,9 @@ var BuilderSettings = FormView.extend({ el: "#builderSettings", - createAction: "/api/layouts/new", - updateAction: "/api/layouts/edit", - destroyAction: "/api/layouts/destroy", + createAction: "/api/layout/new", + updateAction: "/api/layout/edit", + destroyAction: "/api/layout/destroy", events: { "keydown [name=name]": 'enterSubmit', diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index 33aface..b42d3e7 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -2,7 +2,7 @@ var BuilderView = View.extend({ el: "#builderView", - action: "/api/layouts/", + action: "/api/layout/", events: { }, diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index b9f4560..35bcbe0 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -2,9 +2,9 @@ var EditorSettings = FormView.extend({ el: "#editorSettings", - createAction: "/api/projects/new", - updateAction: "/api/projects/edit", - destroyAction: "/api/projects/destroy", + createAction: "/api/project/new", + updateAction: "/api/project/edit", + destroyAction: "/api/project/destroy", events: { "keydown [name=name]": 'enterSubmit', diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index b87ac83..2bb2d61 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -2,8 +2,8 @@ var EditorView = View.extend({ el: "#editorView", - projectAction: "/api/projects/", - layoutAction: "/api/layouts/", + projectAction: "/api/project/", + layoutAction: "/api/layout/", events: { }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 001d097..7cd629b 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -2,7 +2,7 @@ var ReaderView = View.extend({ el: "#readerView", - projectAction: "/api/projects/", + projectAction: "/api/project/", events: { }, diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index 46ed634..d474aa7 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -28,7 +28,7 @@ var LayoutsIndex = View.extend({ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ el: ".mediaDrawer.projects", - action: "/api/projects", + action: "/api/project", events: { "click .templates span": 'toggleActive', @@ -65,7 +65,7 @@ var ProjectsModal = ModalView.extend(LayoutsIndex.prototype).extend({ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ el: ".mediaDrawer.layouts", - action: "/api/layouts", + action: "/api/layout", events: { "click .templates span": 'toggleActive', @@ -93,7 +93,7 @@ var LayoutsModal = ModalView.extend(LayoutsIndex.prototype).extend({ var NewProjectModal = ModalView.extend(LayoutsIndex.prototype).extend({ el: ".mediaDrawer.newProject", - action: "/api/layouts", + action: "/api/layout", events: { "click .templates span": 'toggleActive', |