fix fullscreen

ui/shared/nft/NftHtmlFullscreen.tsx

@@ -9,7 +9,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftHtmlFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.iframe
@@ -22,4 +22,4 @@ const NftHtmlWithFullscreen = ({ src, isOpen, onClose }: Props) => {
   );
 };
 
-export default NftHtmlWithFullscreen;
+export default NftHtmlFullscreen;

ui/shared/nft/NftHtmlWithFullscreen.tsx

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

ui/shared/nft/NftImageFullscreen.tsx

@@ -11,12 +11,21 @@ interface Props {
   onClose: () => void;
 }
 
-const NftImageWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+
+  const checkWidth = React.useCallback(() => {
+    if (imgRef.current?.getBoundingClientRect().width === 0) {
+      imgRef.current.style.width = '90vw';
+      imgRef.current.style.height = '90vh';
+    }
+  }, [ ]);
+
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-      <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw"/>
+      <Image src={ src } alt="Token instance image" maxH="90vh" maxW="90vw" ref={ imgRef } onLoad={ checkWidth }/>
     </NftMediaFullscreenModal>
   );
 };
 
-export default NftImageWithFullscreen;
+export default NftImageFullscreen;

ui/shared/nft/NftImageWithFullscreen.tsx

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

ui/shared/nft/NftVideoFullscreen.tsx

@@ -10,7 +10,7 @@ interface Props {
   onClose: () => void;
 }
 
-const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
   return (
     <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
       <chakra.video
@@ -23,4 +23,4 @@ const NftVideoWithFullscreen = ({ src, isOpen, onClose }: Props) => {
   );
 };
 
-export default NftVideoWithFullscreen;
+export default NftVideoFullscreen;

ui/shared/nft/NftVideoWithFullscreen.tsx

-import {
-  chakra,
-  useDisclosure,
-} from '@chakra-ui/react';
-import React from 'react';
-
-import NftMediaFullscreenModal from './NftMediaFullscreenModal';
-import NftVideo from './NftVideo';
-import { videoPlayProps } from './utils';
-
-interface Props {
-  src: string;
-  onLoad: () => void;
-  onError: () => void;
-}
-
-const NftVideoWithFullscreen = ({ src, onLoad, onError }: Props) => {
-  const { isOpen, onOpen, onClose } = useDisclosure();
-
-  return (
-    <>
-      <NftVideo src={ src } onLoad={ onLoad } onError={ onError } onClick={ onOpen }/>
-      <NftMediaFullscreenModal isOpen={ isOpen } onClose={ onClose }>
-        <chakra.video
-          { ...videoPlayProps }
-          src={ src }
-          onCanPlayThrough={ onLoad }
-          onError={ onError }
-          maxH="90vh"
-          maxW="90vw"
-        />
-      </NftMediaFullscreenModal>
-    </>
-  );
-};
-
-export default NftVideoWithFullscreen;