feat: wrap long posts with spoilers (#873)

* Wrap LONG posts with spoilers

Some ActivityPub software facilitates long form blog posts being pushed
out onto timelines.
Some ActivityPub software have toot lengths which are much larger than
Mastodon's default of 500.

This wraps spoiler tags around those statuses.

* fix lint, extract consts

* extract consts to separate file

* fix test hopefully

* Revert "fix test hopefully"

This reverts commit 7d8e2671ad.

* Fix failing test

* Revert "Fix failing test"

This reverts commit 15b06e1158.

* Revert "Revert "fix test hopefully""

This reverts commit d3776bc9d6.

* measure text after shortening URLs

src/routes/_a11y/getAccessibleLabelForStatus.js

@@ -1,6 +1,5 @@
 import { getAccountAccessibleName } from './getAccountAccessibleName'
 import { POST_PRIVACY_OPTIONS } from '../_static/statuses'
-import { htmlToPlainText } from '../_utils/htmlToPlainText'
 
 function getNotificationText (notification, omitEmojiInDisplayNames) {
   if (!notification) {
@@ -34,13 +33,13 @@ function cleanupText (text) {
   return text.replace(/\s+/g, ' ').trim()
 }
 
-export function getAccessibleLabelForStatus (originalAccount, account, content,
+export function getAccessibleLabelForStatus (originalAccount, account, plainTextContent,
   timeagoFormattedDate, spoilerText, showContent,
   reblog, notification, visibility, omitEmojiInDisplayNames,
   disableLongAriaLabels) {
   let originalAccountDisplayName = getAccountAccessibleName(originalAccount, omitEmojiInDisplayNames)
   let contentTextToShow = (showContent || !spoilerText)
-    ? cleanupText(htmlToPlainText(content))
+    ? cleanupText(plainTextContent)
     : `Content warning: ${cleanupText(spoilerText)}`
   let privacyText = getPrivacyText(visibility)
 

src/routes/_components/status/Status.html

@@ -123,6 +123,9 @@
   import { getAccountAccessibleName } from '../../_a11y/getAccountAccessibleName'
   import { getAccessibleLabelForStatus } from '../../_a11y/getAccessibleLabelForStatus'
   import { formatTimeagoDate } from '../../_intl/formatTimeagoDate'
+  import { htmlToPlainText } from '../../_utils/htmlToPlainText'
+  import { measureText } from '../../_utils/measureText'
+  import { LONG_POST_LENGTH, LONG_POST_TEXT } from '../../_static/statuses'
 
   const INPUT_TAGS = new Set(['a', 'button', 'input', 'textarea'])
   const isUserInputElement = node => INPUT_TAGS.has(node.localName)
@@ -207,7 +210,12 @@
       originalAccount: ({ originalStatus }) => originalStatus.account,
       originalAccountId: ({ originalAccount }) => originalAccount.id,
       visibility: ({ originalStatus }) => originalStatus.visibility,
-      spoilerText: ({ originalStatus }) => originalStatus.spoiler_text,
+      plainTextContent: ({ content }) => htmlToPlainText(content),
+      plainTextContentLength: ({ plainTextContent }) => measureText(plainTextContent),
+      plainTextContentOverLength: ({ plainTextContentLength }) => plainTextContentLength > LONG_POST_LENGTH,
+      spoilerText: ({ originalStatus, plainTextContentOverLength }) => (
+        originalStatus.spoiler_text || (plainTextContentOverLength && LONG_POST_TEXT)
+      ),
       inReplyToId: ({ originalStatus }) => originalStatus.in_reply_to_id,
       uuid: ({ $currentInstance, timelineType, timelineValue, notificationId, statusId }) => (
         `${$currentInstance}/${timelineType}/${timelineValue}/${notificationId || ''}/${statusId}`
@@ -235,9 +243,9 @@
       createdAtDate: ({ originalStatus }) => originalStatus.created_at,
       timeagoFormattedDate: ({ createdAtDate }) => formatTimeagoDate(createdAtDate),
       reblog: ({ status }) => status.reblog,
-      ariaLabel: ({ originalAccount, account, content, timeagoFormattedDate, spoilerText,
+      ariaLabel: ({ originalAccount, account, plainTextContent, timeagoFormattedDate, spoilerText,
         showContent, reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels }) => (
-        getAccessibleLabelForStatus(originalAccount, account, content,
+        getAccessibleLabelForStatus(originalAccount, account, plainTextContent,
           timeagoFormattedDate, spoilerText, showContent,
           reblog, notification, visibility, $omitEmojiInDisplayNames, $disableLongAriaLabels)
       ),

src/routes/_components/status/StatusSpoiler.html

@@ -59,7 +59,6 @@
       Shortcut
     },
     computed: {
-      spoilerText: ({ originalStatus }) => originalStatus.spoiler_text,
       emojis: ({ originalStatus }) => originalStatus.emojis,
       massagedSpoilerText: ({ spoilerText, emojis, $autoplayGifs }) => {
         spoilerText = escapeHtml(spoilerText)

src/routes/_static/statuses.js

@@ -20,3 +20,6 @@ export const POST_PRIVACY_OPTIONS = [
     icon: '#fa-envelope'
   }
 ]
+
+export const LONG_POST_LENGTH = 1024
+export const LONG_POST_TEXT = 'Long post'