From 72dfc41177e4c04cb87e514dd6ae6bfabaa6ded4 Mon Sep 17 00:00:00 2001
From: Adam <alessey@gmail.com>
Date: Thu, 31 Oct 2024 15:06:37 -0400
Subject: [PATCH] fix: default media to square (#1548)

---
 .changeset/kind-stingrays-cross.md   |  5 +++++
 src/nft/components/view/NFTImage.tsx |  8 +++++++-
 src/nft/components/view/NFTMedia.tsx | 13 +++++++++++--
 src/nft/components/view/NFTVideo.tsx | 10 +++++++++-
 4 files changed, 32 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/kind-stingrays-cross.md

diff --git a/.changeset/kind-stingrays-cross.md b/.changeset/kind-stingrays-cross.md
new file mode 100644
index 0000000000..2be17406ef
--- /dev/null
+++ b/.changeset/kind-stingrays-cross.md
@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-fix: Add media square prop, default to true. By @alessey #1548
diff --git a/src/nft/components/view/NFTImage.tsx b/src/nft/components/view/NFTImage.tsx
index 2a844c82b1..27f609c620 100644
--- a/src/nft/components/view/NFTImage.tsx
+++ b/src/nft/components/view/NFTImage.tsx
@@ -6,6 +6,7 @@ import { useNFTContext } from '../NFTProvider';
 
 type NFTImageReact = {
   className?: string;
+  square?: boolean;
   onLoading?: (mediaUrl: string) => void;
   onLoaded?: () => void;
   onError?: (error: NFTError) => void;
@@ -13,6 +14,7 @@ type NFTImageReact = {
 
 export function NFTImage({
   className,
+  square = true,
   onLoading,
   onLoaded,
   onError,
@@ -83,7 +85,11 @@ export function NFTImage({
         src={imageUrl}
         alt={description}
         decoding="async"
-        className={`max-h-[450px] transition-[opacity] duration-500 ease-in-out ${loaded ? 'opacity-100' : 'opacity-0'}`}
+        className={cn(
+          'max-h-[450px] transition-[opacity] duration-500 ease-in-out',
+          `${loaded ? 'opacity-100' : 'opacity-0'}`,
+          { 'h-full w-full object-cover': square },
+        )}
         onTransitionEnd={handleTransitionEnd}
       />
     </div>
diff --git a/src/nft/components/view/NFTMedia.tsx b/src/nft/components/view/NFTMedia.tsx
index 02534c39ce..617ef46bf8 100644
--- a/src/nft/components/view/NFTMedia.tsx
+++ b/src/nft/components/view/NFTMedia.tsx
@@ -6,7 +6,12 @@ import { NFTAudio } from './NFTAudio';
 import { NFTImage } from './NFTImage';
 import { NFTVideo } from './NFTVideo';
 
-export function NFTMedia() {
+type NFTMediaReact = {
+  className?: string;
+  square?: boolean;
+};
+
+export function NFTMedia({ className, square }: NFTMediaReact) {
   const { mimeType } = useNFTContext();
   const { type, updateLifecycleStatus } = useNFTLifecycleContext();
 
@@ -57,6 +62,8 @@ export function NFTMedia() {
     case MediaType.Video:
       return (
         <NFTVideo
+          className={className}
+          square={square}
           onLoading={handleLoading}
           onLoaded={handleLoaded}
           onError={handleError}
@@ -65,7 +72,7 @@ export function NFTMedia() {
     case MediaType.Audio:
       return (
         <div className="relative w-full">
-          <NFTImage />
+          <NFTImage className={className} square={square} />
           <div className="absolute bottom-4 mx-auto w-full">
             <NFTAudio />
           </div>
@@ -75,6 +82,8 @@ export function NFTMedia() {
       // fallback to image
       return (
         <NFTImage
+          className={className}
+          square={square}
           onLoading={handleLoading}
           onLoaded={handleLoaded}
           onError={handleError}
diff --git a/src/nft/components/view/NFTVideo.tsx b/src/nft/components/view/NFTVideo.tsx
index dff564b5ef..1e43cf138b 100644
--- a/src/nft/components/view/NFTVideo.tsx
+++ b/src/nft/components/view/NFTVideo.tsx
@@ -6,6 +6,7 @@ import { useNFTContext } from '../NFTProvider';
 
 type NFTVideoReact = {
   className?: string;
+  square?: boolean;
   onLoading?: (mediaUrl: string) => void;
   onLoaded?: () => void;
   onError?: (error: NFTError) => void;
@@ -13,6 +14,7 @@ type NFTVideoReact = {
 
 export function NFTVideo({
   className,
+  square = true,
   onLoading,
   onLoaded,
   onError,
@@ -45,10 +47,16 @@ export function NFTVideo({
   }
 
   return (
-    <div className={cn('max-h-350 w-350 max-w-350', className)}>
+    <div
+      className={cn(
+        'relative flex h-[450px] max-h-screen items-center justify-center',
+        className,
+      )}
+    >
       <video
         ref={videoRef}
         data-testid="ockNFTVideo"
+        className={cn({ 'h-full w-full object-cover': square })}
         poster={imageUrl}
         controls={true}
         loop={true}