From 6b56e72f2474c68904bfbba76fdc4914ef8d414b Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Mon, 2 Jan 2023 12:20:53 -0500
Subject: [PATCH 1/3] Fix images in timelines not using the preview URL which
 can leverage Pleroma Media Preview Proxy

---
 app/soapbox/components/media-gallery.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 722f5540a0..0ff8bb6f56 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -171,7 +171,7 @@ const Item: React.FC<IItem> = ({
       >
         <StillImage
           className='w-full h-full'
-          src={attachment.url}
+          src={attachment.preview_url}
           alt={attachment.description}
           letterboxed={letterboxed}
           showExt

From 02188118e7534b35c3573de39487791cd726f412 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 Jan 2023 11:52:05 -0600
Subject: [PATCH 2/3] Let media preview be configurable

---
 app/soapbox/components/media-gallery.tsx          |  5 +++--
 app/soapbox/features/soapbox-config/index.tsx     | 12 ++++++++++++
 app/soapbox/normalizers/soapbox/soapbox-config.ts |  5 +++++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 0ff8bb6f56..3d282e9a65 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -5,7 +5,7 @@ import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
 import StillImage from 'soapbox/components/still-image';
 import { MIMETYPE_ICONS } from 'soapbox/components/upload';
-import { useSettings } from 'soapbox/hooks';
+import { useSettings, useSoapboxConfig } from 'soapbox/hooks';
 import { Attachment } from 'soapbox/types/entities';
 import { truncateFilename } from 'soapbox/utils/media';
 
@@ -72,6 +72,7 @@ const Item: React.FC<IItem> = ({
 }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif') === true;
+  const { mediaPreview } = useSoapboxConfig();
 
   const handleMouseEnter: React.MouseEventHandler<HTMLVideoElement> = ({ currentTarget: video }) => {
     if (hoverToPlay()) {
@@ -171,7 +172,7 @@ const Item: React.FC<IItem> = ({
       >
         <StillImage
           className='w-full h-full'
-          src={attachment.preview_url}
+          src={mediaPreview ? attachment.preview_url : attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
           showExt
diff --git a/app/soapbox/features/soapbox-config/index.tsx b/app/soapbox/features/soapbox-config/index.tsx
index dc1ebdb0e7..bb96fd6bc9 100644
--- a/app/soapbox/features/soapbox-config/index.tsx
+++ b/app/soapbox/features/soapbox-config/index.tsx
@@ -50,6 +50,8 @@ const messages = defineMessages({
   singleUserModeHint: { id: 'soapbox_config.single_user_mode_hint', defaultMessage: 'Front page will redirect to a given user profile.' },
   singleUserModeProfileLabel: { id: 'soapbox_config.single_user_mode_profile_label', defaultMessage: 'Main user handle' },
   singleUserModeProfileHint: { id: 'soapbox_config.single_user_mode_profile_hint', defaultMessage: '@handle' },
+  mediaPreviewLabel: { id: 'soapbox_config.media_preview_label', defaultMessage: 'Prefer preview media for thumbnails' },
+  mediaPreviewHint: { id: 'soapbox_config.media_preview_hint', defaultMessage: 'Some backends provide an optimized version of media for display in timelines. However, these preview images may be too small without additional configuration.' },
   feedInjectionLabel: { id: 'soapbox_config.feed_injection_label', defaultMessage: 'Feed injection' },
   feedInjectionHint: { id: 'soapbox_config.feed_injection_hint', defaultMessage: 'Inject the feed with additional content, such as suggested profiles.' },
   tileServerLabel: { id: 'soapbox_config.tile_server_label', defaultMessage: 'Map tile server' },
@@ -250,6 +252,16 @@ const SoapboxConfig: React.FC = () => {
               />
             </ListItem>
 
+            <ListItem
+              label={intl.formatMessage(messages.mediaPreviewLabel)}
+              hint={intl.formatMessage(messages.mediaPreviewHint)}
+            >
+              <Toggle
+                checked={soapbox.mediaPreview === true}
+                onChange={handleChange(['mediaPreview'], (e) => e.target.checked)}
+              />
+            </ListItem>
+
             <ListItem label={intl.formatMessage(messages.displayCtaLabel)}>
               <Toggle
                 checked={soapbox.displayCta === true}
diff --git a/app/soapbox/normalizers/soapbox/soapbox-config.ts b/app/soapbox/normalizers/soapbox/soapbox-config.ts
index b221afabef..31e24aa1c8 100644
--- a/app/soapbox/normalizers/soapbox/soapbox-config.ts
+++ b/app/soapbox/normalizers/soapbox/soapbox-config.ts
@@ -115,6 +115,11 @@ export const SoapboxConfigRecord = ImmutableRecord({
   feedInjection: true,
   tileServer: '',
   tileServerAttribution: '',
+  /**
+   * Whether to use the preview URL for media thumbnails.
+   * On some platforms this can be too blurry without additional configuration.
+   */
+  mediaPreview: false,
 }, 'SoapboxConfig');
 
 type SoapboxConfigMap = ImmutableMap<string, any>;

From 5c9c75e2d75040e4229a0586f69416e0411aedc8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 2 Jan 2023 11:53:50 -0600
Subject: [PATCH 3/3] CHANGELOG: media preview configuration

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index df489f6a26..e9b420dd4c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Compatibility: rudimentary support for Takahē.
 - UI: added backdrop blur behind modals.
+- Admin: let admins configure media preview for attachment thumbnails.
 
 ### Changed
 - Posts: letterbox images to 19:6 again.