fix: default media to square (#1548)

coinbase · Oct 31, 2024 · 72dfc41 · 72dfc41
1 parent 5b822f2
commit 72dfc41
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 4 deletions.
diff --git a/.changeset/kind-stingrays-cross.md 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
@@ -6,13 +6,15 @@ import { useNFTContext } from '../NFTProvider';
 
 type NFTImageReact = {
   className?: string;
+  square?: boolean;
   onLoading?: (mediaUrl: string) => void;
   onLoaded?: () => void;
   onError?: (error: NFTError) => void;
 };
 
 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
@@ -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
@@ -6,13 +6,15 @@ import { useNFTContext } from '../NFTProvider';
 
 type NFTVideoReact = {
   className?: string;
+  square?: boolean;
   onLoading?: (mediaUrl: string) => void;
   onLoaded?: () => void;
   onError?: (error: NFTError) => void;
 };
 
 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}