From 149d224557661f96b4ffb45dcd581d288b0e63c5 Mon Sep 17 00:00:00 2001
From: Will Roeder <roederw@outlook.com>
Date: Wed, 13 Oct 2021 12:10:15 -0700
Subject: [PATCH] Fixed video NFT asset dimensions and vertically centered ALL
 NFT art (#20666)

---
 .../src/components/account/MetaplexNFTHeader.tsx     |  2 +-
 explorer/src/metaplex/Art/Art.tsx                    | 12 ++++++------
 explorer/src/scss/_solana.scss                       |  1 -
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/explorer/src/components/account/MetaplexNFTHeader.tsx b/explorer/src/components/account/MetaplexNFTHeader.tsx
index 3e5cbab9e..7275dc193 100644
--- a/explorer/src/components/account/MetaplexNFTHeader.tsx
+++ b/explorer/src/components/account/MetaplexNFTHeader.tsx
@@ -17,7 +17,7 @@ export function NFTHeader({
   const metadata = nftData.metadata;
   return (
     <div className="row align-items-begin">
-      <div className="col-auto ml-2">
+      <div className="col-auto ml-2 d-flex align-items-center">
         <ArtContent metadata={metadata} pubkey={address} />
       </div>
 
diff --git a/explorer/src/metaplex/Art/Art.tsx b/explorer/src/metaplex/Art/Art.tsx
index a9d2351a7..ccc6e2a0a 100644
--- a/explorer/src/metaplex/Art/Art.tsx
+++ b/explorer/src/metaplex/Art/Art.tsx
@@ -127,13 +127,13 @@ const VideoArtContent = ({
           streamRef={(e: any) => playerRef(e)}
           src={likelyVideo.replace("https://watch.videodelivery.net/", "")}
           loop={true}
-          height={150}
-          width={150}
+          height={180}
+          width={320}
           controls={false}
           style={{ borderRadius: 12 }}
           videoDimensions={{
-            videoHeight: 150,
-            videoWidth: 150,
+            videoWidth: 320,
+            videoHeight: 180,
           }}
           autoplay={true}
           muted={true}
@@ -146,7 +146,7 @@ const VideoArtContent = ({
         muted={true}
         controls={true}
         controlsList="nodownload"
-        style={{ borderRadius: 12 }}
+        style={{ borderRadius: 12, width: 320, height: 180 }}
         loop={true}
         poster={uri}
       >
@@ -186,7 +186,7 @@ const HTMLContent = ({
         frameBorder="0"
         src={htmlURL}
         className={`${loaded ? "d-block" : "d-none"}`}
-        style={{ width: 150, borderRadius: 12 }}
+        style={{ width: 320, height: 180, borderRadius: 12 }}
         onLoad={() => {
           setLoaded(true);
         }}
diff --git a/explorer/src/scss/_solana.scss b/explorer/src/scss/_solana.scss
index 5e4c7d107..5c202bb97 100644
--- a/explorer/src/scss/_solana.scss
+++ b/explorer/src/scss/_solana.scss
@@ -427,5 +427,4 @@ p.updated-time {
   align-items: center;
   justify-content: center;
   width: 150px;
-  margin-top: 20px;
 }