From 1b69dbd0897b21e9613c08811da5ca8e4c863cfa Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Jun 2014 16:04:19 -0400 Subject: putting mp4/webm videos on walls --- .../rectangles/engine/scenery/_scenery.js | 5 ++- .../rectangles/engine/scenery/types/embed.js | 38 --------------------- .../rectangles/engine/scenery/types/video.js | 8 ++++- .../rectangles/engine/scenery/types/vimeo.js | 39 ++++++++++++++++++++++ .../rectangles/engine/scenery/types/youtube.js | 39 ++++++++++++++++++++++ 5 files changed, 89 insertions(+), 40 deletions(-) delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/embed.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js create mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/youtube.js (limited to 'public/assets/javascripts/rectangles/engine') diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index d44ad41..b7e7892 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -24,8 +24,11 @@ var Scenery = new function(){ break case 'youtube': + scene_media = new Scenery.types.youtube ({ media: media, wall: wall, id: id }) + break + case 'vimeo': - scene_media = new Scenery.types.embed ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.vimeo ({ media: media, wall: wall, id: id }) break } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js deleted file mode 100644 index 58bc58d..0000000 --- a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js +++ /dev/null @@ -1,38 +0,0 @@ - -Scenery.types.embed = 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.Embed({ - src: this.media.url, - poster: this.media.thumbnail, - media: this.media, - 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/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index a8b3722..2f6dc01 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -17,6 +17,9 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ this.mx = new MX.Video({ src: this.media.url, media: this.media, + width: this.media.width, + height: this.media.height, + scale: this.scale, y: this.scale * this.media.height/2, backface: false, }) @@ -24,12 +27,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ }, play: function(){ + this.mx.play() }, pause: function(){ + this.mx.pause() }, - seek: function(){ + seek: function(n){ + this.mx.seek(n) }, serialize: function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js new file mode 100644 index 0000000..488d23c --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js @@ -0,0 +1,39 @@ + +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({ + src: this.media.url, + poster: this.media.thumbnail, + 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/rectangles/engine/scenery/types/youtube.js b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js new file mode 100644 index 0000000..3a3aadd --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/youtube.js @@ -0,0 +1,39 @@ + +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({ + src: this.media.url, + poster: this.media.thumbnail, + 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 +}) -- cgit v1.2.3-70-g09d2