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,13 +77,14 @@ const CachedImageContent = ({ uri }: { uri?: string }) => {
       ) : (
         <>
           {isLoading && <LoadingPlaceholder />}
+          <div className={`${isLoading ? "d-none" : "d-block"}`}>
             <img
               className={`rounded mx-auto ${isLoading ? "d-none" : "d-block"}`}
               src={cachedBlob}
               alt={"nft"}
               style={{
                 width: 150,
-              height: "auto",
+                maxHeight: 200,
               }}
               onLoad={() => {
                 setIsLoading(false);
@@ -80,6 +93,10 @@ const CachedImageContent = ({ uri }: { uri?: string }) => {
                 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);
@@ -124,7 +140,7 @@ const VideoArtContent = ({
   const content =
     likelyVideo &&
       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,8 +156,10 @@ const VideoArtContent = ({
           autoplay={true}
           muted={true}
         />
+        <ViewOriginalArtContentLink src={likelyVideo.replace("https://watch.videodelivery.net/", "")} />
       </div>
     ) : (
+      <div className={"d-block"}>
         <video
           playsInline={true}
           autoPlay={true}
@@ -156,11 +174,15 @@ const VideoArtContent = ({
           {animationURL && <source src={animationURL} type="video/mp4" />}
           {files
             ?.filter((f) => typeof f !== "string")
-          .map((f: any) => (
+            .map((f: any, index: number) => (
-            <source src={f.uri} type={f.type} />
+              <source key={index} src={f.uri} type={f.type} />
             ))}
         </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 ? (
+        <div className={"art-error-image-placeholder"}>
+          <ErrorPlaceHolder />
+          <h6 className={"header-pretitle mt-2"}>Error Loading Image</h6>
+        </div>
+      ) : (
+        <>
+          {!isLoading && <LoadingPlaceholder />}
+          <div className={`${isLoading ? "d-block" : "d-none"}`}>
             <iframe
               allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
               title={"html-content"}
               sandbox="allow-scripts"
               frameBorder="0"
               src={htmlURL}
-        className={`${loaded ? "d-block" : "d-none"}`}
               style={{ width: 320, height: 180, borderRadius: 12 }}
               onLoad={() => {
-          setLoaded(true);
+                setIsLoading(true);
               }}
               onError={() => {
-          setLoaded(true);
+                setShowError(true);
               }}
             ></iframe>
+            {htmlURL && (
+              <ViewOriginalArtContentLink src={htmlURL} />
+            )}
+          </div>
+        </>
+      )}
     </>
   );
 };