hootform styling and fixing

3 files changed, 59 insertions, 3 deletions

diff --git a/public/assets/js/lib/views/stream/hootform.js b/public/assets/js/lib/views/stream/hootform.js
index f13cc55..07533d5 100644
--- a/public/assets/js/lib/views/stream/hootform.js
+++ b/public/assets/js/lib/views/stream/hootform.js
@@ -6,7 +6,8 @@ var HootForm = FormView.extend({
   action: "/api/thread/1/comment",
 
   initialize: function (opt) {
-    this.__super__.initialize.call(this);
+    this.__super__.initialize.call(this, opt);
+    this.parent = opt.parent;
     this.$comment = this.$("[name=comment]");
   },
 
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 51d26ba..905f0e7 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -4,6 +4,7 @@ var HootStream = View.extend({
   events: {
     "click a": "onClickLink",
     "click .filename": "onClickFilename",
+    "click .action": "onClickAction",
   },
 
   initialize: function ({ parent }) {
@@ -58,6 +59,38 @@ var HootStream = View.extend({
     }
   },
 
+  onClickAction: function (event) {
+    const action = $(event.target).data("action");
+    const thread = $(event.target).closest(".threadTitle").data("thread");
+    console.log(action, thread);
+    switch (action) {
+      case "play":
+        this.onPlay(thread);
+        break;
+      case "expand":
+        this.onExpand(thread);
+        break;
+      case "post":
+        this.onShowForm(thread);
+        break;
+    }
+  },
+
+  onPlay: function (thread) {
+    //
+    $.get(`/api/stream?thread=${thread}`).then((response) => {
+      console.log(response);
+    });
+  },
+
+  onExpand: function (thread) {
+    //
+  },
+
+  onPost: function (thread) {
+    //
+  },
+
   load: function (data, filters) {
     this.state = {
       ...this.agglutinate(data),
@@ -226,6 +259,8 @@ var HootStream = View.extend({
     // console.log(hoot, comment);
     const age_opacity = get_age_opacity(date);
     return this.render(template || this.hootTemplate, {
+      id,
+      thread,
       username,
       className: className ? `hoot ${className}` : "hoot",
       image: profile_image(username),
@@ -265,6 +300,8 @@ var HootStream = View.extend({
       1.0
     );
 
+    const hasAudio = files.some((file) => AUDIO_REGEXP.test(file.filename));
+
     const filteredImages = images
       .map((image) => [image, new RegExp(encodeURIComponent(image.filename))])
       .filter(
@@ -277,12 +314,27 @@ var HootStream = View.extend({
     // console.log(thread);
     const sortedFiles = this.sortFiles(files, thread.settings?.sort);
 
+    const actions = [
+      hasAudio && { action: "play", label: "Play music" },
+      { action: "expand", label: "Expand" },
+      { action: "post", label: "Post" },
+    ]
+      .filter((action) => !!action)
+      .map(
+        ({ action, label }) =>
+          "<div>&middot;</div>" +
+          `<div class="action" data-action="${action}">${label}</div>`
+      )
+      .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>`
           : "",
diff --git a/public/assets/js/lib/views/stream/index.js b/public/assets/js/lib/views/stream/index.js
index 1504554..0a2aeb9 100644
--- a/public/assets/js/lib/views/stream/index.js
+++ b/public/assets/js/lib/views/stream/index.js
@@ -42,8 +42,11 @@ var StreamView = View.extend({
   },
 
   onComment: function (comment) {
-    this.data.hootbox.comments.push(comment);
-    this.data.hootstream.comments.push(comment);
+    if (comment.thread === 1) {
+      this.data.hootbox.push(comment);
+    } else {
+      this.data.comments.push(comment);
+    }
     this.populate(this.data);
   },