Various adjustments for spoilers and media

- No more blur effects. Performance is more important
- Add background color for all media

src/components/media-post.css

@@ -4,9 +4,10 @@
   animation: appear-smooth 1s ease-out;
 
   &:is(.filtered, .has-spoiler:not(.show-media)) :is(img, video) {
-    filter: blur(32px);
+    /* filter: blur(32px);
     image-rendering: crisp-edges;
-    image-rendering: pixelated;
+    image-rendering: pixelated; */
+    opacity: 0;
     animation: none !important;
   }
 
@@ -70,6 +71,7 @@
 
     &:not(.media-audio) {
       background-color: var(--average-color, var(--media-bg-color));
+      background-clip: padding-box;
     }
 
     @media (hover: hover) {
@@ -109,4 +111,12 @@
       animation-duration: var(--anim-duration, 5s);
     }
   }
+
+  &.has-spoiler .media:not(.media-audio) {
+    background-image: radial-gradient(
+      circle at 50% 50%,
+      var(--average-color, var(--bg-faded-color)),
+      var(--bg-color) 20em
+    );
+  }
 }

src/components/media.jsx

@@ -96,7 +96,7 @@ function Media({
 
   const videoRef = useRef();
 
-  let focalBackgroundPosition;
+  let focalPosition;
   if (focus) {
     // Convert focal point to CSS background position
     // Formula from jquery-focuspoint
@@ -105,7 +105,7 @@ function Media({
     // x = 1, y = -1 => 100% 100%
     const x = ((focus.x + 1) / 2) * 100;
     const y = ((1 - focus.y) / 2) * 100;
-    focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
+    focalPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
   }
 
   const mediaRef = useRef();
@@ -290,10 +290,11 @@ function Media({
                 data-orientation={orientation}
                 loading="lazy"
                 style={{
-                  backgroundColor:
+                  // backgroundColor:
-                    rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+                  //   rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
-                  backgroundPosition: focalBackgroundPosition || 'center',
+                  // backgroundPosition: focalBackgroundPosition || 'center',
                   // Duration based on width or height in pixels
+                  objectPosition: focalPosition || 'center',
                   // 100px per second (rough estimate)
                   // Clamp between 5s and 120s
                   '--anim-duration': `${Math.min(
@@ -302,7 +303,7 @@ function Media({
                   )}s`,
                 }}
                 onLoad={(e) => {
-                  e.target.closest('.media-image').style.backgroundImage = '';
+                  // e.target.closest('.media-image').style.backgroundImage = '';
                   e.target.dataset.loaded = true;
                 }}
                 onError={(e) => {

src/components/status.css

@@ -516,34 +516,86 @@
       .media-figure-multiple,
       .spoiler-media-button
     ),
-  ~ .card .meta-container,
+  ~ .card .meta-container {
-  ~ :is(.media-container, .media-figure-multiple) figcaption {
+    /* filter: blur(5px) invert(0.5);
-    filter: blur(5px) invert(0.5);
     image-rendering: crisp-edges;
-    image-rendering: pixelated;
+    image-rendering: pixelated; */
+    opacity: 0.2;
+    text-decoration-thickness: 1.5em;
+    text-decoration-line: line-through;
+    text-rendering: optimizeSpeed;
     pointer-events: none;
     user-select: none;
-    contain: layout;
+    /* contain: layout; */
-    transform: scale(0.97);
+    /* transform: scale(0.97);
-    transition: transform 0.1s ease-in-out;
+    transition: transform 0.1s ease-in-out; */
+
+    * {
+      text-decoration-thickness: 1.5em;
+      text-decoration-line: line-through;
+      text-rendering: optimizeSpeed;
+    }
+
+    img {
+      filter: invert(0.5);
+      background-color: black;
+    }
   }
 
   /* ~ :is(.media-container, .media-figure-multiple) .media > *, */
-  ~ .card > img {
+  ~ .card .card-image > img {
-    filter: blur(32px);
+    display: none;
+    /* filter: blur(32px);
+    opacity: 0;
     image-rendering: crisp-edges;
     image-rendering: pixelated;
-    animation: none !important;
+    animation: none !important; */
   }
 }
 .status .content-container.has-spoiler:not(.show-media) .spoiler-media-button {
-  ~ :is(.media-container, .media-figure-multiple) .media > * {
+  ~ :is(.media-container, .media-figure-multiple) figcaption {
-    filter: blur(32px);
+    /* filter: blur(5px) invert(0.5);
+    image-rendering: crisp-edges;
+    image-rendering: pixelated; */
+    opacity: 0.2;
+    color: inherit;
+    text-decoration-thickness: 1.5em;
+    text-decoration-line: line-through;
+    text-rendering: optimizeSpeed;
+    pointer-events: none;
+    user-select: none;
+    /* contain: layout; */
+    /* transform: scale(0.97);
+    transition: transform 0.1s ease-in-out; */
+
+    * {
+      text-decoration-thickness: 1.5em;
+      text-decoration-line: line-through;
+      text-rendering: optimizeSpeed;
+    }
+
+    img {
+      opacity: 0;
+    }
+  }
+
+  ~ :is(.media-container, .media-figure-multiple) .media {
+    background-image: radial-gradient(
+      circle at 50% 50%,
+      var(--average-color, var(--bg-faded-color)),
+      var(--bg-color) 20em
+    );
+
+    > *:not(.media-play, .alt-badge) {
+      /* display: none; */
+      /* filter: blur(32px); */
+      opacity: 0;
       image-rendering: crisp-edges;
       image-rendering: pixelated;
       animation: none !important;
     }
   }
+}
 .status
   .content-container.show-spoiler
   :is(.spoiler-button, .spoiler-media-button).spoiling {
@@ -745,7 +797,7 @@
   &:not(.media-figure-multiple .media-container) {
     margin-bottom: -16px;
 
-    &.media-eq1 {
+    &.media-eq1:not(:has(figure)) {
       text-align: center;
       background-color: var(--img-bg-color);
     }
@@ -804,6 +856,11 @@
   min-height: 80px;
   border: var(--media-border-width) solid var(--outline-color);
   vertical-align: top;
+
+  &:not(.media-audio) {
+    background-color: var(--average-color, var(--bg-faded-color));
+    background-clip: padding-box;
+  }
 }
 .status .media-container:not(.media-eq1) .media {
   aspect-ratio: auto !important;
@@ -1270,6 +1327,8 @@ body:has(#modal-container .carousel) .status .media img:hover {
   width: 35%;
   position: relative;
   border-inline-end: 1px solid var(--outline-color);
+  background-color: var(--average-color, var(--bg-faded-color));
+  background-clip: padding-box;
 }
 .card .card-image img {
   position: absolute;

src/components/status.jsx

@@ -8,7 +8,7 @@ import {
   MenuHeader,
   MenuItem,
 } from '@szhsin/react-menu';
-import { decodeBlurHash } from 'fast-blurhash';
+import { decodeBlurHash, getBlurHashAverageColor } from 'fast-blurhash';
 import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
 import {
@@ -1994,6 +1994,8 @@ function Card({ card, selfReferential, instance }) {
       .replace(/^www\./, '')
       .replace(/\/$/, '');
     let blurhashImage;
+    const rgbAverageColor =
+      image && blurhash ? getBlurHashAverageColor(blurhash) : null;
     if (!image) {
       const w = 44;
       const h = 44;
@@ -2015,6 +2017,10 @@ function Card({ card, selfReferential, instance }) {
         class={`card link ${blurhashImage ? '' : size}`}
         lang={language}
         dir="auto"
+        style={{
+          '--average-color':
+            rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+        }}
       >
         <div class="card-image">
           <img