Merge branch 'fix/image-previews' into 'develop'

Fix images in timelines not using the preview URL which can leverage Pleroma Media Preview Proxy

See merge request soapbox-pub/soapbox!2110

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.

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.url}
+          src={mediaPreview ? attachment.preview_url : attachment.url}
           alt={attachment.description}
           letterboxed={letterboxed}
           showExt

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}

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>;