search, client: custom display for results w/ artwork warnings

3 files changed, 27 insertions, 6 deletions

diff --git a/src/static/css/site.css b/src/static/css/site.css
index c7267b2f..766a4010 100644
--- a/src/static/css/site.css
+++ b/src/static/css/site.css
@@ -581,13 +581,17 @@ summary .group-name {
   display: inline-block;
 }
 
+.wiki-search-result-image-container {
+  align-self: flex-start;
+  margin-right: 6px;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
 .wiki-search-result-image,
 .wiki-search-result-image-placeholder {
-  align-self: flex-start;
   width: 1.8em;
   height: 1.8em;
-  margin-right: 6px;
-  border-radius: 2px;
   aspect-ratio: 1 / 1;
 }
 
@@ -599,6 +603,10 @@ summary .group-name {
   display: none;
 }
 
+.wiki-search-result-image.has-warning {
+  filter: blur(1px) brightness(0.8);
+}
+
 .wiki-search-end-search-line {
   text-align: center;
   margin-top: 6px;
diff --git a/src/static/js/client.js b/src/static/js/client.js
index bee82938..31e16aa2 100644
--- a/src/static/js/client.js
+++ b/src/static/js/client.js
@@ -3891,17 +3891,25 @@ function generateSidebarSearchResultTemplate(slots) {
     }
   }
 
+  const imgContainer = document.createElement('span');
+  imgContainer.classList.add('wiki-search-result-image-container');
+
   if (slots.imageSource) {
     const img = document.createElement('img');
     img.classList.add('wiki-search-result-image');
     img.setAttribute('src', slots.imageSource);
-    link.appendChild(img);
+    imgContainer.appendChild(img);
+    if (slots.imageSource.endsWith('.mini.jpg')) {
+      img.classList.add('has-warning');
+    }
   } else {
     const placeholder = document.createElement('span');
     placeholder.classList.add('wiki-search-result-image-placeholder');
-    link.appendChild(placeholder);
+    imgContainer.appendChild(placeholder);
   }
 
+  link.appendChild(imgContainer);
+
   const text = document.createElement('span');
   text.classList.add('wiki-search-result-text-area');
 
diff --git a/src/util/search-spec.js b/src/util/search-spec.js
index 6c6ad221..e9e0a6f9 100644
--- a/src/util/search-spec.js
+++ b/src/util/search-spec.js
@@ -39,6 +39,9 @@ function prepareArtwork(thing, {
   getThumbnailEqualOrSmaller,
   urls,
 }) {
+  const hasWarnings =
+    thing.artTags?.some(artTag => artTag.isContentWarning);
+
   const artworkPath =
     getArtworkPath(thing);
 
@@ -56,7 +59,9 @@ function prepareArtwork(thing, {
   }
 
   const selectedSize =
-    getThumbnailEqualOrSmaller('adorb', mediaSrc);
+    getThumbnailEqualOrSmaller(
+      (hasWarnings ? 'mini' : 'adorb'),
+      mediaSrc);
 
   const mediaSrcJpeg =
     mediaSrc.replace(/\.(png|jpg)$/, `.${selectedSize}.jpg`);