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 7d8e2671ad158b317f6f75a7dd5dacac9e12cf80.

* Fix failing test

* Revert "Fix failing test"

This reverts commit 15b06e11589b49979ca5eb85b7fe5c7510a62ba7.

* Revert "Revert "fix test hopefully""

This reverts commit d3776bc9d64dcfd209a307a0639d33cbe6ca3884.

* 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'