update padding still lol hi :)

2 files changed, 70 insertions, 64 deletions

diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index f748417..f4e48c4 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -7,6 +7,7 @@ var HootStream = View.extend({
     this.parent = parent;
     this.$hootevents = this.$("#hootevents");
     this.hootTemplate = this.$(".hootTemplate").html();
+    this.threadTemplate = this.$(".threadTemplate").html();
     this.lastlogTemplate = this.$(".lastlogTemplate").html();
     this.fileTemplate = this.$(".fileTemplate").html();
   },
@@ -64,16 +65,20 @@ var HootStream = View.extend({
     hidden,
     className,
     showAvatar,
+    template,
+    ...options
   }) {
-    console.log(hoot, comment);
-    return this.render(this.hootTemplate, {
+    // console.log(hoot, comment);
+    return this.render(template || this.hootTemplate, {
       username,
       className: className ? `hoot ${className}` : "hoot",
       image: profile_image(username),
       showAvatar: showAvatar === false ? 0 : 1,
-      hoot: hoot || tidy_urls(comment, true),
+      hoot:
+        hoot || "<div class='hootText'>" + tidy_urls(comment, true) + "</div>",
       age: get_age(date),
       age_opacity: get_age_opacity(date),
+      ...options,
     });
   },
 
@@ -88,45 +93,34 @@ var HootStream = View.extend({
   renderThread: function ({ thread, comments, files, images }) {
     thread = thread.shift();
     // console.log(thread, comments, files, images);
-    const postedToday = +new Date() / 1000 - thread.date < 86400;
-
-    if (postedToday) {
-      return [
-        "<div class='divider dark'></div>",
-        this.renderHoot({
-          hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`,
-          username: thread.username,
-          className: "isRecent",
-          date: thread.lastmodified,
-          ...this.renderFiles(files),
-          ...this.renderHoots({
-            hoots: comments.slice(0, 1),
-            tag: "first_post",
-          }),
-          ...this.renderHoots({ hoots: comments.slice(1) }),
-        }),
-        "<div class='divider'></div>",
-      ];
-      // display very proud headline
-      // title, avatar, first image, full file list,
-    } else {
-      return [
-        "<div class='divider dark'></div>",
-        this.renderHoot({
-          hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`,
-          username: thread.username,
-          className: "",
-          date: thread.lastmodified,
-        }),
-        this.renderFiles(files.slice(0, 10)),
-        ...this.renderHoots({ hoots: comments.slice(0, 1), tag: "first_post" }),
-        ...this.renderHoots({ hoots: comments.slice(1).slice(-5) }),
-        "<div class='divider'></div>",
-      ];
-      // say "in ... "
-      // audio player OR recent file list
-      // recent 3 comments
-    }
+    const postedToday = +new Date() / 1000 - thread.lastmodified < 86400;
+    const age_opacity = get_age_opacity(thread.lastmodified);
+    return [
+      "<div class='divider dark'></div>",
+      this.renderHoot({
+        template: this.threadTemplate,
+        hoot: `<a class="threadLink" href="/details/${thread.id}">${thread.title}</a>`,
+        keyword_link: thread.keyword
+          ? `<a class="keywordLink" href="/stream/${thread.keyword}">${thread.keyword}</a>`
+          : "",
+        username: thread.username,
+        className: postedToday ? "isRecent" : "",
+        date: thread.lastmodified,
+        file_count: `${files.length || 0} f.`,
+        file_opacity: age_opacity * get_size_opacity(files.length),
+        comment_count: `${comments.length || 0} c.`,
+        comment_opacity: age_opacity * get_size_opacity(files.length),
+      }),
+      this.renderFiles(postedToday ? files : files.slice(0, 10)),
+      ...this.renderHoots({ hoots: comments.slice(0, 1), tag: "first_post" }),
+      ...this.renderHoots({
+        hoots: postedToday ? comments.slice(1) : comments.slice(1).slice(-5),
+      }),
+      "<div class='divider'></div>",
+    ];
+    // say "in ... "
+    // audio player OR recent file list
+    // recent 3 comments
   },
 
   renderFiles: function (files) {
@@ -154,9 +148,9 @@ var HootStream = View.extend({
       age: get_age(file.date),
       age_opacity: get_age_opacity(file.date),
       date_class,
-      // date: datetime[0],
+      date: datetime[0],
       // time: datetime[1],
-      size_class: size[0],
+      // size_class: size[0],
       size: size[1],
     });
   },
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index e6104e5..7058cea 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -257,28 +257,40 @@ function get_age(t, long) {
   age /= 12;
   return r(age) + (long ? " years" : "y");
 }
-const ages = {
-  newest: 60 * 10,
-  newer: 60 * 60,
-  new: 60 * 60 * 8,
-  cool: 60 * 60 * 24,
-  cold: 60 * 60 * 24 * 7,
-  colder: 60 * 60 * 24 * 7 * 4,
-  coldest: 60 * 60 * 24 * 7 * 4 * 12,
-};
+const age_scale = [
+  [0, 1.0],
+  [60 * 10, 1.0],
+  [60 * 60, 0.95],
+  [60 * 60 * 8, 0.9],
+  [60 * 60 * 24, 0.85],
+  [60 * 60 * 24 * 7, 0.65],
+  [60 * 60 * 24 * 7 * 4, 0.55],
+  [60 * 60 * 24 * 7 * 4 * 12, 0.5],
+];
 function get_age_opacity(t) {
   var age = Math.abs(Date.now() / 1000 - t);
-  if (age < ages.newest) return 1;
-  if (age < ages.newer)
-    return lerp(norm(age, ages.newest, ages.newer), 1.0, 0.95);
-  if (age < ages.new) return lerp(norm(age, ages.newer, ages.new), 0.95, 0.9);
-  if (age < ages.cool) return lerp(norm(age, ages.new, ages.cool), 0.9, 0.85);
-  if (age < ages.cold) return lerp(norm(age, ages.cool, ages.cold), 0.85, 0.6);
-  if (age < ages.colder)
-    return lerp(norm(age, ages.cold, ages.colder), 0.6, 0.5);
-  if (age < ages.coldest)
-    return lerp(norm(age, ages.colder, ages.coldest), 0.5, 0.4);
-  return 0.39;
+  return get_scale_opacity(age, age_scale);
+}
+const size_scale = [
+  [0, 0.0],
+  [1, 0.7],
+  [5, 0.8],
+  [10, 0.9],
+  [15, 0.95],
+  [20, 0.99],
+];
+function get_size_opacity(n) {
+  return get_scale_opacity(n, size_scale);
+}
+function get_scale_opacity(value, scale) {
+  for (let i = 1; i < scale.length; i++) {
+    const [max_value, max_lerp] = scale[i];
+    if (value < max_value) {
+      const [min_value, min_lerp] = scale[i - 1];
+      return lerp(norm(value, min_value, max_value), min_lerp, max_lerp);
+    }
+  }
+  return scale[scale.length - 1][1];
 }
 
 function tidy_urls(s, short_urls) {