diff --git a/src/components/media-post.css b/src/components/media-post.css index d8c12673..51251f28 100644 --- a/src/components/media-post.css +++ b/src/components/media-post.css @@ -3,7 +3,7 @@ position: relative; animation: appear-smooth 1s ease-out; - &:is(.filtered, .has-spoiler) :is(img, video) { + &:is(.filtered, .has-spoiler:not(.show-media)) :is(img, video) { filter: blur(32px); image-rendering: crisp-edges; image-rendering: pixelated; @@ -48,6 +48,11 @@ } } + &.has-spoiler.show-media[data-spoiler-text]:before { + mix-blend-mode: normal; + backdrop-filter: blur(4px); + } + .media { border-radius: var(--item-radius); overflow: hidden; diff --git a/src/components/media-post.jsx b/src/components/media-post.jsx index fdc1040c..d5d09f5f 100644 --- a/src/components/media-post.jsx +++ b/src/components/media-post.jsx @@ -103,11 +103,13 @@ function MediaPost({ console.debug('RENDER Media post', id, status?.account.displayName); - // const readingExpandSpoilers = useMemo(() => { - // const prefs = store.account.get('preferences') || {}; - // return !!prefs['reading:expand:spoilers']; - // }, []); - const hasSpoiler = spoilerText || sensitive; + const hasSpoiler = sensitive; + const readingExpandMedia = useMemo(() => { + // default | show_all | hide_all + const prefs = store.account.get('preferences') || {}; + return prefs['reading:expand:media'] || 'default'; + }, []); + const showSpoilerMedia = readingExpandMedia === 'show_all'; const Parent = parent || 'div'; @@ -131,6 +133,7 @@ function MediaPost({ media-post ${filterInfo ? 'filtered' : ''} ${hasSpoiler ? 'has-spoiler' : ''} + ${showSpoilerMedia ? 'show-media' : ''} `} >