diff --git a/src/app/globals.css b/src/app/globals.css index c966d70..9c16a79 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -451,6 +451,32 @@ a.btn-primary:visited { display: block; } +/* Fill letterboxed image space with a glow derived from the image itself. */ +.blurred-image-container { + position: relative; + width: 100%; + overflow: hidden; + background: #000; + isolation: isolate; +} + +.post-media-item .blurred-image-bg { + position: absolute; + inset: -32px; + width: calc(100% + 64px); + height: calc(100% + 64px); + max-height: none; + object-fit: cover; + filter: blur(28px) brightness(0.48) saturate(1.15); + pointer-events: none; + z-index: 0; +} + +.post-media-item .blurred-image-main { + position: relative; + z-index: 1; +} + .post-media-item video { width: 100%; max-height: 360px; diff --git a/src/components/BlurredImage.tsx b/src/components/BlurredImage.tsx new file mode 100644 index 0000000..64f1d2a --- /dev/null +++ b/src/components/BlurredImage.tsx @@ -0,0 +1,24 @@ +interface BlurredImageProps { + src: string; + alt: string; +} + +export default function BlurredImage({ src, alt }: BlurredImageProps) { + return ( +
+ + {alt} +
+ ); +} diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx index 38dc5fc..9f1191f 100644 --- a/src/components/PostCard.tsx +++ b/src/components/PostCard.tsx @@ -9,6 +9,7 @@ import { Post, LinkPreviewMediaItem } from '@/lib/types'; import { useAuth } from '@/lib/contexts/AuthContext'; import { useToast } from '@/lib/contexts/ToastContext'; import { VideoEmbed } from '@/components/VideoEmbed'; +import BlurredImage from '@/components/BlurredImage'; import BlurredVideo from '@/components/BlurredVideo'; import { useFormattedHandle } from '@/lib/utils/handle'; import { useDomain } from '@/lib/contexts/ConfigContext'; @@ -891,7 +892,10 @@ export function PostCard({ post, onLike, onRepost, onComment, onDelete, onHide, }} /> ) : ( - {item.altText + )} );