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 --- public/assets/javascripts/ui/editor/MediaViewer.js | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) (limited to 'public/assets/javascripts/ui/editor/MediaViewer.js') diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 2535f1b..b5398ff 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -62,6 +62,16 @@ var MediaViewer = ModalView.extend({ case 'vimeo': image.src = media.thumbnail break + + case 'video': + image = document.createElement('video') + image.addEventListener("loadedmetadata", function(){ + image.currentTime = image.duration * 1/3 + console.log(image.duration, image.currentTime) + }) + image.src = media.url + image.load() + break } $span.data("media", media) @@ -124,7 +134,16 @@ var MediaViewer = ModalView.extend({ var $floatingImg = $('.floatingImg'); Scenery.nextMedia = media - $floatingImg.attr('src', image.attr('src')); + + switch (media.type) { + case "video": + $floatingImg.attr('src', 'http://www.rawrcast.com/wp-content/uploads/2010/02/BluePlayButton.png') + break + + default: + $floatingImg.attr('src', image.attr('src')) + break + } var height = $floatingImg.height() var width = $floatingImg.width() -- 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/ui/editor/MediaViewer.js') 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 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/ui/editor/MediaViewer.js') 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