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 --- public/assets/javascripts/ui/editor/EditorView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'public/assets/javascripts/ui/editor/EditorView.js') 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: { }, -- cgit v1.2.3-70-g09d2 From 9a2cfe7da6808a04b7c668075e9e9598ddb5ae04 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Fri, 11 Jul 2014 17:07:05 -0400 Subject: basic media editor --- .../javascripts/rectangles/engine/scenery/move.js | 6 ++ .../assets/javascripts/ui/editor/EditorToolbar.js | 2 +- public/assets/javascripts/ui/editor/EditorView.js | 2 +- public/assets/javascripts/ui/editor/MediaEditor.js | 69 ++++++++++++++++++++++ public/assets/stylesheets/app.css | 23 +++++--- views/controls/editor/media-editor.ejs | 30 ++++++---- views/editor.ejs | 2 +- views/partials/scripts.ejs | 3 +- 8 files changed, 115 insertions(+), 22 deletions(-) create mode 100644 public/assets/javascripts/ui/editor/MediaEditor.js (limited to 'public/assets/javascripts/ui/editor/EditorView.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index bad0a55..aa7ddd1 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -26,6 +26,12 @@ Scenery.move = function(base){ Scenery.remove(base.id) return } + + if (editor.permissions.pick) { + // load the modal + app.router.editorView.mediaEditor.pick(base) + } + if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false return diff --git a/public/assets/javascripts/ui/editor/EditorToolbar.js b/public/assets/javascripts/ui/editor/EditorToolbar.js index 4a7c3e8..a3abc5a 100644 --- a/public/assets/javascripts/ui/editor/EditorToolbar.js +++ b/public/assets/javascripts/ui/editor/EditorToolbar.js @@ -87,7 +87,7 @@ var EditorToolbar = View.extend({ var editor = new function(){ this.permissions = new Permissions({ - 'pick': false, + 'pick': true, 'move': true, 'resize': false, 'destroy': false, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 2bb2d61..017e241 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -13,6 +13,7 @@ var EditorView = View.extend({ this.settings = new EditorSettings ({ parent: this }) this.mediaViewer = new MediaViewer ({ parent: this }) this.mediaUpload = new MediaUpload ({ parent: this }) + this.mediaEditor = new MediaEditor ({ parent: this }) this.wallpaperPicker = new WallpaperPicker ({ parent: this }) this.lightControl = new LightControl ({ parent: this }) }, @@ -39,4 +40,3 @@ var EditorView = View.extend({ } }) - diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js new file mode 100644 index 0000000..8d6d517 --- /dev/null +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -0,0 +1,69 @@ + +var MediaEditor = FormView.extend({ + el: "#mediaEditor", + + events: { + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$("[name=name]") + this.$description = this.$("[name=description]") + this.$autoplay = this.$("[name=autoplay]") + + // image fields + this.$widthDimension = this.$("[name=width]") + this.$heightDimension = this.$("[name=height]") + this.$units = this.$("[name=units]") + + // video fields + this.$playButton = this.$(".play") + this.$loop = this.$("[name=loop]") + this.$mute = this.$("[name=mute]") + this.$keyframe = this.$("[name=keyframe]") + }, + + toggle: function(state) { + this.$el.toggleClass("active", state); + }, + + pick: function(scenery) { + this.$el.addClass("active") + + var media = scenery.media + + this.$name.val(media.title) + this.$description.val(media.description) + + switch (media.type) { + case "image": + this.$(".image").show() + this.$(".video").hide() + /* + this.$widthDimension + this.$heightDimension + this.$units + */ + + break + + case "youtube": + case "vimeo": + case "video": + this.$(".video").show() + this.$(".image").hide() + + /* + this.$loop + this.$mute + this.$keyframe + */ + + + break + } + }, + +}) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 684761c..7389810 100755 --- a/public/assets/stylesheets/app.css +++ b/public/assets/stylesheets/app.css @@ -1106,7 +1106,7 @@ input[type=range] { -webkit-appearance: none; -moz-appearance: none; background-color: black; - width: 200px; + width: 180px; height:3px; } @@ -1176,13 +1176,15 @@ input[type="range"]::-webkit-slider-thumb { #startpoint.active:hover { text-decoration:none; } -.settings input[type="text"], textarea{ +.settings input[type="text"] { border: 1px solid #000; font-size: 15px; padding: 5px; } .settings textarea { + border: 1px solid #000; + padding: 5px; font-size: 12px; width: 100%; max-height: 200px; @@ -1193,7 +1195,7 @@ input[type="range"]::-webkit-slider-thumb { border: 1px solid #000; } -.settings .setting{ +.settings .setting { margin-bottom:10px; } .setting.subButtons { @@ -1210,6 +1212,13 @@ input[type="range"]::-webkit-slider-thumb { .settings .setting:last-child{ margin-bottom:0px; } +.settings input[type="text"].number { + width: 60px; +} + +.setting label { + padding-right: 5px; +} button { padding: 8px; @@ -1372,23 +1381,23 @@ form li textarea { margin-top: 20px; } -.video { +.demo .video { height:80vh; min-height:300px; } -.video span { +.demo .video span { font-size:100px; color:white; cursor:pointer; } -.video span.videoTitle { +.demo .video span.videoTitle { font-size: 29px; font-weight: 300; padding: 3px 7px; } -.video span.icon-ios7-play-outline:hover { +.demo .video span.icon-ios7-play-outline:hover { color:lightgreen; } diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs index 95aabb5..483fa72 100644 --- a/views/controls/editor/media-editor.ejs +++ b/views/controls/editor/media-editor.ejs @@ -1,4 +1,4 @@ -
+
@@ -15,24 +15,32 @@ - - - Autoplay - Loop - Mute - Initial Still +
+
+ + + + + + +
+ +
+ Initial Still +
+
- Dimensions - Width - Height + Dimensions
+ +
diff --git a/views/editor.ejs b/views/editor.ejs index a79eb9a..5d1e052 100755 --- a/views/editor.ejs +++ b/views/editor.ejs @@ -13,8 +13,8 @@
[[ include controls/editor/toolbar ]] - [[ include controls/editor/video-toolbar ]] [[ include controls/editor/media-drawer ]] + [[ include controls/editor/media-editor ]] [[ include controls/editor/wallpaper ]] [[ include controls/editor/light-control ]] [[ include controls/editor/settings ]] diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 6dd4480..40bb306 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -78,13 +78,14 @@ + + - -- 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/EditorView.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 From 7ded9f91d3f3ab538425122be07f7436275b9b8d Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Mon, 14 Jul 2014 18:04:21 -0400 Subject: play button and stuff on the viewer --- .../javascripts/rectangles/engine/scenery/move.js | 2 +- .../assets/javascripts/rectangles/models/wall.js | 3 + public/assets/javascripts/ui/_router.js | 8 +- public/assets/javascripts/ui/editor/EditorView.js | 8 ++ public/assets/javascripts/ui/editor/MediaEditor.js | 9 ++- public/assets/javascripts/ui/reader/MediaPlayer.js | 92 ++++++++++++++++++++++ public/assets/javascripts/ui/reader/ReaderView.js | 15 +++- public/assets/stylesheets/app.css | 11 +-- views/controls/reader/about-media.ejs | 16 ---- views/controls/reader/media-player.ejs | 14 ++++ views/partials/scripts.ejs | 3 +- views/reader.ejs | 1 + 12 files changed, 150 insertions(+), 32 deletions(-) create mode 100644 public/assets/javascripts/ui/reader/MediaPlayer.js delete mode 100644 views/controls/reader/about-media.ejs create mode 100644 views/controls/reader/media-player.ejs (limited to 'public/assets/javascripts/ui/editor/EditorView.js') diff --git a/public/assets/javascripts/rectangles/engine/scenery/move.js b/public/assets/javascripts/rectangles/engine/scenery/move.js index 6229162..94a4e52 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/move.js +++ b/public/assets/javascripts/rectangles/engine/scenery/move.js @@ -28,7 +28,7 @@ Scenery.move = function(base){ } // load the modal - app.router.editorView.mediaEditor.pick(base) + app.controller.pick(base) if (! (editor.permissions.move || editor.permissions.resize) ) { e.clickAccepted = false diff --git a/public/assets/javascripts/rectangles/models/wall.js b/public/assets/javascripts/rectangles/models/wall.js index b2a5b12..cc298c6 100644 --- a/public/assets/javascripts/rectangles/models/wall.js +++ b/public/assets/javascripts/rectangles/models/wall.js @@ -45,6 +45,9 @@ window.Wall = (function(){ if (Scenery.nextMedia) { Scenery.addNextToWall(base) } + else { + app.controller.hideExtras() + } } }) } diff --git a/public/assets/javascripts/ui/_router.js b/public/assets/javascripts/ui/_router.js index 886b8be..c0f35b6 100644 --- a/public/assets/javascripts/ui/_router.js +++ b/public/assets/javascripts/ui/_router.js @@ -61,7 +61,7 @@ var SiteRouter = Router.extend({ app.mode.builder = true app.launch() - this.builderView = new BuilderView() + this.builderView = app.controller = new BuilderView() this.builderView.load(name) }, @@ -92,7 +92,7 @@ var SiteRouter = Router.extend({ layout = slugify(layout) window.history.pushState(null, document.title, "/project/new/" + layout) - this.editorView = new EditorView() + this.editorView = app.controller = new EditorView() this.editorView.loadLayout(layout) }, @@ -109,7 +109,7 @@ var SiteRouter = Router.extend({ app.mode.editor = true app.launch() - this.editorView = new EditorView() + this.editorView = app.controller = new EditorView() this.editorView.load(name) }, @@ -117,7 +117,7 @@ var SiteRouter = Router.extend({ app.mode.editor = true app.launch() - this.readerView = new ReaderView() + this.readerView = app.controller = new ReaderView() this.readerView.load(name) }, diff --git a/public/assets/javascripts/ui/editor/EditorView.js b/public/assets/javascripts/ui/editor/EditorView.js index 322637e..4067c4d 100644 --- a/public/assets/javascripts/ui/editor/EditorView.js +++ b/public/assets/javascripts/ui/editor/EditorView.js @@ -37,6 +37,14 @@ var EditorView = View.extend({ readyLayout: function(data){ data.isNew = true this.ready(data) + }, + + pick: function(scenery){ + this.mediaEditor.pick(scenery) + }, + + hideExtras: function(){ + this.mediaEditor.hide() } }) diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js index aea78aa..4e1132c 100644 --- a/public/assets/javascripts/ui/editor/MediaEditor.js +++ b/public/assets/javascripts/ui/editor/MediaEditor.js @@ -5,6 +5,7 @@ var MediaEditor = FormView.extend({ events: { "click .playButton": "togglePlaying", "mousedown [name=keyframe]": "stopPropagation", + "mousedown": "stopPropagation", "change [name=keyframe]": "seek", "change [name=autoplay]": "setAutoplay", "change [name=loop]": "setLoop", @@ -17,7 +18,6 @@ var MediaEditor = FormView.extend({ this.$name = this.$("[name=name]") this.$description = this.$("[name=description]") - this.$autoplay = this.$("[name=autoplay]") // image fields this.$widthDimension = this.$("[name=width]") @@ -79,7 +79,13 @@ var MediaEditor = FormView.extend({ break } + }, + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) }, seek: function(){ @@ -88,7 +94,6 @@ var MediaEditor = FormView.extend({ this.scenery.media.keyframe = n }, - setAutoplay: function(){ var checked = this.$autoplay.prop('checked') this.scenery.media.autoplay = checked diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js new file mode 100644 index 0000000..74054b4 --- /dev/null +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -0,0 +1,92 @@ + +var MediaPlayer = FormView.extend({ + el: "#mediaPlayer", + + events: { + "click .playButton": "togglePlaying", + "mousedown": "stopPropagation", + }, + + initialize: function(opt){ + this.parent = opt.parent + this.__super__.initialize.call(this) + + this.$name = this.$(".name") + this.$description = this.$(".description") + + // image fields + this.$dimensions = this.$(".dimensions") + + // video fields + this.$playButton = this.$(".playButton") + }, + + toggle: function(state) { + this.$el.toggleClass("active", state); + }, + + togglePlaying: function(){ + var state = this.scenery.toggle() + this.$playButton.toggleClass("playing", ! state) + }, + + pick: function(scenery) { + var media = scenery.media + + if (this.scenery) { + this.unbind() + } + if (media.type == "image") { + if ((! media.title || ! media.title.length) && (! media.description || ! media.description.length)) { + this.hide() + return + } + } + + this.bind(scenery) + this.$el.addClass("active") + + this.$name.html(media.title) + this.$description.html(media.description) + + switch (media.type) { + case "image": + this.$(".image").show() + this.$(".video").hide() + + this.$widthDimension.html( Number(media.widthDimension) || "" ) + this.$heightDimension.html( Number(media.heightDimension) || "" ) + this.$units.html( media.units || "cm" ) + + break + + case "youtube": + case "vimeo": + case "video": + this.$(".video").show() + this.$(".image").hide() + + this.$playButton.toggleClass("playing", ! this.scenery.paused()) + + break + } + }, + + hide: function(scenery){ + if (this.scenery) { + this.unbind() + } + this.toggle(false) + }, + + bind: function(scenery){ + this.scenery = scenery + this.scenery.mx.bound = true + }, + + unbind: function(){ + this.scenery.mx.bound = false + this.scenery = null + }, + +}) diff --git a/public/assets/javascripts/ui/reader/ReaderView.js b/public/assets/javascripts/ui/reader/ReaderView.js index bbdd437..a2c2983 100644 --- a/public/assets/javascripts/ui/reader/ReaderView.js +++ b/public/assets/javascripts/ui/reader/ReaderView.js @@ -8,6 +8,7 @@ var ReaderView = View.extend({ }, initialize: function(){ + this.mediaPlayer = new MediaPlayer ({ parent: this }) }, load: function(name){ @@ -27,8 +28,10 @@ var ReaderView = View.extend({ editor.permissions.clear() - // - + this.listen() + }, + + listen: function(){ var base = this $(window).on('message', function(event){ @@ -55,6 +58,14 @@ var ReaderView = View.extend({ if (this.spinning) { scene.camera.rotationY -= 1/180 } + }, + + pick: function(scenery){ + this.mediaPlayer.pick(scenery) + }, + + hideExtras: function(){ + this.mediaPlayer.hide() } }) diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css index 500f444..215bbab 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 .playButton { +.playButton { color: white; background: black; border-radius: 50px; padding: 6px 7px 5px; cursor: pointer; } -.setting .playButton .icon-play { +.playButton .icon-play { display: inline; } -.setting .playButton.playing .icon-play { +.playButton.playing .icon-play { display: none; } -.setting .playButton .icon-pause { +.playButton .icon-pause { display: none; } -.setting .playButton.playing .icon-pause { +.playButton.playing .icon-pause { display: inline; } @@ -1507,6 +1507,7 @@ form li textarea { bottom: 10px; padding-right:10px; background:rgba(255,255,255,0.95); + z-index: 2; } .share h2 { diff --git a/views/controls/reader/about-media.ejs b/views/controls/reader/about-media.ejs deleted file mode 100644 index c6365ad..0000000 --- a/views/controls/reader/about-media.ejs +++ /dev/null @@ -1,16 +0,0 @@ -
- -
-
-
-
- -
- - - - - -
- -
diff --git a/views/controls/reader/media-player.ejs b/views/controls/reader/media-player.ejs new file mode 100644 index 0000000..71f69a8 --- /dev/null +++ b/views/controls/reader/media-player.ejs @@ -0,0 +1,14 @@ +
+ + + + + + + + +
+
+
+ +
diff --git a/views/partials/scripts.ejs b/views/partials/scripts.ejs index 40bb306..47a027e 100644 --- a/views/partials/scripts.ejs +++ b/views/partials/scripts.ejs @@ -38,8 +38,6 @@ - - @@ -88,6 +86,7 @@ + diff --git a/views/reader.ejs b/views/reader.ejs index c389431..44fb2dd 100644 --- a/views/reader.ejs +++ b/views/reader.ejs @@ -13,6 +13,7 @@
[[ include controls/reader/about-room ]] + [[ include controls/reader/media-player ]]
-- cgit v1.2.3-70-g09d2