hootform styling and fixing

6 files changed, 149 insertions, 33 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 97d1a77..c06ec13 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -9,26 +9,6 @@
 #audio {
   display: none;
 }
-#hootstream form {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  align-items: center;
-  flex-direction: row;
-  margin-bottom: 0.75rem;
-}
-#hootstream form input {
-  flex: 1;
-  font-size: 16px;
-  padding: 0.25rem;
-  margin-bottom: 0;
-}
-#hootstream form button {
-  margin: 0;
-  padding: 0.25rem;
-  margin-left: 0.5rem;
-  min-width: 2.5rem;
-}
 #hootevents {
   font-size: 14px;
   padding-right: 3rem;
@@ -54,6 +34,42 @@
 .hoot:hover > .text {
   opacity: 1 !important;
 }
+#hootevents .threadTitle .text {
+  display: flex;
+  flex-direction: row;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+}
+#hootevents .threadTitle .text .actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: center;
+  transition: opacity 0.1s;
+  opacity: 0.8;
+  user-select: none;
+}
+#hootevents .threadTitle:hover .text .actions {
+  opacity: 1;
+}
+#hootevents .threadTitle .text .actions div {
+  cursor: default;
+  margin-left: 0.5rem;
+}
+#hootevents .threadTitle .text .actions .action {
+  cursor: pointer;
+  color: #48f;
+  opacity: 0.9;
+  transition: opacity 0.1s;
+}
+#hootevents .threadTitle .text .actions .action:hover {
+  text-decoration: underline;
+  opacity: 1;
+}
+#hootevents .threadTitle .text .actions .action[data-action="play"] {
+  color: #8df;
+}
 
 /** ImAgeS and other image lISTS!! */
 #hootevents .imageList {
@@ -174,8 +190,10 @@
   text-shadow: 0 0 3px rgba(192, 192, 192, 0.2);
 }
 #hootevents .hoot .threadLink {
-  color: #38f;
+  color: #6bf;
   font-size: 16px;
+  text-decoration: none;
+  border-bottom: 1px solid;
 }
 
 /** DiViDErZ */
@@ -319,34 +337,70 @@
 /** HOOT FORM */
 
 #hootform {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 100%;
+  width: 720px;
+  padding: 8px;
   margin-bottom: 0.5rem;
   padding: 0.5rem;
+  margin-left: 3.5rem;
+}
+#hootform form {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  flex-direction: row;
+  margin-bottom: 0.75rem;
+}
+#hootform form input {
+  flex: 1;
+  font-size: 16px;
+  padding: 0.25rem;
+  margin-bottom: 0;
+}
+#hootform form button {
+  margin: 0;
+  padding: 0.25rem;
+  padding: 0.25rem;
+  margin-left: 0.5rem;
+  min-width: 3rem;
+  font-size: 0.75rem;
+  opacity: 0.6;
+  transition: opacity 0.1s;
 }
 #hootform input[type="text"] {
   border-top: 0;
   border-left: 0;
   border-right: 0;
   border-bottom: 1px solid rgba(127, 127, 127, 0.5);
-  padding-bottom: 3px;
+  padding: 0.5rem;
   font-size: 14px;
   font-family: "Trebuchet MS", sans-serif;
   background: transparent;
   outline: 0;
-  width: 270px;
+  flex: 1;
   transition: background 200ms;
-  background: white;
+  background: rgba(127, 127, 127, 0.1);
+  color: white;
 }
 #hootform input[type="text"]:invalid {
-  background: transparent;
+  background: rgba(127, 127, 127, 0.2);
 }
 #hootform input[type="text"]:focus {
   border-bottom: 1px solid rgba(40, 20, 20, 0.2);
   border-radius: 2px 2px 0 0;
-  color: #211;
+  /*color: #211;*/
 }
 #hootform input[type="text"]:focus {
   border-bottom-color: rgba(127, 127, 127, 0.2);
 }
+#hootform input[type="text"]:not(:invalid):focus + button {
+  opacity: 1;
+}
 #hootform input[type="text"]:invalid {
   caret-color: #888;
 }
@@ -480,6 +534,7 @@
   }
   #hootform {
     margin-bottom: 0rem;
+    margin-left: 0;
   }
   #hootevents {
     padding-right: 0;
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);
   },
 
diff --git a/views/hootstream/templates.ejs b/views/hootstream/templates.ejs
index 972a308..e3bb612 100644
--- a/views/hootstream/templates.ejs
+++ b/views/hootstream/templates.ejs
@@ -12,14 +12,19 @@
 </script>
 
 <script class="threadTemplate" type="text/html">
-  <div class="threadTitle {{className}}">
+  <div class="threadTitle {{className}}" data-thread="{{thread}}">
     <a class="userLink" href="/stream/profile/{{username}}" style="opacity: {{thread_opacity}}">
       {{username}}
     </a>
-    <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{age_opacity}}">
+    <a class="avatarLink" href="/stream/profile/{{username}}" style="opacity: {{thread_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="text" style="opacity: {{age_opacity}}">
+      {{hoot}}
+      <div class="actions">
+        {{actions}}
+      </div>
+    </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>
diff --git a/views/pages/details.ejs b/views/pages/details.ejs
index 234fc5f..03f4c15 100644
--- a/views/pages/details.ejs
+++ b/views/pages/details.ejs
@@ -1,7 +1,7 @@
 <% include ../partials/header %>
 <div class="subtitle">
   <a href='/'>&lt; Home</a> &middot;
-  <a href='/stream'>Stream</a> &middot;
+  <a href='/stream' class="stream_link">Stream</a> &middot;
   <span class="metadata"></span>
   &middot;
   <a href='#' class='settings_link'>Settings</a>