Merge pull request #1562 from blockscout/fe-1559

fix svg 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,29 @@ interface Props {
   onClose: () => void;
 }
 
-const NftImageWithFullscreen = ({ src, isOpen, onClose }: Props) => {
+const NftImageFullscreen = ({ src, isOpen, onClose }: Props) => {
+  const imgRef = React.useRef<HTMLImageElement>(null);
+  const [ hasDimentions, setHasDimentions ] = React.useState<boolean>(true);
+
+  const checkWidth = React.useCallback(() => {
+    if (imgRef.current?.getBoundingClientRect().width === 0) {
+      setHasDimentions(false);
+    }
+  }, [ ]);
+
   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 }
+        sx={ hasDimentions ? {} : { width: '90vw', height: '90vh' } }
+      />
     </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;