From eac88be42cc1a7f85c7a0533414e1047e0addc39 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 23 Jun 2014 18:11:59 -0400 Subject: stubbing in stuff for videos/embeds --- .../assets/javascripts/mx/primitives/mx.embed.js | 66 ++++++++++++++++++++++ .../assets/javascripts/mx/primitives/mx.image.js | 6 +- .../assets/javascripts/mx/primitives/mx.video.js | 59 +++++++++++++++++++ 3 files changed, 126 insertions(+), 5 deletions(-) create mode 100644 public/assets/javascripts/mx/primitives/mx.embed.js create mode 100644 public/assets/javascripts/mx/primitives/mx.video.js (limited to 'public/assets/javascripts/mx/primitives') 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) + }, + +}) -- cgit v1.2.3-70-g09d2 From d52c037ab7e01660a85363a2941052e4d4b8cf03 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 24 Jun 2014 15:31:49 -0400 Subject: removing old mx stuff --- public/assets/javascripts/environments/app.js | 28 -- .../javascripts/environments/tableaux/_empty.js | 32 -- .../javascripts/environments/tableaux/columns.js | 36 --- .../environments/tableaux/columns_circle.js | 42 --- .../environments/tableaux/columns_split.js | 63 ---- public/assets/javascripts/map/map.js | 337 --------------------- public/assets/javascripts/map/map_editor.js | 102 ------- public/assets/javascripts/mx/mx.minimap.js | 211 ------------- public/assets/javascripts/mx/primitives/mx.box.js | 62 ---- .../javascripts/mx/primitives/mx.boxDimensions.js | 154 ---------- .../assets/javascripts/mx/primitives/mx.coords.js | 61 ---- .../assets/javascripts/mx/primitives/mx.cutout.js | 66 ---- .../assets/javascripts/mx/primitives/mx.embed.js | 66 ---- .../javascripts/mx/primitives/mx.scaleBox.js | 140 --------- .../assets/javascripts/mx/primitives/mx.tableau.js | 48 --- .../javascripts/mx/primitives/mx.texturedBox.js | 121 -------- .../assets/javascripts/mx/primitives/mx.vimeo.js | 58 ++++ .../assets/javascripts/mx/primitives/mx.youtube.js | 58 ++++ views/partials/scripts.ejs | 7 +- 19 files changed, 122 insertions(+), 1570 deletions(-) delete mode 100644 public/assets/javascripts/environments/app.js delete mode 100644 public/assets/javascripts/environments/tableaux/_empty.js delete mode 100644 public/assets/javascripts/environments/tableaux/columns.js delete mode 100644 public/assets/javascripts/environments/tableaux/columns_circle.js delete mode 100644 public/assets/javascripts/environments/tableaux/columns_split.js delete mode 100644 public/assets/javascripts/map/map.js delete mode 100644 public/assets/javascripts/map/map_editor.js delete mode 100644 public/assets/javascripts/mx/mx.minimap.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.box.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.boxDimensions.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.coords.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.cutout.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.embed.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.scaleBox.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.tableau.js delete mode 100644 public/assets/javascripts/mx/primitives/mx.texturedBox.js create mode 100644 public/assets/javascripts/mx/primitives/mx.vimeo.js create mode 100644 public/assets/javascripts/mx/primitives/mx.youtube.js (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/environments/app.js b/public/assets/javascripts/environments/app.js deleted file mode 100644 index cdc104b..0000000 --- a/public/assets/javascripts/environments/app.js +++ /dev/null @@ -1,28 +0,0 @@ -var scrubber, fish, floor - -var environment = new function(){} -environment.init = function(){ - - scene.camera.move({ - "x": 0, - "y": 0, - "z": 0, - "rotationX": 0.085, - "rotationY": 0.025 - }) - map && map.zoom(3.00) && map.recenter() - - // - // intro floor, models, etc - -} - - -environment.update = function(t){ - - // add continuous animations and stuff here - - map && map.update() - -} - diff --git a/public/assets/javascripts/environments/tableaux/_empty.js b/public/assets/javascripts/environments/tableaux/_empty.js deleted file mode 100644 index b69fa78..0000000 --- a/public/assets/javascripts/environments/tableaux/_empty.js +++ /dev/null @@ -1,32 +0,0 @@ -/* - -MX.Tableaux.Foo = MX.Tableau.extend({ - - init: function (opt) { - - this.opt = opt = defaults(opt, { - width: 100, - height: 100, - depth: 100, - x: 0, - y: 0, - z: 0, - rotationY: 0, - rotationX: 0, - scale: 1, - }) - - }, - - animate: function() { - }, - - show: function(){ - }, - - hide: function(){ - }, - -}) - -*/ diff --git a/public/assets/javascripts/environments/tableaux/columns.js b/public/assets/javascripts/environments/tableaux/columns.js deleted file mode 100644 index e961315..0000000 --- a/public/assets/javascripts/environments/tableaux/columns.js +++ /dev/null @@ -1,36 +0,0 @@ -MX.Tableaux.Columns = MX.Tableau.extend({ - - init: function (opt) { - - this.opt = opt = defaults(opt, { - width: 10, - height: 10, - depth: 10, - x: 0, - y: 0, - z: 0, - rotationY: 0, - rotationX: 0, - scale: 1, - count: 3, - spacingX: 0, - spacingZ: 100, - }) - - for (var i = 0; i < opt.count; i++) { - var scalebox = new MX.ScaleBox({ - "width": opt.width, - "height": opt.height, - "depth": opt.depth, - "x": opt.x + opt.spacingX * i, - "y": opt.y, - "z": opt.z + opt.spacingZ * i, - "color": opt.color, - "sides": "top bottom left right front back" - }); - scene.add(scalebox) - } - - } - -}) diff --git a/public/assets/javascripts/environments/tableaux/columns_circle.js b/public/assets/javascripts/environments/tableaux/columns_circle.js deleted file mode 100644 index 1816e51..0000000 --- a/public/assets/javascripts/environments/tableaux/columns_circle.js +++ /dev/null @@ -1,42 +0,0 @@ -MX.Tableaux.ColumnsCircle = MX.Tableau.extend({ - - init: function (opt) { - - this.opt = opt = defaults(opt, { - width: 10, - height: 10, - depth: 10, - radius: 10, - theta: 0, - skip: 0, - x: 0, - y: 0, - z: 0, - rotationY: 0, - rotationX: 0, - scale: 1, - count: 3, - }) - - var scalebox, theta - var radius = opt.radius - - for (var i = opt.skip; i < opt.count; i++) { - theta = i/opt.count * TWO_PI + opt.theta - scalebox = new MX.ScaleBox({ - "width": opt.width, - "height": opt.height, - "depth": opt.depth, - "x": opt.x + sin(theta) * radius, - "y": opt.y, - "z": opt.z + cos(theta) * radius, - "rotationY": PI - theta, - "color": opt.color, - "sides": "top bottom left right front back" - }); - scene.add(scalebox) - } - - } - -}) diff --git a/public/assets/javascripts/environments/tableaux/columns_split.js b/public/assets/javascripts/environments/tableaux/columns_split.js deleted file mode 100644 index b9981d6..0000000 --- a/public/assets/javascripts/environments/tableaux/columns_split.js +++ /dev/null @@ -1,63 +0,0 @@ -MX.Tableaux.ColumnsSplit = MX.Tableau.extend({ - - init: function (opt) { - - this.opt = opt = defaults(opt, { - width: 100, - height: 100, - depth: 100, - norm: 0.5, - gap: 5, - x: 0, - y: 0, - z: 0, - rotationY: 0, - scale: 1, - count: 1, - }) - - opt.colorBottom = opt.colorBottom || opt.color - - if ( ! (opt.norm instanceof Array) ) { - opt.norm = [ opt.norm, opt.norm ] - } - - var norm, spacingX, spacingZ, scalebox - - for (var i = 0; i < opt.count; i++) { - - norm = lerp( i/(opt.count-1), opt.norm[0], opt.norm[1] ) - - spacingX = opt.spacingX * i - spacingZ = opt.spacingZ * i - - scalebox = new MX.ScaleBox({ - "width": opt.width, - "height": opt.height * norm, - "depth": opt.depth, - "x": opt.x + spacingX, - "y": opt.y + opt.gap, - "z": opt.z + spacingZ, - "color": opt.color, - "sides": "top bottom left right front back", - "rotationY": opt.rotationY, - }); - scene.add(scalebox) - - scalebox = new MX.ScaleBox({ - "width": opt.width, - "height": opt.height * (1 - norm), - "depth": opt.depth, - "x": opt.x + spacingX, - "y": opt.y - opt.height * (1 - norm) - opt.gap, - "z": opt.z + spacingZ, - "color": opt.colorBottom, - "sides": "top bottom left right front back", - "rotationY": opt.rotationY, - }); - scene.add(scalebox) - } - - } - -}) diff --git a/public/assets/javascripts/map/map.js b/public/assets/javascripts/map/map.js deleted file mode 100644 index a90963f..0000000 --- a/public/assets/javascripts/map/map.js +++ /dev/null @@ -1,337 +0,0 @@ - -MX.Map = function(){ - var base = this; - - var parent = document.querySelector("#map") - var canvas = document.createElement("canvas") - var ctx = canvas.getContext("2d") - var w, h - - var visible = parent.style.display == "block" - if (visible) resize() - - var center = {x:0,y:0} - var gridSpace; - var zoom = 3.0 - - var gridStroke = '#ddd' - var boxFill = '#fff' - var boxStroke = '#000' - var playerColor = '#888' - - var xmin, xmax, ymin, ymax, xpos, ypos, scale, side; - - var tube = base.tube = new Tube () - - this.zoom = function(n){ if (n) zoom = n; return zoom } - this.recenter = function(){ center.x = cam.x; center.y = cam.z } - - function resize(){ - var rect = parent.getBoundingClientRect() - w = canvas.width = ~~rect.width - h = canvas.height = ~~rect.height - } - - this.on = function(){ - base.tube.on.apply(base.tube, arguments) - } - this.off = function(){ - base.tube.off.apply(base.tube, arguments) - } - - this.update = function(){ - if (! visible) return; - this.draw() - } - - this.bounds = function(){ - gridSpace = pow(10, ~~(zoom-0.25) + 0.25) - side = Math.pow(10, zoom+1) - scale = w / side - xpos = center.x // -cam.x - ypos = center.y // cam.z - - xmin = side/-2 - xpos - xmax = side/2 - xpos - ymin = side/-2 - ypos - ymax = side/2 - ypos - } - - this.draw = function(){ - ctx.clearRect(0,0,w,h) - - ctx.fillStyle = "#fff" - ctx.fillRect(0,0,w,h) - this.bounds() - this.grid() - this.boxes() - this.player() - } - - this.grid = function(){ - ctx.strokeStyle = gridStroke - ctx.lineWidth = 1 - ctx.fillStyle = "transparent" - - var x0 = norm(0, xmin, xmax) - var y0 = norm(0, ymin, ymax) - - var xg = norm(gridSpace, xmin, xmax) - var yg = norm(gridSpace, ymin, ymax) - - var xgw = (xg-x0) - - var xmod = mod(x0, xgw) - var ymod = mod(y0, xgw) - - var xend = 1 + xgw - var yend = h/w + xgw - - var xline, yline; - for (var x = -xmod; x < xend; x += xgw) { - xline = x * w - line(xline, 0, xline, h) - } - for (var y = -ymod; y < yend; y += xgw) { - yline = y * w - line(0, yline, w, yline) - } - - function line(x0,y0,x1,y1) { - ctx.beginPath() - ctx.moveTo(x0, y0) - ctx.lineTo(x1, y1) - ctx.stroke() - } - } - this.player = function(){ - ctx.save() - - ctx.translate(~~(w/2),~~(h/2)); - ctx.lineWidth = 0.5 - var tx = ((-xpos) * scale), - ty = ((-ypos) * scale); - ctx.translate(tx, ty) - - var obj_scale = (1) * scale - - var tx = ~~((cam.x) * obj_scale), - ty = ~~((cam.z) * obj_scale); - ctx.translate(-tx, ty) - ctx.rotate(-cam.rotationY) - - var radius = 5 - - ctx.fillStyle = playerColor; - - ctx.beginPath(); - ctx.arc(0, 0, radius, 0, 2*Math.PI, false); - ctx.fill(); - - ctx.beginPath(); - ctx.moveTo(0,0) - ctx.lineTo(-radius,0) - ctx.lineTo(0,radius*3) - ctx.lineTo(radius,0) - ctx.moveTo(0,0) - ctx.fill() - - ctx.fillStyle = "transparent" - ctx.restore() - } - - this.boxes = function(){ - - ctx.save() - ctx.translate(~~(w/2),~~(h/2)); - ctx.lineWidth = 0.5 - var tx = ((-xpos) * scale), - ty = ((-ypos) * scale); - ctx.translate(tx, ty) - - scene.inner.children.forEach(function(obj){ - if (obj.type == "BoxDimensions" || obj.type == "ScaleBox") { - - ctx.save() - ctx.fillStyle = obj.color - ctx.strokeStyle = "#222" - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * scale), - ty = ~~((obj.z) * scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - var hh = ~~(obj.depth/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, hh) - - ctx.lineTo(ww, -hh) - ctx.lineTo(-ww, -hh) - ctx.lineTo(-ww, hh) - ctx.closePath() - ctx.fill() - ctx.stroke() - ctx.restore() - } - if (obj.type == "Image" || obj.type == "Cutout") { - ctx.save() - ctx.strokeStyle = "#444" - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * scale), - ty = ~~((obj.z) * scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, 0) - ctx.lineTo(-ww, 0) - ctx.closePath() - ctx.stroke() - ctx.restore() - } - }) - ctx.restore() - } - - - var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy, - creating = false, moving = false; - - function positionFromMouse(e) { - var rect = canvas.getBoundingClientRect() - cx = center.x - cy = center.y - mx = e.pageX - rect.left - my = e.pageY - rect.top - mdx = (mx - w/2) / scale + cx - mdy = (my - h/2) / scale + cy - } - - canvas.addEventListener("mousedown", function(e){ - e.stopPropagation() - dragging = true - - positionFromMouse(e) - - if (e.shiftKey) { - creating = true - } - - hud.update( mdx, mdy ) - - base.tube("mousedown", e, -mdx, mdy) - }) - document.addEventListener("mousemove", function(e){ - if (dragging) { - e.stopPropagation() - - var rect = canvas.getBoundingClientRect() - var mnx = e.pageX - rect.left - var mny = e.pageY - rect.top - - mdx = (mnx - mx) / scale - mdy = (mny - my) / scale - - if (creating) { - hud.update( mdx, mdy ) - } - else if (moving) { - cam.x = cx - mdx - cam.z = cy + mdy - } - else { - center.x = cx - mdx - center.y = cy - mdy - hud.update(center.x, center.y) - } - - base.tube("mousedrag", e, -mdx, mdy) - } - else { - positionFromMouse(e) - hud.update( mdx, mdy ) - base.tube("mousemove", e, -mdx, mdy) - } - }) - document.addEventListener("mouseup", function(e){ - creating = dragging = moving = false; - base.tube("mouseup", e) - }) - - canvas.addEventListener("contextmenu", function(e){ - e.preventDefault() - e.stopPropagation() - dragging = true - - positionFromMouse(e) - - moving = true - cx = cam.x = -mdx - cy = cam.z = mdy - - hud.update( mdx, mdy ) - - base.tube("contextmenu", e) - }) - - canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); - canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false); - function onDocumentMouseWheel (e) { - e.preventDefault() - e.stopPropagation() - var delta = 0 - - // WebKit - if ( event.wheelDeltaY ) { - delta = - event.wheelDeltaY * 0.0003; - } - // Opera / Explorer 9 - else if ( event.wheelDelta ) { - delta = - event.wheelDelta * 0.0003; - } - // Firefox - else if ( event.detail ) { - delta = event.detail * 0.01; - } - - if (! e.shiftKey) { - zoom += delta - } - - positionFromMouse(e) - base.tube("mousewheel", e, mdx, mdy, delta) - - map.update() - } - - window.addEventListener('resize', resize) - - this.toggle = function(){ - (visible = ! visible) ? base.show() : base.hide() - } - this.show = function(){ - parent.style.display = "block" - resize() - } - this.hide = function(){ - parent.style.display = "none" - } - - var hud = new function(){ - var el = document.querySelector("#map .hud") - this.update = function(){ - el.innerHTML = Array.prototype.slice.call(arguments,0).map(function(s){ return typeof s == "number" ? Math.round(s) : s }).join(" ") - } - } - hud.update() - - this.update() - document.querySelector("#map .el").appendChild(canvas) -} - diff --git a/public/assets/javascripts/map/map_editor.js b/public/assets/javascripts/map/map_editor.js deleted file mode 100644 index 754172b..0000000 --- a/public/assets/javascripts/map/map_editor.js +++ /dev/null @@ -1,102 +0,0 @@ -var editor = new function (){ - - var base = this; - - var cube = null - var cx, cy - - base.init = function(){ - map.on("mousedown", base.mousedown) - map.on("mousemove", base.mousemove) - map.on("mousedrag", base.mousedrag) - map.on("mouseup", base.mouseup) - map.on("mousewheel", base.mousewheel) - document.getElementById("export").addEventListener("keydown", base.stopPropagation) - document.getElementById("export").addEventListener("mousedown", base.stopPropagation) - document.getElementById("export").addEventListener("mousemove", base.stopPropagation) - document.getElementById("export").addEventListener("mouseup", base.stopPropagation) - window.addEventListener('keydown', base.keydown) - } - - base.mousedown = function(e,x,y) { - if (! e.shiftKey) return - cx = x - cy = y - cube = new MX.BoxDimensions({ - x: cx, - y: -10, - z: cy, - width: 1, - height: 1, - depth: 1, - borderWidth: 1, - borderColor: "#000", - color: "#fff" - }) - cube.persisted = false - scene.add( cube ); - } - - base.mousemove = function(e,x,y) { - } - - base.mousedrag = function(e,dx,dy) { - if (! cube) return - cube.x = cx + dx/2 - cube.z = cy + dy/2 - cube.setWidth( abs(dx) ) - cube.setDepth( abs(dy) ) - cube.setHeight( max( cube.width, cube.depth ) ) - cube.update() - } - - base.mouseup = function(e){ - cube = null - } - - base.mousewheel = function(e,x,z,delta){ - if (! e.shiftKey) return; - - scene.inner.children.some(function(s){ - if (s.contains(-x, null, z)) { - s.y += delta * 1000 - s.persisted = false - console.log(s.id) - return true - } - return false - }) - - } - - base.stopPropagation = function(e){ e.stopPropagation() } - - base.exportObjects = function(){ - var s = scene.inner.children - .filter(function(s){ return ! s.persisted }) - .map(function(s){ return s.toString() }) - .join("\n\n") - document.getElementById("export").value = s - } - - base.exportCamera = function(){ - var s = scene.camera.toString() - document.getElementById("export").value = s - console.log(s) - } - - base.keydown = function(e){ - switch (e.keyCode) { - - case 67: // c - base.exportCamera() - break; - - case 86: // v - base.exportObjects() - break; - - } - } - -} diff --git a/public/assets/javascripts/mx/mx.minimap.js b/public/assets/javascripts/mx/mx.minimap.js deleted file mode 100644 index 252305c..0000000 --- a/public/assets/javascripts/mx/mx.minimap.js +++ /dev/null @@ -1,211 +0,0 @@ -MX.Minimap = function () { - var canvas = document.createElement("canvas") - var ctx = canvas.getContext("2d") - var w = canvas.width = 200 - var h = canvas.height = 200 - - var gridSpace; - var zoom = 2.7 - - var gridStroke = '#ddd' - var boxFill = '#fff' - var boxStroke = '#000' - var playerColor = '#888' - - var xmin, xmax, ymin, ymax, xpos, ypos, scale, side; - - this.update = function(){ - this.draw() - } - - this.bounds = function(){ - gridSpace = Math.pow(10, ~~(zoom-0.5)+0.5) - side = Math.pow(10, zoom+1) - scale = w / side - xpos = -cam.x - ypos = cam.z - - xmin = side/-2 - xpos - xmax = side/2 - xpos - ymin = side/-2 - ypos - ymax = side/2 - ypos - } - - this.draw = function(){ - ctx.clearRect(0,0,w,h) - - ctx.fillStyle = "#fff" - ctx.fillRect(0,0,w,h) - this.bounds() - this.grid() - this.boxes() - this.player() - } - - this.grid = function(){ - ctx.strokeStyle = gridStroke - ctx.lineWidth = 1 - ctx.fillStyle = "transparent" - - var xmod = xmin-(xmin % gridSpace) - var ymod = ymin-(ymin % gridSpace) - - for (var x = xmin; x < xmax+gridSpace; x += gridSpace) { - var xline = (x-xmod) * scale - line(xline, 0, xline, h) - } - for (var y = ymin; y < ymax+gridSpace; y += gridSpace) { - var yline = (y-ymod) * scale - line(0, yline, w, yline) - } - - function line(x0,y0,x1,y1) { - ctx.beginPath() - ctx.moveTo(x0, y0) - ctx.lineTo(x1, y1) - ctx.stroke() - } - } - this.player = function(){ - ctx.save() - - ctx.translate(~~(w/2),~~(h/2)); - ctx.rotate(-cam.rotationY) - - var radius = 5 - - ctx.fillStyle = playerColor; - - ctx.beginPath(); - ctx.arc(0, 0, radius, 0, 2*Math.PI, false); - ctx.fill(); - - ctx.beginPath(); - ctx.moveTo(0,0) - ctx.lineTo(-radius,0) - ctx.lineTo(0,radius*3) - ctx.lineTo(radius,0) - ctx.moveTo(0,0) - ctx.fill() - - ctx.fillStyle = "transparent" - ctx.restore() - } - - this.boxes = function(){ - - ctx.save() - ctx.translate(~~(w/2),~~(h/2)); - ctx.lineWidth = 0.5 - var tx = ((-xpos) * scale), - ty = ((-ypos) * scale); - ctx.translate(tx, ty) - - scene.inner.children.forEach(function(obj){ - if (obj.type == "BoxDimensions") { - - ctx.save() - ctx.fillStyle = obj.color - ctx.strokeStyle = obj.borderColor - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * obj_scale), - ty = ~~((obj.z) * obj_scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - var hh = ~~(obj.depth/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, hh) - - ctx.lineTo(ww, -hh) - ctx.lineTo(-ww, -hh) - ctx.lineTo(-ww, hh) - ctx.closePath() - ctx.fill() - ctx.stroke() - ctx.restore() - } - if (obj.type == "Image") { - - ctx.save() - ctx.strokeStyle = "#444" - - var obj_scale = (obj.scale || 1) * scale - - var tx = ~~((obj.x) * obj_scale), - ty = ~~((obj.z) * obj_scale); - ctx.translate(-tx, ty) - ctx.rotate(-obj.rotationY) - - var ww = ~~(obj.width/2 * obj_scale) - ctx.beginPath(); - ctx.moveTo(ww, 0) - ctx.lineTo(-ww, 0) - ctx.closePath() - ctx.stroke() - ctx.restore() - } - }) - ctx.restore() - } - - var dragging = false, mx = 0, my = 0, mdx = 0, mdy = 0, cx, cy; - canvas.addEventListener("mousedown", function(e){ - e.stopPropagation() - var rect = canvas.getBoundingClientRect() - dragging = true; - mx = e.pageX - rect.left - my = e.pageY - rect.top - mdx = (mx - w/2) / scale - mdy = (my - h/2) / scale - cx = cam.x // -= mdx - cy = cam.z // += mdy - - minimap.update() - }) - document.addEventListener("mousemove", function(e){ - if (dragging) { - e.stopPropagation() - var rect = canvas.getBoundingClientRect() - var mnx = e.pageX - rect.left - var mny = e.pageY - rect.top - mdx = (mnx - mx) / scale - mdy = (mny - my) / scale - - cam.x = cx + mdx - cam.z = cy - mdy - minimap.update() - } - }) - document.addEventListener("mouseup", function(e){ - dragging = false; - }) - - canvas.addEventListener( 'mousewheel', onDocumentMouseWheel, false ); - canvas.addEventListener( 'DOMMouseScroll', onDocumentMouseWheel, false); - function onDocumentMouseWheel (e) { - e.preventDefault() - e.stopPropagation() - // WebKit - if ( event.wheelDeltaY ) { - zoom -= event.wheelDeltaY * 0.0003; - } - // Opera / Explorer 9 - else if ( event.wheelDelta ) { - zoom -= event.wheelDelta * 0.0003; - } - // Firefox - else if ( event.detail ) { - zoom += event.detail * 0.01; - } - minimap.update() - } - - this.draw() - document.querySelector("#minimap .el").appendChild(canvas) - - return this; -} \ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.box.js b/public/assets/javascripts/mx/primitives/mx.box.js deleted file mode 100644 index dfe3f5e..0000000 --- a/public/assets/javascripts/mx/primitives/mx.box.js +++ /dev/null @@ -1,62 +0,0 @@ -MX.Box = MX.Object3D.extend({ - - // this will be called within the contructor - init: function (size, color, borderColor) { - - this.type = "Box" - - 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('box') - - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) - - var top = this.top = new MX.Object3D('.face') - top.rotationX = angle - top.y = size / 2 - - var bottom = this.bottom = new MX.Object3D('.face') - bottom.rotationX = -angle - bottom.y = -size / 2 - - var left = this.left = new MX.Object3D('.face') - left.rotationY = -angle - left.x = -size / 2 - - var right = this.right = new MX.Object3D('.face') - right.rotationY = angle - right.x = size / 2 - - var front = this.front = new MX.Object3D('.face') - front.z = -size / 2 - - var back = this.back = new MX.Object3D('.face') - back.rotationY = angle * 2 - back.z = size / 2 - - // adding children, must also be instances of Object3D - this.add(top, bottom, left, right, front, back) - - 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 - -}) \ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js b/public/assets/javascripts/mx/primitives/mx.boxDimensions.js deleted file mode 100644 index 1d457ae..0000000 --- a/public/assets/javascripts/mx/primitives/mx.boxDimensions.js +++ /dev/null @@ -1,154 +0,0 @@ -MX.BoxDimensions = MX.Object3D.extend({ - - // this will be called within the contructor - init: function (opt) { - - var base = this - - this.type = "BoxDimensions" - - var id = this.id = opt.id || _.uniqueId() - this.x = opt.x || 0 - this.y = opt.y || 0 - this.z = opt.z || 0 - // this.scale = opt.scale || 1 - var scale = opt.scale || 1 - this.rotationX = opt.rotationX || 0 - this.rotationY = opt.rotationY || 0 - this.rotationZ = opt.rotationZ || 0 - var width = this.width = opt.width || 100 - var height = this.height = opt.height || 100 - var depth = this.depth = opt.depth || 100 - var color = this.color = opt.color || 'rgba(0, 255, 122, .1)' - var backgroundImage = this.backgroundImage = opt.backgroundImage; - var borderColor = this.borderColor = opt.borderColor || '#0f3' - var borderWidth = this.borderWidth = typeof opt.borderWidth !== 'undefined' ? opt.borderWidth : 3; - var borderRadius = this.borderRadius = typeof opt.borderRadius !== 'undefined' ? opt.borderRadius : undefined; - var sides = this.sides = opt.sides || "top bottom left right front back" - var className = this.className = opt.className || null - - // an Object3D's associated DOM node is the "el" property - this.el.classList.add('box') - - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) - - this.top = this.bottom = this.left = this.right = this.front = this.back = null - if (-1 != sides.indexOf("top")) { - var top = this.top = new MX.Object3D('.face.top') - top.rotationX = angle - top.width = width - top.height = depth - top.y = height * scale - top.scale = scale - this.add(top) - } - if (-1 != sides.indexOf("bottom")) { - var bottom = this.bottom = new MX.Object3D('.face.bottom') - bottom.rotationX = -angle - bottom.width = width - bottom.height = depth - bottom.y = 0 - bottom.scale = scale - this.add(bottom) - } - if (-1 != sides.indexOf("left")) { - var left = this.left = new MX.Object3D('.face.left') - left.rotationY = -angle - left.width = depth - left.height = height - left.x = -width/2 * scale - left.y = height/2 * scale - left.scale = scale - this.add(left) - } - if (-1 != sides.indexOf("right")) { - var right = this.right = new MX.Object3D('.face.right') - right.rotationY = angle - right.width = depth - right.height = height - right.x = width/2 * scale - right.y = height/2 * scale - right.scale = scale - this.add(right) - } - if (-1 != sides.indexOf("front")) { - var front = this.front = new MX.Object3D('.face.front') - front.width = width - front.height = height - front.z = -depth/2 * scale - front.y = height/2 * scale - front.scale = scale - this.add(front) - } - if (-1 != sides.indexOf("back")) { - var back = this.back = new MX.Object3D('.face.back') - back.width = width - back.height = height - back.rotationY = angle * 2 - back.z = depth/2 * scale - back.y = height/2 * scale - back.scale = scale - this.add(back) - } - - this.children.forEach(function (face) { - if (borderRadius) { - face.el.style.borderRadius = borderRadius + "px" - } - if (className) { - face.el.classList.add(className) - } - else { - if (backgroundImage) { - face.el.style.backgroundImage = "url(" + backgroundImage + ")" - } - else if (color) { - face.el.style.backgroundColor = color - } - if (borderWidth) { - face.el.style.border = borderWidth + 'px solid ' + borderColor - } - } - }) - - // bottom.el.style.border = "0" - - // 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 = true - - this.setWidth = function(w){ - base.width = top.width = bottom.width = front.width = back.width = w - left.x = -w/2 - right.x = w/2 - base.dirty = true - } - this.setHeight = function(h){ - base.height = left.height = right.height = front.height = back.height = h - bottom.y = 0 - left.y = right.y = front.y = back.y = h/2 - top.y = h - base.dirty = true - } - this.setDepth = function(d){ - base.depth = top.height = bottom.height = left.width = right.width = d - front.z = -d/2 - back.z = d/2 - base.dirty = true - } - - }, - - toString: function(){ - var params = "id width height depth x y z rotationX rotationY scale color borderColor borderWidth backgroundImage borderRadius sides".split(" ") - return this.__toString(params) - }, - - // other properties will be mixed into the prototype of the new constructor - -}) \ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.coords.js b/public/assets/javascripts/mx/primitives/mx.coords.js deleted file mode 100644 index 80b148c..0000000 --- a/public/assets/javascripts/mx/primitives/mx.coords.js +++ /dev/null @@ -1,61 +0,0 @@ -MX.Coords = (function () { - - var colors = { - x: '#f33', - y: '#3f3', - z: '#66f' - } - - var Axis = MX.Object3D.extend({ - init: function (axis, size) { - - var label = document.createElement('span') - label.textContent = axis.toUpperCase() - label.style.position = 'absolute' - label.style.right = '0px' - label.style.bottom = '3px' - label.style.fontSize = Math.round(size / 10) + 'px' - this.el.appendChild(label) - - var faceA = new MX.Object3D(), - faceB = new MX.Object3D() - faceA.rotationX = 90 - this.add(faceA, faceB) - - this.el.style.color = - faceA.el.style.backgroundColor = - faceB.el.style.backgroundColor = colors[axis] - - this.width = - faceA.width = - faceB.width = size - - this.height = - faceA.height = - faceB.height = Math.round(size / 100) - - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) - - if (axis === 'y') { - this.rotationZ = -angle - } else if (axis === 'z') { - this.rotationY = angle - } - } - }) - - var Coords = MX.Object3D.extend({ - init: function (size) { - size = size || 100 - var x = new Axis('x', size), - y = new Axis('y', size), - z = new Axis('z', size) - this.add(x, y, z) - this.update() - this.updateChildren = false - } - }) - - return Coords - -})() \ No newline at end of file diff --git a/public/assets/javascripts/mx/primitives/mx.cutout.js b/public/assets/javascripts/mx/primitives/mx.cutout.js deleted file mode 100644 index 9d9043f..0000000 --- a/public/assets/javascripts/mx/primitives/mx.cutout.js +++ /dev/null @@ -1,66 +0,0 @@ -MX.Cutout = MX.Object3D.extend({ - init: function (ops) { - - this.type = "Cutout" - - var layer = this - layer.width = 0 - layer.height = 0 - - if (ops.src) this.loadTexture(ops) - - if (ops.texture) { - } - else if (ops.classname) { - layer.el.classList.add(ops.classname) - } - else { - } - layer.el.style.backgroundRepeat = 'no-repeat' - - this.dirty = true - this.updateChildren = true - this.update() - }, - - loadTexture: function(ops){ - var layer = this - var image = new Image() - var pattern = ops.pattern - var texture = ops.texture - - image.onload = function(){ - var canvas = document.createElement("canvas") - var ctx = canvas.getContext('2d') - - layer.width = canvas.width = image.naturalWidth - layer.height = canvas.height = image.naturalHeight - - ctx.drawImage(image, 0, 0, canvas.width, canvas.height) - ctx.globalCompositeOperation = "source-in" - - if (texture) { - ctx.fillStyle = ctx.createPattern(texture, 'repeat') - ctx.fillRect(0, 0, canvas.width, canvas.height) - } - if (pattern) { - ctx.fillStyle = ctx.createPattern(pattern, 'repeat') - ctx.fillRect(0, 0, canvas.width, canvas.height) - } - - layer.scale = ops.scale || 1 - layer.x = ops.x || 0 - layer.y = (ops.y || 0) + layer.height/2 + 1 - layer.z = ops.z || 0 - layer.rotationX = ops.rotationX || 0 - layer.rotationY = ops.rotationY || 0 - layer.el.appendChild(canvas) - - layer.el.classList.add('image') - ops.className && layer.el.classList.add(ops.className) - layer.dirty = true - layer.update() - } - image.src = ops.src; - } -}) diff --git a/public/assets/javascripts/mx/primitives/mx.embed.js b/public/assets/javascripts/mx/primitives/mx.embed.js deleted file mode 100644 index f15ec98..0000000 --- a/public/assets/javascripts/mx/primitives/mx.embed.js +++ /dev/null @@ -1,66 +0,0 @@ -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.scaleBox.js b/public/assets/javascripts/mx/primitives/mx.scaleBox.js deleted file mode 100644 index f635345..0000000 --- a/public/assets/javascripts/mx/primitives/mx.scaleBox.js +++ /dev/null @@ -1,140 +0,0 @@ -MX.ScaleBox = MX.Object3D.extend({ - - // this will be called within the contructor - init: function (opt) { - - var base = this - - this.type = "ScaleBox" - - var id = this.id = opt.id || _.uniqueId() - this.x = opt.x || 0 - this.y = opt.y || 0 - this.z = opt.z || 0 - this.rotationX = opt.rotationX || 0 - this.rotationY = opt.rotationY || 0 - this.rotationZ = opt.rotationZ || 0 - var scale = this.scale = opt.scale || 1 - var width = this.width = scale * (opt.width || 100) - var height = this.height = scale * (opt.height || 100) - var depth = this.depth = scale * (opt.depth || 100) - var color = this.color = opt.color || 'rgba(0, 255, 122, .1)' - var sides = this.sides = opt.sides || "top bottom left right front back" - - // an Object3D's associated DOM node is the "el" property - this.el.classList.add('box') - - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2) - - var top = this.top = new MX.Object3D('.face.top') - top.rotationX = angle - top.width = 1 - top.height = 1 - top.scaleX = width - top.scaleY = 1 - top.scaleZ = depth - top.y = height - - var bottom = this.bottom = new MX.Object3D('.face.bottom') - bottom.rotationX = -angle - bottom.width = 1 - bottom.height = 1 - bottom.scaleX = width - bottom.scaleY = 1 - bottom.scaleZ = depth - bottom.y = 0 - - var left = this.left = new MX.Object3D('.face.left') - left.rotationY = -angle - left.width = 1 - left.height = 1 - left.scaleX = 1 - left.scaleY = height - left.scaleZ = depth - left.x = -width/2 - left.y = height/2 - - var right = this.right = new MX.Object3D('.face.right') - right.rotationY = angle - right.width = 1 - right.height = 1 - right.scaleX = 1 - right.scaleY = height - right.scaleZ = depth - right.x = width/2 - right.y = height/2 - - var front = this.front = new MX.Object3D('.face.front') - front.width = 1 - front.height = 1 - front.scaleX = width - front.scaleY = height - front.scaleZ = 1 - front.z = -depth/2 - front.y = height/2 - - var back = this.back = new MX.Object3D('.face.back') - back.width = 1 - back.height = 1 - back.scaleX = width - back.scaleY = height - back.scaleZ = 1 - back.rotationY = angle * 2 - back.z = depth/2 - back.y = height/2 - - // adding children, must also be instances of Object3D - if (-1 != sides.indexOf("top")) this.add(top) - if (-1 != sides.indexOf("bottom")) this.add(bottom) - if (-1 != sides.indexOf("left")) this.add(left) - if (-1 != sides.indexOf("right")) this.add(right) - if (-1 != sides.indexOf("front")) this.add(front) - if (-1 != sides.indexOf("back")) this.add(back) - - this.children.forEach(function (face) { - face.el.style.backgroundColor = color - }) - - // 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 = true - - this.setWidth = function(w){ - base.width = top.width = bottom.width = front.width = back.width = w - left.x = -w/2 - right.x = w/2 - base.dirty = true - } - this.setHeight = function(h){ - base.height = left.height = right.height = front.height = back.height = h - bottom.y = 0 - left.y = right.y = front.y = back.y = h/2 - top.y = h - base.dirty = true - } - this.setDepth = function(d){ - base.depth = top.height = bottom.height = left.width = right.width = d - front.z = -d/2 - back.z = d/2 - base.dirty = true - } - - }, - - toString: function(){ - var params = "id width height depth x y z rotationX rotationY color sides".split(" ") - return this.__toString(params) - }, - - clone: function(){ - return new MX[this.type] (this) - } - - // other properties will be mixed into the prototype of the new constructor - -}) diff --git a/public/assets/javascripts/mx/primitives/mx.tableau.js b/public/assets/javascripts/mx/primitives/mx.tableau.js deleted file mode 100644 index 514e206..0000000 --- a/public/assets/javascripts/mx/primitives/mx.tableau.js +++ /dev/null @@ -1,48 +0,0 @@ - - -var Tableau = function(){ - this.extend = extend.bind(Tableau) - - function extend (props) { - var Super = this - var ExtendedTableau = function () { - Super.call(this) - props.init && props.init.apply(this, arguments) - } - ExtendedTableau.prototype = Object.create(Tableau.prototype) - for (var prop in props) { - if (props.hasOwnProperty(prop) && prop !== 'init') { - ExtendedTableau.prototype[prop] = props[prop] - } - } - ExtendedTableau.extend = extend.bind(ExtendedTableau) - return ExtendedTableau - } -} - -Tableau.prototype.init = function(opt){} -Tableau.prototype.animate = function(t){} -Tableau.prototype.show = function(){} -Tableau.prototype.hide = function(){} - -MX.Tableau = new Tableau() -MX.Tableaux = {} - -/* - -MX.Tableaux.Foo = MX.Tableau.extend({ - // this will be called within the contructor - init: function (opt) { - }, - - show: function(){ - }, - - hide: function(){ - }, - - animate: function() { - } -}) - -*/ diff --git a/public/assets/javascripts/mx/primitives/mx.texturedBox.js b/public/assets/javascripts/mx/primitives/mx.texturedBox.js deleted file mode 100644 index daec2d8..0000000 --- a/public/assets/javascripts/mx/primitives/mx.texturedBox.js +++ /dev/null @@ -1,121 +0,0 @@ -// Creates a box using a given texture image. -// Uses a texture image like this: -// -// ---------- ---------- -// | | | -// | top | bottom | -// | | | -// ---------- ---------- ---------- ---------- -// | | | | | -// | left | front | right | back | -// | | | | | -// ---------- ---------- ---------- ---------- -// -// See `examples/images/skins/` for some minecraft skin examples. - -// Options: -// -// - {number} `width` -// - {number} `height` -// - {number} `depth` -// - {string} `texture` path to texture image -// - {string} `classname` class to be added to dom element - -MX.TexturedBox = MX.Object3D.extend({ - - init: function (ops) { - - this.type = "TexturedBox" - - if (!ops.width || !ops.height || !ops.depth || (!ops.texture && !ops.classname)) { - console.warn('TextureBox: missing arguments') - return - } - - // faces - var angle = MX.rotationUnit === 'deg' ? 90 : (Math.PI / 2), - offsetX = ops.offset ? (ops.offset.x || 0) : 0, - offsetY = ops.offset ? (ops.offset.y || 0) : 0, - overlap = ops.overlap ? ops.overlap : 0 - var multiTexture = typeof ops.texture == "object"; - - var top = this.top = new MX.Object3D() - top.width = ops.width - top.height = ops.depth - top.rotationX = angle - top.y = ops.height / 2 - overlap - if (!multiTexture) - top.el.style.backgroundPosition = - (-(offsetX + ops.depth) + 'px ') + - (-offsetY + 'px') - - var bottom = this.bottom = new MX.Object3D() - bottom.width = ops.width - bottom.height = ops.depth - bottom.rotationX = -angle - bottom.y = -ops.height / 2 + overlap - if (!multiTexture) - bottom.el.style.backgroundPosition = - (-(offsetX + ops.depth + ops.width) + 'px ') + - (-offsetY + 'px') - - var left = this.left = new MX.Object3D() - left.width = ops.depth - left.height = ops.height - left.rotationY = -angle - left.x = -ops.width / 2 + overlap - if (!multiTexture) - left.el.style.backgroundPosition = - (-offsetX + 'px ') + - (-(offsetY + ops.depth) + 'px') - - var right = this.right = new MX.Object3D() - right.width = ops.depth - right.height = ops.height - right.rotationY = angle - right.x = ops.width / 2 - overlap - if (!multiTexture) - right.el.style.backgroundPosition = - (-(offsetX + ops.depth + ops.width) + 'px ') + - (-(offsetY + ops.depth) + 'px') - - var front = this.front = new MX.Object3D() - front.width = ops.width - front.height = ops.height - front.z = -ops.depth / 2 + overlap - if (!multiTexture) - front.el.style.backgroundPosition = - (-(offsetX + ops.depth) + 'px ') + - (-(offsetY + ops.depth) + 'px') - - var back = this.back = new MX.Object3D() - back.width = ops.width - back.height = ops.height - back.rotationY = angle * 2 - back.z = ops.depth / 2 - overlap - if (!multiTexture) - back.el.style.backgroundPosition = - (-(offsetX + ops.depth * 2 + ops.width) + 'px ') + - (-(offsetY + ops.depth) + 'px') - - this.add(top, bottom, left, right, front, back) - - this.children.forEach(function (c,i) { - if (multiTexture) { - c.el.style.backgroundImage = 'url(' + ops.texture[i] + ')' - } - else if (ops.texture) { - c.el.style.backgroundImage = 'url(' + ops.texture + ')' - } - if (ops.classname) { - c.el.classList.add(ops.classname) - } - c.el.style.backgroundRepeat = 'no-repeat' - }) - - this.update() - this.updateChildren = false - - } - -}) diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js new file mode 100644 index 0000000..b65f35a --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -0,0 +1,58 @@ +MX.Vimeo = MX.Object3D.extend({ + + init: function (ops) { + + 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 = layer.ops.rotationX || 0 + layer.rotationY = layer.ops.rotationY || 0 + layer.rotationZ = layer.ops.rotationZ || 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 + }, + + 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 new file mode 100644 index 0000000..068ef9f --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -0,0 +1,58 @@ +MX.Youtube = MX.Object3D.extend({ + + init: function (ops) { + + 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 = layer.ops.rotationX || 0 + layer.rotationY = layer.ops.rotationY || 0 + layer.rotationZ = layer.ops.rotationZ || 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 + }, + + 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/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6a50c04..6799aa7 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -49,7 +49,8 @@ - + + @@ -84,3 +85,7 @@ + + + + \ No newline at end of file -- cgit v1.2.3-70-g09d2 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 --- .../assets/javascripts/mx/primitives/mx.video.js | 27 +++++++++------ .../assets/javascripts/mx/primitives/mx.vimeo.js | 6 ++-- .../assets/javascripts/mx/primitives/mx.youtube.js | 6 ++-- .../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 ++++++++++++++++++++++ public/assets/javascripts/ui/editor/MediaViewer.js | 1 - public/assets/stylesheets/app.css | 12 +++++-- server/lib/api/media.js | 1 + server/lib/upload.js | 4 ++- 12 files changed, 125 insertions(+), 61 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/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c9ec339..b2727c0 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -4,11 +4,14 @@ MX.Video = MX.Object3D.extend({ this.type = "Video" var layer = this - layer.width = 0 - layer.height = 0 + 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 @@ -30,15 +33,22 @@ MX.Video = MX.Object3D.extend({ loadVideo: function(ops){ var layer = this - layer.ops = defaults(ops, layer.ops) var video = document.createElement('video') video.addEventListener("loadedmetadata", function(){ - // - video.play() + 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.el.appendChild(video) }, move: function(ops){ @@ -49,11 +59,6 @@ MX.Video = MX.Object3D.extend({ } 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.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index b65f35a..b8efa17 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -11,9 +11,9 @@ MX.Vimeo = MX.Object3D.extend({ layer.x = ops.x || 0 layer.y = ops.y || 0 layer.z = ops.z || 0 - layer.rotationX = layer.ops.rotationX || 0 - layer.rotationY = layer.ops.rotationY || 0 - layer.rotationZ = layer.ops.rotationZ || 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 diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 068ef9f..3756d80 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -11,9 +11,9 @@ MX.Youtube = MX.Object3D.extend({ layer.x = ops.x || 0 layer.y = ops.y || 0 layer.z = ops.z || 0 - layer.rotationX = layer.ops.rotationX || 0 - layer.rotationY = layer.ops.rotationY || 0 - layer.rotationZ = layer.ops.rotationZ || 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 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 +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index b5398ff..88c3b18 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -67,7 +67,6 @@ var MediaViewer = ModalView.extend({ 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() diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 53365b7..a2b5d8c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -511,19 +511,27 @@ h5 { cursor: -webkit-grabbing; cursor: -moz-grabbing; } -.mx-object3d.image, .mx-object3d canvas, +.mx-object3d.image, +.mx-object3d.video, +.mx-object3d canvas, .mx-object3d.backface-hidden { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; } -.mx-object3d.backface-visible, .mx-object3d.backface-visible canvas{ +.mx-object3d.backface-visible, +.mx-object3d.backface-visible canvas{ -webkit-backface-visibility: visible; -moz-backface-visibility: visible; -ms-backface-visibility: visible; backface-visibility: visible; } +.mx-object3d iframe, +.mx-object3d video { + pointer-events: none; +} + #hud { position: fixed; top:0;left:0; diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 48446ca..9699c16 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -32,6 +32,7 @@ var media = { data.type = "image" upload.put("media", req.files.image, { + username: req.user.username, unacceptable: function(err){ res.json({ error: { errors: { avatar: { message: "Problem saving image: " + err } } } }) }, diff --git a/server/lib/upload.js b/server/lib/upload.js index a5d7871..0f6c624 100644 --- a/server/lib/upload.js +++ b/server/lib/upload.js @@ -24,7 +24,9 @@ module.exports.put = function (key, file, opt) { var ts = moment().format('YYYYMMDD') var extension = acceptableuploadTypes[file.mimetype] - filename = (+now) + "-" + filename = (+now) + + (opt.username ? "-" + opt.username : "") + + "-" + file.originalname.replace(/\..*$/,"") .replace(/[^0-9a-zA-Z]+/g,"-") .substr(-128) -- cgit v1.2.3-70-g09d2 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 (limited to 'public/assets/javascripts/mx/primitives') 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 From 06f4b34b8670d6dcebfd7b000dd2921ca778dfae Mon Sep 17 00:00:00 2001 From: Julie Lala Date: Wed, 25 Jun 2014 00:22:50 -0400 Subject: yt, vimeo, video api --- .../assets/javascripts/mx/primitives/mx.video.js | 99 +++++++++++++--------- .../assets/javascripts/mx/primitives/mx.vimeo.js | 91 ++++++++++++++------ .../assets/javascripts/mx/primitives/mx.youtube.js | 56 +++++++++++- .../rectangles/engine/scenery/types/vimeo.js | 2 - .../rectangles/engine/scenery/types/youtube.js | 2 - .../javascripts/ui/builder/BuilderSettings.js | 6 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 6 +- public/assets/javascripts/ui/editor/EditorView.js | 4 +- public/assets/javascripts/ui/reader/ReaderView.js | 2 +- public/assets/javascripts/ui/site/LayoutsModal.js | 6 +- server/index.js | 22 ++--- 12 files changed, 200 insertions(+), 98 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') 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', diff --git a/server/index.js b/server/index.js index aed0ea1..b008131 100644 --- a/server/index.js +++ b/server/index.js @@ -113,17 +113,17 @@ site.route = function () { app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor) app.get('/project/:slug', middleware.ensureProject, views.editor) - app.get('/api/layouts', middleware.ensureAuthenticated, api.layouts.index) - app.get('/api/layouts/:slug', middleware.ensureAuthenticated, api.layouts.show) - app.post('/api/layouts/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.create) - app.post('/api/layouts/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.update) - app.delete('/api/layouts/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy) - - app.get('/api/projects', middleware.ensureAuthenticated, api.projects.index) - app.get('/api/projects/:slug', api.projects.show) - app.post('/api/projects/new', middleware.ensureAuthenticated, api.projects.create) - app.post('/api/projects/edit', middleware.ensureAuthenticated, api.projects.update) - app.delete('/api/projects/destroy', middleware.ensureAuthenticated, api.projects.destroy) + app.get('/api/layout', middleware.ensureAuthenticated, api.layouts.index) + app.get('/api/layout/:slug', middleware.ensureAuthenticated, api.layouts.show) + app.post('/api/layout/new', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.create) + app.post('/api/layout/edit', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.update) + app.delete('/api/layout/destroy', middleware.ensureAuthenticated, middleware.ensureIsStaff, api.layouts.destroy) + + app.get('/api/project', middleware.ensureAuthenticated, api.projects.index) + app.get('/api/project/:slug', api.projects.show) + app.post('/api/project/new', middleware.ensureAuthenticated, api.projects.create) + app.post('/api/project/edit', middleware.ensureAuthenticated, api.projects.update) + app.delete('/api/project/destroy', middleware.ensureAuthenticated, api.projects.destroy) app.get('/api/media/user', middleware.ensureAuthenticated, api.media.user) app.post('/api/media/new', middleware.ensureAuthenticated, api.media.create) -- cgit v1.2.3-70-g09d2 From bde9f3e47d66a1c8a334763146671320ac0359f9 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 26 Jun 2014 19:01:11 -0400 Subject: video fix --- public/assets/javascripts/mx/primitives/mx.video.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index 2fbf6be..f750c28 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -37,10 +37,10 @@ MX.Video = MX.Object3D.extend({ ready: function(){ if (this.media.autoplay) { - video.play() + this.player.play() } else { - video.currentTime = video.duration / 3 + this.player.currentTime = this.player.duration / 3 } }, -- cgit v1.2.3-70-g09d2 From 544ee1236d188f1d24654817481abcf8d078facd Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 2 Jul 2014 17:37:13 -0400 Subject: password reset email; also sends email --- package.json | 3 ++- .../assets/javascripts/mx/primitives/mx.youtube.js | 2 +- public/assets/javascripts/ui/_router.js | 21 +++++++++++++++++++++ public/assets/javascripts/ui/site/PasswordForgot.js | 2 +- public/assets/javascripts/ui/site/PasswordReset.js | 6 ++++++ public/assets/javascripts/ui/site/UsernameTaken.js | 6 ++++++ public/assets/stylesheets/app.css | 4 +++- server/index.js | 4 ++-- server/lib/auth/views.js | 2 +- server/lib/util.js | 2 +- views/modal.ejs | 1 + views/partials/sign-in.ejs | 12 ++++++++---- 12 files changed, 53 insertions(+), 12 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/package.json b/package.json index 95af2ab..ca45bff 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,8 @@ "html-entities": "~1.0.10", "multer": "~0.1.0", "body-parser": "1.3.0", - "marked": "~0.3.2" + "marked": "~0.3.2", + "emailjs": "~0.3.6" }, "devDependencies": { "grunt": "~0.4.1", diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 3662d7b..b1d3dfb 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -120,5 +120,5 @@ MX.Youtube = MX.Object3D.extend({ }) window.onYouTubePlayerAPIReady = function(){ - console.log("youtube ready") + // console.log("youtube ready") } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 6d41d5b..fdeafd5 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -5,6 +5,7 @@ var SiteRouter = Router.extend({ events: { "click [data-role='show-signup-modal']": 'signup', "click [data-role='show-signin-modal']": 'signin', + "click [data-role='forgot-password']": 'passwordForgot', "click [data-role='new-project-modal']": 'newProject', "click [data-role='edit-project-modal']": 'editProject', "click [data-role='edit-profile-modal']": 'editProfile', @@ -18,6 +19,11 @@ var SiteRouter = Router.extend({ routes: { "/login": 'signin', "/signup": 'signup', + + "/auth/usernameTaken": 'usernameTaken', + "/auth/password": 'passwordReset', + "/auth/forgotPassword": 'passwordForgot', + "/profile": 'profile', "/profile/edit": 'editProfile', "/about/:name/edit": 'editDocument', @@ -40,6 +46,7 @@ var SiteRouter = Router.extend({ this.newProjectModal = new NewProjectModal() this.editProjectModal = new EditProjectModal() this.editProfileModal = new EditProfileModal() + this.passwordForgotModal = new PasswordForgot() this.documentModal = new DocumentModal() this.route() @@ -122,6 +129,20 @@ var SiteRouter = Router.extend({ this.signInModal.load() }, + usernameTaken: function(e){ + this.usernameTakenModal = new UsernameTaken () + this.usernameTakenModal.load() + }, + passwordForgot: function(e){ + e && e.preventDefault() + window.history.pushState(null, document.title, "/auth/forgotPassword") + this.passwordForgotModal.load() + }, + passwordReset: function(e){ + this.passwordResetModal = new PasswordReset () + this.passwordResetModal.load() + }, + profile: function(e){ var classes = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', diff --git a/public/assets/javascripts/ui/site/PasswordForgot.js b/public/assets/javascripts/ui/site/PasswordForgot.js index 6ac23c0..ecbfc07 100644 --- a/public/assets/javascripts/ui/site/PasswordForgot.js +++ b/public/assets/javascripts/ui/site/PasswordForgot.js @@ -1,6 +1,6 @@ var PasswordForgot = ModalFormView.extend({ el: ".mediaDrawer.passwordForgot", - action: "/auth/passwordForgot", + action: "/auth/forgotPassword", validate: function(){ var errors = [] diff --git a/public/assets/javascripts/ui/site/PasswordReset.js b/public/assets/javascripts/ui/site/PasswordReset.js index 77e8684..9b87d37 100644 --- a/public/assets/javascripts/ui/site/PasswordReset.js +++ b/public/assets/javascripts/ui/site/PasswordReset.js @@ -2,6 +2,12 @@ var PasswordReset = ModalFormView.extend({ el: ".mediaDrawer.passwordReset", action: "/auth/password", + load: function(){ + var opt = JSON.parse( $("#opt").html() ) + this.$("[name=nonce]").val( opt.nonce ) + this.__super__.load.call(this) + }, + validate: function(){ var errors = [] diff --git a/public/assets/javascripts/ui/site/UsernameTaken.js b/public/assets/javascripts/ui/site/UsernameTaken.js index fc651e3..fc9f50a 100644 --- a/public/assets/javascripts/ui/site/UsernameTaken.js +++ b/public/assets/javascripts/ui/site/UsernameTaken.js @@ -2,6 +2,12 @@ var UsernameTaken = ModalFormView.extend({ el: ".mediaDrawer.usernameTaken", action: "/auth/usernameTaken", + load: function(){ + var opt = JSON.parse( $("#opt").html() ) + this.$("#usernameThatIsTaken").html( opt.username ) + this.__super__.load.call(this) + }, + validate: function(){ var errors = [] diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 9c80987..937e5c4 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -729,8 +729,10 @@ h5 { -webkit-transform:translateY(0%); transform:translateY(0%); } +.mediaDrawer.table, .mediaDrawer.error, .mediaDrawer.signin, .mediaDrawer.signup, -.mediaDrawer.alert, .mediaDrawer.confirm, .mediaDrawer.error, +.mediaDrawer.alert, .mediaDrawer.confirm, +.mediaDrawer.passwordForgot, .mediaDrawer.passwordReset, .mediaDrawer.usernameTaken, .mediaDrawer.layouts, .mediaDrawer.projects, .mediaDrawer.newProject { display:table; } diff --git a/server/index.js b/server/index.js index 4b628e4..1db7e04 100644 --- a/server/index.js +++ b/server/index.js @@ -92,8 +92,8 @@ site.route = function () { app.post('/auth/usernameTaken', auth.usernameFixed); app.get('/auth/password', auth.views.resetPassword); app.post('/auth/password', auth.resetPassword); - app.post('/auth/passwordForgot', auth.forgotPassword); - + app.get('/auth/forgotPassword', views.modal); + app.post('/auth/forgotPassword', auth.forgotPassword); app.get('/profile', views.profile) app.get('/profile/edit', views.profile) diff --git a/server/lib/auth/views.js b/server/lib/auth/views.js index 591b06a..cd31248 100644 --- a/server/lib/auth/views.js +++ b/server/lib/auth/views.js @@ -26,7 +26,7 @@ views.resetPassword = function (req, res) { if (err || ! user) { return res.redirect("/") } - res.render("reset-password", { username: user.username, nonce: user.passwordNonce }) + res.render("modal", { opt: { username: user.username, nonce: user.passwordNonce } }) }) } diff --git a/server/lib/util.js b/server/lib/util.js index 6604abe..87e2d54 100644 --- a/server/lib/util.js +++ b/server/lib/util.js @@ -25,7 +25,7 @@ util.capitalize = function (s) { util.capitalizeWord = function (s) { return s.charAt(0).toUpperCase() + s.slice(1); } -util.escapeRegExp: function (s) { +util.escapeRegExp = function (s) { return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&") } diff --git a/views/modal.ejs b/views/modal.ejs index 4550aff..6ed3fa1 100644 --- a/views/modal.ejs +++ b/views/modal.ejs @@ -19,5 +19,6 @@ [[ include partials/scripts ]] + diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs index 11b930f..3f05fff 100644 --- a/views/partials/sign-in.ejs +++ b/views/partials/sign-in.ejs @@ -27,7 +27,8 @@


- Make a new account + Make a new account
+ Forgot your password? @@ -74,9 +75,11 @@ -
+
+ X
+
  • Forgot your password? Enter the email address you used to sign up and we can reset it for you. @@ -98,9 +101,10 @@
    • -
    +
    + Please reset your password.

    @@ -129,7 +133,7 @@
    - We're sorry, the username [[- username ]] is already being used. + We're sorry, the username is already being used.

    Please choose another username.

    -- cgit v1.2.3-70-g09d2 From 89d6385fe4eb58387d4ddca9d799d1b07ef727f0 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 10 Jul 2014 16:18:07 -0400 Subject: defer yt --- .../assets/javascripts/mx/primitives/mx.youtube.js | 29 +++-- public/assets/javascripts/ui/_router.js | 29 +++-- .../assets/javascripts/ui/editor/EditorToolbar.js | 1 + public/assets/javascripts/ui/reader/ReaderView.js | 3 + public/assets/stylesheets/app.css | 21 +++- public/rectangles.html | 124 --------------------- server/index.js | 1 + server/lib/views.js | 25 +++++ views/projects/list-projects.ejs | 5 +- 9 files changed, 88 insertions(+), 150 deletions(-) delete mode 100644 public/rectangles.html (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index b1d3dfb..9925c22 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -24,6 +24,7 @@ MX.Youtube = MX.Object3D.extend({ }, load: function (ops) { + var base = this var uid = 'player-' + Uid () var preload = document.createElement("div") preload.id = uid @@ -34,16 +35,22 @@ 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.defer(uid) + }, + + defer: function (uid){ + if (! YT || ! YT.loaded) { + setTimeout(function(){ + console.log("hwat") + this.defer(uid) + }.bind(this), 300) + } + else { + this.build(uid) + } + }, + + build: function(uid){ this.player = new YT.Player(uid, { videoId: this.media.token, width: this.width, @@ -120,5 +127,5 @@ MX.Youtube = MX.Object3D.extend({ }) window.onYouTubePlayerAPIReady = function(){ - // console.log("youtube ready") + console.log("youtube ready") } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index fdeafd5..ce18b2a 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -35,7 +35,8 @@ var SiteRouter = Router.extend({ "/project": 'projectPicker', "/project/new": 'newProject', "/project/new/:layout": 'projectNewWithLayout', - "/project/:name": 'projectEditor', + "/project/:name": 'project', + "/project/:name/view": 'projectViewer', }, initialize: function(){ @@ -94,21 +95,31 @@ var SiteRouter = Router.extend({ this.editorView.loadLayout(layout) }, - projectEditor: function(e, name){ - app.mode.editor = true - app.launch() - + project: function(e, name){ if ($(".aboutRoom").length) { - this.readerView = new ReaderView() - this.readerView.load(name) + this.projectViewer(e, name) } else { - this.editorView = new EditorView() - this.editorView.load(name) + this.projectEditor(e, name) } }, + projectEditor: function(e, name){ + app.mode.editor = true + app.launch() + + this.editorView = new EditorView() + this.editorView.load(name) + }, + projectViewer: function(e, name){ + app.mode.editor = true + app.launch() + + this.readerView = new ReaderView() + this.readerView.load(name) + }, + /* editProject: function(e){ e && e.preventDefault() diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 210ef6c..4a7c3e8 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -87,6 +87,7 @@ var EditorToolbar = View.extend({ var editor = new function(){ this.permissions = new Permissions({ + 'pick': false, 'move': true, 'resize': false, 'destroy': false, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 7cd629b..860cc04 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -11,6 +11,9 @@ var ReaderView = View.extend({ }, load: function(name){ + if (window.location.search.indexOf("noui") !== -1) { + $(".logo,.topLinks,#editorView").hide() + } name = sanitize(name) $.get(this.projectAction + name, $.proxy(this.ready, this)) }, diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 937e5c4..684761c 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -158,10 +158,21 @@ h5 { .page table.showcase { height:70vh; } -.page table td.border{ - border-right:1px solid; +.page table td.border { + position: relative; + border-right: 1px solid; +} +iframe.embed { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; + border: 0; + z-index: -1; + pointer-events: none; } -.page table td{ +.page table td { width: 33.3333%; background-size: cover; background-repeat: no-repeat; @@ -169,7 +180,7 @@ h5 { border-bottom:1px solid black; } -.page table.showcase td{ +.page table.showcase td { height: 70vh; background-size: cover; } @@ -208,6 +219,7 @@ h5 { color:white; } +/* .room1 { position: relative; overflow: hidden; @@ -261,6 +273,7 @@ h5 { -webkit-transform:translateY(0); transform:translateY(0); } +*/ .page .questions { background: #55efcb; diff --git a/public/rectangles.html b/public/rectangles.html deleted file mode 100644 index befe15c..0000000 --- a/public/rectangles.html +++ /dev/null @@ -1,124 +0,0 @@ - - - - - - - -
    -
    - -
    -
    -
    - -
    - -
    -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/server/index.js b/server/index.js index 1db7e04..038b184 100644 --- a/server/index.js +++ b/server/index.js @@ -121,6 +121,7 @@ site.route = function () { app.get('/project/new', middleware.ensureAuthenticated, views.modal) app.get('/project/new/:layout', middleware.ensureAuthenticated, views.editor) app.get('/project/:slug', middleware.ensureProject, views.editor) + app.get('/project/:slug/view', middleware.ensureProject, views.reader) app.get('/api/layout', middleware.ensureAuthenticated, api.layouts.index) app.get('/api/layout/:slug', middleware.ensureAuthenticated, api.layouts.show) diff --git a/server/lib/views.js b/server/lib/views.js index 000ff4d..89ad646 100644 --- a/server/lib/views.js +++ b/server/lib/views.js @@ -44,6 +44,26 @@ views.editor = function (req, res) { } } +views.reader = function (req, res) { + if (! req.user && ! req.project) { + res.redirect('/') + } + User.findOne({ _id: req.project.user_id }, function(err, user) { + if (err || ! user) { + console.error(err) + res.redirect('/') + return + } + res.render('reader', { + name: util.sanitize(req.project.name), + description: util.sanitize(req.project.description), + date: moment(req.project.updated_at).format("M/DD/YYYY"), + author: user.displayName, + authorlink: "/profile/" + user.username, + }) + }) +} + views.builder = function (req, res) { res.render('builder') } @@ -102,6 +122,11 @@ views.profile = function (req, res) { function next(user){ Project.find({ user_id: user._id }, function(err, projects){ + projects = projects.map(function(project){ + project = project.toObject() + project.date = moment(project.updated_at).format("M/DD/YYYY") + return project + }) done(err, user, projects) }) } diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index 443e26d..42387ba 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -4,12 +4,13 @@ - [[ projects.forEach(function(project) { ]] + [[ projects.forEach(function(project, i) { ]] [[ }) ]] -- cgit v1.2.3-70-g09d2 From b19511eb75c6490ddc97ea59d82615ce4d9e0e91 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 10 Jul 2014 17:15:54 -0400 Subject: use view iframe on profile, spins on hover --- .../assets/javascripts/mx/primitives/mx.youtube.js | 3 +-- public/assets/javascripts/ui/_router.js | 7 ++---- .../assets/javascripts/ui/editor/EditorSettings.js | 2 +- public/assets/javascripts/ui/reader/ReaderView.js | 29 ++++++++++++++++++++++ public/assets/javascripts/ui/site/ProfileView.js | 29 ++++++++++++++++++++++ views/partials/scripts.ejs | 1 + 6 files changed, 63 insertions(+), 8 deletions(-) create mode 100644 public/assets/javascripts/ui/site/ProfileView.js (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 9925c22..118623b 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -41,7 +41,6 @@ MX.Youtube = MX.Object3D.extend({ defer: function (uid){ if (! YT || ! YT.loaded) { setTimeout(function(){ - console.log("hwat") this.defer(uid) }.bind(this), 300) } @@ -127,5 +126,5 @@ MX.Youtube = MX.Object3D.extend({ }) window.onYouTubePlayerAPIReady = function(){ - console.log("youtube ready") + // console.log("youtube api ready") } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index ce18b2a..b3e868a 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -49,6 +49,7 @@ var SiteRouter = Router.extend({ this.editProfileModal = new EditProfileModal() this.passwordForgotModal = new PasswordForgot() this.documentModal = new DocumentModal() + this.profileView = new ProfileView() this.route() @@ -155,11 +156,7 @@ var SiteRouter = Router.extend({ }, profile: function(e){ - var classes = ['one', 'two', 'three', 'four', - 'five', 'six', 'seven', 'eight', - 'nine', 'ten', 'eleven', 'twelve', - 'thirteen']; - $(".bio").addClass(choice(classes)); + this.profileView.load() }, editProfile: function(e){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 35bcbe0..1d68b1b 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -32,7 +32,7 @@ var EditorSettings = FormView.extend({ data.startPosition && scene.camera.move(data.startPosition) if (! data.isNew) { - console.log(data) + // console.log(data) this.$id.val( data._id ) this.$name.val( data.name ) diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index 860cc04..e86856c 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -26,6 +26,35 @@ var ReaderView = View.extend({ data.startPosition && scene.camera.move(data.startPosition) editor.permissions.clear() + + // + + var base = this + + $(window).on('message', function(event){ + if (event.origin !== window.location.origin) { + return + } + var message = event.originalEvent.data + switch (message) { + case "spin-on": + base.spinning = true + break + case "spin-off": + base.spinning = false + break + } + }) + + requestAnimationFrame(this.spin.bind(this)) + }, + + spinning: false, + spin: function(){ + requestAnimationFrame(this.spin.bind(this)) + if (this.spinning) { + scene.camera.rotationY -= 1/180 + } } }) diff --git a/public/assets/javascripts/ui/site/ProfileView.js b/public/assets/javascripts/ui/site/ProfileView.js new file mode 100644 index 0000000..41f04ef --- /dev/null +++ b/public/assets/javascripts/ui/site/ProfileView.js @@ -0,0 +1,29 @@ + +var ProfileView = View.extend({ + + initialize: function(){ + }, + + load: function(){ + var classes = ['one', 'two', 'three', 'four', + 'five', 'six', 'seven', 'eight', + 'nine', 'ten', 'eleven', 'twelve', + 'thirteen']; + $(".bio").addClass(choice(classes)); + + $("td.border").each(function(){ + var iframe = $(this).find("iframe").get('0') + if (! iframe) return + console.log(iframe) + $(this).on({ + mouseenter: function(e){ + iframe.contentWindow.postMessage("spin-on", window.location.origin) + }, + mouseleave: function(e){ + iframe.contentWindow.postMessage("spin-off", window.location.origin) + } + }) + }) + } + +}) diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 9f0c2f2..6dd4480 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -72,6 +72,7 @@ + -- cgit v1.2.3-70-g09d2 From 3aac2d44b49d28c4a3e99d74d6d7769e985c2d02 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 14 Jul 2014 11:25:59 -0400 Subject: play button --- .../assets/javascripts/mx/primitives/mx.video.js | 9 +++- .../assets/javascripts/mx/primitives/mx.vimeo.js | 3 ++ .../assets/javascripts/mx/primitives/mx.youtube.js | 3 ++ .../rectangles/engine/scenery/_scenery.js | 8 +--- .../rectangles/engine/scenery/types/video.js | 25 ++++++++++- .../rectangles/engine/scenery/types/vimeo.js | 49 ---------------------- .../rectangles/engine/scenery/types/youtube.js | 37 ---------------- public/assets/javascripts/ui/editor/MediaEditor.js | 16 ++++++- 8 files changed, 53 insertions(+), 97 deletions(-) delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js delete mode 100644 public/assets/javascripts/rectangles/engine/scenery/types/youtube.js (limited to 'public/assets/javascripts/mx/primitives') 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 + }, }) -- cgit v1.2.3-70-g09d2 From 9825b711480eb5b6022ce6b56b8a6914c5f43e52 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 14 Jul 2014 13:05:57 -0400 Subject: pick initial frame --- .../assets/javascripts/mx/primitives/mx.video.js | 12 ++++-- .../assets/javascripts/mx/primitives/mx.vimeo.js | 43 ++++++++++++++++++---- .../assets/javascripts/mx/primitives/mx.youtube.js | 21 ++++++++--- .../javascripts/rectangles/engine/scenery/move.js | 6 +-- public/assets/javascripts/ui/_router.js | 12 +++--- .../javascripts/ui/builder/BuilderSettings.js | 4 +- .../assets/javascripts/ui/builder/BuilderView.js | 2 +- .../assets/javascripts/ui/editor/EditorSettings.js | 4 +- public/assets/javascripts/ui/editor/EditorView.js | 4 +- public/assets/javascripts/ui/editor/MediaEditor.js | 17 ++++++--- public/assets/javascripts/ui/editor/MediaUpload.js | 8 ++-- public/assets/javascripts/ui/editor/MediaViewer.js | 4 +- public/assets/javascripts/ui/lib/FormView.js | 4 +- public/assets/javascripts/ui/reader/ReaderView.js | 2 +- public/assets/javascripts/ui/site/DocumentModal.js | 4 +- .../assets/javascripts/ui/site/EditProfileModal.js | 4 +- .../assets/javascripts/ui/site/EditProjectModal.js | 4 +- public/assets/javascripts/ui/site/LayoutsModal.js | 6 +-- public/assets/stylesheets/app.css | 10 ++--- views/controls/editor/media-editor.ejs | 2 +- 20 files changed, 111 insertions(+), 62 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index b1b9f6b..f92fe9f 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -28,8 +28,8 @@ MX.Video = MX.Object3D.extend({ this.paused = true this.player = document.createElement('video') - this.player.addEventListener("loadedmetadata", $.proxy(this.ready, this)) - this.player.addEventListener("error", $.proxy(this.error, this)) + this.player.addEventListener("loadedmetadata", this.ready.bind(this)) + this.player.addEventListener("error", this.error.bind(this)) this.player.width = this.width this.player.height = this.height this.player.src = this.media.url @@ -62,7 +62,10 @@ MX.Video = MX.Object3D.extend({ }, seek: function(n){ - this.player.currentTime = n + if (n < 1) { + n = n * this.duration() + } + this.player.currentTime = n }, duration: function(){ @@ -71,6 +74,9 @@ MX.Video = MX.Object3D.extend({ finished: function(){ console.log("video finished") + if (this.media.bound) { + $(".playButton").removeClass('playing') + } }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index e558bc3..5a373ff 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -26,30 +26,34 @@ MX.Vimeo = MX.Object3D.extend({ load: function (ops) { var uid = 'player-' + Uid () - var preload = document.createElement("div") + var preload = document.createElement("iframe") preload.id = uid + preload.setAttribute("src", "//player.vimeo.com/video/" + this.media.token + "?api=1&badge=0&controls=0branding=0&byline=0&player_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.border = "0" preload.style.pointerEvents = "none" preload.className = "preload" this.el.appendChild(preload) - this.player = $f(preload) - this.player.addEvent('ready', $.proxy(this.ready, this)) + + this.player.addEvent('ready', this.ready.bind(this)) }, ready: function(){ console.log("vimeo ready") // wait until ready before binding events. other events: play, pause - this.player.addEvent('finish', $.proxy(this.finished, this)) + this.player.addEvent('play', this.onPlay.bind(this)) + this.player.addEvent('pause', this.onPause.bind(this)) + this.player.addEvent('finish', this.finished.bind(this)) // so annoying that this is async!! - this.player.api('getDuration', $.proxy(function(n){ + this.player.api('getDuration', function(n){ console.log("vimeo duration", n) this.player.duration = n - }, this)) + }.bind(this)) }, @@ -68,14 +72,39 @@ MX.Vimeo = MX.Object3D.extend({ }, seek: function(n){ - this.player.api('seekTo', n) + if (n < 1) { + n = n * this.duration() + } + this.player.api('seekTo', max(0, n-1)) + if (this.paused) { + this.paused = false + this.play() + setTimeout(function(){ + this.pause() + }.bind(this), 1000) + } }, duration: function(){ return this.player.duration }, + onPlay: function(){ + if (this.paused) { + this.pause() + } + }, + + onPause: function(){ + if (! this.paused) { + this.play() + } + }, + finished: function(){ + if (this.media.bound) { + $(".playButton").removeClass('playing') + } } }) diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index cc0ec0a..a31a24d 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -56,9 +56,9 @@ MX.Youtube = MX.Object3D.extend({ width: this.width, height: this.height, events: { - onReady: $.proxy(this.ready, this), - onError: $.proxy(this.error, this), - onStateChange: $.proxy(this.statechange, this), + onReady: this.ready.bind(this), + onError: this.error.bind(this), + onStateChange: this.statechange.bind(this), }, playerVars: { autohide: 1, @@ -93,10 +93,11 @@ MX.Youtube = MX.Object3D.extend({ this.finished() break case 1: // play - this.paused = false + if (this.paused) { + this.pause() + } break case 2: // pause - this.paused = true break case 3: // buffering break @@ -106,15 +107,20 @@ MX.Youtube = MX.Object3D.extend({ }, play: function(){ + this.paused = false this.player.playVideo() }, pause: function(){ + this.paused = true this.player.pauseVideo() }, seek: function(n, allowSeekAhead){ - allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true + if (n < 1) { + n = n * this.duration() + } + allowSeekAhead = typeof allowSeekAhead == "boolean" ? allowSeekAhead : true this.player.seekTo(n, true) // set to false if seeking manually }, @@ -124,6 +130,9 @@ MX.Youtube = MX.Object3D.extend({ finished: function(){ console.log("youtube finished") + if (this.media.bound) { + $(".playButton").removeClass('playing') + } } }) diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index aa7ddd1..6229162 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -27,10 +27,8 @@ Scenery.move = function(base){ return } - if (editor.permissions.pick) { - // load the modal - app.router.editorView.mediaEditor.pick(base) - } + // load the modal + app.router.editorView.mediaEditor.pick(base) if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index b3e868a..886b8be 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -189,13 +189,13 @@ var SiteRouter = Router.extend({ var name = e ? $(e.currentTarget).data("name") : name - confirmModal.confirm("Are you sure you want to delete " + name + "?", $.proxy(function(){ - this.documentModal.destroy(name, $.proxy(function(){ - AlertModal.alert("Document deleted!", $.proxy(function(){ + confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){ + this.documentModal.destroy(name, function(){ + AlertModal.alert("Document deleted!", function(){ window.location.href = "/about" - }, this)) - }, this)) - }, this)) + }.bind(this)) + }.bind(this)) + }.bind(this)) // this.documentModal.destroy(name) }, diff --git a/public/assets/javascripts/ui/builder/BuilderSettings.js b/public/assets/javascripts/ui/builder/BuilderSettings.js index 9fcd55f..6006868 100644 --- a/public/assets/javascripts/ui/builder/BuilderSettings.js +++ b/public/assets/javascripts/ui/builder/BuilderSettings.js @@ -57,7 +57,7 @@ var BuilderSettings = FormView.extend({ destroy: function(){ var msg = "Are you sure you want to delete the layout " + sanitize(this.$name.val()) + "?" - ConfirmModal.confirm(msg, $.proxy(function(){ + ConfirmModal.confirm(msg, function(){ $.ajax({ url: this.destroyAction, type: "delete", @@ -66,7 +66,7 @@ var BuilderSettings = FormView.extend({ window.location.href = "/layout" } }) - }, this)) + }.bind(this)) }, toggle: function(){ diff --git a/public/assets/javascripts/ui/builder/BuilderView.js b/public/assets/javascripts/ui/builder/BuilderView.js index b42d3e7..a83bf43 100644 --- a/public/assets/javascripts/ui/builder/BuilderView.js +++ b/public/assets/javascripts/ui/builder/BuilderView.js @@ -20,7 +20,7 @@ var BuilderView = View.extend({ name = sanitize(name) - $.get(this.action + name, $.proxy(this.ready, this)) + $.get(this.action + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/editor/EditorSettings.js b/public/assets/javascripts/ui/editor/EditorSettings.js index 1d68b1b..887c894 100644 --- a/public/assets/javascripts/ui/editor/EditorSettings.js +++ b/public/assets/javascripts/ui/editor/EditorSettings.js @@ -65,7 +65,7 @@ var EditorSettings = FormView.extend({ destroy: function(){ var msg = "Are you sure you want to delete the project " + sanitize(this.$name.val()) + "?" - ConfirmModal.confirm(msg, $.proxy(function(){ + ConfirmModal.confirm(msg, function(){ $.ajax({ url: this.destroyAction, type: "delete", @@ -74,7 +74,7 @@ var EditorSettings = FormView.extend({ window.location.href = "/project" } }) - }, this)) + }.bind(this)) }, toggle: function(){ diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 017e241..322637e 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -20,12 +20,12 @@ var EditorView = View.extend({ load: function(name){ name = sanitize(name) - $.get(this.projectAction + name, $.proxy(this.ready, this)) + $.get(this.projectAction + name, this.ready.bind(this)) }, loadLayout: function(layout){ layout = sanitize(layout) - $.get(this.layoutAction + layout, $.proxy(this.readyLayout, this)) + $.get(this.layoutAction + layout, this.readyLayout.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 47a938b..29ec9e5 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -3,7 +3,8 @@ var MediaEditor = FormView.extend({ el: "#mediaEditor", events: { - "click .play": "togglePlaying", + "click .playButton": "togglePlaying", + "change [name=keyframe]": "seek", }, initialize: function(opt){ @@ -20,7 +21,7 @@ var MediaEditor = FormView.extend({ this.$units = this.$("[name=units]") // video fields - this.$playButton = this.$(".play") + this.$playButton = this.$(".playButton") this.$loop = this.$("[name=loop]") this.$mute = this.$("[name=mute]") this.$keyframe = this.$("[name=keyframe]") @@ -39,7 +40,7 @@ var MediaEditor = FormView.extend({ if (this.scenery) { this.unbind() } - + this.bind(scenery) this.$el.addClass("active") @@ -71,17 +72,23 @@ var MediaEditor = FormView.extend({ this.$mute this.$keyframe */ - - break } + + }, + + seek: function(){ + var n = parseFloat( this.$keyframe.val() ) + this.scenery.seek(n) }, bind: function(scenery){ this.scenery = scenery + this.scenery.media.bound = true }, unbind: function(){ + this.scenery.media.bound = false this.scenery = null }, diff --git a/public/assets/javascripts/ui/editor/MediaUpload.js b/public/assets/javascripts/ui/editor/MediaUpload.js index b7fea07..86bf767 100644 --- a/public/assets/javascripts/ui/editor/MediaUpload.js +++ b/public/assets/javascripts/ui/editor/MediaUpload.js @@ -39,7 +39,7 @@ var MediaUpload = View.extend({ var url = this.$url.val() this.$url.val("") - Parser.parse(url, $.proxy(function(media){ + Parser.parse(url, function(media){ if (! media) { alert("Not a valid image/video link") return @@ -53,8 +53,8 @@ var MediaUpload = View.extend({ url: this.createAction, data: media, }) - request.done($.proxy(this.add, this)) - }, this)) + request.done(this.add.bind(this)) + }.bind(this)) }, handleFileSelect: function(e) { @@ -109,7 +109,7 @@ var MediaUpload = View.extend({ processData: false, contentType: false, }) - request.done($.proxy(this.add, this)) + request.done(this.add.bind(this)) }, add: function(media){ diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 88c3b18..264ed7c 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -40,12 +40,12 @@ var MediaViewer = ModalView.extend({ }, load: function(){ - $.get("/api/media/user", $.proxy(this.populate, this)) + $.get("/api/media/user", this.populate.bind(this)) }, populate: function(data){ this.loaded = true - data && data.forEach($.proxy(this.add, this)) + data && data.forEach(this.add.bind(this)) this.__super__.show.call(this) }, diff --git a/public/assets/javascripts/ui/lib/FormView.js b/public/assets/javascripts/ui/lib/FormView.js index 0106ce0..219952d 100644 --- a/public/assets/javascripts/ui/lib/FormView.js +++ b/public/assets/javascripts/ui/lib/FormView.js @@ -26,9 +26,9 @@ var FormView = View.extend({ this.$errorList.append('
    ' + errors[i] + '
    '); } this.$errors.css("opacity", 1.0); - setTimeout($.proxy(function(){ + setTimeout(function(){ this.$errors.show().css("opacity", 1.0); - }, this), 200) + }.bind(this), 200) } }, diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index add1ea1..bbdd437 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -15,7 +15,7 @@ var ReaderView = View.extend({ $(".logo,.topLinks,#editorView").hide() } name = sanitize(name) - $.get(this.projectAction + name, $.proxy(this.ready, this)) + $.get(this.projectAction + name, this.ready.bind(this)) }, ready: function(data){ diff --git a/public/assets/javascripts/ui/site/DocumentModal.js b/public/assets/javascripts/ui/site/DocumentModal.js index 6f16169..067977d 100644 --- a/public/assets/javascripts/ui/site/DocumentModal.js +++ b/public/assets/javascripts/ui/site/DocumentModal.js @@ -20,7 +20,7 @@ var DocumentModal = ModalFormView.extend({ this.action = this.updateAction - $.get("/api/docs", { name: name }, $.proxy(function(data){ + $.get("/api/docs", { name: name }, function(data){ if (data.isNew) { this.action = this.createAction } @@ -31,7 +31,7 @@ var DocumentModal = ModalFormView.extend({ this.$("[name='new_name']").val(name) this.show() - }, this)) + }.bind(this)) }, success: function(res){ diff --git a/public/assets/javascripts/ui/site/EditProfileModal.js b/public/assets/javascripts/ui/site/EditProfileModal.js index 6b89ad8..b023923 100644 --- a/public/assets/javascripts/ui/site/EditProfileModal.js +++ b/public/assets/javascripts/ui/site/EditProfileModal.js @@ -6,7 +6,7 @@ var EditProfileModal = ModalFormView.extend({ load: function(){ this.reset() - $.get("/api/profile", $.proxy(function(data){ + $.get("/api/profile", function(data){ console.log(data) for (var i in data) { @@ -23,7 +23,7 @@ var EditProfileModal = ModalFormView.extend({ } this.show() - }, this)) + }.bind(this)) }, validate: function(){ diff --git a/public/assets/javascripts/ui/site/EditProjectModal.js b/public/assets/javascripts/ui/site/EditProjectModal.js index 356d8b7..20baa54 100644 --- a/public/assets/javascripts/ui/site/EditProjectModal.js +++ b/public/assets/javascripts/ui/site/EditProjectModal.js @@ -31,7 +31,7 @@ var EditProjectModal = ModalView.extend({ var fields = this.$form.serializeArray() var request = $.post(this.action, $.param(fields)); - request.done($.proxy(function (response) { + request.done(function (response) { if (response.error) { this.$errors.show(); for (var key in response.error.errors) { @@ -42,7 +42,7 @@ var EditProjectModal = ModalView.extend({ else { window.location.href = "/profile" } - }, this)); + }.bind(this)); } }) diff --git a/public/assets/javascripts/ui/site/LayoutsModal.js b/public/assets/javascripts/ui/site/LayoutsModal.js index d474aa7..3b9e6cd 100644 --- a/public/assets/javascripts/ui/site/LayoutsModal.js +++ b/public/assets/javascripts/ui/site/LayoutsModal.js @@ -8,18 +8,18 @@ var LayoutsIndex = View.extend({ load: function(type){ this.$templates.children("span").remove() - $.get(this.action, $.proxy(this.populate, this)) + $.get(this.action, this.populate.bind(this)) }, populate: function(data){ - data.forEach($.proxy(function(room){ + data.forEach(function(room){ var $span = $("") // $span.html(JSON.stringify(room)) $span.data("slug", room.slug) $span.css("background-image", "url(" + room.photo + ")") this.$templates.append($span) - }, this)) + }.bind(this)) this.show() } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 4296223..500f444 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1220,23 +1220,23 @@ input[type="range"]::-webkit-slider-thumb { padding-right: 5px; } -.setting .play { +.setting .playButton { color: white; background: black; border-radius: 50px; padding: 6px 7px 5px; cursor: pointer; } -.setting .play .icon-play { +.setting .playButton .icon-play { display: inline; } -.setting .play.playing .icon-play { +.setting .playButton.playing .icon-play { display: none; } -.setting .play .icon-pause { +.setting .playButton .icon-pause { display: none; } -.setting .play.playing .icon-pause { +.setting .playButton.playing .icon-pause { display: inline; } diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 12ab2b4..46b8a42 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -11,7 +11,7 @@
    - + -- cgit v1.2.3-70-g09d2 From 9fe187effeaf4a2e6205e2f1f52b32b8823f4f10 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 14 Jul 2014 15:21:12 -0400 Subject: muting, autoplay, loop --- .../assets/javascripts/mx/primitives/mx.video.js | 15 ++++++- .../assets/javascripts/mx/primitives/mx.vimeo.js | 14 ++++++- .../assets/javascripts/mx/primitives/mx.youtube.js | 16 ++++++- .../rectangles/engine/scenery/types/video.js | 9 ++++ public/assets/javascripts/ui/editor/MediaEditor.js | 49 +++++++++++++++------- public/assets/javascripts/ui/lib/View.js | 6 ++- server/lib/api/media.js | 1 - server/lib/schemas/Media.js | 13 ++++++ server/lib/schemas/Project.js | 4 -- 9 files changed, 104 insertions(+), 23 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index f92fe9f..c5dd749 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -30,6 +30,7 @@ MX.Video = MX.Object3D.extend({ this.player = document.createElement('video') this.player.addEventListener("loadedmetadata", this.ready.bind(this)) this.player.addEventListener("error", this.error.bind(this)) + this.player.addEventListener("ended", this.finished.bind(this)) this.player.width = this.width this.player.height = this.height this.player.src = this.media.url @@ -68,13 +69,25 @@ MX.Video = MX.Object3D.extend({ this.player.currentTime = n }, + mute: function(){ + this.player.muted = true + }, + + unmute: function(){ + this.player.muted = false + }, + duration: function(){ return this.player.duration }, finished: function(){ console.log("video finished") - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } }, diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index 5a373ff..c44464e 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -88,6 +88,14 @@ MX.Vimeo = MX.Object3D.extend({ duration: function(){ return this.player.duration }, + + mute: function(){ + this.player.api('setVolume', 0.0) + }, + + unmute: function(){ + this.player.api('setVolume', 0.8) + }, onPlay: function(){ if (this.paused) { @@ -102,7 +110,11 @@ MX.Vimeo = MX.Object3D.extend({ }, finished: function(){ - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } } diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index a31a24d..68bb5f3 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -79,6 +79,7 @@ MX.Youtube = MX.Object3D.extend({ ready: function(){ console.log("youtube ready") + this.seek(0) }, error: function(err){ @@ -127,10 +128,23 @@ MX.Youtube = MX.Object3D.extend({ duration: function(){ return this.player.getDuration() }, + + mute: function(){ + this.player.mute() + }, + + unmute: function(){ + this.player.unMute() + this.player.setVolume(80) + }, finished: function(){ console.log("youtube finished") - if (this.media.bound) { + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { $(".playButton").removeClass('playing') } } diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index 6117826..e61a0fa 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -57,6 +57,15 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ seek: function(n){ this.mx.seek(n) }, + + mute: function(muted){ + if (muted) { + this.mx.mute() + } + else { + this.mx.unmute() + } + }, serialize: function(){ var data = base.serialize.call(this) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 29ec9e5..aea78aa 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -4,9 +4,13 @@ var MediaEditor = FormView.extend({ events: { "click .playButton": "togglePlaying", + "mousedown [name=keyframe]": "stopPropagation", "change [name=keyframe]": "seek", + "change [name=autoplay]": "setAutoplay", + "change [name=loop]": "setLoop", + "change [name=mute]": "setMute", }, - + initialize: function(opt){ this.parent = opt.parent this.__super__.initialize.call(this) @@ -22,6 +26,7 @@ var MediaEditor = FormView.extend({ // video fields this.$playButton = this.$(".playButton") + this.$autoplay = this.$("[name=autoplay]") this.$loop = this.$("[name=loop]") this.$mute = this.$("[name=mute]") this.$keyframe = this.$("[name=keyframe]") @@ -53,11 +58,10 @@ var MediaEditor = FormView.extend({ case "image": this.$(".image").show() this.$(".video").hide() - /* - this.$widthDimension - this.$heightDimension - this.$units - */ + + this.$widthDimension.val( Number(media.widthDimension) || "" ) + this.$heightDimension.val( Number(media.heightDimension) || "" ) + this.$units.val( media.units || "cm" ) break @@ -67,11 +71,12 @@ var MediaEditor = FormView.extend({ this.$(".video").show() this.$(".image").hide() - /* - this.$loop - this.$mute - this.$keyframe - */ + this.$playButton.toggleClass("playing", ! this.scenery.paused()) + this.$autoplay.prop('checked', !! media.autoplay) + this.$loop.prop('checked', !! media.loop) + this.$mute.prop('checked', !! media.mute) + this.$keyframe.val( Number(media.keyframe || 0) ) + break } @@ -80,15 +85,31 @@ var MediaEditor = FormView.extend({ seek: function(){ var n = parseFloat( this.$keyframe.val() ) this.scenery.seek(n) + + this.scenery.media.keyframe = n }, - + + setAutoplay: function(){ + var checked = this.$autoplay.prop('checked') + this.scenery.media.autoplay = checked + }, + setLoop: function(){ + var checked = this.$loop.prop('checked') + this.scenery.media.loop = checked + }, + setMute: function(){ + var checked = this.$mute.prop('checked') + this.scenery.media.mute = checked + this.scenery.mute(checked) + }, + bind: function(scenery){ this.scenery = scenery - this.scenery.media.bound = true + this.scenery.mx.bound = true }, unbind: function(){ - this.scenery.media.bound = false + this.scenery.mx.bound = false this.scenery = null }, diff --git a/public/assets/javascripts/ui/lib/View.js b/public/assets/javascripts/ui/lib/View.js index 5fc6736..999a0e5 100644 --- a/public/assets/javascripts/ui/lib/View.js +++ b/public/assets/javascripts/ui/lib/View.js @@ -84,7 +84,11 @@ var View = (function($, _){ preventDefault: function(e){ e && e.preventDefault() - } + }, + + stopPropagation: function(e){ + e && e.stopPropagation() + }, }); diff --git a/server/lib/api/media.js b/server/lib/api/media.js index 9699c16..16f9d41 100644 --- a/server/lib/api/media.js +++ b/server/lib/api/media.js @@ -43,7 +43,6 @@ var media = { }) function done () { - console.log(data) new Media(data).save(function(err, rec) { if (err || ! rec) { return res.json({ error: err }) } res.json(rec) diff --git a/server/lib/schemas/Media.js b/server/lib/schemas/Media.js index b415bae..1f26b8e 100644 --- a/server/lib/schemas/Media.js +++ b/server/lib/schemas/Media.js @@ -33,6 +33,19 @@ var MediaSchema = new mongoose.Schema({ type: String, default: "" }, + description: { + type: String, + default: "" + }, + autoplay: { type: Boolean, default: false }, + loop: { type: Boolean, default: false }, + mute: { type: Boolean, default: true }, + keyframe: { type: Number, default: 0.0 }, + + widthDimension: { type: Number }, + heightDimension: { type: Number }, + units: { type: String }, + user_id: { type: mongoose.Schema.ObjectId, index: true }, created_at: { type: Date }, }); diff --git a/server/lib/schemas/Project.js b/server/lib/schemas/Project.js index 75cefc5..0f54eaa 100644 --- a/server/lib/schemas/Project.js +++ b/server/lib/schemas/Project.js @@ -27,10 +27,6 @@ var ProjectSchema = new mongoose.Schema({ photo: { type: String, }, - about: { - type: String, - default: "" - }, rooms: [mongoose.Schema.Types.Mixed], walls: [mongoose.Schema.Types.Mixed], media: [mongoose.Schema.Types.Mixed], -- cgit v1.2.3-70-g09d2 From cdce6146956b5e6f335022631d9ffeae6c90efcc Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 15 Jul 2014 10:42:35 -0400 Subject: pause/mute button on reader --- .../assets/javascripts/mx/primitives/mx.video.js | 12 ++++++--- .../assets/javascripts/mx/primitives/mx.vimeo.js | 14 +++++++++- .../assets/javascripts/mx/primitives/mx.youtube.js | 14 +++++++++- .../rectangles/engine/scenery/types/video.js | 14 +++++++++- public/assets/javascripts/ui/_router.js | 2 +- public/assets/javascripts/ui/editor/MediaEditor.js | 22 ++++++++++++---- public/assets/javascripts/ui/reader/MediaPlayer.js | 30 ++++++++++++++-------- public/assets/stylesheets/app.css | 29 ++++++++++++++++----- views/controls/editor/media-editor.ejs | 10 +++----- views/controls/reader/media-player.ejs | 11 +++++--- 10 files changed, 119 insertions(+), 39 deletions(-) (limited to 'public/assets/javascripts/mx/primitives') diff --git a/public/assets/javascripts/mx/primitives/mx.video.js b/public/assets/javascripts/mx/primitives/mx.video.js index c5dd749..5341226 100644 --- a/public/assets/javascripts/mx/primitives/mx.video.js +++ b/public/assets/javascripts/mx/primitives/mx.video.js @@ -20,6 +20,7 @@ MX.Video = MX.Object3D.extend({ this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") this.paused = true + this.muted = this.media.mute this.load() }, @@ -40,12 +41,15 @@ MX.Video = MX.Object3D.extend({ }, ready: function(){ + this.seek( this.media.keyframe || 0 ) + + if (this.media.mute) { + this.mute() + } + if (this.media.autoplay) { this.play() } - else { - this.player.currentTime = this.player.duration / 3 - } }, error: function(err){ @@ -71,10 +75,12 @@ MX.Video = MX.Object3D.extend({ mute: function(){ this.player.muted = true + this.muted = true }, unmute: function(){ this.player.muted = false + this.muted = false }, duration: function(){ diff --git a/public/assets/javascripts/mx/primitives/mx.vimeo.js b/public/assets/javascripts/mx/primitives/mx.vimeo.js index c44464e..e7555ef 100644 --- a/public/assets/javascripts/mx/primitives/mx.vimeo.js +++ b/public/assets/javascripts/mx/primitives/mx.vimeo.js @@ -20,6 +20,7 @@ MX.Vimeo = MX.Object3D.extend({ this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") this.paused = true + this.muted = this.media.mute this.load() }, @@ -49,12 +50,21 @@ MX.Vimeo = MX.Object3D.extend({ this.player.addEvent('pause', this.onPause.bind(this)) this.player.addEvent('finish', this.finished.bind(this)) - // so annoying that this is async!! + // this is async on vimeo so call it asap this.player.api('getDuration', function(n){ console.log("vimeo duration", n) this.player.duration = n }.bind(this)) + if (this.media.mute) { + this.mute() + } + + this.seek( this.media.keyframe || 0 ) + + if (this.media.autoplay) { + this.play() + } }, error: function(err){ @@ -91,10 +101,12 @@ MX.Vimeo = MX.Object3D.extend({ mute: function(){ this.player.api('setVolume', 0.0) + this.muted = true }, unmute: function(){ this.player.api('setVolume', 0.8) + this.muted = false }, onPlay: function(){ diff --git a/public/assets/javascripts/mx/primitives/mx.youtube.js b/public/assets/javascripts/mx/primitives/mx.youtube.js index 68bb5f3..a06cf5b 100644 --- a/public/assets/javascripts/mx/primitives/mx.youtube.js +++ b/public/assets/javascripts/mx/primitives/mx.youtube.js @@ -20,6 +20,7 @@ MX.Youtube = MX.Object3D.extend({ this.backface && this.el.classList.add("backface-visible") this.el.classList.add("video") this.paused = true + this.muted = this.media.mute this.load() }, @@ -79,7 +80,16 @@ MX.Youtube = MX.Object3D.extend({ ready: function(){ console.log("youtube ready") - this.seek(0) + + if (this.media.autoplay) { + this.play() + } + + if (this.media.mute) { + this.mute() + } + + this.seek( this.media.keyframe || 0 ) }, error: function(err){ @@ -131,11 +141,13 @@ MX.Youtube = MX.Object3D.extend({ mute: function(){ this.player.mute() + this.muted = true }, unmute: function(){ this.player.unMute() this.player.setVolume(80) + this.muted = false }, finished: function(){ diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js index e61a0fa..8cd5e6b 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js +++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js @@ -43,17 +43,29 @@ Scenery.types.video = Scenery.types.base.extend(function(base){ }, toggle: function(shouldPause){ - if (typeof shouldPause === "undefined") { + if (typeof shouldPause !== "boolean") { shouldPause = ! this.mx.paused } shouldPause ? this.mx.pause() : this.mx.play() return shouldPause }, + toggleMuted: function(shouldMute){ + if (typeof shouldMute !== "boolean") { + shouldMute = ! this.mx.muted + } + shouldMute ? this.mx.mute() : this.mx.unmute() + return shouldMute + }, + paused: function(){ return this.mx.paused }, + muted: function(){ + return this.mx.muted + }, + seek: function(n){ this.mx.seek(n) }, diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index c0f35b6..2b2c7c0 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -189,7 +189,7 @@ var SiteRouter = Router.extend({ var name = e ? $(e.currentTarget).data("name") : name - confirmModal.confirm("Are you sure you want to delete " + name + "?", function(){ + ConfirmModal.confirm("Are you sure you want to delete " + name + "?", function(){ this.documentModal.destroy(name, function(){ AlertModal.alert("Document deleted!", function(){ window.location.href = "/about" diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index 4e1132c..1ffe7b8 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -3,13 +3,14 @@ var MediaEditor = FormView.extend({ el: "#mediaEditor", events: { - "click .playButton": "togglePlaying", + "click [data-role=play-media]": "togglePaused", "mousedown [name=keyframe]": "stopPropagation", "mousedown": "stopPropagation", "change [name=keyframe]": "seek", "change [name=autoplay]": "setAutoplay", "change [name=loop]": "setLoop", "change [name=mute]": "setMute", + "click [data-role=destroy-media]": "destroy", }, initialize: function(opt){ @@ -25,7 +26,7 @@ var MediaEditor = FormView.extend({ this.$units = this.$("[name=units]") // video fields - this.$playButton = this.$(".playButton") + this.$playButton = this.$("[data-role=play-media]") this.$autoplay = this.$("[name=autoplay]") this.$loop = this.$("[name=loop]") this.$mute = this.$("[name=mute]") @@ -36,8 +37,8 @@ var MediaEditor = FormView.extend({ this.$el.toggleClass("active", state); }, - togglePlaying: function(){ - var state = this.scenery.toggle() + togglePaused: function(state){ + var state = this.scenery.toggle(state) this.$playButton.toggleClass("playing", ! state) }, @@ -71,7 +72,7 @@ var MediaEditor = FormView.extend({ this.$(".video").show() this.$(".image").hide() - this.$playButton.toggleClass("playing", ! this.scenery.paused()) + this.$playButton.toggleClass("paused", this.scenery.paused()) this.$autoplay.prop('checked', !! media.autoplay) this.$loop.prop('checked', !! media.loop) this.$mute.prop('checked', !! media.mute) @@ -97,6 +98,9 @@ var MediaEditor = FormView.extend({ setAutoplay: function(){ var checked = this.$autoplay.prop('checked') this.scenery.media.autoplay = checked + if (checked && this.scenery.paused()) { + this.togglePaused() + } }, setLoop: function(){ var checked = this.$loop.prop('checked') @@ -117,5 +121,13 @@ var MediaEditor = FormView.extend({ this.scenery.mx.bound = false this.scenery = null }, + + destroy: function(){ + ConfirmModal.confirm("Are you sure you want to this media?", function(){ + var scenery = this.scenery + this.hide() + Scenery.remove(scenery.id) + }.bind(this)) + }, }) diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 74054b4..df2d075 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -3,7 +3,8 @@ var MediaPlayer = FormView.extend({ el: "#mediaPlayer", events: { - "click .playButton": "togglePlaying", + "click [data-role=play-media]": "togglePaused", + "click [data-role=mute-media]": "toggleMuted", "mousedown": "stopPropagation", }, @@ -18,16 +19,22 @@ var MediaPlayer = FormView.extend({ this.$dimensions = this.$(".dimensions") // video fields - this.$playButton = this.$(".playButton") + this.$playButton = this.$("[data-role=play-media]") + this.$muteButton = this.$("[data-role=mute-media]") }, toggle: function(state) { this.$el.toggleClass("active", state); }, - togglePlaying: function(){ - var state = this.scenery.toggle() - this.$playButton.toggleClass("playing", ! state) + togglePaused: function(state){ + var state = this.scenery.toggle(state) + this.$playButton.toggleClass("paused", ! state) + }, + + toggleMuted: function(state){ + var state = this.scenery.toggleMuted(state) + this.$muteButton.toggleClass("muted", state) }, pick: function(scenery) { @@ -45,7 +52,7 @@ var MediaPlayer = FormView.extend({ this.bind(scenery) this.$el.addClass("active") - + this.$name.html(media.title) this.$description.html(media.description) @@ -54,9 +61,9 @@ var MediaPlayer = FormView.extend({ this.$(".image").show() this.$(".video").hide() - this.$widthDimension.html( Number(media.widthDimension) || "" ) - this.$heightDimension.html( Number(media.heightDimension) || "" ) - this.$units.html( media.units || "cm" ) +// this.$widthDimension.html( Number(media.widthDimension) || "" ) +// this.$heightDimension.html( Number(media.heightDimension) || "" ) +// this.$units.html( media.units || "cm" ) break @@ -65,8 +72,9 @@ var MediaPlayer = FormView.extend({ case "video": this.$(".video").show() this.$(".image").hide() - - this.$playButton.toggleClass("playing", ! this.scenery.paused()) + + this.$playButton.toggleClass("paused", ! this.scenery.paused()) + this.$muteButton.toggleClass("muted", this.scenery.muted()) break } diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 215bbab..a2d2120 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1220,26 +1220,43 @@ input[type="range"]::-webkit-slider-thumb { padding-right: 5px; } -.playButton { +.playButton,.muteButton { color: white; background: black; border-radius: 50px; - padding: 6px 7px 5px; + font-size: 22px; + padding: 4px 2px 3px 6px; cursor: pointer; + margin-right: 5px; } -.playButton .icon-play { +.playButton .on { display: inline; } -.playButton.playing .icon-play { +.playButton.paused .on { display: none; } -.playButton .icon-pause { +.playButton .off { display: none; } -.playButton.playing .icon-pause { +.playButton.paused .off { display: inline; } +.muteButton .on { + display: inline; + padding-right: 3px; +} +.muteButton.muted .on { + display: none; +} +.muteButton .off { + display: none; +} +.muteButton.muted .off { + display: inline; + padding-right: 3px; +} + button { padding: 8px; border: 1px solid; diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 46b8a42..65db3ce 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -11,9 +11,9 @@
    - - - + + + + -->
    diff --git a/views/controls/builder/info.ejs b/views/controls/builder/info.ejs new file mode 100644 index 0000000..af0a76d --- /dev/null +++ b/views/controls/builder/info.ejs @@ -0,0 +1,35 @@ +
    +
    + + +
    +
    + + +
    +
    + + +
    + +
    + + +
    + +
    + + +
    + +
    + + + +
    + +
    diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 65db3ce..5db1fb2 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -29,9 +29,9 @@
    - Initial Still +
    - +
    diff --git a/views/partials/sign-in.ejs b/views/partials/sign-in.ejs index 3f05fff..8268b2a 100644 --- a/views/partials/sign-in.ejs +++ b/views/partials/sign-in.ejs @@ -6,7 +6,7 @@ - – or the ol' fashion way – +
  • @@ -39,7 +39,7 @@ - – or the ol' fashion way – +
  • diff --git a/views/projects/layouts-modal.ejs b/views/projects/layouts-modal.ejs index 75b2641..97f1e61 100644 --- a/views/projects/layouts-modal.ejs +++ b/views/projects/layouts-modal.ejs @@ -5,6 +5,9 @@

    Edit Room Layouts

    +
    + There are no room layouts available. Please create a new one. +
    @@ -18,6 +21,8 @@

    Your Projects

    +
    +
    @@ -31,6 +36,9 @@

    Choose Room Template

    +
    + There are no room layouts available. Please create a new one. +
    diff --git a/views/projects/list-projects.ejs b/views/projects/list-projects.ejs index 42387ba..2c12af0 100644 --- a/views/projects/list-projects.ejs +++ b/views/projects/list-projects.ejs @@ -6,7 +6,7 @@ [[ projects.forEach(function(project, i) { ]]
    • + [[ if (profile._id == project.user_id) { ]]
    edit
    [[ } ]] - [[- project.name ]] + [[- project.name ]]
    [[- project.date ]]         		- + [[ if (profile._id == project.user_id) { ]]
    edit
    [[ } ]] -- cgit v1.2.3-70-g09d2