diff options
Diffstat (limited to 'public/assets')
7 files changed, 219 insertions, 8 deletions
diff --git a/public/assets/javascripts/mx/primitives/mx.image.js b/public/assets/javascripts/mx/primitives/mx.image.js index 575e9c0..b8557bf 100644 --- a/public/assets/javascripts/mx/primitives/mx.image.js +++ b/public/assets/javascripts/mx/primitives/mx.image.js @@ -12,7 +12,7 @@ MX.Image = MX.Object3D.extend({ this.backface = ops.backface || false ops.className && this.el.classList.add(ops.className) - this.backface && this.el.classList.add("backface-visible") + this.backface && this.el.classList.add("backface-visible") this.el.classList.add("image") this.el.classList.add("mx-scenery") diff --git a/public/assets/javascripts/mx/primitives/mx.soundcloud.js b/public/assets/javascripts/mx/primitives/mx.soundcloud.js new file mode 100644 index 0000000..6ac64bb --- /dev/null +++ b/public/assets/javascripts/mx/primitives/mx.soundcloud.js @@ -0,0 +1,122 @@ +MX.Soundcloud = MX.Object3D.extend({ + init: function (ops) { + + this.type = "Soundcloud" + this.media = ops.media + this.width = 0 + this.height = 0 + this.x = ops.x || 0 + this.y = ops.y || 0 + this.z = ops.z || 0 + this.scale = ops.scale || 1 + this.backface = ops.backface || false + + ops.className && this.el.classList.add(ops.className) + this.backface && this.el.classList.add("backface-visible") + this.el.classList.add("audio") + this.el.classList.add("mx-scenery") + + this.el.style.backgroundRepeat = 'no-repeat' + + this.ops = ops + }, + + load: function(ops){ + if (ops) { + ops = this.ops = defaults(ops, this.ops) + } + else { + ops = this.ops + } + + this.width = ops.media.width + this.height = ops.media.height + + var tag = Parser.lookup.soundcloud.tag(ops.media) + var $iframe = $(tag) + var iframe = $iframe[0] + $iframe.css('z-index', '-1') + this.el.appendChild( iframe ) + + var overlay = this.overlay = document.createElement("div") + overlay.style.width = "100%" + overlay.style.height = "100%" + overlay.style.position = "absolute" + overlay.style.top = "0" + overlay.style.left = "0" + overlay.style.zIndex = "2" + overlay.className = "overlay" + this.el.appendChild(overlay) + + this.player = SC.Widget( iframe ) + this.player.setVolume(80) + + this.duration = 0 + + this.player.bind(SC.Widget.Events.READY, this.ready.bind(this)) +// this.player.bind(SC.Widget.Events.LOAD_PROGRESS, this.loadProgress.bind(this)) +// this.player.bind(SC.Widget.Events.PLAY_PROGRESS, this.playProgress.bind(this)) + this.player.bind(SC.Widget.Events.PLAY, this.didPlay.bind(this)) + this.player.bind(SC.Widget.Events.PAUSE, this.didPause.bind(this)) + this.player.bind(SC.Widget.Events.FINISH, this.finished.bind(this)) + }, + + ready: function(){ + if (this.media.autoplay) { + this.play() + } + + this.player.getDuration(function(duration){ + this.duration = duration + }.bind(this)) + }, + + play: function(){ + this.player.play() + }, + + pause: function(){ + this.player.pause() + }, + + toggle: function(state){ + if (typeof state === "boolean") { + if (state) this.play() + else this.pause() + } + else { + this.player.toggle() + } + }, + + seek: function(n){ + if (n < 1) { + n = n * this.duration + } + this.player.seekTo(n) + }, + + setLoop: function(state){ + this.media.loop = state + }, + + didPlay: function(){ + this.paused = false + }, + + didPause: function(){ + this.paused = true + }, + + finished: function(){ + console.log("soundcloud finished") + if (this.media.loop) { + this.seek(0) + this.play() + } + else if (this.bound) { + $(".playButton").removeClass('playing') + } + }, + +}) diff --git a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js index 436712a..a0f5b35 100644 --- a/public/assets/javascripts/rectangles/engine/scenery/_scenery.js +++ b/public/assets/javascripts/rectangles/engine/scenery/_scenery.js @@ -27,6 +27,11 @@ var Scenery = new function(){ scene_media = new Scenery.types.video (opt) break + case 'soundcloud': + if (is_mobile) return + scene_media = new Scenery.types.audio (opt) + break + case 'text': scene_media = new Scenery.types.text (opt) scene_media.focused = true diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/audio.js b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js new file mode 100644 index 0000000..82f984e --- /dev/null +++ b/public/assets/javascripts/rectangles/engine/scenery/types/audio.js @@ -0,0 +1,73 @@ + +Scenery.types.audio = Scenery.types.base.extend(function(base){ + + var exports = { + + type: 'audio', + + init: function(opt){ + + opt.scale = 1.0 + + base.init.call(this, opt) + + this.build() + this.bind() + this.place(opt) + }, + + build: function(){ + this.mx = new MX.Soundcloud({ + scale: this.scale, + media: this.media, + y: this.scale * this.media.height/2, + backface: false, + }) + scene.add( this.mx ) + this.mx.load() + }, + + serialize: function(){ + var data = base.serialize.call(this) + return data + }, + + deserialize: function(data){ + this.mx.move(data.position) + this.mx.ops.width = data.dimensions.a + this.mx.ops.height = data.dimensions.b + this.dimensions.deserialize(data.dimensions) + }, + + play: function(){ + this.mx.play() + }, + + pause: function(){ + this.mx.pause() + }, + + toggle: function(){ + this.mx.toggle() + }, + + paused: function(){ + return this.mx.paused + }, + + muted: function(){ + return this.mx.muted + }, + + seek: function(n){ + this.mx.seek(n) + }, + + setLoop: function(shouldLoop){ + this.mx.setLoop(shouldLoop) + }, + + } + + return exports +}) diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js index 9593ab7..4af94e5 100644 --- a/public/assets/javascripts/ui/editor/MediaViewer.js +++ b/public/assets/javascripts/ui/editor/MediaViewer.js @@ -190,6 +190,10 @@ var MediaViewer = ModalView.extend({ image.src = media.url image.load() break + + case 'soundcloud': + image.src = media.thumbnail + break } $span.data("media", media) @@ -250,6 +254,7 @@ var MediaViewer = ModalView.extend({ switch (media.type) { case "video": + case "soundcloud": $floatingImg.attr('src', '/assets/img/playbutton.png') break diff --git a/public/assets/javascripts/ui/lib/Parser.js b/public/assets/javascripts/ui/lib/Parser.js index d68f58b..87d52ef 100644 --- a/public/assets/javascripts/ui/lib/Parser.js +++ b/public/assets/javascripts/ui/lib/Parser.js @@ -115,7 +115,6 @@ var Parser = { return '<div class="video" style="width: ' + media.width + 'px; height: ' + media.height + 'px; overflow: hidden; position: relative;"><iframe frameborder="0" scrolling="no" seamless="seamless" webkitallowfullscreen="webkitAllowFullScreen" mozallowfullscreen="mozallowfullscreen" allowfullscreen="allowfullscreen" id="okplayer" src="http://player.vimeo.com/video/' + media.token + '?api=1&title=0&byline=0&portrait=0&playbar=0&player_id=okplayer&loop=0&autoplay=0" width="' + media.width + '" height="' + media.height + '" style="position: absolute; top: 0px; left: 0px; width: ' + media.width + 'px; height: ' + media.height + 'px;"></iframe></div>' } }, - /* { type: 'soundcloud', regex: /soundcloud.com\/[-a-zA-Z0-9]+\/[-a-zA-Z0-9]+\/?$/i, @@ -127,24 +126,28 @@ var Parser = { + '&client_id=' + '0673fbe6fc794a7750f680747e863b10', success: function(result) { + // console.log(result) done({ url: url, type: "soundcloud", token: result.id, - thumbnail: "", - title: "", - width: 100, - height: 100, + thumbnail: result.artwork_url || result.user.avatar_url, + title: result.title, + description: result.user.username, + width: 166, + height: 166, }) } }); }, tag: function (media) { - return '<iframe width="400" height="166" scrolling="no" frameborder="no"' + + return '<iframe width="166" height="166" scrolling="no" frameborder="no"' + 'src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/' + media.token + '&color=ff6600&auto_play=false&show_artwork=true"></iframe>' } - }, { + }, + /* + { type: 'link', regex: /^http.+/i, fetch: function(url, done) { diff --git a/public/assets/javascripts/ui/reader/MediaPlayer.js b/public/assets/javascripts/ui/reader/MediaPlayer.js index 42e7596..f5a0d2c 100644 --- a/public/assets/javascripts/ui/reader/MediaPlayer.js +++ b/public/assets/javascripts/ui/reader/MediaPlayer.js @@ -49,6 +49,9 @@ var MediaPlayer = FormView.extend({ return false } } + else if (media.type == "text") { + return false + } this.bind(scenery) this.$el.addClass("active") |