summaryrefslogtreecommitdiff
path: root/public/assets/js
diff options
context:
space:
mode:
Diffstat (limited to 'public/assets/js')
-rw-r--r--public/assets/js/lib/views/details/audio.js8
-rw-r--r--public/assets/js/lib/views/details/audioPlayer.js11
-rw-r--r--public/assets/js/lib/views/stream/hootstream.js135
3 files changed, 93 insertions, 61 deletions
diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js
index 1c2f6f0..4fd02aa 100644
--- a/public/assets/js/lib/views/details/audio.js
+++ b/public/assets/js/lib/views/details/audio.js
@@ -79,8 +79,11 @@ const audio = (function () {
};
audio.play = function (index) {
- playing = true;
current_index = (parseInt(index) + music.length) % music.length;
+ if (!music[current_index]) {
+ return;
+ }
+ playing = true;
audio.el.src = music[current_index].href;
audio.el.play();
audio.set_cursor();
@@ -99,7 +102,7 @@ const audio = (function () {
audio.toggle = function () {
if (audio.el.paused) {
audio.el.play();
- if (ui) {
+ if (ui && music[current_index]) {
ui.onPlay(music[current_index]);
}
} else {
@@ -139,6 +142,7 @@ const audio = (function () {
return;
}
if (app.typing || event.ctrlKey || event.altKey || event.metaKey) return;
+ if (!music[current_index]) return;
switch (event.keyCode) {
case 37: // left
if (event.shiftKey) {
diff --git a/public/assets/js/lib/views/details/audioPlayer.js b/public/assets/js/lib/views/details/audioPlayer.js
index f31a8b3..8075dc7 100644
--- a/public/assets/js/lib/views/details/audioPlayer.js
+++ b/public/assets/js/lib/views/details/audioPlayer.js
@@ -8,7 +8,7 @@ const AudioPlayer = View.extend({
initialize: function () {
this.$title = this.$(".title");
- this.icon_el = this.$(".icon").get(0);
+ this.button_el = this.$(".icon").get(0);
this.pos_el = this.$(".pos").get(0);
this.track_el = this.$(".track").get(0);
this.dot_el = this.$(".dot").get(0);
@@ -17,6 +17,7 @@ const AudioPlayer = View.extend({
this.mousedown = this.mousedown.bind(this);
this.mousemove = this.mousemove.bind(this);
this.mouseup = this.mouseup.bind(this);
+ this.toggle = this.toggle.bind(this);
if (is_mobile) {
this.pos_el.addEventListener("touchstart", (e) =>
@@ -46,6 +47,8 @@ const AudioPlayer = View.extend({
const track_left = this.pos_el.offsetLeft;
this.down = true;
this.mousex = (e.pageX - track_left) / this.track_el.offsetWidth;
+ this.dot_el.style.transform =
+ "translateX(" + this.mousex * this.track_el.offsetWidth + "px)";
},
mousemove: function (e, isTouch) {
@@ -82,8 +85,8 @@ const AudioPlayer = View.extend({
this.$el.addClass("active");
}
// if (index === music.length) return stop();
- if (!this.icon_el.classList.contains("active")) {
- this.icon_el.classList.add("active");
+ if (!this.button_el.classList.contains("active")) {
+ this.button_el.classList.add("active");
}
this.onTimeUpdate();
@@ -93,7 +96,7 @@ const AudioPlayer = View.extend({
},
onPause: function () {
- this.icon_el.classList.remove("active");
+ this.button_el.classList.remove("active");
},
onStop: function () {
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 03f82fb..57009fd 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -22,6 +22,10 @@ var HootStream = View.extend({
this.forms = {};
},
+ /**
+ * Events
+ */
+
onClickLink: function (event) {
if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
return;
@@ -114,6 +118,7 @@ var HootStream = View.extend({
const $thread = this.renderThread(expandedThread);
$(event.target).closest(".thread").replaceWith($thread);
this.state.threadLookup[thread] = expandedThread;
+ this.state.expandedThreads[thread] = true;
}.bind(this)
);
},
@@ -187,11 +192,16 @@ var HootStream = View.extend({
this.build(this.state.filters);
},
+ /**
+ * Loader
+ */
+
load: function (data, filters) {
this.state = {
...this.agglutinate(data),
data,
filters,
+ expandedThreads: {},
};
this.build(filters);
},
@@ -312,7 +322,9 @@ var HootStream = View.extend({
audio.init();
},
- /** Render Methods */
+ /**
+ * Render Methods
+ */
render: (template, object) => {
if (!template) {
@@ -388,6 +400,7 @@ var HootStream = View.extend({
thread = thread[0];
const isViewingKeyword = query.keyword === thread.keyword;
const isViewingThread = query.thread === thread.id;
+ const isExpanded = this.state.expandedThreads[thread.id] === true;
const isCompleteThread = !!(
thread.file_count === files.length + images.length &&
thread.comment_count === comments.length
@@ -432,67 +445,79 @@ var HootStream = View.extend({
)
.join("");
- return [
- "<div class='divider dark'></div>",
- this.renderHoot({
- template: this.threadTemplate,
- thread: thread.id,
- hoot: `<a class="threadLink" href="/stream/thread/${thread.id}">${thread.title}</a>`,
- thread_opacity,
- actions,
- keyword_link: thread.keyword
- ? `<a class="keywordLink" href="/stream/keyword/${thread.keyword}">${thread.keyword}</a>`
- : "",
- username: thread.username,
- className: postedToday ? "isRecent" : "",
- date: thread.lastmodified,
- file_count: `${thread.file_count || 0} f.`,
- file_opacity: age_opacity * get_size_opacity(thread.file_count),
- comment_count: `${thread.comment_count || 0} c.`,
- comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
- }),
- this.renderImages(
- isViewingThread || postedToday
- ? filteredImages
- : filteredImages.slice(0, 6)
- ),
- this.renderFiles(
- isViewingThread || postedToday ? sortedFiles : sortedFiles.slice(0, 10)
+ /**
+ * Assemble the components that we're going to render
+ */
+
+ const threadTitle = {
+ template: this.threadTemplate,
+ thread: thread.id,
+ hoot: `<a class="threadLink" href="/stream/thread/${thread.id}">${thread.title}</a>`,
+ thread_opacity,
+ actions,
+ keyword_link: thread.keyword
+ ? `<a class="keywordLink" href="/stream/keyword/${thread.keyword}">${thread.keyword}</a>`
+ : "",
+ username: thread.username,
+ className: postedToday ? "isRecent" : "",
+ date: thread.lastmodified,
+ file_count: `${thread.file_count || 0} f.`,
+ file_opacity: age_opacity * get_size_opacity(thread.file_count),
+ comment_count: `${thread.comment_count || 0} c.`,
+ comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
+ };
+
+ const topImages =
+ isViewingThread || postedToday
+ ? filteredImages
+ : filteredImages.slice(0, 6);
+
+ const fileList =
+ isViewingThread || postedToday ? sortedFiles : sortedFiles.slice(0, 10);
+
+ const firstPost = {
+ hoots: comments.slice(0, 1).map(
+ trimComment({
+ isViewingThread,
+ lines: 5,
+ snippetSize: 512,
+ cropSize: 256,
+ })
),
- ...this.renderHoots({
- hoots: comments.slice(0, 1).map(
- trimComment({
- isViewingThread,
- lines: 5,
- snippetSize: 512,
- cropSize: 256,
- })
- ),
- className: "first_post",
- }),
- ...this.renderHoots({
- hoots:
- isViewingThread || postedToday
- ? comments.slice(1).map(
+ className: "first_post",
+ };
+
+ const restOfComments = {
+ hoots:
+ isViewingThread || postedToday
+ ? comments.slice(1).map(
+ trimComment({
+ isViewingThread,
+ lines: 1,
+ snippetSize: 256,
+ cropSize: 128,
+ })
+ )
+ : comments
+ .slice(1)
+ .slice(-5)
+ .map(
trimComment({
isViewingThread,
lines: 1,
snippetSize: 256,
cropSize: 128,
})
- )
- : comments
- .slice(1)
- .slice(-5)
- .map(
- trimComment({
- isViewingThread,
- lines: 1,
- snippetSize: 256,
- cropSize: 128,
- })
- ),
- }),
+ ),
+ };
+
+ return [
+ "<div class='divider dark'></div>",
+ this.renderHoot(threadTitle),
+ this.renderImages(topImages),
+ this.renderFiles(fileList),
+ ...this.renderHoots(firstPost),
+ ...this.renderHoots(restOfComments),
"<div class='divider'></div>",
];
},
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 13:29:26 +0000