Add fallback post src logic

src/features/media/gallery/Media.tsx

@@ -38,15 +38,19 @@ const Media = forwardRef<
 
 export default memo(Media);
 
-export function getPostMedia(post: PostView): string | undefined {
-  if (post.post.thumbnail_url) return post.post.thumbnail_url;
-
+export function getPostMedia(
+  post: PostView,
+): [string] | [string, string] | undefined {
   if (post.post.url && isUrlMedia(post.post.url)) {
-    return post.post.url;
+    if (post.post.thumbnail_url) {
+      return [post.post.thumbnail_url, post.post.url];
+    }
+
+    return [post.post.url];
   }
 
-  if (post.post.thumbnail_url) return post.post.thumbnail_url;
+  if (post.post.thumbnail_url) return [post.post.thumbnail_url];
 
   const loneImage = post.post.body && findLoneImage(post.post.body);
-  if (loneImage) return loneImage.url;
+  if (loneImage) return [loneImage.url];
 }

src/features/post/inFeed/compact/CompactFeedPostMedia.tsx

@@ -1,11 +1,12 @@
-import { ComponentProps, useMemo } from "react";
-import Media, { getPostMedia } from "../../../media/gallery/Media";
+import { ComponentProps } from "react";
+import Media from "../../../media/gallery/Media";
 import { PostView } from "lemmy-js-client";
+import usePostSrc from "../usePostSrc";
 
 export default function CompactFeedPostMedia(
   props: Omit<ComponentProps<typeof Media>, "src"> & { post: PostView },
 ) {
-  const src = useMemo(() => getPostMedia(props.post), [props.post]);
+  const src = usePostSrc(props.post);
 
   if (src) return <Media {...props} src={src} />;
 }

src/features/post/inFeed/large/media/LargeFeedPostMedia.tsx

@@ -1,16 +1,16 @@
-import { getPostMedia } from "../../../../media/gallery/Media";
-import { ComponentProps, useMemo } from "react";
+import { ComponentProps } from "react";
 import LargeFeedMedia from "./LargeFeedMedia";
 import LargeFeedRedgifMedia from "../../../../media/external/redgifs/LargeFeedRedgifMedia";
 import { isRedgif } from "../../../../media/external/redgifs/helpers";
 import { PostView } from "lemmy-js-client";
+import usePostSrc from "../../usePostSrc";
 
 export default function LargeFeedPostMedia(
   props: Omit<ComponentProps<typeof LargeFeedMedia>, "src"> & {
     post: PostView;
   },
 ) {
-  const src = useMemo(() => getPostMedia(props.post), [props.post]);
+  const src = usePostSrc(props.post);
 
   if (props.post.post.url && isRedgif(props.post.post.url))
     return <LargeFeedRedgifMedia url={props.post.post.url} {...props} />;

src/features/post/inFeed/usePostSrc.ts

@@ -0,0 +1,18 @@
+import { PostView } from "lemmy-js-client";
+import { getPostMedia } from "../../media/gallery/Media";
+import { useMemo } from "react";
+import { useAppSelector } from "../../../store";
+import { IMAGE_FAILED } from "./large/imageSlice";
+
+export default function usePostSrc(post: PostView): string | undefined {
+  const src = useMemo(() => getPostMedia(post), [post]);
+  const primaryFailed = useAppSelector(
+    (state) => src && state.image.loadedBySrc[src[0]] === IMAGE_FAILED,
+  );
+
+  if (!src) return;
+
+  if (primaryFailed && src[1]) return src[1];
+
+  return src[0];
+}