diff options
| -rw-r--r-- | public/assets/css/hootstream.css | 5 | ||||
| -rw-r--r-- | public/assets/js/lib/views/stream/hootstream.js | 35 | ||||
| -rw-r--r-- | public/assets/js/util/format.js | 1 |
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)]; |