diff options
Diffstat (limited to 'public/assets/js')
| -rw-r--r-- | public/assets/js/lib/views/details/audio.js | 40 | ||||
| -rw-r--r-- | public/assets/js/lib/views/details/audioPlayer.js | 5 | ||||
| -rw-r--r-- | public/assets/js/lib/views/index/threadform.js | 91 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 7 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 4 |
5 files changed, 86 insertions, 61 deletions
diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js index 2329886..1c2f6f0 100644 --- a/public/assets/js/lib/views/details/audio.js +++ b/public/assets/js/lib/views/details/audio.js @@ -20,23 +20,37 @@ const audio = (function () { audio.index(); audio.build(); if (music.length) { - audio.el.src = music[0]; + audio.el.src = music[0].href; } initted = true; }; - audio.index = function () { + audio.index = function (files) { music = []; current_index = -1; - var links = document.querySelectorAll("a"); - Array.prototype.slice.apply(links).forEach(function (link) { - if (!link.href.match(/\.(mp3|wav|aiff?|m4a|ogg|opus|flac)$/)) return; - link.dataset.index = music.length; - music.push(link); - if (playing && link.href === audio.el.src) { - current_index = parseInt(link.dataset.index); - } - }); + if (files) { + music = files + .filter((file) => AUDIO_REGEXP.test(file.filename)) + .map((file) => ({ + href: make_link(file), + title: file.filename.replace(AUDIO_REGEXP, ""), + })); + } else { + var links = document.querySelectorAll("a"); + Array.prototype.slice.apply(links).forEach(function (link) { + if (!link.href.match(/\.(mp3|wav|aiff?|m4a|ogg|opus|flac)$/)) return; + link.dataset.index = music.length; + music.push({ + el: link, + href: link.href, + title: link.innerText, + }); + if (playing && link.href === audio.el.src) { + current_index = parseInt(link.dataset.index); + } + }); + } + console.log(music); if (playing) { audio.set_cursor(); } @@ -99,8 +113,8 @@ const audio = (function () { audio.set_cursor = function () { selected = document.querySelector(".playing"); if (selected) selected.classList.remove("playing"); - if (current_index > -1) { - music[current_index].classList.add("playing"); + if (current_index > -1 && music[current_index].el) { + music[current_index].el.classList.add("playing"); } }; diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js index a2e38e5..89f0dd4 100644 --- a/public/assets/js/lib/views/details/audioPlayer.js +++ b/public/assets/js/lib/views/details/audioPlayer.js @@ -75,7 +75,7 @@ const AudioPlayer = View.extend({ /** * Receiving play events */ - onPlay: function (element) { + onPlay: function ({ href, title, element }) { if (!this.active) { this.$el.removeClass("unloaded"); this.active = true; @@ -87,8 +87,7 @@ const AudioPlayer = View.extend({ } this.onTimeUpdate(); - if (element) { - const title = element.innerText; + if (title) { this.$title.html(title); } }, diff --git a/public/assets/js/lib/views/index/threadform.js b/public/assets/js/lib/views/index/threadform.js index b71eea0..ad3c2fb 100644 --- a/public/assets/js/lib/views/index/threadform.js +++ b/public/assets/js/lib/views/index/threadform.js @@ -1,5 +1,4 @@ var ThreadForm = FormView.extend({ - el: "#thread_form", events: { @@ -9,58 +8,64 @@ var ThreadForm = FormView.extend({ action: "/api/thread", method: "POST", - initialize: function(){ - this.__super__.initialize.call(this) - this.template = this.$(".template").html() + initialize: function () { + this.__super__.initialize.call(this); + this.template = this.$(".template").html(); }, - load: function(selected_keyword){ - $.get("/api/keywords", function(data){ - var tags = {} - data.keywords.forEach(keyword => { - var kw = keyword.keyword - var opt = document.createElement('option') - opt.value = kw - opt.innerHTML = kw - tags[kw] = opt - }) - var sorted = Object.keys(tags).sort().map(kw => tags[kw]) - this.$('[name=keyword]').append(sorted) - if (selected_keyword) { - this.$('[name=keyword]').val(selected_keyword) - } else { - this.$('[name=keyword]').val('unsorted') - } - $("body").removeClass('loading') - }.bind(this)) + load: function (selected_keyword) { + $.get( + "/api/keywords", + function (data) { + var tags = {}; + data.keywords.forEach((keyword) => { + var kw = keyword.keyword; + var opt = document.createElement("option"); + opt.value = kw; + opt.innerHTML = kw; + tags[kw] = opt; + }); + var sorted = Object.keys(tags) + .sort() + .map((kw) => tags[kw]); + this.$("[name=keyword]").append(sorted); + if (selected_keyword) { + this.$("[name=keyword]").val(selected_keyword); + } else { + this.$("[name=keyword]").val("unsorted"); + } + $("body").removeClass("loading"); + }.bind(this) + ); }, - keydown: function(e){ - if ((e.ctrlKey || e.metaKey || e.altKey) && e.keyCode == 83) { // "s" key - e.preventDefault() - e.stopPropagation() - this.save() + keydown: function (e) { + if ((e.ctrlKey || e.metaKey || e.altKey) && e.keyCode == 83) { + // "s" key + e.preventDefault(); + e.stopPropagation(); + this.save(); } }, - validate: function(){ - var errors = [] - var title = this.$("[name=title]").val() - if (! title || ! title.length) { - errors.push("Please title your post.") + validate: function () { + var errors = []; + var title = this.$("[name=title]").val(); + if (!title || !title.length) { + errors.push("Please title your post."); } - var comment = this.$("[name=comment]").val() - var files = this.$("[name=files]").val() - if ((! comment || ! comment.length) && ! files) { - errors.push("Please enter a comment or add some files.") + var comment = this.$("[name=comment]").val(); + var files = this.$("[name=files]").val(); + if ((!comment || !comment.length) && !files) { + errors.push("Please enter a comment or add some files."); } - return errors.length ? errors : null + return errors.length ? errors : null; }, - success: function(data){ + success: function (data) { if (data.error) { - return alert(data.error) + return alert(data.error); } - window.location.href = "/details/" + data.id - } -}) + window.location.href = "/details/" + data.id; + }, +}); diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js index 905f0e7..94d1cb3 100644 --- a/public/assets/js/lib/views/stream/hootstream.js +++ b/public/assets/js/lib/views/stream/hootstream.js @@ -80,6 +80,13 @@ var HootStream = View.extend({ // $.get(`/api/stream?thread=${thread}`).then((response) => { console.log(response); + audio.index( + response.files + .map((file) => [file.filename.toLowerCase(), file]) + .sort((a, b) => a[0].localeCompare(b[0])) + .map(([, file]) => file) + ); + audio.play(0); }); }, diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js index 3e0228d..422a4c6 100644 --- a/public/assets/js/util/format.js +++ b/public/assets/js/util/format.js @@ -6,8 +6,8 @@ var is_mobile = is_iphone || is_ipad || is_android; var is_desktop = !is_mobile; document.body.classList.add(is_desktop ? "desktop" : "mobile"); -const AUDIO_REGEXP = /(mp3|wav|aif|aiff|ogg|opus|flac)$/i; -const IMAGE_REGEXP = /(.gif|.jpg|.jpeg|.png)$/i; +const AUDIO_REGEXP = /\.(mp3|wav|aif|aiff|ogg|opus|flac)$/i; +const IMAGE_REGEXP = /\.(gif|jpg|jpeg|png)$/i; const CONTAINS_IMAGE_URL_REGEXP = /http\S+\.(gif|jpe?g|png)/i; function choice(a) { |
