From bce442242f167b70be1f7b24190f9e59d3c24e37 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Thu, 10 Jul 2014 18:21:06 -0400 Subject: media editor --- views/controls/reader/about-media.ejs | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 views/controls/reader/about-media.ejs (limited to 'views/controls/reader') diff --git a/views/controls/reader/about-media.ejs b/views/controls/reader/about-media.ejs new file mode 100644 index 0000000..c6365ad --- /dev/null +++ b/views/controls/reader/about-media.ejs @@ -0,0 +1,16 @@ +
+ +
+
+
+
+ +
+ + + + + +
+ +
-- 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 'views/controls/reader') 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 'views/controls/reader') 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 @@
- - - + + +