initial play icon

4 files changed, 103 insertions, 3 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) => {