diff options
12 files changed, 270 insertions, 30 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.embed.js b/public/assets/javascripts/mx/primitives/mx.embed.js new file mode 100644 index 0000000..f15ec98 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.embed.js @@ -0,0 +1,66 @@ +MX.Embed = MX.Object3D.extend({ + + init: function (ops) { + + this.type = "Embed" + + 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.scale = ops.scale || 1 + layer.backface = ops.backface || false + + if (layer.backface) { + layer.el.classList.add("backface-visible") + } + + if (ops.src) { + this.loadEmbed(ops) + } + + if (ops.className) { + layer.el.classList.add(ops.className) + } + layer.el.style.backgroundRepeat = 'no-repeat' + + }, + + loadEmbed: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + +// layer.scale = layer.ops.scale || 1 +// layer.width = layer.ops.width || image.naturalWidth +// layer.height = layer.ops.height || image.naturalHeight +// layer.x = layer.ops.x || 0 +// layer.y = layer.ops.y || 0 +// layer.z = layer.ops.z || 0 +// layer.rotationX = layer.ops.rotationX || 0 +// layer.rotationY = layer.ops.rotationY || 0 +// layer.rotationZ = layer.ops.rotationZ || 0 +// layer.el.style.backgroundImage = "url(" + image.src + ")" +// layer.el.classList.add('image') +// layer.dirty = true +// layer.update() + }, + + 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.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index e36c857..6ddc5d8 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -25,16 +25,12 @@ MX.Image = MX.Object3D.extend({ layer.el.classList.add(ops.className) } layer.el.style.backgroundRepeat = 'no-repeat' - - this.dirty = true - this.updateChildren = true - this.update() }, loadTexture: function(ops){ var layer = this layer.ops = defaults(ops, layer.ops) - console.log(layer.ops.y, layer.y) + var image = new Image() image.onload = function(){ layer.scale = layer.ops.scale || 1 diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js new file mode 100644 index 0000000..c9ec339 --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -0,0 +1,59 @@ +MX.Video = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Video" + + 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 + layer.el.classList.add('video') + + if (layer.backface) { + layer.el.classList.add("backface-visible") + } + + if (ops.src) { + this.loadVideo(ops) + } + + if (ops.className) { + layer.el.classList.add(ops.className) + } + layer.el.style.backgroundRepeat = 'no-repeat' + }, + + loadVideo: function(ops){ + var layer = this + layer.ops = defaults(ops, layer.ops) + + var video = document.createElement('video') + video.addEventListener("loadedmetadata", function(){ + // + video.play() + }) + video.src = ops.src + video.load() + }, + + 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/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 74801e9..d44ad41 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -19,9 +19,13 @@ var Scenery = new function(){ scene_media = new Scenery.types.image ({ media: media, wall: wall, id: id }) break + case 'video': + scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) + break + case 'youtube': case 'vimeo': - scene_media = new Scenery.types.video ({ media: media, wall: wall, id: id }) + scene_media = new Scenery.types.embed ({ media: media, wall: wall, id: id }) break } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js index 05c760b..65f3a94 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/_object.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/_object.js @@ -35,6 +35,9 @@ Scenery.types.base = Fiber.extend(function(base){ destroy: function(){ this.unbind() scene.remove(this.mx) + this.mx.media = null + this.mx.ops = null + this.mx = null this.move = null this.media = null this.dimensions = null diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/embed.js b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js new file mode 100644 index 0000000..58bc58d --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/embed.js @@ -0,0 +1,38 @@ + +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/image.js b/public/assets/javascripts/rectangles/engine/scenery/types/image.js index b668e6a..99c1810 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/image.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/image.js @@ -17,6 +17,7 @@ Scenery.types.image = Scenery.types.base.extend(function(base){ this.mx = new MX.Image({ src: this.media.url, scale: this.scale, + media: this.media, y: this.scale * this.media.height/2, backface: false, }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index b34e55c..a8b3722 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -14,13 +14,23 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ }, build: function(){ - this.mx = new MX.Image({ + this.mx = new MX.Video({ src: this.media.url, + media: this.media, y: this.scale * this.media.height/2, backface: false, }) scene.add( this.mx ) }, + + play: function(){ + }, + + pause: function(){ + }, + + seek: function(){ + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2535f1b..b5398ff 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -62,6 +62,16 @@ var MediaViewer = ModalView.extend({ case 'vimeo': image.src = media.thumbnail break + + case 'video': + image = document.createElement('video') + image.addEventListener("loadedmetadata", function(){ + image.currentTime = image.duration * 1/3 + console.log(image.duration, image.currentTime) + }) + image.src = media.url + image.load() + break } $span.data("media", media) @@ -124,7 +134,16 @@ var MediaViewer = ModalView.extend({ var $floatingImg = $('.floatingImg'); Scenery.nextMedia = media - $floatingImg.attr('src', image.attr('src')); + + switch (media.type) { + case "video": + $floatingImg.attr('src', 'http://www.rawrcast.com/wp-content/uploads/2010/02/BluePlayButton.png') + break + + default: + $floatingImg.attr('src', image.attr('src')) + break + } var height = $floatingImg.height() var width = $floatingImg.width() diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index 705ff04..dfff7b2 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -2,12 +2,18 @@ var Parser = { integrations: [{ type: 'image', regex: /\.(jpeg|jpg|gif|png|svg)(\?.*)?$/i, - async: false, fetch: function(url, done) { var img = new Image () img.onload = function(){ - done("", "", img.naturalWidth, img.naturalHeight, "") + var width = img.naturalWidth, height = img.naturalHeight img = null + done({ + token: "", + thumbnail: "", + title: "", + width: width, + height: height, + }) } img.src = url if (img.complete) { @@ -18,9 +24,30 @@ var Parser = { return '<img src="' + media.url + '" onerror="imgError(this);">'; } }, { + type: 'video', + regex: /\.(mp4|webm)(\?.*)?$/i, + fetch: function(url, done) { + var video = document.createElement("video") + video.addEventListener("loadedmetadata", function(){ + var width = video.videoWidth, height = video.videoHeight + video = null + done({ + token: "", + thumbnail: "", + title: "", + width: width, + height: height, + }) + }) + video.src = url + video.load() + }, + tag: function (media) { + return '<video src="' + media.url + '" onerror="imgError(this);">'; + } + }, { type: 'youtube', regex: /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/ ]{11})/i, - async: false, fetch: function(url, done) { var id = (url.match(/v=([-_a-zA-Z0-9]{11})/i) || url.match(/youtu.be\/([-_a-zA-Z0-9]{11})/i) || url.match(/embed\/([-_a-zA-Z0-9]{11})/i))[1].split('&')[0]; var thumb = "http://i.ytimg.com/vi/" + id + "/hqdefault.jpg" @@ -34,8 +61,14 @@ var Parser = { part: "id,contentDetails,snippet,status", }, success: function(result){ - var res = res.items[0] - done(id, thumb, 640, 360, res.snippet.title); + var res = result.items[0] + done({ + token: id, + thumbnail: thumb, + title: res.snippet.title, + width: 640, + height: 360, + }) } }) }, @@ -45,7 +78,6 @@ var Parser = { }, { type: 'vimeo', regex: /vimeo.com\/\d+$/i, - async: true, fetch: function(url, done) { var id = url.match(/\d+$/i)[0]; $.ajax({ @@ -54,7 +86,13 @@ var Parser = { success: function(result){ if (result.length == 0) { return done(id, "", 640, 360) } var res = result[0] - done(id, res.thumbnail_large, res.width, res.height, res.title) + done({ + token: id, + thumbnail: res.thumbnail_large, + title: res.title, + width: res.width, + height: res.height, + }) } }) }, @@ -66,7 +104,6 @@ var Parser = { { type: 'soundcloud', regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i, - async: true, fetch: function (url, done) { $.ajax({ type: 'GET', @@ -75,7 +112,13 @@ var Parser = { + '&client_id=' + '0673fbe6fc794a7750f680747e863b10', success: function(result) { - done(result.id, ""); + done({ + token: result.id, + thumbnail: "", + title: "", + width: 100, + height: 100, + }) } }); }, @@ -87,9 +130,14 @@ var Parser = { }, { type: 'link', regex: /^http.+/i, - async: false, fetch: function(url, done) { - done("", "") + done({ + token: "", + thumbnail: "", + title: "", + width: 100, + height: 100, + }) }, tag: function (media) { return '<a href="' + media.url + '" target="_blank">' + media.url + '</a>' @@ -101,16 +149,10 @@ var Parser = { parse: function (url, cb) { var matched = Parser.integrations.some(function(integration){ if (integration.regex.test(url)) { - integration.fetch(url, function(token, thumbnail, width, height, title){ - cb({ - token: token, - thumbnail: thumbnail, - type: integration.type, - title: title, - width: width, - height: height, - url: url, - }) + integration.fetch(url, function(res){ + res.url = url + res.type = integration.type + cb(res) }) return true } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 77b1d04..53365b7 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -968,7 +968,7 @@ h5 { border:1px dashed black; cursor:pointer; } -.mediaContainer img{ +.mediaContainer img, .mediaContainer video { max-width:100%; } diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 39d27e2..6a50c04 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -48,6 +48,8 @@ <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.scene.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/extensions/mx.movements.js"></script> <script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.image.js"></script> +<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.video.js"></script> +<script type="text/javascript" src="/assets/javascripts/mx/primitives/mx.embed.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/View.js"></script> <script type="text/javascript" src="/assets/javascripts/ui/lib/Router.js"></script> |