summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
Diffstat (limited to 'public')
-rw-r--r--public/assets/css/audioplayer.css7
-rw-r--r--public/assets/js/lib/views/details/audio.js40
-rw-r--r--public/assets/js/lib/views/details/audioPlayer.js5
-rw-r--r--public/assets/js/lib/views/index/threadform.js91
-rw-r--r--public/assets/js/lib/views/stream/hootstream.js7
-rw-r--r--public/assets/js/util/format.js4
6 files changed, 92 insertions, 62 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) {