feat: add fullscreen option to overview nft page

meness · Mar 28, 2024 · fb37f20 · fb37f20
1 parent 9ff6608
commit fb37f20
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 30 deletions.
diff --git a/src/app/listing/@nft/(.)nft/[id]/page.tsx b/src/app/listing/@nft/(.)nft/[id]/page.tsx
@@ -8,12 +8,13 @@ import { Skeleton } from '@nextui-org/skeleton';
 import 'filepond/dist/filepond.min.css';
 import { useParams, useRouter } from 'next/navigation';
 import { replaceIPFSProtocol } from '~helpers';
-import { useNFT } from '~hooks';
+import { useFullscreen, useNFT } from '~hooks';
 
 const NFTModal = () => {
   const { id: nftID } = useParams<{ id: string }>();
   const { back } = useRouter();
   const { nft, isPending: isPendingNFT } = useNFT(BigInt(nftID));
+  const { fullscreenRef, handleFullscreen } = useFullscreen<HTMLImageElement>();
 
   const handleClose = () => {
     back();
@@ -32,20 +33,26 @@ const NFTModal = () => {
             <Skeleton className="col-span-12 h-[300px] rounded-[var(--nextui-radius-large)] sm:col-span-4" />
           )}
           {!isPendingNFT && nft && (
-            <Card className="col-span-12 h-[300px] sm:col-span-4">
-              <CardHeader className="absolute top-1 z-10 flex-col !items-start">
-                <p className="text-tiny font-bold uppercase text-white/60">{nft.name}</p>
-              </CardHeader>
-              <Image
-                src={replaceIPFSProtocol(nft.image)}
-                removeWrapper
-                alt="NFT"
-                className="z-0 h-full w-full object-cover"
-              />
-              <CardFooter className="absolute bottom-0 z-10 justify-between border-t-1 border-zinc-100/50 bg-white/30">
-                {nft.description}
-              </CardFooter>
-            </Card>
+            <button
+              type="button"
+              aria-label="See this NFT in the fullscreen mode"
+              onClick={handleFullscreen}>
+              <Card className="col-span-12 h-[300px] hover:scale-[1.01] active:scale-100 sm:col-span-4">
+                <CardHeader className="absolute top-1 z-10 flex-col !items-start">
+                  <p className="text-tiny font-bold uppercase text-white/60">{nft.name}</p>
+                </CardHeader>
+                <Image
+                  src={replaceIPFSProtocol(nft.image)}
+                  removeWrapper
+                  alt="NFT"
+                  className="z-0 h-full w-full object-cover"
+                  ref={fullscreenRef}
+                />
+                <CardFooter className="absolute bottom-0 z-10 justify-between border-t-1 border-zinc-100/50 bg-white/30">
+                  {nft.description}
+                </CardFooter>
+              </Card>
+            </button>
           )}
         </ModalBody>
         <ModalFooter>

diff --git a/src/app/listing/nft/[id]/_components/nft-card.component.tsx b/src/app/listing/nft/[id]/_components/nft-card.component.tsx
@@ -8,12 +8,13 @@ import 'filepond/dist/filepond.min.css';
 import { useParams, useRouter } from 'next/navigation';
 import { routeConst } from '~common/consts';
 import { replaceIPFSProtocol } from '~helpers';
-import { useNFT } from '~hooks';
+import { useFullscreen, useNFT } from '~hooks';
 
 export const NFTCard = () => {
   const { push } = useRouter();
   const { id: nftID } = useParams<{ id: string }>();
   const { nft, isPending: isPendingNFT } = useNFT(BigInt(nftID));
+  const { fullscreenRef, handleFullscreen } = useFullscreen<HTMLImageElement>();
 
   const handleCancelClick = () => {
     push(routeConst.listing);
@@ -28,20 +29,26 @@ export const NFTCard = () => {
           <Skeleton className="col-span-12 h-[300px] rounded-[var(--nextui-radius-large)] sm:col-span-4" />
         )}
         {!isPendingNFT && nft && (
-          <Card className="col-span-12 h-[300px] sm:col-span-4">
-            <CardHeader className="absolute top-1 z-10 flex-col !items-start">
-              <p className="text-tiny font-bold uppercase text-white/60">{nft.name}</p>
-            </CardHeader>
-            <Image
-              src={replaceIPFSProtocol(nft.image)}
-              removeWrapper
-              alt="NFT"
-              className="z-0 h-full w-full object-cover"
-            />
-            <CardFooter className="absolute bottom-0 z-10 justify-between border-t-1 border-zinc-100/50 bg-white/30">
-              {nft.description}
-            </CardFooter>
-          </Card>
+          <button
+            type="button"
+            aria-label="See this NFT in the fullscreen mode"
+            onClick={handleFullscreen}>
+            <Card className="col-span-12 h-[300px] hover:scale-[1.01] active:scale-100 sm:col-span-4">
+              <CardHeader className="absolute top-1 z-10 flex-col !items-start">
+                <p className="text-tiny font-bold uppercase text-white/60">{nft.name}</p>
+              </CardHeader>
+              <Image
+                src={replaceIPFSProtocol(nft.image)}
+                removeWrapper
+                alt="NFT"
+                className="z-0 h-full w-full object-cover"
+                ref={fullscreenRef}
+              />
+              <CardFooter className="absolute bottom-0 z-10 justify-between border-t-1 border-zinc-100/50 bg-white/30">
+                {nft.description}
+              </CardFooter>
+            </Card>
+          </button>
         )}
       </CardBody>
       <CardFooter>

diff --git a/src/hooks/index.ts b/src/hooks/index.ts
@@ -1,3 +1,4 @@
+export * from './use-fullscreen.hook';
 export * from './use-listing.hook';
 export * from './use-metadata.hook';
 export * from './use-mint.hook';

diff --git a/src/hooks/use-fullscreen.hook.ts b/src/hooks/use-fullscreen.hook.ts
@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+import toast from 'react-hot-toast';
+
+export const useFullscreen = <RefType extends HTMLElement>() => {
+  const [isInFullscreenMode, setIsInFullscreenMode] = useState(false);
+  const fullscreenRef = useRef<RefType>(null);
+
+  useEffect(() => {
+    document.addEventListener('fullscreenchange', () => {
+      if (!document.fullscreenElement) {
+        setIsInFullscreenMode(false);
+      } else if (document.fullscreenElement) {
+        setIsInFullscreenMode(true);
+      }
+    });
+  }, []);
+
+  const handleFullscreen = () => {
+    if (document.fullscreenEnabled) {
+      if (!document.fullscreenElement) {
+        fullscreenRef.current?.requestFullscreen();
+      } else if (document.fullscreenElement) {
+        document.exitFullscreen();
+      }
+    } else {
+      toast.error('Fullscreen mode is disabled');
+    }
+  };
+
+  return { isInFullscreenMode, fullscreenRef, handleFullscreen };
+};