fix: broken thumbnails fixed and fallback images added

apps/web/src/components/Profile/PostsTable.tsx

@@ -1,5 +1,5 @@
+import Thumbnail from "@components/UI/Thumbnail";
 import getPublicationRevenue from "@lib/getPublicationRevenue";
-import getPublicationThumbnail from "@lib/getPublicationThumbnail";
 import getTokenLogo from "@lib/getTokenLogo";
 import { toTitleCase } from "@lib/toTitleCase";
 import { createColumnHelper } from "@tanstack/react-table";
@@ -88,15 +88,7 @@ const PostsTable: FC<Props> = ({ className, profileId }) => {
                 target={"_blank"}
               >
                 <div className="flex space-x-3">
-                  {info.getValue() && info.getValue()?.metadata?.media[0] ? (
-                    <img
-                      src={getPublicationThumbnail(info.getValue())}
-                      alt={info.getValue().id}
-                      className="min-w-[96px] max-w-[96px] min-h-[48px] max-h-[48px] rounded-sm object-cover"
-                    />
-                  ) : (
-                    <div className="bg-slate-100 border border-slate-200 min-w-[96px] min-h-[48px] max-h-[48px] rounded-sm" />
-                  )}
+                  <Thumbnail publication={info.getValue()} />
                   <div className="flex flex-col">
                     <p className="line-clamp-1 font-light text-sm">
                       {info.getValue()?.metadata?.content}

apps/web/src/components/UI/Thumbnail.tsx

@@ -0,0 +1,60 @@
+import { MicrophoneIcon, PencilSquareIcon } from "@heroicons/react/24/outline";
+import getPublicationThumbnail from "@lib/getPublicationThumbnail";
+import type { Publication } from "lens";
+import type { FC } from "react";
+
+interface Props {
+  publication: Publication;
+}
+
+const Thumbnail: FC<Props> = ({ publication }) => {
+  const urlOrType = getPublicationThumbnail(publication);
+  switch (urlOrType.type) {
+    case "audio":
+      return (
+        <div className="bg-slate-100 border border-slate-200 min-w-[96px] min-h-[48px] max-h-[48px] rounded-sm">
+          <div className="min-w-[96px] max-w-[96px] min-h-[48px] max-h-[48px] flex justify-center items-center">
+            <MicrophoneIcon
+              className="text-slate-400"
+              height={"40px"}
+              width={"40px"}
+            />
+          </div>
+        </div>
+      );
+    case "video":
+      return (
+        <img
+          src={urlOrType.url}
+          alt={publication.id}
+          onError={({ currentTarget }) => {
+            currentTarget.onerror = null;
+            currentTarget.src = "/video-fallback.png";
+          }}
+          className="min-w-[96px] max-w-[96px] min-h-[48px] max-h-[48px] rounded-sm object-cover"
+        />
+      );
+    case "image":
+      return (
+        <img
+          src={urlOrType.url}
+          alt={publication.id}
+          className="min-w-[96px] max-w-[96px] min-h-[48px] max-h-[48px] rounded-sm object-cover"
+        />
+      );
+    default:
+      return (
+        <div className="bg-slate-100 border border-slate-200 min-w-[96px] min-h-[48px] max-h-[48px] rounded-sm">
+          <div className="min-w-[96px] max-w-[96px] min-h-[48px] max-h-[48px] flex justify-center items-center">
+            <PencilSquareIcon
+              className="text-slate-400"
+              height={"40px"}
+              width={"40px"}
+            />
+          </div>
+        </div>
+      );
+  }
+};
+
+export default Thumbnail;

apps/web/src/lib/getPublicationThumbnail.ts

@@ -1,15 +1,46 @@
+import type { Publication } from "lens";
+
 import getIPFSLink from "./getIPFSLink";
 
+const getThumbnailUrl = (publication: Publication): string => {
+  const url =
+    publication.metadata?.cover?.original.url || publication.metadata?.image;
+  return url;
+};
+
 /**
  *
  * @param publication - Publication object
  * @returns publication image url
  */
-const getPublicationThumbnail = (publication: any): string => {
-  if (!publication?.metadata?.media) {
-    return "";
+const getPublicationThumbnail = (
+  publication: Publication
+): {
+  url: string;
+  type: "non-media" | "audio" | "video" | "image";
+} => {
+  if (publication?.metadata?.media[0]?.original?.mimeType.startsWith("video")) {
+    return {
+      type: "video",
+      url: getIPFSLink(getThumbnailUrl(publication)),
+    };
+  }
+  if (publication?.metadata?.media[0]?.original?.mimeType.startsWith("audio")) {
+    return {
+      type: "audio",
+      url: getIPFSLink(getThumbnailUrl(publication)),
+    };
+  }
+  if (publication?.metadata?.media[0]?.original?.mimeType.startsWith("image")) {
+    return {
+      type: "image",
+      url: getIPFSLink(getThumbnailUrl(publication)),
+    };
   }
-  return getIPFSLink(publication?.metadata?.media[0]?.original?.url ?? "");
+  return {
+    type: "non-media",
+    url: getIPFSLink(publication?.metadata?.media[0]?.original?.url ?? ""),
+  };
 };
 
 export default getPublicationThumbnail;