diff options
| -rw-r--r-- | public/assets/css/audioplayer.css | 7 | ||||
| -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 | ||||
| -rw-r--r-- | views/hootstream/templates.ejs | 27 |
7 files changed, 117 insertions, 64 deletions
diff --git a/public/assets/css/audioplayer.css b/public/assets/css/audioplayer.css index 2728c16..530195a 100644 --- a/public/assets/css/audioplayer.css +++ b/public/assets/css/audioplayer.css @@ -32,6 +32,7 @@ opacity: 0; } .player.unloaded { + opacity: 0 !important; pointer-events: none; } .player.active { @@ -49,7 +50,11 @@ border-radius: 0.25rem; } .player .controls { - background: linear-gradient(-90deg, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.95)); + background: linear-gradient( + -90deg, + rgba(20, 10, 10, 0.85), + rgba(10, 10, 20, 0.95) + ); } .player .trackInfo { justify-content: space-between; 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) { diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs index e3bb612..2f6de87 100644 --- a/views/hootstream/templates.ejs +++ b/views/hootstream/templates.ejs @@ -64,5 +64,28 @@ <div class="image"><a href="{{link}}">[{{filename}}, {{size}}]</a></div> </script> -<script class="hootImages" type="text/html"> -</script>
\ No newline at end of file +<script class="thread-form" type="text/html"> + <form> + <input type="text" name="title" placeholder="Enter a title"> + <textarea name="comment" placeholder="Add a comment"></textarea> + <div class="inputs"> + <input name="files" type="file" multiple> + <select name="keyword" id="keywords"></select> + <input type="submit" value="POST" /> + <div class="loader"></div> + </div> + <div class='errors'></div> + </form> +</script> + +<script class="comment-form" type="text/html"> + <form> + <textarea name="comment" placeholder="Add a comment"></textarea> + <div class="inputs"> + <input name="files" type="file" multiple> + <input type="submit" value="POST" /> + <div class="loader"></div> + </div> + <div class='errors'></div> + </form> +</script> |