summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--public/assets/css/hootstream.css65
-rw-r--r--public/assets/js/lib/views/details/audio.js9
-rw-r--r--public/assets/js/lib/views/stream/hootfilters.js19
-rw-r--r--public/assets/js/lib/views/stream/hootstream.js13
-rw-r--r--views/hootstream/filters.ejs29
-rw-r--r--views/hootstream/hootform.ejs8
-rw-r--r--views/hootstream/index.ejs11
-rw-r--r--views/hootstream/templates.ejs59
-rw-r--r--views/pages/stream.ejs6
-rw-r--r--views/partials/hootstream.ejs73
10 files changed, 211 insertions, 81 deletions
diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 22405c8..ad51f3f 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -3,9 +3,12 @@
*/
#hootstream {
- margin-top: 3rem;
+ margin-top: 1.5rem;
font-size: 16px;
}
+#hootstream #audio {
+ display: none;
+}
#hootstream form {
display: flex;
width: 100%;
@@ -179,6 +182,9 @@
margin-left: 8rem;
margin-bottom: 1rem;
}
+#hootevents .fileList .playing:before {
+ content: "▷ ";
+}
#hootevents .fileRow {
width: 100%;
display: flex;
@@ -273,6 +279,62 @@
caret-color: #888;
}
+/** HOOT FILTERS */
+
+#hootfilters {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
+ font-size: 11px;
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+}
+#hootfilters label,
+#hootfilters div {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ min-width: auto;
+ margin-right: 0.25rem;
+}
+#hootfilters label {
+ cursor: pointer;
+}
+#hootfilters input[type="checkbox"],
+#hootfilters input[type="radio"] {
+ width: 0.75rem;
+ height: 0.75rem;
+ margin: 0.25rem;
+ opacity: 0.8;
+ transition: opacity 0.1s;
+}
+#hootfilters input[type="radio"] {
+ display: none;
+}
+#hootfilters input[type="checkbox"] + span,
+#hootfilters input[type="radio"] + span {
+ opacity: 0.6;
+ transition: opacity 0.1s;
+ font-style: italic;
+}
+#hootfilters label:hover span {
+ opacity: 1;
+}
+#hootfilters input[type="checkbox"]:checked,
+#hootfilters input[type="radio"]:checked {
+ opacity: 1;
+}
+#hootfilters input[type="checkbox"]:checked + span,
+#hootfilters input[type="radio"]:checked + span {
+ text-decoration: underline;
+ opacity: 1;
+}
+#hootfilters .sortDesc input[type="radio"]:checked + span {
+ text-decoration: overline;
+}
+
/** Read more */
#hootevents .readMore {
opacity: 0.7;
@@ -343,7 +405,6 @@
}
#hootstream {
padding-right: 0;
- margin-top: 1rem;
}
#hootevents .userLink {
display: none;
diff --git a/public/assets/js/lib/views/details/audio.js b/public/assets/js/lib/views/details/audio.js
index 0f81bb9..6c20e78 100644
--- a/public/assets/js/lib/views/details/audio.js
+++ b/public/assets/js/lib/views/details/audio.js
@@ -17,6 +17,7 @@ var audio = (function () {
audio.build();
el.src = music[0];
};
+
audio.index = function () {
music = [];
var links = document.querySelectorAll("a");
@@ -32,6 +33,7 @@ var audio = (function () {
audio.set_cursor();
}
};
+
audio.build = function () {
if (built) return;
built = true;
@@ -42,6 +44,7 @@ var audio = (function () {
parent.appendChild(el);
document.body.addEventListener("keydown", audio.keydown);
};
+
audio.destroy = function () {
el.pause();
el = null;
@@ -49,6 +52,7 @@ var audio = (function () {
document.body.removeEventListener("keydown", audio.keydown);
built = false;
};
+
audio.play = function (index) {
playing = true;
current_index = (parseInt(index) + music.length) % music.length;
@@ -56,21 +60,26 @@ var audio = (function () {
el.play();
audio.set_cursor();
};
+
audio.set_cursor = function () {
selected = document.querySelector(".playing");
if (selected) selected.classList.remove("playing");
music[current_index].classList.add("playing");
};
+
audio.prev = function () {
audio.play(current_index - 1);
};
+
audio.next = function () {
audio.play(current_index + 1);
};
+
audio.toggle = function () {
if (el.paused) el.play();
else el.pause();
};
+
audio.keydown = function (e) {
function element_is_text_input(el) {
var tagName = el.tagName.toLowerCase();
diff --git a/public/assets/js/lib/views/stream/hootfilters.js b/public/assets/js/lib/views/stream/hootfilters.js
new file mode 100644
index 0000000..bb060af
--- /dev/null
+++ b/public/assets/js/lib/views/stream/hootfilters.js
@@ -0,0 +1,19 @@
+var HootFilters = View.extend({
+ el: "#hootfilters",
+
+ events: {},
+
+ initialize: function (opt) {
+ this.__super__.initialize.call(this);
+ },
+
+ show: function () {
+ this.$el.show();
+ },
+
+ hide: function () {
+ this.$el.hide();
+ },
+
+ load: function () {},
+});
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index ad1fbc9..70d2b2a 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -18,11 +18,21 @@ var HootStream = View.extend({
},
onClickLink: function (event) {
+ if (event.ctrlKey || event.altKey || event.metaKey || event.shiftKey) {
+ return;
+ }
+ if (!event.target.href) {
+ return;
+ }
// console.log(event.target.className, event.target.href);
const url = new URL(event.target.href);
switch (event.target.className) {
case "file":
- // play audio?
+ console.log(url.pathname);
+ if (url.pathname.match(/(mp3|wav|ogg|opus|flac)$/i)) {
+ event.preventDefault();
+ audio.play(event.target.dataset.index); // index set in audio.js
+ }
break;
case "userLink":
case "threadLink":
@@ -60,6 +70,7 @@ var HootStream = View.extend({
}.bind(this)
);
this.$hootevents.append($els);
+ audio.init();
},
render: (template, object) => {
diff --git a/views/hootstream/filters.ejs b/views/hootstream/filters.ejs
new file mode 100644
index 0000000..27177aa
--- /dev/null
+++ b/views/hootstream/filters.ejs
@@ -0,0 +1,29 @@
+<div id="hootfilters">
+ <label>
+ <input type="checkbox" name="images" />
+ <span>images</span>
+ </label>
+ <label>
+ <input type="checkbox" name="music" />
+ <span>music</span>
+ </label>
+ <label>
+ <input type="checkbox" name="hoots" />
+ <span>hoots</span>
+ </label>
+ <label>
+ <input type="checkbox" name="comments" />
+ <span>comments</span>
+ </label>
+ <div>
+ &middot;
+ </div>
+ <div>
+ sort by
+ </div>
+ <div className="sort{{sort_direction}}">
+ <label><input type="radio" name="sort"><span>name</span></label>
+ <label><input type="radio" name="sort"><span>date</span></label>
+ <label><input type="radio" name="sort"><span>size</span></label>
+ </div>
+</div> \ No newline at end of file
diff --git a/views/hootstream/hootform.ejs b/views/hootstream/hootform.ejs
new file mode 100644
index 0000000..2dbad9e
--- /dev/null
+++ b/views/hootstream/hootform.ejs
@@ -0,0 +1,8 @@
+<div id="hootform">
+ <form autocomplete="off">
+ <input type="text" name="comment" autocomplete="off" required>
+ <button class="hoot"><%= hoot_text %></button>
+ </form>
+ <div class="errors"></div>
+</div>
+
diff --git a/views/hootstream/index.ejs b/views/hootstream/index.ejs
new file mode 100644
index 0000000..165e7e7
--- /dev/null
+++ b/views/hootstream/index.ejs
@@ -0,0 +1,11 @@
+<% include ../hootstream/filters %>
+
+<div class="bluebox alert"></div>
+
+<div id="hootstream">
+ <div id="audio"></div>
+ <div id="hootevents">
+ </div>
+ <% include ./hootform %>
+ <% include ./templates %>
+</div> \ No newline at end of file
diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs
new file mode 100644
index 0000000..9e9a114
--- /dev/null
+++ b/views/hootstream/templates.ejs
@@ -0,0 +1,59 @@
+<script class="hootTemplate" type="text/html">
+ <div class="{{className}}">
+ <a class="userLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
+ {{username}}
+ </a>
+ <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
+ <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
+ </a>
+ <div class="text" style="opacity: {{hoot_opacity}}">{{hoot}}</div>
+ <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+ </div>
+</script>
+
+<script class="threadTemplate" type="text/html">
+ <div class="{{className}}">
+ <a class="userLink" href="/stream/profile/{{username}}" style="opacity: {{thread_opacity}}">
+ {{username}}
+ </a>
+ <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
+ <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
+ </a>
+ <div class="text" style="opacity: {{age_opacity}}">{{hoot}}</div>
+ <div class="keyword">{{keyword_link}}</div>
+ <div class="commentCount" style="opacity: {{comment_opacity}}">{{comment_count}}</div>
+ <div class="fileCount" style="opacity: {{file_opacity}}">{{file_count}}</div>
+ <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
+ </div>
+</script>
+
+<script class="lastlogTemplate" type="text/html">
+ <div class="{{className}}" style="opacity: {{opacity}}">
+ <a class="userLink" href="/stream/profile/{{username}}">
+ {{username}}
+ </a>
+ <div class="text">{{hoot}}</div>
+ <div class="age date">{{age}}</div>
+ </div>
+</script>
+
+<script class="fileTemplate" type="text/html">
+ <div class="fileRow">
+ <div class="filename" style="opacity: {{age_opacity}}">
+ <a href="{{link}}" title="{{id}}" class="file">{{filename}}</a>
+ </div>
+ <div class="size" style="opacity: {{age_opacity}}">
+ {{size}}
+ </div>
+ <div class="age {{date_class}}" style="opacity: {{age_opacity}}">
+ {{age}}
+ </div>
+ </div>
+</script>
+
+<script class="imageTemplate" type="text/html">
+ <div class="image"><a href="{{link}}"><img src="{{src}}"></a></div>
+</script>
+
+<script class="hootImages" type="text/html">
+</script> \ No newline at end of file
diff --git a/views/pages/stream.ejs b/views/pages/stream.ejs
index 575d88a..cd16530 100644
--- a/views/pages/stream.ejs
+++ b/views/pages/stream.ejs
@@ -1,9 +1,5 @@
<% include ../partials/header %>
-<div class="subtitle"></div>
-
-<div class="bluebox alert"></div>
-<% include ../partials/hootstream %>
-<% include ../partials/threads %>
+<% include ../hootstream/index %>
<% include ../partials/footer %>
diff --git a/views/partials/hootstream.ejs b/views/partials/hootstream.ejs
deleted file mode 100644
index 4a94aa2..0000000
--- a/views/partials/hootstream.ejs
+++ /dev/null
@@ -1,73 +0,0 @@
-<div id="hootstream">
- <div id="hootform">
- <form autocomplete="off">
- <input type="text" name="comment" autocomplete="off" required>
- <button class="hoot"><%= hoot_text %></button>
- </form>
- <div class="errors"></div>
- </div>
- <div id="hootevents">
- </div>
- <script class="hootTemplate" type="text/html">
- <div class="{{className}}">
- <a class="userLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
- {{username}}
- </a>
- <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
- <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
- </a>
- <div class="text" style="opacity: {{hoot_opacity}}">{{hoot}}</div>
- <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
- </div>
- </script>
-
- <script class="threadTemplate" type="text/html">
- <div class="{{className}}">
- <a class="userLink" href="/stream/profile/{{username}}" style="opacity: {{thread_opacity}}">
- {{username}}
- </a>
- <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
- <div class="avatar" title="{{username}}" style="background-image:url({{image}});opacity:{{showAvatar}};"></div>
- </a>
- <div class="text" style="opacity: {{age_opacity}}">{{hoot}}</div>
- <div class="keyword">{{keyword_link}}</div>
- <div class="commentCount" style="opacity: {{comment_opacity}}">{{comment_count}}</div>
- <div class="fileCount" style="opacity: {{file_opacity}}">{{file_count}}</div>
- <div class="age date" style="opacity: {{age_opacity}}">{{age}}</div>
- </div>
- </script>
-
- <script class="lastlogTemplate" type="text/html">
- <div class="{{className}}" style="opacity: {{opacity}}">
- <a class="userLink" href="/stream/profile/{{username}}">
- {{username}}
- </a>
- <div class="text">{{hoot}}</div>
- <div class="age date">{{age}}</div>
- </div>
- </script>
-
- <script class="fileTemplate" type="text/html">
- <div class="fileRow">
- <div class="filename" style="opacity: {{age_opacity}}">
- <a href="{{link}}" title="{{id}}" class="file">{{filename}}</a>
- </div>
- <div class="size" style="opacity: {{age_opacity}}">
- {{size}}
- </div>
- <div class="age {{date_class}}" style="opacity: {{age_opacity}}">
- {{age}}
- </div>
- </div>
- </script>
-
- <script class="imageTemplate" type="text/html">
- <div class="image"><a href="{{link}}"><img src="{{src}}"></a></div>
- </script>
-
- <script class="hootFirstPost" type="text/html">
- </script>
-
- <script class="hootImages" type="text/html">
- </script>
-</div> \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 12:59:20 +0000