diff --git a/src/components/media-post.css b/src/components/media-post.css
index 51251f28..b9ba419d 100644
--- a/src/components/media-post.css
+++ b/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
+ );
+ }
}
diff --git a/src/components/media.jsx b/src/components/media.jsx
index debb628a..d6011a0b 100644
--- a/src/components/media.jsx
+++ b/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:
- rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
- backgroundPosition: focalBackgroundPosition || 'center',
+ // backgroundColor:
+ // rgbAverageColor && `rgb(${rgbAverageColor.join(',')})`,
+ // 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) => {
diff --git a/src/components/status.css b/src/components/status.css
index 9b527ccc..3bd4502d 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -516,32 +516,84 @@
.media-figure-multiple,
.spoiler-media-button
),
- ~ .card .meta-container,
- ~ :is(.media-container, .media-figure-multiple) figcaption {
- filter: blur(5px) invert(0.5);
+ ~ .card .meta-container {
+ /* 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;
- transform: scale(0.97);
- transition: transform 0.1s ease-in-out;
+ /* 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 {
+ filter: invert(0.5);
+ background-color: black;
+ }
}
/* ~ :is(.media-container, .media-figure-multiple) .media > *, */
- ~ .card > img {
- filter: blur(32px);
+ ~ .card .card-image > img {
+ 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 > * {
- filter: blur(32px);
+ ~ :is(.media-container, .media-figure-multiple) figcaption {
+ /* filter: blur(5px) invert(0.5);
image-rendering: crisp-edges;
- image-rendering: pixelated;
- animation: none !important;
+ 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
@@ -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;
diff --git a/src/components/status.jsx b/src/components/status.jsx
index 5c76bc89..d9402b83 100644
--- a/src/components/status.jsx
+++ b/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