feat: add option to always expand posts marked with content warnings (#2342)

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

src/intl/en-US.js

@@ -368,6 +368,7 @@ export default {
   general: 'General',
   generalSettings: 'General settings',
   showSensitive: 'Show sensitive media by default',
+  showAllSpoilers: 'Expand content warnings by default',
   showPlain: 'Show a plain gray color for sensitive media',
   allSensitive: 'Treat all media as sensitive',
   largeMedia: 'Show large inline images and videos',

src/routes/_components/status/Status.html

@@ -260,7 +260,7 @@
         notification && notification.status &&
           notification.type !== 'mention' && notification.status.id === originalStatusId
       ),
-      spoilerShown: ({ $spoilersShown, uuid }) => !!$spoilersShown[uuid],
+      spoilerShown: ({ $spoilersShown, uuid, $showAllSpoilers }) => (typeof $spoilersShown[uuid] === 'undefined' ? !!$showAllSpoilers : !!$spoilersShown[uuid]),
       replyShown: ({ $repliesShown, uuid }) => !!$repliesShown[uuid],
       showCard: ({ originalStatus, isStatusInNotification, showMedia, $hideCards }) => (
         !$hideCards &&

src/routes/_components/status/StatusSpoiler.html

@@ -76,8 +76,9 @@
     methods: {
       toggleSpoilers (shown) {
         const { uuid } = this.get()
-        const { spoilersShown } = this.store.get()
+        const { spoilersShown, showAllSpoilers } = this.store.get()
-        spoilersShown[uuid] = typeof shown === 'undefined' ? !spoilersShown[uuid] : !!shown
+        const currentValue = typeof spoilersShown[uuid] === 'undefined' ? !!showAllSpoilers : spoilersShown[uuid]
+        spoilersShown[uuid] = typeof shown === 'undefined' ? !currentValue : !!shown
         this.store.set({ spoilersShown })
         requestAnimationFrame(() => {
           mark('clickSpoilerButton')

src/routes/_pages/settings/general.html

@@ -8,6 +8,11 @@
              bind:checked="$neverMarkMediaAsSensitive" on:change="onChange(event)">
       {intl.showSensitive}
     </label>
+    <label class="setting-group">
+      <input type="checkbox" id="choice-show-all-spoilers"
+             bind:checked="$showAllSpoilers" on:change="onChange(event)">
+      {intl.showAllSpoilers}
+    </label>
     <label class="setting-group">
       <input type="checkbox" id="choice-use-blurhash"
               bind:checked="$ignoreBlurhash" on:change="onChange(event)">

src/routes/_store/store.js

@@ -35,6 +35,7 @@ const persistedState = {
   loggedInInstances: {},
   loggedInInstancesInOrder: [],
   markMediaAsSensitive: false,
+  showAllSpoilers: false,
   neverMarkMediaAsSensitive: false,
   ignoreBlurhash: false,
   omitEmojiInDisplayNames: undefined,

tests/spec/043-content-warnings.js

@@ -0,0 +1,37 @@
+import {
+  getUrl,
+  scrollToStatus,
+  getNthStatusSpoiler,
+  settingsNavButton,
+  generalSettingsButton,
+  homeNavButton,
+  getNthStatus,
+  getNthShowOrHideButton
+} from '../utils'
+import { loginAsFoobar } from '../roles'
+import { homeTimeline } from '../fixtures.js'
+import { Selector as $ } from 'testcafe'
+
+fixture`043-content-warnings.js`
+  .page`http://localhost:4002`
+
+test('Can set content warnings to auto-expand', async t => {
+  await loginAsFoobar(t)
+  await t
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .click(settingsNavButton)
+    .click(generalSettingsButton)
+    .click($('#choice-show-all-spoilers'))
+    .click(homeNavButton)
+    .expect(getUrl()).eql('http://localhost:4002/')
+    .expect(getNthStatus(1).exists).ok()
+  const idx = homeTimeline.findIndex(_ => _.spoiler === 'kitten CW')
+  await scrollToStatus(t, idx + 1)
+  await t
+    .expect(getNthStatusSpoiler(1 + idx).innerText).contains('kitten CW')
+    .expect(getNthStatus(1 + idx).innerText).contains('here\'s a kitten with a CW')
+    .click(getNthShowOrHideButton(1 + idx))
+    .expect(getNthStatus(1 + idx).innerText).notContains('here\'s a kitten with a CW')
+    .click(getNthShowOrHideButton(1 + idx))
+    .expect(getNthStatus(1 + idx).innerText).contains('here\'s a kitten with a CW')
+})