Add a TestTimeline for previewing certain types of posts

app/soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json

@@ -0,0 +1,108 @@
+{
+  "account": {
+    "acct": "alex",
+    "avatar": "https://freespeechextremist.com/images/avi.png",
+    "avatar_static": "https://freespeechextremist.com/images/avi.png",
+    "bot": false,
+    "created_at": "2022-02-28T01:55:05.000Z",
+    "display_name": "Alex Gleason",
+    "emojis": [],
+    "fields": [],
+    "followers_count": 1,
+    "following_count": 0,
+    "header": "https://freespeechextremist.com/images/banner.png",
+    "header_static": "https://freespeechextremist.com/images/banner.png",
+    "id": "AGv8wCadU7DqWgMqNk",
+    "locked": false,
+    "note": "I'm testing out compatibility with an older Pleroma version",
+    "pleroma": {
+      "accepts_chat_messages": true,
+      "ap_id": "https://freespeechextremist.com/users/alex",
+      "background_image": null,
+      "confirmation_pending": false,
+      "favicon": null,
+      "hide_favorites": true,
+      "hide_followers": false,
+      "hide_followers_count": false,
+      "hide_follows": false,
+      "hide_follows_count": false,
+      "is_admin": false,
+      "is_moderator": false,
+      "relationship": {},
+      "skip_thread_containment": false,
+      "tags": []
+    },
+    "source": {
+      "fields": [],
+      "note": "I'm testing out compatibility with an older Pleroma version",
+      "pleroma": {
+        "actor_type": "Person",
+        "discoverable": true
+      },
+      "sensitive": false
+    },
+    "statuses_count": 1,
+    "url": "https://freespeechextremist.com/users/alex",
+    "username": "alex"
+  },
+  "application": {
+    "name": "Web",
+    "website": null
+  },
+  "bookmarked": false,
+  "card": null,
+  "content": "<br/><a href=\"https://freespeechextremist.com/media/3e34b808-1c84-4ef3-ba56-67cc86b7911a/0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm?name=0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm\">0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm</a>",
+  "created_at": "2022-04-14T19:42:48.000Z",
+  "emojis": [],
+  "favourited": false,
+  "favourites_count": 0,
+  "id": "AIRxLeIzncpCtsr2hs",
+  "in_reply_to_account_id": null,
+  "in_reply_to_id": null,
+  "language": null,
+  "media_attachments": [
+    {
+      "description": "0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm",
+      "id": "1142674091",
+      "pleroma": {
+        "mime_type": "video/webm"
+      },
+      "preview_url": "https://freespeechextremist.com/media/3e34b808-1c84-4ef3-ba56-67cc86b7911a/0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm?name=0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm",
+      "remote_url": "https://freespeechextremist.com/media/3e34b808-1c84-4ef3-ba56-67cc86b7911a/0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm?name=0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm",
+      "text_url": "https://freespeechextremist.com/media/3e34b808-1c84-4ef3-ba56-67cc86b7911a/0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm?name=0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm",
+      "type": "video",
+      "url": "https://freespeechextremist.com/media/3e34b808-1c84-4ef3-ba56-67cc86b7911a/0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm?name=0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm"
+    }
+  ],
+  "mentions": [],
+  "muted": false,
+  "pinned": false,
+  "pleroma": {
+    "content": {
+      "text/plain": "0f66e92f339705ccc03079b8f647048e15730adf2cc9eaa1071c7c7cf6884b1b.webm"
+    },
+    "conversation_id": 97191096,
+    "direct_conversation_id": null,
+    "emoji_reactions": [],
+    "expires_at": null,
+    "in_reply_to_account_acct": null,
+    "local": true,
+    "parent_visible": false,
+    "spoiler_text": {
+      "text/plain": ""
+    },
+    "thread_muted": false
+  },
+  "poll": null,
+  "reblog": null,
+  "reblogged": false,
+  "reblogs_count": 0,
+  "replies_count": 0,
+  "sensitive": false,
+  "spoiler_text": "",
+  "tags": [],
+  "text": null,
+  "uri": "https://freespeechextremist.com/objects/419b2cad-656a-4dbc-b2b5-94bb75e0afc8",
+  "url": "https://freespeechextremist.com/notice/AIRxLeIzncpCtsr2hs",
+  "visibility": "public"
+}

