Finally revisiting this CW thing

Respect reading:expand:spoilers and reading:expand:media but differently than Mastodon's logic

src/components/status.css

@@ -499,76 +499,69 @@
   padding-bottom: 10px;
 }
 
-.status .content-container.has-spoiler .spoiler {
+.status
+  .content-container.has-spoiler
+  :is(.spoiler-button, .spoiler-media-button):not([hidden]) {
   margin: 4px 0;
   font-size: 90%;
   border: 1px dashed var(--button-bg-color);
   display: flex;
-  gap: 8px;
+  gap: 4px;
   align-items: center;
 }
-.status
+.status .content-container.has-spoiler:not(.show-spoiler) .spoiler-button {
-  .content-container.has-spoiler:not(.show-spoiler)
+  ~ *:not(
-  .spoiler
+      .media-container,
-  ~ *:not(.media-container, .card, .media-figure-multiple),
+      .card,
-.status
+      .media-figure-multiple,
-  .content-container.has-spoiler:not(.show-spoiler)
+      .spoiler-media-button
-  .spoiler
+    ),
-  ~ .card
+  ~ .card .meta-container,
-  .meta-container,
+  ~ :is(.media-container, .media-figure-multiple) figcaption {
-.status
+    filter: blur(5px) invert(0.5);
-  .content-container.has-spoiler:not(.show-spoiler)
+    image-rendering: crisp-edges;
-  .spoiler
+    image-rendering: pixelated;
-  ~ :is(.media-container, .media-figure-multiple)
+    pointer-events: none;
-  figcaption {
+    user-select: none;
-  filter: blur(5px) invert(0.5);
+    contain: layout;
-  image-rendering: crisp-edges;
+    transform: scale(0.97);
-  image-rendering: pixelated;
+    transition: transform 0.1s ease-in-out;
-  pointer-events: none;
+  }
-  user-select: none;
+
-  contain: layout;
+  /* ~ :is(.media-container, .media-figure-multiple) .media > *, */
-  transform: scale(0.97);
+  ~ .card > img {
-  transition: transform 0.1s ease-in-out;
+    filter: blur(32px);
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    animation: none !important;
+  }
+}
+.status .content-container.has-spoiler:not(.show-media) .spoiler-media-button {
+  ~ :is(.media-container, .media-figure-multiple) .media > * {
+    filter: blur(32px);
+    image-rendering: crisp-edges;
+    image-rendering: pixelated;
+    animation: none !important;
+  }
 }
 .status
-  .content-container.has-spoiler:not(.show-spoiler)
+  .content-container.show-spoiler
-  .spoiler
+  :is(.spoiler-button, .spoiler-media-button).spoiling {
-  ~ :is(.media-container, .media-figure-multiple)
-  .media
-  > *,
-.status
-  .content-container.has-spoiler:not(.show-spoiler)
-  .spoiler
-  ~ .card
-  > img {
-  filter: blur(32px);
-  image-rendering: crisp-edges;
-  image-rendering: pixelated;
-  animation: none !important;
-}
-.status .content-container.show-spoiler .spoiler {
   border-style: dotted;
 }
-/* .status
+
-  .content-container.show-spoiler
+.status .content-container .spoiler-divider {
-  .spoiler
+  display: flex;
-  ~ *:not(.media-container, .card),
+  align-items: center;
-.status .content-container.show-spoiler .spoiler ~ .card .meta-container {
+  gap: 4px;
-  filter: none !important;
+  color: var(--text-insignificant-color);
-  transform: none;
+  text-transform: uppercase;
-  pointer-events: auto;
+  font-size: 0.8em;
-  user-select: auto;
+  margin-top: 0.25em;
-  text-rendering: auto;
+  margin-bottom: 1em;
-  image-rendering: auto;
+  padding-block: 0.25em;
+  border-bottom: 1px dashed var(--divider-color);
 }
-.status .content-container.show-spoiler .spoiler ~ .media-container .media > *,
-.status .content-container.show-spoiler .spoiler ~ .card > img {
-  filter: none;
-  image-rendering: auto;
-} */
-/* .status .content a:not(.mention):not(:has(span)) {
-  color: inherit;
-} */
 
 .status .content-comment-hint {
   margin-top: 0.25em;

src/components/status.jsx

@@ -275,8 +275,21 @@ function Status({
     const prefs = store.account.get('preferences') || {};
     return !!prefs['reading:expand:spoilers'];
   }, []);
+  const readingExpandMedia = useMemo(() => {
+    // default | show_all | hide_all
+    // Ignore hide_all because it means hide *ALL* media including non-sensitive ones
+    const prefs = store.account.get('preferences') || {};
+    return prefs['reading:expand:media'] || 'default';
+  }, []);
+  // FOR TESTING:
+  // const readingExpandSpoilers = true;
+  // const readingExpandMedia = 'show_all';
   const showSpoiler =
-    previewMode || readingExpandSpoilers || !!snapStates.spoilers[id] || false;
+    previewMode || readingExpandSpoilers || !!snapStates.spoilers[id];
+  const showSpoilerMedia =
+    previewMode ||
+    readingExpandMedia === 'show_all' ||
+    !!snapStates.spoilersMedia[id];
 
   if (reblog) {
     // If has statusID, means useItemID (cached in states)
@@ -1078,11 +1091,19 @@ function Status({
     );
     if (activeStatus) {
       const spoilerButton = activeStatus.querySelector(
-        'button.spoiler:not(.spoiling)',
+        '.spoiler-button:not(.spoiling)',
       );
       if (spoilerButton) {
         e.stopPropagation();
         spoilerButton.click();
+      } else {
+        const spoilerMediaButton = activeStatus.querySelector(
+          '.spoiler-media-button:not(.spoiling)',
+        );
+        if (spoilerMediaButton) {
+          e.stopPropagation();
+          spoilerMediaButton.click();
+        }
       }
     }
   });
@@ -1487,7 +1508,9 @@ function Status({
         <div
           class={`content-container ${
             spoilerText || sensitive ? 'has-spoiler' : ''
-          } ${showSpoiler ? 'show-spoiler' : ''}`}
+          } ${showSpoiler ? 'show-spoiler' : ''} ${
+            showSpoilerMedia ? 'show-media' : ''
+          }`}
           data-content-text-weight={contentTextWeight ? textWeight() : null}
           style={
             (isSizeLarge || contentTextWeight) && {
@@ -1508,27 +1531,36 @@ function Status({
                   <EmojiText text={spoilerText} emojis={emojis} />
                 </p>
               </div>
-              <button
+              {readingExpandSpoilers || previewMode ? (
-                class={`light spoiler ${showSpoiler ? 'spoiling' : ''}`}
+                <div class="spoiler-divider">
-                type="button"
+                  <Icon icon="eye-open" /> Content warning
-                disabled={readingExpandSpoilers}
+                </div>
-                onClick={(e) => {
+              ) : (
-                  e.preventDefault();
+                <button
-                  e.stopPropagation();
+                  class={`light spoiler-button ${
-                  if (showSpoiler) {
+                    showSpoiler ? 'spoiling' : ''
-                    delete states.spoilers[id];
+                  }`}
-                  } else {
+                  type="button"
-                    states.spoilers[id] = true;
+                  onClick={(e) => {
-                  }
+                    e.preventDefault();
-                }}
+                    e.stopPropagation();
-              >
+                    if (showSpoiler) {
-                <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
+                      delete states.spoilers[id];
-                {readingExpandSpoilers
+                      if (!readingExpandSpoilers) {
-                  ? 'Content warning'
+                        delete states.spoilersMedia[id];
-                  : showSpoiler
+                      }
-                  ? 'Show less'
+                    } else {
-                  : 'Show more'}
+                      states.spoilers[id] = true;
-              </button>
+                      if (!readingExpandSpoilers) {
+                        states.spoilersMedia[id] = true;
+                      }
+                    }
+                  }}
+                >
+                  <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
+                  {showSpoiler ? 'Show less' : 'Show content'}
+                </button>
+              )}
             </>
           )}
           {!!content && (
@@ -1632,24 +1664,30 @@ function Status({
               text={getPostText(status)}
             />
           )}
-          {!spoilerText && sensitive && !!mediaAttachments.length && (
+          {!previewMode &&
-            <button
+            sensitive &&
-              class={`plain spoiler ${showSpoiler ? 'spoiling' : ''}`}
+            !!mediaAttachments.length &&
-              type="button"
+            readingExpandMedia !== 'show_all' && (
-              onClick={(e) => {
+              <button
-                e.preventDefault();
+                class={`plain spoiler-media-button ${
-                e.stopPropagation();
+                  showSpoilerMedia ? 'spoiling' : ''
-                if (showSpoiler) {
+                }`}
-                  delete states.spoilers[id];
+                type="button"
-                } else {
+                hidden={!readingExpandSpoilers && !!spoilerText}
-                  states.spoilers[id] = true;
+                onClick={(e) => {
-                }
+                  e.preventDefault();
-              }}
+                  e.stopPropagation();
-            >
+                  if (showSpoilerMedia) {
-              <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
+                    delete states.spoilersMedia[id];
-              content
+                  } else {
-            </button>
+                    states.spoilersMedia[id] = true;
-          )}
+                  }
+                }}
+              >
+                <Icon icon={showSpoilerMedia ? 'eye-open' : 'eye-close'} />{' '}
+                {showSpoilerMedia ? 'Show less' : 'Show media'}
+              </button>
+            )}
           {!!mediaAttachments.length && (
             <MultipleMediaFigure
               lang={language}

src/index.css

@@ -203,7 +203,7 @@ textarea {
   max-width: 100%;
 }
 
-button,
+button:not([hidden]),
 .button {
   display: inline-block;
   padding: 8px 12px;

src/utils/states.js

@@ -29,6 +29,7 @@ const states = proxy({
     counter: 0,
   },
   spoilers: {},
+  spoilersMedia: {},
   scrollPositions: {},
   unfurledLinks: {},
   statusQuotes: {},