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 --- public/assets/javascripts/ui/_router.js | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) (limited to 'public/assets/javascripts/ui/_router.js') 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', -- 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/ui/_router.js') 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/ui/_router.js') 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 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/_router.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/_router.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 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/ui/_router.js') 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