Finally revisiting this CW thing

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

src/components/status.css

@@ -499,28 +499,25 @@
   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
-  .content-container.has-spoiler:not(.show-spoiler)
-  .spoiler
-  ~ :is(.media-container, .media-figure-multiple)
-  figcaption {
     filter: blur(5px) invert(0.5);
     image-rendering: crisp-edges;
     image-rendering: pixelated;
@@ -529,46 +526,42 @@
     contain: layout;
     transform: scale(0.97);
     transition: transform 0.1s ease-in-out;
-}
+  }
-.status
+
-  .content-container.has-spoiler:not(.show-spoiler)
+  /* ~ :is(.media-container, .media-figure-multiple) .media > *, */
-  .spoiler
+  ~ .card > img {
-  ~ :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 {
+.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.show-spoiler
+  :is(.spoiler-button, .spoiler-media-button).spoiling {
   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>
+              {readingExpandSpoilers || previewMode ? (
+                <div class="spoiler-divider">
+                  <Icon icon="eye-open" /> Content warning
+                </div>
+              ) : (
                 <button
-                class={`light spoiler ${showSpoiler ? 'spoiling' : ''}`}
+                  class={`light spoiler-button ${
+                    showSpoiler ? 'spoiling' : ''
+                  }`}
                   type="button"
-                disabled={readingExpandSpoilers}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     if (showSpoiler) {
                       delete states.spoilers[id];
+                      if (!readingExpandSpoilers) {
+                        delete states.spoilersMedia[id];
+                      }
                     } else {
                       states.spoilers[id] = true;
+                      if (!readingExpandSpoilers) {
+                        states.spoilersMedia[id] = true;
+                      }
                     }
                   }}
                 >
                   <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} />{' '}
-                {readingExpandSpoilers
+                  {showSpoiler ? 'Show less' : 'Show content'}
-                  ? 'Content warning'
-                  : showSpoiler
-                  ? 'Show less'
-                  : 'Show more'}
                 </button>
+              )}
             </>
           )}
           {!!content && (
@@ -1632,22 +1664,28 @@ function Status({
               text={getPostText(status)}
             />
           )}
-          {!spoilerText && sensitive && !!mediaAttachments.length && (
+          {!previewMode &&
+            sensitive &&
+            !!mediaAttachments.length &&
+            readingExpandMedia !== 'show_all' && (
               <button
-              class={`plain spoiler ${showSpoiler ? 'spoiling' : ''}`}
+                class={`plain spoiler-media-button ${
+                  showSpoilerMedia ? 'spoiling' : ''
+                }`}
                 type="button"
+                hidden={!readingExpandSpoilers && !!spoilerText}
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();
-                if (showSpoiler) {
+                  if (showSpoilerMedia) {
-                  delete states.spoilers[id];
+                    delete states.spoilersMedia[id];
                   } else {
-                  states.spoilers[id] = true;
+                    states.spoilersMedia[id] = true;
                   }
                 }}
               >
-              <Icon icon={showSpoiler ? 'eye-open' : 'eye-close'} /> Sensitive
+                <Icon icon={showSpoilerMedia ? 'eye-open' : 'eye-close'} />{' '}
-              content
+                {showSpoilerMedia ? 'Show less' : 'Show media'}
               </button>
             )}
           {!!mediaAttachments.length && (

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: {},