refactor

ui/shared/nft/NftHtmlFullscreen.tsx

@@ -0,0 +1,25 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import NftMediaFullscreenModal from './NftMediaFullscreenModal';
+
+interface Props {
+  src: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+  return (
+    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+      <chakra.iframe
+        w="90vw"
+        h="90vh"
+        src={ src }
+        sandbox="allow-scripts"
+      />
+    </NftMediaFullscreenModal>
+  );
+};
+
+export default NftHtmlWithFullscreen;

ui/shared/nft/NftImageFullscreen.tsx

@@ -0,0 +1,22 @@
+import {
+  Image,
+} from '@chakra-ui/react';
+import React from 'react';
+
+import NftMediaFullscreenModal from './NftMediaFullscreenModal';
+
+interface Props {
+  src: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const NftImageWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+  return (
+    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+      <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
+    </NftMediaFullscreenModal>
+  );
+};
+
+export default NftImageWithFullscreen;

ui/shared/nft/NftMedia.tsx

@@ -1,4 +1,4 @@
-import { AspectRatio, chakra, Skeleton } from '@chakra-ui/react';
+import { AspectRatio, chakra, Skeleton, useDisclosure } from '@chakra-ui/react';
 import React from 'react';
 import { useInView } from 'react-intersection-observer';
 
@@ -9,11 +9,11 @@ import useFetch from 'lib/hooks/useFetch';
 
 import NftFallback from './NftFallback';
 import NftHtml from './NftHtml';
-import NftHtmlWithFullscreen from './NftHtmlWithFullscreen';
+import NftHtmlFullscreen from './NftHtmlFullscreen';
 import NftImage from './NftImage';
-import NftImageWithFullscreen from './NftImageWithFullscreen';
+import NftImageFullscreen from './NftImageFullscreen';
 import NftVideo from './NftVideo';
-import NftVideoWithFullscreen from './NftVideoWithFullscreen';
+import NftVideoFullscreen from './NftVideoFullscreen';
 import type { MediaType } from './utils';
 import { getPreliminaryMediaType, mediaStyleProps } from './utils';
 
@@ -76,6 +76,8 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
     setIsLoadingError(true);
   }, []);
 
+  const { isOpen, onOpen, onClose } = useDisclosure();
+
   const content = (() => {
     if (!url || isLoadingError) {
       const styleProps = withFullscreen ? {} : mediaStyleProps;
@@ -86,15 +88,39 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
       src: url,
       onLoad: handleMediaLoaded,
       onError: handleMediaLoadError,
+      ...(withFullscreen ? { onClick: onOpen } : {}),
+    };
+
+    switch (type) {
+      case 'video':
+        return <NftVideo { ...props }/>;
+      case 'html':
+        return <NftHtml { ...props }/>;
+      case 'image':
+        return <NftImage { ...props }/>;
+      default:
+        return null;
+    }
+  })();
+
+  const modal = (() => {
+    if (!url || !withFullscreen) {
+      return null;
+    }
+
+    const props = {
+      src: url,
+      isOpen,
+      onClose,
     };
 
     switch (type) {
       case 'video':
-        return withFullscreen ? <NftVideoWithFullscreen { ...props }/> : <NftVideo { ...props }/>;
+        return <NftVideoFullscreen { ...props }/>;
       case 'html':
-        return withFullscreen ? <NftHtmlWithFullscreen { ...props }/> : <NftHtml { ...props }/>;
+        return <NftHtmlFullscreen { ...props }/>;
       case 'image':
-        return withFullscreen ? <NftImageWithFullscreen { ...props }/> : <NftImage { ...props }/>;
+        return <NftImageFullscreen { ...props }/>;
       default:
         return null;
     }
@@ -117,6 +143,7 @@ const NftMedia = ({ url, className, isLoading, withFullscreen }: Props) => {
     >
       <>
         { content }
+        { modal }
         { isMediaLoading && <Skeleton position="absolute" left={ 0 } top={ 0 } w="100%" h="100%" zIndex="1"/> }
       </>
     </AspectRatio>

ui/shared/nft/NftVideoFullscreen.tsx

@@ -0,0 +1,26 @@
+import { chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import NftMediaFullscreenModal from './NftMediaFullscreenModal';
+import { videoPlayProps } from './utils';
+
+interface Props {
+  src: string;
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+  return (
+    <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
+      <chakra.video
+        { ...videoPlayProps }
+        src={ src }
+        maxH="90vh"
+        maxW="90vw"
+      />
+    </NftMediaFullscreenModal>
+  );
+};
+
+export default NftVideoWithFullscreen;