filtering pics that might be in a comment

3 files changed, 36 insertions, 5 deletions

diff --git a/public/assets/css/hootstream.css b/public/assets/css/hootstream.css
index 470cb72..1bc0b44 100644
--- a/public/assets/css/hootstream.css
+++ b/public/assets/css/hootstream.css
@@ -45,7 +45,7 @@
   width: 100%;
 }
 #hootevents .hoot.threadTitle {
-  /*align-items: flex-end;*/
+  align-items: flex-end;
 }
 #hootevents .hootText {
   max-width: 60rem;
@@ -72,6 +72,7 @@
   display: block;
 }
 #hootevents .imageList .image {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -81,6 +82,7 @@
   transition: opacity 0.1s;
 }
 #hootevents .imageList .caption {
+  display: none;
   margin: 1rem;
   font-size: 0.9rem;
   color: rgba(128, 128, 128, 0.5);
@@ -144,6 +146,7 @@
   justify-content: flex-end;
   align-items: center;
   margin-top: 0.175rem;
+  align-self: flex-start;
 }
 #hootevents .avatar {
   width: 1.5rem;
diff --git a/public/assets/js/lib/views/stream/hootstream.js b/public/assets/js/lib/views/stream/hootstream.js
index 777489d..628d59c 100644
--- a/public/assets/js/lib/views/stream/hootstream.js
+++ b/public/assets/js/lib/views/stream/hootstream.js
@@ -109,7 +109,12 @@ var HootStream = View.extend({
         ) {
           return true;
         }
-        if (filters.images && thread.images.length) {
+        if (
+          (filters.images && thread.images.length) ||
+          thread.comments.some((comment) =>
+            CONTAINS_IMAGE_URL_REGEXP.test(comment.comment)
+          )
+        ) {
           return true;
         }
         return false;
@@ -131,10 +136,20 @@ var HootStream = View.extend({
                     return filters.files;
                   })
                 : [],
-              comments: filters.hoots ? thread.comments : [],
+              comments: filters.hoots
+                ? thread.comments
+                : filters.images
+                ? thread.comments.filter((comment) =>
+                    CONTAINS_IMAGE_URL_REGEXP.test(comment.comment)
+                  )
+                : [],
               query: data.query,
             };
-            if (threadData.files.length || threadData.comments.length) {
+            if (
+              threadData.images.length ||
+              threadData.files.length ||
+              threadData.comments.length
+            ) {
               return this.renderThread(threadData).reduce(
                 ($el, $item) => $el.append($item),
                 $("<div class='thread'>")
@@ -238,6 +253,16 @@ var HootStream = View.extend({
       1.0
     );
 
+    const filteredImages = images
+      .map((image) => [image, new RegExp(encodeURIComponent(image.filename))])
+      .filter(
+        ([, filenameRegexp]) =>
+          !comments.some((comment) => filenameRegexp.test(comment.comment))
+      )
+      .map(([image]) => image);
+
+    console.log(filteredImages);
+
     // console.log(thread);
     return [
       "<div class='divider dark'></div>",
@@ -257,7 +282,9 @@ var HootStream = View.extend({
         comment_opacity: age_opacity * get_size_opacity(thread.comment_count),
       }),
       this.renderImages(
-        isViewingThread || postedToday ? images : images.slice(0, 6)
+        isViewingThread || postedToday
+          ? filteredImages
+          : filteredImages.slice(0, 6)
       ),
       this.renderFiles(
         isViewingThread || postedToday ? files : files.slice(0, 10)
diff --git a/public/assets/js/util/format.js b/public/assets/js/util/format.js
index cb3d92e..3e0228d 100644
--- a/public/assets/js/util/format.js
+++ b/public/assets/js/util/format.js
@@ -8,6 +8,7 @@ document.body.classList.add(is_desktop ? "desktop" : "mobile");
 
 const AUDIO_REGEXP = /(mp3|wav|aif|aiff|ogg|opus|flac)$/i;
 const IMAGE_REGEXP = /(.gif|.jpg|.jpeg|.png)$/i;
+const CONTAINS_IMAGE_URL_REGEXP = /http\S+\.(gif|jpe?g|png)/i;
 
 function choice(a) {
   return a[randint(a.length)];