feat: fallback to unproxied image on proxy failure

src/features/post/inFeed/usePostSrc.ts

@@ -2,16 +2,17 @@ import { PostView } from "lemmy-js-client";
 
 import { IMAGE_FAILED } from "#/features/media/imageSlice";
 import { findLoneImage } from "#/helpers/markdown";
-import { findUrlMediaType, forceSecureUrl } from "#/helpers/url";
-import useSupported from "#/helpers/useSupported";
+import {
+  findUrlMediaType,
+  forceSecureUrl,
+  getImageProxyUrl,
+} from "#/helpers/url";
 import { useAppSelector } from "#/store";
 
 export default function usePostSrc(
   post: PostView | undefined,
 ): string | undefined {
-  const thumbnailIsFullsize = useSupported("Fullsize thumbnails");
-
-  const src = getPostMedia(post, thumbnailIsFullsize);
+  const src = getPostMedia(post);
   const primaryFailed = useAppSelector(
     (state) => src && state.image.loadedBySrc[src[0]] === IMAGE_FAILED,
   );
@@ -25,16 +26,15 @@ export default function usePostSrc(
 
 function getPostMedia(
   post: PostView | undefined,
-  thumbnailIsFullsize: boolean,
 ): [string] | [string, string] | undefined {
-  return getMixedContentPostMedia(post, thumbnailIsFullsize)?.map(
-    forceSecureUrl,
-  ) as [string] | [string, string] | undefined;
+  return getMixedContentPostMedia(post)?.map(forceSecureUrl) as
+    | [string]
+    | [string, string]
+    | undefined;
 }
 
 function getMixedContentPostMedia(
   post: PostView | undefined,
-  thumbnailIsFullsize: boolean,
 ): [string] | [string, string] | undefined {
   if (!post) return;
 
@@ -45,13 +45,10 @@ function getMixedContentPostMedia(
     );
 
     if (isUrlMedia) {
-      if (post.post.thumbnail_url) {
-        if (thumbnailIsFullsize)
-          return [post.post.thumbnail_url, post.post.url];
-      }
+      const originalUrl = getImageProxyUrl(post.post.url);
+
+      if (originalUrl) return [post.post.url, originalUrl];
 
-      // no fallback now for newer lemmy versions
-      // in the future might unwrap lemmy proxy_image param here
       return [post.post.url];
     }
   }

src/helpers/url.ts

@@ -34,21 +34,24 @@ export function parseUrl(url: string, baseUrl?: string): URL | undefined {
   }
 }
 
-export function getPotentialImageProxyPathname(
-  url: string,
-): string | undefined {
+export function getImageProxyUrl(url: string): string | undefined {
   const parsedURL = parseUrl(url);
 
   if (!parsedURL) return;
 
   if (parsedURL.pathname === "/api/v3/image_proxy") {
-    const actualImageURL = parsedURL.searchParams.get("url");
-
-    if (!actualImageURL) return;
-    return getPathname(actualImageURL);
+    return parsedURL.searchParams.get("url") ?? undefined;
   }
+}
+
+export function getPotentialImageProxyPathname(
+  url: string,
+): string | undefined {
+  const proxiedUrl = getImageProxyUrl(url);
+
+  if (proxiedUrl) return getPathname(proxiedUrl);
 
-  return parsedURL.pathname;
+  return parseUrl(url)?.pathname;
 }
 
 const imageExtensions = ["jpeg", "png", "gif", "jpg", "webp", "jxl", "avif"];

src/helpers/useSupported.ts

@@ -1,13 +1,13 @@
 import { compare, CompareOperator } from "compare-versions";
 import { memoize } from "es-toolkit";
-import { CommentSortType, PostSortType } from "lemmy-js-client";
 
 import { lemmyVersionSelector } from "#/features/auth/siteSlice";
 import { useAppSelector } from "#/store";
 
 /**
  * What version was support removed?
  */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const SUPPORTED_ON_OLDER_EXCLUSIVE = ">";
 
 /**
@@ -26,11 +26,6 @@ const memoizedCompare = memoize(
  * Default: `SUPPORTED_ON_NEWER_INCLUSIVE` (what version was support added?)
  */
 const featureVersionSupported = {
-  /**
-   * https://github.com/LemmyNet/lemmy-ui/issues/2796
-   */
-  "Fullsize thumbnails": ["0.19.6", SUPPORTED_ON_OLDER_EXCLUSIVE],
-
   /**
    * https://github.com/LemmyNet/lemmy/issues/5183
    */
@@ -57,18 +52,3 @@ export default function useSupported(feature: Feature): boolean {
 
   return memoizedCompare([version, lemmyVersion, comparator]);
 }
-
-export function is019Sort(
-  sort: PostSortType | CommentSortType | undefined,
-): boolean {
-  switch (sort) {
-    case "Controversial":
-    case "TopNineMonths":
-    case "TopThreeMonths":
-    case "TopSixMonths":
-    case "Scaled":
-      return true;
-    default:
-      return false;
-  }
-}