Added a View Original link for NFT assets (#20709)

Co-authored-by: Will Roeder <roederw@wills-mbp.lan>

explorer/src/components/common/NFTArt.tsx

@@ -30,6 +30,18 @@ const ErrorPlaceHolder = () => (
   <img src={ErrorLogo} width="120" height="120" alt="Solana Logo" />
 );
 
+const ViewOriginalArtContentLink = ({ src }: { src: string }) => {
+  if (!src) {
+    return null;
+  }
+
+  return (
+    <h6 className={"header-pretitle d-flex justify-content-center mt-2"}>
+      <a href={src}>VIEW ORIGINAL</a>
+    </h6>
+  );
+}
+
 const CachedImageContent = ({ uri }: { uri?: string }) => {
   const [isLoading, setIsLoading] = useState<boolean>(true);
   const [showError, setShowError] = useState<boolean>(false);
@@ -65,21 +77,26 @@ const CachedImageContent = ({ uri }: { uri?: string }) => {
       ) : (
         <>
           {isLoading && <LoadingPlaceholder />}
-          <img
+          <div className={`${isLoading ? "d-none" : "d-block"}`}>
-            className={`rounded mx-auto ${isLoading ? "d-none" : "d-block"}`}
+            <img
-            src={cachedBlob}
+              className={`rounded mx-auto ${isLoading ? "d-none" : "d-block"}`}
-            alt={"nft"}
+              src={cachedBlob}
-            style={{
+              alt={"nft"}
-              width: 150,
+              style={{
-              height: "auto",
+                width: 150,
-            }}
+                maxHeight: 200,
-            onLoad={() => {
+              }}
-              setIsLoading(false);
+              onLoad={() => {
-            }}
+                setIsLoading(false);
-            onError={() => {
+              }}
-              setShowError(true);
+              onError={() => {
-            }}
+                setShowError(true);
-          />
+              }}
+            />
+            {uri && (
+              <ViewOriginalArtContentLink src={uri} />
+            )}
+          </div>
         </>
       )}
     </>
@@ -98,7 +115,6 @@ const VideoArtContent = ({
   active?: boolean;
 }) => {
   const [playerApi, setPlayerApi] = useState<StreamPlayerApi>();
-
   const playerRef = useCallback(
     (ref) => {
       setPlayerApi(ref);
@@ -123,8 +139,8 @@ const VideoArtContent = ({
 
   const content =
     likelyVideo &&
-    likelyVideo.startsWith("https://watch.videodelivery.net/") ? (
+      likelyVideo.startsWith("https://watch.videodelivery.net/") ? (
-      <div className={"square"}>
+      <div className={"d-block"}>
         <Stream
           streamRef={(e: any) => playerRef(e)}
           src={likelyVideo.replace("https://watch.videodelivery.net/", "")}
@@ -140,27 +156,33 @@ const VideoArtContent = ({
           autoplay={true}
           muted={true}
         />
+        <ViewOriginalArtContentLink src={likelyVideo.replace("https://watch.videodelivery.net/", "")} />
       </div>
     ) : (
-      <video
+      <div className={"d-block"}>
-        playsInline={true}
+        <video
-        autoPlay={true}
+          playsInline={true}
-        muted={true}
+          autoPlay={true}
-        controls={true}
+          muted={true}
-        controlsList="nodownload"
+          controls={true}
-        style={{ borderRadius: 12, width: 320, height: 180 }}
+          controlsList="nodownload"
-        loop={true}
+          style={{ borderRadius: 12, width: 320, height: 180 }}
-        poster={uri}
+          loop={true}
-      >
+          poster={uri}
-        {likelyVideo && <source src={likelyVideo} type="video/mp4" />}
+        >
-        {animationURL && <source src={animationURL} type="video/mp4" />}
+          {likelyVideo && <source src={likelyVideo} type="video/mp4" />}
-        {files
+          {animationURL && <source src={animationURL} type="video/mp4" />}
-          ?.filter((f) => typeof f !== "string")
+          {files
-          .map((f: any) => (
+            ?.filter((f) => typeof f !== "string")
-            <source src={f.uri} type={f.type} />
+            .map((f: any, index: number) => (
-          ))}
+              <source key={index} src={f.uri} type={f.type} />
-      </video>
+            ))}
-    );
+        </video>
+        {(likelyVideo || animationURL) && (
+          <ViewOriginalArtContentLink src={(likelyVideo || animationURL)!} />
+        )}
+      </div>
+    )
 
   return content;
 };
@@ -172,7 +194,8 @@ const HTMLContent = ({
   animationUrl?: string;
   files?: (MetadataJsonFile | string)[];
 }) => {
-  const [loaded, setLoaded] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [showError, setShowError] = useState<boolean>(false);
   const htmlURL =
     files && files.length > 0 && typeof files[0] === "string"
       ? files[0]
@@ -180,22 +203,35 @@ const HTMLContent = ({
 
   return (
     <>
-      {!loaded && <LoadingPlaceholder />}
+      {showError ? (
-      <iframe
+        <div className={"art-error-image-placeholder"}>
-        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+          <ErrorPlaceHolder />
-        title={"html-content"}
+          <h6 className={"header-pretitle mt-2"}>Error Loading Image</h6>
-        sandbox="allow-scripts"
+        </div>
-        frameBorder="0"
+      ) : (
-        src={htmlURL}
+        <>
-        className={`${loaded ? "d-block" : "d-none"}`}
+          {!isLoading && <LoadingPlaceholder />}
-        style={{ width: 320, height: 180, borderRadius: 12 }}
+          <div className={`${isLoading ? "d-block" : "d-none"}`}>
-        onLoad={() => {
+            <iframe
-          setLoaded(true);
+              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-        }}
+              title={"html-content"}
-        onError={() => {
+              sandbox="allow-scripts"
-          setLoaded(true);
+              frameBorder="0"
-        }}
+              src={htmlURL}
-      ></iframe>
+              style={{ width: 320, height: 180, borderRadius: 12 }}
+              onLoad={() => {
+                setIsLoading(true);
+              }}
+              onError={() => {
+                setShowError(true);
+              }}
+            ></iframe>
+            {htmlURL && (
+              <ViewOriginalArtContentLink src={htmlURL} />
+            )}
+          </div>
+        </>
+      )}
     </>
   );
 };