app/soapbox/features/developers/developers_menu.js

@@ -47,6 +47,14 @@ const Developers = () => {
           </Text>
         </Link>
 
+        <Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
+          <SvgIcon src={require('icons/feed.svg')} className='dark:text-gray-100' />
+
+          <Text>
+            <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
+          </Text>
+        </Link>
+
         <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
           <SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
 

app/soapbox/features/test_timeline/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { importFetchedStatuses } from 'soapbox/actions/importer';
+import { expandTimelineSuccess } from 'soapbox/actions/timelines';
+import SubNavigation from 'soapbox/components/sub_navigation';
+
+import { Column } from '../../components/ui';
+import StatusListContainer from '../ui/containers/status_list_container';
+
+const messages = defineMessages({
+  title: { id: 'column.test', defaultMessage: 'Test timeline' },
+});
+
+/**
+ * List of mock statuses to display in the timeline.
+ * These get embedded into the build, but only in this chunk, so it's okay.
+ */
+const MOCK_STATUSES: any[] = [
+  require('soapbox/__fixtures__/pleroma-status-with-poll.json'),
+  require('soapbox/__fixtures__/pleroma-status-vertical-video-without-metadata.json'),
+  require('soapbox/__fixtures__/pleroma-status-with-poll-with-emojis.json'),
+  require('soapbox/__fixtures__/pleroma-quote-of-quote-post.json'),
+  require('soapbox/__fixtures__/truthsocial-status-with-external-video.json'),
+];
+
+const timelineId = 'test';
+const onlyMedia = false;
+
+const TestTimeline: React.FC = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  React.useEffect(() => {
+    dispatch(importFetchedStatuses(MOCK_STATUSES));
+    dispatch(expandTimelineSuccess(timelineId, MOCK_STATUSES, null, false, false, false));
+  }, []);
+
+  return (
+    <Column label={intl.formatMessage(messages.title)} transparent>
+      <SubNavigation message={intl.formatMessage(messages.title)} />
+      <StatusListContainer
+        scrollKey={`${timelineId}_timeline`}
+        timelineId={`${timelineId}${onlyMedia ? ':media' : ''}`}
+        emptyMessage={<FormattedMessage id='empty_column.test' defaultMessage='The test timeline is empty.' />}
+        divideType='space'
+      />
+    </Column>
+  );
+};
+
+export default TestTimeline;

app/soapbox/features/ui/index.js

@@ -120,6 +120,7 @@ import {
   Developers,
   CreateApp,
   SettingsStore,
+  TestTimeline,
 } from './util/async-components';
 import { WrappedRoute } from './util/react_router_helpers';
 
@@ -341,6 +342,7 @@ class SwitchingColumnsArea extends React.PureComponent {
 
         <WrappedRoute path='/developers/apps/create' developerOnly page={DefaultPage} component={CreateApp} content={children} />
         <WrappedRoute path='/developers/settings_store' developerOnly page={DefaultPage} component={SettingsStore} content={children} />
+        <WrappedRoute path='/developers/timeline' developerOnly page={DefaultPage} component={TestTimeline} content={children} />
         <WrappedRoute path='/developers' page={DefaultPage} component={Developers} content={children} />
         <WrappedRoute path='/error' page={EmptyPage} component={IntentionalError} content={children} />
 

app/soapbox/features/ui/util/async-components.js

@@ -482,6 +482,10 @@ export function SettingsStore() {
   return import(/* webpackChunkName: "features/developers" */'../../developers/settings_store');
 }
 
+export function TestTimeline() {
+  return import(/* webpackChunkName: "features/test_timeline" */'../../test_timeline');
+}
+
 export function DatePicker() {
   return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker');
 }