From ad00cfa5a178789fc6e98b944a8c4f6ddf290190 Mon Sep 17 00:00:00 2001 From: Sagar Gajare <56780589+Sagargajare@users.noreply.github.com> Date: Sat, 28 Jan 2023 22:31:11 +0530 Subject: [PATCH] fix: broken thumbnails fixed and fallback images added --- apps/web/public/fallback.png | Bin 0 -> 1365 bytes apps/web/public/video-fallback.png | Bin 0 -> 3438 bytes .../web/src/components/Profile/PostsTable.tsx | 12 +--- apps/web/src/components/UI/Thumbnail.tsx | 60 ++++++++++++++++++ apps/web/src/lib/getPublicationThumbnail.ts | 39 ++++++++++-- 5 files changed, 97 insertions(+), 14 deletions(-) create mode 100644 apps/web/public/fallback.png create mode 100644 apps/web/public/video-fallback.png create mode 100644 apps/web/src/components/UI/Thumbnail.tsx diff --git a/apps/web/public/fallback.png b/apps/web/public/fallback.png new file mode 100644 index 0000000000000000000000000000000000000000..1a4f71fda928164c1acde002b8bf745638fb73a5 GIT binary patch literal 1365 zcmb_cJ#W)M7m)Y?AdGN*E5MepiX*=pLYy!#qdv)8hylUK zR%Nv)%8IC#O=;f|yJOE_J|;C}!~cktUWmG+ivha;c>2%8U$)8BuC7 zOta9WESjpRGn%fHlykaPmNSFoa2Q|ryRgk%vDFN=r%SM=#G>muX;2cOAC=4^4Ot2t zNXwt63c)N*K{s@h5Xsm0!|htnlao^{LqRiAqMLOWJ;DuYnc_ z`9*LOgxF-T-v_kllhFTFcxhK=@f~_c41$3MpfDpTTtBS)zH83`?=~={{ptgslD>}i zHSKUIn*&tHCJFZF_z3Bo7(dxW;AHS#-CcQtO4+vT2(tp9JtH|~%=YQLYp_K^*~+WboO`T54ZU$yY5 A?*IS* literal 0 HcmV?d00001 diff --git a/apps/web/public/video-fallback.png b/apps/web/public/video-fallback.png new file mode 100644 index 0000000000000000000000000000000000000000..8ea763a23255f14c8682de99788ddd832b1a3f9c GIT binary patch literal 3438 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 D5{b^n literal 0 HcmV?d00001 diff --git a/apps/web/src/components/Profile/PostsTable.tsx b/apps/web/src/components/Profile/PostsTable.tsx index 97ad86e..f91beb4 100644 --- a/apps/web/src/components/Profile/PostsTable.tsx +++ b/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 = ({ className, profileId }) => { target={"_blank"} >
- {info.getValue() && info.getValue()?.metadata?.media[0] ? ( - {info.getValue().id} - ) : ( -
- )} +

{info.getValue()?.metadata?.content} diff --git a/apps/web/src/components/UI/Thumbnail.tsx b/apps/web/src/components/UI/Thumbnail.tsx new file mode 100644 index 0000000..a67f62d --- /dev/null +++ b/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 = ({ publication }) => { + const urlOrType = getPublicationThumbnail(publication); + switch (urlOrType.type) { + case "audio": + return ( +

+
+ +
+
+ ); + case "video": + return ( + {publication.id} { + 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 ( + {publication.id} + ); + default: + return ( +
+
+ +
+
+ ); + } +}; + +export default Thumbnail; diff --git a/apps/web/src/lib/getPublicationThumbnail.ts b/apps/web/src/lib/getPublicationThumbnail.ts index 5c23341..27a2a88 100644 --- a/apps/web/src/lib/getPublicationThumbnail.ts +++ b/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;