From f0dbdee5e68f3ebd66f7b27afc88fa44100bf924 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Jun 2014 17:49:42 -0400 Subject: starting to add youtubes --- public/assets/javascripts/app.js | 2 +- public/assets/javascripts/mx/mx.js | 10 +++ public/assets/javascripts/mx/primitives/mx.face.js | 41 --------- .../assets/javascripts/mx/primitives/mx.image.js | 50 ++++------- public/assets/javascripts/mx/primitives/mx.text.js | 2 + .../assets/javascripts/mx/primitives/mx.video.js | 15 +--- .../assets/javascripts/mx/primitives/mx.vimeo.js | 21 +---- .../assets/javascripts/mx/primitives/mx.youtube.js | 96 +++++++++++++--------- views/partials/scripts.ejs | 2 + 9 files changed, 89 insertions(+), 150 deletions(-) delete mode 100644 public/assets/javascripts/mx/primitives/mx.face.js diff --git a/public/assets/javascripts/app.js b/public/assets/javascripts/app.js index 3d0d3c4..0b441c7 100644 --- a/public/assets/javascripts/app.js +++ b/public/assets/javascripts/app.js @@ -17,7 +17,7 @@ else { var scene, cam, map; -var viewHeight = window.viewHeight || 150 +var viewHeight = window.viewHeight || 186 var app = new function(){} diff --git a/public/assets/javascripts/mx/mx.js b/public/assets/javascripts/mx/mx.js index 496aec0..6b36392 100644 --- a/public/assets/javascripts/mx/mx.js +++ b/public/assets/javascripts/mx/mx.js @@ -452,6 +452,16 @@ var MX = MX || (function (undefined) { return this }, + move: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + for (var i in ops) { + layer[i] = ops[i] + } + layer.dirty = true + layer.update() + }, + onTransitionEnd: function (callback) { this.cancelTransitionEnd() var el = this.el diff --git a/public/assets/javascripts/mx/primitives/mx.face.js b/public/assets/javascripts/mx/primitives/mx.face.js deleted file mode 100644 index ac47ab4..0000000 --- a/public/assets/javascripts/mx/primitives/mx.face.js +++ /dev/null @@ -1,41 +0,0 @@ -MX.Face = MX.Object3D.extend({ - - // this will be called within the contructor - init: function (size, color, borderColor) { - - size = size || 100 - color = color || 'rgba(0, 255, 122, .1)' - borderColor = borderColor || '#0f3' - - // an Object3D's associated DOM node is the "el" property - this.el.classList.add('face') - - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) - - var top = this.top = new MX.Object3D('.face') - top.rotationX = angle - top.y = size / 2 - - // adding children, must also be instances of Object3D - this.add(top) - - this.children.forEach(function (face) { - face.width = size - 2 - face.height = size - 2 - face.el.style.backgroundColor = color - face.el.style.border = '1px solid ' + borderColor - }) - - // this applies the updated CSS style - // required for any change to take effect - // when a parent object's update() is called - // all its children will be updated as well - this.update() - - // if this object's children won't move by themselves - this.updateChildren = false - } - - // other properties will be mixed into the prototype of the new constructor - -}) diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 6ddc5d8..278fa1e 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -2,32 +2,25 @@ MX.Image = MX.Object3D.extend({ init: function (ops) { this.type = "Image" - - var layer = this - layer.width = 0 - layer.height = 0 - layer.x = ops.x || 0 - layer.y = ops.y || 0 - layer.z = ops.z || 0 - layer.scale = ops.scale || 1 - layer.backface = ops.backface || false - layer.media = ops.media + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false - if (layer.backface) { - layer.el.classList.add("backface-visible") - } + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("image") - if (ops.src) { - this.loadTexture(ops) - } + this.el.style.backgroundRepeat = 'no-repeat' - if (ops.className) { - layer.el.classList.add(ops.className) - } - layer.el.style.backgroundRepeat = 'no-repeat' + this.load(ops) }, - loadTexture: function(ops){ + load: function(ops){ var layer = this layer.ops = defaults(ops, layer.ops) @@ -49,20 +42,5 @@ MX.Image = MX.Object3D.extend({ } image.src = ops.src; }, - - move: function(ops){ - var layer = this - layer.ops = defaults(ops, layer.ops) - for (var i in ops) { - layer[i] = ops[i] - } - layer.dirty = true - layer.update() - }, - - toString: function(){ - var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") - return this.__toString(params) - }, }) diff --git a/public/assets/javascripts/mx/primitives/mx.text.js b/public/assets/javascripts/mx/primitives/mx.text.js index 0c278a9..9c7af5c 100644 --- a/public/assets/javascripts/mx/primitives/mx.text.js +++ b/public/assets/javascripts/mx/primitives/mx.text.js @@ -1,4 +1,5 @@ MX.Text = MX.Object3D.extend({ + init: function (ops) { this.type = "Text" @@ -31,4 +32,5 @@ MX.Text = MX.Object3D.extend({ this.updateChildren = true this.update() } + }) diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index b2727c0..1b17994 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -1,4 +1,5 @@ MX.Video = MX.Object3D.extend({ + init: function (ops) { this.type = "Video" @@ -22,7 +23,7 @@ MX.Video = MX.Object3D.extend({ } if (ops.src) { - this.loadVideo(ops) + this.load(ops) } if (ops.className) { @@ -31,7 +32,7 @@ MX.Video = MX.Object3D.extend({ layer.el.style.backgroundRepeat = 'no-repeat' }, - loadVideo: function(ops){ + load: function(ops){ var layer = this var video = document.createElement('video') @@ -50,15 +51,5 @@ MX.Video = MX.Object3D.extend({ this.el.appendChild(video) }, - - move: function(ops){ - var layer = this - layer.ops = defaults(ops, layer.ops) - for (var i in ops) { - layer[i] = ops[i] - } - layer.dirty = true - layer.update() - } }) diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index b8efa17..344a450 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -34,25 +34,6 @@ MX.Vimeo = MX.Object3D.extend({ loadEmbed: function(ops){ var layer = this - }, - - move: function(ops){ - var layer = this - layer.ops = defaults(ops, layer.ops) - for (var i in ops) { - layer[i] = ops[i] - } - layer.dirty = true - layer.update() - }, - - toString: function(){ - var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") - return this.__toString(params) - }, + } }) - -window.onYouTubePlayerAPIReady = function(){ - console.log("youtube ready") -} diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 3756d80..b21184d 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -4,53 +4,69 @@ MX.Youtube = MX.Object3D.extend({ this.type = "Youtube" - 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() }, - loadEmbed: function(ops){ - var layer = this + 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 = new YT.Player(uid, { + videoId: this.media.token, + width: this.width, + height: this.height, + events: { + onReady: $.proxy(this.ready, this), + onError: $.proxy(this.error, this), + } + }) }, - move: function(ops){ - var layer = this - layer.ops = defaults(ops, layer.ops) - for (var i in ops) { - layer[i] = ops[i] - } - layer.dirty = true - layer.update() + ready: function(){ + console.log("youtube ready") }, - - toString: function(){ - var params = "id src width height depth x y z rotationX rotationY rotationZ scale".split(" ") - return this.__toString(params) - }, - + + error: function(err){ + console.log("youtube error", err) + }, + + play: function(){ + this.player.playVideo() + }, + + pause: function(){ + this.player.pauseVideo() + }, + + seek: function(n){ + }, + + duration: function(){ + } + }) window.onYouTubePlayerAPIReady = function(){ diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6799aa7..80be29f 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -38,6 +38,8 @@ + + -- cgit v1.2.3-70-g09d2