From aa69e651ac06bb77c9ce4e12f49b22da3f5804ab Mon Sep 17 00:00:00 2001
From: Will Pearson <uiri00@gmail.com>
Date: Sun, 13 Jan 2019 10:47:07 -0800
Subject: [PATCH] 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  |  5 ++---
 src/routes/_components/status/Status.html        | 14 +++++++++++---
 src/routes/_components/status/StatusSpoiler.html |  1 -
 src/routes/_static/statuses.js                   |  3 +++
 4 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/routes/_a11y/getAccessibleLabelForStatus.js b/src/routes/_a11y/getAccessibleLabelForStatus.js
index 280faa5..c792f14 100644
--- a/src/routes/_a11y/getAccessibleLabelForStatus.js
+++ b/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)
 
diff --git a/src/routes/_components/status/Status.html b/src/routes/_components/status/Status.html
index f4a6769..c3fe662 100644
--- a/src/routes/_components/status/Status.html
+++ b/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)
       ),
diff --git a/src/routes/_components/status/StatusSpoiler.html b/src/routes/_components/status/StatusSpoiler.html
index b0faf67..81fb526 100644
--- a/src/routes/_components/status/StatusSpoiler.html
+++ b/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)
diff --git a/src/routes/_static/statuses.js b/src/routes/_static/statuses.js
index 6202279..b0ad40d 100644
--- a/src/routes/_static/statuses.js
+++ b/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'